1、 淘宝店铺首页代表了淘宝店铺的形象，作为门面担当，淘宝店铺首页代表了淘宝店铺的形象，作为门面担当，首页页面设计的美观性不仅可以激发买家的购买欲，对转化首页页面设计的美观性不仅可以激发买家的购买欲，对转化率也有很大影响。本章将为一家零食淘宝店铺制作首页，包率也有很大影响。本章将为一家零食淘宝店铺制作首页，包含店招、分类活动导航、海报、分类引导、宝贝陈列区、页含店招、分类活动导航、海报、分类引导、宝贝陈列区、页尾设计等版块的制作。通过本章的学习，可以了解淘宝首页尾设计等版块的制作。通过本章的学习，可以了解淘宝首页的主要构成模块，掌握淘宝首页不同区域的设计要点以及各的主要构成模块，掌握淘宝首页不同区
2、域的设计要点以及各版块的具体制作技巧。版块的具体制作技巧。淘宝店铺的首页相当于一家实体店的门面，其首页淘宝店铺的首页相当于一家实体店的门面，其首页设计的好坏将直接影响顾客的购物体验和店铺的转化率，设计的好坏将直接影响顾客的购物体验和店铺的转化率，好的首页一定由合适的版块布局组成。店铺首页布局并好的首页一定由合适的版块布局组成。店铺首页布局并不是将所有模块都堆积到界面中，而是将模块按照合适不是将所有模块都堆积到界面中，而是将模块按照合适的组合进行排列，组成整体格局。不同类型的店铺其首的组合进行排列，组成整体格局。不同类型的店铺其首页模块也不一样，在布局时还要考虑店铺的定位和类型。页模块也不一样，
3、在布局时还要考虑店铺的定位和类型。6.1.16.1.1店铺首页的设计要点店铺首页的设计要点1.1.店铺定位店铺定位 店铺首页布局，必须以店铺定位为中心，统一设计风格，店铺首页布局，必须以店铺定位为中心，统一设计风格，然后在风格上突出店铺的主题和活动促销信息等。然后在风格上突出店铺的主题和活动促销信息等。2.2.必备模块必备模块 不同的店铺首页在装修上也会不同，但是一些基本的模不同的店铺首页在装修上也会不同，但是一些基本的模块都是相同的，如店招、导航栏分类、产品图片、文案等，块都是相同的，如店招、导航栏分类、产品图片、文案等，在设计前需要先确定店铺首页要包含哪些模块，以及各个模在设计前需要先确定
4、店铺首页要包含哪些模块，以及各个模块的内容。块的内容。3.3.产品视觉布局产品视觉布局 若店铺的首页放置的商品图片很多，在设计时可以考虑若店铺的首页放置的商品图片很多，在设计时可以考虑对产品进行层次划分，如主推商品、热销商品、新品上市等，对产品进行层次划分，如主推商品、热销商品、新品上市等，让顾客在浏览首页时能很快找到商品，避免视线繁杂引起购让顾客在浏览首页时能很快找到商品，避免视线繁杂引起购物疲劳。常见的首页布局包括单向型和曲线型。物疲劳。常见的首页布局包括单向型和曲线型。单向型：该布局是通过竖向、横向和斜向的引导，将信息单向型：该布局是通过竖向、横向和斜向的引导，将信息传达给顾客。竖向型的
5、布局可以使页面产生稳定感且条理传达给顾客。竖向型的布局可以使页面产生稳定感且条理分明，如图分明，如图 6-1 6-1 所示；横向型的布局符合人们的阅读习所示；横向型的布局符合人们的阅读习惯；斜向型的布局可以使画面产生层次感，增强视觉吸引惯；斜向型的布局可以使画面产生层次感，增强视觉吸引力。力。曲线型：曲线型在淘宝店铺中是较为常见的一种布局方式，曲线型：曲线型在淘宝店铺中是较为常见的一种布局方式，以一定的曲线排列商品，可以使页面产生韵律感，引导顾以一定的曲线排列商品，可以使页面产生韵律感，引导顾客视线随曲线移动，如图客视线随曲线移动，如图 6-2 6-2 所示。所示。图图 6-1 图图 6-24
6、.4.美观美观 美观是店铺首页设计最基本的要求，可以通过学习平面美观是店铺首页设计最基本的要求，可以通过学习平面设计中的一些版式和色彩搭配，来增强店铺首页的统一性。设计中的一些版式和色彩搭配，来增强店铺首页的统一性。在文案字体和颜色的选择上，要随着场景的不同合理安在文案字体和颜色的选择上，要随着场景的不同合理安排。通过字体、字号的搭配让顾客更清晰明朗的接收信息，排。通过字体、字号的搭配让顾客更清晰明朗的接收信息，要知道在页面设计中并不是文字越大显示效果越好。要知道在页面设计中并不是文字越大显示效果越好。6.1.26.1.2熟悉店铺首页构成模块熟悉店铺首页构成模块 以旺铺专业版为例，一个正常营业
7、的店铺首页主要包括以旺铺专业版为例，一个正常营业的店铺首页主要包括店招、导航、海报、产品分类、客服旺旺、产品展示、店铺店招、导航、海报、产品分类、客服旺旺、产品展示、店铺页尾、店铺背景等，如图页尾、店铺背景等，如图 6-3 6-3 所示。所示。图图 6-3 在进行店铺首页布局前，先了解首页上重要模块的功能。在进行店铺首页布局前，先了解首页上重要模块的功能。店招和导航：店招是店铺的招牌，位于首页最上方。店招的店招和导航：店招是店铺的招牌，位于首页最上方。店招的内容主要包括店铺名称、主推商品、收藏店铺图标等。导航内容主要包括店铺名称、主推商品、收藏店铺图标等。导航栏位于店招下方，通常包括栏位于店招
8、下方，通常包括“所有分类所有分类”“”“首页首页”“”“热销商热销商品品”“”“促销活动促销活动”“”“产品各个分类产品各个分类”和和“搜索框搜索框”等栏目，等栏目，导航的分类最好不超过导航的分类最好不超过 9 9 个。如图个。如图 6-4 6-4 所示。所示。图图 6-4 悬浮活动导航：除了店招下的导悬浮活动导航：除了店招下的导航栏外，有的店铺在页面中会设航栏外，有的店铺在页面中会设置活动导航，随着顾客浏览的位置活动导航，随着顾客浏览的位置的变化，活动导航将始终显示置的变化，活动导航将始终显示在页面的侧方。如图在页面的侧方。如图 6-5 6-5 所示。所示。图图 6-5 海报海报/轮播图：首
9、页海报可以给人震撼的视觉效果，所以轮播图：首页海报可以给人震撼的视觉效果，所以可以通过在海报中进行视觉设计来表现店铺的活动；轮播可以通过在海报中进行视觉设计来表现店铺的活动；轮播图是多张海报滚动播放组合，为了避免错过其他海报的信图是多张海报滚动播放组合，为了避免错过其他海报的信息，建立轮播海报不超过息，建立轮播海报不超过 3 3 张。如图张。如图 6-6 6-6 所示。所示。图图 6-6 优惠券和产品分类：优惠券的设置的可以带动部分顾客为优惠券和产品分类：优惠券的设置的可以带动部分顾客为了了“满减满减”活动购买多件商品，提升连带率。而产品分类活动购买多件商品，提升连带率。而产品分类则可以让顾客
10、快速找到自己想要的商品，如图则可以让顾客快速找到自己想要的商品，如图 6-7 6-7 所示。所示。产品展示：店铺首页对于产品的展示也是很有必要的，可产品展示：店铺首页对于产品的展示也是很有必要的，可以将热销商品、主推商品和应季商品放在最上方，如果有以将热销商品、主推商品和应季商品放在最上方，如果有促销活动也可以将活动商品排在最上方，如图促销活动也可以将活动商品排在最上方，如图 6-8 6-8 所示。所示。图图 6-7 图图 6-8 客服中心：店铺的客服组所占的高度不多，有些店铺将客客服中心：店铺的客服组所占的高度不多，有些店铺将客服组设置在店招上，有的则放在首页页面的最后。如果店服组设置在店招
11、上，有的则放在首页页面的最后。如果店铺首页特别长，那一定要把客服组放在最显眼的位置，让铺首页特别长，那一定要把客服组放在最显眼的位置，让顾客一看就能看到，这样才能在顾客需要帮助时发挥作用。顾客一看就能看到，这样才能在顾客需要帮助时发挥作用。店铺页尾：在店铺页尾：在 PC PC 端的店铺页尾模块，通常会放置端的店铺页尾模块，通常会放置“商品商品分类分类”“”“回到顶部回到顶部”以及以及“购物须知购物须知”等信息，如图等信息，如图 6-9 6-9 所示。所示。图图 6-9 店招可以根据店铺销售的商品和店铺风格进行设计，可店招可以根据店铺销售的商品和店铺风格进行设计，可以是文字也可以是图文组合。一般
12、的店招包括店铺名称、店以是文字也可以是图文组合。一般的店招包括店铺名称、店铺铺 logo logo、收藏和关注等。下面通过、收藏和关注等。下面通过 Photoshop Photoshop 制作零食店制作零食店铺的店招来具体介绍店招的制作，最终效果如图铺的店招来具体介绍店招的制作，最终效果如图 6-10 6-10 所示。所示。图图 6-10 店招是顾客进入店铺首页时，首先映入顾客视线的界面，店招是顾客进入店铺首页时，首先映入顾客视线的界面，利用店招进行信息传达是店铺视觉设计的重要步骤之一，店利用店招进行信息传达是店铺视觉设计的重要步骤之一，店招的视觉表现主要分为以下几个方面。招的视觉表现主要分为
13、以下几个方面。店招风格：店招的风格要和店铺整体统一，同时也要和店店招风格：店招的风格要和店铺整体统一，同时也要和店铺产品的风格有一定的关联性。铺产品的风格有一定的关联性。店招背景：店招左右两侧为店招的背景区域，在设计店招店招背景：店招左右两侧为店招的背景区域，在设计店招后还需要对店招的背景进行相应设计。后还需要对店招的背景进行相应设计。店铺店铺 logo logo：好的店铺：好的店铺 logo logo 更能深入人心，并逐渐形成更能深入人心，并逐渐形成品牌文化。品牌文化。收藏和关注图标：在店招中加入店铺收藏和关注图标的链收藏和关注图标：在店招中加入店铺收藏和关注图标的链接，可以留着更多潜在客户
14、。接，可以留着更多潜在客户。其他：在店招中还可以添加优惠券、热卖商品、活动公告其他：在店招中还可以添加优惠券、热卖商品、活动公告和关键字搜索等。和关键字搜索等。6.2.1 6.2.1 绘制店招形状和添加文字绘制店招形状和添加文字 默认店招模块的尺寸为默认店招模块的尺寸为 950 950120120像素，下面通过实例来介像素，下面通过实例来介绍如何制作店招，其具体操作步骤如下。绍如何制作店招，其具体操作步骤如下。l STEP 1 STEP 1 新建一个尺寸为新建一个尺寸为 950 950120 120 像素、分辨率为像素、分辨率为 72 72 像素像素 /英寸的的空白文件。英寸的的空白文件。l
15、STEP 2 STEP 2 将背景填充为淡黄色（将背景填充为淡黄色（RGB RGB：251,242,169251,242,169），然后），然后将素材文件将素材文件“logo.png”“logo.png”拖到到图像文件中，按【拖到到图像文件中，按【Ctrl+TCtrl+T】组合键等比例缩放大小，将组合键等比例缩放大小，将 logo logo 放在店招左侧，如图放在店招左侧，如图 6-11 6-11 所示。所示。图图 6-11l STEP 3 STEP 3 选择工具箱中的直线工具绘制竖线，设置填充颜选择工具箱中的直线工具绘制竖线，设置填充颜色为色为 logo logo 中文字的颜色（利用吸管工具
16、吸取颜色），如中文字的颜色（利用吸管工具吸取颜色），如图图 6-12 6-12 所示。所示。l STEP 4 STEP 4 选择工具箱中的横排文字工具，在竖线右侧输出选择工具箱中的横排文字工具，在竖线右侧输出文字，并设置字体为文字，并设置字体为“微软雅黑微软雅黑”，颜色同为之前的红色，颜色同为之前的红色，按【按【Ctrl+TCtrl+T】组合键缩放文字大小，如图】组合键缩放文字大小，如图 6-13 6-13 所示。所示。图图 6-12 图图 6-13l STEP 5 STEP 5 选择工具箱中的圆角矩形工具，在其工具属性栏选择工具箱中的圆角矩形工具，在其工具属性栏上设置半径为上设置半径为“20
17、”“20”像素，然后在文字下方绘制一个圆角像素，然后在文字下方绘制一个圆角矩形。选择工具箱中的自定形状工具，选择心形形状并在矩形。选择工具箱中的自定形状工具，选择心形形状并在圆角矩形上绘制心形，对齐后合并这两个形状图层。在工圆角矩形上绘制心形，对齐后合并这两个形状图层。在工具属性栏上单击具属性栏上单击“路径操作路径操作”按钮按钮 ，在弹出的下拉菜，在弹出的下拉菜单中选择单中选择“排除重叠形状排除重叠形状”命令，得到如图命令，得到如图 6-14 6-14 所示的所示的效果。效果。图图 6-14l STEP 6 STEP 6 在圆角矩形上输入文字，设置字体为在圆角矩形上输入文字，设置字体为“微软雅
18、黑微软雅黑”，颜色为白色，并调整文字大小，然后打开颜色为白色，并调整文字大小，然后打开“字符字符”面板调整面板调整文字的字符间距，调整后的效果如图文字的字符间距，调整后的效果如图 6-15 6-15 所示。所示。l STEP 7 STEP 7 选择工具箱中的椭圆工具绘制一个红色的椭圆，然选择工具箱中的椭圆工具绘制一个红色的椭圆，然后将素材文件后将素材文件“1.png”“1.png”拖动到图像文件中，调整位置使新拖动到图像文件中，调整位置使新添素材在椭圆形状的左侧，如图添素材在椭圆形状的左侧，如图 6-16 6-16 所示。所示。图图 6-15图图 6-16l STEP 8 STEP 8 输入商
19、品文字，并设置字体和颜色，然后在文字输入商品文字，并设置字体和颜色，然后在文字下绘制白色圆角矩形，并输入文字，如图下绘制白色圆角矩形，并输入文字，如图 6-17 6-17 所示。所示。图图 6-17l STEP 9 STEP 9 选择这一整块涉及的图层，按【选择这一整块涉及的图层，按【Ctrl+GCtrl+G】组合键】组合键将这些图层都放在一个组中，然后在图像上按【将这些图层都放在一个组中，然后在图像上按【AltAlt】键】键不放拖动复制一组图像，更改里面的素材图片和文字，如不放拖动复制一组图像，更改里面的素材图片和文字，如图图 6-18 6-18 所示。所示。图图 6-18l STEP 10
20、 STEP 10 选择圆角矩形工具，在工具属性栏中设置半径为选择圆角矩形工具，在工具属性栏中设置半径为 5 5 像素，然后绘制一个白色的圆角矩形，描边为像素，然后绘制一个白色的圆角矩形，描边为 1 1 像素像素的红色，如图的红色，如图 6-19 6-19 所示。所示。l STEP 11 STEP 11 使用圆角矩形工具和椭圆工具绘制放大镜图标，使用圆角矩形工具和椭圆工具绘制放大镜图标，无填充描边为红色的无填充描边为红色的 1 1 像素，然后合并这两个形状图层，像素，然后合并这两个形状图层，并按【并按【Ctrl+TCtrl+T】组合键旋转形状，如图】组合键旋转形状，如图 6-20 6-20 所示
21、。所示。图图 6-19 图图 6-20l STEP 12 STEP 12 新建一个透明的空白文件，使用圆角矩形工具绘新建一个透明的空白文件，使用圆角矩形工具绘制一个圆角矩形，在制一个圆角矩形，在“属性属性”面板中设置只有右上角一个面板中设置只有右上角一个圆角，然后使用钢笔工具添加锚点并调整各锚点的位置，圆角，然后使用钢笔工具添加锚点并调整各锚点的位置，如图如图 6-21 6-21 所示。所示。图图 6-21l STEP 13 STEP 13 使用钢笔工具绘制形状路径，合并形状图层后在使用钢笔工具绘制形状路径，合并形状图层后在工具属性栏中设置排除重叠形状，然后合并形状组件。再工具属性栏中设置排除
22、重叠形状，然后合并形状组件。再使用椭圆工具绘制圆形形状，合并这几个形状图层，在工使用椭圆工具绘制圆形形状，合并这几个形状图层，在工具属性栏中设置合并形状组件，得到如图具属性栏中设置合并形状组件，得到如图 6-22 6-22 所示的图所示的图标。标。图图 6-22l STEP 13 STEP 13 将绘制的形状图标拖动到图像文件中，然后缩放将绘制的形状图标拖动到图像文件中，然后缩放图标放置在合适位置，在图标后面输入文字，并设置合适图标放置在合适位置，在图标后面输入文字，并设置合适的颜色和字体，如图的颜色和字体，如图 6-23 6-23 所示。所示。图图 6-236.2.36.2.3制作店招页头背
23、景制作店招页头背景 除了店招本身外，为了店铺的视觉美观性，还需要制作除了店招本身外，为了店铺的视觉美观性，还需要制作与店招背景保持一致的页头背景，其具体操作步骤如下。与店招背景保持一致的页头背景，其具体操作步骤如下。l STEP 1 STEP 1 打开制作的店招文件，删除除背景外所有的图层，打开制作的店招文件，删除除背景外所有的图层，选择选择“图像图像/画布大小画布大小”命令，打开命令，打开“画布大小画布大小”对话对话框，在对话框中单击框，在对话框中单击 按钮，设置宽度为按钮，设置宽度为 1920 1920像素，高像素，高度为度为 150 150像素，如图像素，如图 6-24 6-24所示。所
24、示。图图 6-24l STEP 2 STEP 2 单击单击 按钮，首先按【按钮，首先按【Ctrl+RCtrl+R】组合键显示标】组合键显示标尺，然后拖出参考线到店招的边缘，吸取店招的背景颜色，尺，然后拖出参考线到店招的边缘，吸取店招的背景颜色，填充整个背景，取消店招图层显示，填充效果如图填充整个背景，取消店招图层显示，填充效果如图 6-25 6-25 所示。所示。图图 6-25l STEP 3 STEP 3 在背景底部绘制在背景底部绘制 30 30 像素高的红色矩形（后期导像素高的红色矩形（后期导航的位置），如图航的位置），如图 6-26 6-26 所示。所示。图图 6-26l STEP 4
25、STEP 4 合并所有图层，将背景图层转换为普通图层，然合并所有图层，将背景图层转换为普通图层，然后框选参考线中间的图像，按【后框选参考线中间的图像，按【DeleteDelete】键删除，最后将】键删除，最后将其存储为其存储为 png png 格式的文件，如图格式的文件，如图 6-27 6-27 所示。所示。图图 6-27 导航是顾客浏览店铺的重要通道，可以增加顾客对店铺导航是顾客浏览店铺的重要通道，可以增加顾客对店铺的深度查看，清晰明了且富有个性化的导航，对提高店铺的的深度查看，清晰明了且富有个性化的导航，对提高店铺的转化率和销售十分重要。导航除了店招下面高转化率和销售十分重要。导航除了店招
26、下面高 30 30 像素的店像素的店招导航外，还可以制作悬浮活动导航方便顾客购物。招导航外，还可以制作悬浮活动导航方便顾客购物。下面通过下面通过 Photoshop Photoshop 制作零食店铺的店招导航和悬浮制作零食店铺的店招导航和悬浮活动导航来具体介绍导航的制作方法，最终效果如图活动导航来具体介绍导航的制作方法，最终效果如图 6-28 6-28 所示。所示。图图 6-28 导航的主要作用是列出店铺的分类信息，选择不同的分类导航的主要作用是列出店铺的分类信息，选择不同的分类可以进行不同的商品页面，淘宝店铺中的导航是默认存在且不可以进行不同的商品页面，淘宝店铺中的导航是默认存在且不可删除的
27、。可删除的。导航的设置并不是越多越好，要结合店铺的实际运营需要。导航的设置并不是越多越好，要结合店铺的实际运营需要。店招导航位于店铺店招下方，宽度同店招相同，为店招导航位于店铺店招下方，宽度同店招相同，为 30 30 像素，像素，淘宝店铺的导航的文字信息部分建议在淘宝店铺的导航的文字信息部分建议在 950 950 像素以内；活动像素以内；活动导航的尺寸建议选择宽度小于导航的尺寸建议选择宽度小于 200 200 像素、高度小于像素、高度小于 600 600 像素，像素，图片格式为图片格式为 jpg jpg、pngpng、gifgif。在设计导航时，需要注意以下几个方面。在设计导航时，需要注意以下
28、几个方面。导航栏的类别要明确，使顾客一目了然。导航栏的类别要明确，使顾客一目了然。导航的文字与背景颜色要区分开。导航的文字与背景颜色要区分开。导航和店招的色彩搭配上要统一，不能过于花哨。导航和店招的色彩搭配上要统一，不能过于花哨。6.3.1 6.3.1 制作店招导航制作店招导航 在之前已经制作了包含导航底纹的页头背景，因此可以在之前已经制作了包含导航底纹的页头背景，因此可以直接打开直接打开“店招店招.psd”.psd”文件来添加导航列表，其具体操作步文件来添加导航列表，其具体操作步骤如下。骤如下。l STEP 1 STEP 1 打开打开“店招店招.psd”.psd”文件，将画布大小更改为文件，
29、将画布大小更改为 150 150 像素宽，然后在店招下方绘制一个红色的矩形，如图像素宽，然后在店招下方绘制一个红色的矩形，如图 6-29 6-29 所示。所示。图图 6-29l STEP 2 STEP 2 拖出参考线将导航进行等比例划分为拖出参考线将导航进行等比例划分为 9 9 份，分别份，分别输入文字并设置文字的字体、颜色等，如图输入文字并设置文字的字体、颜色等，如图 6-30 6-30 所示。所示。图图 6-30l STEP 3 STEP 3 在导航的最右侧绘制圆角矩形和心形形状，合并在导航的最右侧绘制圆角矩形和心形形状，合并形状图层后在工具属性栏设置排除重叠形状，合并形状组形状图层后在工
30、具属性栏设置排除重叠形状，合并形状组件后输入文字，并设置字体属性，如图件后输入文字，并设置字体属性，如图 6-31 6-31 所示。所示。图图 6-31l STEP 4 STEP 4 使用直线工具沿参考线绘制直线，为该形状图层使用直线工具沿参考线绘制直线，为该形状图层添加图层蒙版，选择工具箱中的渐变工具，设置渐变色为添加图层蒙版，选择工具箱中的渐变工具，设置渐变色为黑色、白色、黑色，按【黑色、白色、黑色，按【ShiftShift】键沿直线拖动，得到上】键沿直线拖动，得到上下透明的直线效果，如图下透明的直线效果，如图6-32 6-32 所示。所示。l STEP 5 STEP 5 复制直线分别间隔
31、各个导航类别，隐藏参考线后复制直线分别间隔各个导航类别，隐藏参考线后的效果如图的效果如图 6-33 6-33 所示。所示。图图 6-32 图图 6-336.2.36.2.3制作活动导航制作活动导航 活动导航的最大作用便是在顾客浏览店铺首页时，无论活动导航的最大作用便是在顾客浏览店铺首页时，无论在什么位置都能根据活动导航的列表找到需要的商品类别，在什么位置都能根据活动导航的列表找到需要的商品类别，下面为店铺制作活动导航，其具体操作步骤如下。下面为店铺制作活动导航，其具体操作步骤如下。l STEP 1 STEP 1 新建一个尺寸为新建一个尺寸为 180 180500 500 像素，分辨率为像素，分
32、辨率为 72 72 像像素素/英寸的的空白文件。英寸的的空白文件。l STEP 2 STEP 2 使用圆角矩形工具绘制一个淡黄的同画布大小相使用圆角矩形工具绘制一个淡黄的同画布大小相同的圆角矩形，然后在绘制一个稍微小一些的圆角矩形，同的圆角矩形，然后在绘制一个稍微小一些的圆角矩形，并设置描边为并设置描边为 2 2 像素的红色，无填充颜色，删除背景图像素的红色，无填充颜色，删除背景图层后的效果如图层后的效果如图 6-34 6-34 所示。所示。l STEP 3 STEP 3 在下方绘制一个红色的圆形形状，将该形状图层在下方绘制一个红色的圆形形状，将该形状图层放在圆角矩形放在圆角矩形 1 1 形状
33、图层的上方，将鼠标指针移动到这形状图层的上方，将鼠标指针移动到这两个形状图层之间，并按【两个形状图层之间，并按【AltAlt】键建立剪贴蒙版，如图】键建立剪贴蒙版，如图 6-35 6-35 所示。所示。l STEP 4 STEP 4 在圆形形状上绘制箭头白色的箭头图标，然后输在圆形形状上绘制箭头白色的箭头图标，然后输入文字，并设置字体颜色和大小，如图入文字，并设置字体颜色和大小，如图 6-36 6-36 所示。所示。图图 6-34 图图 6-35 图图 6-36l STEP 5 STEP 5 打开素材文件打开素材文件“2.png”“2.png”和和“叶子叶子.psd”.psd”，将需要，将需要
34、的素材拖动到图像文件中，分别调整期大小和位置，如图的素材拖动到图像文件中，分别调整期大小和位置，如图 6-37 6-37 所示。所示。l STEP 6 STEP 6 在素材图像图层下方绘制红色的矩形形状，然后输在素材图像图层下方绘制红色的矩形形状，然后输入文字，如图入文字，如图 6-38 6-38 所示。所示。l STEP 7 STEP 7 复制矩形和文字，然后分别更改文字内容即可，如复制矩形和文字，然后分别更改文字内容即可，如图图 6-39 6-39 所示。所示。图图 6-37 图图 6-38 图图 6-39l STEP 8 STEP 8 使用矩形工具和椭圆工具绘制矩形和圆形图形，并合使用矩
35、形工具和椭圆工具绘制矩形和圆形图形，并合并形状图层，然后输入优惠券的文字，如图并形状图层，然后输入优惠券的文字，如图 6-40 6-40 所示。所示。l STEP 9 STEP 9 绘制圆角矩形，设置颜色为蓝色，新建图层，使用画绘制圆角矩形，设置颜色为蓝色，新建图层，使用画笔工具绘制较浅的蓝色，然后为其建立剪贴蒙版，最后在按钮笔工具绘制较浅的蓝色，然后为其建立剪贴蒙版，最后在按钮上输入上输入 文字即可，如图文字即可，如图 6-41 6-41 所示。所示。l STEP 10 STEP 10 拖动素材文件拖动素材文件“旺旺图标旺旺图标.png”.png”到图像文件中，调到图像文件中，调整位置和大小
36、，然后再添加一些素材叶子即可，如图整位置和大小，然后再添加一些素材叶子即可，如图 6-42 6-42 所所示。示。图图 6-40 图图 6-41 图图 6-42 海报海报/轮播图一般位于店铺店招导航的下方，是顾客轮播图一般位于店铺店招导航的下方，是顾客进入店铺时在首页中看到最醒目的区域，占有较大的面积。进入店铺时在首页中看到最醒目的区域，占有较大的面积。海报海报/轮播图的设计会根据店铺当时的活动来决定海报风轮播图的设计会根据店铺当时的活动来决定海报风格，可以是季节性的海报格，可以是季节性的海报/轮播图，也可以是促销信息的轮播图，也可以是促销信息的海报海报/轮播图。轮播图。下面通过制作零食店铺的
37、海报来具体介绍海报的制作方下面通过制作零食店铺的海报来具体介绍海报的制作方法，最终效果如图法，最终效果如图 6-43 6-43 所示。所示。图图 6-43 轮播图是由多张海报进行循环播放的，是多张海报的集轮播图是由多张海报进行循环播放的，是多张海报的集合，因此这里主要介绍海报的相关内容。合，因此这里主要介绍海报的相关内容。1.1.海报主题海报主题 在制作店铺首页海报之前，需要先确定海报的主题，如在制作店铺首页海报之前，需要先确定海报的主题，如新品上市、活动促销等。确定主题后，才能围绕主题来确定新品上市、活动促销等。确定主题后，才能围绕主题来确定文案和图片信息等。海报的设计主要包括背景、文案和产
38、品文案和图片信息等。海报的设计主要包括背景、文案和产品图片等，这里需要注意的一点是海报的文字不易过多，可围图片等，这里需要注意的一点是海报的文字不易过多，可围绕主题提炼一些重点文字即可，且要注意文字的主次关系，绕主题提炼一些重点文字即可，且要注意文字的主次关系，达到能让顾客在浏览过程中轻易抓住画面的重要信息的目的，达到能让顾客在浏览过程中轻易抓住画面的重要信息的目的，如图如图 6-44 6-44 所示。所示。图图 6-442.2.海报板式构图海报板式构图 海报的板式构图有多种，但都遵循一个原则：要在视觉海报的板式构图有多种，但都遵循一个原则：要在视觉上平稳相等，使其整体和谐，突出主题。下面对常
39、见的几种上平稳相等，使其整体和谐，突出主题。下面对常见的几种构图进行介绍。构图进行介绍。左右构图：该构图方式最为常见，一般分为左文右图或右左右构图：该构图方式最为常见，一般分为左文右图或右文左图这两种模式，如图文左图这两种模式，如图 6-45 6-45 所示。所示。图图 6-45 左右三分式构图：该种构图方式一般是中间为文字，海报左右三分式构图：该种构图方式一般是中间为文字，海报两边为图片，且在图片上可以大小不同，相比于左右构图两边为图片，且在图片上可以大小不同，相比于左右构图更具有层次感，如图更具有层次感，如图 6-46 6-46 所示。所示。图图 6-46 上下构图：该构图方式一般分为上图
40、下文或上文下图两种上下构图：该构图方式一般分为上图下文或上文下图两种模式，如图模式，如图 6-47 6-47 所示。所示。图图 6-47 其他构图：除了以上的构图方式外，还有底面构图和斜切其他构图：除了以上的构图方式外，还有底面构图和斜切构图等，底面构图一般是海报背景是图片，然后在上面添构图等，底面构图一般是海报背景是图片，然后在上面添加一个文字区域输入文字，如图加一个文字区域输入文字，如图 6-48 6-48 所示。斜切构图的所示。斜切构图的画面更加动感、时尚，具有设计感，但该种构图方式在设画面更加动感、时尚，具有设计感，但该种构图方式在设计上要注意画面的平衡感，且要符合阅读习惯，如图计上要
41、注意画面的平衡感，且要符合阅读习惯，如图6-49 6-49 所示。所示。图图 6-48 图图 6-493.3.配色配色 在海报设计中配色也是非常重要的，不同的配色会因遭在海报设计中配色也是非常重要的，不同的配色会因遭不同的视觉感受，且要符合店铺的整体风格。而对重要的文不同的视觉感受，且要符合店铺的整体风格。而对重要的文字信息需要用更突出的颜色来进行强调，以清晰的明暗对比字信息需要用更突出的颜色来进行强调，以清晰的明暗对比来传递画面信息。来传递画面信息。6.4.1 6.4.1 制作海报背景制作海报背景 在制作海报之前可以先从网上寻找灵感，然后再寻找需在制作海报之前可以先从网上寻找灵感，然后再寻找
42、需要的素材。下面制作零食店铺的海报背景，其具体操作步骤要的素材。下面制作零食店铺的海报背景，其具体操作步骤如下。如下。l STEP 1 STEP 1 打开素材文件打开素材文件“海报背景海报背景.psd”.psd”，将画布大小更，将画布大小更改为改为 1920 1920850 850 像素的大小（这里的多出的高度用于放置像素的大小（这里的多出的高度用于放置优惠券），如图优惠券），如图 6-50 6-50 所示。所示。l STEP 2 STEP 2 分别调整海报背景中各个元素的位置，注意留出优分别调整海报背景中各个元素的位置，注意留出优惠券的位置，如图惠券的位置，如图 6-51 6-51 所示。所
43、示。图图 6-50 图图 6-51l STEP 3 STEP 3 在图层最上方新建一个在图层最上方新建一个“色相色相/饱和度饱和度”调整图调整图层，在打开的层，在打开的“属性属性”面板中调整图像的色相和饱和度，面板中调整图像的色相和饱和度，如图如图 6-52 6-52 所示。所示。l STEP 4 STEP 4 使用钢笔工具扣取背景图上两侧的树叶，复制图层使用钢笔工具扣取背景图上两侧的树叶，复制图层后将其放置在草坪图层的上方，并擦除多余的图像，如图后将其放置在草坪图层的上方，并擦除多余的图像，如图 6-53 6-53 所示。所示。l STEP 5 STEP 5 为右侧复制出的叶子图层添加图层蒙
44、版，然后使用为右侧复制出的叶子图层添加图层蒙版，然后使用渐变工具拉出下面透明的效果，如图渐变工具拉出下面透明的效果，如图 6-54 6-54 所示。所示。图图 6-52图图 6-53 图图 6-54l STEP 4 STEP 4 打开素材文件打开素材文件“干果干果.psd”.psd”，将抠出的图像拖动，将抠出的图像拖动到图像文件中，并调整其大小和位置，然后将草的图像放到图像文件中，并调整其大小和位置，然后将草的图像放在合适位置，并擦除多余的图像，如图在合适位置，并擦除多余的图像，如图 6-55 6-55 所示。所示。l STEP 5 STEP 5 按【按【CtrlCtrl】键单击干果图层缩略图
45、将其载入选区，】键单击干果图层缩略图将其载入选区，然后在该图层下方新建一个图层，选择然后在该图层下方新建一个图层，选择“选择选择/修改修改/扩展扩展”命令，在打开的对话框中设置选区扩展为命令，在打开的对话框中设置选区扩展为 3 3 像素，像素，然后使用深色填充选区，如图然后使用深色填充选区，如图 6-56 6-56 所示。所示。图图 6-55 图图 6-566.4.2 6.4.2 制作海报主题文字制作海报主题文字 编辑好海报的背景后，下面为海报制作主题文字，其具编辑好海报的背景后，下面为海报制作主题文字，其具体操作步骤如下。体操作步骤如下。l STEP 1 STEP 1 新建图层组，将组名更改
46、为文字，使用横排文字工新建图层组，将组名更改为文字，使用横排文字工具输入文字，设置字体后将文字图层转换为工作路径，然具输入文字，设置字体后将文字图层转换为工作路径，然后路径工具对路径进行编辑，如图后路径工具对路径进行编辑，如图 6-57 6-57 所示。所示。l STEP 2 STEP 2 按【按【Ctrl+EnterCtrl+Enter】组合键将路径载入选区，新建图】组合键将路径载入选区，新建图层，使用橙色到黄色的径向渐变对其进行填充，如图层，使用橙色到黄色的径向渐变对其进行填充，如图 6-58 6-58 所示。所示。图图 6-57 图图 6-58l STEP 3 STEP 3 在文字下方新
47、建图层，将选区扩展在文字下方新建图层，将选区扩展 6 6 像素，然后像素，然后填充为深棕色，并按方向键微调位置，如图填充为深棕色，并按方向键微调位置，如图 6-59 6-59 所示。所示。l STEP 4 STEP 4 使用相同的方法输入其他的文字，如图使用相同的方法输入其他的文字，如图 6-60 6-60 所所示。示。图图 6-59 图图 6-60l STEP 5 STEP 5 调整文字的组合关系，然后再对其他相关图层进调整文字的组合关系，然后再对其他相关图层进行调整，如图行调整，如图 6-61 6-61 所示。所示。l STEP 6 STEP 6 在所有文字图层上方新建图层，然后钢笔工具绘
48、在所有文字图层上方新建图层，然后钢笔工具绘制路径并填充为白色，为文字添加高光，如图制路径并填充为白色，为文字添加高光，如图 6-62 6-62 所示。所示。图图 6-61 图图 6-62l STEP 7 STEP 7 新建图层，绘制矩形并填充颜色，然后按【新建图层，绘制矩形并填充颜色，然后按【Ctrl+TCtrl+T】组合键进入变换状态，单击鼠标右键，在弹出的快捷菜单组合键进入变换状态，单击鼠标右键，在弹出的快捷菜单中选择中选择“变形变形”命令，对矩形进行变形，如图命令，对矩形进行变形，如图 6-63 6-63 所示。所示。l STEP 6 STEP 6 在矩形上输入文字，并设置字体和颜色，然
49、后在工在矩形上输入文字，并设置字体和颜色，然后在工具属性栏中单击具属性栏中单击“创建文字变形创建文字变形”按钮，在打开的对话框按钮，在打开的对话框中选择中选择“旗帜旗帜”选项，并设置变形参数，如图选项，并设置变形参数，如图 6-64 6-64 所示。所示。图图 6-63 图图 6-646.4.3 6.4.3 制作优惠券制作优惠券 优惠券一般位于海报的下方，也可以直接和海报一起制优惠券一般位于海报的下方，也可以直接和海报一起制作。下面在海报中制作优惠券，其具体操作步骤如下。作。下面在海报中制作优惠券，其具体操作步骤如下。l STEP 1 STEP 1 新建图层组，将组名更改为优惠券，使用钢笔工新
50、建图层组，将组名更改为优惠券，使用钢笔工具绘制一个不规则的矩形，载入选区后新建图层填充为深具绘制一个不规则的矩形，载入选区后新建图层填充为深棕色，然后收缩选区新建图层填充为橙黄，如图棕色，然后收缩选区新建图层填充为橙黄，如图 6-65 6-65 所所示。示。l STEP 2 STEP 2 双击橙黄矩形的图层，打开双击橙黄矩形的图层，打开“图层样式图层样式”对话框，对话框，选中选中“内发光内发光”复选框，在右侧设置内发光的参数，如图复选框，在右侧设置内发光的参数，如图 6-66 6-66 所示。所示。图图 6-65 图图 6-66l STEP 3 STEP 3 单击单击“确定确定”按钮后的效果如
