任务二 完成详情页文件切片并将其存储为Web所用格式

任务描述

小可入职新百优电子商务有限公司美工部一个星期了，公司领导想了解小可的网店美工基础，给小可布置了一个导出详情页文件切片的任务，要求导出的图片必须满足互联网平台使用规范。

本任务的设置目的是带领大家学习导出详情页文件切片的操作流程。

任务目标

①学生能够使用参考线和切片等工具完成文件切片工作。

②学生能够将文件切片导出为正确格式的图片。

任务实施

 步骤1 执行“文件”|“打开”命令，打开“项目一素材”文件夹内的“任务2”PSD文件，如图1-68所示。

 步骤2 在“图层”面板中，可以看到5个图层组，如图1-69所示。

 步骤3 按Ctrl+R快捷键调出标尺，在标尺栏上右击鼠标，在弹出的快捷菜单中选择“像素”选项，如图1-70所示。

 步骤4 在标尺栏上按住鼠标左键后向下拖曳，拉出参考线至合适位置后释放鼠标左键，即可新建水平参考线。使用同样的方法，在每一个需要切片的位置新建水平参考线，如图1-71所示。

 步骤5 先在工具箱中单击“切片工具”按钮，再在工具选项栏中单击“基于参考线的切片”按钮，如图1-72所示，即可基于参考线进行图像切片。

 步骤6 执行“文件”|“导出”|“存储为Web所用格式”命令，如图1-73所示。

 步骤7 弹出“存储为Web所用格式”对话框，在“格式”列表框中选择“JPEG”选项，设置“品质”为“30”、“压缩品质”为“中”，单击“存储”按钮，如图1-74所示。

 步骤8 弹出“将优化结果存储为”对话框，设置保存路径和文件名，单击“保存”按钮，如图1-75所示。

 步骤9 完成以上操作后，即可完成详情页文件切片并将其存储为Web所用格式。在存储文件夹中，可以查看切片图像，如图1-76所示。