淘宝装修教程总汇 | 专注【淘宝装修】与【淘宝运营】

空沙发免费模板网_淘宝装修模板,代码,教程,淘宝运营,淘宝大学

当前位置: 主页 > 淘宝装修教程 > 图文教程 >

如何用photoshop来制作淘宝店铺装修模板图文教程【一】

时间:2015-08-16 22:00 作者:空沙发免费模板网www.kongshafa.com 点击:
模板介绍
     如何用photoshop来制作淘宝店铺装修模板图文教程
     近来有很多访客来问小麦,怎么自己做淘宝店铺装修模板呢?恩,自己动手做模板很好,但是有点复杂。如果你是懒人,又不想自己用photoshop来做,可以试试一键安装懒人模板,一键安装,10分钟完成店铺安装。
     下面分享如何用photoshop切片工具来制作淘宝店铺装修模板。下面以专业版旺铺为例。文章较长,耐心学习噢。
     专业版旺铺,可以实现通栏,即950像素的,宽度,就是横着的宽度。
1.打开photoshop,新建宽度为950px,高度任意,小麦以870px为例。
photoshop新建专业版旺铺950宽度尺寸

2.用photoshop,按照一排3个宝贝主图,分两个,也可以多个设计,按个人喜好。头部为栏目标题【2015夏季新品】。
用ps制作好一个模板

3.点击photoshop——视图——新建参考线,我们需要利用参考线来吧整个图片,进行切片,分成7个部分,头部栏目标题1个6个宝贝图
用photoshop新建参考线

4.新建2条水平参考线2条垂直参考线
新建水平参考线2两条,垂直参考线3条

5.点击【移动】工具,吧鼠标放到参考线上,鼠标图标发生变化,就可以拖动参考线了,向右拖动垂直参考线,向下拖动水平参考线
拖动参考线

将参考线拖动成下图的样子
将参考线拖动成下图的样子

6.选择【切片工具】——基于参考线的切片
【切片工具】——基于参考线的切片

7.切片完成,出现下面9个部分,但是我们需要的是7个,【2015夏季新品】需要为一个整体。看第8步。
切片完成,出现下面9个部分

8.选择好切片工具
选择切片选择工具

点击【1】号切片,按住键盘中的【shift】键,选择【2】,【3】,如下图,【1】【2】【3】都同时选择了
将切片工具吧切片组合

右击鼠标,选择【组合切片】,【1】【2】【3】为一体了。
右击鼠标,选择【组合切片】,【1】【2】【3】为一体了。

如下图显示,7个部分,1个栏目标题,6个宝贝主图。如下图显示,即成功一半
切片成功

9.点击【1】切片,鼠标右击【编辑切片选项】。
编辑切片选项
在【URL】中输入【对应的宝贝地址】,目标为【新窗口打开】,代码为【_blank】,依次类推,将7个部分全部设置。
(设置【新窗口打开】,可以让访客多一张网页,关闭了宝贝,还可以看下你的店铺首页,增加购买率)
输入网址

10.保存为web格式。
保存为web格式

11.首先将预览图缩小,然后点击【1】号切片选择,【jpeg】格式,依次点击余下切片,设置【jpeg】
选择jpeg格式保存

保存为【html和图像】,即网页代码和图片。
保存为【html和图像】,即网页代码和图片。

12.保存完,出现一个图片文件,和一个网页文件,网页文件就是我们需要的代码。可以打开网页文件,点击下,看下效果。
出现一个图片文件,和一个网页文件。

【images】里出现7个图,即1个栏目标题,6个宝贝主图


明天发布如何用photoshop来制作淘宝店铺装修模板图文教程【二】,教大家,如何把图片传到自己的淘宝空间里,然后获取图片地址,将代码中的图片地址替换,再吧代码安装到你的淘宝店铺首页,完成安装。

点击查看:自己DIY制作淘宝店铺装修模板教程【二】 
------分隔线----------------------------
栏目列表
推荐内容
tag列表