風(fēng)扇圖標(biāo),設(shè)計(jì)擬物風(fēng)扇主題UI圖標(biāo)教程

本篇教程主要分享一款風(fēng)扇主題的UI圖標(biāo)設(shè)計(jì)方法，教程比較詳細(xì)，想學(xué)習(xí)風(fēng)扇圖標(biāo)設(shè)計(jì)的同學(xué)趕緊學(xué)習(xí)分享吧。

先看看效果圖：

<點(diǎn)圖片看大圖>theoat.com.cn

練習(xí)重點(diǎn)：

這次練習(xí)主要練習(xí)光影、顏色對(duì)形體、空間的塑造，對(duì)這塊運(yùn)用不熟練的小伙伴，值得動(dòng)手練習(xí)一下。

整個(gè)教程分為【背景】【機(jī)身】【扇葉】【扇框內(nèi)投影】【光-顏色】五個(gè)部分，每個(gè)部分在完成以后都進(jìn)行了編組，所以你們要注意圖層分組。

我們首先從背景層開始。

步驟一：

打開你的Adobe Photoshop，創(chuàng)建一個(gè)新文檔。

寬度：400 px高度：300 px分辨率：72 px

制作擬物圖標(biāo)背景：

溫馨提示：這主要是用漸變工具(G)，整體扯出差不多的效果過就可以啦。

底層漸變：徑向 - #ededed~#b1adaa近景亮色：線性 - #e1e0df~#b1adaa

<點(diǎn)圖片看大圖>
步驟二：

制作【風(fēng)扇機(jī)身】：

溫馨提示：用圓角矩形工具(U)，該圖層命名為【風(fēng)扇機(jī)身】，顏色填充#e2e1e0。

寬度：180 px高度：180 px半徑：8 px

賦予【風(fēng)扇機(jī)身】光感，制造體積感：

<點(diǎn)圖片看大圖>

溫馨提示：用圖層樣式時(shí)，盡量都【不要使用全局光】，因?yàn)槭褂煤�，在添加相同樣式，制作不同角度的效果時(shí)，會(huì)有影響。

圖層樣式：內(nèi)陰影 模式：濾色 顏色：#b4785a 不透明度：75% 角度：90° 距離：5px 大�。�5px圖層樣式：內(nèi)陰影 模式：正片疊底 顏色：#8f8696 不透明度：76% 角度：-52° 距離：4px 大�。�5px圖層樣式：漸變疊加 模式：正常 樣式：線性 顏色：#b4b6bb ~ #f2eee9 角度：103°圖層樣式：投影 模式：正片疊底 顏色：#22272a 不透明度：20% 角度：90° 距離：2px 大�。�2px

<點(diǎn)圖片看大圖>
步驟三：

制作電扇【圓形扇框】：

溫馨提示：用 橢圓工具 (U)，該圖層命名為【圓形扇框】，顏色填充#e2e1e0。

寬度：138 px高度：138 px

賦予【圓形扇框】光感，制造體積感：

<點(diǎn)圖片看大圖>

溫馨提示：用圖層樣式時(shí)，盡量都【不要使用全局光】，因?yàn)槭褂煤�，在添加相同樣式，制作不同角度的效果時(shí)，會(huì)有影響。

圖層樣式：描邊 大�。�2px 位置：外部 填充類型：漸變 顏色：#757e8a ~ #ccd4dc 角度：-68°圖層樣式：內(nèi)陰影 模式：正片疊底 顏色：#5e6f84 不透明度：75% 角度：90° 距離：1px 大�。�12px圖層樣式：漸變疊加 模式：正常 樣式：徑向 顏色：#636363 ~ #bdccdb 角度：90° 縮放：127%

<點(diǎn)圖片看大圖>