咨询热线

13826555499 QQ:318886761

19

10

2016

淘宝店装修教程:教你利用PS打造专业促销模板



  大家好!现在我们继续分享关于淘宝店装修设计教程。本篇深圳淘宝店装修小编就向大家分享下如何利用PS打造专业的促销模板,保证简单易学实用!马上来学习下吧!只要按照我们教的步骤做,您也可以打造出专业促销模板哦!(标准版和拓展版旺铺都可以用,建议刚开店的卖家一定要用旺铺哦,改花的钱还是得花滴,投资上省钱就是最大的浪费)

  新建一张大小合适的图片。图片大小:标准版和拓展版宽度都设为950px 高度自定义可以自定义,背景颜色选择白色或者透明。淘友们可以根据要展示的宝贝数量设置相应的高度,店铺首页的产品图片大小为160*160,比如950*800950*500看官们可以自由发挥,这里我以我自己店铺里的模板为例,950*470 如图:

  

如何利用PS打造专业的促销模板 三联

 

  

 

  新建好之后 为了更加美观,我们先对图片头部进行处理。选择矩形工具,在图片上画出如图所示的一个方框

  

 

  

 

  

 

  这一步完成后 我们选择油漆桶工具——颜色调整为浅灰色 鼠标移到刚才勾选出的方框内点击,选选区变成浅灰色,为了更生动,我们在我们还可以上边用铅笔工具画出一条红线。图片左上角可以写上标题 如图:

  

 

  

 

  

 

  OK,接下来更加生动一点,选区铅笔工具——在灰色区域的上方和下方分别画一条红线,黑线。注意:滑县的时候按住Shift 就可以画出直线了。图片左上角可以写上标题

  

 

  

 

  这样基本的样子就出来了。接下来我们对图片进行分割,分成2行5列,10个均匀的小块。为什么是5列呢?大家想,图片的宽度是950px,而标准版旺铺左侧自定义模板的宽度是190px。这样刚好分成5等分。 接下来 我们按Ctrl + R 打开PS的标尺工具。然后点击视图——新建参考线 建立六条参考线

  

 

  

 

  注意新建参考线的时候,填写的单位是 px,然后建立一条水平,四条垂直的,下图是分隔好的图片 如图:

  

 

  图片分割完成之后,我们将准备好的宝贝图片放到相应的图层上,再用文字工具 写上产品标题和价格,如图所示:

  

 

  

 

  是不是觉得比较单调?我们可以设置一个按钮 点击PS右下角的图层,点击背景层——选择矩形工具 — 画出一个矩形

  

 

  

 

  

 

  画好之后,按Ctrl+Enter 调出选区→用填充工具填充为红色→ 右下角图层这一栏 → 选择刚刚编辑的这个矩形点击右键——选择“混合选项”——将阴影这一栏勾上 然后在阴影上点击右键—— 角度120° 距离大小都填写2 好了之后点击确定

  

 

  

 

  

 

  

 

  效果对比 是不是生动许多,混合选项里面有很多效果,大家可以参考着用,如图

  

 

  

 

  我们将其他的产品都放到图层上,按照这个方法设置好宝贝标题和价格,我这边做个示范,就不全部输入了。

  小技巧:设置好一个红色按钮之后,按住Alt键,鼠标左键点击它 拖动就可以复制按钮了。

  接下来我们对图片进行切片,但是针对标准版用户,不能添加宽为950px通栏,我们需要先将图片裁切成两部分,左边宽为190px的通栏和右侧750px的通栏,用裁剪工具先将左侧图片裁剪下来。

  

 

  

 

  裁剪工具选择好选区之后,敲一下回车键,就可以把第一列图片裁切下来了:

  

 

  裁剪好之后,就需要对图片进行切片了,选择切片工具,切片的时候只要把相对应的宝贝切出即可,如图:

  

 

  

 

  切好了我们对切片进行编辑,在相应的切片上点击右键——切片选项,填写切片的相关信息。填写好了点击确定。如下图:

  

 

  

 

  切片完成之后,我们将它保存,点击文件——存储为“WEB”和设备所有格式——点击“存储”——保存类型选择HTML和图像(*.html),如下图步骤:

  

 

  

 

  

 

  保存之后,桌面上会生成如图所示的两个文件。放着待用

  

 

  接下来对图片右边进行切片,和刚才一样的方法。裁剪工具——选取需要裁剪的——敲回车—— 切片工具——右键——切片选项——设置连接地址

  切片完成之后 OK之后 点击文件——选择存储为“WEB”和设备所有格式——点存储,选择Html和图像——同样是生成两个文件 放着待用 这时我们可以把PS关了。

  接下来我们要做的就是获取代码

  前面我们保存之后 一共得到了四个下图所示的文件

  

 

  

 

  接下来我们打开淘宝的图片空间,将“images左侧的”这个文件里面的图片上传到图片空间(如何上传到图片空间不多做解释了哦。淘友们肯定很熟悉了)。

  上传好了 我们在这个“左侧图片.html”这个文件上点击右键——选择打开方式——记事本,打开之后会有一串代码,这个就是我们需要的模板代码了,不过还要做修改

  如图:

  

 

  

 

  然后,店铺装修上传代码

  有了代码之后,我们将代码里的图片链接替换成宝贝空间里的图片链接,需要一一对应,千万不要替换错了。步骤如图所示:

  

 

  

 

  代码替换之后,我们打开店铺装修,在左右两侧各添加一个自定义模块,我们先编辑左侧的自定义模块,打开编辑框,点击源代码编辑,将刚才得到的代码复制到编辑框中,点击保存,如图:

  

 

  按照同样的方法,将右侧图片的代码替换链接地址,然后复制到右边自定义模块里面,点击保存。保存好了之后,我们就可以发布了。看下效果吧,是不是挺不错的呢,简洁不失大方。

  

 

  如果是拓展版用户跳过裁剪图片的步骤,直接对图片进行切片就可以了!

        怎么样?看了上面详细的介绍,您学会了吗?是不是特别的简单实用呢?如果没有看懂也没有关系,可以继续咨询深圳网店装修设计师哦!好,由于时间关系,今天的分享就到这里了!希望大家继续关注我们哦!

QQ在线咨询
售前咨询热线
13543403004
售后咨询热线
13543403004