05.轮播图设计

★任务导读：

轮播图是在首页上展示信息的一种方式。为了让用户不用滚动屏幕就能看到更多内容，设计师们利用轮播图来最大化信息密度，以便于在买家浏览店铺首页的时候增加店铺品牌、活动等信息。

本节课将从轮播图策划、设计与制作等步骤展开工作任务。通过对轮播图的设计要点、设计思路、设计方法的介绍，帮助学生掌握轮播图的设计方法和技巧，并引导学生进行轮播图设计实操。

★学习目标：

1.了解轮播图策划设计的要点；

2.熟知轮播图的构图要素；

3.熟知轮播图的设计规则；

4.掌握轮播图的制作方法和技巧。

★案例引入：

轮播图可以在店铺首页的第一屏展现更多的促销、活动、主推信息，方便引导买家进入相关商品或主题。近期某户外旅行店铺应季推出了儿童防晒服，并将这款商品作为近期的主推商品，店主准备制作一张轮播图来对这款商品进行推荐。怎样的商品轮播图对买家的吸引力更强？

★知识学习：

【以视频形式展现】

★课中练习：

运用上环节所学知识，进行店招设计。

设备要求：

（1）教学设备：安装有Photoshop，并且连接互联网的计算机；

（2）实训场地：美工实训室。

操作步骤:

本实训要求学生通过Photoshop软件完成对轮播图的设计。通过实训，要求学生熟练掌握Photoshop软件的使用方法和技巧，并掌握轮播图设计方法。

步骤1：任务布置

教师向学生介绍任务要求和内容，将班学生按每3-4人的标准划分成若干个任务小组，以小组为单位进行任务实训。学生领取任务。

轮播图设计要求：

1.轮播图尺寸为1920px高不限尺寸；

2.基于品牌自身定位的独立风格设计，简洁大方、整体统一。

步骤2：轮播图分析

1.要有一个明确的方向性，海报设计固然想象空间无限，但是纵然如此也不能天马行空，必须要有一个明确的方向性。海报设计就是为了传达目标信息，刺激受众。然而如果连目标群体都不是很明确的话，就很难设计出符合目标受众心理的海报。在开始准备海报之前，首先要确定是设计给谁看?明确好目标才可以。

2.明确主题，设计海报一定要捉住其中的精髓，即是最想表达的内容是什么。内容必须符合可靠的科学报告的形式：表达清晰准确，话语简洁，由于海报受固有空间的限制，所以后者对于制作海报尤其重要。

3.足够的创意，海报不能只是一味地描述内容，显得太过直白，而应该要有足够的创意。设计者应该把海报当成是自己个性魅力的延伸，通过它去吸引路人，使得他们想要深入阅读或是直接与你交谈。

4.淘宝店铺装修一般有三种尺寸可供选择，通常默认的一种是1920PX全屏，现在不管是天猫店或者C店基本都是1920PX的轮播图，因为它的视觉效果是最好的，相对于其他两种是意义比较大的，另外一种是950PX，这种一般适用于店铺首页展示，还有一种是750PX。 750PX宽度的海报，这种形式的海报主要放在于宝贝详情描述中，用于做主推宝贝的关联营销，高度一般保持在400—500PX而且对于小卖家来说还可以用于类目推荐等许多地方，是最实用的一种，所以宝贝描述中的海报就显得尤为重要了。

学生根据分配到的任务，首先分析轮播图如何设计，需要体现什么。

步骤3：轮播图设计

1.新建文件。打开Photoshop，使用快捷键【Ctrl+N】新建一个图像文件，在新建对话框中设置页面的宽度为1920px，高450px分辨率为72像素/英寸，如图5-1所示。

图5-1 新建文件

2.设置标尺显示单位。菜单栏点击【视图】-【标尺】调出标尺，选择工具箱中的【移动工具】，将标尺拖动到新建的文件中，在显示出的标尺区域右击，在打开的快捷菜单中选择“像素”选项，如图5-2所示。

图5-2 设置标尺显示单位

3.新建参考线。执行【视图】-【新建参考线】，在新建参考线对话框中取向为垂直位置为485像素，单击【确定】按钮添加参考线。再添加一条垂直参考线在1435像素处。此时窗口中显示两条蓝色的线条，即为刚刚创建的参考线，如图5-3所示。

图5-3 新建参考线

4.新建图层。执行菜单栏【新建】—【图层】，选择前景色为深蓝色，颜色参数如图5-4所示。

图5-4 设置前景色

5.导入素材。按快捷键【Ctrl+O】快捷键，打开“男童防晒衣”素材，选择工具箱的【移动工具】将素材拖到新建的文件夹中，对素材透明度的处理，如图5-5所示。

图5-5 设置不透明度

6.调整素材。点击素材“男童皮肤衣”图层，按快捷键【Ctrl+U】快捷键，对素材色相、饱和度、明度的处理，如图5-6所示。

图5-6 调整色相饱和度

7.是设置底部留白。背景设置好以后，选择工具箱中的【矩形选框工具】画一条合适大小的矩形框，单击“图层2”与“背景装饰1/2” 进行底部部分删除【Delete】留白，如图5-7所示。

图5-7 设置底部留白

8.导入素材。按【Ctrl+O】快捷键，打开“产品层女童防晒衣”文件。选择工具箱中的【移动工具】，将素材拖到画布中，选择工具箱中的【钢笔工具】进行画面斜切设计，如图5-8所示。

图5-8 的导入主素材

9.添加文案。选择工具箱中的【横排文字工具】，设置前景色为蓝色，在图像上输入文案，选择菜单栏【窗口】—【字符】对文字进行设置，如图5-9所示。设置完成后复制一层，稍微移动位置，将下层文案层字体色颜色调整为白色，降低透明度为69%，如图5-10所示。

图5-9 设置文字

图5-10 调整文字

选择工具箱中的【矩形工具】画出长方形，设置前景色为橙红，然后在选中工具箱中的【文字工具】输入活动信息，以此方法完成所有文案与文案背景，如图5-11所示。

图5-11 最终效果

步骤4：总结评价

学生总结轮播图的基本设计思路及注意思想。老师针对学生的设计作品进行点评，奖励优秀小组。

★美工小经验：

【以word形式展现】

★课后练习：

1.请根据素材包中提供的“饼干”素材图制作一张饼干的banner图，文案内容为“部分商品五折，山水系休闲美食”。

2.请根据素材包中提供的“赣南脐橙”素材图制作一张赣南脐橙的banner图，文案内容为“赣南脐橙，产地直供，新鲜采摘，新鲜上市，全场五折”。

3.请根据素材包中提供的芳外女装素材图，设计一张时尚简约轮播图，尺寸为980*450px，效果如下图所示。

图1 轮播图效果图

★回顾总结

轮播在店铺中是最显眼最重要的位置，不管是新品上架宣传还是节日活动宣传都会用到，其重要作用不言而喻。

通过本节课的学习，让学生对轮播图有完整的认知，并了解轮播图的设计要点；同时，能够根据具体需求设计出优秀的海报图片。