PS”不规则”切片——无需DW代码知识照样可以装修店铺
 
很多美工及店主掌柜,学会了点PS,问小编后面就不知从何下手,要学PS还要学DW软件。直接下载的素材改好了但又不会上传到店铺去。现在Yhe garbage素材确实是满天飞,可能2T的硬盘+20T的云盘都不够装。
特别是这种不规则的。一不小心又会出现让人头痛的分隔符。
今天我们就一起来学习尽量不用DW软件及代码知识完成一个模块的装修。
 
提示:在学习美工之前除了学习PS软件,还会下载一些大神现成的PSD源文件来学习,那么这两个步骤一定要在最开始就设置好。第一把自动选择,然后右边选择图层。这样以后我们用鼠标点击哪里就会跳转到对应页面的图层上面。

  1. 首先把你要的效果图做出来,我这里就直接截取了天猫茵曼的一个经典模块为例
  2. 用选择工具沿着图片规则间隙拉参考线。为了好的习惯最后还要放大图像查看参考线是否在间隙中间位置。
  3. 选择切片工具,然后点击基于参考线的切片,PS就自动帮您沿着参考线切片完成。
  4. 如图,但这时不是你所想要的效果怎么办?如上面的页头是一整张图片,我想让他变成另一张。
  5. 选择【切片选择工具】,然后按住键盘(shift)上档键,把上面要组合的四个相邻的切片选中,然后右击选择【组合切片】即可合并成一个。
  6. 如图,最上面的4个切片变成一个切片了,其他的也如此完成。
  7. 组合完成后的效果。当然这种不规则还是有规律可循的。太没有章法的就只求大概或者参考另一篇使用DW热区添加链接的方法。
  8. 然后按ctrl+alt+shift+s【存储为web所有格式】,然后按ctrl+ -缩小整个画面用鼠标全部框选。
  9. 品质选择高或者直接输入60或者68最好是双数,还可以把ctrl++放大观看清晰度,反正体积越小越清晰越好。(如果想让背景透明您得先把效果图的背景眼睛关闭掉,在存储,然后选择PNG24可以完全透明)点击存储按钮。
  10. 注意:选择你保存的位置,格式(html和图像)这是必须的
  11. 然后在桌面自动生成一个images文件,一个是html文件这里如果懂DW的就可打开修改,如果不懂就直接把后面html改成txt,然后双击打开,也可以直接在文件夹上右击选择用记事本打开。
  12. 用记事本打开代全选并复制
  13. 这时候进入你的店铺首页装修后台,新建一个自定义然后点击【编辑】
  14. 点击源代码,使其他图标变成灰色状态。然后右击把代码粘贴到自定义区域内,如图。
  15. 然后拖动下拉滚动条,看到左侧有些不显示的图标,双击。这个就是我们要替换的图片。自己拉动对着你的效果图,那个对应那张图片,自己要心里有数。或者直接看文件名。
  16. 双击不显示的图标弹出对话框,上面就是要替换的图片地址,下面的就是图片的链接地址。
  17. 然后回到淘宝相册空间,把images文件夹里图图片全部上传到淘宝空间。然后复制链接地址。
  18. 复制图片地址粘贴进去,下面添加链接地址,如果没有就留空也行,记得一定要是淘宝站内地址。
  19. 然后再依次下拉滚动条找到其他要替换的图片双击替换,换好以后确应预览着效果,ok就可以发布了。

  
 

本文由上海网萌淘宝美工设计编制,转载请注明.