實(shí)戰(zhàn)練習(xí)03　設(shè)計(jì)制作扁平化圖標(biāo)

視　頻：資源包\視頻\第2章\2-4-6.mp4　　

源文件：資源包\源文件\第2章\2-4-6.psd

●案例分析

本案例是設(shè)計(jì)制作一款扁平化風(fēng)格的圖標(biāo)，案例制作過(guò)程中運(yùn)用了大量形狀工具，使圖標(biāo)的各個(gè)元素繪制出來(lái)都非常工整。而圖標(biāo)元素的逼真感則是使用圖層樣式來(lái)完成的。由于圖標(biāo)屬于扁平化風(fēng)格，圖標(biāo)元素相對(duì)簡(jiǎn)單，所以繪制起來(lái)還是比較容易。案例的完成效果如圖2-112所示。

●制作步驟

01 執(zhí)行“文件>新建”命令，彈出“新建”對(duì)話框，新建一個(gè)空白文檔，如圖2-113所示。使用“圓角矩形工具”在畫(huà)布中繪制一個(gè)形狀，設(shè)置“屬性”面板參數(shù)，如圖2-114所示。繪制完成后，圖像效果如圖2-115所示。

02 復(fù)制“圓角矩形 1”圖層，并使用“直接選擇工具”調(diào)整形狀右下角錨點(diǎn)的方向線位置和距離，調(diào)整后的效果如圖2-116所示。雙擊復(fù)制得到形狀圖層縮覽圖，打開(kāi)“圖層樣式”對(duì)話框，并選擇“投影”選項(xiàng)，設(shè)置各項(xiàng)參數(shù)，如圖2-117所示。

03 使用相同方法復(fù)制圖層并完成圖層錨點(diǎn)的調(diào)整和添加“圖層樣式”命令，圖像效果如圖2-118所示。使用“鋼筆工具”在畫(huà)布中繪制形狀，并為形狀填充如圖2-119所示的漸變顏色，圖像效果如圖2-120所示。

04 再次復(fù)制“圓角矩形1 拷貝2”圖層，使用“轉(zhuǎn)換點(diǎn)工具”在如圖2-121所示的錨點(diǎn)處單擊，將錨點(diǎn)轉(zhuǎn)換為角點(diǎn)。雙擊復(fù)制得到的形狀圖層縮覽圖，打開(kāi) “圖層樣式”對(duì)話框，并選擇“投影”選項(xiàng)，設(shè)置各項(xiàng)參數(shù)，如圖2-122所示。

05 在“圖層”面板中將圖層的“填充值”更改為0%，如圖2-123所示。執(zhí)行“文件>打開(kāi)”命令，將素材圖像“24601.png”拖曳到設(shè)計(jì)文檔中，使用快捷鍵【Ctrl+T】旋轉(zhuǎn)圖像角度和調(diào)整圖像大小，如圖2-124所示。

提示

將打開(kāi)的素材圖像拖曳到設(shè)計(jì)文檔中，素材圖像將單獨(dú)成為一個(gè)圖層，并且圖層的名稱(chēng)會(huì)按設(shè)計(jì)文檔當(dāng)前的圖層名稱(chēng)順延。

06 使用“直線工具”在畫(huà)布中繪制直線，直線寬度為1px，填充顏色為RGB（126、206、244），圖像效果如圖2-125所示。連續(xù)復(fù)制直線，并移動(dòng)形狀位置，如圖2-126所示。

07 打開(kāi)“圖層”面板，選中所有直線圖層，使用快捷鍵【Ctrl+G】將其編組，重命名為“線條”。修改圖層組的“不透明度”為89%，如圖2-127所示。繼續(xù)在“圖層”面板中，選中除“背景”圖層以外的所有圖層，將其編組，重命名為“底稿”，如圖2-128所示。

08 使用“圓角矩形工具”在畫(huà)布中繪制形狀，設(shè)置“屬性”面板上的參數(shù)，如圖2-129所示。繪制完成的圖像效果如圖2-130所示。雙擊圖層縮覽圖，打開(kāi)“圖層樣式”對(duì)話框，選擇“描邊”選項(xiàng)后，設(shè)置各項(xiàng)參數(shù)，如圖2-131所示。

09 繼續(xù)在對(duì)話框中選擇“漸變疊加”選項(xiàng)，設(shè)置各項(xiàng)參數(shù)，如圖2-132所示。完成后單擊“確定”按鈕，圖像效果如圖2-133所示。

10 使用“橢圓工具”在畫(huà)布中拖曳鼠標(biāo)繪制一個(gè)圓形，設(shè)置“屬性”面板中的參數(shù)，如圖2-134所示。將形狀移動(dòng)到圓角矩形中，圖像效果如圖2-135所示。

11 打開(kāi)“圖層”面板，選中兩個(gè)形狀圖層，將其編組，如圖2-136所示。連續(xù)復(fù)制圖層組，并向右平移圖層組到合適位置，將圖層組進(jìn)行編組并重命名為“書(shū)頁(yè)”，圖像效果和“圖層”面板如圖2-137所示。

12 使用“鋼筆工具”在畫(huà)布中繪制形狀，填充如圖2-138所示的漸變顏色。繪制完成后，圖像效果如圖2-139所示。

13 雙擊形狀圖層的圖層縮覽圖，打開(kāi)“圖層樣式”對(duì)話框，在對(duì)話框中選擇“內(nèi)發(fā)光”選項(xiàng)，設(shè)置各項(xiàng)參數(shù)，如圖2-140所示。繼續(xù)選擇“投影”選項(xiàng)，并設(shè)置各項(xiàng)參數(shù)，具體參數(shù)如圖2-141所示。

14 使用“直線工具”在畫(huà)布中繪制白色直線，圖像效果如圖2-142所示。雙擊形狀圖層的圖層縮覽圖，打開(kāi)“圖層樣式”對(duì)話框，在對(duì)話框中選擇“斜面和浮雕”選項(xiàng)，設(shè)置各項(xiàng)參數(shù)，如圖2-143所示。

15 設(shè)置完成后，單擊“確定”按鈕，圖像效果如圖2-144所示。使用相同方法完成另一條線的制作，并調(diào)整線條的“不透明度”為60%，如圖2-145所示。

16 新建圖層，使用“矩形選框工具”在畫(huà)布中繪制選區(qū)，在選區(qū)中填充從白色到透明的線性漸變，如圖2-146所示。選區(qū)取消后，使用快捷鍵【Ctrl+T】調(diào)整圖層大小和角度，如圖2-147所示。

17 打開(kāi)“圖層”面板，調(diào)整圖層“不透明度”為30%，將繪制的圖層選中，按快捷鍵【Ctrl+G】為其編組，重命名為“筆身”，如圖2-148所示。使用相同方法繪制鉛筆的筆頭部分，如圖2-149所示。

18 隱藏“背景”圖層，執(zhí)行“圖層>裁切”命令，裁掉文檔邊緣的透明像素，如圖2-150所示。執(zhí)行“文件>導(dǎo)出>導(dǎo)出為”命令，彈出“導(dǎo)出為”對(duì)話框，設(shè)置各項(xiàng)參數(shù)，如圖2-151所示。

19 設(shè)置完成后，單擊“全部導(dǎo)出”按鈕，在彈出的對(duì)話框中選擇存儲(chǔ)切圖的文件夾。文件導(dǎo)出后，圖像效果如圖2-152所示。