作为淘宝卖家新手,这几天我在网上找宝贝模板制作教程也着实费了不少心思,找到的总是一些不全面的,大部分直接是作者的图片无法显示的,想学也没办法看着作者的文字就能凭空想象的,不过到处拼拼凑凑,也终于归纳出了自己的思路,下面我就详细的写一下制作过程。
这是一个很简单的教程,这些据说都是最基础的东西,可能让各位高手见笑了,希望对新手朋友们有帮助。
下面我就开始咯,建议大家边学边动手,这样比较有效率哈。
首先呢,我们要准备好制作材料,漂亮的图图,或者自己店里的宝贝也可以找几张养眼的。当然,这个前提是大家电脑里已经安装了Photoshop和Dreamweaver这两个软件,我的是AdobePhotoshop CS和Adobe Dreamweaver CS4,CS几都无所谓,基本功能都差不多,不影响。
我在网上重新找了一张新的素材,我自己做的那个模板刚刚才发现有个繁体错别字都已经用到店里了,没办法,繁体字我也是半个文盲呀,嘿,懒的改,大家保密哈
言归正传!我把自己需要的选区拷贝出来,一张760*305,叫A1图好了
一张760*62,叫A2图。
这个高度自己决定,宽度要一样,只要在淘宝店规定宝贝描述模板范围内就行。接下来我们新建一个760*1200的模板吧,我们叫它A3好了。
将A1、A2放入新建的A3中,A2多粘贴几次,根据图层窗口调好比例位置,满意后合并图层,当然大家可以在合并前将模板存储为PS的psd格式,就是按图层原样保存,这样下次打开还是几个图层归几个图层,不会像jpg格式就一个图层。要是做完又有别的想法,可以方便修改。
合并图层后,就开始输入文本了。
省时起见,我就简单的弄个布局,加点文字,你可以在上面的空白处加自己店网址,或者欢迎之类的文字,具体美化看大家的PS水平了哈。
接下来满意后同样存储为PS的psd格式为自己留个余地。然后合并图层。
好了,现在我们就开始做模板的切片工作了,大家会看到蓝色线将模板切分开各个小块,分别有1-17的标志,这些就是我们的切片了。
可能有人会问怎么1-4要区分开呢?因为把图片切小点,这样图片的显示速度会比大图片速度快些啊。5-8是我们要做超级链接的,所以要分开切,而9、11、13、15、17是白色区,都是我们要填入信息的地方,一定要切成一块。这些区块其实只是我们等下用到DW时为了切片分布调整用,等到代码里,都要换上我们自己设定的图片或者文字。这里我还想说一下,9这个区是不是可以切多点小切片分布,加自己家的宝贝做超级链接,这个我还没试过,有空可以试试做。
其实也有些人喜欢给模板加边框,如果那样,你就需要将边框每个区块单独切出来,而且边框最好是那种可以无限延伸的样式,因为我们比如在宝贝展示这里加自己家的宝贝时,这个区是要不断增高的,边框就要重复填充空白的地方。不知这么讲大家明不明白!有不懂得你们可以联系我Q11584171,旺旺11584171ya..
接下来我们就要保存这些切片了,点文件菜单---存储为WEB所用格式,这时出现一个画面,点存储就可以,基本设置都是默认的了。我是存在桌面的,存储后就会多出这些
images里保存的就是各个切片,这些我们要上传到图片空间,以获取地址,下面的.html就是我们要在DW软件进行操作的文件了。
好了,将切片上传后,打开图片空间,方便等下复制地址,然后我们打开DW软件,找到桌面的moban.html文件,打开它,会看到
一般我们会在拆分串口中,这样方便制作
当我们将光标移到图片代码时,软件自动将对应的模板中的区域选中了,然后我们会在软件下方属性里看到图片的源文件,也就是它的本地地址
在电脑上我们可以看到图片,但在网络上我们是看不到的,必须将源文件地址改成改图片在网络图片空间上的地址才能显示,接下来我们就一一将地址改好吧,可以在上面的代码窗口改,也可以直接在下方的属性中改。如果你的切片太多的话,也可以复制下images/moban_然后依次查找,替换进各自的网络地址。
都改完后,我选择设计窗口,然后看下旁边的实时试图中的效果,基本上模板是完整的,但是等下将5-8切片进行超级链接后,就会出来问题。
这些超级链接的地址,我想大家都知道怎么填吧。进入我的淘宝,我的店铺,就会得到首页地址,进入店铺信用评价页面,就得到信用评价地址,个人空间就你们自己的空间或者博客地址,然后收藏的话,在首页中
右键属性,就可以得到自己店的收藏地址咯。
填完之后,大家就会发现这些有超级链接的图片出现深蓝色的粗线框,而且各个切片之间出现裂缝。千万不要去拉它,这个我们可以在代码中做修改。
回到拆分窗口,点击有链接的图片,代码窗口就会自动帮你选中图片地址,这时呢,我们在<img的后面加入border=0这样的字符
就是将边框像素设为0,然后图片中的裂缝就会自动愈合了,将border=0依次加入下面几个链接代码中吧。
OK,大功告成,可以复制下你的代码了。
这个代码在发布宝贝时复制进宝贝描述的编辑源文件中,别管什么换入宝贝地址的事,先切换回使用编辑器,将要填入自己宝贝图片的那个白色空白区点中delete就好了,然后插入图片,居中,或者你嫌每次这样居中麻烦,可以把居中后产生的代码重新保存下就OK了,同样下面需要输入自己文字的,有些是有固定的文字的,你输入后保存下那个代码就可以了哈。
无意中点击到的人可以进我的淘宝逛逛。sese佳人日韩女装精品专营店http://shop61542427