ps：多日后的補充說明
部分看了文章的設計師，來找我說怎么切圖。sorry？在我的理解，這就是切圖啊，但是他們所指的“切圖”是，怎么把設計圖制作成html頁面。
在我看來，現在人們對於前端都是有誤區的。認為前端是切圖的，（也確實是這么叫的，本人情感上很不願意聽前端被叫做“切圖的”）所以也會誤認為我的這篇文章是寫給設計師的。
其實不然，這篇文章適用於計算機出身的前端甚至后端、對於ps等設計軟件沒有基礎的人使用的，用來把設計師交於前端工程師的設計圖稿或者psd源文件提取、整理，轉化成布局頁面時使用的圖片。
再者，前端這個職業，很不希望被人認為是切圖的，現如今的前端工作，並不是單純的切一下ps圖那么簡單的事情。
本篇文章所展示的也只是前端工作中的滄海一粟、九牛一毛。。。
——————————————————————正文分割線——————————————————————————————
微微一運功，把家底都抖出來了。
不過，作為一個設計出身的前端來說，摸ps就和摸鍵盤一樣了
所以可能教程中還是有沒用過ps的人看不懂的地方，
歡迎加群討論：613512106。。。
———————--------------------------------------------------------------------PS切圖步驟說明————————————————————————————————
一共分兩大項：切jpg圖、切png圖。
我用的是PS CC 版本，教程中用到的除了界面和擺放位置不一樣外，其他應該和低版本的都一樣了。
一、切JPG圖
1．打開ps導入圖片的步驟是鐵定的了
2．選擇左邊工具欄里的“切片工具”
事先自己沒用過或上一次ps工具使用時沒有使用過“切片工具”的，打開ps工具欄里默認是“裁剪工具”的圖標
你可以鼠標左鍵點住“裁剪工具”不松手，他會在右邊展開（我這是工具欄在ps界面左側的情況下）這一組的所有工具，在里邊選擇“切片工具”即可
我圖中之所以框選了兩個工具，是因為后期還要用到“切片選擇工具”，這里先認識一下他的位置在哪。
3．用“切片工具”切出想要的范圍，框選范圍就像平時用qq的截圖工具一樣。
如下，我需要這個小圖標，我就框選了他。
框選中：
框選后：
如果你框選好了松開了鼠標，他還是這種黃色的邊線，你把“切片工具”移到附近，他還能調整框的大小范圍。
但是如果你框選了好幾個了，想改前邊已經框選好的：
像如上這樣，要知道，ps切片工具最近一個選區的切片是用黃色框包裹的，其他前邊切得都是藍色邊線，這時候你再用“切片工具”去調整藍色邊線的選區是動不了的。
這就要用上“切片選擇工具”了
4．“切片選擇工具”調整范圍：
切片選擇工具就在“切片工具”的下邊，尋找方法見上解。點擊選擇要調整的切片藍線，待其變成黃色后，調整范圍。
切片選擇工具只能選擇並調節范圍，不能切片。
5．切好后保存
- 保存方法：文件——存儲為web所用格式【快捷鍵ctrl+shift+alt+s】
- 在彈出的【存儲為web所用格式】對話框中，下拉選擇框選擇JPEG格式
- 按需求更改質量（低、中、高、非常高、最佳。這五個模式）
- 點擊存儲后彈出【將優化結果存儲為】的對話框
選擇存放位置、設置文件信息——
一般存儲時，ps會自動建立一個images文件夾，你要找到剛才自己設定的位置中，找images文件夾，在她里邊才有你剛才切好的圖。
- 命名文件名
- “格式“——僅限圖像
- 在“切片”那里，可以選擇是存儲全部切片還是只存儲選中的切片，
一般默認就存儲全部切片就好了，有時候只需要一小塊切片時，可以選擇存儲選中的切片，他會只保存一張你當前切得圖，這樣省的自己去一大堆切片中撿出來自己要用的了。
二、切PNG圖
切透明圖的核心理念是，你要把不需要的背景圖給隱藏掉，只讓需要的留下來，底部背景變成像馬賽克那樣的樣式。
1．打開ps拖進來你要切的psd或者tif文件，
一定得是帶圖層的。
2．先選擇移動工具
3．並在頂部選項欄里勾選自動選擇，
4．下拉框里選擇圖層
若沒有選項欄或者圖層欄的：
在菜單欄點擊窗口——選項。打了對勾后就能調出工具對應的選項面板了。
5．然后用“移動工具”點擊你不需要的背景圖，ps會自動選中該背景所在的圖層，
6．你在圖層面板中，把對應這層的左邊小眼睛關掉就好了，讓背景圖先隱藏起來。
有時候設計會有好幾層，他為了光效或者其他效果做了好幾層不同透明度的背景疊加在你要切的東西后邊，
你就用移動工具（快捷鍵v【英文輸入法下按v就可以鎖定移動工具】）點擊它然后關掉它，有幾層就多做幾步，直到你不需要的背景全部隱藏掉。
但是良心的設計一般會把背景都放到一個圖層中，你找到一層背景，所有的都和他在一個組里邊，你把組的小眼睛關掉即可
7．然后切片工具切出你要的那個圖標
8．保存：文件-存儲為web所用格式(ctrl+shift+alt+s)
9．選擇png-8/png-24格式，看你對圖標的要求了
PNG8”是指8位索引色位圖，“PNG24”是24位索引色位圖；
png8：
每一張“png8”圖像，都最多只能展示256種顏色，所以“png8”格式更適合那些顏色比較單一的圖像，
例如純色、logo、圖標等；因為顏色數量少，所以圖片的體積也會更小；
png24：
每一張“png24”圖像，可展示的顏色就遠遠多於“png8”了，最多可展示的顏色數量多大1600萬；
所以“png24”所展示的圖片顏色會更豐富，圖片的清晰度也會更好，圖片質量更高，當然圖片的大小也會相應增加，
所以“png24”的圖片比較適合像攝影作品之類顏色比較豐富的圖片；
這是二者的區別，根據自己的需求選擇吧。
10．然后就是一定要勾選透明度，其他默認設置就好。
Png-8的透明度位置
Png-24的透明度位置
11．”保存全部切片“或者“保存選中切片”
這里還要說明一個問題，有時候一個頁面中，我用切片工具選出好幾張png圖標准備切，然后保存的時候也選擇png格式都沒問題，
但是到了選擇保存位置這個對話框里，選擇的是“保存所有切片“，
最后保存出來的圖片，只有最后切得那張或者說切片工具選中的那張是png的，其他就都存成jpg格式了，背景是白色底
！！所以切png的圖，還是建議，一張一張“保存選中切片”比較好。
或者你的圖標與白色底差別大的話，你也可以不計較，讓他保存成jpg后再去ps中魔棒摳圖也好，不過這樣比較麻煩不是。
有的說，背景圖和圖標每分圖層咋辦？那咋辦？找設計吧。要不你自己選取工具扣吧，扣好了另存為png也是一種辦法
三、其他技巧：
1．Ctrl+ +號放大圖片，
2．ctrl-縮小
3．按住空格，鼠標圖標變成抓手工具，移動頁面
四、重磅彩蛋！！！還有一個吊炸天的方法——針對單一小icon切成png的
-
“移動工具”點擊圖標，選中圖標所在的圖層；
-
右擊該圖層，選擇“轉換為智能對象”；（ps這時候沒反應，不要大驚小怪，是你看不到而已）
-
接着再次在這個圖層上，右擊——“編輯內容”
-
對話框點擊確定
ps就自動生成一個新的文件，只有那個icon，而且是透明的哦！
很神奇有么有！
很省力有么有！
1秒搞定有沒有！
以下是圖解：
這是點擊一個小圖標
選中圖標后的圖層面板
右鍵點擊該圖層選擇“轉換為智能對象”
沒轉換前的圖層樣式：
轉換后的圖層樣式：
所以別說“我轉換了ps沒反應”這樣的話了，是有的，你不仔細看看不到
接着再右擊——“編輯內容”
點擊“確定”
看，他就新建了一個“形狀8”的頁面，放的是我的png的小圖標，
最后你保存為png也好，“存儲為web所有格式”也好，自由發揮吧。
這個方法可能只能保存一個圖標，
有的人說我好幾個圖：例如文字+圖片都有咋弄？
那就切圖唄！
那還要糾結的話那就合並圖層吧！
原創文章，轉載請注明來自：xing.org1^[http://www.cnblogs.com/padding1015/]
本文地址：http://www.cnblogs.com/padding1015/p/7085539.html