网店美工视觉设计实战教程课件-第4章店铺首页核心模块设计
合集下载
网店美工视觉设计实战教程课件-第4章店铺首页核心模块设计
4.5.1 制作女装店招
（2）输入文本， 制作文字类型的店 标。
（4）利用直线分割 矩形，输入文本，制 作优惠券。
34
1. 设计思路
（1）新建文件， 创建店招空白区域 与导航区域的辅助 线。
（3）添加分类图 片，并结合形状与 文字使用。
（5）输入导航条 文本，并添加标签。
4.5.1 制作女装店招
A B
植入品牌形象
在设计时可以通过店铺名称、标志 来植入品牌形象。
抓住商品定位
产品定位是指展示你的店铺卖的什么产 品，精准的产品定位可以快速吸引目标 消费群体进入店铺。
4.1.2 制作常规店招
4
下面我们将介绍制作美妆专卖店“护肤壹家”常规店招的方法。由于该店铺名称与“护 肤品”有关，因此店招的整体色调要符合女性消费人群的特点，并且要有活动的氛围感。
9
输入导航条文本
38
10
最终效果
4.5.2 制作女装海报
1. 设计思路
确定主色调，红色可以 营造温暖的氛围，烘托 外套的保暖性。
39
在页面左侧添加文本，在 页面右侧添加女装模特素 材，并为女装模特添加投 影，增加其立体感。
制作背景，通过 素材与矩形工具 的运用来制作出 背景效果。
4.5.1 制作女装店招
35
2. 知识要点
文字店标的设计 导航条的设计
文本的输入
图形的绘制
4.5.1 制作女装店招
36
3. 操作步骤 下面进行女装店招的制作，其具体操作如下。
1
3
新建文件并创建辅助线
绘制收藏图标
2
输入文本
4
绘制并复制矩形
4.5.1 制作女装店招
5
网店美工全书电子教案完整版课件全书教学课件
一、网店图片文件的类型
1. JPEG 格式 JPEG 是最常见的一种图片格式，文件的扩展名为 . jpg 或 . jpeg。
2. PNG 格式 PNG 是可移植的网络图形格式。
3. GIF 格式 GIF 是图形交换格式。
二、网店图片编辑软件
Photoshop CS6 是一款用于图像制作和处理的专业软件，具有 强大的功能，利用这些功能，可以有效地进行商品图片的编辑，是 网店美工必备的软件工具。
1. 文字编辑工具 2. “段落”调板
第 4 节 商品分类设计
一、商品类目的分类原则 二、商品类目的分类方式
1. 按商品种类按商品风格分类
三、商品类目导航条 四、商品分类设计的相关工具
1. 图层工具 2. 绘画工具 3. 图案图章工具 4. 切片工具
课件 制作
“动作”控制面板可以 对图像进行批量处理，避免 重复操作，提高处理图片的 效率。
课件 制作
第 2 章 网店图片设计
第 1 节 网店促销图设计 第 2 节 商品主图设计 第 3 节 商品详情页设计
第 1 节 网店促销图设计
一、促销图的类型
网店促销图一般分为整店促销图、单品促销图和活动推广促销图三种 类型。
一、色彩的分类
1. 无彩色
2. 有彩色 3. 特殊色
二、色彩的三要素
1. 色相：是区别不同色彩的名称。 2. 明度：是指色彩的明暗程度。 3. 纯度：是指色彩鲜艳的程度。
三、颜色的模式
1. RGB 模式 2. CMYK 模式 3. HSB 模式 4. Lab 模式
四、网店色彩的搭配
1. 同一色调搭配
文字栅格化后加滤镜的效果
2. 文字转换为形状 在图层面板中选择文字图层，右击鼠标转换为形状，可将文字转换为形
电商基础知识：店铺主页设计实操
千牛卖家中心，左侧店铺管理，选择店铺装修 直接进入店铺的主页，右上角选择，装修此页面
一.首页装修设计的模块
为什么我的装修功能和别人的不一样
店铺需要升级到智能版,点一下升级，会提示订购， 不需要付费即可使用
一钻以前免费使用智能版 需要注意浏览器版本太低会导致各种不显示。 如果一直提升升级，可以忽视掉
电商平台
电商基础系列课程
电商基础知识：店铺主页设 计实操
PPTZYG 日期：202X.09.23
课程目标
➢ 实操：完成淘宝用
C
目
o n
t
录
e n
t
s
第一部分 首页装修设计的模块 第二部分 店铺首页装修实操步骤
一.首页装修设计的模块
首页装修的入口
实官方免费提供的PC模板就足够我们 使用了，现在可以使用智能模板，自动 帮助我们生成手机端模板。
一.首页装修设计的模块
首页装修有哪些模块呢？
模块，包含了店铺主页具备的所有内 容及这些内容可以呈现的形式
一.首页装修设计的模块
首页装修有哪些模块呢？
配色：整店内容显示的效果
一.首页装修设计的模块
首页装修有哪些模块呢？
页头：页面头部背景色显示、背景图等
一.首页装修设计的模块
首页装修有哪些模块呢？
页面：整个页面背景图和背景色的显示
一.首页装修设计的模块
首页装修有哪些模块呢？
CSS：自定义页面的css样式，控制页面显示效果
二.店铺首页装修实操步骤
实操模块
店铺主页模板（尺寸说明） 店铺店招设计（950px*120px） 店铺背景色调整 店铺轮播图设计（大海报1920px宽，轮播图950宽） 店铺优惠信息显示 店铺商品显示调整 店铺装修效果备份及预览
一.首页装修设计的模块
为什么我的装修功能和别人的不一样
店铺需要升级到智能版,点一下升级，会提示订购， 不需要付费即可使用
一钻以前免费使用智能版 需要注意浏览器版本太低会导致各种不显示。 如果一直提升升级，可以忽视掉
电商平台
电商基础系列课程
电商基础知识：店铺主页设 计实操
PPTZYG 日期：202X.09.23
课程目标
➢ 实操：完成淘宝用
C
目
o n
t
录
e n
t
s
第一部分 首页装修设计的模块 第二部分 店铺首页装修实操步骤
一.首页装修设计的模块
首页装修的入口
实官方免费提供的PC模板就足够我们 使用了，现在可以使用智能模板，自动 帮助我们生成手机端模板。
一.首页装修设计的模块
首页装修有哪些模块呢？
模块，包含了店铺主页具备的所有内 容及这些内容可以呈现的形式
一.首页装修设计的模块
首页装修有哪些模块呢？
配色：整店内容显示的效果
一.首页装修设计的模块
首页装修有哪些模块呢？
页头：页面头部背景色显示、背景图等
一.首页装修设计的模块
首页装修有哪些模块呢？
页面：整个页面背景图和背景色的显示
一.首页装修设计的模块
首页装修有哪些模块呢？
CSS：自定义页面的css样式，控制页面显示效果
二.店铺首页装修实操步骤
实操模块
店铺主页模板（尺寸说明） 店铺店招设计（950px*120px） 店铺背景色调整 店铺轮播图设计（大海报1920px宽，轮播图950宽） 店铺优惠信息显示 店铺商品显示调整 店铺装修效果备份及预览
(中职) Photoshop CC网店视觉设计第四章教学课件
上一页 下一页 返回
4.2 图像的显示与尺寸控制
• （5）使用菜单命令改变图像的显示比例。在“视图”菜单中，有 “放大”“缩小”“满画布显示”“实际像素”“打印尺寸”命令。 通过这些菜单命令的使用，来改变图像的显示比例。
• （6）使用工具箱的“缩放工具”改变图像的显示比例。单击工具箱 上的“缩放工具”按钮，再单击画布窗口的内部，就可以将图像显示 比例放大。按住Alt 键，并单击画布窗口的内部即可将图像显示比例 缩小。用鼠标拖动选中图像的一部分，即可使该部分图像布满整个画 布窗口。
• 网格的主要作用是对齐参考线，以便在操作中对齐物体，网格也不会 随图像输出。单击“视图”菜单下的“显示”子菜单中的“网格”命 令，即可在画布窗口内显示出网格来，如图4.4 所示。再次单击“视 图”菜单下的“显示”子菜单中的“网格” 命令，即可取消画布窗 口内的网格。当网格容易与图像混淆时，需要重新设置网格。此时， 应单击“编辑”菜单的“首选项”子菜单中“参考线、网格和切片” 命令，在调出的“首选项”对话框中，可以对网格的颜色、样式、间 隔线以及子网格进行设置，以达到满意效果为止。
• （4）Cmd（Mac）/Ctrl（Win）+悬停在图层上方：在处理图层时， 可以查看测量参考线。选定某个图层后，在按住 Cmd 键（Mac）或 Ctrl 键（Windows）的同时将光标悬停在另一图层上方。可以将此 功能与箭头键结合使用，以轻移所选的图层。
上一页
返回
4.2 图像的显示与尺寸控制
• 4.2.1 图像的显示控制
• Photoshop 提供了许多工具，如抓手工具、缩放工具、缩放命令和 导航面板等，使得使用者可以十分方便地按照不同的放大倍数查看图 像的不同区域。下面分别作简要介绍。
• （1）使用工具箱的抓手工具来改变图像的显示部位. • （2）当打开的图像很大，或者操作中将图像放大，以至于窗口中无
4.2 图像的显示与尺寸控制
• （5）使用菜单命令改变图像的显示比例。在“视图”菜单中，有 “放大”“缩小”“满画布显示”“实际像素”“打印尺寸”命令。 通过这些菜单命令的使用，来改变图像的显示比例。
• （6）使用工具箱的“缩放工具”改变图像的显示比例。单击工具箱 上的“缩放工具”按钮，再单击画布窗口的内部，就可以将图像显示 比例放大。按住Alt 键，并单击画布窗口的内部即可将图像显示比例 缩小。用鼠标拖动选中图像的一部分，即可使该部分图像布满整个画 布窗口。
• 网格的主要作用是对齐参考线，以便在操作中对齐物体，网格也不会 随图像输出。单击“视图”菜单下的“显示”子菜单中的“网格”命 令，即可在画布窗口内显示出网格来，如图4.4 所示。再次单击“视 图”菜单下的“显示”子菜单中的“网格” 命令，即可取消画布窗 口内的网格。当网格容易与图像混淆时，需要重新设置网格。此时， 应单击“编辑”菜单的“首选项”子菜单中“参考线、网格和切片” 命令，在调出的“首选项”对话框中，可以对网格的颜色、样式、间 隔线以及子网格进行设置，以达到满意效果为止。
• （4）Cmd（Mac）/Ctrl（Win）+悬停在图层上方：在处理图层时， 可以查看测量参考线。选定某个图层后，在按住 Cmd 键（Mac）或 Ctrl 键（Windows）的同时将光标悬停在另一图层上方。可以将此 功能与箭头键结合使用，以轻移所选的图层。
上一页
返回
4.2 图像的显示与尺寸控制
• 4.2.1 图像的显示控制
• Photoshop 提供了许多工具，如抓手工具、缩放工具、缩放命令和 导航面板等，使得使用者可以十分方便地按照不同的放大倍数查看图 像的不同区域。下面分别作简要介绍。
• （1）使用工具箱的抓手工具来改变图像的显示部位. • （2）当打开的图像很大，或者操作中将图像放大，以至于窗口中无
《淘宝天猫网店美工实战--视觉设计+店铺装修+移动端店铺》—教学教案
《淘宝天猫网店美工实战--视觉设计+店铺装修+移动端店铺》教学教案第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”素材文件进行抠图，将其抠取出来的红酒瓶应用到其他背景中，调整大小和位置后合成为更具有营销表现力的效果图片。
第4章店铺首页核心模块设计
4.5.1 制作女装店招
2. 知识要点
31
01 海报设计要点
02
文本的输入
03 图形的绘制
4.5.1 制作女装店招
3. 操作步骤 下面进行女装店招的制作，其具体操作如下。
24
4 5
2
修改文本后的优惠券效果 创建并复制组
Contents
目录
4.1 店招设计
4.2 分类导航设计
4.3 海报设计 4.4 优惠券设计 4.5 实战演练
4.5.1 制作女装店招
26
输入文本，制作文 字类型的店标。
通过直线分割矩形， 输入文本制作优惠券。
1. 设计思路
新建文件，创建店 招空白区域与导航
分类导航按钮的制作比店招简单一些，一般可以使用Photoshop将其制作成好看的图片
13
格式。下面使用Photoshop CS6制作店铺的分类导航按钮，其具体操作如下。
1
2
绘制矩形 添加内阴影
4.2.2 设计分类导航按钮
14
4 1 3
绘制按钮 制作其他按钮并切片
5
2
存储切片
6
添加外发光
Contents
1
添加素材并输入文本
4.3.1 制作全屏海报
17
2
3
4
绘制直线
绘制树叶路径
填充并复制树叶
5
全屏海报效果
4.3.2 制作常规海报
根据放置的位置不同所要求的尺寸也有所不同，一般包括950像素、750像素、190像素
18
3个宽度，虽然海报的尺寸不同，但其制作方法相似，都要求凸出主题。下面以制作750像素
1
添加商品
3 2
网店美工与视觉设计 教学ppt4
252调整商品图片的尺寸在电商平台上传商品图片通常平台都会对图片的尺寸有所要求因此需要对商品图片的大小迚行修改本章小结要成为一名合格的网店美工首先要有扎实的photoshop软件应用基础photoshop具有强大的图片处理功能本章介绍了photoshop软件在网店美工岗位中的常用功能和技巧
电商美工课程
2.1.3应用PS的辅助工具
为了使图像的制作更加精细，可以使用photoshp中的辅助工具来帮助设计制作，辅助工 具主要包括标尺、参考线和网格。
2.1.4图像文件的基本操作
启动Photoshop 软件后，新建、打开、保存和关闭图像文件都是最基本的操作，掌握这 些基本操作是设计和制作图像文件的必要技能。
2.5.2 调整商品图片的尺寸
在电商平台上传商品图片，通常平台都会对图片的尺寸有所要求，因此需要对商品图片 的大小进行修改
本章小结
要成为一名合格的网店美工，首先要有扎实的photoshop软件应用基础， Photoshop具 有强大的图片处理功能，本章介绍了Photoshop软件在网店美工岗位中的常用功能和技巧。 主要包括图像文件的基本操作，商品图片颜色调整与校正，商品图片的扣取、美化与修饰，商 品图片的裁切与倾斜校正等。
Photoshop CC的界面在色彩应用上取代之前的灰色，当前的界面风格类似苹果摄影软件 的界面风格，Photoshop CC的基础工作界面，包括了菜单栏、选项栏、工具箱、图像编辑 区域、控制面板等模块。
2.1.2调整PS的界面视图
为了更好地处理图像，photoshop CC提供了多种视图显示模式和图像查看工具，主要包 括切换商品图像显示模式、调整商品图像显示比例、移动商品图像显示画面。
修补工具是使用图片中某些特定的区域来替换需要修补的区域，它会将源区域和目标区 域的纹理、明暗等相匹配，修补工具是使用最频繁的修复工具之一。
电商美工课程
2.1.3应用PS的辅助工具
为了使图像的制作更加精细，可以使用photoshp中的辅助工具来帮助设计制作，辅助工 具主要包括标尺、参考线和网格。
2.1.4图像文件的基本操作
启动Photoshop 软件后，新建、打开、保存和关闭图像文件都是最基本的操作，掌握这 些基本操作是设计和制作图像文件的必要技能。
2.5.2 调整商品图片的尺寸
在电商平台上传商品图片，通常平台都会对图片的尺寸有所要求，因此需要对商品图片 的大小进行修改
本章小结
要成为一名合格的网店美工，首先要有扎实的photoshop软件应用基础， Photoshop具 有强大的图片处理功能，本章介绍了Photoshop软件在网店美工岗位中的常用功能和技巧。 主要包括图像文件的基本操作，商品图片颜色调整与校正，商品图片的扣取、美化与修饰，商 品图片的裁切与倾斜校正等。
Photoshop CC的界面在色彩应用上取代之前的灰色，当前的界面风格类似苹果摄影软件 的界面风格，Photoshop CC的基础工作界面，包括了菜单栏、选项栏、工具箱、图像编辑 区域、控制面板等模块。
2.1.2调整PS的界面视图
为了更好地处理图像，photoshop CC提供了多种视图显示模式和图像查看工具，主要包 括切换商品图像显示模式、调整商品图像显示比例、移动商品图像显示画面。
修补工具是使用图片中某些特定的区域来替换需要修补的区域，它会将源区域和目标区 域的纹理、明暗等相匹配，修补工具是使用最频繁的修复工具之一。
《网店美工》课件项目4课件
白文档，将背景填充为“灰色”。 步骤2新建一个图层，使用（矩形工具）在左侧绘制“青色（#61b6d2）”，宽200 像素，高225像素 步骤3新建一个图层，使用（直线工具）在页面中水平位置绘制2像素粗细的白
色直线，直线间隔55像素。
步骤4使用（横排文字工具）输入相关文字，字体英文为“幼圆”，中文为“微 软雅黑”，大小分别为28、18、12像素。
【知识总结】 本项目需要掌握的知识点可归纳为如下图所示的内容结构图。
4.2 详情页设计
1.广告区操作 步骤1、启动Photoshop，新建一个750像素×422像素，分辨率为72像素/英寸的空白文档。 步骤2、使用矩形工具在页面中分别绘制黄色矩形和粉色矩形，之后将其进行旋转25度并调整黄色到
右上位置，粉色到左下位置。为了操作方便，将两个矩形编到一组中，为矩形添加一个“内 阴影”图层样式。 步骤3、打开“素材”文件夹，在“项目四素材”文件夹中找到“多个围巾.jpg”，将其拖曳到文档， 设置“混合模式”为“线性加深”，此时发现混合后图片显示不是太好。复制围巾所在图层， 单击“添加图层蒙版”按钮，添加一个空白蒙版，使用（画笔工具）在蒙版上涂抹黑色。 步骤4、新建图层，使用（多边形工具）在右边绘制一个三角形路径，选择（画笔工具）后设置“画 笔大小”为2，在“路径”面板中单击（用画笔描边路径）按钮，为路径进行描边。 步骤5、使用（橡皮擦工具）水平擦除三角形的部分边缘，在三角形内输入文字，“羊绒围巾”， “ Cashmere scarf”，“ 展现围巾中性风采”，“ 双色搭配”，“ 时尚升级”。
步骤6、使用（椭圆选框工具）绘制羽化为2像素，宽30像素，高6像素的选区，将选区填充为“黑 色”，调整“不透明度”为29%。
步骤6、新建图层，在右上角位置绘制一个粉红色（#ff6766）圆角矩形，宽为“110像素”，高为“28 像素”，在上面输入文字“千围围巾”，在底部中间位置绘制白色圆角矩形，宽为“155像 素”，高为“25像素”，调整不透明效果为38%，至此广告区制作完毕。
色直线，直线间隔55像素。
步骤4使用（横排文字工具）输入相关文字，字体英文为“幼圆”，中文为“微 软雅黑”，大小分别为28、18、12像素。
【知识总结】 本项目需要掌握的知识点可归纳为如下图所示的内容结构图。
4.2 详情页设计
1.广告区操作 步骤1、启动Photoshop，新建一个750像素×422像素，分辨率为72像素/英寸的空白文档。 步骤2、使用矩形工具在页面中分别绘制黄色矩形和粉色矩形，之后将其进行旋转25度并调整黄色到
右上位置，粉色到左下位置。为了操作方便，将两个矩形编到一组中，为矩形添加一个“内 阴影”图层样式。 步骤3、打开“素材”文件夹，在“项目四素材”文件夹中找到“多个围巾.jpg”，将其拖曳到文档， 设置“混合模式”为“线性加深”，此时发现混合后图片显示不是太好。复制围巾所在图层， 单击“添加图层蒙版”按钮，添加一个空白蒙版，使用（画笔工具）在蒙版上涂抹黑色。 步骤4、新建图层，使用（多边形工具）在右边绘制一个三角形路径，选择（画笔工具）后设置“画 笔大小”为2，在“路径”面板中单击（用画笔描边路径）按钮，为路径进行描边。 步骤5、使用（橡皮擦工具）水平擦除三角形的部分边缘，在三角形内输入文字，“羊绒围巾”， “ Cashmere scarf”，“ 展现围巾中性风采”，“ 双色搭配”，“ 时尚升级”。
步骤6、使用（椭圆选框工具）绘制羽化为2像素，宽30像素，高6像素的选区，将选区填充为“黑 色”，调整“不透明度”为29%。
步骤6、新建图层，在右上角位置绘制一个粉红色（#ff6766）圆角矩形，宽为“110像素”，高为“28 像素”，在上面输入文字“千围围巾”，在底部中间位置绘制白色圆角矩形，宽为“155像 素”，高为“25像素”，调整不透明效果为38%，至此广告区制作完毕。
《UI视觉设计案例教程》PPT课件(共6章)第4章 网页界面设计
[#333333]
图 4-77 利用字号和颜色区分主次
[#808080]
当处理多行文字时，可通过控制行高和字体样式来突出关键内容，增加用 户浏览的舒适度，如图4-78所示。
间距40
图 4-78 多行文字的处理方式
学习目标reviewofworkcontent了解网页界面的组成了解常见的网页界面布局及版块规划技巧了解网页界面设计的要点了解网页界面设计的尺寸规范了解网页界面设计中常用的字体和字号掌握网页界面的一般制作方法42界面设计规范43案例实战41基础知识第4章网页界面设计41基础知识411网页界面的组成网页界面一般由页首主体内容和页脚三部分组成如图所示下面分别介绍
本章实训——设计电子商城网站页面
设计 1.分析基本结构图。2.确定配色。选择象征简洁、科技、高端的黑色、白色 思路 和灰色作为页面主要颜色。3.页面布局。首页可采用卡片式布局，将商品内
容安排在一张张卡片上，从而使页面效果看起来整齐大方，便于浏览。
案例提示
难点在于如何清晰工整地排列多行文案。当多行文字重要程度不同时，可通 过颜色、字号进行区分，如商品标题、价格和详细介绍，可将标题字号设置得大 一些，将价格以醒目的颜色突出显示，而详细介绍则用一般字体和颜色，这样浏 览者将优先看到标题和价格，最后看到介绍的内容，如图4-77所示。
1.延伸
2.曲线
3．过渡
4．隐藏 5．层叠
6．错位
1．延伸
当两个版块的内容有所关联时，将较小的版块延伸到较大的版块上，使两个版 块重叠一部分，则可以很好地打破两个版块之间的分界线。
版块的对齐与延伸
2．曲线 通过改变分割线的形状（如将直线改为曲线、折线等）能有效地解决界面呆板
问题。 注:虽然两个版块在效果上呈现出曲线过渡，但实际上版块的形状依然是矩形，
网店美工 课件 项目四 设计与制作店铺首页
01
展示商品、促进销售
02
展示商品、促进销售
03
引流
任务一 认识店铺首页
4
二、店铺首页的组成结构
店铺首页主要由店招与导航、全屏海报、优惠活动区、商品推荐区等模块组成，每个模块 的作用和使用方法都不同。
01 店招与导航 03 全屏海报
02 优惠活动区 04 超商品推荐区
任务一 认识店铺首页 任务二 设计与制作店招与导航 任务三 设计与制作全屏海报 任务四 设计与制作优惠券 任务五 设计与制作商品推荐区
29
二、【课堂案例】——制作家纺店铺商品推荐区
5
6
7
任务五 设计与制作商品推荐区
30
课堂练习：制作茶叶店铺商品推荐区
操作思路
为了与前面茶叶店铺优惠券的风格相统一，在设计茶叶店铺商品推荐区时，网店美工可继续 运用水墨风的人物、山水作为背景，并采用海报的方式展示主推商品，然后采用单排的方式展示 热卖商品，方便消费者浏览。
操作提示
新建图像文件，并对背景填充渐变颜色；依次添加云、山坡、灌木、云海、光晕素材，完成 背景的制作；添加商品图像；输入文字并调整文字的颜色，最终参考效果如图所示。
任务三 设计与制作全屏海报
19
课堂练习：制作茶叶全屏海报
效果展示
任务一 认识店铺首页 任务二 设计与制作店招与导航 任务三 设计与制作全屏海报 任务四 设计与制作优惠券 任务五 设计与制作商品推荐区
任务四 设计与制作优惠券
25
课堂练习：制作茶叶全屏海报
效果展示
任务一 认识店铺首页 任务二 设计与制作店招与导航 任务三 设计与制作全屏海报 任务四 设计与制作优惠券 任务五 设计与制作商品推荐区
任务五 设计与制作商品推荐区
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
等主要信息进行合理搭配。本例主要制作女装店铺的活动区，在制作时，先制作活动区中的
分类模块，再制作单个商品的展示区，其具体操作步骤如下。
1
2
绘制圆形
输入文本
3
绘制直线
4.4.2 制作活动区.
4
添加投影
28
5
复制并修改内容
6
输入文本
4.4.2 制作活动区.
7
添加素材并绘制矩形
8
复制矩形并添加素材
29
第4章 网店美工视觉设计实战教程（全彩微课版 第2版）
店铺首页核心模块设计
目录 Contents
4.1 店招设计 4.2 海报设计 4.3 优惠券设计 4.4 活动区设计 4.5 实战演练
4.1.1 店招制作规范
3
页头背景图片大小建议小于200k，店招大小建议小于80kb，店招的格式也应设置成 JPG、GIF、PNG或SWF等格式。为了便于网店商品的推广，除了需要在设计上具有新颖别致、 易于传播的特点，还应遵循两个基本的原则。
4.5.1 制作女装店招
（2）输入文本， 制作文字类型的店 标。
（4）利用直线分割 矩形，输入文本，制 作优惠券。
34
1. 设计思路
（1）新建文件， 创建店招空白区域 与导航区域的辅助 线。
（3）添加分类图 片，并结合形状与 文字使用。
（5）输入导航条 文本，并添加标签。
4.5.1 制作女装店招
A B
植入品牌形象
在设计时可以通过店铺名称、标志 来植入品牌形象。
抓住商品定位
产品定位是指展示你的店铺卖的什么产 品，精准的产品定位可以快速吸引目标 消费群体进入店铺。
4.1.2 制作常规店招
4
下面我们将介绍制作美妆专卖店“护肤壹家”常规店招的方法。由于该店铺名称与“护 肤品”有关，因此店招的整体色调要符合女性消费人群的特点，并且要有活动的氛围感。
4.1.3 制作通栏店招
10
网店美工制作通栏店招时，一般是在常规店招的基础上进行修改。首先需要新建通栏店
招文件，添加常规店招位置的辅助线，然后将常规店招拖入其中，调整显示位置，添加导航 条形状与文本，其具体操作步骤如下。
1
3
添加背景
显示标尺
2
4
添加参考线
创建渐变导航条
4.1.3 制作通栏店招
添加常规店招 通栏店招效果
1
打开素材文件
输
3
入 文
本
2
添加投影
4.2.2 制作常规海报
4
绘制直线
5
输入文本并绘制圆角矩形
17
6
输入文本并绘制圆角矩形
7
常规海报效果
目录 Contents
4.1 店招设计 4.2 海报设计 4.3 优惠券设计 4.4 活动区设计 4.5 实战演练
4.3.1 优惠券设计原则
19
Hale Waihona Puke 优惠券在首页模块中展示的信息是有限，一张完整的优惠券除了优惠数字，还需要留意 很多信息，这些信息一般需要在买家点击领用后才会显示，其中显示了使用条件、有效时间、 发行店铺等信息，通常包括以下5种信息。
11
5
6
目录 Contents
4.1 店招设计 4.2 海报设计 4.3 优惠券设计 4.4 活动区设计 4.5 实战演练
4.2.1 制作全屏海报
13
在制作全屏海报时首先要根据店铺风格来选择海报的色调，同时选定海报所要表达的主 题，如新品上市、活动促销与预热等，在制作过程中则要合理运用海报的布局、构图和配色。 此外，由于计算机显示器的分辨率高低不同，为了保证全屏海报在任何显示器中都能完整地 显示出图片中的重要信息，在制作全屏海报时需要对图片的两边进行“留白”处理，即左右 两侧宽度为360像素的区域中不放置重要的商品图片与文案。下面介绍制作美妆商品的全屏 海报的方法，其具体操作步骤如下。
35
2. 知识要点
文字店标的设计 导航条的设计
文本的输入
图形的绘制
4.5.1 制作女装店招
36
3. 操作步骤 下面进行女装店招的制作，其具体操作如下。
1
3
新建文件并创建辅助线
优惠券的使用条件
设置使用张数限制
01
03
05
02
04
优惠券的使用范围
优惠券的使用时间限制
优惠券的最终解释权
4.3.2 制作优惠券
20
优惠券的发放模式主要有消费满减（满就送）、会员折扣和消费者自主领取3种，下面 我们制作美妆类商品的满减优惠券。为了配合前面制作的店招与海报风格，在制作本例的优 惠券时，其颜色会沿用前面店招的颜色，其具体操作步骤如下。
4.4.1 活动区的设计要点.
26
在制作活动区时，通常使用配合商品、文案、价格等信息来展示活动内容，为了对商品 活动区的功能进行优化，设计过程中需要注意以下3个方面。
活动区的名称
01
活动区中的商品展示
02
03 活动区中的商品数量
4.4.2 制作活动区.
27
为了吸引消费者的注意力，网店美工在制作活动区时需要将海报、商品、名称以及价格
1
新建文件
2
添加背景
3
绘制圆
4.1.2 制作常规店招
4
复制并缩小圆
5
5
输入文本
4.1.2 制作常规店招
6
创建扇形变形效果
6
7
绘制直线的效果
4.1.2 制作常规店招
7
8
添加文本
9
添加美妆商品
4.1.2 制作常规店招
10
添加投影
8
11
复制投影效果
4.1.2 制作常规店招
9
12
输入文本
13
复制图层与修改文本
9
添加投影
4.4.2 制作活动区
10
12
输入文本
11
13
添加内阴影
30
绘制直线 绘制圆角矩形并输入文本
4.4.2 制作活动区
14
31
15
输入文本并绘制直线
16
添加素材
绘制圆角矩形
4.4.2 制作活动区
17
输入文本
32
18
添加素材
目录 Contents
4.1 店招设计 4.2 海报设计 4.3 优惠券设计 4.4 活动区设计 4.5 实战演练
1
打开素材文件
4.2.1 制作全屏海报
2
输入文本1
14
3
输入文本2
4.2.1 制作全屏海报
4
绘制渐变矩形
15
5
全屏海报效果
4.2.2 制作常规海报
16
常规海报与全屏海报所放位置不同，其宽度也有所不同，一般包括950像素、750像素、 190像素3种类型。虽然海报的尺寸不同，但其制作方法相似。下面我们制作宽度为750像素 的常规海报，其具体操作步骤如下。
1
绘制圆角矩形
2
添加素材
4.3.2 制作优惠券
21
3
输入文本
4
绘制直线
4.3.2 制作优惠券
22
5
绘制圆角矩形
6
复制组
4.3.2 制作优惠券
23
7
优惠券效果
8
优惠券效果
4.3.2 制作优惠券
24
9
复制组
10
最终效果
目录 Contents
4.1 店招设计 4.2 海报设计 4.3 优惠券设计 4.4 活动区设计 4.5 实战演练