1.2　UI在Photoshop中的常用工具

虽然Photoshop的工具有很多，但用在UI设计中的只有一小部分，如“移动工具”“矩形工具”和“钢笔工具”等。

1.2.1　课堂案例：用常用工具制作界面

素材位置　素材文件>CH01>01.psd

实例位置　实例文件>CH01>课堂案例：用常用工具制作界面.psd

视频名称　课堂案例：用常用工具制作界面.mp4

学习目标　掌握UI设计的常用工具

本案例是在Photoshop中用UI设计的常用工具制作一个简单的路由器界面，效果如图1-6所示。读者可以通过这个案例，简单了解UI设计的过程。

01　启动Photoshop CC 2017，执行“文件>新建”菜单命令，在弹出的“新建文档”对话框中选择“移动设备”选项卡，然后选择iPhone 6预设并单击“创建”按钮，如图1-7所示。生成的界面显示为“画板1”，如图1-8所示。

02　绘制背景。设置“前景色”为深蓝色（R:26，G:27，B:42），然后按Alt+Delete组合键将背景进行填充，如图1-9所示。

03　绘制发光圆环。单击“创建新图层”按钮，在背景图层上创建一个新图层，选中“椭圆工具”并按住Shift键绘制一个520像素×520像素的圆形，然后关闭“填充”，设置“描边”颜色为白色，“描边宽度”为50像素，如图1-10所示。

04　单击“创建新的填充或调整图层”按钮，在弹出的菜单中选择“渐变填充”选项，然后设置“渐变”为紫蓝渐变，“角度”为-35度，如图1-11所示。

05　选中“渐变填充”图层并按住Alt键，将光标放置于“渐变填充”图层和“椭圆1”图层之间，此时光标会变成向下弯折的箭头，单击鼠标后“渐变填充”图层会成为“椭圆1”图层的剪贴蒙版，如图1-12所示。

06　选中“渐变填充”图层和“椭圆1”图层，按Ctrl+E组合键将二者合并为一个图层，如图1-13所示。

07　双击“渐变填充1”图层打开“图层样式”对话框，勾选“外发光”选项，设置“混合模式”为“柔光”，“颜色”为蓝色（R:94，G:147，B:255），“不透明度”为51%，“扩展”为17%，“大小”为65像素，如图1-14所示。单击“确定”按钮后生成的效果如图1-15所示。

08　绘制底部色块。使用“矩形工具”在底部绘制一个高为150像素的白色矩形，如图1-16所示。

09　输入文字。使用“横排文字工具”在圆环内输入“网络正常”，然后设置“字体”为“方正兰亭黑”，“字体大小”为55点，“颜色”为白色，如图1-17所示。

10　继续在圆环内输入“当前3台设备连接”，设置“字体大小”为30点，“颜色”为灰色（R:182，G:182，B:182），如图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所示。

14　将上一步输入的文字复制一份，修改为“当前上传速度”后放置在右侧三角形旁边，如图1-22所示。在放置文字时，需要适当调整三角形和文字的位置。

15　在“当前下载速度”下方输入文字000.1，设置“字体”为Arial，“字体大小”为70点，并设置不同的颜色，如图1-23所示。

16　按照同样的方法在“当前上传速度”下方输入000.2，如图1-24所示。

17　在数值的下方输入KB/s，具体参数如图1-25所示。

18　调整版面。此时观察页面，所有元素整体偏下。将圆环和文字内容的图层全部选中，然后向上移动一段距离调整细节，如图1-26所示。

19　绘制分割线。使用“钢笔工具”在圆环下方画一条直线，设置“描边”颜色为灰色（R:182，G：182，B:182），宽度为3像素，并设置该图层的“不透明度”为30%，如图1-27所示。

20　添加图标。打开“素材文件>CH01>01.psd”文件，将其中的图标都放置在界面上，案例最终效果如图1-28所示。

1.2.2　移动工具

“移动工具”（快捷键为V）是常用的工具之一，无论是移动图层、元素，还是移动其他文档到当前文档，都需要使用该工具。图1-29所示是“移动工具”的选项栏。

“移动工具”除了可以移动图层外，还可以将图层进行对齐。当同时选中两个或两个以上的图层时，单击图1-30所示的相应按钮可以实现图层对齐。对齐方式包括“顶对齐”“垂直居中对齐”“底对齐”“左对齐”“水平居中对齐”和“右对齐”，如图1-31所示。

1.2.3　自由变换工具

“自由变换”工具（快捷键为Ctrl+T）可以将场景中的对象放大、缩小或旋转。

选中需要调整的对象，执行“编辑>自由变换”菜单命令，对象的周围会出现一个调整框，如图1-32所示。

按住Shift键并使用鼠标移动4个角点，可以均匀放大或缩小选中的对象，如图1-33所示。

按住Shift键和Alt键并使用鼠标移动4个角点，可以沿中心点等比例放大或缩小选中的对象，如图1-34所示。

将鼠标放在4个角点外，可以观察到光标变成圆弧形箭头，这时拖曳鼠标就可以旋转对象，如图1-35所示。若按住Shift键则以15°为一个单位精确旋转对象，如图1-36所示。

1.2.4　矩形工具

“矩形工具”（快捷键为Shift+U）可以创建矩形的路径或填充区域，其选项栏如图1-37所示。

填充：设置矩形的填充颜色，形成一个实心的矩形，如图1-38所示。

描边：设置矩形描边的颜色，形成一个空心的矩形，如图1-39所示。

描边宽度：设置描边的线框宽度，单位为像素，如图1-40所示。

描边选项：设置描边线框的类型、对齐方式、角点类型和端点类型，如图1-41所示。

1.2.5　圆角矩形工具

“圆角矩形工具”（快捷键为Shift+U）与“矩形工具”类似，只是增加了圆角的“半径”选项，如图1-42所示。

“半径”数值越大，矩形的圆角越圆滑，如图1-43所示。

1.2.6　椭圆工具

“椭圆工具”（快捷键为Shift+U）可以绘制椭圆形或圆形，其选项栏与“矩形工具”基本相同，如图1-45所示。

按住Shift键，然后使用“椭圆工具”绘制时，会绘制一个圆形，如图1-46所示。

1.2.7　钢笔工具

“钢笔工具”（快捷键为Shift+P）可以绘制任意形状的路径，其选项栏如图1-47所示。

“钢笔工具”配合一些快捷键可以形成不同的操作效果。

钢笔工具+Shift键：当创建新锚点时，系统会以45°或其倍数生成新的锚点，如图1-48所示。

钢笔工具+Alt键：当按住Alt键时，“钢笔工具”会暂时切换为“转换点工具”，这时选中的点会由尖锐的角点会变成带控制手柄的圆滑角点，如图1-49所示。

钢笔工具+Ctrl键：当按住Ctrl键时，“钢笔工具”会暂时切换为“直接选择工具”，选中的锚点可以移动位置或改变角度，如图1-50所示。

“钢笔工具”不仅能绘制直线还能绘制曲线，二者在操作上有些区别。

绘制直线：选中“钢笔工具”后在图像的任意位置单击一次，创建第1个锚点，然后将鼠标指针移动到图像的其他位置再次单击鼠标，创建第2个锚点。与此同时，创建的两个锚点之间会生成一条直线，如图1-51所示。

绘制曲线：选中“钢笔工具”在图像的任意位置按住鼠标不放并拖曳，此时就建立了第1个曲线锚点，然后将鼠标指针移动到图像的其他位置再次按住鼠标不放并拖曳，形成第2个曲线锚点。与此同时，新建的两个锚点之间会生成一条曲线，如图1-53所示。调整锚点的控制手柄可以调整曲线弯曲的弧度。

1.2.8　直接选择工具

“直接选择工具”可以对“钢笔工具”或“矩形工具”等生成的锚点位置进行选择、移动和删除等操作，从而改变路径的走势和弧度，如图1-54所示。

1.2.9　横排文字工具

“横排文字工具”（快捷键为T）可以输入横向排列的文字，其选项栏如图1-55所示。

切换文本方向：单击该按钮后，横向排列的文字会变成竖向排列。

：设置输入文本的字体。该列表中的字体与计算机中安装的字体一致。

：设置输入文字的大小。

：用于消除输入文字的锯齿，单击下拉菜单，有“锐利”“犀利”“浑厚”和“平滑”选项，如图1-56所示。

：设置输入文字的对齐方式。

：设置输入文字的颜色。

创建文字变形：单击该按钮会弹出“变形文字”对话框，用于设置文字的变形方式，如图1-57所示。

切换字符和段落面板：单击该按钮会弹出“字符”和“段落”面板，如图1-58所示。在该面板中可以详细设置文字的各项参数。