资源简介

(共28张PPT)
网店美工与店铺装修
WANGDIAN MEIGONG YU DIANPU ZHUANGXIU
实践篇
第 7 章
锦上添花——辅助模块
7.1　优惠券的设计与制作
7.3　分类导航的设计与制作
7.2　收藏区的设计与制作
7.3　分类导航的设计与制作
7.3.1　分类导航的设计要点
7.3.2　设计与制作电子产品店铺分类导航
分类导航一般位于店铺左栏，是店铺重要的辅助模块之一，尤其商品种类繁多时，其作用更为突出。清晰的分类导航可以让消费者很容易找到想要购买的商品，获得流畅的购物体验。
7.3　分类导航的设计与制作
7.3.1　分类导航的设计要点
（1）文字大小。
（2）语种。
使用不同语种和使用统一语种的分类导航效果对比
提示
一些电子产品、家居用品等店铺分类导航中的文字会涉及产品型号，此时不同语种搭配使用无法避免，可不统一。
电子产品店铺分类导航效果
7.3.2　设计与制作电子产品店铺分类导航
本节以电子产品店铺分类导航的设计与制作为例，学习分类导航的设计技巧与制作方法。案例最终效果可参考本书配套素材“素材与实例”→“Ch7”文件夹中的“分类导航 .psd”文件。
分类导航以蓝色为主色，贴合了电子产品的科技感属性和行业特征。此外，以橘黄色、黄色、绿色和蓝紫色等颜色为点缀色，在丰富画面的同时使画面更加活泼。
7.3.2　设计与制作电子产品店铺分类导航
1．设计电子产品店铺分类导航
步骤 1　新建一个名为“分类导航”，宽度为 190 像素，高度为 500 像素，分辨率为 72 像素 / 英寸，颜色模式为 RGB 颜色的文档。
7.3.2　设计与制作电子产品店铺分类导航
2．制作电子产品店铺分类导航
通常分类导航的宽度不低于 190 像素，高度自定，图片格式支持 JPG、PNG 等格式。
提示
步骤 2　将“背景”图层填充为蓝色（#0e4f87），然后新建一个图层，接着在图像编辑区上方绘制一个宽度为 190 像素，高度为 54 像素的深灰色（#1f1e1d）矩形。
填充背景并绘制深灰色矩形
7.3.2　设计与制作电子产品店铺分类导航
步骤 3　在深灰色矩形上添加“查看所有商品”文本，并设置其字体为微软雅黑，字体大小为 14 点，字体颜色为白色。
添加文本并设置文本属性
制作文本装饰框
步骤 4　在文本左下方绘制一个宽度和高度均为 22 像素，圆角半径为 6 像素的圆角矩形，然后设置其填充色为橘黄色（#f78b44）。采用同样方法绘制黄色（#f9a900）和天蓝色（#1abdf1）圆角矩形。
7.3.2　设计与制作电子产品店铺分类导航
步骤 5　在圆角矩形右侧添加文本并设置文本属性。
添加文本和矩形装饰
7.3.2　设计与制作电子产品店铺分类导航
步骤 6　在天蓝色圆角矩形图层下方新建一个图层，然后绘制一个宽度为 190 像素，高度为 200 像素的深蓝色（#033c6d）矩形。
绘制深蓝色矩形
7.3.2　设计与制作电子产品店铺分类导航
步骤 7　在“nova 系列”文本下方添加文本并设置文本属性。
添加文本并设置文本属性
步骤 8　采用步骤 4 ～步骤 5 的方法绘制圆角矩形并添加文本。
绘制圆角矩形并添加文本
7.3.2　设计与制作电子产品店铺分类导航
步骤 9　绘制一个宽度为 20 像素，高度为 4 像素的淡蓝色（#a7d2f8）矩形，按“Ctrl+T”组合键显示变换框，按住“Shift”键的同时拖动变换框角点，将其旋转 45°。复制旋转后的矩形，将其水平翻转并移至合适位置。
选中两个矩形，按“Ctrl+E”组合键将其合并，然后将合并后的图形等比例缩小后移至“Mate 系列”文本右侧作为箭头。
绘制、复制并调整矩形
7.3.2　设计与制作电子产品店铺分类导航
将箭头等比例缩小并移至合适位置
步骤 10　复制多个步骤 9 绘制的箭头并移至合适位置。至此，电子产品店铺分类导航制作完成。
7.3.2　设计与制作电子产品店铺分类导航
复制多个箭头并移至合适位置
课堂小结
本章实训 ——设计与制作古玩店铺收藏区
设计与制作古玩店铺收藏区
本实训以古玩店铺收藏区的设计与制作为例，练习收藏区的设计技巧与制作方法。案例最终效果可参考本书配套素材“素材与实例”→“Ch7”文件夹中的“古玩店铺收藏区 .psd”文件。
古玩店铺收藏区效果
（1）内容安排。
设计与制作古玩店铺收藏区
1．设计古玩店铺收藏区
（2）配色分析。
设计与制作古玩店铺收藏区
2．制作古玩店铺收藏区
（1）新建一个名称为“古玩店铺收藏区”，宽度为 190 像素，高度为 190 像素，分辨率为 72 像素 / 英寸，颜色模式为 RGB 颜色的文档。
（2）打开素材文件夹中的“荷花 .jpg”文件并将其复制到“古玩店铺收藏区”文档中。
设计与制作古玩店铺收藏区
（4）保持“水墨圈”图层处于选中状态，设置其图层混合模式为“叠加”。
（3）打开素材文件夹中的“水墨圈 .jpg”文件并将其复制到“古玩店铺收藏区”文档中，然后将其等比例放大以铺满图像编辑区。
设置图层混合模式
添加文本并设置文本属性
（5）在图像编辑区右下方输入“收藏店铺”文本，并设置其字体为微软简隶书，字体大小为 40 点，字体颜色为黑色。
设计与制作古玩店铺收藏区
添加图层样式
（6）为“收藏店铺”文本添加“投影”图层样式。至此，本实训制作完成。
设计与制作古玩店铺收藏区
作业布置
（1）利用PS，制作如下效果优惠券。
作业布置
（2）请用下面这张图制作合适的收藏区模块。
谢谢观看

展开更多......

收起↑