Web前端—前端高效开发之“一键切图”教程

            作为一名Web前端人员，工作中难免都会要接触切图这一块，那么如何把图快速切好且又不浪费时间呢？相信很多人切图都是先把图片放大再使用矩形工具或切片工具来切图，这样其实好麻烦且有时不一定切得精准，下面笔者将介绍两种快速切图的方法—— “一键切图”。

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

   插件下载地址及官网教程：Cutterman - 最好用的切图工具

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

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

   下载地址：一键切图

演示：

  1：载入动作

   步骤：菜单—窗口—动作

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

  

  2：一键切图

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

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

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

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

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