前端工程師如何搞定設計

前端是一個承上啓下的職位，正由於其位置的特殊性致使其必須瞭解設計和後臺的一些基本知識。本文並不是教你們如何取代設計的工做，而是講解前端如何更快更便捷的實現一些簡單的設計任務，在沒有設計師的狀況下如何利用工具解決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等，這些框架的誕生均可以很好的給咱們提供快速一站式的前端解決方案，使前端無圖化設計的應用日趨繁榮。

總結

一個網站的實現離不開設計師的美化和產品經理的規劃，前端只是承接這一步的重要一環，而不是能夠替代這一步的一環，咱們所能作的是在缺少上一環的狀況下儘量的利用工具和知識來彌補不足，而最終是爲了更友好的將內容呈現給用戶。