前端工程師技能之photoshop巧用系列第三篇－切圖篇

前面的話

　　前端工程師除了使用photoshop進行測量之外，更重要的是要使用該軟體進行切圖。本文是photoshop巧用系列的第三篇－切圖篇

 

切圖資訊

　　在網頁製作中有哪些圖片是需要被切出來的呢？主要分為兩類，一類是修飾性圖片，另一類是內容性圖片

　　【1】修飾性圖片

　　修飾性圖片主要對網頁內容進行修飾，一般會被製作為雪碧圖，用在background屬性中，通常儲存為png24(IE6不支援半透明)和png8格式。修飾圖片主要包括以下幾類：

　　　　1、圖標、logo

　　　　2、有特殊效果的按鈕、文字等(如果設計師設計的字體不太常見的話，把文字圖片來切出來、有特殊效果的按鈕、文字等(如果設計師設計的字體不太常見的話，把文字圖片來切出來

) 3.非純色的背景

　　【2】內容性圖片

　　一圖勝千言，這裡的「一圖」就是指內容性圖片，主要為網頁提供內容，一般用在標籤中。內容性圖片顏色較豐富，一般存為JPG格式，且需要一定的壓縮。內容性圖片主要包括以下幾類：

　　　　　1、Banner、廣告圖片

　　　　　2、文章中的配圖

 　　　2、文章中的配圖

 　　　2、文章中的配圖

 　　位即可

 切圖步驟

【1】

隱藏文字只留背景

　　若文字上有特殊效果，無法用代碼寫出，則把文字和背景一起切出來　　若文字上有特殊效果，無法用代碼寫出，則把文字和背景一起切出來1㟎1㟎若文字為獨立圖層，則隱藏文字圖片

　　　　先找到文字圖層，然後去掉眼睛圖示　　　　a、若背景是可以拉伸的，用矩形選框工具在背景上畫一個小的矩形框，用自由變換工具(ctrl+t)拉伸背景，將文字覆蓋，然後雙擊或按回車鍵

和背景覆蓋文字

　　　　b、若背景有紋理，不可以拉伸，用矩形選框工具在背景上畫一個小的矩形框，用移動工具+alt來複製當前圖層，一次次地按下方向鍵或用鼠標移動(鼠標移動時，按住shift鍵時可以保證圖層按照直線移動)，最終將文字全部覆蓋為止

【2】移動工具選取所需圖層(ctrl+點選圖層的長方形區域)，出現螞蟻線

【33號)

　　勾選自動選擇，然後將需要的多個圖層合併

【4】

複製圖層(ctrl+c) ->新檔案(ctrl+n)，並按確定-> 貼上圖層(ctrl+v)

實戰【切png8】

下面將從切不同類型的圖片的角度出發來進行實戰說明

　　因為png8圖片不支援半透明，所以需要帶背景切

　　1、合併可見圖層(shift+ctrl+e矩形選框工具選擇一個大的區域

　　3、魔棒工具去除多餘部分(從選區中減去: 按住alt)

 

【切不規則小圖示】

　　切法和png8的切法類似

　　　　[注意]選擇鏤空小圖示時，一定要取消[連續連續[連續]

【切可平鋪背景】　　2、複製貼上到新文件中(平鋪內容充滿文件的寬(　　2、複製貼上到新文件中(平鋪內容充滿文件的寬(yx)或高(yx)或高(yx) )

1、用矩形選框工具選取一塊區域

　　　　　若沿x軸平鋪，則鋪滿x軸；若沿y軸平鋪，則鋪滿y軸

【切片工具一頁切】 、拉參考線

　　2、選擇切片工具

　　3、點擊基於參考線的切片按鈕

　　4、從切片工具切換到切片選擇工具(在同一個按鈕下)　　4、從切片工具切換到雙擊切片，更改需要的名稱

　　6、保存

　　[注意]全選切片不可用ctrl+a，只能拖曳矩形框來選取所有切片，選取後顏色變亮，然後統一設定儲存格式

網相關網紙（H組技能之分次用圖文！