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

在如今的UI設計領(lǐng)域，輕質(zhì)感的圖標頗為流行，今天，我們來一起學習線性輕質(zhì)感圖標的做法，教程主要運用到了Photoshop CC和Illustration CC。最終效果圖如下：

一. 輪廓

考慮到可樂罐外形的彎曲特點，我們用AI來打形會更為方便。

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

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

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

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

二. 質(zhì)感

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

1.Ctrl+C復制AI中的輪廓后，打開PS，Ctrl+V拷貝到新建立的畫板中。

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

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

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

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

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

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

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

5.繪制百事圖標

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

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

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

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

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

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

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

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

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

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

9.加上pepsi文字，完成~

三.總結(jié)

教程最后，我們一起來復習以下教程中所用到的那些知識吧~

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

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

＊＊＊＊部落窩教育－AI繪制線性圖標＊＊＊＊

原創(chuàng)：Charlotte Chen/部落窩教育（未經(jīng)同意，請勿轉(zhuǎn)載）

更多教程：部落窩教育（www.itblw.com）

微信公眾號：itblwbbs