切圖應(yīng)該說是前端經(jīng)常要做的事情，在切圖的過程中如果遇到圖層過于復(fù)雜圖片又過于渺小的情況，我們往往需要放大整個圖片并隱藏額外的圖層來選擇我們需要的圖形區(qū)域，這相當?shù)睦速M時間和精力。這里介紹下我們?nèi)绾瓮ㄟ^Photoshop的動作功能來實現(xiàn)一鍵切圖的效果。

（1）下載動作
請戳這里下載動作文件：
https://pan.baidu.com/s/1i5I3nPb

（2）載入動作

將剛剛下載的動作文件載入即可

（3）使用動作

載入完成后，打開任一psd文件，步驟如下：

a.首先我們選擇“移動工具”，將“自動選擇”勾選
b.點擊我們要切的圖標，在圖層面板中我們可以看到對應(yīng)的圖層已經(jīng)被定位到
c.按下F2，圖標就成功切到了
d.按下F3保存為web所用格式

關(guān)于Photoshop的技巧還有很多，以上只列出幾個對于前端來說比較常用的三個，只要我們熟悉像這樣的一些實用技巧，就可以節(jié)省很大的時間和精力。

工具及網(wǎng)站使用

1.圖片壓縮

如果你想要壓縮一張圖片，除了利用Photoshop修改品質(zhì)外，我們還可以利用一些自動化工具進行壓縮，比如glup、grunt等。

當你不具備以上開發(fā)環(huán)境和工具時，我這里推薦一個壓縮圖片的網(wǎng)站，地址為：https://tinypng.com/。

其采用了智能的有損壓縮技術(shù)，通過選擇性地降低在圖像中的顏色的數(shù)量，減少字節(jié)的存儲數(shù)據(jù)量，其效果是幾乎看不見，但它可以很大程度的減少圖片的大小。

通過官網(wǎng)的實例我們來對比下兩張圖片壓縮前后的變化：

同樣的一張圖片，壓縮后比壓縮前減少了近1/4的體積，但是圖片清晰度任然和壓縮前一樣。

2.圖標下載

很多時候當我們的團隊中缺乏設(shè)計或者設(shè)計不在時，如果項目中需要一個logo或者圖標，我們其實可以自己搞定。通過百度搜到的圖片大都不符合我們的需求，這里我推薦一個比較好用的圖標庫easyicon，擁有海量的圖標資源，地址為：http://www.easyicon.net/

如下圖所示，我們只需要輸入我們需要的圖標名稱，便可以搜索出大量圖標：

當我們選擇需要的圖標時，會出現(xiàn)詳細的下載頁，我們可以選擇我們需要的圖標格式比如PNG、ICO或者ICONS，同時我們還可以選擇需要的圖標大小進行下載，如下：

相信只需這一個網(wǎng)站就可以滿足你的圖標需求了。

3.字體下載

這里的字體主要指純色的字體圖標，現(xiàn)在很多網(wǎng)站的icon圖標都是以字體的形式嵌入，這樣我們可以一定程度的減少網(wǎng)頁中圖片的請求數(shù)量，同時也便于維護。這里我推薦幾款比較熱門的字體圖標庫：

（1）阿里巴巴矢量圖標庫：http://www.iconfont.cn/

通過淘寶的這個圖標庫，我們可以輕松的管理及下載我們需要的字體圖標，同時還可以制作和上傳我們的圖標，對于喜歡的圖標還可以進行收藏。

（2）icomoon圖標庫：https://icomoon.io/

這是一個國外的網(wǎng)站，也提供了一系列的字體圖標資源，同樣具備了圖標下載收藏等功能，不過有些字體圖標需要收費。

（3）fontawesome圖標庫：http://fontawesome.io/

fontawesome是一個以導(dǎo)入CSS文件的形式加載的圖標庫，適合中后臺項目的開發(fā)使用。

4.模板下載

這里的模板可以是PSD格式的文件，也可以是JPG等圖片格式，一般很多設(shè)計師都會從這些網(wǎng)站上尋找素材和靈感，所以我們可以直接拿過來參考和使用，對于我們網(wǎng)站的原型制作很有幫助，當然這也是在缺乏設(shè)計師的情況下前端能夠快速實現(xiàn)頁面設(shè)計的捷徑。

（1）UI中國：http://www.ui.cn/
（2）UE設(shè)計平臺：http://www.uehtml.com/
（3）UI制造者：http://www.uimaker.com/
（4）Hiiishare：http://www.hiiishare.com/
（5）學(xué)UI網(wǎng)：http://www.xueui.cn/

庫框架使用

這里的框架主要指的是前端開發(fā)中的UI框架，合理的利用UI框架可以在美化頁面的同時提高工作效率和開發(fā)成本。

1.適合PC端

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

Bootstrap應(yīng)該算得上是最早流行的前端UI框架之一，其面世之后不僅大大方便了前端開發(fā)人員的工作，同時也方便了后臺開發(fā)人員構(gòu)建前端頁面。

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

flat-ui是一款免費的WEB界面工具組件庫，其UI風(fēng)格十分扁平化，相比Bootstrap其更簡潔小巧。

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

jQuery-ui是jQuery的官方UI庫，其在提高CSS樣式美化的同時也提供了一系列的JS組件供開發(fā)者使用，同時也支持定制功能。

2.適合移動端

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

Foundation是一款體積小并且提供響應(yīng)式布局的移動端優(yōu)先的UI工具庫。

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

Amazeui是中國首個開源 HTML5 跨屏前端框架。其以移動優(yōu)先為理念，從小屏逐步擴展到大屏，最終實現(xiàn)所有屏幕適配，適應(yīng)移動互聯(lián)潮流。

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

MUI是一款最接近原生APP體驗的高性能前端框架，其不依賴任何第三方JS庫，輕量是其重要特征。

3.其他

隨著目前富應(yīng)用框架的熱潮，很多前端JS框架都擁有自己的UI框架選擇，比如Vue的vux、vue-starp，React的ant-design等，這些框架的誕生都可以很好的給我們提供快速一站式的前端解決方案，使前端無圖化設(shè)計的應(yīng)用日趨繁榮。

總結(jié)

一個網(wǎng)站的實現(xiàn)離不開設(shè)計師的美化和產(chǎn)品經(jīng)理的規(guī)劃，前端只是承接這一步的重要一環(huán)，而不是可以替代這一步的一環(huán)，我們所能做的是在缺乏上一環(huán)的情況下盡可能的利用工具和知識來彌補不足，而最終是為了更友好的將內(nèi)容呈現(xiàn)給用戶。

轉(zhuǎn)載于:https://www.cnblogs.com/axl234/p/6207408.html

總結(jié)

以上是生活随笔為你收集整理的前端切图的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。