快速製作圓形漸層icon


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

中間的漸層色

畫一個圓,設圖層樣式,角度。

凹進去的部份

其實是用疊的,再畫一個半圓,設內陰影。

如果設了遮色片還是搞不定這個有內陰影的圓,看看「圖層遮色片隱藏效果」的選項有沒有勾起。

中心

畫一個圓,用圖層樣式設定,一層就能解決厚度和高光問題。



外框

用形狀工具、重疊兩個圓畫出圓環。同樣用圖層樣式設定,一層就解決厚度和高光。



陰影

複製需要陰影的那個圖層、高斯模糊,複製一層略縮小85%,調整透明度和重疊部份,陰影會比較立體。共有外框、中心、整體這 3 個部份要處理。


如果這顆 icon 小於 300x300px 、又不是主力 icon 只是個配角、且走扁平化風格的話,用圖層樣式一層解決高光和厚度是很方便快速的作法。但如果是擬物風就得把這幾層拆開獨立製作。比較有趣的部份是「角度漸層」,平時很少使用這種漸層方式、明明是凹陷的部份卻以疊加一個圓的方式製造假陰影也扭轉平時的作圖想法。果然多臨摹大師作品可以學到很多不同的思維方式。

不知道設計卡在哪?

👉 第一次來?從這裡開始

下面這些文章,從不同角度整理那些容易被忽略的地方

wave
Nest Pastiche 製作過程

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

扁平化設計:基本雛型

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

各式按鈕背景:基本篇


最常見的按鈕就是個長條型的色塊,配上文字說明讓使用者知道點擊這個色塊能達到什麼目的。讓這個色塊擁有像現實生活的光影變化,在視覺上更顯精緻。可接著各式按鈕作法:文字篇 的步驟接著做。

各式按鈕作法:文字篇


在 App 裡,許多操作方式都需要透過「按鈕」,本篇將介紹如何在Photoshop作出各種樣式按鈕上的「文字」。包含立體凸起、或是凹陷的質感。按鈕本身的作法也有很多種表現形式,將另開一篇專講背景製作。

Akane Lee

Akane Lee

我是 Akane Lee,10 年 UI/UX 設計教學,帶過 1000+ 學員擺脫焦慮,找出人生方向。不只聊設計,也教你怎麼少繞遠路,摔坑也知道怎麼自己爬起來。

Comments

wave
comments powered by Disqus

Press ESC to close