扁平化設計:折頁

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,這種作法也很方便,不需要動到圖層樣式,複製、貼上、移動位置、設個半透明漸層就好。

Akane Lee

Akane Lee

如果設計師能和工程師順利合作,那麼老公也就能準時下班了吧!因此努力分享 UI 和 UX 方面的知識、技術、各種踩過的坑與心得。

Comments

wave
comments powered by Disqus

Press ESC to close