|
前端是一个承上启下的职位，正由于其位置的特殊性引起其必须认识设计和后台的有些基本知识。本文并非教大众怎样取代设计的工作，而是讲解前端怎样更快更方便的实现有些简单的设计任务，在无设计师的状况下怎样利用工具处理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-ui/
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等，这些框架的诞生都能够很好的给咱们供给快速一站式的前端处理方法，使前端无图化设计的应用日趋繁荣。
总结
一个网站的实现离不开设计师的美化和制品经理的规划，前端只是承接这一步的重要一环，而不是能够替代这一步的一环，咱们所能做的是在缺乏上一环的状况下尽可能的利用工具和知识来弥补不足，而最后是为了更友好的将内容呈现给用户。
via：http://www.jianshu.com/p/b7690cc8893f
| 
发表于 2024-10-10 05:13:06