教你如何做淘宝装修自定义的宝贝分类

时间:2011-08-12 09:52 来源:未知 作者:Zoro 浏览: 5539

偶然看到一个淘宝商城的宝贝分类做的很漂亮~而且是放在店铺中间的自定义位置~背景是很漂亮图片~分类一目了然,而且图片背景和店铺的整体装修风格融为一体,特别漂亮~所以就自己动手做了个宝贝分类的图片!

在这里和大家一起分享下整个的制作过程~

这个教程一共要用到两个编辑软件:Photoshop cs2 9.0和Dreamweaver 8 编写的整个制作过程,相信没有用过这两个软件的朋友也会很容易学会的~希望的这次付出可以帮到更多的朋友~另外的领一篇帖子“新手必看-如何制作漂亮的店铺和详情页左侧栏推广宝贝”确实帮到了一些朋友~这些朋友的鼓励也是写这篇帖子的动力~再次感谢他们!

好了下面开始我们的制作之旅吧~

一:首先打开我们的Photoshop,新建一个图像 尺寸为:900xp 278xp(的这个分类是放在通栏自定义页的,如果大家想放在店铺首页的话,尺寸要做成宽度:750的) 分辨率为72 颜色模式RGB 8位 背景内容 白色 如下图:

二:背景图片的制作:首先在百度图片里面找一张你想做分类背景的图片,然后下载保存,这里已经准备好了一张,然后就直接把这张图片放到photoshop里面编辑了~

1:在photoshop里打开我们准备好的图片~

这是准备的图片:我们把这张图片拖到我们新建那个对象中~方法是鼠标左键点住直接拖到新建的背景中就可以了~然后把图像调整成合适的大小就可以了~调整方法:ctrl+t 然后自己拖拉就可以了~

这是PHOTOSHOP里打开的状态

2:下面我们要做的就是在这张图片上把我们的宝贝分类文字打上去:

点击工具栏长条上面的一个“T”工具,然后在图片上要添加文字的地方点击一下,然后键盘输入文字就可以了~

展示下我做的

3:文字打好之后~我们把编辑好的图片合并图层,方法是在photoshop的顶部工具栏里有个图层,

合并好图层,下面我们要做的就是保存图片,储存为JPG图像,记住你储存的位置哦~

三:背景图片上传的图片空间:打开你的淘宝图片空间,把做好的图片上传到你的图片空间~

上传后是这个样子的:

图片上传好了之后,我们要把这个图片的链接复制下来,点击图片的链接就复制好了~

四:我们打开:Dreamweaver 8 新建一个HTML

然后我们先在建好的HTML里布局个表格~点击上面的布局,然后点布局表格~记住表格的尺寸就是你准备好的图片的尺寸900 278 的

在布局好的表格里面,我们来布置个单元格 尺寸也是900 278的

五:在布局好的 单元格里插入图像~这个图像就是我们做好的图片

点击上面的“插入”“图像”然后就出现了上面的那张图~在这里我们刚才复制的图片空间的图片地址就要用到了~

在我用红框框起来的地方粘帖你复制的图片地址,然后一直确定就OK了~

五:给图片添加热区,热区的意思就是这个地方可以插入链接,你一点这个地方就会打开你添加链接的地址~

添加热区的方法是:点击上图中地图下面的长方形,然后在你的分类文字上点住左键拉一下就会出现如上图的连衣裙上得框子,然后在下面链接的地方:填上你的宝贝分类中连衣裙的网络地址就OK了~

下面我们依次按照上面的方法把其他的热区都做好~链接都添加好~

这样我们的自定义分类就做好了~

六:安装代码:

1:在Dreamweaver 8中把你做好的HTML 代码复制下来

2:打开我们的淘宝店铺:点击店铺装修 然后在做下面 添加自定义模板

3:编辑自定义模板,把我们复制的代码粘帖到里面,保存就可以了~

4:发布我们的装修就OK了~

觉得本文有用?

精彩评论

推荐阅读

  • 淘宝店铺装修在线制作

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

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

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