前端小技能：切图小技巧

一名web前端工程师，在工作中都要接触到切图这一方面，那么我们如何提升切图的能力呢？

我相信很多人都是先把图片图片放大再使用矩形工具或切片工具来切图，这样其实好麻烦且有时不一定切得精准，下面我就为大家说两种快速切图的方法 — “一键切图”。

方法一：

如果你的photoshop版本是CC 或CC2014及更高版本的，那么你可以在你的photoshop中安装一款叫 Cutterman的插件。Cutterman是一款运行在photoshop中的插件，能够自动将你需要的图层进行输出， 以替代传统的手工 "导出web所用格式" 以及使用切片工具进行挨个切图的繁琐流程； 它支持各种各样的图片尺寸、格式、形态输出，方便你在pc、ios、Android等端上使用； 它不需要你记住一堆的语法、规则，纯点击操作，方便、快捷，易于上手。

方法二：

如果你的photoshop版本是CS6，那么可以在你的photoshop中载入“一键切图”的动作，让你选中图片后只需轻轻一按F2，图片就快速精准的切好了。

思路:将你复杂的操作流程记录为一个简单的photoshop‘动作’。

这里还是要推荐下小编的web前端学习 群 : 687958461，不管你是小白还是大牛，小编我都欢迎，不定期分享干货，包括小编自己整理的一份最新的web前端资料和0基础入门教程，欢迎初学和进阶中的小伙伴。在不忙的时间我会给大家解惑。

演示：

1：载入动作

步骤：菜单—窗口—动作

按上述步骤打开动作面板，点击右上角（图中1），出现下拉菜单，选择载入动作(图中二)，将下载的“一键切图”动作载入。

2：一键切图

目标：将图中的“日历”小图标切出

步骤：①点击“移动工具”，将“自动选择”勾选并选择“图层”（见下图步骤1）。

②点击图中的日历小图标，右下角（图中步骤2）可以看到已经选中图层了，再点击图层上的“小眼睛”，查看日历图标是否隐藏，用来确定我们是否选中了图标。

③按下键盘“F2”（图中步骤3），这样就完成了切图，具体如下：

最后，点击菜单选择“存储为Web格式”，或同时按下键盘“ctrl+shift+alt+s”把图片保存起来，当然，你也可以根据笔者的思路来把这个流程操作保存为“动作”，然后一键搞定。