资源简介

(共41张PPT)
网店美工与店铺装修
WANGDIAN MEIGONG YU DIANPU ZHUANGXIU
应用篇
第 9 章
PC端电子产品店铺装修
9.1　电子产品 PC 端店铺首页的设计与制作
9.3　设计与制作平板主图视频
9.2　设计与制作平板详情页
9.4　电子产品PC端店铺装修
9.1　电子产品 PC 端店铺首页的设计与制作
9.1　电子产品 PC 端店铺首页的设计与制作
本节将以电子产品 PC 端店铺首页的设计与制作为例，学习 PC 端店铺首页的设计技巧与制作方法。案例最终效果可参考本书配套素材“素材与实例”→“Ch9”→“电子产品 PC 端店铺首页”文件夹中的“电子产品 PC 端店铺首页 .psd”文件。
电子产品 PC 端店铺首页效果
不同平台的装修规范不同，使得店铺最终装修效果与效果图有所不同。因此，案例效果图仅为店铺装修提供参考
（1）页头。
（2）页中。
（3）页尾。
9.1.1　店铺装修规划
1．店铺布局规划
本例中的店铺主营电子产品，将背景、页头颜色、大部分文案颜色等设置为无彩色系，可以使画面极具质感，间接表现商品的品质与档次。另外，将重要信息设置为极具视觉冲击力的红色，能将其突显出来，吸引消费者目光的同时使画面效果更加丰富。
9.1.1　店铺装修规划
2．店铺配色方案确定
本例采用排版简约、没有过于复杂装饰和设计的简约风。这种风格的页面可以使消费者更加直观地获取关键信息。
9.1.1　店铺装修规划
3．店铺风格定位
步骤 1　新建一个名为“电子产品 PC 端店铺首页”，宽度为 1 920 像素，高度自定，分辨率为 72 像素 / 英寸，颜色模式为 RGB 颜色的文档。
9.1.2　制作店铺首页效果图
步骤 2　选择“视图”→“新建参考线”菜单项，打开“新建参考线”对话框，选中“水平”单选钮，然后在“位置”编辑框中输入“120 像素”，单击“确定”按钮创建参考线。采用同样方法在水平 150 像素、垂直 485 像素和垂直 1 435 像素处创建参考线。
1．制作店铺页头
创建参考线
步骤 3　新建一个名为“店铺招牌背景”的图层，然后在图像编辑区上方绘制一个宽度为 1 920 像素，高度为 150 像素的矩形选区，接着将其填充为深灰色（#34373a），最后按“Ctrl+D”组合键取消选区。
9.1.2　制作店铺首页效果图
步骤 4　置入素材文件夹中的“店铺标志 .png”文件并将其移至合适位置，然后在其右侧添加文本并设置文本属性。
置入店铺标志并添加店铺名称
制作关注店铺模块并输入品牌口号
步骤5　在文本右侧绘制一个宽度为114像素，高度为27像素，圆角半径为10像素，描边宽度为 1 像素，描边色为白色的圆角矩形，然后使用“钢笔工具” 在圆角矩形内左侧位置绘制一个白色心形，接着在白色心形右侧添加文本并设置文本属性，最后在店铺标志下方添加文本并设置文本属性。
9.1.2　制作店铺首页效果图
制作 30 元优惠券
步骤 6　在步骤 5 绘制的圆角矩形右侧绘制一个宽度为 120 像素，高度为 50 像素，描边宽度为 1 像素，描边色为白色的矩形，然后在矩形内添加文本并设置文本属性，制作 30 元优惠券。采用同样方法在 30 元优惠券右侧制作 50 元优惠券。
9.1.2　制作店铺首页效果图
步骤 7　在 50 元优惠券右侧置入素材文件夹中的“手机 1.png”文件，然后在手机右侧添加文本并设置文本属性，接着在“了解详情”文本下方绘制白色圆角矩形作为装饰。至此，店铺招牌制作完成。
制作新品上市
9.1.2　制作店铺首页效果图
制作导航
9.1.2　制作店铺首页效果图
步骤 8　在店铺招牌下方添加文本并设置文本属性，然后在文本之间添加描边宽度为 2 像素的白色装饰线，以制作导航。至此，店铺页头制作完成。
步骤 1　新建一个图层，然后在页头下方绘制一个宽度为 1 920 像素，高度为 500 像素的矩形选区，接着将其填充为浅灰色（#f7f8f8），作为店铺海报背景。
置入素材
9.1.2　制作店铺首页效果图
2．制作店铺海报
步骤 2　置入素材文件夹中的“平板 1.png”和“平板 2.png”文件，然后将它们移至合适位置。
步骤 3　在平板左侧添加文本并设置文本属性，然后在“新品”“ 3799”和“立即抢购”文本下方绘制圆角矩形作为装饰。至此，店铺海报制作完成。
添加文本和装饰图形
9.1.2　制作店铺首页效果图
步骤 4　将制作海报用到的所有图层进行编组，然后隐藏图层组，接着采用上述方法在当前位置再制作一幅店铺海报。
制作店铺海报
9.1.2　制作店铺首页效果图
步骤 1　在店铺海报下方绘制一个宽度为 950 像素，高度为 40 像素的深灰色矩形，然后在矩形上添加文本并设置文本属性，作为“新品上市”商品展示区标题。
制作“新品上市”商品展示区标题
9.1.2　制作店铺首页效果图
3．制作“新品上市”商品展示区
步骤 2　新建一个图层，然后在标题左下方绘制一个宽度和高度均为 450 像素的浅灰色矩形，接着置入素材文件夹中的“平板 1.png”和“平板 2.png”文件并将它们移至合适位置，最后添加文本并设置文本属性，此时一个商品展示图制作完成。
制作商品展示图
9.1.2　制作店铺首页效果图
步骤 3　采用上述方法制作其他商品展示图。
制作其他商品展示图
9.1.2　制作店铺首页效果图
步骤 4　在商品展示图下方绘制一个宽度为 300 像素，高度为 40 像素，圆角半径为 16 像素，描边宽度为 1 像素，描边色为深灰色的圆角矩形，然后在圆角矩形内添加文本并设置文本属性，以制作“查看更多商品”按钮。至此，“新品上市”商品展示区制作完成。
制作“查看更多商品”按钮
9.1.2　制作店铺首页效果图
添加并调整字幕
步骤 1　使用“钢笔工具” 在商品展示区左下方位置绘制一个适当大小的红色图形，然后在红色图形上绘制一个宽度为 164 像素，高度为 160 像素，圆角半径为 2 像素，填充色为淡黄色（#fdfaef）的圆角矩形。
9.1.2　制作店铺首页效果图
4．制作优惠券
绘制淡黄色圆角矩形
绘制正圆和虚线
步骤 2　在淡黄色圆角矩形两侧偏下位置各绘制一个直径为 12 像素的红色正圆，然后在两个正圆之间绘制一条虚线。
9.1.2　制作店铺首页效果图
步骤 3　使用“钢笔工具” 在圆角矩形底部绘制一个图形，然后为其添加“渐变叠加”图层样式，以完成优惠券底图的制作。
绘制图形并为其添加“渐变叠加”图层样式
9.1.2　制作店铺首页效果图
步骤 4　在优惠券底图合适位置添加文本并设置文本属性，然后在“点击领取”文本下方绘制白色圆角矩形作为装饰。至此，30 元优惠券制作完成。
制作 30 元优惠券
9.1.2　制作店铺首页效果图
步骤 5　复制 3 个 30 元优惠券并移至合适位置，然后修改文本内容，制作其他优惠券。
制作其他优惠券
9.1.2　制作店铺首页效果图
步骤 1　在优惠券左下方绘制一个宽度为 190 像素，高度为 440 像素的浅灰色矩形，然后在其顶部绘制一个宽度为 190 像素，高度为 40 像素的深灰色矩形，接着在其底部绘制一个宽度为 190 像素，高度为 12 像素的深灰色矩形。
绘制矩形
9.1.2　制作店铺首页效果图
5．制作分类导航及商品展示区
步骤 2　在已绘制的矩形上添加文本并设置文本属性。
添加文本并设置文本属性
9.1.2　制作店铺首页效果图
步骤 3　在分类导航右侧绘制一个宽度为 236 像素，高度为 308 像素的白色矩形，然后为其添加“投影”图层样式。
添加文本并设置文本属性
步骤 4　置入素材文件夹中的“电脑展示 1.jpg”文件，然后将其等比例缩放后移至合适位置，接着在其下方添加文本并设置文本属性，以制作商品展示图。
制作商品展示图
9.1.2　制作店铺首页效果图
步骤 5　采用步骤 3 ～步骤 4 的方法绘制矩形并添加“投影”图层样式，然后置入素材文件，接着添加文本并设置文本属性，以制作其他商品展示图。
制作其他商品展示图
9.1.2　制作店铺首页效果图
步骤 1　在分类导航及商品展示区的下方绘制一个宽度为 1 920 像素，高度为 370 像素的浅灰色矩形，然后在矩形中上部绘制一个直径为 149 像素的浅灰色正圆，接着在矩形底部绘制一个宽度为 1 920 像素，高度为 44 像素的深灰色矩形。
制作页尾背景
9.1.2　制作店铺首页效果图
6．制作页尾
步骤 2　在页尾背景合适位置添加文本并设置文本属性。
添加文本并设置文本属性
9.1.2　制作店铺首页效果图
绘制圆角矩形并为其添加“投影”图层样式
步骤 3　在文本下方绘制一个宽度为 144 像素，高度为 212 像素，圆角半径为 10 像素的白色圆角矩形，然后为其添加“投影”图层样式。
9.1.2　制作店铺首页效果图
绘制图形并为其添加“渐变叠加”图层样式
9.1.2　制作店铺首页效果图
步骤 4　使用“钢笔工具” 在白色圆角矩形内绘制一个红色盾牌图形，然后为其添加“渐变叠加”图层样式。
步骤 5　在圆角矩形合适位置添加文本并设置文本属性，此时店铺声明中的一项制作完成。
制作店铺声明中的一项
9.1.2　制作店铺首页效果图
制作店铺声明中的其他项
步骤 6　采用上述方法制作店铺声明中的其他项。
9.1.2　制作店铺首页效果图
9.1.2　制作店铺首页效果图
7．切片
步骤 1　使用“切刀工具” 在店铺招牌上绘制要切片的区域，然后在“切片选项”对话框中设置切片名称为“店铺招牌” 。
设置切片参数
步骤 2　采用上述方法在首页其他位置绘制要切片的区域。
完成切片后的效果
9.1.2　制作店铺首页效果图
步骤 3　选择“文件”→“导出”→“存储为 Web 所用格式（旧版）”菜单项，打开“存储为 Web 所用格式”对话框，在“优化的文件格式”下拉列表中选择“JPEG”项，“品质”参数为默认的“80”，然后单击“存储”按钮，打开“将优化结果存储为”对话框。
在该对话框“保存在”下拉列表中选择文件的存储位置，在“文件名”文本框中输入“电子产品 PC 端店铺首页切片 .jpg”；在“格式”下拉列表中选择“仅限图像”项，
在“切片”下拉列表中选择“所有用户切片”项，然后单击“保存”按钮将切片存储在了一个名为“images”的文件夹中。
9.1.2　制作店铺首页效果图
9.1.2　制作店铺首页效果图
切片效果
课堂小结
谢谢观看

展开更多......

收起↑