網(wǎng)易微專業(yè)_頁面制作_Photoshop

1.1.0 什么是切圖：

從設(shè)計稿中切除網(wǎng)頁的素材并在代碼中引入圖片資源。
設(shè)計稿 (*.psd) >>（素材切出）>> 產(chǎn)出物 (*png, *.jpg)

1.1.0 為什么要切圖？

給網(wǎng)頁提供圖片素材：分離復(fù)雜的圖片或者解決兼容問題。

HTML（使用img標(biāo)簽）

<img src="../img/avatar.jpg" alt="頭像">

CSS（使用background屬性）

.icon{
     background-image: url(../../img/sprite.png);
     background-position: 0 0;
}

1.1.1 工具, 面板, 視圖

Ps首選項設(shè)置

編輯 > 首選項 > 單位與標(biāo)尺：將“單位”內(nèi)的選項選擇為“像素”。

面板

在“窗口”菜單下開啟：（可以保存工作區(qū)）

  • 工具
  • 選項
  • 信息（F8）
  • 圖層（F7）
  • 歷史記錄

切圖常用工具

  • 移動工具：選擇圖層和移動圖層。（需將自動選擇調(diào)至選擇圖層）
  • 矩形選框工具：選出矩形框，然后再信息面板內(nèi)查看信息。
  • 魔棒工具：摳圖神器之一，適合摳對比明顯的不規(guī)則圖形，效果受容差影響。
  • 裁剪工具（切片工具 ）：裁剪畫布。（重點(diǎn)是下拉菜單中的切片工具）
  • 縮放工具：兩個快捷鍵（放大：Ctrl + 加號 縮小：Ctrl + 減號 或 Alt + 滾輪）
  • 取色器：包含前景色取色和背景色取色。

輔助視圖

  • 在“視圖 ”菜單下開啟。
  • 對齊，會啟動靠近吸附功能
  • 標(biāo)尺，Ctrl + R
  • 參考線，Ctrl + ; （需勾選顯示額外內(nèi)容）

Note：

  • 注意圖層（單層元素）與組（類似于文件夾，可嵌套）的區(qū)別。
  • 撤銷快捷鍵：Ctrl + Z；連續(xù)撤銷快捷鍵：Ctrl + Alt + Z。
  • 合并圖層：ctrl+E。合并可見圖層：ctrl+shift+E。
  • Sprite的補(bǔ)充說明：可以通過搜索CSS sripte或者圖片精靈等關(guān)鍵字來了解更多，推薦閱讀：《談?wù)凜SS Sprites(css精靈)》

1.1.2 測量、取色

獲取信息

  • 打開設(shè)計稿，獲取信息。
  • 尺寸信息（測量）width：200px；
  • 顏色信息（取色）color：#ffcc00；（16進(jìn)制RGB顏色）

測量

  • 使用“矩形選框工具”&“信息面板”。
  • 寬度，高度 (width, height)
  • 內(nèi)外邊距 (padding, margin)
  • 邊框 (border)
  • 定位 (position)
  • 文字大小 (font-size)：假使文字為單獨(dú)一個圖層，則使用“文字”工具查看像素，否則，使用“矩形選框工具”。
  • 行高 (line-height)：同上。其為第一行的底端到第二行的底端。
  • 背景圖位置 (background-position)

測量工具的巧用

  • 所有能接受數(shù)字的屬性都需要測量并盡可能百分百的還原設(shè)計稿。
  • 選框工具的巧用，增（Shift）減（Alt）以及交叉選擇（Shift + Alt）。
  • 測量時盡可能放大畫布以減少誤差。量取文字是為了減少誤差盡量選取尺寸大的文字進(jìn)行測量。

取色

  • 所有顏色都要取色。使用拾色器&吸管工取色。
  • 邊框色
  • 背景色
  • 文字色

取色工具的巧用

  • 確定背景是否為純色
  • 使用拾色器在需要確定顏色的區(qū)域任意點(diǎn)擊，看顏色值是否變化。
  • 確定顏色是否為線性漸變
  • 先用移動工具選擇需要確定顏色的圖層，再使用魔棒工具在低容差下任意點(diǎn)擊。

1.1.3 切圖

切圖及切圖的各種操作（課程大綱）

  • 隱藏文字（獨(dú)立圖層和非獨(dú)立圖層的不同操作方法）。
  • png8和png24格式的切圖方式。
  • 可平鋪背景的切圖方式及活動頁的切圖方式。

哪些圖是需要切出來的？

  • 內(nèi)容性圖片（一般用在img標(biāo)簽）：1.Banner、廣告圖片 2.文章中的配圖 （在 HTML的img之中，只需站位的不需切圖）
  • 修飾性圖片（一般用在background屬性）：1.圖標(biāo)、logo 2.有特殊效果的按鈕、文字 3.非純色的背景

切出來的圖片保存為哪種類型？

  • 內(nèi)容性圖片應(yīng)保存為.jpg格式，還會壓縮保證大小。
  • 修飾性圖片應(yīng)保存為.png24（這種類型圖片支持半透明，但是在IE6 不支持半透明，Alpha透明）或png8它們均支持全透明。

隱藏文字只留背景。

  • 若文字為獨(dú)立圖層，隱藏文字圖層。
獨(dú)立圖層
  • 若文字與背景已經(jīng)合并，則平鋪背景覆蓋文字。（兩種情況：注意圖層的選擇）
    第二種情況按住Alt以后同時按住Shift可以保證方向上的延伸。
合并圖層

切圖

PNG24切圖方法：（分為單圖層和多圖層）
  1. 移動工具選中所需圖層（按住Ctrl多選）
  2. 右鍵合并圖層（Ctrl+E）
  3. 再右鍵復(fù)制圖層到新文件，或直接拖至已有文件（新建：Ctrl+N）
PNG8帶背景切圖方法：
  1. 合并（可見）圖層（Shift+Ctrl+E）
  2. 矩形選框選擇內(nèi)容
  3. 魔棒工具去除多余部分（從選區(qū)中減去：按住Alt）
可平鋪背景的切圖方式：
  1. 用矩形選框工具選取一塊區(qū)域
  2. 復(fù)制粘貼到新文件中
    （平鋪內(nèi)容充滿文件的寬（x軸）或高（y軸））
    （背景平鋪：對于可平鋪背景的切圖，可以先了解下css的background-repeat屬性，對理解次切圖會有幫助）
用切片工具切可以一刀切的活動頁：
  1. 拉參考線
  2. 選擇切片工具
  3. 點(diǎn)擊“基于參考線的切片”按鈕
  4. 保存（全選切片，統(tǒng)一設(shè)置存儲格式）
切圖步驟：
  1. 去掉所有文字只留背景
    打開視覺稿后，用上面說過的方法去掉所有的文字（選擇所有文字圖層（Ctrl+Alt+A）后，按住Alt拖動鼠標(biāo)在小眼睛上全部劃過），只留背景和圖片（記得備份一下PSD文件）。
  2. 保存圖片
    將去掉文字的圖片保存起來。一般情況下內(nèi)容性圖片保存為jpg格式，圖標(biāo)類型的保存為png格式。
  3. 構(gòu)思頁面的具體實(shí)現(xiàn)
    劃分頁面的結(jié)構(gòu)，具體的實(shí)現(xiàn)方式。
  4. 一邊編寫HTML代碼，一邊測量、取色
    根據(jù)構(gòu)思號的頁面結(jié)構(gòu)，開始編寫HTML代碼，并且開始進(jìn)行測量和取色。

1.1.4 保存

存儲所需內(nèi)容：（或拖動內(nèi)容至新文件）

復(fù)制、 新建、 粘貼
Ctrl+C Ctrl+N Ctrl+V
存儲為web所用格式：“文件”>“導(dǎo)出”>“存儲為web所用格式 ”（Alt+Shift+Ctrl+S）

背景內(nèi)容：透明

保存格式的選擇

  • 當(dāng)圖片色彩豐富且無透明要求時，建議保存為 JPG 格式并選用時候的品質(zhì)（通常使用品質(zhì) 80 ）。
JPEG
  • 當(dāng)圖片色彩不太豐富，無論有無透明要求一律保存為 PNG8 格式（256顏色，需特殊設(shè)置如下圖，需設(shè)置雜邊：無；無仿色）。
PNG8
  • 圖片有半透明（Alpha 透明）的要求，保存為 PNG24 格式（特點(diǎn)是不對圖片進(jìn)行壓縮）。
PNG24
  • 為保證圖片質(zhì)量，保留 PSD 源文件，以備不時之需。

1.1.5 修改、維護(hù)

修改與維護(hù)之一：更改畫布大小以便增加新素材。

更改畫布大小

維護(hù)與修改之二：移動圖標(biāo)

第一種：獨(dú)立圖層
若圖標(biāo)為獨(dú)立圖層，則用移動工具拖動即可
第二種：非獨(dú)立圖層
若圖標(biāo)為非獨(dú)立圖層，則用選區(qū)工具選中圖標(biāo)區(qū)域，再用移動工具拖動圖標(biāo)。（若要將已合并的圖層內(nèi)的圖標(biāo)分離到新圖層，則用快捷鍵“剪切”Ctrl+X）

移動圖標(biāo)

維護(hù)與修改之三：裁剪畫布

第一種：用選區(qū)工具選取區(qū)域后，點(diǎn)擊“圖像”>“裁剪”
第二種：直接用裁剪工具裁剪畫布。

注意事項：

為了可維護(hù)性的考慮因適當(dāng)?shù)牧舫鲞m當(dāng)?shù)目瞻讌^(qū)域以便修改所用和提高容錯性。
PNG8需更改圖片顏色模式為 RGB 顏色。（默認(rèn)為索引顏色模式，顏色信息會被丟失）。

1.1.6 圖片的優(yōu)化與合并

使用背景圖代碼：

HTML

<button class="u-btn">點(diǎn)我</button>

CSS

.u-btn{background: url(image/btn.png) no-repeat 0 0;}
.u-btn{background: url(image/sprite.png) no-repeat 0 -50px;}

Sprite拼圖

什么是Sprite拼圖？

圖片的合并就如同上面提到的切圖后保存的過程。拼好的圖稱之為 Sprite拼圖。

Sprite拼圖的好處：

它能減少網(wǎng)絡(luò)請求次數(shù)，提高網(wǎng)頁加載速度。

圖片優(yōu)化與合并：

大小與質(zhì)量的平衡與取舍：
　　實(shí)際情況中我們需要根據(jù)項目本身的要求對圖片的大小與質(zhì)量進(jìn)行取舍。
壓縮工具：
　　無損：Minimage、ImageOptim等工具，也可結(jié)合Grunt自動化構(gòu)建工具一同使用
　　有損：TinuPng是在線網(wǎng)站

合并

排列：
圖片之間必須保留空隙。（為了修改方便和容錯性）

保留空間

圖片排列方式（如圖）：橫向排列、縱向排列

橫向、縱向

分類：（圖片的合并分類原則 ）
同個模塊的圖片合并

同個模塊

大小相近的圖片合并

大小相近

色彩相近的圖片合并

色彩相近

綜合以上方式合并

合并推薦：
只本頁用到的圖標(biāo)合并。
有狀態(tài)的圖標(biāo)合并。

合并推薦
瀏覽器兼容方案：
  • IE6 不支持 PNG24 半透明所以需要保存兩份（sprite - png24 和 sprite-ie.png8）。
  • 在使用 CSS3 是讓高級瀏覽器使用 CSS3 低級瀏覽器則使用切圖。
  • 優(yōu)雅降級指的是讓低級瀏覽器不顯示高級瀏覽器中的界面細(xì)節(jié)。
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容