扁平化設計:折頁

7.jpg
翻頁效果也是很常見的扁平化小技巧,簡單幾個步驟就能完成了。請接著扁平化設計:高光、陰影 繼續做喔!

  1. 建立新圖層,選取整個圓角矩型。
    1.jpg

  2. 在新圖層上建立遮色片。
    2.jpg

  3. 將整個圖層填滿黑色。
    3.jpg

  4. 框選半個 icon,512px 的一半就是 256px。
    4.jpg

  5. 將框選的範圍刪除。
    5.jpg

  6. 圖層不透明度設為 20px,折頁的立體感馬上出現。
    6.jpg

  7. 也可以用同樣方法,製作上下翻頁的效果。
    7.jpg

  8. 如果在翻頁加上黑色漸層營造光影變化,會更有真實感喔。
    8.jpg

說穿了真的沒什麼 Photoshop 技術上的難度…麻煩的是色彩的選擇和陰影的過渡,我通常把漸層的兩端數值差距壓在 20 以內,不讓對比太強烈。如果按鈕是深色、會加大數值;若是淺色,搞不好會壓到 10 以內,一切看製圖情況,很彈性的。如果你習慣用 ai 畫 icon,這種作法也很方便,不需要動到圖層樣式,複製、貼上、移動位置、設個半透明漸層就好。

不知道設計卡在哪?

👉 第一次來?從這裡開始

下面這些文章,從不同角度整理那些容易被忽略的地方

wave
Nest Pastiche 製作過程

這是模仿 Nest 煙霧警報器 做的 icon,打洞實在被難倒了沒辦法完全一樣,只能做個差不多相似的樣子出來。打洞排列怎麼做可以參考這篇:製作螺旋圓點花紋的方法 ,不怎麼好做就是了。

快速製作圓形漸層icon


看到有人問這種圓型 icon 要怎麼做,覺得很有趣稍微思考一下原理,做了個簡易快速版本。比不上原版精緻、只是記錄思考方式。

製作過程:Anna Sui Wallet


Icon Design:My Wallet 真的讓我拿到 Dribbble 帳號了,為了感謝大家的支持(喂)我把創作過程和思路放出來。簡單來說呢就是硬上、沒什麼華麗麗的技巧,不停加圖層加高光加陰影…畢竟這是我第一顆刻這麼細的擬物風 icon,之前都在接案公司工作、哪來 30hr 的時間慢工出細活。(大概是做習慣 iPhone 和 Android 的 App UI,凡是製圖我都優先考慮向量格式,即使這 icon 不可能上架,我還是做成向量格式,至少邊緣乾淨銳利漂亮。)Dribbble:ANNA SUI wallet

Icon Design:My Wallet

20131207-DEMO.png
總時數超過 30 小時,超過 100 個圖層。逼我換 MACBOOK PRO,還得加滿 RAM。舊 AIR 跑不太動。希望有人可以因為這顆 icon,分我個 Dribbble 的邀請碼。(真的拿到了!感謝 Mike Bronk

Akane Lee

Akane Lee

我是 Akane Lee,10 年 UI/UX 設計教學,帶過 1000+ 學員擺脫焦慮,找出人生方向。不只聊設計,也教你怎麼少繞遠路,摔坑也知道怎麼自己爬起來。

Comments

wave
comments powered by Disqus

Press ESC to close