前端必備技能——切圖：進(jìn)階篇

時(shí)間：2023-09-05 16:00:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-05 16:00:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

前端必備技能——切圖：進(jìn)階篇：現(xiàn)代互聯(lián)網(wǎng)對(duì)交互設(shè)計(jì)越來(lái)越重視，切圖早已經(jīng)不是簡(jiǎn)單的使用 Photoshop 的切片工具對(duì) JPG、PNG 等文件進(jìn)行切片操作了。UI 設(shè)計(jì)師給出的設(shè)計(jì)稿往往會(huì)是 PSD 分層文件，這種文件中包含了更加豐富的圖層、通道、路徑等信息，也為更優(yōu)雅的前端交互奠定了基礎(chǔ)。

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



　　今天就來(lái)講一下使用 Photoshop 對(duì) PSD 分層設(shè)計(jì)稿進(jìn)行切圖的具體操作，老鳥也可以看一下，沒(méi)準(zhǔn)兒會(huì)有意外的收獲哈~

準(zhǔn)備：

1. Photoshop CC （提取碼：gb8x）
2. PSD 設(shè)計(jì)稿（演示用稿：Navigation.psd）

開始：

1、打開設(shè)計(jì)稿

　　簡(jiǎn)單介紹一下主界面

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

加載 PSD 文件時(shí)可能會(huì)遇到嵌入的配置文件不匹配、字體丟失等問(wèn)題，不用理會(huì)，直接按確定鍵即可。
Tips：如果③圖層工作區(qū)默認(rèn)沒(méi)有顯示，點(diǎn)擊 菜單欄>窗口>圖層 即可打開

2、分析設(shè)計(jì)稿

　　分析設(shè)計(jì)稿有哪些內(nèi)容是需要進(jìn)行切圖保留的內(nèi)容，主要內(nèi)容考慮主要有以下幾個(gè)部分：

　　① 圖標(biāo)（是否可以使用偽元素 :before、:after 實(shí)現(xiàn)，例如各種箭頭圖標(biāo)）

　?、?背景（是否可以使用 background 實(shí)現(xiàn)）

　?、?按鈕（是否可以使用 background、border-radius、:hover 等實(shí)現(xiàn)交互效果）

　?、?字體（是否被高頻使用，是否需要做成單獨(dú)的字體文件或做成切片）

　?、?裝飾性元素（是否可以使用偽元素 :before、:after 實(shí)現(xiàn)）

現(xiàn)在我們來(lái)仔細(xì)分析一下這張?jiān)O(shè)計(jì)稿：

⑴ 圖標(biāo)：② & ④——這兩部分都是圖標(biāo)，不同的是②這種簡(jiǎn)單的幾何圖標(biāo)可以直接使用偽元素 :before、:after 來(lái)實(shí)現(xiàn)，不必做成圖標(biāo)切片；而④這種復(fù)雜的圖標(biāo)顯然不能使用偽元素輕易畫出來(lái)，這里鑒于圖標(biāo)數(shù)量較少可以直接做成單獨(dú)切片或做成一張 Sprite 圖。

P.S.這種純色圖標(biāo)如果頁(yè)面中使用率較高，可以考慮使用 Font Awesome圖標(biāo)庫(kù)

⑵ 背景：⑥ & ⑧——⑧這類純色/簡(jiǎn)單漸變的背景可以使用 CSS 直接實(shí)現(xiàn)；而⑥這類背景放大看可以發(fā)現(xiàn)他是有一定紋理的，這樣的背景就只能進(jìn)行切圖了。

⑶ 按鈕：①——這類按鈕明顯能使用 CSS 設(shè)計(jì)出來(lái)，用 CSS3 設(shè)置背景色的漸變打造光感、border-radius 設(shè)置按鈕的圓角、.active & :hover 狀態(tài)類與偽類來(lái)實(shí)現(xiàn)交互效果。

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

⑸裝飾性元素：⑤——這種類似②這種簡(jiǎn)單的幾何圖標(biāo)，但是仔細(xì)看有更豐富的光影與漸變效果，所以這里采用的是做成切片。

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

3、開始切圖

?、?圖標(biāo)

　　拉幾條參考線后可以很明顯發(fā)現(xiàn)這類圖標(biāo)的大小都極其接近，這類圖標(biāo)可以切成同一尺寸方便使用，這里以第一個(gè)統(tǒng)計(jì)圖標(biāo)為例：

Tips：參考線可以通過(guò)在主畫板頂部及左側(cè)的標(biāo)尺中通過(guò)拖拽添加 / 刪除，如果沒(méi)有打開標(biāo)尺，按快捷鍵 Ctrl+R 即可顯示標(biāo)尺。

　　通過(guò)右下角圖層面板找到這個(gè)圖標(biāo)的所在圖層，右鍵單擊該圖層非縮略圖區(qū)域，選擇‘轉(zhuǎn)換為智能對(duì)象’；然后雙擊該圖層的縮略圖，進(jìn)入該圖標(biāo)的智能對(duì)象畫板窗口：

　　這時(shí)畫布的大小正好是圖標(biāo)自身的大?。ㄩL(zhǎng)寬像素不多不少）。

Tips：通常在導(dǎo)出前我會(huì)調(diào)整一下圖標(biāo)畫布的大小，一般是長(zhǎng)寬各加幾個(gè)像素，這樣做的目的是雖然前面看起來(lái)這些圖標(biāo)大小都差不多，但是其實(shí)大小一般是有所差別的（特別是高度），如果直接按照沒(méi)調(diào)整之前的大小導(dǎo)出，很有可能會(huì)導(dǎo)致用 CSS 定位的時(shí)候發(fā)現(xiàn)各個(gè)圖標(biāo)垂直方向無(wú)法對(duì)齊，從而還需要額外對(duì)每個(gè)圖標(biāo)單獨(dú)進(jìn)行對(duì)齊，這顯然是不合理的。

　　按快捷鍵 Ctrl+Alt+C 調(diào)整畫布大?。?br>

最好調(diào)整所加的像素?cái)?shù)為偶數(shù)，這樣畫布在拓展的時(shí)候才能保證圖標(biāo)仍在畫布中心位置。

　　調(diào)整好畫布大小后，按快捷鍵 Ctrl+Alt+Shift+S（這個(gè)快捷鍵有點(diǎn)多，是時(shí)候考驗(yàn)一下手指的靈活性了(o′?ェ?｀o)），然后會(huì)彈出介個(gè)‘存儲(chǔ)為 Web 所用格式’的窗口：

　　兩個(gè)圈起來(lái)的地方，一個(gè)是選擇導(dǎo)出格式：需要保留透明度的選擇PNG-24（PNG-8不支持半透明，這是為了照顧 IE6 的顯示效果，現(xiàn)在誰(shuí)還管 IE6，用 IE6 的人還想要什么優(yōu)雅的交互體驗(yàn)，頁(yè)面能顯示出來(lái)主要內(nèi)容就不錯(cuò)了，嫌棄臉.jpg <_<），不需要保留透明度的選擇JPEG。

選 PNG-24 記得勾選下方的‘交錯(cuò)’，選 JPEG 記得勾選‘連續(xù)’，這樣在瀏覽器加載圖片的時(shí)候會(huì)以模糊逐漸轉(zhuǎn)為清晰的效果漸漸顯示出來(lái)，瀏覽體驗(yàn)更好。

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


　　OK，其他選項(xiàng)都保持默認(rèn)就好了，點(diǎn)擊‘存儲(chǔ)’，這樣一個(gè)圖標(biāo)就‘切’好了！

?、?背景


　　放大看我們可以看到這個(gè)背景的紋理是由有序重復(fù)的圖案組成的，首先我們還是按照操作圖標(biāo)的步驟來(lái)：找到對(duì)應(yīng)圖層>轉(zhuǎn)換為智能對(duì)象>進(jìn)入編輯智能對(duì)象畫板。然后使用裁剪工具（快捷鍵 C），配合 Ctrl+‘+’ 放大畫板，仔細(xì)裁剪出重復(fù)的最小單元：

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

現(xiàn)在這個(gè)網(wǎng)格背景的切片就搞定了！配合 background-repeat: repeat-x; 即可實(shí)現(xiàn)網(wǎng)格的背景效果！

Tips：這里如果想在使用背景切片之前確認(rèn)一下最小重復(fù)單元的背景切片是否錯(cuò)位，可以點(diǎn)擊 菜單欄>定義圖案 添加新圖案，然后 Ctrl+N 新建一個(gè)與該背景切片高度相同，寬度較大一些的畫板，然后 Shift+F5 打開填充對(duì)話框，‘內(nèi)容>使用’選擇‘圖案’，緊挨著下邊的‘自定圖案’選擇剛剛添加的新圖案，點(diǎn)擊確認(rèn)即可得到期望的背景，如果最小重復(fù)單元的切片出現(xiàn)錯(cuò)位等問(wèn)題很容易發(fā)現(xiàn)，仔細(xì)重新裁剪一下就好啦~

好嘞，切圖的進(jìn)階篇就寫到這里了，只講了圖標(biāo)跟背景，其他部分大同小異哈（才不是因?yàn)閼?(ˉ﹃ˉ)，感興趣的同學(xué)可以下載設(shè)計(jì)稿練練手哈。

有人可能會(huì)問(wèn)‘怎么直接寫了切圖：進(jìn)階篇，入門篇哪去了？’，請(qǐng)看這篇回答>_>能否用通俗語(yǔ)言講一下web前端講的“切圖”到底是什么意思？ - Hi我叫小明的回答，懶得整理了_(:зゝ∠)_


寫在最后：　　實(shí)際現(xiàn)如今對(duì)PSD文件進(jìn)行的操作已經(jīng)不是簡(jiǎn)單的切圖了，但是鑒于最初確實(shí)是把整張JPG圖片使用切片工具進(jìn)行切成一個(gè)個(gè)小切片，所以切圖這種叫法一直沿用至今。