編按：圖標(biāo)設(shè)計(jì)在UI設(shè)計(jì)中是必不可少的一個(gè)技能。食物的小圖標(biāo)，手機(jī)軟件的小圖標(biāo)以及各種各樣商品的小圖標(biāo)。那么如何做一個(gè)有質(zhì)感又很逼真的百事可樂(lè)圖標(biāo)呢？一起來(lái)看看吧。

在如今的UI設(shè)計(jì)領(lǐng)域，輕質(zhì)感的圖標(biāo)頗為流行，今天，我們來(lái)一起學(xué)習(xí)線性輕質(zhì)感圖標(biāo)的做法，教程主要運(yùn)用到了Photoshop CC和Illustration CC。最終效果圖如下：

一. 輪廓

考慮到可樂(lè)罐外形的彎曲特點(diǎn)，我們用AI來(lái)打形會(huì)更為方便。

1.我們以形狀工具繪制同等寬度的矩形和橢圓形；

2.然后，利用路徑查找器中的合并功能，將2個(gè)形狀合并為一個(gè)整體；

3.在上方兩側(cè)各繪制兩個(gè)小橢圓，利用路徑查找器的減去頂層功能，繪制可樂(lè)的凹槽輪廓，再利用AI獨(dú)有的圓角調(diào)節(jié)功能控制凹槽的弧度；

4.最后，分別以圓角矩形和橢圓形繪制可樂(lè)罐的頭部和托盤，可樂(lè)罐的輪廓繪制完成。

二. 質(zhì)感

重頭戲來(lái)了，考慮到PS豐富便捷的圖層樣式，我們將AI中完成的輪廓導(dǎo)入至PS中，進(jìn)行可樂(lè)罐質(zhì)感的打造。

1.Ctrl+C復(fù)制AI中的輪廓后，打開(kāi)PS，Ctrl+V拷貝到新建立的畫板中。

在將AI中的矢量圖拷貝至PS時(shí)，為方便可以隨時(shí)返回至AI中編輯，我們將罐身，頭部和托盤單獨(dú)復(fù)制到PS，并選擇粘貼為智能對(duì)象的形式。

2.我們打造質(zhì)感需要引用到素描中“三大面五大調(diào)”的概念，如下圖所示。越接近光源的部分越亮，反之越暗。因此，在打造圖標(biāo)的質(zhì)感時(shí)，我們首先需要確定下光源的位置——來(lái)自右側(cè)；

3.既然光源在右側(cè)，我們首先利用PS圖層樣式功能中的漸變疊加功能打上罐身的基調(diào)。漸變疊加由深至淺，色值分別為#a02d50和#ff5c92；另外，原本輪廓為純黑色，我們可以再將描邊改為深紫色（#3f2b70），整體增加了格調(diào)，不那么厚重。

4.然后，再三次利用圖層樣式中的內(nèi)陰影功能繪制細(xì)節(jié)。（CC版本中新增的多重圖層樣式功能哦，老版本需多次轉(zhuǎn)換智能對(duì)象）

（1）根據(jù)五大調(diào)中背光部的反光原理，我們需要在可樂(lè)罐左側(cè)背光面加上反光部分，內(nèi)陰影的色值為#ffacc3，參數(shù)如右上圖所示；

（2）刻畫出頭部給予罐身的陰影，內(nèi)陰影色值為#631730，參數(shù)如左下圖所示；

（3）加深背光面的背光效果，內(nèi)陰影色值為#631730，參數(shù)如右下圖所示（切忌，一定要根據(jù)物體本身顏色選擇對(duì)應(yīng)的陰影色值，而不要無(wú)腦黑色哦）。

1．  2.

5.

（1）我們首先繪制一個(gè)圓和一個(gè)矩形，合并后，路徑選擇工具選中矩形，在路徑操作面板中選擇減去頂層形狀，最后合并形狀組件；

1. 2.  3.

（2）復(fù)制剛剛那個(gè)大圓得到小同心圓，再以鋼筆工具繪制兩個(gè)葉片形狀，對(duì)小圓建立剪切蒙版即可（快捷鍵Ctrl+Alt+G）

1. 2. 3.  4.

6.由于罐身在靠近頭部的部分會(huì)有內(nèi)凹的部分，需要以較深的顏色和下方區(qū)域區(qū)分

因此，在新建的圖層中，我們先要用鋼筆工具勾勒出這一塊區(qū)域，然后將其作為選區(qū)（在圖層上Ctrl+左鍵,快速建立選區(qū)的快捷鍵，小伙伴們務(wù)必要記住哦），用畫筆工具在選區(qū)內(nèi)繪制陰影，色值為#d03e69。

7.目前來(lái)看，這個(gè)可樂(lè)罐的質(zhì)感更偏向塑料，而沒(méi)有本身的那種金屬質(zhì)感。通常，在光線作用下，由于金屬本身密度大，不透光，反光性極強(qiáng)，導(dǎo)致其對(duì)光源極為敏感，金屬質(zhì)感的物體往往明暗對(duì)比非常強(qiáng)烈（也就是高光、反光及陰影的表現(xiàn)更強(qiáng)，存在明顯的分界線）。

因此，我們用鋼筆工具和畫筆工具繪制出罐身上的反光及高光

（1）左側(cè)部分，我們先用鋼筆勾勒出長(zhǎng)長(zhǎng)的反光區(qū)域，使用由下至上的漸變疊加樣式，參數(shù)如下，色值分別為#a02d50和#ff5289；再于頭部勾勒出小反光區(qū)域，填充色值為# ff6392；

（2）右側(cè)部分，我們同樣勾勒出反光區(qū)域，logo以外我們填充色值為#ff6c9d，由于logo顏色發(fā)生變化，因此我們需要根據(jù)顏色選擇對(duì)應(yīng)的反光色值（紫色部分為# 5a49d4，紅色部分為# f34780）；

（3）最后，高光部分我們用畫筆工具來(lái)刻畫。右側(cè)的高光可以用涂抹工具適當(dāng)涂抹（強(qiáng)度60%），使其不那么生硬，左側(cè)同理，但由于是背光部分，因此我們需設(shè)置其為80%透明度來(lái)削弱高光。

8.與罐身一樣，頭部和托盤也需要加上質(zhì)感。使用圖層樣式功能中的內(nèi)陰影功能繪制兩邊的陰影（#4742a8），使用鋼筆工具繪制反光；

9.加上pepsi文字，完成~

三.總結(jié)

教程最后，我們一起來(lái)復(fù)習(xí)以下教程中所用到的那些知識(shí)吧~

1.打造質(zhì)感需要熟知“三大面五大調(diào)”

2.金屬質(zhì)感上的明暗對(duì)比非常強(qiáng)烈，高光、反光及陰影的表現(xiàn)更強(qiáng)，存在明顯的分界線；

相關(guān)文章推薦:

PS蒙版用了這么久，還有個(gè)你不知道的功能？

這真的是PS做出來(lái)的風(fēng)扇嗎？我以為是照片

PS設(shè)計(jì)3D剪影組成的立體圓形