扁平化設計:厚度

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 非常重要,螢幕尺寸真要命的好多種…

更多文章

wave
自製簡易 icon 教學


雖然網路上有很多多多免費的 icon 讓人使用,但大半都禁止「商業用途」,要馬就掏錢買一套、要馬就自己畫。介紹一下我愛用的自動筆和筆記本,以及最基本的 icon 從鉛筆草圖一直到電腦完稿的流程。(相信念廣告設計的學生對這過程非常熟悉。

彩色圓環試作


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

製作過程:Anna Sui Wallet


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

扁平化設計:基本雛型

11.jpg
扁平化設計是現在最流行的設計趨勢,比起擬物風,扁平化設計去除大部份的材質和光影變化,但仔細觀察,仍保有許多細節。無論是陰影、漸層、高光、立體感等,並不因「扁平」而隨意帶過。這個教學不太需要修圖技巧,只要會用「形狀圖層」就好。為了因應各種尺寸的 icon,我習慣盡可能用向量來製圖。

Akane Lee

Akane Lee

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

Comments

wave
comments powered by Disqus

Press ESC to close