1.按住剪裁工具，切换为切片工具；

2.按照参考线切图，切图类似选区，可调整，此处做4面为例；

3.文件 - 导出 - 生成web格式，可调整生成文件格式，存储后在psd目录下生成文件夹，切图文件在里面。

答【效果图画完之后，该做什么？】

重了娘娘腔的毒无法自拔…biubiubiubiu~好舒服哦~

1.PS普通切图

1.放大镜工具，放大目标图标；

2.按住空格键，移动画布，将目标图标全部显示出来；

3.选择工具，commond+单击图标，选中图标图层；（win系统，commond=ctrl）

4.框选工具，按住shift，即可框选正方形，框选目标图标，调整框选位置，上下左右键可微调位置；

5.shift+commond+c，复制框选盖章；（win系统快捷键：shift+ctrl）

6.commond/ctrl+n，新建文件；

7.将目标图标图层拖入新文件中，拖动时按住shift可使其位置居中；

8.commond/ctrl++，放大画布；

9.选择工具，微调图标位置；

10.未得到透明图标，隐藏掉背景图层；

11.格式改为png，进行命名，按照默认参数储存，之后进行压缩即可。

2.PS智能切图

1.文件 - 生成 - 图像资源；

2.确定打开了，前面有个对钩；

3.修改所需切图图层的名称，加上扩展名即可，有很多拓展编辑，如控制大小、缩放倍数等，参考文章：

https://helpx.adobe.com/cn/photoshop/using/generate-assets-layers.html

4.psd根目录下会自动生成文件夹，所需切图在文件夹内。

3.插件切图

- Cutterman -

http://www.cutterman.cn/v2/cutterman

选学.PS切片切图

- 标尺及辅助线 -

1.commond/ctrl+r，显示/隐藏标尺；

2.commond++，放大画布；

3.拖拽横竖参考线到旗子边缘位置，此处做4面为例；

4.commond/ctrl+h，显示/隐藏参考线。

- PS切片切图 -

1.按住剪裁工具，切换为切片工具；

2.按照参考线切图，切图类似选区，可调整，此处做4面为例；

3.文件 - 导出 - 生成web格式，可调整生成文件格式，存储后在psd目录下生成文件夹，切图文件在里面。

4.压缩

- ImageOptim -

5.PS量距离

1.框选工具，框选所想量取得内容；

2.鼠标右键 - 变换选区，可编辑选区大小，完成后按回车；

3.shift+commond+c，选区盖章复制；（win系统快捷键：shift+ctrl）

4.commond/ctrl+n，新建文件，宽高即为所量区域。

6.标注插件

- Parker -

http://www.cutterman.cn/v2/parker

- Assistor -

http://www.shejidaren.com/assistor-ps-plugin.html

- Size-Marks-PS- 

https://github.com/romashamin/Size-Marks-PS

- 总结 -

关于切图、标注，大概用到的就这些了~

如果PS基础不会的话，

请回顾之前的D1-10的教程~

希望今天的内容对你有帮助~

更多内容：关注微信公众号UIDX，或加Q群438966865

以上内容为爽Yy原创，如需转载请帮忙打个广告

点个赞支持一下呗~