对于我这种前端初入门者来说,切图也是要必须学的。下面就是我参考资料的学习记录:
一、切图方式分类
Photoshop传统cs版本
传统切图(手动切图、参考线切图)
Photoshop cc版本
精准切图、利用脚本执行全自动切图
二、切图准备
1.在开始切图之前,首先要对photoshop软件进行设置,将基本单位改为“像素”,菜单栏“编辑”-----“首选项”-----“单位与标尺”----设置单位为“像素”,如下:
2.切图需要的四大部分:图层、历史记录、信息和字符(在“窗口”中勾选)。其中“信息”用于展示选中的图形的大以及位置坐标,“字符”用于展示选中字的大小及颜色等。可以在菜单栏“窗口”中调出。
3.对某一图层进行切图时,按住Ctrl键再点击要选的图层,就可以选中当前图层,可以看到蚂蚁线选中当前图层,并在“信息”或者“字符”中显示相应的信息。
三、切图工具
工具箱中“裁剪工具 ”中的“裁剪工具”、“透视裁剪工具”、“切片工具”、“切片选择工具”。其中使用最多的是“切片工具”和“切片选择工具”。
“切片工具”和“切片选择工具” 两者区别:
两者类似,使用“切片工具”进行正常切图,当完成一部分切图后,想要对之前的切图进行调整,
就需要用到“切片选择工具”,选择该工具后,点击选中之前切的图 进行大小调整。
四、切图存储
所有要切的图片切完之后,要进行存储。
cc2014版本中点击菜单栏中“文件”------“存储为Web所用格式”,弹出“存储为Web所用格式”窗口,
cc2015版本中 菜单栏中“文件”-----“导出”-----“存储为Web所用格式”-----弹出“存储为Web所用格式”窗口,或者使用快捷键Alt+Shift+Ctrl+S。
在“存储为Web所用格式”窗口,设置选项:
在右侧下拉列表中选择“PNG-24”,勾选“交错”和“透明度”选项,点击“存储”,选择存储路径即可完成。
五、手动切图
手动切图就是使用“切片工具”一个一个的去切割图片,但是在切割时会出现实际出来的切片比我们自己切的图片要多,这是因为在我们切图的时候,photoshop自动的给我们添加了一些切片,这些切片并不能删除,只能通过在“切片选择工具”中,点击属性栏中的“隐藏自动切片”,隐藏多余切片,就可以看到我们本来要切的图片了。注意这只是隐藏,并不是删除,实际进行切片还会有自动生成的切片。
如下图所示:图左是我们需要的切片,而实际上确实图右,其中红框框的灰的切片也会生成切片图片。
图左 需要切片 图右 实际切片
缺点:存在多余的不需要的切片
六、参考线切图
首先调出标尺(快捷键:Ctrl+R),利用从水平标尺和垂直标尺中拖出的参考线进行切图。选择切片工具,然后点击属性栏中"基于参考线切片",就可以完成切图。
好处:较为精准,与手工一个一个的切图要较为精准,参考线在图层上会有一定的吸附性,切图时会严格按照参考线来切。另外,使用参考线切图,可以将ps自动添加的切片右键点击删除,只保留自己需要的切图。
缺点:挨个删除多余的切片费时费力。
七、精准切图
精准切图时cc版本新引入的功能,PS通过脚本自动对每个图层执行切图,另外,精准切图是计算机基于“图层对象”切图,所有切出来的图形精准度要比人工切图高。
过程:“文件”------“脚本”------“将图层导出到文件”
上图中对应的几个参数:
目标:即切片存储位置
文件名前缀:切出来的图的名字的前缀
“仅限可见图层”:只导出可见图层。
文件类型:要导出图片文件的格式,jpg或者png等。
最后点击“运行”按钮进行执行,photoshop执行自动切图。自动切图需要一定的时间。
八、扩展--自动切图
自动切图就是看不到切图过程,图层设计好之后,切图就完成了。
操作步骤:
一、菜单“编辑”---“首选项”-----“增效工具”,在弹出的窗口中勾选“启用生成器”
二、勾选“文件”---“生成”----“图像资源”
过程:操作完以上两个步骤,可以在psd文件的存放目录下看到生成了一个文件夹.....(psd文件名)-assets文件夹。
然后将要保存的图片的图层分组命名,比如将:a图层或者图层组的名字改为a.png,然后在assets文件夹夹下就可以看到一个对应的切片,而且是图片的背景是透明的,如下图所示:
另外,还可以利用这一功能生成svg格式的文件,将图层后缀改为.svg即可,然后再用文本工具看对应的svg文件的代码即可,还可以修改图片的颜色,fill:#fff-------->fill:#ff3300
视频资源:https://www.imooc.com/learn/506
自动切图参考:https://www.cnblogs.com/xiaohuochai/p/5656917.html