编按：图标设计在UI设计中是必不可少的一个技能。食物的小图标，手机软件的小图标以及各种各样商品的小图标。那么如何做一个有质感又很逼真的百事可乐图标呢？一起来看看吧。

在如今的UI设计领域，轻质感的图标颇为流行，今天，我们来一起学习线性轻质感图标的做法，教程主要运用到了Photoshop CC和Illustration CC。最终效果图如下：

一. 轮廓

考虑到可乐罐外形的弯曲特点，我们用AI来打形会更为方便。

1.我们以形状工具绘制同等宽度的矩形和椭圆形；

2.然后，利用路径查找器中的合并功能，将2个形状合并为一个整体；

3.在上方两侧各绘制两个小椭圆，利用路径查找器的减去顶层功能，绘制可乐的凹槽轮廓，再利用AI独有的圆角调节功能控制凹槽的弧度；

4.最后，分别以圆角矩形和椭圆形绘制可乐罐的头部和托盘，可乐罐的轮廓绘制完成。

二. 质感

重头戏来了，考虑到PS丰富便捷的图层样式，我们将AI中完成的轮廓导入至PS中，进行可乐罐质感的打造。

1.Ctrl+C复制AI中的轮廓后，打开PS，Ctrl+V拷贝到新建立的画板中。

在将AI中的矢量图拷贝至PS时，为方便可以随时返回至AI中编辑，我们将罐身，头部和托盘单独复制到PS，并选择粘贴为智能对象的形式。

2.我们打造质感需要引用到素描中“三大面五大调”的概念，如下图所示。越接近光源的部分越亮，反之越暗。因此，在打造图标的质感时，我们首先需要确定下光源的位置——来自右侧；

3.既然光源在右侧，我们首先利用PS图层样式功能中的渐变叠加功能打上罐身的基调。渐变叠加由深至浅，色值分别为#a02d50和#ff5c92；另外，原本轮廓为纯黑色，我们可以再将描边改为深紫色（#3f2b70），整体增加了格调，不那么厚重。

4.然后，再三次利用图层样式中的内阴影功能绘制细节。（CC版本中新增的多重图层样式功能哦，老版本需多次转换智能对象）

（1）根据五大调中背光部的反光原理，我们需要在可乐罐左侧背光面加上反光部分，内阴影的色值为#ffacc3，参数如右上图所示；

（2）刻画出头部给予罐身的阴影，内阴影色值为#631730，参数如左下图所示；

（3）加深背光面的背光效果，内阴影色值为#631730，参数如右下图所示（切忌，一定要根据物体本身颜色选择对应的阴影色值，而不要无脑黑色哦）。

1．  2.

5.

（1）我们首先绘制一个圆和一个矩形，合并后，路径选择工具选中矩形，在路径操作面板中选择减去顶层形状，最后合并形状组件；

1. 2.  3.

（2）复制刚刚那个大圆得到小同心圆，再以钢笔工具绘制两个叶片形状，对小圆建立剪切蒙版即可（快捷键Ctrl+Alt+G）

1. 2. 3.  4.

6.由于罐身在靠近头部的部分会有内凹的部分，需要以较深的颜色和下方区域区分

因此，在新建的图层中，我们先要用钢笔工具勾勒出这一块区域，然后将其作为选区（在图层上Ctrl+左键,快速建立选区的快捷键，小伙伴们务必要记住哦），用画笔工具在选区内绘制阴影，色值为#d03e69。

7.目前来看，这个可乐罐的质感更偏向塑料，而没有本身的那种金属质感。通常，在光线作用下，由于金属本身密度大，不透光，反光性极强，导致其对光源极为敏感，金属质感的物体往往明暗对比非常强烈（也就是高光、反光及阴影的表现更强，存在明显的分界线）。

因此，我们用钢笔工具和画笔工具绘制出罐身上的反光及高光

（1）左侧部分，我们先用钢笔勾勒出长长的反光区域，使用由下至上的渐变叠加样式，参数如下，色值分别为#a02d50和#ff5289；再于头部勾勒出小反光区域，填充色值为# ff6392；

（2）右侧部分，我们同样勾勒出反光区域，logo以外我们填充色值为#ff6c9d，由于logo颜色发生变化，因此我们需要根据颜色选择对应的反光色值（紫色部分为# 5a49d4，红色部分为# f34780）；

（3）最后，高光部分我们用画笔工具来刻画。右侧的高光可以用涂抹工具适当涂抹（强度60%），使其不那么生硬，左侧同理，但由于是背光部分，因此我们需设置其为80%透明度来削弱高光。

8.与罐身一样，头部和托盘也需要加上质感。使用图层样式功能中的内阴影功能绘制两边的阴影（#4742a8），使用钢笔工具绘制反光；

9.加上pepsi文字，完成~

三.总结

教程最后，我们一起来复习以下教程中所用到的那些知识吧~

1.打造质感需要熟知“三大面五大调”

2.金属质感上的明暗对比非常强烈，高光、反光及阴影的表现更强，存在明显的分界线；

相关文章推荐:

PS蒙版用了这么久，还有个你不知道的功能？

这真的是PS做出来的风扇吗？我以为是照片

PS设计3D剪影组成的立体圆形