一个小图标就能区分UI设计师的级别丨教程 · Photoshop · UI设计
图标是具有明确指代含义的计算机图形。其中，桌面图标是软件标识，界面中的图标是功能标识。
云计算时代的到来，使得企业信息化这一话题又有了新的生命。在云端的服务性能不断增强之外，最显著的特征就是在终端的精彩表现。单纯用 PC 来使用 ERP 的时代将一去不复返。以手机、平板电脑介质为代表的移动终端应用将为企业信息化带来巨大变革。移动应用图标便是其中最有力的代表。
图标设计不仅能够有效地为设计者传播信息与内涵，而且对 UI 有着重要的意义， 今天小编带着大家做一个矢量插画图标。
实例：矢量插画主题电脑应用和图标
教程中的实例是制作矢量插画主题电脑应用和图标。前面先通过矢量插画主题图标的制作了解电脑桌面矢量插画图标的制作过程，后面制作矢量插画主题电脑应用，通过使用深蓝的背景使制作的透明图标界面更加突出。
再结合图标的制作将其放置于应用中，使其前后呼应以很好地向读者展现矢量插画主题电脑应用和图标之间的关系。
设计规格
尺寸规格：2048×1536（像素）
尺寸规格：58×58（像素）
使用工具：圆角矩形工具、矩形工具、文字工具
源 文 件和视频地址：https://pan.baidu.com/s/1wERTggu_Ntdk5zIbHKKvDg
设计色彩分析
通过使用深蓝的背景使制作的图标界面更加突出。
方法1：矢量插画主题图标
01 新建空白图像文件
新建空白图像文件执行“文件>新建”命令，在弹出的“新建”对话框中设置各项参数及选项，完成后单击“确定”按钮，新建空白图像文件。
02 制作图标背景
设置前景色为深蓝灰色（R32、G52、B87），按快捷键Alt+Delete，填充背景色为深蓝灰色。
03 制作图标底部的圆角矩形
制作图标底部的圆角矩形单击圆角矩形工具，在其属性栏中设置其“填充”为蓝色到白色再到蓝灰色再到深紫色继续到蓝灰色到白色到淡灰色的线性渐变，“描边”为无，在画面中绘制圆角矩形，得到“圆角矩形1”。
04 继续制作图标上的圆角矩形
继续制作图标上的圆角矩形继续使用矩形工具 ，在绘制好的圆角矩形上绘制圆角矩形，得到“圆角矩形2”。单击“添加图层样式”按钮 ，选择“斜面和浮雕”选项并设置参数，制作图案样式。制作图标上的圆角矩形。
05 继续绘制圆角矩形图标上的圆角矩形
继续使用矩形工具，在其属性栏中设置其“填充”为亮灰色，“描边”为无。在绘制好的圆角矩形上绘制圆角矩形，得到“圆角矩形3”。
06 制作图标上圆角矩形的图层样式
在绘制好的“圆角矩形3”上，单击“添加图层样式”按钮，选择“内阴影”选项并设置参数，制作图案样式。
07 继续制作图标上圆角矩形的图层样式
在绘制好的“圆角矩形3”上，单击“添加图层样式”按钮，选择“投影”选项并设置参数，制作图案样式。
08 制作图标上的背景
打开“12.jpg”文件。拖曳到当前文件图像中，生成“图层2”，适当调整大小，按住Alt键并单击鼠标左键，创建其图层剪贴蒙版。
09 继续制作图标上的图案
打开“13.png”文件。拖曳到当前文件图像中，生成“图层3”，在其“图层”面板上设置其“不透明度”为63%。按快捷键Ctrl+J复制得到“图层3副本”，使用快捷键Ctrl+T变换图像大小，并将其放置于画面合适的位置。按住Alt键并单击鼠标左键，创建其图层剪贴蒙版。
10 创建“色相/饱和度1”，调整画面色调
单击“创建新的填充或调整图层”按钮 ，在弹出的菜单中选择“色相/饱和度”选项并设置参数，单击图框中“此调整影响到下面的所有图层”按钮 创建其图层剪贴蒙版，调整画面的色调。
11 创建“色相/饱和度2”，调整画面色调
单击“创建新的填充或调整图层”按钮 ，在弹出的菜单中选择“色相/饱和度”选项并设置参数，调整画面的色调。
12 制作图标上的图案
打开“14.png”文件。拖曳到当前文件图像中，生成“图层4”，使用快捷键Ctrl+T变换图像大小，并将其放至于画面合适的位置。
13 制作火箭下面的光感
新建“图层5”，将其放置于“图层4”的下方，设置前景色为白色，单击画笔工具选择柔角画笔并适当调整大小及透明度，在图层上适当涂抹，制作火箭下面发光的效果。
14 制作火箭下方的图形及样式
回到“图层4”，新建“图层6”，单击钢笔工具，在其属性栏中设置其属性为“路径”，在画面上绘制火箭图案下方的形状并将其填充为红色，完成后取消选区，创建“外发光”图层样式。
15 绘制火箭下方图案
新建“图层7”，单击钢笔工具，在其属性栏中设置其属性为“路径”，在画面上绘制火箭图案上面的图案，按快捷键Ctrl+D取消选区。
16 绘制火箭两侧图案
新建“图层8”，单击钢笔工具，在其属性栏中设置其属性为“路径”，在画面上绘制火箭图案两侧箭翼的图案，按快捷键Ctrl+D取消选区。
17 继续制作图标上的图案
打开“15.png”文件。拖曳到当前文件图像中，生成“图层9”，使用快捷键Ctrl+T变换图像大小，并将其放置于画面合适的位置。设置混合模式为“滤色”。
18 将图标制作完成
新建“图层10”，使用椭圆选框工具，在界面上绘制椭圆选区并适当地填充颜色，制作火箭上的图案，选择所有火箭图层，按快捷键Ctrl+G新建“组1”。至此，本实例制作完成。
方法2：矢量插画电脑主题应用
01 新建空白图像文件
执行“文件>新建”命令，在弹出的“新建”对话框中设置各项参数及选项，完成后单击“确定”按钮，新建空白图像文件。
02 制作画面背景
设置前景色为深蓝色（R32、G52、B87），按快捷键Alt+Delete，填充背景色为深蓝色。
03 在画面背景上绘制斑点 新建“图层1”，设置前景色为淡黄色（R248、G156、B148），单击画笔工具，选择柔角画笔并适当调整大小，在图层上适当地绘制斑点。
04
执行“文件>打开”命令，打开“01.png”文件。拖曳到当前文件图像中，生成“图层2”，使用快捷键Ctrl+T变换图像大小，并将其放置于画面合适的位置。
05 制作界面下方的提示栏 使用矩形工具 ，在其属性栏中设置其“填充”为蓝色，“描边”为无，在界面下方绘制矩形，得到“矩形1”。单击“添加图层样式”按钮 ，选择“斜面和浮雕”选项并设置参数，制作图案样式。新建“图层3”，继续使用画笔工具 选择柔角画笔并适当调整大小，在图层上适当地绘制斑点。按住Alt键并单击鼠标左键，创建其图层剪贴蒙版。
06 制作界面上的火箭图案
打开“矢量插画主题图标.psd”文件，拖曳到当前文件图像中，生成“组1”，使用快捷键Ctrl+T变换图像大小，并将其放至于画面合适的位置。
07 继续制作界面上的图案
执行“文件>打开”命令，打开“02.png”文件。拖曳到当前文件图像中，生成“图层11”，使用快捷键Ctrl+T变换图像大小，将其放至于画面合适的位置，并在其“图层”面板上设置其“不透明度”为35%。
08 制作界面上的图标 依次打开“03.png”到“09.png”文件。拖曳到当前文件图像中，生成“图层12”到“图层18”，依次使用快捷键Ctrl+T变换图像大小，并将其放至于画面合适的位置。
09 制作界面上图标下方的文字
单击横排文字工具 ，设置前景色为白色，输入所需文字，双击文字图层，在其属性栏中设置文字的字体样式及大小，并将其放至于画面图标下方合适的位置。
10 制作电脑界面上的圆角矩形框
单击圆角矩形工具 ，在其属性栏中设置其“填充”为蓝色，“描边”为无，在界面上绘制电脑界面上的圆角矩形框，单击“添加图层样式”按钮 ，选择“斜面和浮雕”选项并设置参数，制作图案样式。
11 制作电脑界面上圆角矩形框里的圆角矩形框和图案
继续使用圆角矩形工具 ，在其属性栏中设置其“填充”为淡蓝色，“描边”为无，在绘制好的圆角矩形界面上继续绘制圆角矩形框并创建“斜面和浮雕”图案样式。按住Shift键并选择“图层12”到“组1”，按快捷键Ctrl+J复制得到其副本，并按快捷键Ctrl+E将其合并得到“图层1副本”，将其移至图层上方，按住Alt键并单击鼠标左键，创建其图层剪贴蒙版，并设置“不透明度”为63%。
12 继续绘制圆角矩形框里的圆角矩形框
继续使用圆角矩形工具 ，在其属性栏中设置其需要的“填充”，在绘制圆角矩形框里继续绘制圆角矩形，得到“圆角矩形3”和“圆角矩形4”，并将其放置于合适的位置。
13 继续绘制圆角矩形框里的圆角矩形框
继续使用圆角矩形工具 ，在其属性栏中设置其“填充”为蓝色，“描边”为无，在绘制好的圆角矩形界面上继续绘制圆角矩形框，单击“添加图层样式”按钮 ，选择“渐变叠加”选项并设置参数，制作图案样式。
14 在画面上继续绘制斑点
新建“图层19”，设置前景色为淡黄色（R248、G156、B148），单击画笔工具 选择柔角画笔并适当调整大小，在图层上适当地绘制斑点。在其“图层”面板上设置其“不透明度”为52%，增加画面中斑点的层次效果。
15 制作电脑界面上的图标元素
依次打开“10.png”和“11.png”文件。拖曳到当前文件图像中，生成“图层20”和“图层21”，依次使用快捷键Ctrl+T变换图像大小，并将其放至于画面合适的位置。选择“图层21”设置混合模式为“浅色”。
16 继续制作电脑界面上的图标元素
新建“图层22”，使用多边形套索工具 绘制界面上的按钮图标，并将其填充为黑色，然后按快捷键Ctrl+D取消选区。单击“添加图层样式”按钮 ，选择“描边”选项并设置参数，制作图案样式。按快捷键Ctrl+J复制得到“图层22副本”，并更改其颜色删除图层样式，将其放置于画面上合适的位置。
17 继续制作电脑界面上的图标元素
新建“图层23”，分别使用椭圆选框工具 和多边形套索工具 ，在画面上绘制需要的形状，并将其填充为黑色，按快捷键Ctrl+D取消选区。在其“图层”面板上设置其“不透明度”为70%。
18 制作图标上的背景
单击横排文字工具 ，设置前景色为需要的颜色，输入所需文字，双击文字图层，在其属性栏中设置文字的字体样式及大小，将其放至于画面合适的位置。
19 制作界面上的矩形条
使用矩形工具 ，在其属性栏中设置其“填充”为蓝色，“描边”为无，在界面上绘制的圆角矩形框上绘制矩形得到“矩形2”，将其放置于界面框上合适的位置。在其“图层”面板上设置其“填充”为16%。
20 将画面制作完成 选择“矩形2”，按快捷键Ctrl+J复制得到“矩形2副本”，并使用移动工具 。将其移至画面上合适的位置。至此，本实例制作完成。
设计小结：
1.单击“添加图层样式”按钮 ，选择“渐变叠加”选项并设置参数，制作渐变叠加图案样式。
2.单击横排文字工具 ，设置需要的前景色，输入所需文字，双击文字图层，在其属性栏中设置文字的字体样式及大小，将其放置于画面上合适的位置，制作界面上需要的文字。
延伸阅读
更多内容可以购买《创意UI——Photoshop玩转图标设计（第2版）》详细阅读哦！
作者：Art Eyes 设计工作室
出版社：人民邮电出版社
出版年：2017年12月
ISBN ：978-7-115-46425-5
