前端是连接过去和未来的纽带。正是因为其职位的特殊性，所以必须了解一些设计和背景的基本知识。本文不是教大家如何代替设计的工作，而是讲解前端如何更快更方便的完成一些简单的设计任务，以及如何在没有设计师的情况下使用工具解决UI呈现问题，从而使工作更有效率。大多数使用Photoshop的前端工程师都有过裁图的经历，即将设计师制作的PSD等格式的图片裁剪成项目需要的尺寸，实现页面呈现。作为一名合格的前端工程师，我们有必要了解和熟练掌握Photoshop的一些功能。下面介绍一些实用的Photoshop技巧（以AdobePhotoshopCS5为例）。1.调整图片的大小如果你在网上找了一张图片或者从设计师那里得到了一张图片在网页上展示，但是你对图片的大小不满意，只需要用Photoshop来调整一下.步骤很简单，如下：(1)用Photoshop打开图片点击“图像”->选择“图像大小”(2)修改你想要的宽高这里我们一般修改像素大小，如果你不要勾选下面的“ConstrainRatio”，那么图像可能会被拉伸变形。勾选可以防止纵横比失衡，即在原图比例的基础上进行缩放。2.调整局部颜色如果我们需要改变图片的局部颜色，比如我想把下图的背景改成黑色，我们可以点击“选择”->“颜色范围”->选择背景区域->调整颜色内容（1）选择范围（2）点击确定后，当然除了使用“颜色范围”外，还可以使用“套索工具”或“选择工具”来创建选择区，这里不做介绍。建立复杂的选区也需要相对复杂的操作。3、一键切图图片切图应该说是前端经常做的事情。在裁剪图片的过程中，如果图层过于复杂，图片太小，我们往往需要放大整个图片，隐藏掉多余的图层。要选择我们需要的图形区域，这是相当浪费时间和精力的。下面介绍一下如何通过Photoshop的动作功能实现一键剪切的效果。(1)下载动作，请点击这里下载动作文件：http://note.youdao.com/yws/pu...(2)加载动作，直接加载刚刚下载的动作文件(3）使用动作加载导入完成后，打开任意一个psd文件，步骤如下：首先，我们选择“移动工具”，勾选“自动选择”b．点击我们要剪切的图标，我们可以在图层面板中看到对应的图层已经定位好了c。按F2，图标会成功切到d。按F3保存为网络使用的格式。关于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等图片格式。一般很多设计师都会从这些网站上寻找素材和灵感，我们可以直接拿来参考和使用。对于我们的网站Prototyping是非常有帮助的，当然也是前端在没有设计师的情况下快速实现页面设计的捷径。(1)UI中国：http://www.ui.cn/(2)UE设计平台：http://www.uehtml.com/(3)UIMaker：http://www.uimaker.com/(4）Hiiishare：http://www.hiiiishare.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风格非常扁平，比Bootstrapcompact更加简洁.(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等，这些框架的诞生可以说是非常不错的为我们提供快速的一站式前端解决方案，让前端平面设计的应用越来越繁荣。综上所述，一个网站的实现离不开设计师的美化和产品经理的策划。前端只是这一步的重要部分，不是可以替代这一步的部分。我们能做的就是缺少前面的环节。在这种情况下，尽可能用工具和知识来弥补不足，最终把内容呈现给用户更友好。
