前端必備技能——切圖：進階篇

現代互聯網對交互設計越來越重視，切圖早已經不是簡單的使用 Photoshop 的切片工具對 JPG、PNG 等文件進行切片操作了。UI 設計師給出的設計稿往往會是 PSD 分層文件，這種文件中包含了更加豐富的圖層、通道、路徑等信息，也為更優雅的前端交互奠定了基礎。

（OS：這句話的 Bigger 我給滿分o(￣▽￣)d~ 自我陶醉中...）

　　今天就來講一下使用 Photoshop 對 PSD 分層設計稿進行切圖的具體操作，老鳥也可以看一下，沒準兒會有意外的收穫哈~

準備：

1. Photoshop CC （提取碼：gb8x）
2. PSD 設計稿（演示用稿：Navigation.psd）

開始：

1、打開設計稿

　　簡單介紹一下主界面

　　① 為畫布、② 為工具欄、③ 為圖層操作面板

載入 PSD 文件時可能會遇到嵌入的配置文件不匹配、字體丟失等問題，不用理會，直接按確定鍵即可。

Tips：如果③圖層工作區默認沒有顯示，點擊 菜單欄>窗口>圖層 即可打開

2、分析設計稿

　　分析設計稿有哪些內容是需要進行切圖保留的內容，主要內容考慮主要有以下幾個部分：

　　① 圖標（是否可以使用偽元素 :before、:after 實現，例如各種箭頭圖標）

　　② 背景（是否可以使用 background 實現）

　　③ 按鈕（是否可以使用 background、border-radius、:hover 等實現交互效果）

　　④ 字體（是否被高頻使用，是否需要做成單獨的字體文件或做成切片）

　　⑤ 裝飾性元素（是否可以使用偽元素 :before、:after 實現）

現在我們來仔細分析一下這張設計稿：

⑴ 圖標：② & ④——這兩部分都是圖標，不同的是②這種簡單的幾何圖標可以直接使用偽元素 :before、:after 來實現，不必做成圖標切片；而④這種複雜的圖標顯然不能使用偽元素輕易畫出來，這裡鑒於圖標數量較少可以直接做成單獨切片或做成一張 Sprite 圖。

P.S.這種純色圖標如果頁面中使用率較高，可以考慮使用 Font Awesome圖標庫

⑵ 背景：⑥ & ⑧——⑧這類純色/簡單漸變的背景可以使用 CSS 直接實現；而⑥這類背景放大看可以發現他是有一定紋理的，這樣的背景就只能進行切圖了。

⑶ 按鈕：①——這類按鈕明顯能使用 CSS 設計出來，用 CSS3 設置背景色的漸變打造光感、border-radius 設置按鈕的圓角、.active & :hover 狀態類與偽類來實現交互效果。

⑷字體：③ & ⑦——整體觀察這個設計稿，大部分文字都是使用③的字體（高頻使用），可以考慮把 UI 設計師使用的③字體做成 .woff 字體文件引入樣式表中，或者直接使用通用的 Arial/sans-serif 字體（還原度會有所欠缺），至於⑦的字體，頁面上使用率很低，只有頁腳這一處用到，所以可以直接把⑦這裡做成切片。

⑸裝飾性元素：⑤——這種類似②這種簡單的幾何圖標，但是仔細看有更豐富的光影與漸變效果，所以這裡採用的是做成切片。

開始切圖之前的分析主要是考慮哪些部分可以使用 CSS 實現，哪些部分只能使用切片。這需要較好的 CSS 知識儲備，但還好 CSS 的門檻不高，稍加學習即可掌握。

3、開始切圖

　⑴ 圖標

　　拉幾條參考線後可以很明顯發現這類圖標的大小都極其接近，這類圖標可以切成同一尺寸方便使用，這裡以第一個統計圖標為例：

Tips：參考線可以通過在主畫板頂部及左側的標尺中通過拖拽添加 / 刪除，如果沒有打開標尺，按快捷鍵 Ctrl+R 即可顯示標尺。

　　通過右下角圖層面板找到這個圖標的所在圖層，右鍵單擊該圖層非縮略圖區域，選擇『轉換為智能對象』；然後雙擊該圖層的縮略圖，進入該圖標的智能對象畫板窗口：

　　這時畫布的大小正好是圖標自身的大小（長寬像素不多不少）。

Tips：通常在導出前我會調整一下圖標畫布的大小，一般是長寬各加幾個像素，這樣做的目的是雖然前面看起來這些圖標大小都差不多，但是其實大小一般是有所差別的（特別是高度），如果直接按照沒調整之前的大小導出，很有可能會導致用 CSS 定位的時候發現各個圖標垂直方向無法對齊，從而還需要額外對每個圖標單獨進行對齊，這顯然是不合理的。

　　按快捷鍵 Ctrl+Alt+C 調整畫布大小：

最好調整所加的像素數為偶數，這樣畫布在拓展的時候才能保證圖標仍在畫布中心位置。

　　調整好畫布大小後，按快捷鍵 Ctrl+Alt+Shift+S（這個快捷鍵有點多，是時候考驗一下手指的靈活性了(o′?ェ?｀o)），然後會彈出介個『存儲為 Web 所用格式』的窗口：

　　兩個圈起來的地方，一個是選擇導出格式：需要保留透明度的選擇PNG-24（PNG-8不支持半透明，這是為了照顧 IE6 的顯示效果，現在誰還管 IE6，用 IE6 的人還想要什麼優雅的交互體驗，頁面能顯示出來主要內容就不錯了，嫌棄臉.jpg <_<），不需要保留透明度的選擇JPEG。

選 PNG-24 記得勾選下方的『交錯』，選 JPEG 記得勾選『連續』，這樣在瀏覽器載入圖片的時候會以模糊逐漸轉為清晰的效果漸漸顯示出來，瀏覽體驗更好。

　　另一個是轉換色彩空間：轉換為 sRGB 可以在絕大部分瀏覽器中顯示出你期望的顏色（涉及到圖片的顏色配置管理，也是深坑，不多贅述）。

　　OK，其他選項都保持默認就好了，點擊『存儲』，這樣一個圖標就『切』好了！

　⑵ 背景

　　放大看我們可以看到這個背景的紋理是由有序重複的圖案組成的，首先我們還是按照操作圖標的步驟來：找到對應圖層>轉換為智能對象>進入編輯智能對象畫板。然後使用裁剪工具（快捷鍵 C），配合 Ctrl+『+』 放大畫板，仔細裁剪出重複的最小單元：

最後同樣 Ctrl+Alt+Shift+S 保存切片，這裡由於該背景沒有透明部分，所以保存格式選擇 JPEG（即 .JPG 文件，相對於 PNG-24，對圖片質量要求不高的情況下，JPEG 能獲得更小的文件體積）。

現在這個網格背景的切片就搞定了！配合 background-repeat: repeat-x; 即可實現網格的背景效果！

Tips：這裡如果想在使用背景切片之前確認一下最小重複單元的背景切片是否錯位，可以點擊 菜單欄>定義圖案 添加新圖案，然後 Ctrl+N 新建一個與該背景切片高度相同，寬度較大一些的畫板，然後 Shift+F5 打開填充對話框，『內容>使用』選擇『圖案』，緊挨著下邊的『自定圖案』選擇剛剛添加的新圖案，點擊確認即可得到期望的背景，如果最小重複單元的切片出現錯位等問題很容易發現，仔細重新裁剪一下就好啦~

好嘞，切圖的進階篇就寫到這裡了，只講了圖標跟背景，其他部分大同小異哈（才不是因為懶 (ˉ﹃ˉ)，感興趣的同學可以下載設計稿練練手哈。

有人可能會問『怎麼直接寫了切圖：進階篇，入門篇哪去了？』，請看這篇回答>_>能否用通俗語言講一下web前端講的「切圖」到底是什麼意思？ - Hi我叫小明的回答，懶得整理了_(:зゝ∠)_

寫在最後：n　　實際現如今對PSD文件進行的操作已經不是簡單的切圖了，n但是鑒於最初確實是把整張JPG圖片使用切片工具進行切成一個個小切片，n所以切圖這種叫法一直沿用至今。n

推薦閱讀：