前端人員必定要掌握的PS技巧

1、PS與前端知多少

通常咱們會認爲PS是用來修改圖片的，這些工做是美工人員作的事不是前端人員作的，其實這樣想你就錯了，由於在前端人員也是要學會一些簡單的關於PS的技巧的，這樣就不會應爲一點點小小的需求總是要麻煩負責美工的同事來幫你改動一點點，再者這樣也會對你的工做效率有所提升。在我看來其實前端人員須要掌握的PS知識大體上有這樣一些：切圖這個是必須的，也是本文的重中之重，而後是相應的對圖片進行修改，大體上前端也就須要掌握這些PS內容就夠了。除非你家公司沒有美工人員或者是老闆想省錢不招美工，所有的東西都由你作這個除外。

 

2、切圖

 切圖這個相信你們都應該知道是什麼意思吧，這裏就很少作解釋。若是是對圖片要求比較寬鬆的人員來講，直接使用faststone這個工具就好了。可是這樣切出來的圖片通常十分的不精準，並且你們有沒有注意到這樣切出的圖片背景不是透明的。做爲一個完美主義者的我。是必定不會使用這個方法的下面咱們就來學習一下哪些方法能夠精確的將圖片切出。

2.1 自動化切圖

 自動化顧名思義就是不用咱們人工去操做的，經過計算機腳本幫助咱們進行切圖，這樣作的好處是十分精準和方便。可是若是切去的圖片較多的時候是十分適宜的，可是若是隻切去一小部分的圖片。建議你仍是使用下面的手工切圖

 一、步驟以下：首先打開一張PSD文件，這裏強調必定要是PSD文件。由於腳本的運行依據是圖層，只有PSD文件才存在圖層這種說法

 我使用的是下面的這張圖片，圖片素材在下面

PS:博主絕非廣告狗，有誰但願本人寫博文順便對其產品進行宣傳的也可私聊哈

素材milk.psd下載地址：http://pan.baidu.com/s/1kVzYy5h

一、第一步選擇以下說是：

 

二、第二步參數以下所示：

這裏特別要注意的一點是第一個紅色的方框必定要是英文，由於博主使用的是CS5版本，這樣設置會發生錯誤，其餘的版本就不清楚了。爲了不出錯，咱們統一使用英文命名，第二個方框我建議選擇PNG，由於png支持背景透明，這個有利於咱們作自動切圖

 

最終咱們在運行後的test文件夾下面打開效果以下，同時圖片背景也是透明的

是否是這樣切出來的圖片既美觀又方便呢？可是這樣切圖算是對計算機運算能力的考驗，有時候PS軟件還會出現假死的現象，因此在作切圖的時候咱們須要在人工時間和計算機時間上面作一個權衡，畢竟不是什麼都是自動化就是好的。對了，文件前綴名也不能爲漢字，這個博主卻是給忘了，你們將就一下吧。

 

2.2 手工切圖

這裏的手工切圖是基於PS軟件來實現的，即便是手工切圖，PS軟件仍是有不少地方優於直接使用如faststone之類的工具，因爲PS軟件有圖層的區分，因此會捕獲圖層的邊界，從而達到自動捕獲的功能(有時候也是不能進行自動捕獲的)

仍是以上述的圖片爲例：

首先咱們應該從標尺中拉去參考線，若是是沒有標尺的話咱們能夠在試圖下面勾選標尺

拉完標尺參考線後，咱們選擇切片工具（不知道的本身百度），選擇上方的，效果圖以下

 這個時候咱們會發現像中間的那個字體和牛奶都被分紅了幾部分，可是咱們是想要保持一個總體的，這個怎麼辦呢？咱們能夠在相應要合成一個總體的切片上面右擊，選擇刪除切片。這樣就合成了一個總體

PS:因爲中間的字體太太小，咱們能夠經過ctrl+"+"/ctrl+"-"來控制放大或者縮小

咱們按下圖所示進行選擇

       

點擊存儲爲，這樣你的工做就行了，剩下的就是計算機的事了，坐等結果就能夠了。

 

3、總結

 本來想着將一些相關的美化什麼的也寫一寫，可是感受這樣跑題了，今天咱們是要談論前端對PS的應用，若是美化什麼的都作了，那麼不是搶了美工的飯碗嗎，因此掌握切圖對於一個前端工程師已經就夠了，並且不少公司的切圖都是由美工人員完成的，總的一句話，前端工程師代碼寫的溜什麼毛線事都沒有