如何在宝贝详情页面添加宝贝关联营销图

qinzhiqiang 06-23 11:11 803次浏览

打开PS,建立新图层,名称的话,大家就取个自己容易记得的吧。参数如下图:

因为宝贝关联营销图是放在宝贝详情页面的,所以宽度设置为“750”,高度的话,大家可以根据自己所做宝贝关联图片自定义。

2

利用ps切图

做好了图后,我们就要对图片进行“切片”处理了,为方便切片我们可以在图层建立“参考线”,进行平均分割。

为了能在之后作图过程中更加方便,所以我调出了“参考标尺”(快捷键为Ctrl+R“)。然后就在新建图层中打上你需要的文字,利用“参考标尺”对图层进行平均分割。

3

添加宝贝图片

宝贝图片放进图层,制图。

在PS中继续打开要做关联的宝贝图片,然后用PS的移动工具(下图第一个图标)把宝贝图片移动到分割好的关联图图层上。如下图

4

调整图片大小

这时候图片的大小,不会刚好就在分割好的空白区域内,这时候我们可以将鼠标放在需要调整大小的图片上,按“快捷键Ctrl+T ”(编辑-自由变换)对图片进行大小调整。 接下来图片大小的调整也是通过这个方式。把需要的图片放进去之后的效果图:

5

切片

做好了图片之后如何关联营销,要对图片进行切片。切片工具在ps中起着非常强大的作用,切片工具的运用并不困难。

1.点击菜单栏中的切片工具图标(像钢笔头一样的形状) ,然后将鼠标放在需要切片图片的起始端,点击鼠标左键不放,直到图片的终端,放开鼠标左键。这样就可以在图片中切出想要链接的部分

在你切下了图片之后,会显示蓝色图标跟灰色图标,蓝色图标部分代表你自己切下来的部分,灰色图标代表剩下部分。这个我们不用去理会他,不影响我们后面给宝贝加入链接。

2.一张图片中,如果你想要两个地方链接,那就切两次。三个地方需要链接,就切三次,以此类推。因为我现在做的宝贝关联营销图是需要四个地方链接的,所以我切了四次。效果图如下:

保存图片

切片工作完成之后,我们要进行对图片的保存。点击ps工作界面最左上端的“文件”,这时候我们可以看到有“存储为Web和设备所用格式”,点击它。然后会弹出一个窗口。

保存的时候还要注意两点:

(1)注意图片的格式:

图片格式要选择“JPEG”模式。

(2)注意图片的品质:

之前用PS辛辛苦苦做的图,保存下来却变得模模糊糊,百度一下,才知道问题的所在,所以“品质”能决定图片的清晰度,品质越高,图片越清晰,但是数值越高,图片占用空间越大,所以我一般选择在“80-100”之间。

上传淘宝图片空间

把刚刚用photoshop切下来的图片上传到图片空间,因为淘宝只认证淘宝空间的图片,其他地方的图片可能会显示不出来,把图片上传到淘宝图片空间中,也是为了获取图片的有效链接。

dreamweaver上场

打开dreamweaver(DW),新建一个“HTML”新项目。 然后打开刚刚保存在电脑的”宝贝关联营销图”html。然后我们就会看到如图。

用DW添加链接(一)

我们用鼠标点击一下图片,可以发现这些图片都是一块一块组合成的。(因为刚刚用ps对图片进行了切片)。

在图片下面那一栏“属性栏”,是我们给图片加上链接的重要栏目。图片上3中不同颜色矩形框起来的,是接下来我们需要用的的,其他没有框起来的,我们就不用去搭理它了。红色框的那一栏“源文件”这里是我们上传到图片空间中相应图片的地址。下面黄色框的那一栏“链接”栏中是宝贝所需要链接的地址。例如,我们要链接的地址是淘宝首页的话,就是“http://***.taobao.com。但因为我们现在做的是宝贝关联营销图,所以我们要链接的地址就是相应宝贝页面的地址。 为了让大家看的更加明白,我把6部分的图片都标注上了编号。其中02.03.04号图片是需要链接的宝贝图片。01.05.06号是不需要链接的部分。可能我这样说,大家还不是很明白如何关联营销,所以在这两部分,我分别拿出一张图片来给大家示范。

用DW添加链接(二)

(1): 给01号图片添加链接。因为这部分是不需要链接的部分,所以我们只需要将红色框框里面显示的地址(图片在电脑里面的地址)改成此宝贝在淘宝图片空间的地址,就可以了。到图片空间,找到对应的图片,复制图片链接,获取图片地址,点击图片正下方的“链接”,就可以复制图片在淘宝空间的地址了

更改图片地址,添加超链接

回到Deramweaver页面,将刚刚复制的图片地址粘贴在红色框“源文件”里面,黄色框“链接”跟宝蓝色款“目标”不用填写任何东西。05,06号空白区域跟01号同理。

给02号添加链接,因为这个区域是需要链接的部分,所以我们除了要把红色框“源文件”里面的图片地址改成该宝贝对应图片空间的地址以外。我们还需要将黄色框“链接”的空白框中加入此宝贝对应在店铺中的宝贝详情页面地址。宝蓝色“目标”框中,我们需要选择“blank”(blank意思是当你点击这个图片图片获得链接地址的时候,是在新的网页打开你的宝贝)

根据以上步骤,用同样的方法获得02的图片地址,点击中红色框“源文件”进行修改,然后到自己的淘宝店铺,找到相应的宝贝,点击进去,复制该宝贝地址,返回到Deramweaver页面,粘贴到黄色框“链接”空白框中。再在宝蓝色“目标”框里选择“blank”就可以了。03,04号图片同理

获取代码

6个部分都添加了链接之后,我们就要获取代码了。点击图片中红色框“拆分”拆分的意思,就是把图片和代码同时可以观看。然后大红色框中的就是我们所需要的代码,““全选”然后复制出来。