多语言展示
当前在线:1601今日阅读:61今日分享:18

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

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

photoshop中文版软件

2

Dreamweaver中文版软件

3

淘宝智能旺铺操作后台

店招的设计制作
1

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

2

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

3

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

4

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

5

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

6

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

7

接下来就可以开始创建优惠券。使用工具箱中的“矩形工具”创建一个矩形,填充颜色为(R:250,G:230,B:200),优惠券背景矩形形状。使用“横排文字工具”输入优惠券促销活动文字信息,修改文字颜色为红色,最终效果如图所示。

8

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

9

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

10

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

11

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

店招的装修和上传
1

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

2

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

3

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

4

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

5

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

6

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

7

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

8

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

9

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

10

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

11

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

12

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

13

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

代码链接的安装
1

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

2

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

3

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

4

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

5

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

6

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

7

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

8

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

9

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

10

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

注意事项
1

注意photoshop软件设计尺寸

2

注意代码装修时的选择

3

装修后一定要记得测试

推荐信息