第3章
App UI设计平面图标制作

App UI离不开矢量图形的制作，本章我们将使用Photoshop的矢量图形工具，通过将基本元素进行合并、剪切等操作，呈现一个个生动的图形。本章是icon的制作基础，很重要哦！

3.1　Home图标制作

案例综述

本例是制作单色Home图标，主要运用了三种工具，其中包括“钢笔工具”“圆角矩形工具”“矩形工具”。通过三者的混合使用，完成Home图标的制作，如图3.1所示。

图3.1

设计规范

造型分析

Home图标为不规则形状，以三角形和圆角矩形合并形成基本形，以矩形工具的加减运算完成效果。

操作步骤：

Step 01　新建文档。 执行“文件”→“新建”命令，或按下快捷键Ctrl+N，打开“新建”对话框，设置宽度和高度分别为800像素和600像素，分辨率为72像素/英寸，完成后单击“确定”按钮，新建一个空白文档，如图3.2所示。

图3.2

Step 02　显示网格。 执行“编辑”→“首选项”→“参考线、网格和切片”命令，在打开的“首选项”对话框中，设置网格线间隔为80像素、子网格为4，单击“确定”按钮。执行“视图”→“显示网格”命令，在制作图标的过程中，可以使用网格作为参考，使每个图标大小一致，如图3.3所示。

Step 03　绘制三角形。 选择“钢笔工具”，在选项栏中选择“形状”选项，在网格上进行绘制，得到三角形，如图3.4所示。

图3.3

图3.4

提示

绘制三角形状，除了使用钢笔工具绘制外，还可以使用“多边形工具”，在选项栏中设置边为3，即可绘制出三角形。不过在绘制出来后，还需要使用直接选择工具，将节点选中，进行调整。

Step 04　绘制矩形。 选择“矩形工具”，在选项栏中选择“合并形状”选项，在三角形的右边绘制矩形，如图3.5所示。

图3.5

Step 05　绘制圆角矩形。 选择“圆角矩形工具”，在选项栏中设置半径为20像素，选择“合并形状”选项，在三角形的下方绘制圆角矩形，如图3.6所示。

图3.6

Step 06　绘制矩形。 选择“矩形工具”，在选项栏中选择“减去顶层形状”选项，在圆角矩形的下方绘制矩形，将需要减去的部分从形状中减去，完成Home图标的制作，如图3.7所示。

图3.7

3.2　日历图标制作

案例综述

本例是日历图标的制作，主要是运用圆角矩形工具绘制基本形，以及路径之间的加减运算，最后使用矩形工具进行绘制，完成日历图标的制作，如图3.8所示。

图3.8

设计规范

造型分析

日历图标以圆角矩形为基本形，上方以矩形工具的加法运算绘制而成，下方以“矩形工具”的减法运算进行绘制。

操作步骤：

Step 01　新建文档。 执行“文件”→“新建”命令，或按下快捷键Ctrl+N，打开“新建”对话框，设置宽度和高度分别为800像素和600像素，分辨率为72像素/英寸，完成后单击“确定”按钮，新建一个空白文档，如图3.9所示。

图3.9

Step 02　填充背景色。 单击工具箱底部的“前景色”图标，打开“拾色器（前景色）”对话框，设置颜色为R:68　B:108　B:161，单击“确定”按钮，按下快捷键Alt+Delete键，为背景填充蓝色，如图3.10所示。

图3.10

Step 03　绘制圆角矩形。 设置前景色为R:238　B:238　B:238，单击“确定”按钮，选择“圆角矩形工具”，在选项栏中设置半径为20像素，在图像上绘制圆角矩形，如图3.11所示。

图3.11

Step 04　从形状中减去。 选择“圆角矩形工具”，在选项栏中设置半径为100像素，选择“减去顶层形状”选项，在图像上方绘制圆角矩形，如图3.12所示。

图3.12

Step 05　合并形状。 选择“圆角矩形工具”，在选项栏中选择“合并形状”选项，在图像上绘制圆角矩形，绘制后的形状将与原来的形状合并，如图3.13所示。

图3.13

提示

这两步的操作对新手来说，可能有些难度，因为这两步的操作都需要一步到位，而新手在刚开始绘制的时候很难掌握尺度，会导致绘制出来的两个圆角矩形或者矩形框不一样大。在这里有一个方法可供参考，即在绘制开始之前，可以使用参考线进行标注，然后根据参考线进行绘制。实在不行的话，也可以将其绘制成单独的图层，调整到合适的大小后，进行复制，再移动到合适的位置，最后将图层进行合并。

Step 06　从形状中减去。 选择“矩形工具”，在选项栏中选择“减去顶层形状”选项，在图像上绘制矩形，绘制后的形状区域将从原来的区域中减去，如图3.14所示。

图3.14

3.3　录音机图标制作

案例综述

本例是制作录音机图标，主要是搭配使用圆角矩形工具和矩形工具来完成形状，如图3.15所示。

图3.15

设计规范

造型分析

录音机图标为不规则形状，上方以圆角矩形单独绘制而成，下方以圆角矩形工具和矩形工具混合制作形成。

操作步骤：

Step 01　新建文档。 执行“文件”→“新建”命令，或按下快捷键Ctrl+N，打开“新建”对话框，设置宽度和高度分别为800像素和600像素，分辨率为72像素/英寸，完成后单击“确定”按钮，新建一个空白文档，如图3.16所示。

Step 02　绘制圆角矩形。 选择“圆角矩形工具”，在选项栏中设置半径为100像素，设置前景色为黑色，在图像上绘制圆角矩形，如图3.17所示。

图3.16

图3.17

Step 03　绘制圆角矩形。 为了方便操作，我们将使用参考线来进行衡量。按下快捷键Ctrl+R，打开“标尺工具”，从垂直和水平方向拉出参考线，然后再次选择“圆角矩形工具”，以红色的外围参考线为基准建立圆角矩形，如图3.18所示。

图3.18

Step 04　从形状中减去。 选择“圆角矩形工具”，在选项栏中选择“减去顶层形状”选项，以红色的内围参考线为基准建立圆角矩形，可将建立的选区从原始的形状上减去。选择“矩形工具”，建立选区，减去多余的形状，如图3.19所示。

图3.19

Step 05　新建矩形。 选择“矩形工具”，在选项栏中选择“新建图层”选项，在图像下方建立矩形框，完成效果，如图3.20所示。

步骤拆解示意图如图3.21所示。

图3.20

图3.21

3.4　文件夹图标制作

案例综述

本例是制作文件夹图标，使用钢笔工具、矩形工具和图层样式以及“自由变换”命令来完成制作，如图3.22所示。

图3.22

设计规范

造型分析

文件夹图标以钢笔工具绘制通过一系列操作，可形成基本形，最后添加纸张，表现质感。

操作步骤：

Step 01　新建文档。 执行“文件”→“新建”命令，或按下快捷键Ctrl+N，打开“新建”对话框，设置宽度和高度分别为600像素和600像素，分辨率为72像素/英寸，完成后单击“确定”按钮，新建一个空白文档，如图3.23所示。

图3.23

Step 02　绘制文件夹外形。 选择“钢笔工具”，在选项栏中选择“形状”选项，在图像上绘制出文件夹外形，打开“图层样式”对话框，选择“渐变叠加”“描边”“内发光”效果，设置参数，为文件夹添加效果，如图3.24所示。

图3.24

提示

你在使用钢笔工具绘制文件夹的时候，会不会遇到这样的问题呢？即在图像上单击绘制一个锚点的时候，这个锚点会自动吸附到网格上，导致想要绘制的形状出现偏差。如果有这样的问题，不要着急，执行“视图”→“对齐”命令，将对齐命令前面的对钩去掉，这样就可以随心所欲地在画布上绘制形状了。

Step 03　表现透视效果。 将文件夹图层进行复制，选择复制后的图层，按下快捷键Ctrl+T，自由变换，右击，在弹出的快捷菜单中选择“透视”选项，将光标确定在右上角的节点上，向右轻轻拖动节点，使文件夹外形向两边扩张，按下Enter键确认，如图3.25所示。

图3.25

Step 04　改变大小。 再次按下快捷键Ctrl+T，自由变换，选择控制框最上层中间的节点，向下拖动使其缩小一点，让它看起来像3D的打开文件夹，完成后，按下Enter键确认操作，如图3.26所示。

图3.26

Step 05　制作一张纸。 选择“矩形工具”，在文件夹上绘制一张纸，打开该图层“图层样式”对话框，选择“渐变叠加”“描边”选项，设置参数，为纸片添加质感，如图3.27所示。

图3.27

Step 06　表现文件夹立体感。 按下快捷键Ctrl+T，自由变换，将纸张向左进行旋转，将纸张图层移动到“形状1副本”图层的下方，现在图标看起来漂亮多了。我们还可以使它更酷一些，只需要将“形状1副本”图层的不透明度降低到50%～60%，如图3.28所示。

图3.28

步骤拆解示意图如图3.29所示。

图3.29

3.5　绘制基本形状

利用图形工具可以简单、轻松地制作各种形态的图像，并且还可以将基本形态的图像组合起来，制作出复杂的图形和任意的形态。接下来我们将学习如何使用图形工具进行制作。使用图形工具可以创建漂亮的图形形状，而不受分辨率的限制。为了方便用户绘制不同风格的图形形状，Photoshop提供了一些基本的图形绘制工具。通过图形工具，我们可以在图像中绘制直线、矩形、椭圆、多边形和其他自定形状。执行“图层”→“新建填充图层”→“纯色、渐变、图案”菜单命令，可以将形状图层更改为相应的内容，如图3.30所示。

图3.30

1.矩形工具

矩形工具用来绘制矩形和正方形。选择该工具后，单击并拖动鼠标可以创建矩形；按住Shift键拖动则可以创建正方形；按住Alt键拖动会以单击点为中心向外创建矩形；按住Shift+Alt键会以单击点为中心向外创建正方形。单击选项栏中的几何选项按钮，可以设置矩形的创建方法，如图3.31所示。

●　不受约束：可通过拖动鼠标创建任意大小的矩形和正方形，如图3.32所示。

●　方形：拖动鼠标时只能创建任意大小的正方形，如图3.33所示。

图3.31

图3.32

图3.33

●　从中心：以任何方式创建矩形时，鼠标在画面中的单击点即为矩形的中心，拖动鼠标时矩形将由中心向外扩散。

●　固定大小：选中该项并在它右侧的文本框中输入数值（W为宽，H为高度），此后单击鼠标时，只创建预设大小的矩形，图3.34为宽度为3厘米，高度为5厘米的矩形。

●　比例：选中该项并在它右侧的文本框中输入数值（W为宽度，H为高度），此后拖动鼠标时，无论创建多大的矩形，矩形的宽度和高度都保持预设的比例，图3.35为W∶H=1∶2时绘制的图形。

●　对齐边缘：勾选“对齐边缘”复选框时，矩形的边缘与像素的边缘重合，图形的边缘不会出现锯齿；取消勾选时，矩形边缘会出现模糊的像素，如图3.36所示。

图3.34

图3.35

图3.36

2.圆角矩形工具

圆角矩形工具用来创建圆角矩形。它的使用方法以及选项都与矩形工具相同，多了一个“半径”选项，“半径”用来设置圆角半径，该值越高，圆角越广，如图3.37所示。

图3.37

3.椭圆工具

椭圆工具用来创建椭圆和圆形，选择该工具后，单击并拖动鼠标可以创建椭圆，按住Shift键拖动则可创建圆形。椭圆工具的选项及创建方法与矩形工具基本相同，我们可以创建不受约束的椭圆和圆形，也可以创建固定大小固定比例的圆形，如图3.38所示。

图3.38

4.多边形工具

多边形工具用来创建多边形和星形。选择该工具后，首先要在工具选项栏中设置多边形或星形的边数，范围为3～100。单击工具选项栏中的按钮打开一个下拉面板，在面板中可以设置多边形的选项，如图3.39所示。

图3.39

●　半径：设置多边形或星形的半径长度，此后单击并拖动鼠标时将创建指定半径值的多边形或星形。

●　平滑拐角：创建具有平滑拐角的多边形和星形，如图3.40所示。

图3.40

●　星形：勾选复选框可以创建星形。在“缩进边依据”选项中可以设置星形边缘向中心缩进的数量，该值越大，缩进量越大，如图3.41所示。选择工具后在图像窗口中单击，会打开“创建多边形”对话框，勾选“平滑缩进”复选框，可以使星形的边平滑地向中心缩进，如图3.41所示。

图3.41

5.直线工具

直线工具用来创建直线和带有箭头的线段，选择该工具后，单击并拖动鼠标可以创建直线或线段，按住Shift键可创建水平、垂直或以45°为增量的直线。“直线工具”的工具选项栏中包含了设置直线粗细的选项，此外，下拉面板中还包含了设置箭头的选项，如图3.42所示。

●　起点/终点：勾选“起点”复选框，可在直线的起点添加箭头；勾选“终点”复选框，可在直线的终点添加箭头；两项都勾选，则在直线的起点和终点都会添加箭头，如图3.43所示。

图3.42

图3.43

●　宽度：用来设置箭头宽度与直线宽度的百分比，范围为10%～100%。

●　长度：用来设置箭头的长度与直线的宽度的百分比，范围为10%～100%。

●　凹度：用来设置箭头的凹陷程度，范围为-50%～50%，该值为0时，箭头尾部平齐；该值大于0时，向内凹陷；该值小于0时，向外凸出。

6.自定义形状工具

使用自定义形状工具可以创建Photoshop预设的形状、自定义的形状或者是外部提供的形状。选择该工具以后，需要单击工具选项栏中的按钮，在打开的形状下拉面板中选择一种形状，然后单击并拖动鼠标即可创建该图形。如果要保持形状的比例，可以按住Shift键绘制图形。如果要使用其他方法创建图形，可以在“自定义形状选项”下拉面板中设置，如图3.44所示。