资源简介

(共28张PPT)
网店美工与店铺装修
WANGDIAN MEIGONG YU DIANPU ZHUANGXIU
实践篇
第 7 章
锦上添花——辅助模块
7.1　优惠券的设计与制作
7.3　分类导航的设计与制作
7.2　收藏区的设计与制作
章 | 前 | 导 | 读
店铺中的辅助模块主要包括优惠券、收藏区、分类导航、搜索条等，利用好它们可以使店铺更加人性化，从而更好地服务于消费者。本章将介绍辅助模块中优惠券、收藏区和分类导航的设计技巧与制作方法。
知 | 识 | 目 | 标
掌握优惠券、收藏区、分类导航的设计技巧与制作方法。
技 | 能 | 目 | 标
能够完成店铺辅助模块的设计与制作工作。
素 | 质 | 目 | 标
培养举一反三的能力。
增强探索意识，培养钻研精神。
7.1　优惠券的设计与制作
7.1.1　优惠券的内容安排
7.1.2　优惠券的设计要点
7.1.3　设计与制作美妆店铺优惠券
7.1　优惠券的设计与制作
优惠券一般放在店铺首页，是店铺常用的促销手段之一，可以为店铺带来可观的流量，还可以提高店铺的收益。
（1）优惠券的面额。
7.1.1　优惠券的内容安排
（2）优惠券的使用范围。
（3）优惠券的使用条件。
明确使用条件的优惠券
7.1.1　优惠券的内容安排
（4）优惠券的使用周期。
（5）优惠券的最终解释权。
明确使用周期的优惠券
提示
优惠券的内容主要涉及以上几点，但不代表以上内容都必须显示在优惠券中，具体内容安排应结合活动内容、优惠券模块展示区域而定。
（1）内容精简。
（3）风格统一。
7.1.2　优惠券的设计要点
使用统一模板的优惠券
（2）重点突出。
（4）顺序合理。
7.1.3　设计与制作美妆店铺优惠券
美妆店铺优惠券效果
本节以美妆店铺优惠券的设计与制作为例，学习优惠券的设计技巧与制作方法。案例最终效果可参考本书配套素材“素材与实例”→“Ch7”文件夹中的“优惠券 .psd”文件。
（1）内容安排。
7.1.3　设计与制作美妆店铺优惠券
（2）配色分析。
1．设计美妆店铺优惠券
步骤 1　新建一个名为“优惠券”，宽度为 950 像素，高度为 300 像素，分辨率为72 像素 / 英寸，颜色模式为 RGB 颜色的文档。
2．制作美妆店铺优惠券
步骤 2　在画面中下位置绘制一个宽度为 875 像素，高度为 145 像素，圆角半径为25 像素的圆角矩形，然后设置其填充色为紫色（#700ee3）。
7.1.3　设计与制作美妆店铺优惠券
置入并调整素材
步骤 3　置入素材文件夹中的“优惠券．png”文件，然后将其适当旋转后移至画面左侧，接着为其添加“投影”图层样式。
7.1.3　设计与制作美妆店铺优惠券
置入并调整素材
步骤 4　采用步骤 3 的方法置入“优惠券 .png”文件并调整。
7.1.3　设计与制作美妆店铺优惠券
绘制并编辑圆角矩形
步骤 5　在画面偏下位置绘制一个宽度为 918 像素，高度为 150 像素，圆角半径为25 像素的圆角矩形，然后设置其填充色为淡紫色（#a345 ）。
7.1.3　设计与制作美妆店铺优惠券
7.1.3　设计与制作美妆店铺优惠券
步骤 6　在画面左侧绘制一个宽度为 220 像素，高度为 114 像素的淡粉色（#eedafe）矩形。保持矩形处于选中状态，选择“椭圆工具”
，将光标移至矩形左侧边线处，然后按住“Shift+Alt”组合键的同时绘制直径约 6 像素的正圆，接着单击工具属性栏中的“路径操作”按钮 ，并从打开的下拉列表中选择“减去顶层形状”项，修剪矩形。
步骤 7　采用步骤 6 的方法在淡粉色矩形两侧边线上绘制多个正圆以修剪矩形。
7.1.3　设计与制作美妆店铺优惠券
添加文本并设置文本属性
步骤 8　在淡粉色矩形上添加文本并设置文本属性，然后新建一个图层并绘制一个淡粉色三角形遮盖文本的右下角。
7.1.3　设计与制作美妆店铺优惠券
遮盖文本
步骤 9　绘制一条紫色斜线装饰文本，然后添加其他文本并设置文本属性，最后为“点击领取”文本添加“内阴影”图层样式。
添加装饰线与文本
7.1.3　设计与制作美妆店铺优惠券
纯度
步骤 10　绘制一个宽度为 94 像素，高度为 28 像素，圆角半径为 14 像素的圆角矩形，然后为其添加“渐变叠加”图层样式，接着将其置于“点击领取”图层下方。至此，10 元优惠券制作完成，将 10 元优惠券相关图层编组，并将组名改为“10 元优惠券”
7.1.3　设计与制作美妆店铺优惠券
步骤 11　复制两份“10 元优惠券”图层组并移至合适位置，然后修改文本内容，以制作 20 元和 30 元优惠券。
制作 20 元与 30 元优惠券
7.1.3　设计与制作美妆店铺优惠券
步骤 12　采用上述方法，在 30 元优惠券右侧制作 50 元优惠券。
制作 50 元优惠券
7.1.3　设计与制作美妆店铺优惠券
步骤 13　在优惠券合适位置添加文本并设置文本属性。至此，美妆店铺优惠券制作完成。
添加文本并设置文本属性
7.1.3　设计与制作美妆店铺优惠券
课堂小结
谢谢观看

展开更多......

收起↑