资源简介

(共21张PPT)
网店美工与店铺装修
WANGDIAN MEIGONG YU DIANPU ZHUANGXIU
应用篇
第 9 章
PC端电子产品店铺装修
9.1　电子产品 PC 端店铺首页的设计与制作
9.3　设计与制作平板主图视频
9.2　设计与制作平板详情页
9.4　电子产品PC端店铺装修
9.2　设计与制作平板详情页
9.2.1　设计平板详情页
9.2.2　制作平板详情页
本节以店铺首页“新品上市”商品展示区中平板的详情页设计与制作为例，练习与巩固商品详情页的设计技巧与制作方法。案例最终效果可参考本书配套素材“素材与实例”→“Ch9”→“平板详情页”文件夹中的“平板详情页 .psd”文件。
平板详情页效果
9.2　设计与制作平板详情页
（1）内容安排。
9.2.1　设计平板详情页
（2）配色分析。
（3）布局方式确定。
步骤 1　新建一个宽度为 750 像素，高度自定，分辨率为 72 像素 / 英寸，颜色模式为 RGB 颜色的文档，然后在图像编辑区上方置入素材文件夹中的“IMG_9793.jpg”文件，并将其旋转合适角度。
置入素材
9.2.2　制作平板详情页
1．制作宣传版块
步骤 2　在素材文件下方添加文本并设置文本属性。
添加文本并设置文本属性
9.2.2　制作平板详情页
步骤 3　新建一个图层，在文本下方绘制一个宽度为 750 像素，高度为 360 像素的矩形选区，然后将其填充为浅灰色（#efefef），接着打开素材文件夹中的“平板图标.psd”文件，并将图标复制到已绘制的浅灰色矩形上
绘制矩形并添加图标
步骤 1　置入素材文件夹中的“星空素材 .jpg”文件，并移至浅灰色矩形下方。置入“平板 .jpg”文件，将其进行抠图处理后，放在星空素材偏下位置。
置入素材
9.2.2　制作平板详情页
1．制作宣传版块
绘制选区并填充
9.2.2　制作平板详情页
步骤 2　新建一个图层，使用“多边形套索工具” 在平板屏幕上绘制选区并为其填充白色。
9.2.2　制作平板详情页
步骤 3　复制星空素材，并将复制的图层移到绘制的白色选区图层上方，然后将光标移至两个图层之间，当光标呈 状时单击创建剪贴蒙版，接着适当缩小复制的星空素材。
将图片剪切到平板中
添加文本并为其添加“投影”图层样式
9.2.2　制作平板详情页
步骤 4　在平板上方添加文本并设置文本属性，然后为其添加“投影”图层样式。
制作其他卖点版块
步骤 5　在星空图片下方添加文本并设置文本属性，然后置入素材文件夹中的“平板素材 .jpg”文件。
9.2.2　制作平板详情页
步骤 6　采用上述方法制作其他卖点版块。
添加文本和素材
步骤 7　置入素材文件夹中的“儿童乐园素材 .jpg”文件，按“Ctrl”键的同时单击其图层缩览图将其载入选区，然后新建一个图层并为其填充黑色，接着设置其图层不透明度为“50%” 。
置入素材并在其上方添加黑色蒙版
9.2.2　制作平板详情页
步骤 8　置入素材文件夹中的“IMG_9785.jpg”文件，然后在其上方添加文本并设置文本属性。
9.2.2　制作平板详情页
添加文本和素材
步骤 1　在儿童乐园下方添加文本并设置文本属性。
添加文本并设置文本属性
置入素材并绘制装饰线
9.2.2　制作平板详情页
3．制作商品信息版块
步骤 2　置入素材文件夹中的“IMG_9787.jpg”文件，然后在平板图片上添加描边宽度为 1 像素的灰色（#898989）装饰线。
步骤 3　新建一个图层，在上下两条装饰线板的一端各绘制一个灰色箭头。选中所有装饰线与箭头，按“Ctrl+E”组合键合并图层。
添加箭头　　
9.2.2　制作平板详情页
步骤 4　在平板图片上方绘制两个宽度为 212 像素，高度为 74 像素，圆角半径为3 像素，描边宽度为 1 像素，描边色为灰色的圆角矩形。
绘制圆角矩形
步骤 5　在圆角矩形内添加文本，并设置其字体为方正黑体_GBK，字体大小为28点。
添加文本并设置文本属性
9.2.2　制作平板详情页
步骤 6　在平板图片下方添加背景、文本、装饰矩形及文本之间的装饰线。至此，平板详情页制作完成。
添加背景、文本、装饰矩形及文本之间的装饰线
完成切片后的效果
9.2.2　制作平板详情页
4．切片
步骤 1　使用“切刀工具” 在平板详情页上绘制要切片的区域并为其命名。
步骤 2　将切片存储到“images”文件夹中。
切片效果
9.2.2　制作平板详情页
课堂小结
谢谢观看

展开更多......

收起↑