Table of Contents generated with DocToc

• 切圖

切圖

• 內容性圖片 指的是圖片在頁面是作為內容存在，如頁面中的海報。
• 修飾性圖片 指的是圖片在頁面中起修飾作用，如頁面中的背景和圖標。

修飾性圖標和內容性圖片需要（在 HTML 的 <img> 之中，只需站位不需切圖）切出。切出的內容性圖片應保存為 *.jpg 格式，而修飾性圖片因保存為 png24（IE6 不支持半透明，Alpha 透明） 或 png8 它們均支持全透明。

隱藏文字，方法一，直接在圖層中隱藏文字圖層。方法二（兩種，分別應對于純色和有背景需要隱藏文本的情況）如下圖所示，使用自由變換。

PNG24切圖方法

• 移動工具選中所需圖層（Ctrl 多選）
• 右鍵合并圖層（Ctrl + E）
• 復制到新圖層

PNG8帶背景切圖方法

• 合并可見圖層（Shift + Ctrl + E）
• 矩形選框選擇內容
• 魔棒工具去除多余部分（Alt + 選?。?/li>

可平鋪背景的切圖方法

• 用矩形選擇一個區(qū)域
• 復制至新圖層

NOTE: X 軸平鋪需要占滿圖片的寬，Y 軸平鋪需要占滿圖片的高。

切片工具（大圖化小的方法，將一大圖分為多小圖）

• 拉參考線
• 選擇切片工具
• 點擊 “基于參考線的切片” 按鈕
• 選擇切片選擇工具
• 保存于新圖層

如何開始切圖

第一步：去掉所有文字，只留背景

打開視覺稿后，用上面說過的方法去掉所有的文字，只留背景和圖片（記得備份一下PSD文件）。

第二步：保存圖片

將去掉文字的圖片保存起來。一般情況下內容性圖片保存為jpg格式，圖標類型的保存為png格式。

第三步：構思頁面的具體實現

劃分頁面的結構，具體的實現方式。

第四步：一邊編寫HTML代碼，一邊測量、取色

根據構思號的頁面結構，開始編寫HTML代碼，并且開始進行測量和取色。