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

 时间:2024-09-21 15:56:30

对于一个淘宝美工来说,装修店铺过程中切片的使用是必不逐吴哉姆可少的!切片能够优化网页加载速度,提升用户体验满意度等等,下面我就来讲述该技能的操作方法

工具/原料

Photoshop

方法/步骤

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切片的使用攻略

怎样更改参考线颜色?

1、在PS中执行编辑——首选项——参考线、网格和切片

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

2、配置你想要的颜色,soeasy!!!

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

2013新生选课注意事项 eclipse开发工具常见使用技巧 防台风的方法 大学生毕业选择工作还是考研? SQL Server 数据库通过分离和附加的方式迁移
热门搜索
读书卡的制作图片 踏板摩托车图片 怎样制作动态图片 精装修图片 隆胸手术图片