1.5 课堂练习——制作iOS锁屏界面
通过以上基础知识的学习，读者对手机UI的设计有了一定的了解。接下来通过一个案例演示一个锁屏界面的创作过程。
1.5.1 案例分析
案例特点：本案例制作的是iOS数字解锁界面，界面中包含了许多细节，例如图形元素的投影、内阴影以及透明渐变等特殊效果，这些都需要读者对Photoshop中图层样式的运用有充分的掌握。
制作思路与要点：本案例的难点就是使用渐变样式实现透明玻璃质感。
渲染风格：极度逼真
尺寸规格：640像素×1136像素
源文件地址：源文件\第1章\案例1.PSD
视频地址：视频\第1章\案例1.SWF
·色彩分析
整个界面并没有使用绚烂华丽的颜色，低调的黑色表现出了庄重的气息，灰色以不同明度的渐变制作出透明玻璃质感，加入少量蓝色，显现出低调、精致的奢华感。
1.5.2 制作步骤
01 执行“文件＞打开”命令，打开素材图像“素材\第1章\001.jpg”，如图1-12所示。使用“矩形工具”在画布顶部创建一个黑色的矩形，如图1-13所示。继续使用“矩形工具”在画布顶部创建一个白色的矩形，如图1-14所示。
图1-12
图1-13
图1-14
02 设置“路径操作”为“合并形状”，继续在画布中绘制矩形，如图1-15所示。使用相同的方法继续绘制矩形，并修改图层“不透明度”为75%，得到界面信号图标效果，如图1-16、图1-17所示。
图1-15
图1-16
图1-17
03 打开“字符”面板，设置各项参数值，如图1-18所示。使用“横排文字工具”输入相应文字，并修改图层“不透明度”为80%，如图1-19所示。选择“椭圆工具”，按下Shift键的同时在画布中单击并拖动鼠标，绘制白色正圆，如图1-20所示。
图1-18
图1-19
图1-20
提示：创建形状时，按Shift键的同时在画布中拖动鼠标，可以以鼠标光标的落点为形状的左上角创建正圆；按Shift+Alt组合键的同时拖动鼠标，可以以鼠标光标的落点为形状的中心点创建正圆。
04 选择“矩形工具”，设置“路径操作”为“减去顶层形状”，在椭圆中绘制，并修改图层“不透明度”为80%，如图1-21、图1-22所示。选择“椭圆工具”，按下Shift键的同时在画布中单击并拖动鼠标，绘制白色正圆，如图1-23所示。
图1-21
图1-22
图1-23
05 选择“矩形工具”，设置“路径操作”为“减去顶层形状”，在形状中绘制，如图1-24所示。继续设置“路径操作”为“合并形状”，在形状中绘制矩形，得到形状相加效果，如图1-25所示。
图1-24
图1-25
06 使用相同的方法在图像中绘制，并修改图层“不透明度”为80%，图标效果如图1-26所示。使用相同的方法完成相似的制作，将相关图层编组，重命名为“状态栏”，如图1-27所示。
图1-26
图1-27
提示：创建形状时，按Shift键可以以“合并形状”模式绘制形状；按Alt键可以以“减去顶层形状”模式绘制形状，按Shift+Alt组合键可以以“与形状区域相交”模式掌握形状，掌握这些技巧可以提高工作效率。
提示：将图层编组是为了方便整理图层，在进行设计制作时，文件图层较多时，将相关图层分类编组，便于寻找和制作。选择所有相关管图层，按快捷键Ctrl+G即可将相关图层编组。
07 使用“矩形工具”在状态栏下方创建任意颜色的矩形，如图1-28所示。双击该图层缩览图，弹出“图层样式”对话框，选择“描边”选项设置参数值，如图1-29所示。
图1-28
图1-29
提示：双击图层缩览图，或单击“图层”面板底部的“添加图层样式”按钮，在弹出的菜单栏选择想要添加的图层样式，也可以弹出“图层样式”对话框。
08 继续选择“内阴影”选项设置参数值，如图1-30所示。选择“渐变叠加”选项设置参数值，如图1-31所示。
图1-30
图1-31
09 选择“投影”选项，设置参数值，如图1-32所示。设置完成后单击“确定”按钮，设置“填充”为0%，得到的图像效果如图1-33所示。
图1-32
图1-33
提示：“不透明度”用于控制图层、图层组中绘制的图像、形状、像素和图层样式的不透明度，而“填充”则用于控制像素和形状的不透明度，若对图层添加了图层样式，调整该制不会对图层所应用的图层样式有影响。
10 打开“字符”面板设置参数值，并使用“横排文字工具”在画布中输入相应的文字，如图1-34、图1-35所示。双击该图层缩览图，弹出“图层样式”对话框，选择“投影”选项设置参数值，如图1-36所示。
图1-34
图1-35
图1-36
11 设置完成后单击“确定”按钮，得到的图像效果如图1-37所示。使用相同的方法在画布底部创建形状并添加图层样式，如图1-38所示。
图1-37
图1-38
12 使用“直线工具”在矩形上方创建黑色的直线，如图1-39所示。打开“图层样式”对话框，在弹出的“图层样式”对话框中选择“描边”选项设置参数，如图1-40所示。
图1-39
图1-40
13 设置完成后单击“确定”按钮，修改图层的“不透明度”为60%，得到的图像效果如图1-41所示，“图层”面板如图1-42所示。使用相同的方法完成另一条直线的制作，并将相关图层编组，重命名为“分割线”，如图1-43所示。
图1-41
图1-42
图1-43
14 使用相同的方法输入文字并添加图层样式，得到底部按键效果，如图1-44所示。
图1-44
15 使用相同的方法完成其他按键的制作，如图1-45所示。使用“矩形工具”创建任意颜色的形状，如图1-46所示。
图1-45
图1-46
16 打开“图层样式”对话框，弹出“图层样式”对话框，选择“描边”选项设置参数值，如图1-47所示。选择“内阴影”选项设置参数值，如图1-48所示。
图1-47
图1-48
17 选择“渐变叠加”选项设置参数值，如图1-49所示。设置完成后单击“确定”按钮，得到的图像效果，如图1-50所示。
图1-49
图1-50
18 反复复制该形状，选择“移动工具”，按下Shift键的同时拖动该形状，将所有形状拖移至合适的位置，其效果如图1-51所示。
图1-51
19 整理图层，将相关图层编组，“图层”面板如图1-52所示。界面的最终效果如图1-53、图1-54所示。
图1-52
图1-53
图1-54