淘宝美工教程22集第17集：首页制作陈列区设计

淘宝美工实战作业指导书第1章美工基础知识 (4)1.1 设计原则与理念 (4)1.1.1 设计原则 (4)1.1.2 设计理念 (4)1.2 色彩、字体与排版 (4)1.2.1 色彩 (5)1.2.2 字体 (5)1.2.3 排版 (5)1.3 美工软件应用入门 (5)1.3.1 Photoshop (5)1.3.2 Illustrator (6)1.3.3 CorelDRAW (6)第2章淘宝店铺页面布局 (6)2.1 店铺首页布局设计 (6)2.1.1 页面结构 (6)2.1.2 设计原则 (7)2.2 商品详情页布局设计 (7)2.2.1 页面结构 (7)2.2.2 设计原则 (7)2.3 专题活动页布局设计 (7)2.3.1 页面结构 (7)2.3.2 设计原则 (7)第3章图片处理与优化 (8)3.1 图片拍摄与后期处理 (8)3.1.1 拍摄技巧 (8)3.1.2 后期处理 (8)3.2 图片大小、格式与压缩 (8)3.2.1 图片大小 (8)3.2.2 图片格式 (9)3.2.3 图片压缩 (9)3.3 图片批量处理与存储 (9)3.3.1 批量处理 (9)3.3.2 图片存储 (9)第4章矢量图形设计 (9)4.1 基本图形绘制与编辑 (9)4.1.1 绘制基本图形 (9)4.1.2 编辑图形 (10)4.2 矢量插画设计 (10)4.2.1 设计风格与主题 (10)4.2.2 创作过程 (10)4.2.3 矢量插画的应用 (10)4.3.1 图标风格与类型 (10)4.3.2 设计原则与技巧 (10)4.3.3 制作过程 (11)第5章文字与排版设计 (11)5.1 文字设计原则与技巧 (11)5.1.1 易读性：保证文字清晰、简洁，易于识别。

(11)5.1.2 统一性：保持字体、字号、颜色的一致性，以增强整体视觉效果。

(11)5.1.3 对比性：通过调整字体、字号、颜色等，突出重点内容。

《网店美工设计(项目式全彩微课版)》
配套教学教案
第1讲
第2讲
第3讲
3.4.2设计理念
小结1、掌握主图的设计基础。

2、掌握直通车图的设计基础。

3、掌握钻展图的设计基础。

作业
3.4项目演练-设计居家大衣橱直通车图
本任务通过设计居家大衣橱直通车图，明确当下家居产品行业直通车图的设计风格并掌握直通车图的设计要点与制作方法。

第4讲
4.3项目演练-设计果汁饮品海报
本任务通过设计果汁饮品海报，明确当下饮品行业海报的设计风格并掌握海报的设计
要点与制作方法。

作业
第5讲
5.3项目演练-设计PC端数码产品首页
本任务通过设计PC端数码产品首页，明确当下数码产品行业PC端首页的设计风格并掌握PC端首页的设计要点与制作方法。

作业
第6讲
6.3项目演练-设计PC端运动鞋品详情页设计
本任务通过设计PC端运动鞋品详情页，明确当下鞋品行业PC端详情页的设计风格并掌握PC端详情页的设计要点与制作方法。

作业
第7讲
7.3项目演练-设计无线端数码产品首页
本任务通过设计无线端数码产品首页，明确当下数码产品行业无线端首页的设计风格并掌握无线端首页的设计要点与制作方法。

作业
第8讲
8.3项目演练-制作花艺活动宣传视频
本任务通过制作花艺活动宣传视频，明确当下花艺行业宣传视频的后期风格并掌握宣传视频的后期处理要点与后期处理方法。

作业。

《淘宝天猫网店美工实战教程》模拟测试题一姓名班级学号得分一、填空题（25分，每空1分）1.位图又称像素图或点阵图像，由若干组成。

2.分辨率是指，单位长度上像素越多，图像就越清晰。

3.在“新建”对话框中的“背景内容”下拉列表框中提供了、和透明3种方式。

4.设置绘图颜色可以通过拾色器、、和吸管工具等4种方法进行设置。

5.选择“图像”菜单下的菜单命令，可以设置图像的画布大小。

6.创建不规则选区可使用的工具包括套索工具、多边形套索工具、和魔棒工具。

7.使用工具可以移动图像；使用可以将图像中的某部分图像裁切成一个新的图像文件。

8.修复工具和都可以用于修复图像中的杂点、蒙尘、划痕及褶皱等。

9.渐变工具提供了线性渐变、、、对称渐变和菱形渐变5种渐变方式。

10.Photoshop中的路径操作工具大致可以分为3类，分别为、路径编辑工具路径选择工具。

11.Photoshop中常用的图层类型包括普通图层、、、调整图层和效果图层5种。

12.需要合并链接图层时，可以单击图层面板右上角的箭头按钮，在弹出菜单中选择命令。

13.使用可以蔽整个图层或图层组，或者只遮蔽其中的所选部分。

14.图层样式效果中的叠加效果包括颜色叠加、和图案叠加等3种。

15.图像模式的转换可以通过选择子菜单中相应的命令实现。

16.用鼠标把通道拖到通道面板底部的按钮上即可复制通道。

17.单击路径面板的按钮，可以使用前景色、背景色、图案等填充路径。

18.Photoshop中除了颜色信息通道外，还包括专色通道和。

19.滤镜可以在图像中产生不规则分离的彩色玻璃格子。

20.选择【图像】/【调整】子菜单下的菜单命令，可以自动调整图像的明暗度，去除图像中不正常的高亮区和黑暗区。

二、判断题（10分，每题1分）1.对位图图像，无论将其放大和缩小多少倍，图形都有同样平滑的边缘和清晰的视觉细节。

（）2.JPG图像文件格式是Photoshop软件自身生成的文件格式，是惟一能支持全部图像色彩模式的格式。

《淘宝天猫网店美工实战--视觉设计+店铺装修+移动端店铺》教学教案第1章小结1、掌握网店美工的工作范畴。

2、掌握网店美工需要遵循的设计原则。

3、掌握网店美工工作流程。

课后练习课后练习——赏析ESEDO网店首页的设计本练习要求以如图所示的网店首页为例，赏析其页面风格、色彩搭配、商品图片展现、设计手法等。

第2章2.4.1文案在网店美工中的重要性2.4.2文案的策划2.4.3文案的前期准备2.4.4文案的写作要点2.4.5主图文案的设计与编写2.4.6详情页文案的设计与编写2.4.7海报文案的设计与编写2.5课堂实训——鉴赏森林大叔旗舰店的首页2.6课后练习练习1：赏析戈美琪女鞋旗舰店色彩搭配和字体搭配练习2：赏析森马官方旗舰店首页的布局2.7拓展知识小结1、掌握色彩的搭配技巧。

2、掌握版式布局的知识。

3、掌握文字的运用原则。

4、掌握文案设计与编写。

课后练习练习1：赏析戈美琪女鞋旗舰店色彩搭配和字体搭配如图所示为戈美琪女鞋旗舰店首屏效果，要求对页面的设计元素、色彩搭配与字体搭配进行分析。

练习2：赏析森马官方旗舰店首页的布局如图所示为森马官方旗舰店首页，要求对首页的颜色、风格、搭配、构图方式、网页元素等进行分析。

第3章实训3：抠取耳机图片并合成3.5课后练习练习1：处理红毛丹污点练习2：抠取红酒商品图片并合成3.6拓展知识小结1、掌握修改商品图片尺寸及校正方法。

2、掌握优化图片的方法。

3、掌握抠取图片并合成的方法。

课后练习练习1：处理红毛丹污点本例将打开“红毛丹.jpg”素材文件，处理其中的污点并加深红毛丹的色泽。

处理前后的对比效果如图所示。

其具体要求如下。

熟练掌握商品图片的优化方法。

分别使用污点修复画笔工具、海绵工具、模糊工具对图片进行处理，使整个红毛丹更加美观。

练习2：抠取红酒商品图片并合成本例将对“红酒.jpg”素材文件进行抠图，将其抠取出来的红酒瓶应用到其他背景中，调整大小和位置后合成为更具有营销表现力的效果图片。

网店装修，淘宝店铺首页应如何布局？实体店铺给人的第一感觉往往是它店铺装修好坏，而淘宝店铺则是它的首页布局决定了它在顾客心里的第一印象，一个好的店面装修及布局不仅能让顾客拥有好感，还能让他们在购物过程中获得更好的购物体验。

想要了解淘宝首页布局的朋友可以参考下下面的关于布局的基础知识，希望能帮到你们。

把网店装修好不仅能够提高店铺的整体形象，还能够提高店铺的转化率，一个合理的装修风格和布局能够给买家很好的购物体验，在视觉和操作上都能够给买家留下良好的印象，下面就和大家说说店铺首页该如何去布局吧。

1、首页的第一屏淘宝店铺首页第一屏是点击率最高的一个区域，因为买家来到店铺第一眼看到的就是这个地方，如果这块地方设计得不够出色那么买家就会迅速的下拉页面。

现在很多店铺的首页都实现了在1024px下能完整的看到这个轮播图片。

在这个重要区域就要展现出店铺的重要信息，比如热销的宝贝、商品的分类、促销活动等等。

还有一点是要保证这个区域在不同的屏幕分辨率下都能够清晰的展现出来。

2、首页下半部分整洁统一，要有层次感（1）整洁统一。

每个楼层布局是一样的，你可以看看天猫首页，电器城，还有其他外站以及网店系统的精美模板，他们每个楼层布局都是一样的，为什么呢?考虑到客户浏览的时候总是很快的，这样他就知道他想要的在哪，不用花时间去找。

（2）每个楼层色调又是不一样的，这样能刺激浏览者的视觉，让他能够分开不同的楼层快速定位到他想要的哪一个楼层中。

3、要学会做活动页首页第一屏那么重要的区域，如果轮播图片只是链接到某一个宝贝是在太浪费了，如果客户不喜欢这个宝贝，跳出率就很高，你可以新建一个活动页，列出多个相关产品，让客户有的选择，成交率就会大大提高，建立活动页的好处：1.减少首页的高度，加快首页加载速度;2.给客户以选择，提高成交率。

店铺首页就好比一个人的外貌，你把首页做好了，别人才会有想再看一眼的欲望，所以在装修网店时，千万要做好首页的布局与装修，这样才能保证你比别家网店更胜一筹。