嫁給RD的 UI Designer

UI/UX 設計、教育訓練、課程演講

高雄-6月份 UI 設計師入門班,報名頁面

扁平化設計:折頁

| Comments


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

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

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

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

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

  5. 將框選的範圍刪除。

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

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

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

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

Comments

comments powered by Disqus