实战练习04　设计制作进度条

视　频：资源包\视频\第2章\2-5-2.mp4　　　

源文件：资源包\源文件\第2章\2-5-2.psd

●案例分析

本案例是设计制作一款UI界面中的进度条，使用了邻近色的配色方案，让界面进度条元素看起来温暖雅致。同时添加了一些纹理让界面看起来活泼一些，少量的文字说明为界面添加了内容又不占据视觉空间。案例的完成效果如图2-155所示。

●制作步骤

01 执行“文件>新建”命令，弹出“新建”对话框，新建一个空白文档，如图2-156所示。新建图层，设置前景色为RGB（213、71、133），使用“油漆桶工具”在画布中单击填充画布，如图2-157所示。

02 双击图层缩览图，打开“图层样式”对话框，选择“内发光”选项，设置各项参数，如图2-158所示。执行“文件>打开”命令，将素材图像“25201.png”拖曳到设计文档中，如图2-159所示。

03 打开“图层”面板，设置“混合模式”为“柔光”选项，更改“不透明度”为20%，如图2-160所示。新建图层，为画布填充从白色到透明的径向渐变，打开“图层”面板，设置“混合模式”和“不透明度”，如图2-161所示。

04 设置完成后，图像效果如图2-162所示。选中除“背景”图层外的所有图层，按快捷键【Ctrl+G】将其编组，重命名为“背景”，“图层”面板如图2-163所示。

05 使用“圆角矩形工具”在画布中绘制形状，设置“属性”面板的各项参数，如图2-164所示。绘制完成后，图形效果如图2-165所示。

06 双击形状图层的图层缩览图，打开“图层样式”对话框，选择“内阴影”选项，设置各项参数，如图2-166所示。继续在对话框中选择“外发光”选项，并设置各项参数，如图2-167所示。

07 最后在对话框中选择“投影”选项，并在对话框中设置各项参数，如图2-168所示。设置完成后，图像效果如图2-169所示。

08 使用“圆角矩形工具”在画布中绘制形状，图像效果如图2-170所示。在“属性”面板中设置圆角矩形的各项参数，如图2-171所示。

09 双击图层缩览图，打开“图层样式”对话框，选择“内阴影”选项，设置各项参数，如图2-172所示。继续在对话框中选择“渐变叠加”选项，并设置各项参数，如图2-173所示。

10 最后在对话框中选择“图案叠加”选项，并在对话框中设置各项参数，如图2-174所示。设置完成后，图像效果如图2-175所示。

11 打开“字符”面板，设置文字颜色为RGB（252、230、193），设置各项参数，如图2-176所示。使用“横排文字工具”在画布中输入文字内容，如图2-177所示。

12 双击图层缩览图，打开“图层样式”对话框，选择“投影”选项，设置各项参数，如图2-178所示。设置完成后，图像效果如图2-179所示。

13 使用相同方法完成其他文字的输入，如图2-180所示。打开“图层”面板，整理文字图层将其编组，如图2-181所示。

14 隐藏除“圆角矩形”图层外的所有图层，执行“图像>裁切”命令，如图2-182所示。执行“文件>导出>存储为Web所用格式”命令，弹出“存储为Web所用格式”对话框，对图像进行优化，并将其存储为透底图像，如图2-183所示。

15 设置完成后，单击“存储”按钮，将切图存储。使用相同方法完成另一个圆角矩形的切图输出，文件导出后，图像效果如图2-184所示。