《网店视觉营销设计》 课件全套 李永明 模块1-7 认识网店视觉营销设计岗位 - 淘宝天猫网店视觉设计综合实训

新形态活页式教材和融媒体一体化教学《网店视觉营销设计》网店“视觉营销设计”岗位的主要工作内容就是从事视觉设计。本岗位紧跟产业发展趋势和电子商务行业人才需求，有效衔接“1+X

网店运营推广”职业技能等级证书（初级）

中网店装修工作领域的技能要求；并立足课堂教学，通过将“电子商务技能”大赛“视觉营销”模块的资源转化课堂教学内容的有益补充，将课程教学和职业技能竞赛、“1+X”证书考试等进行有机融合，实现“岗课赛证”的融合统一。“视觉营销设计”岗位注重知识、

技能、

素养相互衔接，培养从员者的视觉营销能力，突出电子商务专业特色，服务企业人才需求，能助力经济社会高质量发展。“电子商务技能”技能大赛知识点要求：视觉营销模块（文案策划、视觉识别（VI）、商品图片等）。“网店运营推广”1+X证书知识点要求：网店装修模块（店铺专属

VI

的概念、

色彩的搭配原则、

字体的选择原则等）THANK

YOU（一）任务工单任务目的：了解视觉营销设计的定义，认识视觉营销设计的工作范畴，明确网站美工人员应具备的素养。任务描述：利用京东、天猫等行业类主要网络购物平台网店素材，了解网站美工岗位主要完成的工作内容，培养美工能力。知识目标：了解视觉营销设计的定义、工作范畴，学习如何做一名合格的视觉营销设计师。能力目标：能根据视觉营销设计岗位工作内容，培养视觉营销设计人员设计理念和美工素养。思政元素：在培养和树立美工设计理念时，树立正确的美工岗位职业观，培养团队合作意识，感受中华民族五千年历史文化在视觉营销设计设计中的优美体现。（二）任务情境菲菲准备去应聘一家知名网店的视觉营销设计岗位，为了增加应聘成功的概率，参加了一场入职培训。培训第一天，菲菲就直接提问培训师：“老师，我已经学过Photoshop图像处理软件了，可以直接做网店视觉设计师岗位的相关工作吧？我的月薪能拿到多少？”（三）任务解析在培训师带领下，一起梳理“网络购物”的优势和劣势，弄清楚网店视觉营销设计岗位是干什么的，在网店经营中起什么作用，进而形成正确的职业观。调查网店视觉营销设计师的薪酬，起薪和两三年后月薪层级的薪资差异。（四）知识准备知识准备一 什么是视觉营销设计网店视觉营销设计师是网店页面编辑美化工作者的统称，主要负责网店店铺的装修设计工作。属于IT行业的一种职业岗位。随着网络视觉营销的发展壮大，网店视觉设计师的市场需求会日益增多，这是一项很稳定有前途的职业。视觉营销设计的工作离不开软件工具，一般会用到Photoshop（简称PS）、Dreamweaver（简称DW）、illustrator（简称AI）、CINEMA

4D（简称C4D）等软件。其中，PS通常被用来处理产品图片和素材，DW常被用于编写网页代码、添加图片链接，AI用于矢量图绘制，C4D常被用来制作一些三维效果。（四）知识准备知识准备二 视觉营销设计主要工作内容本岗位工作主要包括：负责店铺的整体形象设计，包括风格设计、店铺展示、底部栏设计、主页设计等；负责店内产品装饰设计，包括产品摆放、产品图片处理、主图/首图设计、详情页设计等；负责活动和宣传所需的页面设计工作，包括海报设计、直通车/钻展图设计、活动时的店铺装修等；此外，有些店铺网店视觉设计师还需要负责文案编撰、产品拍摄甚至是产品上架等工作。（五）任务实施菲菲和团队伙伴，在培训师的指导下，一起分工合作，在互联网上检索和整理中国网络购物市场的相关数据资料，并进行汇总和分析。根据国家统计局发布的统计数据，2022年我国网上零售额达13.79

万亿元，同比增长4%。跨境电商进出口额2.11

万亿元，同比增长9.8%。重点监测电商平台累计直播场次超过

1.2

亿场，直播商品超过9500

万个，累计观看超过

1.1亿人次。这些数据显示网络购物成为日常生活购物的重要场景。（五）任务实施步骤一 整理中国网络购物市场的发展数据通过网络搜索，完成以下2022年度数据分析：1.网络零售品类TOP3和销售额占比；2.网络零售增速TOP3和上一年度对比增速数据；3.网络零售主要平台（至少5个）；根据整理的数据，填写表相应单元格：（五）任务实施步骤二 调研视觉营销设计主要工作内容菲菲和团队伙伴，在培训师的带领下，认真地学习美工的相关知识，上网搜索什么是视觉营销设计，讨论用户在网购和实体店中购物体验的差异。在学习的过程中，菲菲深深地体会到网店视觉设计岗位的重要性。视觉营销设计的主要任务，就是让店铺更美观，更容易被顾客所关注到。视觉设计是网店运营的左手（转化率），网店推广是网店运营的右手（流量），视觉设计和推广对网店运营都非常重要。通常情况下，对提高全店成交转化率的主要因素有：宝贝图文细节有吸引力；相比同类宝贝，价格、运费便宜；相比同类宝贝，店铺信用等级较高、客服服务到位、买家评价较好：店铺装修、页面布局美观易用。这也说明，网店视觉设计对提高成交转化率有非常重要的作用，是网店视觉营销的关键。（五）任务实施步骤二 调研视觉营销设计主要工作内容菲菲对网店运营的主要岗位进行了检索和整理，并填写表（五）任务实施步骤二 调研视觉营销设计主要工作内容整理美工专员的日常工作内容：①

规划店铺及素材：要对整个店铺页面、麦材及架构进行规划；②

商品宝贝拍摄（或配合专业摄影师完成拍摄）：对新上架商品拍摄，拍摄好每个产品的主图以及详情页细节等图片；③ 图片美化工作：使用Photoshop

等平面设计软件对图片进行美化；④

主图、详情页设计：制作出主图、详情页图文，按照消费者购买心理合理排版详情页图文；⑤

店铺整体形象设计和更新。（五）任务实施步骤二 调研视觉营销设计主要工作内容根据互联网上发布的视觉营销设计招聘要求，分别将自己认为有价值的20条招聘信息（需要有详细的任职条件、如：学历、工作经验、需具备的知识及操作技能）整理到文档中，然后一起讨论甄别，留下符合需求的招聘信息，整理出视觉营销设计岗位最重要的10条要求。，、（五）任务实施步骤三 整理视觉营销设计岗位分级和薪酬根据步骤二对视觉营销设计人员招聘信息的梳理，培训师要求菲菲，根据招聘岗位的要求不同，将视觉营销设计岗位分成三个层次并梳理每个层次的岗位要求和薪资待遇。通过大型招聘类网站如58同城、BOSS直聘前程无忧、猎聘网、智联招聘等，了解视觉营销设计职位需求信息，岗位要求，薪酬待遇等相关内容。（五）任务拓展2020年以来，习近平总书记在不同场合多次就发展电子商务作出重要指示，对发展农村电商、跨境电商、丝路电商等提出要求，明确指出电子商务是大有可为的。党的十九届五中全会指出，要发展数字经济，坚定不移建设数字中国。电子商务作为数字经济中规模最大、

表现最活跃、发展势头最好的新业态新动能，网店运营推广是电子商务新发展格局蓝图中非常重要的一环，必将在畅通国内大循环，促进国内国际双循环中发挥重要作用。请根据各主要招聘网站的“网店运营推广”职位招聘信息，整理运营推广专员的主要岗位职责。THANK

YOU（一）任务工单任务目的：了解视觉营销设计的技能要求，认识视觉营销设计常用的工具软件有哪些，明确网站美工人员应具备的技能素质。任务描述：观察和分析京东、天猫等行业内主要网络购物平台网店，了解视觉营销设计岗位需要的专业技能，完成日常工作需要使用的工具软件主要特点。知识目标：视觉营销设计常用工具软件的基本操作和适用场景。能力目标：能根据视觉营销设计岗位技能需要，培养视觉营销设计人员工具软件应用能力和综合设计能力。思政元素：树立正确的视觉设计岗位职业技能价值观，正确认识视觉设计岗位常用工具软件国产替代的重要性，培养国产软件的正版化应用意识。（二）任务情境菲菲和团队伙伴，在培训师的带领下，已经了解视觉营销设计的岗位要求和职业上升路径。菲菲向培训师提问，要成为一名成功的视觉营销设计师，我需要学习哪些知识，会哪些技能？我现在对Photoshop比较熟悉，还需要精通哪些工具软件？培训师说：“每家企业对视觉营销设计师的招聘条件不尽相同，我们可以做个统计，从企业的岗位需求中提炼视觉设计的知识清单。”菲菲和团队成员通过对招聘信息进行分析和梳理，整理出视觉设计知识清单，确定熟练的视觉营销设计师需要具备哪些知识和技能。（三）任务解析漂亮恰当的视觉设计可以延长买家在网店的停留时间，买家浏览网页时不易疲劳，自然就会细心浏览店铺。合理的规划和精心的设计可以有效地吸引和留住买家，从而实现提高销量的目的。视觉设计师要学会用Photoshop这个软件进行网店及网店元素的设计和相关图片的处理，一切设计的目标都是为了销售！以下两个店铺的首页，清晰地展示了精心设计的店铺首页和简单制作的店铺首页的区别，也提示我们合适的设计工具对展现效果的重要影响。两个店铺制作效果如图：（四）知识准备知识准备一

视觉营销设计的技能要求优秀的视觉营销设计从业者，一般来说，应具备以下基本的技能要求。①

图片处理技能。电商平台上的商品图片是吸引消费者的重要因素之一，因此网店视觉设计师需要掌握图片处理技能，包括剪裁、调整大小、调整颜色、去除背景等。同时，还需要了解各种不同图片格式的特点和应用场景，如

JPG、PNG、GIF

等。②

平面设计技能。视觉营销设计师需要具备一定的平面设计技能，包括色彩搭配、排

版、字体选择等。这些技能可以帮助电商美工设计出美观、易读、易懂的页面布局和推广图。③

熟

练

使

用

设

计

软

件

。

视觉设计师需要熟练掌握设计软件，如 Photoshop、Illustrator、InDesign

等。这些软件可以帮助视觉设计师更好地处理图片、设计页面和推广图。（四）知识准备知识准备一

视觉营销设计的技能要求④

熟悉各电商平台。视觉设计师需要熟悉不同电子商务平台的特点和规则，如淘宝、天猫、京东、拼多多等。这些平台有不同的图片尺寸、广告位规格等，以及各平台的移动APP

的规格要求，设计师需要根据平台要求进行设计。⑤

沟通能力。视觉营销设计师需要与团队其他成员进行良好地沟通，如和运营人员、客服人员、产品经理等。沟通能力可以帮助设计师更好地理解需求，设计出符合要求的作品。⑥

数据分析能力。商品主图的点击率和页面的停留时间，是视觉营销设计师的主要考核指标。所以美工人员应有一定的数据分析，来获得什么样的图更有效，可以提高工作能力。（四）知识准备知识准备二

视觉营销设计常用的工具软件视觉营销设计岗位，在完成如店标、店招、网店首页、商品主图等设计与制作时，一般常用的工具软件有以下这些，熟练掌握这些软件的使用，对提高设计水平和工作效率，有非常重要的帮助。Photoshop。简称PS，目前常用的版本有Photoshop

CS6、Photoshop

CC2015、Photoshop

2020

等，本书的美工设计与制作以

2020

版为基础，所有作品案例的设计和制作，主要使用本软件实现。它是由美国Adobe公司开发和发行的图像处理软件，主要应用在处理像素构成的数字图像，是网店视觉设计主要使用的工具软件，如图：（四）知识准备知识准备二

视觉营销设计常用的工具软件2. Dreamweaver。简称

DW，Dreamweaver

是

Adobe

公司推出的一款网页设计软件，它提供了一个可视化的页面编辑器，同时也支持手动编辑

HTML、CSS

和JavaScript代码。Dreamweaver

拥有许多功能和工具，可以帮助用户轻松创建响应式网页、应用程序和移动应用程序。店铺装修时，想要页面呈现更多个性化内容，动图效果以及交互内容，那么就要通过代码来实现，而代码的编辑就要在Dreamweaver

软件来完成，如图：（四）知识准备知识准备二

视觉营销设计常用的工具软件3. Illustrator。简称

AI，是Adobe公司推出的一款矢量图形制作软件，广泛应用在印刷出版、海报书籍排版、插画、多媒体图像处理和互联网页面的制作等。网店视觉设计使用AI 软件时，主要用于一些图标的制作，海报艺术文字的创意制作等。AI软件储存的图片是矢量格式，不存在失真的问题，店铺装修通常也会涉及到很多AI格式的素材需要编辑，然后输出其他相应文件格式进行应用，如图：（四）知识准备知识准备二

视觉营销设计常用的工具软件4. CINEMA

4D。简称C4D，是德国Maxon Computer推出的一款3D动画软件，它可以实现工业设计、平面创意海报设计、电子产品海报设计、栏目包装动画等。网店产品三维展示是未来的趋势，类似C4D此类软件在网站美化中的应用会越来越广泛，如图：（五）任务实施步骤一

认识Photoshop2020版工作界面打开Windows10“开始”菜单，找到“Adobe

Photoshop

2020”菜单项，单击启动程序。仔细观察并记录2020版工作界面的构成。（五）任务实施步骤一

认识Photoshop2020版工作界面①

标题栏。打开一个文件以后，系统会自动创建一个标题栏。在标题栏中会显示该文件的名称、格式、窗口缩放比例及颜色模式等信息。② 菜单栏。菜单栏位于软件界面的最上方，包含了

Photoshop

所有的功能。用户可选择各菜单项下的命令来完成各种操作和设置。③

工具箱。工具箱默认位于工作界面的左侧，包含了

Photoshop

的常用工具。部分工具按钮的右下角带有一个黑色小三角形标记，表示这是一个工具组，将鼠标指针移到工具图标上，单击鼠标右键可展开隐藏的工具。选择工具箱中的工具后，一般需要在工作区中进行操作。（五）任务实施步骤一

认识Photoshop2020版工作界面④

属性栏。在工具箱中选择任意工具后，位于菜单栏下方的属性栏中将显示当前工具的相应属性和参数，用户可对其进行更改和设置。⑤

面板区。面板区位于软件界面的右侧，在初始状态下，面板区中一般会显示颜色、属性、图层等多个常用面板。这些面板主要用于配合图像的编辑、控制及参数设置等操作。面板区中的面板可执行“窗口”菜单下的命令来进行有针对性的选择显示。⑥

状态栏。状态栏位于工作界面的最底部，可以显示当前文档的大小、尺寸、当前工具和窗口缩放比例等信息。单击状态栏中的三角图标可设置状态栏所显示内容。⑦

编辑区。工具箱右侧中部最大的区域是编辑区，打开或创建的文档都在此区域显示。（五）任务实施步骤一

认识Photoshop2020版工作界面认识

Photoshop

2020

版工具箱上各工具的作用，并和旧版进行对比。根据已学习过的知识，填写表（五）任务实施步骤二

使用Photoshop2020版制作网店促销标签新建文档，输入标题：促销标签，设置宽度：230像素，高度：230像素，分辫率：72像素/英寸，颜色模式：RGB颜色，背景内容：透明。（五）任务实施步骤二

使用Photoshop2020版制作网店促销标签2.

新建图层，命名为“撕边正圆”。设置前景色“#aa313f”，使用“圆形工具”，在属性栏，选择“路径”，在画布上绘制宽

200

像素，高

200

像素的正圆形路径，并使用“路径选择工具”，将路径移动到图布居中位置，如图。（五）任务实施步骤二

使用Photoshop2020版制作网店促销标签打开“窗口”菜单，选择“画笔”，在“画笔”列表中，选择常规画笔中“硬边圆”。在“窗口”菜单，选择“画笔设置”，大小：20像素，间距：100%，其它保持默认，在画笔示例区，曲线已变成紧密相连的一串正圆，如图在“图层”面板，“撕边矩形”图层，切换到“路径”，指向工作路径，右单击，在弹出菜单中选择“描边路径”，在弹出对话框中，选择工具“画笔”，单击“确定”，如图

1.2.11所示。1.2.11（五）任务实施步骤二

使用Photoshop2020版制作网店促销标签指向工作路径，右单击，在弹出菜单中选择“填充路径”，在弹出对话框中，内容“前景色”，单击“确定”。在“路径”面板，删除工作路径。如图

1.2.12

所示。3. 选择“椭圆”工具，新建两个图层，在画布中间分别绘制高宽为

180

像素、170

像素的两个正圆，无填充，白色描边

1

个像素，实线。移动到合适位置，如图

1.2.12

所示效果。1.2.12（五）任务实施步骤二

使用Photoshop2020版制作网店促销标签4. 新建

3

个文字图层，依次是“8”、“折”、“正品包邮”，设置合适的字体、颜色、字号，并参考样例，摆放在“撕边正圆”的合适位置。如图所示。5.

打开“文件”菜单，选择存储为“促销标签.jpg”，在“JPEG

选项”中，品质设置为“8”，一般即可保证图片的品质，也能适当减小文件容量。也可以保存为

PNG格式，可以保留透明背景，后期叠加到有较复杂背景颜色的图片时有更好的效果。（五）任务实施步骤三

分析推广图设计优点和创新在网店推广中，商品及活动等信息，大多数都是通过营销推广图传递给买家，网店在投放广告前，就会制定明确的目标。为达到预期的推广效果，准确传达推广信息是推广图设计的首要任务。推广图一般会呈现商品相关的信息，包括：商品价格、折扣、活动信息、销量、商品图片等，合理的设计会极大提升潜在买家的信息认知度。下表提供了三张视觉营销设计效果图，请对这三张推广图进行分析并填写表。（六）任务拓展任选以下任一款风格促销标签，完成设计和制作。效果可以参考图。THANK

YOU新形态活页式教材和融媒体一体化教学《网店视觉营销设计》视觉设计师一般是指对平面、

色彩、

基调、

创意等进行处理的技术人才。网店视觉设计师特指对网店网店商品风格与色彩的搭配、

字体的正确选择进行处理的技术人才。

消费者可以通过精美的排版、

字体设计、

色彩搭配,

更直观方便地看到页面的重点,

延长在网店的停留时间,从而增加网店的流量和商品的销量。学生通过本模块的学习，可以了解并掌握商品调色、字体运用、视觉构图、商品构图及文案撰写等基本技能。“电子商务技能”技能大赛知识点要求：视觉营销模块（文案策划、

视觉识别（VI）、商品图片等）。“网店运营推广”1+X证书知识点要求：网店装修模块（店铺专属

VI

的概念、

色彩的搭配原则、

字体的选择原则等）THANK

YOU（一）任务工单任务目的：利用图形图像处理软件，了解色彩搭配和商品调色以独特的视觉冲击，让顾客留下深刻印象，提高推广转化率。任务描述：利用提供的奶茶饮品图片素材，通过对产品色彩进行分析构思，结合商品特点，运用Photoshop软件完成商品主图色彩选择及搭配。知识目标：了解色相、明度和纯度等相关概念，认识色彩平衡工具、自然饱和度工具。能力目标：能利用图形图像处理软件，综合各种视觉元素，进行色彩搭配与商品调色。思政元素：中国传统节日主要有春节、元宵节、清明节、端午节、中秋节、重阳节等，传承的是中华民族优秀历史文化，红色是中国人最喜欢在节日使用的色彩。（二）任务情境“爱尚乳饮”网店为了提高“双十一”销售额，决定优化店内主图的颜色搭配并优化商品颜色属性。通过这个重要的环节，获得巨大的流量，进而提高网店的销售额。（三）任务解析根据提供的店铺主图PSD文件，调整各个图层的颜色搭配，优化商品的颜色。如图2.1.1所示。通过卖点文案部分的色彩搭配，突出店铺本次活动的折扣优势和活动期限等信息，引流消费者。效果如图2.1.2所示。图2.1.1商品主图初始图2.1.2设置颜色后的商品主图（四）知识准备知识准备一

了解色相色相是色彩的相貌称谓，用以区别各种不同色彩的名称，如图2.1.3所示。1.基本色相：红、橙、黄、绿、青、蓝、紫。2.暖色、冷色与中性色：大部分的红、橙色相属于暖色，给人温暖、热情的感觉；红色是中华民族最喜爱的颜色，成为中国人的文化图腾和精神皈依,代表着喜庆、热闹与祥和。大部分的蓝色、青色等色相属于冷色，给人寒冷、安静的感觉。其他没有明显冷暖倾向的颜色属于中性色。图2.1.3

色相圆环图（四）知识准备知识准备二

了解明度色彩的明度是指色彩的深浅程度，如图2.1.4所示。不同色相的不同明度：不同的色彩具有不同的明度，任何色彩都存在明暗变化。在彩色中，明度最高的是黄色，明度最低的是紫色。红、橙、蓝、绿的明度相近，为中间明度；相同色相的不同明度：在同一色相的明度中存在深浅的变化，如蓝色中由浅到深有粉蓝、淡蓝、天蓝等明度变化。在一个画面中如何安排不同明度的色彩也可以帮助表达不同的感情。图2.1.4

明度展示图（四）知识准备知识准备三

了解纯度色彩的纯度是指色彩中所包含某色的饱和程度。如图2.1.5所示。它表示色彩中所含有色成分的比例，比例越大，含有色成分越多，纯度越高；比例越小，含有色成分越少，纯度越低。最为鲜艳、纯度最高的颜色称之为“纯色”；反之，纯度最低的颜色称为“无色”的灰色。图2.1.5

色彩纯度（五）任务实施步骤一

调整背景颜色①

分析图2.1.2所示商品色彩，进行色彩搭配构思。在PS2020中打开图2.1.1所示“商品主图上色.psd”(位置：教材资源/素材文件/模块2.1/)。②

点击背景图层，设置前景色为“#fcaa54”，填充前景色；选择图层1，填充前景色；③

选择圆角矩形3，双击图标输入“#fcaa54”；④

选择圆角矩形2，双击图标输入“#fcaa54”。完成后效果如图2.1.6所示。图2.1.6主图添加背景色（五）任务实施步骤二

调整其他颜色①选择形状1双击图标，填充“#f8c31b”；②选择矩形1副本2双击图标，填充“#f8c31b”；③选择矩形1副本8双击图标，填充“#c1564c”；④选择矩形1副本双击图标，填充“#ffc2b1”，最终效果如图2.1.7所示。图2.1.7主图色彩设置后效果（六）任务拓展“爱尚乳饮”网店为了提高春节期间销售额，决定优化店内主图的颜色搭配并优化商品颜色属性。打开“任务拓展-自由填色主图.psd”(位置：教材资源/素材文件/模块2.1/)，自由填色。通过丰富色彩，吸引流量，进而提高网店的销售额。图2.1.8自由填色主图THANK

YOU（一）任务工单任务目的：了解字体的运用和字体创意，根据商品属性特点，合理选择字体进行设计与运用。任务描述：根据网店活动与商品属性特点等市场信息，利用图形图像处理软件，选择适合的字体并进行设计与运用，增加设计感，提升店铺与商品的格调。知识目标：了解常用的字体类型，了解各类商品对应的字体选择，提升字体设计创意度。能力目标：熟练掌握各类字体，并灵活应用字体创意在各类商品用图和店铺活动主题设计中。思政元素：汉字是世界上最古老的文字之一，至少有六千多年的历史，中国汉字博大精深。（二）任务情境“爱尚乳饮”网店为了提高“双十一”销售额，决定优化店内商品促销图的字体。通过字体优化，让消费者对商品的品牌及属性等内涵产生共鸣。（三）任务解析根据提供的详情页PSD文件，调整各个图层的字体，优化商品的字体。优化前如图2.2.1所示。通过卖点文案字体优化，突出店铺活动的折扣优势和活动期限等信息引流消费者。优化后效果如图2.2.2所示。图2.2.1优化前商品图图2.2.2优化后的商品图（四）知识准备知识准备一 字体的特点字体，是指文字的外在形式特征；即文字的风格、文字的外衣。字体是文化的载体，是社会的缩影。中国汉字博大精深，经过六千多年的演变，目前公认字体有“甲骨文，金文，小篆，隶书，楷书，行书，和草书”，这七种字体被称为“汉字七体”，是中华文化的瑰宝。日常设计工作中，我们需要对常用风格的字体，其特点与适用情形进行区分与掌握，一般适用场景如表2.2.1所示。名称字体特点

适用场景

宋体

字形方正、结构严谨、大气通用

是印刷行业应用得最为广泛的一种字体。阅读时有一种舒适醒目的感觉。在现代印刷中主要用于书刊或报纸的正文部分，也适用于包括电视字幕在内的任何媒体。

黑体

稳重、抢眼

显示清晰

多用于标题制作，有强调的效果。另外，用清瘦型的黑体做电影、电视的字幕已被普遍接受。

楷体

清秀、柔美

带书卷味

是近、现代印刷品中追求书卷味的产物，多用于启蒙教材。在专业书籍中多用于主观文字当中，也可以用作字幕。仿宋

权威、古朴

是早期中文打字机的专用字体，至今仍是红头文件的专用字体。印刷品中使用仿宋体体现权威，也常用于观点提示性阐述。

圆体

活泼、有趣

商业常用

这类字体最初出现在海外商业场合，也称线性。国内汉字版本的圆体字比较僵硬，缺乏一定美感，不适用电视字幕。

综艺

艺术、专业

现代感强

一种设计味较浓的字体，部分使用可表现一种艺术的时尚，过多则显矫揉造作。

表

2.2.1

不同风格字体的适用场景（四）知识准备知识准备二

字体的创意1.笔画代替法：是一种常见的字体设计创意方法，它采用有象征性的视觉图形符号，让观众能够迅速理解设计理念。笔画代替法的具体操作步骤是在原有字体的基础上，设计师通过删除或增加字体的某一笔画，从而用其他形式代替或者做相应的衔接来完成字体的创意设计，通过强调的手法变现字体的内涵。如图（四）知识准备知识准备二

字体的创意2.细节添加法。是根据字体主题进行针对性的设计修饰，常常是在横竖撇捺的笔画端点处进行锚点添加或断点处理。当然每个字体的笔画有许多，不一样的细节添加方式得到的设计作品也是风格异迥的。另外，笔画根据不一样的写作主体也有一定的差别。例如，男性字字体的笔画相对较粗，而女性字体的笔画则比较纤细。如图（四）知识准备知识准备二

字体的创意3.笔画删减法。是设计师在保证字体识别度的前提下，对笔画进行减法留白处理，这种设计的前提就是确保读者能够识别字体。笔画删减法的优点是使设计字体的文艺气息浓厚，设计师通过留白的方式增加字体的设计性。如图（四）知识准备知识准备二

字体的创意4.效果添加法。这种方法适用于项目时间紧急的情况下，设计师可以在字体库里找到合适的字体，进行简单的加工，就能实现相当不错的效果。这种方法的具体步骤是通过运用圆角、描边等一系列工具对原字体笔画进行一些外形上的变化。例如，圆角工具把笔画转折处变直为曲，描边工具使字体加粗或减细，倾斜工具可以加强字体的力度与动感。如图（四）知识准备知识准备二

字体的创意5.符号拼接法。是通过拆解外文或标点符号独特的笔画装饰，再按照汉字的字形结构去组合。这种方法使用较多的字体是藏文、中世纪的手写卷花体等。设计师也可以尝试拆解其他字体的笔画结构，搭配几何图形进行新的字型重组，效果也不错。如图（四）知识准备知识准备二

字体的创意6.氛围装饰法。适用于各种节日，设计师在设计好的基础字型周围添加放射线、波点等几何形状，或花型，来烘托气氛，对字体含义的表达起到辅助作用。如图（五）任务实施步骤一

调整标题文字格式在PS中打开图2.2.1所示“苏打水推广.psd”。使用文字工具点击标题，设置图层样式，描边，3像素，颜色为“#fb6c83”，使用选择工具，点击小标题，将小标题适当往上移。如图2.2.9所示。图2.2.9调整标题文字格式（五）任务实施步骤二

调整价格活动栏文字格式选中满98元减15元，设置图层样式，描边，2像素，颜色为“#000000”，使用选择工具，点击价格，适当往下移动。最终效果如图2.2.10所示。图2.2.10调整价格活动栏文字格式（六）任务拓展“爱尚乳饮”网店为了提高“双十二”销售额，决定制作独有的“双十二”卡通字，以便应用到网店促销商品图中。参考图2.2.11所示制作风格独特的卡通字体。图2.2.11卡通字体设计THANK

YOU（一）任务工单任务目的：利用图形图像处理软件，了解视觉构图和页面布局；以独特的视觉冲击，让顾客留下深刻印象，提高推广转化率。任务描述：在杂乱的画面中，根据对画面和商品信息的分析，提炼出合理构图布局，利用Photoshop2020软件中移动、字体、选框等相关工具完成图片的构图及内容排版。知识目标：了解视觉构图和页面布局的种类、对商品特点和排版的关系有初步了解。能力目标：能使用图形图像处理软件；能综合各种视觉元素进行设计；能优化构图和排版。思政元素：店铺的“满减”活动，要符合社会主义核心价值观中“诚信”原则。（二）任务情境“

爱尚乳饮”网店为了提高“双十一”销售额，决定优化店内详情页图片的视觉构图和页面布局。通过重新构图，吸引流量，提高网店的销售额。图2.3.1详情页片段原图图2.3.2优化后的详情页片段（三）任务解析根据提供的商品详情页的片段PSD文件，调整各个图层的构图，优化商品的排版。如图2.3.1所示，通过卖点文案，突出店铺本次活动的优惠券和活动期限等信息。优化后的详情页如图2.3.2所示。店铺赠送优惠券，开展“满减”活动，主要目的是促销，吸引顾客下单。促销活动要符合社会主义核心价值观中“诚信”原则，不搞虚假宣传，促进社会文明、和谐发展。（四）知识准备知识准备一 视觉构图画面的构图是视觉艺术作品中最直接、最基本的表现形式之一。衡量画面中条线、形状的长度、宽度和角度，以及画面元素之间的比例、间隔与关系等，是构图的核心。构图的过程需要综合运用多种艺术技法：1. 中心构图法：是将主体放置在画面中心进行构图。这种构图方式的最大优点就在于主体突出、明确，而且画面容易取得左右平衡的效果。（四）知识准备知识准备一 视觉构图水平线构图法：是最基本的构图法，以水平线条为主。水平、舒展的线条能够表现出宽阔、稳定、和谐的感觉，通常运用在湖面、水面、草原等等。垂直线构图法：画面中以垂直线条为主。运用垂直线构图时，物品自身就符合垂直线特征，例如树木。垂直线在人们的心里是符号化象征，能充分展示景物的高大和深度。三分构图法：也称作井字构图法，在这种方法中，需要将场景用两条竖线和两条横线分割，这样可以得到

4

个交叉点，将画面重点放置在

4

个交叉点中的一个即可。（四）知识准备知识准备一 视觉构图对称构图法：按照一定的对称轴或对称中心，使画面中景物形成轴对称或者中心对称。引导线构图法：即利用线条引导观者的目光，使之汇聚到画面的焦点。引导线不一定是具体的线，凡有方向的、连续的物品，都可以作为引导线。框架构图法：将画面重点利用框架框起来的构图方法，会引导观者注意框内景象，产生跨过门框即进入画面的感受。重复构图法：当主体是同样的物品，将这一群主体同时重复呈现的构图方法。单调地重复同一物体，占据整个画面并且没有明显杂乱的其它物体出现，起到突出主体的效果。（四）知识准备知识准备二

页面布局1.卡片式2.分屏式3.大标题式4.个性化推荐5.网格式6.导航标签7.内容轮播（四）知识准备知识准备二

页面布局卡片式页面布局：卡片就是交互信息的承载体，通常以一个浓缩的形式提供相关页面内容。卡片式页面布局非常适合在页面上放置大量内容，同时又使每个内容保持鲜明。分屏式页面布局：这种布局既指垂直拆分屏幕，也指水平拆分屏幕。是将页面分割为均等或者不均等的两部分，这种方式的好处就是可以将文字信息和图像元素进行更有效的布局区分，让信息更有条理，人们更容易阅读。大标题式页面布局：随着移动端页面设计的兴起，大字体的排版设计得到了普及，大号字体在标题中特别受欢迎。较大的文本更具有易读性，并改善了用户体验。个性化推荐页面布局：通过用户的个性化需求给其推荐符合需求的内容。如京东、天猫等电商平台，首页商品流会根据购物行为数据推荐可能想买的物品。（四）知识准备知识准备二

页面布局网格式页面布局：信息被组织成网格，使其易于浏览。网格允许将文本、照片、视频平均分配到页面上，让用户决定每个单元的重要性。导航标签页面布局：导航标签是产品的主要框架，其架构分布基本都是由标签导航来组织，让用户了解这款产品的主要功能。内容轮播页面布局：通常在页面的顶部找到。一般包含与文本相结合的图像。当空间有限时，它们用于在页面的单个部分中显示多个内容。轮播允许在同一区域展示多个重要内容轮播，非常适合在电子商务网站上展示特色产品。（五）任务实施打开“详情页优化排版.psd，使用移动工具将图2.3.1页面布局，参考图2.3.2的布局样式，重新实施页面排版，使用重排后的页面布局合理，重点突出店铺本次活动的优惠券和活动期限等信息。图2.3.2（六）任务拓展根据提供的草本精华面膜素材，合理构图和布局，设计和制作一张商品的介绍横幅，要求版面设计合理，重点突出。最终制作效果如图2.3.18所示。图2.3.18

草本精华面膜横幅参考效果THANK

YOU（一）任务工单任务目的：利用图形图像处理软件，使用魔棒，快速选择工具，选框工具等功能抠出商品。任务描述：利用魔棒工具和快速选择选定商品轮廓，修改容差数据增加抠图后商品平滑度，获得自然无锯齿的商品抠图；利用钢笔工具，在商品轮廓添加多个锚点，手动修改锚点位置，形成封闭曲线路径，将路径变为选框，去除未选中部分，获得自然无锯齿的商品抠图。知识目标：了解魔棒，快速选择工具，选框工具等功能。能力目标：能利用图形图像处理软件，快速，准确，抠出商品。思政元素：背景复杂的商品抠图需要耐心和细心，需要精益求精的“工匠精神”。（二）任务情境“爱尚乳饮”网店为了提高“双十一”销售额，上架一款新商品，需要把拍摄的商品从白底图中抠出，便于店铺制作新品促销相关图片。（三）任务解析根据提供的商品白色背景图，如图2.4.1所示，从中抠出商品，放置到透明背景的图中，商品完整，无锯齿无毛边，效果如图2.4.2所示。图2.4.1

商品白底图图2.4.2抠出透明背景商品图（四）知识准备知识准备一

魔棒工具魔棒工具是Photoshop中提供的一种比较快捷的抠图工具，对于一些背景比较单一、分界线比较明显的图像，通过魔棒工具可以很快速的将图像抠出。魔棒的作用是可以知道点击区域的颜色，并自动获取附近区域相同的颜色，使它们处于选择状态。利用魔术棒工具抠图过程：①

按住Ctrl+O快捷键打开一张图片，并切换到魔棒工具（快捷键W）；②

在选项栏里调整合适的容差大小，再对图片进行点选，按住shift就是增加选区，按住alt是减去选区；③

右单击找到“选择反向”并选中（快捷键Ctrl+Shift+I），这样就可以反选选区；④

按住Ctrl+J

将图层复制出来，完成抠图。（四）知识准备知识准备二

磁性套索工具磁性套索工具不需要按鼠标左键直接移动鼠标，在工具头处会出现自动跟踪的线，这条线总是走向颜色与颜色边界处，边界越明显磁力越强，将首尾连接后可完成选择，一般用于颜色与颜色差别比较大的图像选择。利用磁性套索工具抠图过程：①

打开图片，并将工具栏切换到磁性工具（快捷键L）；②

利用磁性工具对想要抠出来的图片进行描线；③

首尾相接形成封闭区域，完成选区，完成抠图。（四）知识准备知识准备三

多边形套索工具多边形套索工具用于框选多边形或棱角分明图像。利用多边形套索工具抠图过程：①

在工具栏中切换到工具栏切换到多边形工具（快捷键L）,找到关键的点，用直线连接，首尾相接形成封闭区域，完成选区。②

按住Ctrl+J

将图层复制出来，完成抠图。（四）知识准备知识准备四

钢笔工具利用钢笔工具进行抠图是一种非常常见的抠图方式，它能做到高精度的描绘主体边缘。利用钢笔工具需要耐心和细心，要制作完善的店铺美工图，需要精益求精的“工匠精精神”，它也是我们职业能力、职业品质的体现。利用钢笔工具抠图过程：① 点击工具箱中的“钢笔工具”按钮，在选项栏中选择矢量绘图模式为“路径”；② 将光标移动到图像中图形的边缘，单击鼠标左键即可创建一个锚点，接着将鼠标移动到第二个位置单击，创建第二个锚点，此时两个锚点会链接成一条直线路径；③ 如果要用钢笔工具画曲线路径，需要在创建完第二个锚点后按住鼠标左键不放并进行拖拽，可以绘制曲线路径，曲线路径的方向、弧度及形状可以通过拖动方向线来进行控制；按住Shift键可以绘制水平、垂直或者以45°角为增量的直线；（四）知识准备知识准备四

钢笔工具利用钢笔工具进行抠图是一种非常常见的抠图方式，它能做到高精度的描绘主体边缘。利用钢笔工具需要耐心和细心，要制作完善的店铺美工图，需要精益求精的“工匠精精神”，它也是我们职业能力、职业品质的体现。利用钢笔工具抠图过程：④ 当绘制曲线转折向直线时，在转折锚点处可以先按住Alt键将钢笔工具切换到转换点工具，然后单击转折位置的锚点，再继续绘制直线路径；⑤ 如果要在绘制过程中调整锚点的位置，可以按住Ctrl键切换到直接选择工具，点击锚点并按住鼠标左键进行拖动即可改变锚点的位置。随着锚点位置的改变，路径形状等也发生改变；⑥ 当绘制到起始锚点位置时，光标变为了“钢笔图标带小圆圈”的形状后，单击即可闭合路径。可以按路径转换为选区的快捷键：Ctrl+Enter将该路径转换为选区，既可以在选区中进行抠图。（五）任务实施使用PS打开文件“奶茶商品白底图.jpg”

(位置：教材资源/素材文件/模块2.4/)，点击魔棒工具，容差设置为10，点击图片白色背景的部分，此时图片中白色部分被选中。如图2.4.3所示。打开“选择”菜单，选择“反选”（或快捷键Shift+Ctrl+I）。按住Ctrl+J

将图层复制出来，关闭背景图层，完成抠图，效果如图2.4.2所示。图2.4.3

商品白底补选中效果（六）任务拓展某箱包网店新到一款拉杆箱，准备作为新品重点推广，请将拉杆箱从实拍图中抠出，要求抠图完整，边无锯齿无毛边。可以综合运用各种抠图方法。文件“任务拓展-行礼箱.jpg。图2.4.4

拉杆箱抠图素材THANK

YOU（一）任务工单任务目的：了解活动文案、商品文案等不同类别文案；了解如何根据商品及活动特点提炼相关文案。任务描述：根据三种商品的属性特点及所在活动，通过横向对比市面竞品，提炼出区别于其他商品的卖点爆点，突出活动优惠、商品卖点，创作出精准、吸睛的商品文案。知识目标：了解商品文案的基本构成，对如何提炼关键词有深入的认识。能力目标：熟练掌握商品及活动关键词的提炼技能；熟练运用该技能对关键词进行创意整合，撰写出契合商品、突出卖点的优质文案。思政元素：文案撰写要符合中国特色社会主义的精神文明，彰显中国特色社会主义的显著特征和内在品质。（二）任务情境“爱尚乳饮”网店为了提高“双十一”销售额，决定重新设计三款新品主图文案。（三）任务解析根据提供的店铺商品主图PSD文件，优化主图文案。（四）知识准备商品文案优化的主要关注点：商品的重要属性。在商品详情页对商品进行描述时，一定要突出商品的重要属性，让顾客能清楚地了解商品的参数和适用范围。商品优势。商品是网店的核心，因此文案创作必须突出产品的优势。在进行商品介绍和描述的时候，要将商品最具特色的地方和优势展现出来，用合理简洁的文字做好介绍。为店铺创作核心品牌词。相信开设网店，一定有自己的想法和目标，可以方案创作的时候，多发挥自己的情感以及灵感，做到真诚动人。广告用语。广告语可以帮助店铺树立良好形象，但是需要注意不要过于夸张。如“小店刚刚开张，诚信经营，做让顾客满意和放心的店铺！”，通过平实的语句更能打动顾客。抓住用户心理。店铺的文案，都是为了能够让用户看到，并获得好的反馈，因此在文案创作的时候，也可以换位思考，写出用户喜欢和需要的内容，进而打动顾客。商品文案撰写量，必须体现中国特色社会主义的精神文明，彰显中国特色社会主义的显著特征和内在品质；努力发挥社会主义核心价值观对精神文化产品创作传播的引领作用。（五）任务实施“爱尚乳饮”网店即将要销售豆奶、奶茶、苏打水三款商品(素材位置：教材资源/素材文件/模块2.5/)，现在为这三款新品，设计商品简洁上口的卖点文案；并将文案用适合字体添加到商品主图。1.豆奶卖点文案参考：①每天一杯豆奶，美容养颜还不饿！②植物营养，好吸收！③浓郁豆奶,叫醒一天活力元气!2.奶茶卖点文案参考：①滴滴真滋味，浓浓奶茶香!②红茶配鲜奶,味你更精彩!③好喝的秘密全在鲜奶里面哦!3.苏打水卖点文案参考：①苏打水天生,养胃泉天成!②天然万年，润水又润心解酒养胃苏打水，提神养颜容貌美!③你是我的小苏打,甜蜜只为你绽放!（六）任务拓展某小家电店铺，“12.12”准备对某品牌的男式电动剃须刀进行推广，请在图2.5.1所示“任务拓展-新品上架文案设计.jpg中的虚线框处，设计合适的商品介绍文案，以便吸引顾客购买。文案设计完成后，请将文案以合适的方式，添加到图片的虚线框处。图2.5.1

剃须刀推广图THANK

YOU新形态活页式教材和融媒体一体化教学《网店视觉营销设计》网店首页作为网店的门面，其作用主要是通过页面的视觉，商品，促销，服务等综合氛围，让消费者对店铺和产品有初步的了解，从而产生兴趣和购买欲望，促进商品销售，首页效果是否出彩会直接影响网店的流量，一个完整的网店首页由各个模块组成，每个模块都具有其独特的功能，其中主要包括店标、店招、首页焦点轮播图、优惠券、商品分类和商品促销图等。本章节主要任务是完成店铺首页的视觉营销设计与制作。“电子商务技能”技能大赛要求：网店美工模块（店标店招设计、首页轮播图设计）。“网店运营推广”1+X

证书（初级）要求：PC端店铺首页设计与制作。THANK

YOU（一）任务工单任务目的：确定网店整体装修风格，把握网店的主题定位，根据网店首页内容确定网店首页设计方案。任务描述：重点突出春夏上新的营销氛围，为爱尚服饰网店进行网店首页设计分析知识目标：了解网店首页制作规范和网店首页类型。能力目标：能根据活动主题，产品定位等元素进行网店首页内容有序安排，设计具有营销氛围的网店首页。思政元素：培养学生诚信经营，杜绝虚假宣传行为

。（二）任务情境爱尚服饰是一家主营各类女装、男装、女鞋、男鞋等的综合性服饰网店，准备在淘宝网开设第一家线上网店，网店注册成功后，正好搭上了春夏新品上新的一波潮流，爱尚服饰准备以春夏新品上新为主题活动，进行网店装修。网店装修是一个持续性很强的工作，需要付出很多时间和精力去完成。优秀的网店装修不是一成不变的，它会根据商品的变化，季节的变化，促销活动的变化而进行相应的调整，其中，首页的装修又是网店的门面，一个设计感强的首页，不仅能提升网店的品质，也会让买家对网店产生初步信任，从而提高转化率。本次网店首页设计重点突出上新的营销氛围，使网店商品和网店活动整体风格相符。（三）任务解析爱尚服饰网店首页设计，第一步要跟网店营销人员充分沟通，根据网店产品，营销活动等确定网店的整体设计风格，把握网店主题定位，其次是确定网店首页的具体内容，最后根据网店内容来确定网店首页的最终设计方案，完成整体布局。（四）知识准备知识准备一

了解网店首页下图为天美意官方旗舰店首页，从图3.1.1中可以看出，店招位于整个页面顶端，下面紧接着是焦点图，让顾客首先了解网店最近的营销活动和上新。优惠活动区主要有网店满减优惠券，入会活动，充值折上折三部分组成，优惠区下面是根据热门搜索关键词设置的商品分类入口，最下面一部分是商品促销陈列区，主要突出产品和价格，一个完整的网店首页不仅介绍了网店信息，网店活动也很好的展示了网店商品。（四）知识准备知识准备一

了解网店首页（四）知识准备知识准备一

了解网店首页（四）知识准备知识准备一

了解网店首页（四）知识准备知识准备二 网店首页主要内容一个网店首页的装修好坏会直接影响网店的流量。布局合理，具有吸引力的网店首页会无形中增加消费者的访问深度，提高转化率。网店首页内容一般包括店标、店招、首页焦点图等内容：店招。店招位于网店首页的顶端位置，用于传递网店信息，一般有LOGO标识，网店名称，商品图片，广告语、优惠活动、导航条等信息组成。店标。店标代表着特定的形象，是品牌传递过程中应用最广泛、出现频率最高的元素，是区别于其他网店的重要标志。店标一般位于店招内。首页焦点轮播图。通常位于店招下面，是网店的横幅广告，一般用于宣传网店的热销产品，网店活动信息等内容，在版面设计上要足够吸引买家的视线。通常由两张及两张以上的横幅海报组成。优惠券。是商家为了促成销售而设置的优惠活动，对于网店来说可以提高网店购买率，刺激买家下单，提升客单价。商品分类。一个优秀的商品分类设计不仅可以让买家更加方便快捷的找到自己所需要的商品，还具备了很好的商品推荐作用，同时也能方便网店商品的分类管理。商品促销展示图。相当于网店的橱窗，在首页中主要用来展示网店爆款产品，热销产品，最新单品等商品信息，让顾客很快就能找到卖家最想推荐的产品，提高下单率。（四）知识准备知识准备三 网店首页类型品牌型网店首页。这类网店主要是依靠品牌形象来进行商品营销。视觉设计大气简约，页面风格与线下品牌风格基本保持一致，强调品牌LOGO和品牌名，品牌的质量和服务，设计上反而会弱化促销价格等的呈现效果，比如用比较淡的颜色、小的字体来呈现页面中价格，优惠活动等信息，重点突出品牌产品的价值和特色。营销型网店首页。这类网店在视觉设计上会更加卖力的展示营销促销氛围，重点突出活动优惠信息等，页面效果中在字体和色彩上努力展示营销设计，比如通过数字等形式表现出具体的优惠信息，在数字的颜色，大小上都有所强调。诚信经营，杜绝虚假宣传行为。比如有些网店在做广告时声称其产品质量更好，价格更优惠，但未提供任何证明，且未能提供可靠的数据支持其声称的优势，属于虚假宣传行为。当然，有的网店并没有明确的定位，一般来说首页都会展示产品优势和促销信息。（四）知识准备知识准备四 网店首页设计原则网店首页装修要符合网店的形象，有自己的品牌特色或产品特色；网店首页装修要选择合适的色彩色调，注重整体页面风格和谐搭配；网店首页装修要突出重点，比如促销、新品、折扣等内容，要能在短时间内抓住客户眼球，以快速精准的方式将重要信息直接传达给顾客；网店首页导航清晰，要让顾客随时能找到自己所需要的产品；页面长度最好不要超过三屏，太长的页面容易让人失去耐性。（五）任务实施步骤一 确定网店的整体装修风格网店的装修风格首先体现在网店的整体色彩、色调和产品的风格上，第三方平台网站上本身自带多种风格可供选择，商家可以选择默认的网店模板来进行装修，也可以根据店内商品的特点和营销氛围来重新设计，使网店独具特色。爱尚服饰是一家主营各类女装、男装、女鞋、男鞋等的综合性服饰网店，本次网店装修重在突出“春夏上新”的季节营销因素，将准备上架的一批春夏装进行促销活动。根据“春夏上新”的活动主题，收集图片等装饰元素，确定视觉色彩为绿色。确定网店首页类型。视觉色彩确定后，做一个什么类型的网店可通过调研用户需求，品牌定位，品牌营销等方面出发，爱尚服饰本身不是一个知名品牌，想要打开市场，营销先行。所以本次网店装修注重营造营销氛围，制作一个营销型的网店首页。（五）任务实施步骤二 确定网店首页设计方案网店首页的风格确定好后，下面要多和运营进行沟通，融入营销思维，确定网店首页各部分的内容。1.确定网店首页具体内容。这需要美工人员和营销人员进行详细沟通，了解活动主题、主推产品、优惠方案等内容，然后将沟通的结果进行填表，然后确定最终设计方案功能模块内容要求结论活动主题主题内容是什么？文案的主次顺序是这样的？活动的起止时间是什么？需要重点展示的元素是什么？主推产品主推产品有哪些？它们分别有什么样的定位？主推产品的核心卖点是什么？价格和折扣分别是什么？推荐的主次顺序是什么？优惠方案有什么样的优惠信息？具体优惠方案是什么？产品分类网店产品共有哪几个类别？产品是否有主次之分？产品的展现方式是什么样的？首页内容页面从上到下的顺序是怎么样的？（五）任务实施步骤二 确定网店首页设计方案2.确定网店首页设计方案。根据首页的具体内容，确定网店设计方案，绘制网店首页设计基本布局。店招首页焦点轮播图（一张营销活动图，一张新品推荐图）优惠区商品分类商品促销展示区（五）任务拓展淘宝“618年中庆”活动即将开始，为了顺利开展活动，每小组自选一种自己最熟悉的产品，比如运动鞋，确定装修风格，首页内容，完成网店首页的设计规划。THANK

YOU（一）任务工单任务目的：利用图形图像处理软件，设计和制作网店店标，以简洁明了的构图让顾客留下深刻印象。任务描述：通过使用文字，色彩，线条等完成“爱尚服饰”网店店标的制作。知识目标：了解钢笔工具的使用，剪切蒙版的应用，椭圆工具的使用，文字应用。知道店标的类型，店标所包含的内容和设计遵循的原则。能力目标：能利用图形图像处理软件，综合各种视觉元素，设计出具有美感和创意的网店店标。思政元素：树立品牌意识，提升品牌影响力。（二）任务情境爱尚服饰准备通过打造网上网店拓宽销售渠道，装修网店第一步就是要设计一款具有市场传播度的店标，要求店标样式图文结合，图案简洁明了，色彩明快，能针对目标市场人群，让人过目难忘，同兼顾时尚感，颜色要跟网店的经营商品或宝贝特征保持风格一致。（三）任务解析一个好的店标让人印象深刻，爱尚服饰店标主打明快的颜色和简洁的设计，通过运用椭圆工具，矩形工具，钢笔工具和矩形选框工具，完成的网店店标效果如图所示（四）知识准备知识准备一 了解店标店标就是网店的标志，是传达信息的重要符号，是电商品牌的核心象征，代表着一个网店的形象和基本特征，它能带给人最直观的品牌感受，可以代表网店的风格，网店的经营理念，产品的类别和特征，是网店或品牌宣传推广过程中应用最广泛、出现频率最高的元素之一。店标按照外观类型分可以分为：1. 文字型。这种店标通常是由网店名称或品牌名称的英文字母提取而成，或者是中文名称文字的变形。这种店标的风格就是将品牌的视觉形象与公司名称结合在一起，如下图所示，奢侈品牌GUCCI的标志就是简单的英文字母，没有其他装饰。小米的标志就使用了米字的拼音变形，让人一目了然。国民品牌美加净采用了了中英文结合的方式，并对中文字做了适当的变形。（四）知识准备知识准备一 了解店标2.

图片型。相对于文字性型的店标，图片的识别度更高，传达信息的成本更低，应用广泛。如下图所示,运动品牌耐克的标志就是一个简单的勾，可以出现在它旗下任何的运动单品上。苹果的标志是缺了一口的苹果造型，深入人心。（四）知识准备知识准备一 了解店标3. 图文结合型。这种LOGO设计通常由文字和图形共同组成，既能有直接的语言信息传播功能，又有直观的视觉形象，相互补充，相互成就，收到了广大商家的青睐，使用更加广泛。如下图所示。（四）知识准备知识准备一 了解店标店标按照状态区分还可以分为静态店标和动态店标，相比较而言，动态店标更能抓住顾客的眼球，比静态店标更能成为视觉焦点。淘宝网店用于上传到网店并被卖家搜索后显示在结果页的店标都是正方形小图，尺寸建议不要超过100像素*100像素，文件大小80K以内，格式可以是GIF、JPG、JPEG或者PNG。如下图3.2.5所示。很多网店通常会在店招上放上网店的店标，把店标作为店招页面的一部分进行设计，这里店标的尺寸建议为230像素*70像素。（四）知识准备知识准备二 店标包含的内容店标是网店对外宣传和推广的主要元素，设计制作店标可以包含的内容主要包括：品牌标志或网店名称。店标可以是本身经营的品牌标志组成，可以是网店的名称组成，也可以是网店标志和网店名称两者组合而成。经营范围。店标的图形能反映网店所经营的商品，让顾客一目了然。经营理念。有的品牌会在店标设计中加入经营理念，起到强化引导的作用，容易让顾客对网店产生信任感，从而提升网店的转化率，比如“正品保障”“专注品牌20年”等。网店网址。出现在店标中的网址会强化人们对网店网址的记忆。（五）任务实施步骤一 制作店标图案①

在

Photoshop

中新建文件，大小为

230*70像素，分辨率为

72

像素/英寸，背景为白色，标题名“爱尚服饰店标”。②

选择椭圆工具，在属性栏中设置填充颜色为“#bc0000”，按住Shift键，在画布左侧画正圆。复制本图层形成新图层，修改新图层正圆填充颜色为“#ff9f00”，栅格化新图层。③

选择视图菜单，分别新建垂直参考线和水平参考线定位在圆中心，选择矩形选框工具，选择黄色圆图形的下半部分并删除，效果如图

所示。（五）任务实施步骤一 制作店标图案④

同时选择两个半圆图层，

合并图层，在新图层上方新建图层，选择矩形工具，画白色矩形，选择

该图层，右击“创建剪贴蒙版”，隐藏白色矩形多余部分。用Ctrl+T键，旋转图形调整位置，（五）任务实施步骤一

制作店标图案⑤

选择钢笔工具，绘制如下图所示路径。形成字母A的外轮廓造型。（五）任务实施步骤一

制作店标图案⑥

在路径面板中，选择“将路径作为选区载入”按钮，将钢笔绘制的路径转化为选区，新建图层填充白色，取消选区。效果如图所示。（五）任务实施步骤二 制作店标文字①

新建图层，选择文字工具，属性栏中设置字体为“苏新诗毛糙体简”(字体位置：教材资源/素材文件/模块3.2/)，字号为“38”，颜色为“#bc0000”,在A图形的右侧输入文字“爱尚服饰”,适当调整位置，效果如下图所示。②

新建图层，选择文字工具，属性栏中设置字体为“Algerian”，字号为“16”，颜色为“#ff9f00”，字符间距：120，输入大写的英文字母：“LOVE

FASHION”，店标最终效果如图所示。（六）任务拓展蝶衣舍女装公司新成立，主营各类女装，并准备在淘宝网开设蝶衣舍女装网店，对于一个网店而言，店标