前端工程师如何搞定设计

前端是一个承上启下的职位，正因为其位置的特殊性导致其必须了解设计和后台的一些基本知识。本文并非教大家如何取代设计的工作，而是讲解前端如何更快更便捷的实现一些简单的设计任务，在没有设计师的情况下如何利用工具解决UI呈现的问题，让工作事半功倍。

Photoshop使用 大多数前端工程师都有过切图的经历，也就是将设计师制作的PSD等格式的图片按照需求切成项目需要的大小并实现页面的呈现，那么作为一名合格的前端工程师，我们有必要了解并熟练的掌握Photoshop的一些功能，下面介绍下几个实用的Photoshop技巧（以Adobe Photoshop CS5为例）。 1.调整图片大小 如果你在网络上找到了一张图片或者从设计师那里拿到一张图片用于网页中呈现，但是对图片的大小不满意的话，你只需要利用Photoshop进行调整即可，步骤很简单，如下： （1）利用Photoshop打开图片并点击“图像” -> 选择“图像大小”

（2）修改你想要的宽度和高度

这里我们一般修改像素大小即可，修改的时候如果不勾选下方的“约束比例”，那么图像可能会被拉扯变形，勾上可以防止宽高比例的失调，即在原图比例的基础上缩放。 2.调整局部颜色 如果我们需要对图片的局部颜色进行更改，比如我想将下方图片的背景变为黑色，我们可以点击“选择” -> “色彩范围” -> 选中背景区域 -> 调整颜色容差即可
（1）选择范围

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

当然除了使用“色彩范围”外，还可以使用“索套工具”或者“选择工具”来建立选区，这里就不做介绍了，建立复杂的选区也需要相对复杂的操作。 3.一键切图 切图应该说是前端经常要做的事情，在切图的过程中如果遇到图层过于复杂图片又过于渺小的情况，我们往往需要放大整个图片并隐藏额外的图层来选择我们需要的图形区域，这相当的浪费时间和精力。这里介绍下我们如何通过Photoshop的动作功能来实现一键切图的效果。
（1）下载动作 请戳这里下载动作文件：
http://note.youdao.com/yws/pu
（2）载入动作

将刚刚下载的动作文件载入即可
（3）使用动作 载入完成后，打开任一psd文件，步骤如下：
a.首先我们选择“移动工具”，将“自动选择”勾选
b.点击我们要切的图标，在图层面板中我们可以看到对应的图层已经被定位到
c.按下F2，图标就成功切到了
d.按下F3保存为web所用格式


关于Photoshop的技巧还有很多，以上只列出几个对于前端来说比较常用的三个，只要我们熟悉像这样的一些实用技巧，就可以节省很大的时间和精力。
工具及网站使用
1.图片压缩 如果你想要压缩一张图片，除了利用Photoshop修改品质外，我们还可以利用一些自动化工具进行压缩，比如glup、grunt等。 当你不具备以上开发环境和工具时，我这里推荐一个压缩图片的网站，地址为：https://tinypng.com/。 其采用了智能的有损压缩技术，通过选择性地降低在图像中的颜色的数量，减少字节的存储数据量，其效果是几乎看不见，但它可以很大程度的减少图片的大小。
2.图标下载 很多时候当我们的团队中缺乏设计或者设计不在时，如果项目中需要一个logo或者图标，我们其实可以自己搞定。通过百度搜到的图片大都不符合我们的需求，这里我推荐一个比较好用的图标库easyicon，拥有海量的图标资源，地址为：http://www.easyicon.net/
如下图所示，我们只需要输入我们需要的图标名称，便可以搜索出大量图标：

我们选择需要的图标时，会出现详细的下载页，我们可以选择我们需要的图标格式比如PNG、ICO或者ICONS，同时我们还可以选择需要的图标大小进行下载，如下：

相信只需这一个网站就可以满足你的图标需求了。