前端之切切切切切图

2017-10-31

陈蔓青

web前端开发

身为前端,除了与风格迥异的代码打交道,还有一个很常见的就是跟设计师对接,从他们提供的 psd 里面扣出需要用到的小图标等等。下面就讲讲切图的各种姿势

photoshop

快速导出法

首先来一个很傻瓜的也很常用的一个方法,对于少量图标适用:

1. 将你想要扣出来的图标复制一遍()

2. 新建图层(),通常来说默认的大小就是你剪切板里复制的图的大小

3. 粘贴图层()

4. 保存为网页格式()或者直接导出()

进阶一点:

直接选中要导出的图层,右键导出为,然后选择保存的格式,位置…

使用这种方法的话要注意,如果你的设计师给出的图层是带有蒙版带有或者有大片的透明背景,就会发现的想要的和导出的可能并不太一致了。

更进阶一点:

随着时间的更新,ps cc 之后提供了快速导出功能,默认快速导出为 png。这样就不用每次选格式大小了,一次配置到处使用。

配置的更改:preference(首选项)> Export(导出)

可以修改默认的导出格式,如果懒的话还可以设置直接把文件导出到当前 psd 文档位置的 文件夹下面,就不用每次都要选择保存的位置了。

设置完成之后,就可以通过文件->快速导出为xxx 或者选中图层右键->导出为xxx的方式导出图标

快速切片法

再说说切片,应该也是大家很熟悉的一个方法,需要导出多个图标的时候比较好用。

选择切片工具,把背景隐藏了,开始框选想要的内容,然后保存。

这样子一个两个还好,多了每次手动拉的大小并不一定贴边,而且对于多个需要大小一致的 icon 来讲,每次都刚好拉到一样大,臣妾做不到啊。因此我们需要快速切片的方法:

通过参考线切片

选中切片工具之后,可以看到工具栏上方有一个使用参考线切片的按钮,因此我们可以考虑把想要切片的形状都用参考线给包围起来,然后就可以一键导出

那么如何快速的新建参考线呢,command+r 打开标尺然后手动去一根根的拉太浪费时间了。这里提供一个比较少人用到的知识,view(视图)-> New Guide From Shape(通过形状新建参考线)。

身为一个懒人,首先可以设置一个快捷键,Edit(编辑) -> keyboard shortcuts,找到 通过形状新建参考线 这一栏目,随便设置一个顺手的且不冲突的,比如我这里设置的是

接下来你就可以选中图层,按下快捷键,参考线就服服帖帖的生成了(配合自动选择食用味道更佳喔),放张动图欣赏下:

最后点击切片工具上面的使用参考线切片的按钮,选择你需要的切片导出就好了。

利用标准化模板创建切片

通过形状新建参考线最然很酷,但是对于不需要贴边切的情况,例如刚才所说的切出多个大小相同的图标,还需要进一步探索。方法还是很简单的:

首先需要新建一个标准大小的模版,例如我这里随便画了个正方形,表示以后切片的大小。

按 复制该图层并将其铺到你想要切的图下面

然后选中这些图层,并点击layer(图层) -> New Layer Basic Slice (新建基于图层的切片)

当当当当,图都切好了最后导出。

最后说点切片工具使用的注意事项,注意把没用的信息都隐藏了,特别是切 icon 时背景啊旁边的小字体什么的。例如上面的演示理论上都是不合格的拉~

录制动作

身为程序汪,每次都让你重复一样的动作,就像写重复的代码,肯定是不爽的。此时我们就可以写一个函数来封装一下自己的动作,ps 也提供了录制动作的功能。

window -> Actions或者快捷键 调出录制动作面板

输入动作的名称以及快捷键之后,就可以进行你想要录制的操作,比如点击 将图片导出为 png 格式:复制当前图层,新建文件,粘贴,保存为 png 格式。接着点击最左边的停止按钮,你的动作就录制好了 。

tips:快捷键也会被记录,所以可以放心大胆的时候用。不过最好一次性做完你想要的动作,不然多余的动作也会被记录速度可能会慢点。

然后选中你新建的动作,或者输入快捷键,动作就运行了。比如我刚刚创建的动作,选中图层按之后,图片就保存在你设置的文件夹里面了。(动作完成之后并没有提示,直接去文件夹看吧)

自动切图(含WebP、SVG格式)

截止到这里,上面的还是是要手动拖拖拽拽各种设置,而且还是很麻烦,这里就介绍一下 ps 新出的黑科技,自动生成图像资源。

版本要求:ps cc

首先 打开Preferences(首选项),点击Plug-Ins(增效工具),确认Generate(生成器)-> Image Assets(图像资源)为启用状态

然后点击菜单“文件->生成->图像资源”,确认该菜单项已被勾选;

其他小技巧

复制 css

对于一些图片有圆角阴影之类的效果,很难用眼睛去评估具体大小,这时候复制 样式的功能就很有用。选中图层点击右键 ,在编辑器里粘贴就可以看到你复制的内容。

tips:

1. 智能对象暂不支持”复制 CSS ” 功能,可以栅格化该图层再来使用。

2. 对于多个图层的批量获取,请选择多个图层,执行 ,将所选图层转为图层组。然后在该组上右击,选择”复制 CSS”,即可批量获取 CSS 代码。

打开关闭所有其他组

大多人都知道:点击图层/组前面的小眼睛可以显示关闭该图层/组

还有一个功能来打开/关闭所有其他图层:按住 再点击,效果如下

智能参考线

在测量间距的时候,智能参考线就可以大限身手了。

view(视图) -> show(显示) -> smart guides(智能参考线)

查看图层之间的距离:选定某个图层后,在按住 键(Mac)或 键(Windows)的同时将光标悬停在另一图层上方,就可以看到他们之间的距离。

当你的光标悬停在形状以外时候,Photoshop 会显示与画布之间的距离。

更多使用方法参见:网格和参考线

sketch

这里直接上一官方教程:

写在最后

因为本文写作场景是在 mac 下且 Photoshop 为英文版,所以本文的快捷键大多都是基于 mac 的,如果使用 windows 系统需要做相应的转换。以及,一些操作的命令主要为个人根据印象翻译,如果有不准确请见谅。

其他资源推荐:

Photoshop 常用快捷键:http://www.uisdc.com/45-handy-photoshop-shortcuts

最后推荐一个神器:CheatSheet,安装之后他会读取你目前在使用的软件的快捷键配置,并快速显示给你(就不用一个个层级去找了)。

使用方法:长按command

关于我们

蓬勃健康发展的CSTP北京中关村顺义基地是大学生、高中学生实训的最佳选择,国内唯一“国字头”互联网+教育工程。基地设多个专业:电商与新媒体运营、web前端工程师、java软件工程师, UI设计等。

互联网行业的年轻人,你们面对着怎样的职业瓶颈、困惑与未来选择?加入CSTP,让行业专家、技术大牛、教育专家、职业规划专家给你解惑吧!

或搜索ID“cstpcn”

中国软件专业人才培养工程

中关村知尚软件学院

国内唯一“国字头”互联网+教育工程

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180205A1FV6700?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券