前端一鍵切圖

前端切圖

剛學習前端的技術的童鞋們，每每對PS很痛苦，雖然前端不用再設計網頁，但前端仍是須要會些PS。下面介紹下幾個實用的Photoshop技巧（以Adobe Photoshop CS5爲例）。

1.調整局部顏色

若是咱們須要對圖片的局部顏色進行更改，好比我想將下方圖片的背景變爲黑色，咱們能夠點擊「選擇」 -> 「色彩範圍」 -> 選中背景區域 -> 調整顏色容差便可

（1）選擇範圍

（2）點擊肯定後，填充顏色

固然除了使用「色彩範圍」外，還可使用「索套工具」或者「選擇工具」來創建選區，這裏就不作介紹了，創建複雜的選區也須要相對複雜的操做。

3.一鍵切圖

切圖應該說是前端常常要作的事情，在切圖的過程當中若是遇到圖層過於複雜圖片又過於眇小的狀況，咱們每每須要放大整個圖片並隱藏額外的圖層來選擇咱們須要的圖形區域，這至關的浪費時間和精力。這裏介紹下咱們如何經過Photoshop的動做功能來實現一鍵切圖的效果。

（1）下載動做
請戳這裏下載動做文件：
https://pan.baidu.com/s/1qY3yuQC

（2）載入動做

將剛剛下載的動做文件載入便可

（3）使用動做

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

a.首先咱們選擇「移動工具」，將「自動選擇」勾選
b.點擊咱們要切的圖標，在圖層面板中咱們能夠看到對應的圖層已經被定位到
c.按下F2，圖標就成功切到了
d.按下F3保存爲web所用格式

關於Photoshop的技巧還有不少，以上只列出幾個對於前端來講比較經常使用的三個，只要咱們熟悉像這樣的一些實用技巧，就能夠節省很大的時間和精力。

工具及網站使用

1.圖片壓縮

若是你想要壓縮一張圖片，除了利用Photoshop修改品質外，咱們還能夠利用一些自動化工具進行壓縮，好比glup、grunt等。

當你不具有以上開發環境和工具時，我這裏推薦一個壓縮圖片的網站，地址爲：https://tinypng.com/。

其採用了智能的有損壓縮技術，經過選擇性地下降在圖像中的顏色的數量，減小字節的存儲數據量，其效果是幾乎看不見，但它能夠很大程度的減小圖片的大小。

經過官網的實例咱們來對比下兩張圖片壓縮先後的變化：

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

轉載至前端呼啦圈（Love-FED）