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

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

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

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

学习目标　　 掌握用Photoshop制作界面时常用工具的用法

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

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

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

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

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

提示

圆形路径需要与背景居中对齐。切换为“移动工具”，单击选项栏中的“水平居中对齐”按钮，圆环和背景就可以居中对齐了。

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

提示

按快捷键Ctrl+Alt+G也可实现创建剪贴蒙版的操作。

06 选择“渐变填充1”图层和“椭圆1”图层，按快捷键Ctrl+E将两者合并为一个图层，如图1-12所示。

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

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

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

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

11 绘制三角形图标。使用“三角形工具”在画板上绘制一个三角形，设置“宽度”和“高度”都为30像素，然后将其填充为浅蓝色（R:53,G:249,B:255）并进行垂直翻转，如图1-18所示。

12 将上一步创建的倒三角形图标复制一份并进行垂直翻转，然后填充为紫色（R:108,G:97,B:255），如图1-19所示。

13 输入流量文字。使用“横排文字工具”在左侧的三角形旁边输入“当前下载速度”，设置“字体大小”为24点，“颜色”为灰色（R:182,G:182,B:182），如图1-20所示。

提示

由于“当前下载速度”图层与“当前3台设备连接”图层中文字的字体和颜色相同，读者也可以将“当前3台设备连接”图层复制一层，然后修改文字内容和字体大小。

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

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

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

17 在数值的下方输入KB/s，文字的字体、大小、颜色设置如图1-24所示。

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

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

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