切圖

Table of Contents generated with DocToc

• 切圖

切圖

• 內(nèi)容性圖片 指的是圖片在頁(yè)面是作為內(nèi)容存在，如頁(yè)面中的海報(bào)。
• 修飾性圖片 指的是圖片在頁(yè)面中起修飾作用，如頁(yè)面中的背景和圖標(biāo)。

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

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

PNG24切圖方法

• 移動(dòng)工具選中所需圖層（Ctrl 多選）
• 右鍵合并圖層（Ctrl + E）
• 復(fù)制到新圖層

PNG8帶背景切圖方法

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

可平鋪背景的切圖方法

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

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

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

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

如何開始切圖

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

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

第二步：保存圖片

將去掉文字的圖片保存起來(lái)。一般情況下內(nèi)容性圖片保存為jpg格式，圖標(biāo)類型的保存為png格式。

第三步：構(gòu)思頁(yè)面的具體實(shí)現(xiàn)

劃分頁(yè)面的結(jié)構(gòu)，具體的實(shí)現(xiàn)方式。

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

根據(jù)構(gòu)思號(hào)的頁(yè)面結(jié)構(gòu)，開始編寫HTML代碼，并且開始進(jìn)行測(cè)量和取色。