前端一键切图

前端切图

刚学习前端的技术的童鞋们，每每对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）