PS与DW制作仿拓展版的模板

时间:2011-06-01 10:48 来源:淘宝论坛 作者:Zoro 浏览: 3010

今天我要给大家讲的就是利用PS和DW制作一个仿拓展版的模板,我相信很多在淘宝开店的朋友都用的是标准版,而没有用拓展版,主要是拓展版太贵啊,用不起啊,现在生意这么难做,赚的钱还不够买旺铺的。 大家也都知道标准版与拓展版最基本的区别就是标准版比拓展版多了一条“楚河汉界”,就是说,标准版左侧栏和右边栏中间有一条界线,两边是分开的,无法添加通栏,而拓展版就可以,添加通栏以后店铺看起来就更加大方,有气派。这也是很多标准版卖家揪心的事情啊,到底该怎么办呢? 其实方法很简单,不需要有多少技术,更不需要对网页进行重新编写。

接下来我就给大家介绍一下,如?沃谱麽萃卣拱婺0澹?涫嫡飧龇椒ǔ?都虻ヅ叮??易龊弥?蟾?究床怀隼从?“楚河汉界”哦。有兴趣的朋友继续往下看哦!

今天我们要用到的软件有两个,一个就是强大的制图软件photoshop,和网页制作软件dreamweaver,其实我三篇帖子都是用的这两个软件。第一篇帖子中有他们的下载地址和免费使用的方法哦,我这里就不再写出来了。

三、PS制图

好了,不罗嗦了,接下来就进入实际操作过程了,首先我们打开PS软件,然后新建一个宽度为950px,宽度为800px(宽度自定义)的空白图层,颜色自定义,也可以是透明的。我这里建的是白色的。

新建好之后我们就要对其进行分割,把它分成均匀的小块,具体该分多大呢?大家想下,标准版的左侧栏宽度是190px,那我们这里就刚好平均分成5列,至于高度可自己根据具体情况而定,我这里分成了3行。我们可以利用新建参考线进行分割,视图→新建参考线,

注意,在填写新建参考线位置的时候单位是像素(px),不是厘米哦!我们分别建立水平和垂直的参考线,对新建的图层进行平均分割,下面是分割好后的图片

好了,分割好后,我们就要放入宝贝图片了,我们将事先准备好的宝贝图片拖动到相应的位置即可,对了,差点忘了,在标准版中首页推广页面的宝贝图片一般是160*160px,所以我们这里也把宝贝图片调成同样大小的像素,这样看起来跟其他的比较匹配,当然大家也可以根据自己的喜好进行设置哦。我们把所有宝贝都拖到分割好的图层中后,再每个宝贝下面可以利用文字工具输入宝贝的名字和价格。

这里我只做个范例,不一一输入宝贝名字和价格了,全部写好名字和价格之后,我们就要对其进行切片了,这里不能简单的把宝贝图片进行切片哦,这个图我们要分两次切哦,因为标准版的是不能放通栏的,所以我们要分开切片,首先我们要切左侧栏的,因为左侧栏宽度为190像素,我们刚好只切5列中的最左边一列就可以了,对了,因为我们要把图片分两次切片,所以我们最好先把这个图保存一下,以便第二次切片的时候不会丢失,保存好之后,我们就要先利用裁剪工具对图片进行裁剪,因为我们现在只需要最左边一列,所以把最左边一列裁剪下来就可以了

我们用裁剪工具在第一列进行裁剪之后就会出现上图的状况,我们只要敲下回车键就可以把第一列给裁剪下来了

裁剪下来之后我们就可以进行切片了,我们用切片工具把宝贝图片进行切片即可,因为我们事先设置的宝贝图片是160*160ppx,所以我们在切片的时候只要调整成160*160px进行切片就可以了,这样切片更加方便,更加准确,见下图

切片好之后我们就可以将它保存起来,在这里我们要用文件→存储为WEB或设备所用格式进行保存,快捷键ctrl+ale+shift+s

在存储的时候我们要注意存储格式,我们要选择HTML和图像

保存好之后 我们就要对图层有半部分进行切片,我们先打开刚刚保存的为切片的完整图片,用同样的方法对图片右半边进行切片。

四、DW转换代码

切片之后也用同样的方法进行保存,保存之后我们就可以把PS关闭了,下面我们要用的是DW软件,这里很简单,我们只要用DW打开刚刚切片后保存的HTML文件,我们刚刚切片的分成两个文件保存的,我们可以同时打开

五、进入淘宝编辑

打开之后,我们只要复制里面的代码放入淘宝的自定义模块中就可以了,我们在淘宝编辑页面左右各新建一个自定义模块

我们先编辑左侧自定义内容区,在代码编辑状态把左侧栏的代码复制进去

然后回到普通编辑状态插入相应的图片,插入之后我们就可以保存然后编辑右边自定义内容,也是同样的方法,等编辑好之后我们可以预览一下,看看 ,是不是很不错呢,中间的“楚河汉界”也看不出来哦

哈哈,累死了, 就写到这吧,大家多多顶帖哦,把帖子顶上去了,下次跟大家分享更简单的方法哦, 只要用DW一个软件就可以高仿拓展版,而且效果更佳哦!

写完,收工,祝大家生意红火,旺旺响不停

觉得本文有用?

精彩评论

推荐阅读

  • 淘宝店铺装修在线制作

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

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

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