微微一運功， 把家底都抖出來了。
不過， 作為一個設計出身的前端來說， 摸ps就和摸鍵盤一樣了
所以可能教程中還是有沒用過ps的人看不懂的地方，
歡迎加群討論：613512106。 。 。
———————--------------------------------------------------------------------PS切圖步驟說明————————————————————————————————
一共分兩大項：切jpg圖、切png圖。
我用的是PS CC 版本， 教程中用到的除了介面和擺放位置不一樣外， 其他應該和低版本的都一樣了。
一、切JPG圖
1．打開ps導入圖片的步驟是鐵定的了
2．選擇左邊工具列裡的“切片工具”
事先自己沒用過或上一次ps工具使用時沒有使用過“切片工具”的， 打開ps工具列裡默認是“裁剪工具”的圖示
你可以滑鼠左鍵點住“裁剪工具”不鬆手，
我圖中之所以框選了兩個工具， 是因為後期還要用到“切片選擇工具”， 這裡先認識一下他的位置在哪。
3．用“切片工具”切出想要的範圍， 框選範圍就像平時用qq的截圖工具一樣。
如下， 我需要這個小圖示， 我就框選了他。
框選中：
框選後：
如果你框選好了鬆開了滑鼠， 他還是這種黃色的邊線， 你把“切片工具”移到附近， 他還能調整框的大小範圍。
但是如果你框選了好幾個了， 想改前邊已經框選好的：
像如上這樣， 要知道， ps切片工具最近一個選區的切片是用黃色框包裹的， 其他前邊切得都是藍色邊線， 這時候你再用“切片工具”去調整藍色邊線的選區是動不了的。
這就要用上“切片選擇工具”了
4．“切片選擇工具”調整範圍：
切片選擇工具就在“切片工具”的下邊， 尋找方法見上解。 點擊選擇要調整的切片藍線， 待其變成黃色後， 調整範圍。
切片選擇工具只能選擇並調節範圍， 不能切片。
5．切好後保存
保存方法：檔——存儲為web所用格式【快速鍵ctrl+shift+alt+s】
按需求更改品質（低、中、高、非常高、最佳。
這五個模式）
選擇存放位置、設置檔資訊——
一般存儲時， 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所有格式”也好，自由發揮吧。
這個方法可能只能保存一個圖示，
有的人說我好幾個圖：例如文字+圖片都有咋弄？
那就切圖唄！
那還要糾結的話那就合併圖層吧！
本文地址：http://www.cnblogs.com/padding1015/p/7085539.html
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所有格式”也好，自由發揮吧。
這個方法可能只能保存一個圖示，
有的人說我好幾個圖：例如文字+圖片都有咋弄？
那就切圖唄！
那還要糾結的話那就合併圖層吧！
本文地址：http://www.cnblogs.com/padding1015/p/7085539.html