扁平化設計:厚度

flat-厚度.png
這張是 512 x 512 px 的 iOS Desktop icon 原始圖檔,可以看到在我放在 photoshop 分類中關於扁平化設計系列文章所製作出來的效果。高光線真的很重要,細細一條就能帶給人「厚度」和「轉折」的視覺效果。

請接續之前的扁平化設計系列文章繼續做下去喔!

  1. 使用直接選取工具,圈選下方 4 個錨點。
    1.jpg

  2. 按住 Shift,將錨點向上方移動。露出來的灰色部份就是這個 icon 的厚度,依個人喜好決定。
    2.jpg

  3. 將厚度改成較深的顏色,可以使用 HSB,S 飽和度減少 10、B 明度減少 20。這個作法可以保持同色系 icon 的一致感。
    3.jpg

  4. 因為剛才調整圓角矩型的尺寸,所以要將放大鏡重新設定水平置中。
    4.jpg

  5. 為了凸顯厚度轉折,加上高光線會更立體。使用圖層樣式的內陰影。
    5.jpg

  6. 厚度層也可以加上淡淡的黑色陰影,我慣用的是這種作法:調整矩型方塊的尺寸,設定半透明的黑色漸層。
    6.jpg

小技巧:
如果 icon 很小、又不希望圖層數量太多,可以用「陰影」來假造厚度。
把混合模式設為「正常」,不透明度 100%、尺寸為 0。間距數值多寡代表 icon 的厚度,可自由調整。
7.jpg

把 Desktop icon 加上厚度是我最喜歡用的作法,平面式的 icon 略嫌單調,用這種方式馬上增加立體感與精緻度。當 iPhone 上都是平平的 icon 時,有厚度的 icon 會非常搶眼,大概因為透視感和其他都不一樣吧…扁平化設計其實很方便使用形狀圖層向量製作,不管怎麼放大縮小都不會耗損模糊,這對 Android 非常重要,螢幕尺寸真要命的好多種…

Akane Lee

Akane Lee

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

Comments

wave
comments powered by Disqus

Press ESC to close