五招淘宝店铺装修让你店铺活起来

时间:2012-09-13 09:20 来源:未知 作者:地瓜 浏览: 1151

先看一下面的一张图,以前我也很羡慕大卖家的这种装修,别急我们新手也可以做到。

淘宝店铺装修

淘宝网店首页的装修

(1)打开PS CS5其他版本也可以,新建一个图层宽1440以上高度任意设置,我现在设置的是1440和300的 命名为图层1,填充为想要的颜色。

淘宝店铺装修
淘宝店铺装修

(2)淘宝规定首页大图基本上宽950PX的高度任意,我们算一下怎么能把1440PX以上的怎么做成950PX的,告诉大家一个小公式:1440-950=490 490/2=245 接下来新建一个新图层245*300命名为图层2,填充颜色任意色,把图层2拖到图层一中以后再复制图层2命名为图层3,如图设置好

淘宝店铺装修

把你想要做的素材加进去如图

淘宝店铺装修

(3)在菜单下选择视图-标尺新建两个参考线如图,选择工具栏里的裁剪工具或快捷键C

淘宝店铺装修

裁剪的选区做好按下Enter键 一个,这一步目的是建立950*300的图片命名为图层4,做如下图

淘宝店铺装修

这样就做好啦 存储成WEB和设备所以格式,上传到淘宝空间里。

(4)接下来我们来做下面这个图

淘宝店铺装修

在图层4的基础上后退一步,用矩形工具建立选区填充白色

淘宝店铺装修

得到下图

淘宝店铺装修

把两边的图层删除2和3得到下面命名为图层5

淘宝店铺装修

存储即可

(3)登陆淘宝我是卖家-店铺管理-店铺装修-模板-背景设置-页面背景设置-选择不平铺-居中把图层5在背景图片上传注意在100KB以内点击保存接下来在首页装修选择自定义页面把图层4就是你上传到淘宝图片加上链接即可.

二 抠图

论坛里好多前辈们讲了好多抠图的方法,例如魔术棒 背景橡皮擦 钢笔 通道等抠图的方法,但是我常用的抠图方法是快速选择工具,在用调整边缘,这种方法抠图效率是很快的啊 ,这是PS CS5的新功能

1 打开一张图片如图

淘宝店铺装修

找到快速选择工具或快捷键W 在人物身上拖动得到选区如下

淘宝店铺装修

这个选区已经很不错啦 如果多选或是没选到可以用下面的工具进行调整见下图

淘宝店铺装修

有一个带+号的是增加选区 –号的可以减小选区进行调整,做好以后点击调整边缘会出现下面一个对话框

淘宝店铺装修

在这个对话框中有四个部分 分别是 视图模式 边缘检测 调整边缘 输出

现在分别说一下他们的用途 视图模式是用来观察你抠图在几个背景下的抠图效果

淘宝店铺装修

边缘检测里面 有个智能半径是用来调整区域大小的 在他的上方有个像画笔一样的标准里面有两个工具,一个是调整半径工具和抹除半径工具。一个图的质量扣的好不好 主要在这两个工具的应用,调整半径工具是用来擦出边缘的一些杂色,抹除半径工具是用来调整被调整工具擦出掉的进行还原,具体操作一下就能感受到啦,

调整边缘:里羽化和平滑等四个工具可以根据时间情况进行调整。

输出:里面有个净化背景色 ,让抠图的边缘更能自然的过度,一般输出;都选择新建带有图层蒙版的图层 这样方便调整。等等很简单只要操作一下就行啦。

三 PS排版如图

淘宝店铺装修

这是我的排版大家可以随便排 排好以后就是给这些图片加链接,把上面的图片上传到淘宝空间,打开Dreamweaer8 大家别担心自己不会这个软件我也不太会,就会这一点就能应付淘宝店铺简单的装修就行啦。

打开以后会出现一个这样的页面选择HTML这个会出现这个页面

淘宝店铺装修
淘宝店铺装修

选择设计会出下面的页面

在上面菜单中选择插入——图像 会出现这个页面

淘宝店铺装修

在URL这个是图片地址 在淘宝空间刚刚上传的那个图片里复制链接点一下,在URL中全选粘贴以后,其他的都不要问点击确定

淘宝店铺装修

会出现这样的一个页面 下面有个属性栏 箭头傍边有三个工具是热点工具,点击矩形热点工具在要加链接的图片上拉一下会出现这种情况

淘宝店铺装修

在链接处加入链接即可 下面还有个地图MAP进行编一下号比如MAP1 MAP2 等等 这样做不会发生链接混乱

加好链接后点击代码会出现下面的页面

淘宝店铺装修

选择……进行拷贝一下,把这些代码如果你想放到店铺首页 在首页出添加一个自定义编辑 找到代码编辑把复制的代码放上去保存 发布就行啦。用这种方法可以制作店铺里的宝贝分类表 等其他的一下东西 我想你亲会懂得。

四 Fireworks CS5 切片

有些亲不喜欢一个大图好多链接怕影响顾客的体验度,哪好咱也有办法,把他们用切边工具切成一个一个的小图像就不会太影响客户的体验度啦。好多人会说PS中也要切片为什么不PS中的切边啊 我以前使用PS中的切片工具感觉不准确也不太好用没有FW好用啊 这个软件可以从网上下载一下。首先打开FW会出现这个界面,打开你要切的图片咱们还接着上面的那个图片来

淘宝店铺装修
淘宝店铺装修

在工具箱中找到切片工具如图<注意要仔细点尽量和红色重合这样更精准>

淘宝店铺装修

这样切片做好了接下来就是保存啦 ,按下CTRL+A 对切片进行全选,选择导出会出现一个这样的页面

淘宝店铺装修

在导出中选择 HTML和图像 就可以保存啦。

打开存储的文件会出现这些图片打开Dreamweaer8在菜单中找到 这个图片打开

淘宝店铺装修

这个打开会出现在这样一个页面

淘宝店铺装修

点击一下代码从……进行拷贝一下,在店铺首页建立一个自定义区如图

淘宝店铺装修

在点一下代码编辑会变成这样一个页面

淘宝店铺装修

点击一下逐个插入图片,如图

为了省时间就插入一张图片,不过大家可以动手试试,

亲这些都会拉 你还担心不会做宝贝详情中的链接吗?店铺首页的装修吗?呵呵呵都应该会拉。

呵呵 用上面的方法可以做店招 LOGO 海报等一下装修和价链接让你的店铺更好,订单更多

觉得本文有用?

精彩评论

推荐阅读

  • 淘宝店铺装修在线制作

    很多新手朋友对ps并不是很懂,或者说一窍不通,那么想制作一些自己的店招,分类,店标等等怎么办呢?淘宝学堂装修...

  • 如何让店铺视觉直接提升销售额

    最近碰到很多的卖家都在纠结自己的店铺视觉,总感觉自己的店铺风格不是自己需要的,我发现很多店主还是在凭自己的...