首页 网店学院 网店资讯 网店问答 专栏 店铺装修 拼多多入驻 虾皮入驻 推广返佣
    TOP
    甩手网 > 网店学院 > 网店装修 > 装修经验

    如何利用PS与DW做店铺模板,让店铺流量翻一番!

    2017-04-17 17:29:13 文/老化电商运营 人气:5509

    大家好,我们又见面了,今天还是会给大家带来分享。在最近啊,我发现有很多朋友问我淘宝店怎么装修才好,特别是新手,很多新手卖家感觉淘宝店铺装修店铺是件很头疼的事情,淘宝店铺装修市场虽然有那么多好看的模板,但是价格一个比一个贵,作为一个新手卖家,店铺还没赚到钱呢,哪有那么多钱去买模板,不过现在大家不用担心啦,今天我在这里教大家一个方法,可以免费得到漂亮的模板哦。

    相信大家对这些都很感兴趣吧,话不多说,下面我就来教大家如何来制作漂亮的模板吧,首先我们需要两个功能强大的软件,那就是 photoshop 和 Dreamweaver ,简称就是 PS和DW,我想大家对这两个软件应该有所了解吧,这里我就不做介绍了,直接进入实操环节。

    寻找漂亮的模板

    首先,当然要找一个自己喜欢的漂亮模板啦,这个都难不倒我们,千图网里的店铺装修多得是,http://www.58pic.com/tupian/dianpuzhuangxiu.html我想这个地址大家应该都知道哦,只要进去之后就有很多很多的漂亮模板,这些模板都可以免费下载的。

    我们只要选择适合自己旺铺的模板,点击免费下载,就可以下载了,不过有可能有的原创的是不可以下载的,下载之后,模板就会直接出现在我们的PS软件中了,这样模板的大小也是一样的,不过接下来就需要我们进行PS了(友情提示:如果下载不了的话就去找模板截图下来,也是可以做出来的哦)。

    利用PS切片

    首先用PS打开我们截下来的模板图片(这里我们统一说打开图片)。

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

    具体怎么做呢?我们可以用矩形选框工具把原有的字体进行选取。

    大家可以看到,这样我们就可以把想要去除的字用虚线框给框住了,接下来,我们可以在选框内用鼠标右键点击会有一个下拉框,我们选择填充选项,会弹出一个对话框。因为我们目标字体背景是白色的,所以我们这里填充内容也要选择白色的哦,选择白色之后点击确定,原来模板上的字就奇迹般的没有了哦。

    很简单吧,我相信看了说明之后大家都会,当然我们也可以用其他工具把文字替换掉,这里我就不一一介绍了,下面我们要写上自己的宝贝名称和价格,我们先要选择文字工具,在要输入文字的地方单击,这样就可以输入自己想要输入的文字了哦,这里只是文字,后面会教大家如何替换宝贝图片。

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

    首先我们要用PS的切片工具对图片进行切片,每个模板切片都会有所不同哦,我这里选了一张比较简单的图片,这样大家比较容易上手,下面是切好的图片。 

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

    点击之后会跳出一个对话框,我们可以选择自己想要的图片格式和图片品质哦,选择好图片格式和图片品质之后我们就可以点击存储,这样就会跳出一个让你选择存储的位置,注意啦注意啦,在文件格式位置我们要选择HTML和图像,(这点很重要)选择好存储位置和格式之后我们点击保存又会跳出一个对话框,我直接点确定即可.保存之后我们会看到images和一个网址。

    利用DW转换代码

    接下来我们要用的是dreamweaver,我们首先打开DW,然后利用DW打开刚刚保存好的文件(images),打开之后我们会看到DW软件里就会有我们切片好的图片,打开之后我们可以点击宝贝图片,这样我们就可以在属性栏中看到宝贝图片的宽度和高度。

    这样我们就可以看到该宝贝图片的位置大小,接下来我们就可以把自己店铺的宝贝图片制作成与模板图片的大小一样,这样我们就可以把自己的宝贝图片很吻合的放入模板中。

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

    还有一个更为简单的转换代码,只要用浏览器打开刚刚PS切片后保存下来的HTML文件,然后点击右键查看源文件,这样代码就会在记事本中打开了,复制代码进入淘宝自定义模块进行编辑就好了,方法很多,我也不细说了。

    编辑淘宝自定义模块

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

    接下来我们继续点击编辑HTML代码,这样代码就会变成图片了,然后大家会发现模板怎么全都变成叉叉了呢,只看到外面一个个框框,其实不是错了,因为我们没有把图片放入图片空间,这些原来显示图片的位置我们要加入图片才能看到,之前说了PS切片好后保存之后有两个文件,其中是一个名为image的文件夹,这里面就是我们需要上传的图片哦,只要把这些 图片放入编辑区,这样完整的模板就会呈现在你面前了(不能直接把图片复制到编辑区)。

    首先我们要把图片上传到图片空间,可以用淘宝的图片空间也可以用外链空间,这里大家最好用淘宝的图片空间,这样打开的速度会更快,上传图片之后,现在我就教大家如何把上传好的图片添加到编辑区对应的位置,我们先点击插入图片空间的图片。

    然后我们就可以把图片空间中的图片一张张的添加到对应的位置,全部添加完成之后就是完整的模板了哦,接下来我们就要把原来模板上的图片替换成自己店铺的宝贝图片了,方法跟上面的一样,我们先要把自己做好的宝贝图片上传到图片空间,然后对原有的模板图片进行替换,替换好之后我们对此进行保存发布,这样我们模板也就完成了。

    怎么样,今天的干货分享,你有没有学到什么?马上试试给自己的店铺进行一次史诗级的装修吧,不花钱又可以让自己的店铺变得美美哒,你值得拥有,那么我们下次分享再见啦。

    本文来自老化电商运营,转载请备注出处! 

    *本站部分文字及图片均来自于网络,如侵犯到您的权益,请及时通知我们删除。联系信息:甩手网
    关注微信
    淘宝店铺装修

    淘宝店铺装修

    网店装修对于卖家来说就是通往销量的门,核心在于促进交易的进行。 良好的店铺装修能够给买家很直观的视觉体验和心理作用,进一步获得更优质的客户源和转化率,是我们经营店铺的一大利器。本专题让你能够学到从新手到...

    详情>>
    淘宝实用工具
    关于甩手软件     |     关于我们     |     联系我们     |     服务条款     |     隐私协议     |     用户权限     |     站点地图     |     帮助中心

    甩手客户服务

    • 甩手问答
    • 在线客服:企业QQ 800055007
    • 白班咨询电话(9:00-18:00):
      0755-26470437/26470392
      晚班咨询电话(18:00-22:00):
      18926581976/18926585976
    • 客服上班时间:
      周一至周五9:00--22:00,周末9:00--17:00
      (除法定节日以外,其他不在线时间请留言,
      我们看到后会第一时间回复您!)
    • 甩手网投诉电话:0755-26470437/26470392转621

    关注公众号

    Copyright ©2010-2020 深圳市华通易点信息技术有限公司 - 甩手网 All Rights Reserved.[粤ICP备12028137号]

    粤公网安备 44030502000916号

    关闭
    在线客服
    投诉建议