1.2 UI在Photoshop中的常用工具
虽然Photoshop的工具有很多，但用在UI设计中的只有一小部分，如“移动工具”“矩形工具”和“钢笔工具”等。
1.2.1 课堂案例：用常用工具制作界面
本案例是在Photoshop中用UI设计的常用工具制作一个简单的路由器界面，效果如图1-6所示。读者可以通过这个案例，简单了解UI设计的过程。
图1-6
01 启动Photoshop CC 2017，执行“文件>新建”菜单命令，在弹出的“新建文档”对话框中选择“移动设备”选项卡，然后选择iPhone 6预设并单击“创建”按钮
，如图1-7所示。生成的界面显示为“画板1”，如图1-8所示。
02绘制背景。设置“前景色”为深蓝色（R:26,G:27,B:42），然后按Alt+Delete组合键将背景进行填充，如图1-9所示。
图1-7
图1-8
图1-9
03绘制发光圆环。单击“创建新图层”按钮
，在背景图层上创建一个新图层，选中“椭圆工具”
并按住Shift键绘制一个520像素×520像素的圆形，然后关闭“填充”，设置“描边”颜色为白色，“描边宽度”为50像素，如图1-10所示。
04单击“创建新的填充或调整图层”按钮
，在弹出的菜单中选择“渐变填充”选项，然后设置“渐变”为紫蓝渐变，“角度”为-35度，如图1-11所示。
图1-10
提示
圆形路径需要与背景居中对齐。切换到“移动工具”
后，单击“选项”栏中的“水平居中对齐”按钮
，圆环和背景就可以居中对齐。
图1-11
05选中“渐变填充”图层并按住Alt键，将光标放置于“渐变填充”图层和“椭圆1”图层之间，此时光标会变成向下弯折的箭头，单击鼠标后“渐变填充”图层会成为“椭圆1”图层的剪贴蒙版，如图1-12所示。
图1-12
提示
按Ctrl+Alt+G组合键也可实现剪贴蒙版的操作。
06选中“渐变填充”图层和“椭圆1”图层，按Ctrl+E组合键将二者合并为一个图层，如图1-13所示。
图1-13
07双击“渐变填充1”图层打开“图层样式”对话框，勾选“外发光”选项，设置“混合模式”为“柔光”,“颜色”为蓝色（R:94,G:147,B:255）,“不透明度”为51％,“扩展”为17％,“大小”为65像素，如图1-14所示。单击“确定”按钮
后生成的效果如图1-15所示。
08绘制底部色块。使用“矩形工具”
在底部绘制一个高为150像素的白色矩形，如图1-16所示。
图1-14
图1-15
图1-16
09输入文字。使用“横排文字工具”
在圆环内输入“网络正常”，然后设置“字体”为“方正兰亭黑”,“字体大小”为55点，“颜色”为白色，如图1-17所示。
10 继续在圆环内输入“当前3台设备连接”，设置“字体大小”为30点，“颜色”为灰色（R:182,G:182,B:182），如图1-18所示。
图1-17
图1-18
11 绘制三角形图标。使用“多边形工具”
在画板上绘制一个倒三角形，设置“宽度”和“高度”都为30像素，“边数”为3,“填充”为浅蓝色（R:53,G:249,B:255），如图1-19所示。
12 将上一步创建的倒三角形图标复制一份旋转180°，然后设置“颜色”为紫色（R:108,G:97,B:255），如图1-20所示。
13 输入流量文字。使用“横排文字工具”
在左侧的三角形旁边输入“当前下载速度”，设置“字体大小”为24点，“颜色”为灰色（R:182,G:182,B:182），如图1-21所示。
图1-19
图1-20
图1-21
提示
由于“当前下载速度”图层与“当前3台设备连接”图层中文字的字体和颜色相同，读者也可以将“当前3台设备连接”图层复制一层，然后修改文字内容和字体大小。
14 将上一步输入的文字复制一份，修改为“当前上传速度”后放置在右侧三角形旁边，如图1-22所示。在放置文字时，需要适当调整三角形和文字的位置。
15 在“当前下载速度”下方输入文字000.1，设置“字体”为Arial,“字体大小”为70点，并设置不同的颜色，如图1-23所示。
16 按照同样的方法在“当前上传速度”下方输入000.2，如图1-24所示。
图1-22
图1-23
图1-24
17 在数值的下方输入KB/s，具体参数如图1-25所示。
18 调整版面。此时观察页面，所有元素整体偏下。将圆环和文字内容的图层全部选中，然后向上移动一段距离调整细节，如图1-26所示。
图1-25
图1-26
19 绘制分割线。使用“钢笔工具”
在圆环下方画一条直线，设置“描边”颜色为灰色（R:182,G:182,B:182），宽度为3像素，并设置该图层的“不透明度”为30％，如图1-27所示。
20添加图标。打开“素材文件>CH01>01.psd”文件，将其中的图标都放置在界面上，案例最终效果如图1-28所示。
图1-27
图1-28
1.2.2 移动工具
“移动工具”
（快捷键为V）是常用的工具之一，无论是移动图层、元素，还是移动其他文档到当前文档，都需要使用该工具。图1-29所示是“移动工具”
的选项栏。
图1-29
“移动工具”
除了可以移动图层外，还可以将图层进行对齐。当同时选中两个或两个以上的图层时，单击图1-30所示的相应按钮可以实现图层对齐。对齐方式包括“顶对齐”“垂直居中对齐”“底对齐”“左对齐”“水平居中对齐”和“右对齐”，如图1-31所示。
图1-30
图1-31
1.2.3 自由变换工具
“自由变换”工具（快捷键为Ctrl+T）可以将场景中的对象放大、缩小或旋转。
选中需要调整的对象，执行“编辑>自由变换”菜单命令，对象的周围会出现一个调整框，如图1-32所示。
按住Shift键并使用鼠标移动4个角点，可以均匀放大或缩小选中的对象，如图1-33所示。
图1-32
图1-33
按住Shift键和Alt键并使用鼠标移动4个角点，可以沿中心点等比例放大或缩小选中的对象，如图1-34所示。
将鼠标放在4个角点外，可以观察到光标变成圆弧形箭头，这时拖曳鼠标就可以旋转对象，如图1-35所示。若按住Shift键则以15°为一个单位精确旋转对象，如图1-36所示。
图1-34
图1-35
图1-36
1.2.4 矩形工具
“矩形工具”
（快捷键为Shift+U）可以创建矩形的路径或填充区域，其选项栏如图1-37所示。
图1-37
填充
：设置矩形的填充颜色，形成一个实心的矩形，如图1-38所示。
描边
：设置矩形描边的颜色，形成一个空心的矩形，如图1-39所示。
描边宽度
：设置描边的线框宽度，单位为像素，如图1-40所示。
描边选项
：设置描边线框的类型、对齐方式、角点类型和端点类型，如图1-41所示。
图1-38
图1-39
图1-40
图1-41
1.2.5 圆角矩形工具
“圆角矩形工具”（快捷键为Shift+U）与“矩形工具”
类似，只是增加了圆角的“半径”选项，如图1-42所示。
图1-42
“半径”数值越大，矩形的圆角越圆滑，如图1-43所示。
图1-43
提示
对于已经创建完成的圆角矩形，如果需要修改其参数，可以在“属性”面板中进行修改，如图1-44所示。
图1-44
1.2.6 椭圆工具
“椭圆工具”
（快捷键为Shift+U）可以绘制椭圆形或圆形，其选项栏与“矩形工具”
基本相同，如图1-45所示。
图1-45
按住Shift键，然后使用“椭圆工具”
绘制时，会绘制一个圆形，如图1-46所示。
图1-46
提示
若将椭圆形的长和宽数值设置的相同，也同样是绘制圆形。
1.2.7 钢笔工具
“钢笔工具”
（快捷键为Shift+P）可以绘制任意形状的路径，其选项栏如图1-47所示。
图1-47
“钢笔工具”
配合一些快捷键可以形成不同的操作效果。
钢笔工具+Shift键：当创建新锚点时，系统会以45°或其倍数生成新的锚点，如图1-48所示。
钢笔工具+Alt键：当按住Alt键时，“钢笔工具”
会暂时切换为“转换点工具”
，这时选中的点会由尖锐的角点会变成带控制手柄的圆滑角点，如图1-49所示。
图1-48
图1-49
钢笔工具+Ctrl键：当按住Ctrl键时，“钢笔工具”
会暂时切换为“直接选择工具”
，选中的锚点可以移动位置或改变角度，如图1-50所示。
“钢笔工具”
不仅能绘制直线还能绘制曲线，二者在操作上有些区别。
绘制直线：选中“钢笔工具”
后在图像的任意位置单击一次，创建第1个锚点，然后将鼠标指针移动到图像的其他位置再次单击鼠标，创建第2个锚点。与此同时，创建的两个锚点之间会生成一条直线，如图1-51所示。
图1-50
图1-51
提示
当设置“描边”的颜色和宽度后，才能在图像上看到生成的直线，若设置的是“填充”的颜色，则可能会生成一个色块区域，如图1-52所示。
图1-52
绘制曲线：选中“钢笔工具”
在图像的任意位置按住鼠标不放并拖曳，此时就建立了第1个曲线锚点，然后将鼠标指针移动到图像的其他位置再次按住鼠标不放并拖曳，形成第2个曲线锚点。与此同时，新建的两个锚点之间会生成一条曲线，如图1-53所示。调整锚点的控制手柄可以调整曲线弯曲的弧度。
图1-53
1.2.8 直接选择工具
“直接选择工具”
可以对“钢笔工具”
或“矩形工具”
等生成的锚点位置进行选择、移动和删除等操作，从而改变路径的走势和弧度，如图1-54所示。
图1-54
1.2.9 横排文字工具
“横排文字工具”
（快捷键为T）可以输入横向排列的文字，其选项栏如图1-55所示。
图1-55
切换文本方向
：单击该按钮后，横向排列的文字会变成竖向排列。
：设置输入文本的字体。该列表中的字体与计算机中安装的字体一致。
：设置输入文字的大小。
：用于消除输入文字的锯齿，单击下拉菜单，有“锐利”“犀利”“浑厚”和“平滑”选项，如图1-56所示。
图1-56
：设置输入文字的对齐方式。
：设置输入文字的颜色。
创建文字变形
：单击该按钮会弹出“变形文字”对话框，用于设置文字的变形方式，如图1-57所示。
切换字符和段落面板
：单击该按钮会弹出“字符”和“段落”面板，如图1-58所示。在该面板中可以详细设置文字的各项参数。
图1-57
图1-58