圖標製作教程

今天跟大家分享一下做圖標,以及注意的一些事

首先做一套圖標,我們先要定個主題和風格。

然後圖標的原則要清楚明白,那有哪些呢?

1 識別性 2 一致性 3 兼容性 4 差異性

識別:讓人一眼看出是什麼,準確表達其中含義

一致:顏色、風格、大小、漸變,透明度,透視角度、風格等

兼容:圖標在不同環境都清晰可見

差異:每個圖標都有明顯的特徵

主題:給愛的人最好的禮物

接下來我們一起練起來吧,一個字幹。

圖標製作教程

圖標製作教程

拆分下,也就圓底+鬧鐘圓框+指針+臺座+耳朵響鈴

詳細步驟如下:

【1】畫一個正圓90*90px,135°橙色漸變,注意顏色跨度不宜太大

圖標製作教程

【2】複製一層,縮小90%左右,往下對齊屬性—蒙版—羽化6像素,這樣就做好彌散陰影了

圖標製作教程

【3】畫一點點90°漸變的圓,大小46*46,然後畫指針在圓裡減去兩個圓角矩形,用直線畫一個4*8px像素圓角矩形斜45°的底座然後複製,水平翻轉,放圓兩邊建組垂直居中對齊

圖標製作教程

【4】加兩個圓形的耳朵放在後面,露出三分之一左右,然後整體90°投影大小

圖標製作教程

圖標製作教程

2像素透明度調至60%

拆分下,就是圓角矩形+心形裹胸+矩形裙襬

詳細步驟如下

【1】畫一個正圓90*90px,135°玫紅色漸變,同樣的注意顏色跨度不宜太大

圖標製作教程

【2】複製一層,縮小90%左右,往下對齊屬性—蒙版—羽化6像素,這樣就做好彌散陰影了

圖標製作教程

【3】畫兩個圓角矩形,大小4*8px,然後畫一個心型(一個正方形加兩個同等大小圓形組合在一起合併,旋轉-45°)再用矩形減去下面的。做完整個如果太鼓了,心型可以左右壓縮1px

圖標製作教程

【4】加矩形,調整下面裙襬,然後用多個排列好的小圓減去做出裙襬效果,最後編組做輕微的漸變,然後加2px透明度30%陰影

細節要慢慢的,耐心的做好,比如顏色漸變的跨度每一種顏色明度都適中,漸變的角度統一,圓角大小統一,鏤空的大小一致(視具體情況分析)我們做帶有原本色彩的彌散陰影,裡面投影大小距離透明度。顏色都相對應。出來的圖標大小跟底有個呼吸感,0.618的黃金比例。例如90px大圓,那你的圖標應該在54px左右,然後視覺修正,接近正方形要縮小,圓形適中,矩形要超出一點範圍,視具體情況而定,完整一套就出來了。

圖標製作教程

以上數值作參考,做的不好多多包涵,其他圖標同上步驟就不一一製作了。如果有疑問,可以聯繫我qq460459293喔,大家一起練習起來吧

總結:1 大小統一,呼吸感,用規則圖形去加減

2 漸變用色不能跨度太大

3 彌散陰影用羽化或者高斯模糊

4 圖標面性用一點點漸變,增加細節

5 圖標線條,圓角,鏤空尺寸統一

6 給向下2像素有色投影,透明度給30%

7 顏色要考慮圖標的含義,特性,用途,環境

"關注”另外再送你免費PS等學習課程哦!

私信回覆“學習”領取UI及ps課程等海量資源。


分享到:


相關文章: