前端切图技巧

Photoshop
留言

前端开发免不了要切图，面对复杂的页面，仅切图工作就会花费大量的时间。对于追求高效率的我来说这是不可忍受的，并且规划好页面后，切图工作并不需要消耗多少脑细胞，都是很机械化的东西。所以在网上搜了搜一下几种高效的前端切图方法，分析其各自的特点及使用场景并总结归纳出自己常用的切图方法。

photoshop cc下载

我这里使用的是photoshop cc 2017
下载地址可使用我的网盘中地址https://pan.baidu.com/s/1c2nmfJy 密码：7u04，
文件夹中包括

  1. 安装文件set-up.exe;
  2. 破解文件amtemu破解方法;
  3. 前端切图插件cutterman.

个人初始化设置

首选项设置

编辑->首选项->单位与标尺 单位改为像素

移动工具设置

工具栏 自动选择->图层

视图设置

打开标尺和智能参考线

窗口设置

打开图层 信息 cutterman 历史记录 其他的面板可关闭
信息右侧设置->面板选项 -> 颜色模式RGB 单位像素 勾上文档尺寸和文档大小
窗口-> 工作区->新建工作区->前端切图->存储

传统切图方法

切片切图

用切片工具先将需要切的图定好大小，然后存储为web所用格式，点击保存在生成文件中可看到需要切出的图片

智能对象切图

将需要切出的图层保存为智能对象，双击改智能对象，ctrl+i+r,基于透明像素裁剪，裁剪完后另存为web所用格式

高效切图方法

启用生成器

  1. 在首选项->增效工具->生成器 面板中勾选启用生成器
  2. 将所需要切图的图层添加.png或.jpg后缀,例如图层1改为图层1.png
  3. 在原PSD文件同级目录中为自动生成assets文件夹，这里面包含了自动切好的图片

cutterman扩展

在官网中下载并安装扩展,注意ps的版本要求

  1. 设置好相关参数，保存目录，图片格式品质等;
  2. 选中要切出的图层;
  3. 点击导出选中图层,即可在保存目录中看到需要切的图

以上的这些方法我都使用过，目前使用的最多的是使用cutterman切图，如果大家有更好的切图方法，还希望评论告知，一起交流_