快消品货源批发市场
快消品货源分销平台
 
 
当前位置: 货源批发网 » 网商学院 » 网店装修 » 淘宝店铺装修 » 如何使用PS与DW使用网店模板装修店铺

如何使用PS与DW使用网店模板装修店铺

放大字体  缩小字体 发布日期:2024-02-25 21:57:02  来源:电商联盟  作者:乐发网  浏览次数:24

很多新手卖家感觉装修店铺是件很头疼的事情,不知道如何装修好看,装修市场那么多好看的模板,但是价格一个比一个贵,都要几十块几百块,作为一个新手卖家,本来店铺就没啥生意,还要花那么多钱去买模板, 心里总有点不是滋味。今天我在这里教大家一个方法,可以免费得到漂亮的模板哦,该怎么做呢?那就是把装修市场那些漂亮的模板给“盗”过来, 哈哈,大家或许被我这话吓一跳,偷盗可是犯法的,再说我也没有那技术,这种事得要电脑高手或黑客之类的人才能做到吧?错了,我这里的“盗”并非通过木马程序等病毒进行盗取。嘻嘻,我这里的“盗”,其实很简单,就是截图,把别人好看的模板用截图的方式截取下来,然后通过适当的更改,使之成为自己的模板。

嘿嘿,或许大家听到这里很激动吧,很想早点知道具体该怎么做吧?

OK,下面我就来教大家如何来制作漂亮的模板吧,首先我们需要两个功能强大的软件,那就是 photoshop 和 Dreamweaver ,以下简称 PS和DW我想大家对这两个软件应该有所了解吧,这里我就不做介绍了,下面我就来教大家怎么制作模板吧。

一、软件下载

对了,在教大家做模板之前先提供下这两个软件的下载地址:

Photoshop cs5 http://blog.sina.com.cn/u/1760815815

Dreamweaver 8.0 http://www.skycn.com/soft/458.html

当然也可以到360软件管家里下载哦,大家可能会发现,这两个软件都是收费的,只能免费使用30天哦,呵呵,别担心,我这里教大家一个免费的使用这两个软件的方法,首先PS CS5只要把下面几个网址屏蔽掉,这样就可以永久免费使用了, 而且不会总是跳出输入注册码的提示框。

PS屏蔽代码

127.0.0.1 activate.adobe.com

127.0.0.1 practivate.adobe.com

127.0.0.1 ereg.adobe.com

127.0.0.1 activate.wip3.adobe.com

127.0.0.1 wip3.adobe.com

127.0.0.1 3dns-3.adobe.com

127.0.0.1 3dns-2.adobe.com

127.0.0.1 adobe-dns.adobe.com

127.0.0.1 adobe-dns-2.adobe.com

127.0.0.1 adobe-dns-3.adobe.com

127.0.0.1 ereg.wip3.adobe.com

127.0.0.1 activate-sea.adobe.com

127.0.0.1 wwis-dubc1-vip60.adobe.com

127.0.0.1 activate-sjc0.adobe.com

用记事本编辑“C:Windows/System32 /Drivers/etc”目录下的hosts文件

CS5下载地址 http://blog.sina.com.cn/u/1760815815

如何安装及屏蔽

http://blog.sina.com.cn/s/blog_68f3eac70100qhs3.html

至于DW 8.0的话 只要在百度里搜索一个免费的注册码,就OK了哦

二、搜寻漂亮的模板

好了,下面我就来教大叫如何利用这两个软件来制作漂亮的模板吧:

首先,当然要找一个自己喜欢的漂亮模板啦,这个不难找,淘宝的装修市场里多了去了,http://zx.taobao.com/,我想这个地址大家应该都知道哦,只要进去之后就有很多很多的漂亮模板,这些模板都可以免费试用的哦,这一点给我们卖家带来了极大的好处哦,哈哈,那就是我们可以利用这点去“偷”模板咯! 我们只要选择适合自己旺铺的模板,点击立即试用,就可以进入模板编辑页面,当然你没有购买是不能进行编辑的哦,不过不能编辑可以进行预览啊,预览之后,模板就会变的跟我们平时看到的店铺一样了,这样模板的大小也是一样的,我们就可以用截图工具把好看的模板截取下来了哦,我相信截图大家都会吧,可以用QQ截图(ctrl+alt+A)或者旺旺截图(ctrl+alt+P),把截下来的图片保存到文件夹。

三、利用PS切片

下面我们就要用到上面介绍的软件了哦,首先用PS打开我们截下来的模板图片

OK,打开之后,我们先要把图片下面的那些宝贝名称换成自己的宝贝名称,该怎么做呢,首先我们要把上面原有的字给去掉,很简单,我们可以用填充命令,把原有的字体给去掉,其实相当于在原有的字体上覆盖了一层,使之看不到原来的字,具体怎么做呢?我们可以用矩形选框工具把原有的字体进行选取

大家可以看到,这样我们就可以把想要去除的字用虚线框给框住了,接下来,我们可以在选框内用鼠标右键点击会有一个下拉框,我们选择填充选项,会弹出一个对话框

因为我们目标字体背景是白色的,所以我们这里填充内容也要选择白色的哦,选择白色之后点击确定,原来模板上的字就奇迹般的没有了哦,

很简单吧,我相信看过教程之后大家都会,当然我们也可以用其他工具把文字替换掉,这里我就不一一介绍了,下面我们要写上自己的宝贝名称和价格,我们先要选择文字工具

在要输入文字的地方单击,这样就可以输入自己想要输入的文字了哦,

呵呵 不错吧,这里的宝贝图片是原来模板的图片,与我修改的宝贝文字是不对应的哦,后面我会教大家如何替换宝贝图片。

我这里只用一张图片作为示范,其他的的也都可以用同样的方法进行处理哦。

好了,现在我们应该怎么把这个修改好的模板制作成属于自己的模板并放入店铺呢?各位亲们不要急哦,我会慢慢的给大家讲解,

首先我们要用PS的切片工具对图片进行切片,

每个模板切片都会有所不同哦,我这里选了一张比较简单的图片,这样大家比较容易上手,下面是切好的图片。

切片切好后,我们要对切好的素材进行保存,这里不是简单的文件→存储或者存储为哦,我们要用文件→存储为Web和设备所用格式 (或者按快捷键ctrl+alt+shift+S)

点击之后会跳出一个对话框,我们可以选着自己想要的图片格式和图片品质哦

选择好图片格式和图片品质之后我们就可以点击存储,这样就会跳出一个让你选择存储的位置,

这里大家要注意咯,在文件格式位置我们要选择HTML和图像,(这点很重要哦)

选择好存储位置和格式之后我们点击保存又会跳出一个对话框,我直接点确定即可

保存之后我们会看到两个文件

四、利用DW转换代码

OK,photoshop软件我们就用到这里,可以把它关闭了,接下来我们要用的是dreamweaver,

我们首先打开DW,然后利用DW打开刚刚保存好的文件,

打开之后我们会看到DW软件里就会有我们切片好的图片

打开之后我们可以点击宝贝图片,这样我们就可以在属性栏中看到宝贝图片的宽度和高度,

这有什么用呢,用处大了,这样我们就可以看到该宝贝图片的位置大小,接下来我们就可以把自己店铺的宝贝图片制作成与模板图片的大小一样,这样我们就可以把自己的宝贝图片很吻合的放入模板中,至于如何制作自己的图片大小我这里就不详细介绍了,我想大家都会的。

接下来我们就要把图片转换成代码,怎么转换呢,很简单,只要鼠标一点就搞定了,我们用鼠标点击代码,这样原来的模板图片就变成了密密麻麻的代码了哦,

(呵呵,代码转换成功, 不过这里还有一个更为简单的转换代码,而且这个方法不需要DW软件,是一个热心的卖家看了我帖子之后跟我说的,所以我这里也拿出来跟大家分享一下,其实这个方法很简单, 只要用浏览器打开刚刚PS切片后保存下来的HTML文件,然后点击右键查看源文件,这样代码就会在记事本中打开了,复制代码进入淘宝自定义模块进行编辑就OK了。)这段话是在那个热心的卖家看过我帖子的时候我才加进去的,这里不方便公布,在这里我再次感谢这位热心的卖家。

五、编辑淘宝自定义模块

接下来我们就要吧这些代码全都放入淘宝中进行装修哦,我们按ctrl+A全选这些代码,然后复制这些代码,然后我们就要进入淘宝进行装修了哦,首先我们要进入装修页面,新建一个自定义模块,然后对该模块进行编辑,我们复制的是代码,所以我们要进行代码编辑,点击编辑HTML代码, 这样我们就进入了代码编辑模式,我们可以按ctrl+V把刚刚复制的代码粘贴进代码编辑区

接下来我们仍旧点击编辑HTML代码,这样代码就会变成图片了,在这里,大家会发现原来那么漂亮的图片模板怎么全都变成叉叉了呢,只看到外面一个框框,是不是哪里弄错了呢?

嘿嘿,别急,没错哦,因为我们没有把图片放入图片空间哦,这些原来显示图片的位置我们要加入图片才能看到哦,好了,接下来我就告诉大家该怎么做。刚刚上面讲到了,PS切片好后保存之后有两个文件,其中是一个名为image的文件夹,这里面就是我们需要上传的图片哦,只要把这些 图片放入编辑区,这样完整的模板就会呈现在你面前了哦。当然我们不能直接把图片复制到编辑区,那具体又该怎么做呢?

首先我们要把图片上传到图片空间,可以用淘宝的图片空间也可以用外链空间,这里我建议大家用淘宝的图片空间哦,这样打开的速度会更快,上传图片大家都会,我就不做讲解了哦。好了,现在我就教大家如何把上传好的图片添加到编辑区对应的位置呢,我们先点击插入图片空间的图片 然后我们就可以把图片空间中的图片一张张的添加到对应的位置

像这样一个个添加进去,全部添加完成之后就是完整的模板了哦

接下来我们就要把原来模板上的图片替换成自己店铺的宝贝图片了哦,方法跟上面的一样,我们先要把自己做好的宝贝图片上传到图片空间,然后对原有的模板图片进行替换,替换好之后我们对此进行保存,发布,一个漂亮的模板就会呈现在你的店铺首页了哦,想要做的更好,可以添加多个自定义模块,用同样的方法进行编辑,这样你的店铺就会更加的漂亮哦。

相关模板:淘宝装修模板

乐发网超市批发网提供超市货源信息,超市采购进货渠道。超市进货网提供成都食品批发,日用百货批发信息、微信淘宝网店超市采购信息和超市加盟信息.打造国内超市采购商与批发市场供应厂商搭建网上批发市场平台,是全国批发市场行业中电子商务权威性网站。

本文内容整合网站:百度百科知乎淘宝平台规则

本文来源: 如何使用PS与DW使用网店模板装修店铺

分享与收藏:  网商学院搜索  告诉好友  关闭窗口  打印本文 本文关键字:
 
更多..资源下载
淘宝店铺装修图文
淘宝店铺装修如何实现全屏轮播 淘宝装修子账号设置流程
淘宝店铺,天猫店铺背景固定的方法。
淘宝店铺装修网商学院推荐
淘宝店铺装修点击排行
 
手机版 手机扫描访问