1.PS的使用
在前端学习过程中,需要掌握切图功能,现在对自己所学的做一个总结。
1.cutterman的使用 2.精灵图尺寸测量 3.链接ps切图
1.cutterman
插件
直接去官网下载即可,目前只有18天的免费期,安装之后,在ps的菜单栏-->窗口-->扩展
查看是否安装成功,如下表示安装成功了。
1.开启图形和Web
2.选中图层,在目标图层中选择导入图层,或者在该图层中自由选择导出区域
这一步很关键,必须先选择目标所属图层
选中之后,右侧会出现目标图层
然后再选中ps选择框,在上一步选择的图层中选择导出图层的范围。
如果不先选择目标图层,就框选目标图层区域,导出的图层会变黑或者没有内容
2.精灵图测量[PS]
- 1.通过ps 打开精灵图.png。
- 2.ps右侧工具栏选择
切片工具
图一所示 - 3.通过
切片工具
选中需要测量的图标 - 4.鼠标右键选择
编辑切片选项
- 5.里面的
x
、y
、w
、h
就是对应的宽高和坐标数据拓展:也可以以下方法来测量
- 1.选择工具,选中目标图标
- 2.通过
窗口
--->信息
来查看光标当前的坐标和w、h等数据。光标置于选中框的左上角
通过以上操作即可使用ps完成对精灵图的测量。
3.ps切图
1.复制文字
如果出现弹框选择,直接选择替换即可。
2.图层切图 直接导出png
可以通过1、2、3步骤选中目标图层,或者直接在图层 3步骤里面找,右键选择
快速导出为PNG
,选择存放的文件夹即可
3.合并图层 再导出png
图层前面的小眼睛图标可以点击查看图层的效果,mac上通过win配合鼠标来实现选中多个图层,win+e即可合并多个图层成一个。导出png即可
4.切片切图 --切片工具 选中的切片
保存的时候一定要选择
选中的切片
,不然会把所有的切片都保存了下来
5.透明背景
如果需求是 切图的背景为透明色。可以在下图的图层里面,滑动到最后关闭背景【点击一下小眼睛】psd文件变成格子背景,就是透明背景了,然后再切出来的图就是透明背景[PNG-8 或者 PNG-24],如果选的是jpeg 就不会出现透明背景.