前端初級技能No.1 [切圖]

「切圖」是指經過測量設計稿，從設計稿中提取圖片等方式爲頁面開發提供支持的過程。

整個「切圖」過程主要分爲如下五個主要步驟：

1. 分析設計圖；
2. 測量元素；
3. 提取圖片；
4. 保存圖片；
5. 圖片優化與合併；

1.分析設計圖

之前我作練習時，每每是拿起一份PSD設計稿，大體看上兩眼就開始邊敲代碼邊切了，後來踩了一些坑才意識到這樣的作法效率低下。有時代碼敲着敲着會忽然發現，哎？這裏有一個下拉菜單？或者有時發現，哎？這裏是否是能夠重用以前的代碼？一般這樣的後知後覺都使人追悔莫及，因此慢慢也要求本身事先要留個心眼。因此第一步「分析設計圖」我認爲還能夠分爲如下三個部分：

• • 仔細瀏覽設計圖，考慮網頁的總體結構（在這裏心中就能夠預想頁面未來的編輯方式，劃分爲幾個區域？大致如何實現？）；
  • 仔細查找頁面各部分是否有隱藏下拉菜單，hover效果等隱藏設計（好的設計師應對此提早在說明文檔中註明）；
  • 觀察頁面結構，考慮代碼重用的可能；

2.測量元素

切圖主要測量的對象有：文字大小，圖片，間距與顏色；這裏以PS工具爲例，基本上前三者均可以使用矩形工具（M）完成，後者主要使用吸管工具（I）。通常來講，在參考線，標尺具有的前提下，圖片越放大，測量精度越高。

3.提取圖片

所提取的圖片大體能夠分爲直接在頁面上呈現的內容型圖片，和做爲背景使用的修飾性圖片，對於前者直接切下來保存就好，而對於後者則須要分離其前景圖案，文字，以後再切下保存。對於比較特別的修飾性圖片，能夠只切其一部分，使用CSS的repeat屬性進行重複以節約存儲空間，提升頁面加載速度；具體步驟以下：

• • 隱藏文字只留背景；這裏又分爲兩種狀況，第一種是文字爲獨立圖層，那麼只需使該圖層不可見便可，第二種爲圖片與文字融爲一體，這種狀況下基本的思路是平鋪遮蓋，可是根據背景性質不一樣分爲可拉伸與不可拉伸兩種情況，前者需使用矩形選框+自由變換拉伸遮蓋，後者使用矩形選框+Alt+移動工具移動遮蓋；
  • 使用移動工具（V）選中所需圖層（如有多個圖層則複選後右鍵合併圖層Ctrl+E）；
  • 在所選圖層上右鍵「複製圖層到新文件」；
  • 裁切新文件畫布大小；

這種方法的缺陷在於步驟太多，操做不便，並且所切圖像新建畫布有時太大，所以我一般使用另一種方法，這種方法對視設計稿大小對機器性能有必定要求：

• • 矩形選框選好目標對象；
  • 合併可見圖層（Ctrl+Shift+E）；
  • 複製所選對象（Ctrl+C），新建圖層（Ctrl+N），粘貼所選對象（Ctrl+V）；

這種方法的優勢在於圖片要多大切多大，省去了裁切畫布的麻煩，並且快捷鍵操做效率高，缺點則在於要用矩形選框框住目標對象，並且文件較大時，合併全部可見圖層較慢。

4.圖片保存

保存須要考慮保存方式，圖片格式，圖片命名三個部分。

保存方式是指頁面圖片選定後如何選擇圖層保存的問題，是逐一保存？仍是使用Sprite技術進行合併？，須要提早規劃好，能夠省去後面不少合併圖片的時間；

圖片格式則主要指要根據所需保存圖片的類型選擇相應的圖片格式，咱們一般用PNG格式用來保存有透明圖像，用JPG格式保存顏色豐滿圖像，用GIF格式保存動圖；

搞定前兩步，最後一步即是對圖片的命名，不要小看圖像的命名，使用清晰，準確，描述性的名稱命名圖像（例如：「.header__banner」）能夠節省後期圖片變動時查找圖片所耗費的時間。

5.圖片優化與合併

圖片優化與合併是兩回事，優化是指對圖片進行壓縮，使其既知足用戶視覺須要，文件大小又儘量的小；而圖片合併是指，使用「圖片精靈」技術，將多張圖片（一般是圖標）合併爲一張圖片，以節省加載次數。

但這樣作的則弊端在於，爲了使用CSS背景定位，必需要在HTML中加入許多無語義的容器標籤，但相較於頁面加載時間的提高，這點損失也是微不足道的。

 

以上。