hai,how is it going？I'm MuQing.I come back。哈哈，最近在英語的路上奮戰，小秀一下。又好久沒寫博客了，實習的生活漸行漸遠了，回到學校也終於能夠坐下來對很多東西進行沉淀和總結。今天就跟大家來聊聊前端需要會的PS那點事。
前端PS技巧有兩大類：1 測量和取色 2 切圖 1不用說，開發需要2，切圖其實也是必備，說實話當我一開始知道前端需要自己切圖的時候，我的內心是抗拒，但是后來我慢慢的發現，我是幸運的，切圖真的是前端必會的技能。為啥呢，因為我們是前端，所以我們更清楚自己需要什么的圖片。而且如果他們沒有切出我們想要的圖片或者有什么簡單的改動，我們還得和UI溝通，改動，傳文件，不僅效率低，而且神麻煩。你永遠不知道一個項目會有多少改動，說多了都是淚，所以學會了切圖，這都不是事兒！let's go.
1 下載工具PS
下載鏈接：http://www.lvyestudy.com/software/software0005.aspx
我是在這個網站下載了，下的是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 選擇圖片要以哪種格式存儲了，不同的格式會影響圖片的質量和大小，自然也會影響到就加載速度，這里我推薦我最近讀的不錯的一篇文章，看完保證你收獲滿滿： jpg,png等圖片的區別
5 常用快捷鍵（快捷鍵是開發效率必備利器，多多練習）
放大/縮小：Alt+鼠標滾輪
拖動圖片：長按空格鍵，鼠標會變成小手即可拖拽圖片
取消選框：ctrl+D
隱藏參考線：ctrl+h
復制文件：ctrl+c
新建文件：ctrl+N
粘貼文件：ctrl+v
關於切圖，也是件麻煩事，現在出了很多切圖，標注能插件也很方便，大家可以看這篇文章 解放你的雙手（順便說下，很多工具都是最新的
PS版本才支持，所以要去下載對應的，本人還未實踐）
以上內容都是我工作以及在很多地方學習的，有新的會繼續更新，如有錯誤和不足歡迎糾正。