扁平化設計:折頁

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
設計師的小玩具:DIVOOM PIXOO 64「圖片設計與座標尺寸」
設計師的小玩具:DIVOOM PIXOO 64「圖片設計與座標尺寸」

來分享下我在設計DIVOOM PIXOO 64 圖案時踩到的坑。

像素設計完全是另一個世界啊…

Nest Pastiche 製作過程

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

快速製作圓形漸層icon


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

彩色圓環試作


我在 QQ 優設 12 群掛著,有時候會看到他們 PO 一些問題求救,很有意思,會試著想要怎麼做得更漂亮,從中學到很多。這個圓環需要用到 AI 和 PS,看起來滿適合運用在技能值或數據視覺化。

Akane Lee

Akane Lee

內心戲小劇場超多!每個事件背後,都有無數個為什麼,天天和自己的腦內聲音吵架。

Comments

wave
comments powered by Disqus

Press ESC to close