资源简介

(共22张PPT)
网店美工与店铺装修
WANGDIAN MEIGONG YU DIANPU ZHUANGXIU
实践篇
第 4 章
精准转化——商品详情页
4.1　认识商品详情页
4.3　商品详情页的布局方式
4.2　商品详情页的内容安排
4.4　设计与制作针织衫详情页
4.5　商品详情页的切片与导出
4.5　商品详情页的切片与导出
4.5.1　切片
4.5.2　切片的优化与导出
4.5　商品详情页的切片与导出
制作完成的商品详情页通常是一幅完整的图片，便于查看页面整体效果。但在实际应用中，这样的图片往往尺寸过大，无法直接上传使用，此时需先对其进行切片再导出。
4.5.1　切片
切　片
利用 Photoshop 中的“切片工具” 可以将一幅大图切割成若干幅不同的小图，本节以针织衫详情页的切片为例，讲解为图片切片的方法与技巧。
调整切片的区域
实用技巧
若切片的区域不理想，可将光标移至切片的黄色线框上，当光标呈 或 时，拖拽线框即可调整切片的区域。
设置切片参数
步骤2　在步骤1创建的切片上右击，从弹出的快捷菜单中选择“编辑切片选项”项，可打开“切片选项”对话框，在其中设置切片名称为“版块标题”，单击“确定”按钮，设置切片名称。
4.5.1　切片
完成切片后的效果
步骤3　采用上述方法对针织衫详情页的其他区域进行切片并自定义切片名称。
4.5.1　切片
在切片上右击，从弹出的快捷菜单中选择“删除切片”项，可删除切片；选择“划分切片”项，打开“划分切片”对话框，在其中设置参数可均匀划分切片，如勾选其中的“水平划分为”复选框，然后在下方编辑框中输入“4”，单击“确定”按钮，可将图片水平均匀划分成4个切片。
此外，在图片上创建参考线，选择“切片工具” ，然后单击工具属性栏中的“基于参考线的切片”按钮，此时图片可基于参考线进行切片。
实用技巧
实用技巧
“划分切片”对话框
水平划分切片
基于参考线切片
4.5.2　切片的优化与导出
步骤1　选择“文件”→“导出”→“存储为 Web 所用格式（旧版）”菜单项，打开“存储为 Web 所用格式”对话框，在“优化的文件格式”下拉列表中选择“JPEG”项，“品质”参数为默认的“80”，以压缩切片，这种参数设置能兼顾图像的清晰度和加载速度。
优化切片的参数
4.5.2　切片的优化与导出
步骤2　参数设置完成后，单击“存储”按钮，打开“将优化结果存储为”对话框，然后在“保存在”下拉列表中选择文件的存储位置；在“文件名”文本框中输入文件的存储名称；在“格式”下拉列表中选择文件存储格式，一般选择“仅限图像”项；在“切片”下拉列表中选择要保存的切片类型，一般选择“所有用户切片”项。
存储切片
4.5.2　切片的优化与导出
步骤3　设置好所有参数后，单击“保存”按钮将切片图像保存，然后从弹出的对话框中勾选“不再显示”复选框，单击“确定”按钮，可将切片图像存储在一个名为“images”的文件夹中。
切片导出效果
本章实训 ——设计与制作项链详情页
设计与制作项链详情页
本实训以项链详情页的设计与制作为例，练习商品详情页的设计技巧与制作方法。案例最终效果可参考本书配套素材“素材与实例”→“Ch4”→“项链”文件夹中的“项链详情页 .psd”文件。
项链详情页效果
设计与制作项链详情页
2
3
1
（1）版块安排
（2）配色分析
（3）布局方式确定
1．设计项链详情页
（1）新建一个名为“项链详情页”，宽度为750像素，高度自定，分辨率为72像素 / 英寸，颜色模式为 RGB 颜色的文档。
设计与制作项链详情页
2．制作项链详情页
（2）置入素材文件夹中的“IMG_9622.jpg”文件，删除图片底部背景，并调整顶部背景的高度。
（3）在图片上添加文本并自定义文本属性。
添加文本并设置文本属性
（4）在图片下方添加文本并自定义文本属性，然后在文本下方绘制适合的浅灰色线条作为装饰。
设计与制作项链详情页
添加文本和线条装饰
（5）绘制一个适当大小的浅蓝色（自定义颜色）矩形，然后将其复制并移至合适位置，接着为其添加浅蓝色的“描边”图层样式。
（6）置入素材文件夹中的“IMG_9581.jpg”文件，然后将其剪切到复制的矩形中。
设计与制作项链详情页
（7）在图片右侧添加文本和线条、矩形装饰。采用同样方法制作卖点版块的剩余部分。
添加文本和线条、矩形装饰
将图片剪切到矩形中
设计与制作项链详情页
（8）采用上述方法制作项链信息描述版块的内容。
（9）利用“切片工具” 为项链详情页切片。
（10）将切片优化并导出。
作业布置
下面是一张首饰模特的图片，请大家对图片进行美化。提示：使用仿制图章工具去除斑点；利用修补工具修补肤色；巧用滤镜和蒙版工具让皮肤变光滑；使用曲线命令让皮肤变白；使用滤镜里的液化功能对人物进行瘦身。
谢谢观看

展开更多......

收起↑