前端工程师如何搞定设计

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

Photoshop使用

大多数前端工程师都有过切图的经历，也就是将设计师制做的PSD等格式的图片按照需求切成项目须要的大小并实现页面的呈现，那么做为一名合格的前端工程师，咱们有必要了解并熟练的掌握Photoshop的一些功能，下面介绍下几个实用的Photoshop技巧（以Adobe Photoshop CS5为例）。

1.调整图片大小

若是你在网络上找到了一张图片或者从设计师那里拿到一张图片用于网页中呈现，可是对图片的大小不满意的话，你只须要利用Photoshop进行调整便可，步骤很简单，以下：

（1）利用Photoshop打开图片并点击“图像” -> 选择“图像大小”

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

这里咱们通常修改像素大小便可，修改的时候若是不勾选下方的“约束比例”，那么图像可能会被拉扯变形，勾上能够防止宽高比例的失调，即在原图比例的基础上缩放。

2.调整局部颜色

若是咱们须要对图片的局部颜色进行更改，好比我想将下方图片的背景变为黑色，咱们能够点击“选择” -> “色彩范围” -> 选中背景区域 -> 调整颜色容差便可

（1）选择范围

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

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

3.一键切图

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

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

（2）载入动做

将刚刚下载的动做文件载入便可

（3）使用动做

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

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

关于Photoshop的技巧还有不少，以上只列出几个对于前端来讲比较经常使用的三个，只要咱们熟悉像这样的一些实用技巧，就能够节省很大的时间和精力。

工具及网站使用

1.图片压缩

若是你想要压缩一张图片，除了利用Photoshop修改品质外，咱们还能够利用一些自动化工具进行压缩，好比glup、grunt等。

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

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

经过官网的实例咱们来对比下两张图片压缩先后的变化：

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

2.图标下载

不少时候当咱们的团队中缺少设计或者设计不在时，若是项目中须要一个logo或者图标，咱们其实能够本身搞定。经过百度搜到的图片大都不符合咱们的需求，这里我推荐一个比较好用的图标库easyicon，拥有海量的图标资源，地址为：http://www.easyicon.net/

以下图所示，咱们只须要输入咱们须要的图标名称，即可以搜索出大量图标：

当咱们选择须要的图标时，会出现详细的下载页，咱们能够选择咱们须要的图标格式好比PNG、ICO或者ICONS，同时咱们还能够选择须要的图标大小进行下载，以下：

相信只需这一个网站就能够知足你的图标需求了。

3.字体下载

这里的字体主要指纯色的字体图标，如今不少网站的icon图标都是以字体的形式嵌入，这样咱们能够必定程度的减小网页中图片的请求数量，同时也便于维护。这里我推荐几款比较热门的字体图标库：

（1）阿里巴巴矢量图标库：http://www.iconfont.cn/

经过淘宝的这个图标库，咱们能够轻松的管理及下载咱们须要的字体图标，同时还能够制做和上传咱们的图标，对于喜欢的图标还能够进行收藏。

（2）icomoon图标库：https://icomoon.io/

这是一个国外的网站，也提供了一系列的字体图标资源，一样具有了图标下载收藏等功能，不过有些字体图标须要收费。

（3）fontawesome图标库：http://fontawesome.io/

fontawesome是一个以导入CSS文件的形式加载的图标库，适合中后台项目的开发使用。

4.模板下载

这里的模板能够是PSD格式的文件，也能够是JPG等图片格式，通常不少设计师都会从这些网站上寻找素材和灵感，因此咱们能够直接拿过来参考和使用，对于咱们网站的原型制做颇有帮助，固然这也是在缺少设计师的状况下前端可以快速实现页面设计的捷径。

（1）UI中国：http://www.ui.cn/
（2）UE设计平台：http://www.uehtml.com/
（3）UI制造者：http://www.uimaker.com/
（4）Hiiishare：http://www.hiiishare.com/
（5）学UI网：http://www.xueui.cn/

库框架使用

这里的框架主要指的是前端开发中的UI框架，合理的利用UI框架能够在美化页面的同时提升工做效率和开发成本。

1.适合PC端

（1）Bootstrap：http://www.bootcss.com/

Bootstrap应该算得上是最先流行的前端UI框架之一，其面世以后不只大大方便了前端开发人员的工做，同时也方便了后台开发人员构建前端页面。

（2）flat-ui：http://www.bootcss.com/p/flat...

flat-ui是一款免费的WEB界面工具组件库，其UI风格十分扁平化，相比Bootstrap其更简洁小巧。

（3）jQuery-ui：http://jqueryui.com/

jQuery-ui是jQuery的官方UI库，其在提升CSS样式美化的同时也提供了一系列的JS组件供开发者使用，同时也支持定制功能。

2.适合移动端

（1）Foundation：http://foundation.zurb.com/

Foundation是一款体积小而且提供响应式布局的移动端优先的UI工具库。

（2）Amazeui：http://amazeui.org/

Amazeui是中国首个开源 HTML5 跨屏前端框架。其以移动优先为理念，从小屏逐步扩展到大屏，最终实现全部屏幕适配，适应移动互联潮流。

（3）MUI：http://dev.dcloud.net.cn/mui/

MUI是一款最接近原生APP体验的高性能前端框架，其不依赖任何第三方JS库，轻量是其重要特征。

3.其余

随着目前富应用框架的热潮，不少前端JS框架都拥有本身的UI框架选择，好比Vue的vux、vue-starp，React的ant-design等，这些框架的诞生均可以很好的给咱们提供快速一站式的前端解决方案，使前端无图化设计的应用日趋繁荣。

总结

一个网站的实现离不开设计师的美化和产品经理的规划，前端只是承接这一步的重要一环，而不是能够替代这一步的一环，咱们所能作的是在缺少上一环的状况下尽量的利用工具和知识来弥补不足，而最终是为了更友好的将内容呈现给用户。

本文首发于微信公众号：前端呼啦圈（Love-FED）
同步发表于：
http://www.cnblogs.com/luozhi...
https://segmentfault.com/a/11...
http://www.jianshu.com/p/b769...