部分看了文章的設計師，來找我說怎麼切圖。sorry？在個人理解，這就是切圖啊，可是他們所指的「切圖」是，怎麼把設計圖製做成html頁面。html
在我看來，如今人們對於前端都是有誤區的。認爲前端是切圖的，（也確實是這麼叫的，本人情感上很不肯意聽前端被叫作「切圖的」）因此也會誤認爲個人這篇文章是寫給設計師的。前端
其實否則，這篇文章適用於計算機出身的前端甚至後端、對於ps等設計軟件沒有基礎的人使用的，用來把設計師交於前端工程師的設計圖稿或者psd源文件提取、整理，轉化成佈局頁面時使用的圖片。web
再者，前端這個職業，很不但願被人認爲是切圖的，現現在的前端工做，並非單純的切一下ps圖那麼簡單的事情。後端
本篇文章所展現的也只是前端工做中的滄海一粟、九牛一毛。。。前端工程師
——————————————————————正文分割線——————————————————————————————工具
微微一運功，把家底都抖出來了。佈局
不過，做爲一個設計出身的前端來講，摸ps就和摸鍵盤同樣了post
因此可能教程中仍是有沒用過ps的人看不懂的地方，優化
歡迎加羣討論：613512106。。。設計
———————--------------------------------------------------------------------PS切圖步驟說明————————————————————————————————
一共分兩大項：切jpg圖、切png圖。
我用的是PS CC 版本，教程中用到的除了界面和擺放位置不同外，其餘應該和低版本的都同樣了。
1、切JPG圖
1．打開ps導入圖片的步驟是鐵定的了
2．選擇左邊工具欄裏的「切片工具」
事先本身沒用過或上一次ps工具使用時沒有使用過「切片工具」的，打開ps工具欄裏默認是「裁剪工具」的圖標
你能夠鼠標左鍵點住「裁剪工具」不鬆手，他會在右邊展開（我這是工具欄在ps界面左側的狀況下）這一組的全部工具，在裏邊選擇「切片工具」便可
我圖中之因此框選了兩個工具，是由於後期還要用到「切片選擇工具」，這裏先認識一下他的位置在哪。
3．用「切片工具」切出想要的範圍，框選範圍就像平時用qq的截圖工具同樣。
以下，我須要這個小圖標，我就框選了他。
框選中：
框選後：
若是你框選好了鬆開了鼠標，他仍是這種黃色的邊線，你把「切片工具」移到附近，他還能調整框的大小範圍。
可是若是你框選了好幾個了，想改前邊已經框選好的：
像如上這樣，要知道，ps切片工具最近一個選區的切片是用黃色框包裹的，其餘前邊切得都是藍色邊線，這時候你再用「切片工具」去調整藍色邊線的選區是動不了的。
這就要用上「切片選擇工具」了
4．「切片選擇工具」調整範圍：
切片選擇工具就在「切片工具」的下邊，尋找方法見上解。點擊選擇要調整的切片藍線，待其變成黃色後，調整範圍。
切片選擇工具只能選擇並調節範圍，不能切片。
5．切好後保存
- 保存方法：文件——存儲爲web所用格式【快捷鍵ctrl+shift+alt+s】
- 在彈出的【存儲爲web所用格式】對話框中，下拉選擇框選擇JPEG格式
- 按需求更改質量（低、中、高、很是高、最佳。這五個模式）
- 點擊存儲後彈出【將優化結果存儲爲】的對話框
選擇存放位置、設置文件信息——
通常存儲時，ps會自動創建一個images文件夾，你要找到剛纔本身設定的位置中，找images文件夾，在她裏邊纔有你剛纔切好的圖。
- 命名文件名
- 「格式「——僅限圖像
- 在「切片」那裏，能夠選擇是存儲所有切片仍是隻存儲選中的切片，
通常默認就存儲所有切片就行了，有時候只須要一小塊切片時，能夠選擇存儲選中的切片，他會只保存一張你當前切得圖，這樣省的本身去一大堆切片中撿出來本身要用的了。
2、切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也是一種辦法
3、其餘技巧：
1．Ctrl+ +號放大圖片，
2．ctrl-縮小
3．按住空格，鼠標圖標變成抓手工具，移動頁面
4、重磅彩蛋！！！還有一個吊炸天的方法——針對單一小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