前端一键切图

前端切图

刚学习前端的技术的童鞋们，往往对PS很痛苦，虽然前端不用再设计网页，但前端还是需要会些PS。下面介绍下几个实用的Photoshop技巧（以Adobe Photoshop CS5为例）。

1.调整局部颜色

如果我们需要对图片的局部颜色进行更改，比如我想将下方图片的背景变为黑色，我们可以点击“选择” -> “色彩范围” -> 选中背景区域 -> 调整颜色容差即可

（1）选择范围

（2）点击确定后，填充颜色

当然除了使用“色彩范围”外，还可以使用“索套工具”或者“选择工具”来建立选区，这里就不做介绍了，建立复杂的选区也需要相对复杂的操作。

3.一键切图

切图应该说是前端经常要做的事情，在切图的过程中如果遇到图层过于复杂图片又过于渺小的情况，我们往往需要放大整个图片并隐藏额外的图层来选择我们需要的图形区域，这相当的浪费时间和精力。这里介绍下我们如何通过Photoshop的动作功能来实现一键切图的效果。

（1）下载动作
请戳这里下载动作文件：
https://pan.baidu.com/s/1qY3yuQC

（2）载入动作

将刚刚下载的动作文件载入即可

（3）使用动作

载入完成后，打开任一psd文件，步骤如下：

a.首先我们选择“移动工具”，将“自动选择”勾选
b.点击我们要切的图标，在图层面板中我们可以看到对应的图层已经被定位到
c.按下F2，图标就成功切到了
d.按下F3保存为web所用格式

关于Photoshop的技巧还有很多，以上只列出几个对于前端来说比较常用的三个，只要我们熟悉像这样的一些实用技巧，就可以节省很大的时间和精力。

工具及网站使用

1.图片压缩

如果你想要压缩一张图片，除了利用Photoshop修改品质外，我们还可以利用一些自动化工具进行压缩，比如glup、grunt等。

当你不具备以上开发环境和工具时，我这里推荐一个压缩图片的网站，地址为：https://tinypng.com/。

其采用了智能的有损压缩技术，通过选择性地降低在图像中的颜色的数量，减少字节的存储数据量，其效果是几乎看不见，但它可以很大程度的减少图片的大小。

通过官网的实例我们来对比下两张图片压缩前后的变化：

同样的一张图片，压缩后比压缩前减少了近1/4的体积，但是图片清晰度任然和压缩前一样。

转载至前端呼啦圈（Love-FED）