资源简介

(共22张PPT)
网店美工与店铺装修
WANGDIAN MEIGONG YU DIANPU ZHUANGXIU
应用篇
第 10 章
手机端电子产品店铺装修
10.1　电子产品手机端店铺首页设计与制作
10.2　电子产品手机端店铺装修
章 | 前 | 导 | 读
移动互联网背景下，伴随着智能手机的普及，移动端用户已远超 PC 端用户，移动端访问量也已超出 PC 端访问量，成为最大的互联网流量领域，由此可见手机端店铺的重要性。本章将介绍手机端店铺的装修技巧与方法。
知 | 识 | 目 | 标
掌握手机端店铺的装修方法。
技 | 能 | 目 | 标
能够完成手机端店铺的装修工作。
素 | 质 | 目 | 标
增强紧跟时代发展的意识。
了解我国移动电子商务的发展现状。
10.1　电子产品手机端店铺首页设计与制作
10.1.1　店铺装修规划
10.1.2　制作店铺首页效果图
10.1　电子产品手机端店铺首页设计与制作
本节将以电子产品手机端店铺首页的设计与制作为例，学习手机端店铺首页的设计技巧与制作方法。案例最终效果可参考本书配套素材“素材与实例”→“Ch10”文件夹中的“电子产品手机端店铺首页 .psd”文件。
电子产品手机端店铺首页效果
手机淘宝客户端经过几年的更新换代，后台操作越来越简单明了，也越来越便于中小商家和新手商家的应用。店铺首页中自上而下安排了页头、店铺海报、新品上市展示区、商品排行榜展示区和页尾等。
此外，为避免首页布局比较死板，新品上市展示区和商品排行榜展示区采用长短、宽窄不同的矩形来展示。
另外，手机端店铺采用与 PC 端店铺首页相同的主色（深灰色）与辅助色（红色），以及排版简约、没有过于复杂装饰和设计的简约风格。
10.1.1　店铺装修规划
店铺布局规划示意图
步骤 1　新建一个名为“电子产品手机端店铺首页”，宽度为 1 200 像素，高度自定，分辨率为 72 像素 / 英寸，颜色模式为 RGB 颜色的文档。
10.1.2　制作店铺首页效果图
提示
不同平台对手机端店铺首页尺寸的要求有所不同，建议淘宝手机端店铺首页宽度为 1 200 像素，高度自定，图片格式为 JPG、PNG 等。
置入素材并移至合适位置
步骤 2　将背景图层填充为浅灰色（#fafafa），然后置入本书配套素材“素材与实例”→“Ch10”文件夹中的“页头 .jpg”文件，将其移至图像编辑区顶部中间位置。
10.1.2　制作店铺首页效果图
制作 30 元优惠券
步骤 3　绘制一个宽度为 1 200 像素，高度为 200 像素的深灰色（#34373a）矩形，然后置入素材文件中的店铺标志，接着添加文本并设置文本属性，最后打开本书配套素材“素材与实例”→“Ch9”→“电子产品 PC 端店铺首页”文件夹中的“电子产品 PC端店铺首页 .psd”文件，将其中的“关注我们”图标移至新文档合适位置后等比例缩小，此时店铺招牌绘制完成。
10.1.2　制作店铺首页效果图
步骤 4　保持“电子产品 PC 端店铺首页 .psd”文档处于打开状态，将其中的“店铺海报 1”移至新文档中合适位置。
添加店铺海报
10.1.2　制作店铺首页效果图
绘制新品上市区上方展示图
步骤 5　绘制一个宽度为 1 160 像素，高度为 600 像素，圆角半径为 20 像素的圆角矩形，然后将素材文件夹中的“星空素材 .jpg”文件剪切到其中，接着在其中添加文本并设置文本属性，最后在“查看全部”文本下方绘制一个白色圆角矩形作为装饰，新品上市区上方展示图绘制完成。
10.1.2　制作店铺首页效果图
步骤 6　在展示图下方绘制一个宽度为 500 像素，高度为 538 像素，圆角半径为 20 像素的白色圆角矩形，然后为其添加“投影”图层样式，接着复制一个圆角矩形并移至合适位置，最后将“电子产品 PC 端店铺首页 .psd”文档中的“主图”“主图 2”分别移至两个白色圆角矩形上。
添加文本和装饰图形
10.1.2　制作店铺首页效果图
步骤 7　采用上述方法将“电子产品 PC 端店铺首页 .psd”文档中的“主图 3”“主图 4”和“主图 5”移至新文档中，并等比例缩放后移至合适位置。
添加商品主图
10.1.2　制作店铺首页效果图
步骤 8　在新品上市区下方绘制一个宽度为 1 035 像素，高度为 80 像素，圆角半径为 20 像素的圆角矩形，然后为其添加“渐变叠加”图层样式，接着在其中添加文本并设置文本属性，最后绘制一个适当大小的白色圆角矩形装饰文本，得到店铺优惠券。
制作店铺海报
10.1.2　制作店铺首页效果图
步骤 9　在店铺优惠券下方绘制 3 个宽度为 310 像素，高度为 80 像素，圆角半径为20 像素的白色圆角矩形，然后在圆角矩形上添加文本并设置文本属性，制作商品排行榜展示区标签。
制作“新品上市”商品展示区标题
10.1.2　制作店铺首页效果图
步骤 10　在标签下方添加宽度为 1 020 像素，高度为 300 像素，圆角半径为 20 像素的白色圆角矩形，然后复制“主图”图层组中的平板素材并将其移至白色圆角矩形上，接着在平板素材右侧添加文本并设置文本属性，此时商品排行榜展示区中的商品展示图制作完成。
制作商品展示图
10.1.2　制作店铺首页效果图
步骤 11　采用上述方法制作商品排行榜展示区中的其他商品展示图。最后在图像编辑区底部置入素材文件夹中的“页尾 .jpg”文件。
绘制店铺首页剩余部分
10.1.2　制作店铺首页效果图
课堂小结
谢谢观看

展开更多......

收起↑