- 1、切图与切片
- 2、切片的基本操作及其技巧
- 3、导出操作
- 4、改进切图流程
- 5、自动切图-将单独图层直接生成一张图片
- 6、SVG和WebP格式的导出（矢量图格式）
- 7、抽出资源
- 8、复制CSS
- 9、图层管理
1、切图与切片
切片工具（C）：用于切片的工具
切片选择工具（C）：用于移动和调整切片大小的工具；属性面板有隐藏和显示自动切片，显示后能看到灰色的自动切片
传统切图方式：手动将需要的图片分别切好
简单切图方式：
- 根据自己的需要，将图片用四条参考线（在左面或上面的标尺上能拖下一根参考线）框起来
- 然后选择切片工具，点击属性中的
基于参考线的切片，将图片中多余的切片右键删掉 - 选择所需要的切片进行导出
注意：为了防止参考线看起来过于密集，可以先使用裁剪工具，将网页切为数块，然后再进行切片
2、切片的基本操作及其技巧
参考线的删除和隐藏：选择移动工具后，把参考线拖动回标尺，就能将其删除
如果只是想临时隐藏参考线，可以点击视图>显示>参考线，也可以使用快捷键Ctrl + ;
如果想删除所有的参考线，可以点击视图>清除参考线
3、导出操作
导出切片：Alt+Shift+Ctrl+S（文件>存储为web所用格式）
根据实际情况选择PNG-24或其他格式
4、改进切图流程
利用PS的脚本，可以进行一种更加快捷且精准的切图方法
特点：
- 计算机自动计算，尺寸更精确，更省力
- 由于图片大小不确定，较为费时
- 对PSD要求极高，否则切片几乎不可用
方法：
- 单击
文件>脚本>将图层导出到文件 - 文件类型：
PNG-24 - 勾选：
透明区域，交错和裁剪图层 - 注意： 1. 图片的阴影会被保留下来 2. 图片的命名与图层的名称有关，如果网页设计已经事先把每个图层命名，就不需要再导出后再调整图片名称
5、自动切图-将单独图层直接生成一张图片
编辑>首选项>增效工具>将启用生成器勾选（重启软件生效）
勾选文件>生成>图像资源，在文件夹中出现assets空文件夹
给图层重命名，加上格式名，此图层已经在assets文件夹中产生相应格式的图片，如：.png或.jpg
如果想删除某图片，只需将图层的格式名删除，此图片就会自动在assets文件夹中消失
如果想要图片质量为jpg的80%，只需将格式命名为.jpg8；如果只写jpg或jpg10，则默认为最佳品质
PNG8和PNG24透明度不同，PNG8后面会有一条白边
如果网页设计时能直接把图层命名（如button.png），图片就可以直接保存生成，省去切图过程
注意：针对Retina屏幕，图片命名需要进行Retina优化，如：200%XXX @2x.jpg（宽度和高度增大一倍）
6、SVG和WebP格式的导出（矢量图格式）
格式名为.svg或.WebP * 在文件夹中找到此文件，查看源代码，可进行微调
7、抽出资源
找到图层，选择文件>抽出资源
可以找到需要的图层，选择抽出格式，单击抽出
8、复制CSS
图层上并非外部引用的内容
点击图层>复制CSS
单击后，代码已经生成，粘贴后会自动命名一个class，直接在html元素上使用即可，如：.line{ }
9、图层管理
图层面板内可选择类型：按名称，颜色，属性等等来寻找图层
点击智能对象，只留下搜索的图层，其他图层都会被隐藏