淘宝天猫美工全屏店招的设计制作和装修讲解

淘宝天猫美工全屏店招的设计制作和装修讲解

讲解一个全屏店招前期在photoshop设计制作+后期在智能旺铺后台装修上传的操作。内容来源图书《淘宝店铺装修全攻略》作者孔德川。

默认店招的模块尺寸宽是950像素，高是120像素。店招下面的导航条宽度和店招一样，高度则是30像素（在设计的时候需要注意）。下面通过Photoshop软件来制作一个店招，然后通过旺铺后台，进行装修设置，效果如图所示。

打开Photoshop软件，执行“文件>新建”菜单命令，在弹出来的新建对话框中进行相关参数设置，如图所示。

按快捷键Ctrl+R在画布两端创建参考线，创建后的效果如图所示。

淘宝店铺全屏店招是的尺寸是1920像素，上一步创建的尺寸是950像素，接下来就要增加970像素。执行“图像>画布大小”菜单命令，修改宽度为1920像素，如图所示。点击确定之后，就是一个1920像素×120像素的店招了。

纯白色的背景过于单调，可以修改为银灰色，与白色背景有所区别即可。把店铺LOG素材导入进来，调整合适的位置和大小，最终效果如图所示。

接下来开始制作LOGO下方的“关注我们”按钮。使用“圆角矩形工具”创建一个半径为20像素的圆角矩形，填充为红色。在工具箱中选择“自定义形状工具”，选择心形的形状，创建绘制一个心形，颜色为白色，同时把文字“关注我们”也进行创建，如图所示。

接下来就可以开始创建优惠券。使用工具箱中的“矩形工具”创建一个矩形，填充颜色为（R:250，G:230，B:200），优惠券背景矩形形状。

使用“横排文字工具”输入优惠券促销活动文字信息，修改文字颜色为红色，最终效果如图所示。

输入“立即领取”文字，创建红色矩形填充背景，最终效果如图所示。

把一个优惠券制作好之后，可以复制出多个优惠券，只需要把文字信息修改下即可，如图所示。复制出另外两个优惠券，修改文字内容并调整到合适的位置。

开始制作收藏按钮效果。创建一个灰色的背景矩形，然后创建倾斜的线段，旋转后放到合适的位置。一个收藏按钮背景形状制作效果如图所示。

输入文字“收藏本店”和相应英文内容，字体为黑体即可，如图所示

店招的最终效制作效果如图所示。制作完成后，存储为相应的图片格式即可。

前期设计好的店招后期要上传到网店当中，其中还有很多技巧方面的内容要学习，这节内容主要详细讲解如何把设计制作好的店铺装修到网店中来。

把制作好的店招图存储成JPEG或PNG格式上传到淘宝图片空间。

把素材上传到淘宝图片空间之后，就要应用到网店中了。进入淘宝旺铺装修后台，在“电脑页面装修”中选择店招模块，鼠标放在上面，点击右上角“编辑”命令，如图所示。

在弹出来的店铺招牌对口框中，招牌类型选择“默认招牌”，取消“是否显示店铺名称”后面的复选框，然后单击“选择文件”，如图所示。

选择“从淘盘选择”选项，找到店招图片所在的文件夹，然后选择图片素材，如图所示。因为之前已经把素材图片上传到了“图片空间”，而“图片空间”里的图片也都存在“淘盘”里，也就是淘宝云盘。

单击“保存”按钮，高度选择120像素，高于120像素会影响导航栏效果，如图所示。

这时，会发现950像素的店招两边显示的不完整，有空白的地方，如图4-67所示。

设置通栏店铺背景时要重新做一个背景图，然后在旺铺装修后台更换页头背景图就可以了。打开Photoshop软件，执行菜单“文件>新建”命令，设置宽度为50像素，高度为120像素，如图所示。

值得注意的是，宽度不用设置的太宽。在文件最底部创建一条参考线，然后执行“图像>画布大小”菜单命令，设置高度为150像素，定位设置向下，如图所示。

回到淘宝旺铺，吸取A部位店招背景颜色数值和B部位导航背景颜色数值，回到文件中，把吸取的颜色填充到参考线上面的背景中，如图所示。将页头存储成JPEG格式。

进入淘宝旺铺装修后台，选择“页头”，显示“页头背景”，在页头背景图点击“更换图片”，如图所示。

选择页头背景图片所在位置，单击“打开”，设置“背景显示”平铺类型，选择“背景对齐”方式，如图所示

单击“预览”按钮，这个时候已经设置成通栏店招效果了，最终效果如图所示

在Dreamweav软件中添加“关注我们”“店铺收藏”等链接。

制作好通栏店招之后，会发现店招图片上的“关注我们”“优惠券领取”，还有“收藏本店”需要添加相应的链接才可以使用。打开Dreamweav软件， 切换到拆分视图，把选中的代码信息，全部删掉，如图所示。

到淘宝图片空间选中店招图片，点击“复制代码”，如图所示。

把复制店招图片代码粘贴到Dreamweav拆分视图中的代码编辑视图，左边是代码，右边是店招图片效果，如图所示

在Dreamweav软件最底部，有添加热链接工具，如图所示。

在店招图片上，热链接，把要指定的位置在底部链接上粘贴上代码，目标打开方式选择_blank,如图所示。

用同样的方法把指定优惠券领取、搜藏店铺的代码逐一添加上去，如图所示。将复制代码到旺铺装修后台，店招模块。

在旺铺装修后台中，将店铺招牌的类型设置为“自定义招牌”，如图所示

在自定义店招对话框中选择“源码”，把Dreamweav软件中给店招添加的链接代码复制过来，然后点击确定，如图所示。

预览设置的内容或者“发布站点”，这时候会发现，店招图上添加的链接已经成功，最终效果如图所示。

最终设计和装修后的效果，如图所示。