2.2 Photoshop工具组
在学习完辅助工具后，接下来学习实际操作工具。Photoshop提供了多个工具组，运用它们可以绘制出丰富多彩的界面。
2.2.1 选区工具组
在Photoshop中处理界面的局部内容时，要先指定编辑操作的有效区域，即创建选区。一般在制作UI的过程中常用一些基本选择工具创建选区。
基本选择工具包括选框类工具和套索类工具。“矩形选框工具”
、“椭圆选框工具”
、“单行选框工具”
和“单列选框工具”
等属于选框类工具，这些工具可以创建规则的选区。而“套索工具”
、“多边形套索工具”
和“磁性套索工具”
等属于套索类工具，这些工具可以创建不规则的选区。
1. 矩形选框工具
“矩形选框工具”
用于创建矩形和正方形选区，图2-29所示为“矩形选框工具”
的选项栏。
图2-33
2. 椭圆选框工具
“椭圆选框工具”
主要用来创建椭圆形选区和圆形选区，按住Shift键就可以创建圆形选区，如图2-34和图2-35所示。其操作方法和“矩形选框工具”
的操作方法相同。
图2-34
图2-35
图2-36所示为“椭圆选框工具”
的选项栏。
图2-37
02 执行“视图”→“显示”→“网格”命令，在画面中显示网格，如图2-38所示。
图2-38
03 选择工具箱中的“单列选框工具”
，在工具选项栏中单击“添加到选区”
按钮，然后在网格线上单击，创建宽度为1像素的选区，如图2-39所示。
图2-39
04 单击“图层”面板底部的“创建新图层”
按钮，创建图层。按Ctrl+Delete组合键，在选区内填充背景色（白色），按Ctrl+D组合键取消选区，并隐藏网格，如图2-40所示。
图2-40
05 按Ctrl+T组合键显示定界框，旋转线条，如图2-41所示。
图2-41
06 按Alt+Ctrl+G组合键创建剪贴蒙版，将图标以外的线条隐藏，如图2-42所示。
图2-42
2.2.2 形状工具组
形状实际上就是由路径轮廓围成的矢量图形，UI的元素通常都是由矢量图形构成的。Photoshop中的形状工具包括“矩形工具”
、“圆角矩形工具”
、“椭圆工具”
、“多边形工具”
、“直线工具”
和“自定形状工具”
等。它们可以绘制出标准的几何矢量图形，也可以绘制出自定义的图形。
1. 矩形工具
使用“矩形工具”
可以绘制正方形和矩形，其使用方法与“矩形选框工具”
类似。在绘制时，按住Shift键可以绘制出正方形，如图2-43所示；按住Alt键可以以鼠标单击点为中心绘制矩形，如图2-44所示；按住Shift+Alt组合键则可以以鼠标单击点为中心绘制正方形。
图2-43
图2-44
2. 圆角矩形工具
使用“圆角矩形工具”
可以绘制出具有圆角效果的矩形，其绘制方法和选项与“矩形工具”
相似，只不过多了一个“半径”选项。“半径”选项用来设置圆角的半径，数值越大，圆角越大，如图2-45所示。
图2-45
3. 椭圆工具
使用“椭圆工具”
可以绘制出椭圆形和圆形，其绘制方法和设置选项与矩形工具相似。如果要绘制椭圆形，拖动鼠标就可以进行绘制；如果要绘制圆形，可以按住Shift键或Shift+Alt组合键进行绘制，如图2-46所示。
图2-48
04 按3次Ctrl+J组合键，将该星形复制3份，并移动它们的位置，如图2-49所示。
图2-49
05 继续在画面中绘制星形，并在工具选项栏修改“填充”为无，“描边”为黄色（R:255,G:214,B:41），描边宽度为6像素，修改星形的大小和位置，如图2-50所示。
图2-50
06 复制3个该星形，并移动它们的位置，如图2-51所示。
图2-51
07 在“图层”面板选中“背景”图层，设置前景色为深灰色（R:58,G:58,B:58），按Alt+Delete组合键为“背景”图层填充前景色，最终效果如图2-52所示。
图2-52
5. 直线工具
“直线工具”
用来绘制直线和带箭头的线段。选择该工具后，拖动鼠标可以绘制直线或线段，按住Shift键可以绘制水平、垂直或以45°角为增量的直线。它的选项栏中包含了设置直线粗细的选项，此外，下拉面板中还包含了设置箭头的选项，如图2-53所示。
图2-56
图2-57
03 继续在工具选项栏设置“平滑”为50%，设置前景色为蓝色（R:26,G:32,B:142），在画面中绘制兔子玩偶图形，如图2-58所示。
图2-58
04 修改画笔的“大小”为“3像素”，绘制兔子耳朵的阴影，如图2-59所示。
图2-59
05 在工具选项栏设置画笔“不透明度”为50%，修改前景色为红色（R:255,G:0,B:0），在兔子脸部绘制短线段，完成玩偶图标的绘制，如图2-60所示。
图2-60
2. 钢笔工具
“钢笔工具”
是Photoshop中强大的绘图工具之一，它主要有两种用途：一是绘制矢量图形，二是用于选取对象。当作为选取工具使用时，“钢笔工具”
描绘出的轮廓光滑、准确，将路径转换为选区就可以准确地选择对象，如图2-61所示。
图2-63
02 单击工具箱中的“渐变工具”
，在工具选项栏单击“线性渐变”
按钮，如图2-64所示。
图2-64
03 单击左侧的渐变颜色条，打开“渐变编辑器”窗口，双击左侧的色标，打开“拾色器（色标颜色）”对话框，在“拾色器（色标颜色）”对话框中调整该色标的颜色，修改渐变颜色，如图2-65所示。
图2-66
05 双击最后一个色标，修改渐变颜色为深紫色（R:41,G:16,B:83），如图2-67所示。
图2-67
06 选中“图层1”，按住Ctrl键并单击该图层的缩略图，将其载入选区，如图2-68所示。
图2-69
08 选中“图层2”，打开“渐变编辑器”窗口，重新修改渐变颜色，如图2-70所示。使用相同的方法，在上方的圆角矩形内填充渐变颜色，绘制有水晶质感的按钮，如图2-71所示。
图2-70
图2-71
4. 油漆桶工具
“油漆桶工具”
可以在图像中填充前景色或图案。如果创建了选区，填充的区域为所选区域；如果没有创建选区，则填充与鼠标单击点颜色相近的区域。
【练习2-10】用油漆桶工具为图标填色
源 文 件：第2章\练习2-10
在线视频：第2章\练习2-10 用油漆桶工具为图标填色.mp4
使用“油漆桶工具”
可以为图标填色，下面讲解具体填色方法。
01 运行Photoshop 2020，按Ctrl+O组合键，打开资源文件中的“传输图标.psd”素材，如图2-72所示。
图2-72
02 单击工具箱中的“油漆桶工具”
，在工具选项栏设置“填充”为“前景”，“容差”为32，如图2-73所示。
图2-77
在使用文字工具输入文字之前，需要在工具选项栏或“字符”面板中设置字符的属性，如字体、大小和文本颜色等，图2-78所示为“横排文字工具”
的选项栏。
图2-80
2.3.2 滤镜
Photoshop中的滤镜具有非常神奇的作用，在UI设计中，可以通过不同的滤镜制作各具特色的UI元素。在多种滤镜中常使用到“高斯模糊”“动感模糊”“添加杂色”等滤镜。
1. 高斯模糊
“高斯模糊”滤镜属于模糊滤镜组中的滤镜。模糊滤镜组包含高斯模糊、光晕模糊、表面模糊、动感模糊和径向模糊等14种滤镜。它们可以削弱相邻像素的对比度并柔化图像，使图像产生模糊效果。
“高斯模糊”滤镜可以添加低频细节，使图像产生一种朦胧的效果，如图2-81所示。通过调整“半径”值可以设置模糊的范围，其以像素为单位，数值越高，模糊效果越强。
图2-81
2. 动感模糊
“动感模糊”滤镜可以根据制作效果的需要沿指定方向，以指定强度模糊图像，产生的效果类似于以固定的曝光时间给一个移动的对象拍照，如图2-82所示。
图2-93
03 按Ctrl+T组合键调整汽车大小，再按住Ctrl键拖动定界框四周的控制点对图像进行变形，如图2-94所示。
图2-94
04 单击“图层”面板底部的
按钮，为图层添加蒙版。使用“画笔工具”
，选择柔角画笔
，在汽车上涂抹黑色，用蒙版遮盖图像，如图2-95所示。
图2-96
图2-97