淘宝美工培训教程案例

1.制作跨境端游泳镜Banner本练习将制作跨境端游泳镜Banner,在制作时先绘制Banner背景，再添加游泳镜图像效果，并在左侧输入文本内容，效果如图所示。

2.制作移动端篮球Banner本练习将制作移动端篮球Banner,在制作时先绘制Barmer背景，再输入文本内容，并对文本进行编辑，完成后在右侧添加篮球素材，效果如图所示。

举一反三3.制作PC端瑜伽垫主图本练习将制作PC端瑜伽垫主图，先制作主图背景，再输入文本内容，并对文本进行编辑, 完成后的效果如图所示。

4.制作跨境端摇摆驼鹿Banner本练习将制作跨境端摇摆驼鹿Banner,在制作时先绘制Banner背景，再添加摇摆驼鹿图像效果，并在左侧输入文本内容，效果如图所示，5.制作移动端毛绒玩具Banner本练习将制作移动端毛绒玩具Banner,在制作时先绘制Banner背景，再输入文本内容, 并对文本进行编辑，完成后在右侧添加毛绒玩具素材，效果如图所示。

葫鼠当造鼠6.制作PC端魔方主图本练习将制作PC端魔方主图，先制作主图背景，再输入文本内容，并对文本进行编辑, 完成后的部分主图效果如图所示。

滑灵活旋转第4章3.制作PC 端笔记本主图本练习将制作PC 端笔记本主图，先制作主图背景，再输入文本内容，并对文本进行编辑, 完成后的部分主图效果如图所示。

小结 4.3.2 设计店标4.3.3 设计店招 4.3.4 设计Banner 4.3.5 设计主图 4.3.6 设计详情页43.7 举一反三1、掌握办公用品类网店设计的方法。

2、掌握数码配件类网店设计的方法。

3、掌握手机配件类网店设计的方法。

1.制作跨境端LED 日历Banner本练习将制作跨境端LED 日历Banner,在制作时先绘制Banner 背景，再添加LED 日历图 像效果，并在左侧输入文本内容，效果如图所示。

I1Alarm Clock Numeral WoodenLED Tim© TemperatureCalendarBU Y$25.992.制作移动端办公桌Banner本练习将制作移动端办公桌Banner,在制作时先绘制Banner 背景，再输入文本内容，并 对文本进行编辑，完成后在左侧添加办公桌素材，效果如图所示。

《网店美工设计(项目式全彩微课版)》
配套教学教案
第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项目演练-制作花艺活动宣传视频
本任务通过制作花艺活动宣传视频，明确当下花艺行业宣传视频的后期风格并掌握宣传视频的后期处理要点与后期处理方法。

作业。

网店美工教案一、教学目标1、让学生了解网店美工的重要性和作用。

2、使学生掌握网店美工所需的基本软件操作技能，如 Photoshop、Illustrator 等。

3、培养学生的审美能力和创新思维，能够独立完成网店页面的设计与装修。

4、提高学生对色彩、构图、排版等设计元素的运用能力，制作出吸引人的网店页面。

二、教学重难点1、重点掌握网店页面设计的基本原则和流程。

熟练运用设计软件进行图片处理和页面排版。

学会运用色彩、字体、图形等元素提升页面的视觉效果。

2、难点培养创新思维，设计出独特且符合网店风格的页面。

能够根据不同商品的特点和目标受众，制定合适的设计方案。

三、教学方法1、讲授法通过讲解和演示，向学生传授网店美工的基本理论知识和软件操作技巧。

2、案例分析法展示优秀的网店页面案例，引导学生分析其设计思路和优点，从中汲取经验。

3、实践操作法让学生亲自动手进行设计实践，在实践中巩固所学知识和技能。

4、小组讨论法组织学生进行小组讨论，共同解决设计过程中遇到的问题，培养团队合作精神和沟通能力。

四、教学资源1、多媒体教室，配备电脑和设计软件。

2、相关教材和参考书籍。

3、网络资源，如设计网站、论坛等。

五、教学过程1、导入（约 10 分钟）展示一些精美的网店页面和普通的网店页面，让学生对比分析，引导学生思考网店美工对网店销售的影响。

提问学生对网店美工的初步认识和理解，激发学生的学习兴趣。

2、知识讲解（约 30 分钟）介绍网店美工的概念、职责和工作内容。

讲解网店页面设计的基本原则，如简洁性、一致性、突出重点、引导性等。

讲解色彩搭配的基本原理和常用方法，如对比色、互补色、邻近色的运用。

介绍字体的选择和排版技巧，包括字体的风格、大小、间距等。

3、软件操作演示（约 40 分钟）打开设计软件（如 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：点击图片空间-百宝箱-编辑工具-网店秀2、界面说明上部是功能按钮，功能按钮下面是图片列表下部左边是功能面版本区，右边是图片编辑区其中图片编辑区上部是快捷菜单，有一些常用功能。

3、如何进入编辑器可以从下面两个入口进入网店秀图片编辑器图片管理下面的编辑链接图片空间菜单中的百宝箱4、如何打开图片如果是从上面点图片编辑进来的会自动打开那张图片。

如果是从百宝箱进入的会弹出下面这个框如果想添加图片可以点图中的“打开”或“＋”号。

我们打开图片共有4种方式：图片空间，宝贝主图，本地上传和网络图片。

5、图片空间可以选择图片空间的图片，左边是分类右边是图片，点击选择中（图中已经标示）再次点击取消选择，如果分页很长可以点击下面的“??”和“??”按钮可以滑动分页条。

下面的批处理尺寸方便您提前处理图片大小。

选择好图片点击打开就可以了。

6、宝贝主图窗口和打开图片空间的图片类似，可以选择宝贝主图并且可以替换宝贝主图7、本地上传点击本地上传的时候会弹出一个本地系统对话框提示您选择图片，您选择好图片之后就会弹出上面这个窗口，里面有您已经选择好的图片，鼠标移入会出现图片标示的按钮，您可以左右旋转也可以删除。

8、网络图片您提供网络地址我们帮您下载图片。

注意网络地址必须以"http://"开头。

9、保存图片如果已经完成编辑可以点击界面右上方的保存按钮保存图片，保存窗口如下图所示：右边可以选择保存的空间分类和图片质量（仅对JPE有效果），如果您原图是PNG的则保存为PNG如果您原图是非PNG则统一保存为JPG格式。

左边的保存到本地按钮可以方便的把所有图片打包保存到本地（ZIP格式）。

10、替换和备份右边的要保存的图片列表，上方有个替换按钮，方便批量选择替换（只对可替换的图片有效）如果图片可以替换，会显示如图所示的替换按钮（主图显示“替换主图”其他图显示“替换原图”）和备份按钮，选择备份的话会把您的原图备份到您的图片空间（图片空间“图片编辑器备份”分类下面，如果您空间有限请按需使用）11、保存到本地每张图片都可以保存到本地，现在还可以批量保存到本地，点保存到本地的时候会有一个生成文件的对话框（如下图），等生成完成您点保存会打开一个系统文件夹选择的对话框，您保存就可以下载到本地了。

图1-36 “三只松鼠”首页和详情页的显示效果
针对页头、页中和页尾，可从以下两个方面对“三只松鼠”店铺页面进行鉴赏。

）查看首页中的页头、页中和页尾，包括查看其对应的店招、导航等内容，并对其中的文字字体进行分析，掌握不同的字体应用的范围；然后可以对图片中的促销术语进行了解，从术语中分析“三只松鼠”的卖点，并通过单个物体的摆放和处理效果，掌握美化图片的方法。

）通过详情页，查看详情页中留住买家的方法以及产品的卖点，该卖点可通过详情页中的描述区进行掌握，“三只松鼠”的描述区主要是通过可爱的松鼠，加上天然的产品和精良的制作工艺，体现产品的
搭配文字与色彩的方法，并从中得到启示，为后期的制作做好准备。

）掌握“三只松鼠”吸引买家购买产品的方法，从本质中找到卖点，从而促进销售。

打开“三只松鼠”网页，通过观察，该网页首页的整体色相采用深蓝色，该颜色属于较沉稳
进行对比则添加了一丝乐趣，体现出了可爱、活泼、精致和
图1-37 Logo欣赏
STEP 02 文字主要以黑体和宋体为主，简洁、大方，而且采用活泼而接地气的广告语，如本页中的。

教学课题任务6制作拓展版全屏背景课题类型理论+实操课时安排2上课时间教学目标掌握全屏背景，学会设计全屏背景图片宽度宽度，了解其尺寸与设计要求。

教学重点制作拓展版全屏背景制作教学难点根据店铺要求设计制作拓展版全屏背景辅助资源课件、多媒体、网络复习引入1、曾将看过哪些店铺的全屏吸引人的？2、怎么设计拓展版全屏背景？教学手段教学过程师生互动活动设计课件讨论实作课件举例一:了解全屏拓展背景设计的尺寸要求与注意事项。

二：具体解说及操作流程步骤1：执行“文件”→“新建”命令，宽度：1920像素，高度：800像素。

步骤2：新建图层1作为背景图层，执行“填充”命令，选择蓝色（#4960b4）进行填充。

了解全屏拓展背景海报尺寸提问或讨论：如何结合店铺特殊设计全屏背景讨论：怎么设计、怎么完成全屏背景讨论课件实作步骤3：选择自定义形状中的“圆角矩形工具”，调整为形状工具模式，填充为白色，描边半径为1像素，半径为200像素，如图3.6.2所示；制作圆角矩形，如图3.6.3所示。

步骤4：按快捷键“Ctrl+T”调整圆角矩形的形状、大小和位置，复制调整好的圆角矩形大小、方向，在北京图层中随机分布圆角矩形，如图3.6.4所示。

步骤5：选择圆角矩形图层调出“图层样式”，为圆角矩形增加“渐变叠加”的颜色效果，如图3.6.5所示；用同样的方式为其他圆角矩形添加不同的渐变颜色，如图3.6.6所小组合作实训活动：实践演示及点评示。

步骤6：对每一个圆角图层进行动感模糊。

执行“滤镜”“模糊”“动感模糊”，参数如图3.6.7所示，最终效果如图3.6.1所示。

最终效果如图3.6.1所示三：教学总结反思设计全屏拓展注意尺寸要求，并且结合店铺产品颜色与特殊设计。

作业布置填写提交实训任务预习作业：观看下一节微课内容。