hai,how is it going？I'm MuQing.I come back。哈哈，最近在英語的路上奮戰，小秀一下。又好久沒寫部落格了，實習的生活漸行漸遠了，回到學校也終於能夠坐下來對很多東西進行沉澱和總結。今天就跟大家來聊聊前端需要會的PS那點事。

      前端PS技巧有兩大類：1 測量和取色  2 切圖  1不用說，開發需要2，切圖其實也是必備，說實話當我一開始知道前端需要自己切圖的時候，我的內心是抗拒，但是後來我慢慢的發現，我是幸運的，切圖真的是前端必會的技能。為啥呢，因為我們是前端，所以我們更清楚自己需要什麼的圖片。而且如果他們沒有切出我們想要的圖片或者有什麼簡單的改動，我們還得和UI溝通，改動，傳檔案，不僅效率低，而且神麻煩。你永遠不知道一個專案會有多少改動，說多了都是淚，所以學會了切圖，這都不是事兒！let's  go.

    1 下載工具PS

我是在這個網站下載了，下的是CS6，如果你有更喜歡的也可以用別的。（順便說一下這個網站有很多前端的教程講的很不錯，而且特別清晰易懂，我之前收穫很多，建議初學者可以多看看）

    2  設定工具

       開啟PS首先準備我們需要的工具，PS博大精深，我們只需要用切圖需要的工具就OK了。我們需要的一般有以下這些：

       1 左邊和上面的選單欄：確定是存在的

       2 資訊面板：視窗--資訊--右上角滑鼠右鍵找到面板選項---標尺的單位改成畫素

       3 歷史記錄：視窗--歷史記錄（當我們有錯誤時，可以通過歷史記錄直接回到某個位置）

       4 圖層 ：視窗--圖層

5 標尺： 先開啟一張圖片（有圖片標識才能用），找到檢視--標尺 ，標尺可以拉出參考線，幫助我們切圖  。

       6 建立工作區:  視窗--工作區--新建工作區--起名字--儲存工作區（儲存工作區就是儲存當前你對PS軟體的設定，即使你關閉了PS軟體，再開啟還是你的設定，工作區可以建立多個）

我的設定如下圖：

 3  測量和取色

     【測量寬高】工具：參考線，矩形選框，資訊面板。

 1  從標尺上拉出參考線（在標尺上按住滑鼠左鍵不鬆往你想要地方拉，就會出現一根線，上下左右都可以，也可以不拉，拉了會更精確些，選框會自動吸附到參考線上）

       2  找到矩形選框（切圖一般都用矩形選框，沒用過別的，選中你要測量的地方，選中的時候你可以看兩個地方：1 滑鼠位置有顯示寬高  2 資訊面板也有顯示。不過當你鬆開滑鼠，就只有資訊面板有顯示資訊了，如下。

      【取色】：取色器+吸管工具

 1 點選取色器，會出現一個面板，這個時候把滑鼠放在圖片上會發現自動變成了吸管工具，不用專門去找，然後點選你想要取的顏色，面板上就出現你想要的資訊。

（還可以用取色器檢查你的按鈕或者背景是不是是純色）

     【文字的測量和取色】：文字工具（ 文字比較特別直接用寬高量可能量不準，所以優先用文字工具）

  1 找到文字工具，點選你想要測量的文字，圖層那邊會自動移到文字圖層的位置，看選單上面，有你想要的字型大小和顏色以及字型的型別。

      2 有可能你的文字不是單獨的圖層，這個時候就只能用選框和取色器測量了。

      3 有可能你發現你看到的文字和你測出來的不一樣，那就是文字圖層加了別的效果，這個時候還是用取色器取。

    4 切圖 ：切片工具

        1 確定需要切的圖（有的圖是上線的時候從後端載入過來的，所以不用切）。

        2 可以用iconfont圖示的就用，不能用的小圖示就用CSS sprite.

        3 能弄出來就不要切圖，圖片影響載入速度。

        4 切片工具--你要切的圖--圖層面板中，關掉不需要的元素----用切片工具選中圖--匯出切片(快捷鍵alt+shift+ctrl+s  ）或者（檔案--指令碼--儲存為web所用格式）

        5 選擇圖片要以哪種格式儲存了，不同的格式會影響圖片的質量和大小，自然也會影響到就載入速度，這裡我推薦我最近讀的不錯的一篇文章，看完保證你收穫滿滿：    

     5 常用快捷鍵（快捷鍵是開發效率必備利器，多多練習）

       放大/縮小：Alt+滑鼠滾輪

       拖動圖片：長按空格鍵，滑鼠會變成小手即可拖拽圖片

       取消選框：ctrl+D

      隱藏參考線：ctrl+h

複製檔案：ctrl+c

      新建檔案：ctrl+N

      貼上檔案：ctrl+v

關於切圖，也是件麻煩事，現在出了很多切圖，標註能外掛也很方便，大家可以看這篇文章 解放你的雙手（順便說下，很多工具都是最新的

PS版本才支援，所以要去下載對應的，本人還未實踐）

以上內容都是我工作以及在很多地方學習的，有新的會繼續更新，如有錯誤和不足歡迎糾正。