前端工程師除了使用photoshop進行測量之外,更重要的是要使用該軟體進行切圖。本文是photoshop巧用系列的第三篇-切圖篇
在網頁製作中有哪些圖片是需要被切出來的呢?主要分為兩類,一類是修飾性圖片,另一類是內容性圖片
【1】修飾性圖片
修飾性圖片主要對網頁內容進行修飾,一般會被製作為雪碧圖,用在background屬性中,通常儲存為png24(IE6不支援半透明)和png8格式。修飾圖片主要包括以下幾類:
1、圖標、logo
2、有特殊效果的按鈕、文字等(如果設計師設計的字體不太常見的話,把文字圖片來切出來、有特殊效果的按鈕、文字等(如果設計師設計的字體不太常見的話,把文字圖片來切出來
) 3.非純色的背景
【2】內容性圖片
一圖勝千言,這裡的「一圖」就是指內容性圖片,主要為網頁提供內容,一般用在標籤中。內容性圖片顏色較豐富,一般存為JPG格式,且需要一定的壓縮。內容性圖片主要包括以下幾類:
1、Banner、廣告圖片
2、文章中的配圖
2、文章中的配圖
2、文章中的配圖
切圖步驟
【1】
隱藏文字只留背景若文字上有特殊效果,無法用代碼寫出,則把文字和背景一起切出來 若文字上有特殊效果,無法用代碼寫出,則把文字和背景一起切出來1㟜文字為獨立圖層,則隱藏文字圖片
先找到文字圖層,然後去掉眼睛圖示、相片和背景,文字義鋪背景覆蓋文字 |
【2】移動工具選取所需圖層(ctrl+點選圖層的長方形區域),出現螞蟻線
【3】合併圖層(ctrl+e)(ctrl+e)(可選
勾選自動選擇,然後將需要的多個圖層合併
【4】複製圖層(ctrl+c) ->新檔案(ctrl+n),並按確定-> 貼上圖層( ctrl+v)
實戰 |
【切png8】
1、合併可見圖層(shift+ctrl+e)
1、合併可見圖層(shift+ctrl+e)『 1、合併可見工具選擇一個大的區域
3、魔棒工具去除多餘部分(從選區中減去: 按住alt)
【切不規則小圖示】
切法和png8的切法類似
[注意]選擇鏤空小圖示時,一定要取消[連續連續[連續]
【切可平鋪背景】 | 1、用矩形選框工具選取一塊區域 |
【切片工具一頁切】 、拉參考線
2、選擇切片工具
3、點擊基於參考線的切片按鈕
4、從切片工具切換到切片選擇工具(在同一個按鈕下) 4、從切片工具切換到雙擊切片,更改需要的名稱
6、保存
[注意]全選切片不可用ctrl+a,只能拖曳矩形框來選取所有切片,選取後顏色變亮,然後統一設定儲存格式
圖文 | ||