淘宝等店铺装修攻略,PS切片的使用攻略

2025-06-18 03:03:46

1、先用PS将你想要的效果图做出来(小编这里就随便在网上截取了一段图做教程讲解)

淘宝等店铺装修攻略,PS切片的使用攻略

2、接下来我们开始拉参考线,用移动工具(图中红框标出)直接从标尺处从上向下或从左至右拖拽即可生成参考线

淘宝等店铺装修攻略,PS切片的使用攻略
淘宝等店铺装修攻略,PS切片的使用攻略

3、在图片之间的空隙处拉好参考线,如图中红色的线条(不要奇怪小编的参考线为什么是红色的,下面会添加新步骤讲解如何改变参考线颜色)

淘宝等店铺装修攻略,PS切片的使用攻略

4、确定好参考线之后,下面就是见证颐忤梗桃奇迹的时刻辣!选择切片工具(图中红框标出),单击图中基于参考线的切片,然后我们的切片就妥妥的生成辣

淘宝等店铺装修攻略,PS切片的使用攻略
淘宝等店铺装修攻略,PS切片的使用攻略
淘宝等店铺装修攻略,PS切片的使用攻略

5、切片生成之后,保存下来,执行文件——存储为web和设备所用格式

淘宝等店铺装修攻略,PS切片的使用攻略

6、存储的时候可自己调图片质量(可结合小编的另外一篇教程:怎样优化淘宝手机端宝贝详情页图片?),且存储的格式选择HTML和图像

淘宝等店铺装修攻略,PS切片的使用攻略
淘宝等店铺装修攻略,PS切片的使用攻略

7、找到我们的切片图片,上传至淘宝后台的图片空间

淘宝等店铺装修攻略,PS切片的使用攻略
淘宝等店铺装修攻略,PS切片的使用攻略
淘宝等店铺装修攻略,PS切片的使用攻略

8、将我们保存的html文件(图中红框标出)用记事本打开

淘宝等店铺装修攻略,PS切片的使用攻略
淘宝等店铺装修攻略,PS切片的使用攻略

9、将<table>到</table>之间的代码复制下来,粘贴到淘宝后台店铺装修中添加的自定义内容区的源码中

淘宝等店铺装修攻略,PS切片的使用攻略
淘宝等店铺装修攻略,PS切片的使用攻略
淘宝等店铺装修攻略,PS切片的使用攻略
淘宝等店铺装修攻略,PS切片的使用攻略
淘宝等店铺装修攻略,PS切片的使用攻略

10、切换源码之后,我们看到前台的框架已经出来了,但是没有显示图片

淘宝等店铺装修攻略,PS切片的使用攻略

11、接下来将图片空间上传的图片的地址链接一个一个翱务校肢复制下来,粘贴到相对应的自定义内容区的框架中去,再添加好要链接到的宝贝(一个是图片本身地址,一个是点击之后进入的页面)

淘宝等店铺装修攻略,PS切片的使用攻略
淘宝等店铺装修攻略,PS切片的使用攻略
淘宝等店铺装修攻略,PS切片的使用攻略

12、全部替换好之后,点击确定,点击发布,即可在前台显示

淘宝等店铺装修攻略,PS切片的使用攻略
淘宝等店铺装修攻略,PS切片的使用攻略
声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢