1.三問切圖

• 什么是切圖？

  • 從設計稿（如.psd文件）中切出圖片素材（如.png、.jpg文件）
  • DIV+CSS切圖
    1.第一步：從設計稿里面切出按鈕、圖標、logo、背景 圖、其他內容性圖片...
    2.第二步：按照效果圖，編寫代碼，引入切出來的圖片，實現一個靜態頁面。

• 為什么要切圖？

  • 網頁上的有些效果無法通過編寫代碼來實現，或者用代碼實現的效果的兼容性不夠好，此時，可以通過引入圖片資源的方式來實現這些效果。
  • 在網頁中添加圖片素材的兩種方法：

   1.HTML:img標簽
   <img src="images/avater.jpg" alt="頭像">
  2.CSS:background屬性
  .icon{background-image:url(../images/sprite.png);background-position: 0 0;}
  

  • 圖片精靈（sprite.png）：把多個小圖標、小按鈕合并成一個文件，使用時進行定位。Demo、原理、優缺點…

• 怎么樣切圖？

  • 使用PS工具
    PS適合制作、編輯圖片，但因為PS體積大，所以不適合圖片的預覽，若要預覽圖片，可以使用系統自帶的圖片工具。
  • 使用背景圖
  • 圖片合并方案
  • 瀏覽器兼容

2.工具、面板、視圖

• 工具

  • 移動工具
    • 作用：選擇、移動圖層
    • 設置：選項區——自動選擇、圖層
  • 矩形選框工具
    • 截取一個矩形，在信息面板中查看該矩形的尺寸...
    • 添加到選區：按住Shift
    • 從選區減去：按住Alt
    • 與選區交叉：按住Shift + Alt
  • 魔棒工具
    • 摳圖神器！適合扣取不規則小圖標
    • 容差：表示選取的顏色范圍
    • 消除鋸齒：讓邊緣光滑
    • 連續
  • 裁剪工具+切片工具
    • 裁剪畫布
  • 縮放工具
    • 鼠標點擊放大、縮小
    • 快捷鍵：放大(Ctrl+加號)、縮小(Ctrl+減號)、100%(Ctrl+1)
    • 秘訣：Alt+鼠標滾輪
  • 拾色器（取色器）
    • 點擊目標吸取顏色
    • 前景色、背景色
    • 切換按鈕
    • 點擊拾色器工具后，會出現拾色器面板，并可看到畫布中的鼠標箭頭已變為一個吸管，然后在畫布上任意位置點擊一下，即可在拾色器面板中看到該位置的顏色信息—— #ffffff、RGB

• 面板

  • 首選項設置

    • 設置步驟：編輯菜單-->首選項-->單位與標尺-->標尺、文字：像素
    • 設置原因：CSS中使用得最多的單位是像素，因此使用PS測量、讀取設計稿的數據時，皆以px為單位。

  • 切圖常用面板
    1.在“窗口”菜單下開啟前端經常使用的面板

    • 工具：默認開啟。點擊工具面板左上角的小按鈕，進行單雙列布局的切換。
    • 選項：默認開啟。選項面板與當前工具面板所選工具一一對應。
    • 信息(F8)：顏色、位置、尺寸信息。信息面板與矩形選框工具一起使用可進行數據的測量。
    • 圖層(F7)：默認開啟。列出當前打開的所有圖層。+、-、眼睛小圖標分別用于添加、刪除、隱藏/顯示圖層。
    • 歷史紀錄：點擊歷史操作，可回退到任意一步歷史步驟。

    2.新建工作區
    窗口菜單-->工作區-->新建工具區。完成后，可在主界面右上角點擊小按鈕進行工作區的選擇與復位。

• 視圖

  輔助視圖—在視圖菜單下勾選以下內容：

  • 顯示額外內容
  • 顯示-->參考線：Ctrl+;
  • 標尺：Ctrl+R
  • 對齊：默認開啟。開啟后，移動圖層時，自動吸附邊緣、參考線

• 其他

  • 組：“組”類似于文件夾。設計師在設計時，會將相關聯的圖層歸類到同一個組內，方便后續管理?！敖M”可嵌套。
  • 撤銷
    • 撤銷單步：Ctrl+Z
    • 連續撤銷：Ctrl+Alt+Z
    • 回退多步：在歷史面板中點擊回退

3.測量、取色

• 概述

  打開設計稿，獲取信息，這些信息往往對應CSS屬性

  • 尺寸信息——測量 width: 200px
  • 顏色信息——取色 color: #ffcc00

• 測量

  • 哪些數據需要測量？所有數字都需要測量——CSS中所有能夠接受數字型的屬性

    • 寬度、高度width、height
    • 內邊距、外邊距padding、margin
    • 邊框border
    • 定位top、left、right、bottom
    • 文字大小font-size
      1. 單獨文字圖層：點擊文字工具，再點擊文字圖層，即可在選項面板中看到文字大小
      2. 已經合并到背景圖中的文字：矩形選框工具&信息面板---測量時，盡可能選擇大一點的字，從上至下量取，相對精確
    • 行高line-height
      1. 單獨文字圖層：文字工具-->選中文字圖層-->點擊選項面板倒數第4個圖標-->可在跳出的字符屬性面板找到行高
      2. 已經合并到背景圖中的文字：用矩形選框工具量取，任意兩行底部（頂部）之間的高度即為行高

  • 背景圖位置background-position
    e.g 小按鈕上下左右的邊距

  • 做到盡可能100%還原設計稿，測量時，盡可能將畫布放大，減小誤差
    e.g 剛開始量取時，用矩形選框工具選擇相對大一點的區域，再按住Alt 鍵，將多余的區 域刪除，若不小心去掉有用的區域，可按住 Shift 添加區域

  • 巧用：一般網頁設計稿比較大，而我們測量時又將畫布放大，若要選擇一個較大的區域時，會帶來不便---在左側邊緣畫一個小的矩形框，然后把滾動條滾動到右側，此時，按住 Shift 鍵，在右側邊緣再畫一個小的矩形框，完成后，信息面板顯示的寬度即為左右邊緣之間的距離

• 取色

  • 哪些需要取色？所有顏色都要取色——CSS中，能接受顏色值的所有屬性

  • 邊框色border-color

  • 背景色background-color

  • 文字色color

  • 如何獲取文本顏色？

  • 單獨文字圖層：選取文字工具-->點擊文字圖層-->點擊選項面板的倒數第六個圖標，即可看到文本顏色信息

  • 已經合并到背景圖中的文字：放大畫布-->拾色器&吸管工具
    邊框取色：放大-->拾色器&吸管工具

  • 特殊情況：單獨文字圖層在拾色器面板中顯示的文本顏色信息與我們實際看到的顏色不符

  • 原因：該文字圖層下面有一些顏色疊加的效果

  • 解決方法：此時，不再使用文字工具選項面板提供的文本顏色信息，而是使用拾色器&吸管工具進行取色。放大畫布后，盡可能避開文字邊緣的鋸齒進行取色，減小誤差

  • 取色工具的巧用——確定背景是否為純色
    使用吸管在某區域不斷到隨機點擊，若顏色信息有變動，則該區域的顏色不是純色

  • 魔棒工具的巧用——確定是否是線性漸變
    先用移動工具點擊選擇某個圖層，再選擇魔棒工具，點擊該圖層，在容差較低的情況下，選中的區域為該圖層中的一個橫向區域，即該橫向區域中的顏色一樣，繼續往下點，若發現選中的區域皆為橫向區域，則說明該圖層是從上往下的沿Y軸的顏色線性漸變，即X軸顏色都一樣，Y軸有顏色變化。同理，存在沿X軸的顏色線性漸變。

4.切圖

• 切圖及切圖的各種操作
  • 隱藏文字（獨立圖層和非獨立圖層的不同操作方法）
  • png8和png24格式的切圖方式
  • 可平鋪背景的切圖方式及活動頁的切圖方式
    背景平鋪：對于可平鋪背景的切圖，可以先了解一下CSS的 background-repeat屬性，對理解切圖會有幫助
• 切圖之前

  • 哪些是需要切出來的？

    • 修飾性的（一般用在background屬性——CSS）
      1. 圖標、logo
      2. 有特殊效果的按鈕、文字等
      3. 非純色的背景
    • 內容性的（一般用在img標簽---HTML）
      1. Banner、廣告圖片
      2. 文章中的配圖…
    • 從服務器端獲取的內容性圖片不需要切圖，只需要用img標簽占個位置即可（不用切，只占位）

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

    • 內容性的圖片的顏色相對豐富，一般存為JPG格式，還需要進行壓縮，以保證圖片大小合適
    • 修飾性圖片一般保存為PNG24格式（IE6不支持半透明）或者PNG8格式，兩者皆支持全透明，PNG24還支持半透明，PNG24圖片質量較高

• 切圖·隱藏文字只留背景
  • 隱藏文字的原因：文字作為網頁內容，需要寫到HTML標簽之中，只有當文字具有某些用代碼無法實現的效果時，才需要對文字進行切圖
  • 隱藏文字的兩種方式
    • 若文字為獨立圖層，隱藏文字圖層
      1.用移動工具找到文字圖層
      2.在圖層面板中去掉眼睛圖標
    • 若文字和背景合并，平鋪背景覆蓋文字
      1.矩形選框工具：在不包含文字的背景中，畫一個高度略大于文字高度的矩形框
      2.自由變換（Ctrl+T）：背景可拉伸。按住Ctrl+T，選擇矩形框靠近文字的一條邊，將其拉向文字區域，即可平鋪背景，覆蓋文字，雙擊完成。
      3.使用移動工具+Alt+Shift：背景不可拉伸，比如背景具有紋理時。用矩形選框工具在不包含文字的地方選擇一個大于文字行高的區域，再用移動工具選擇該區域，按住Alt鍵可進行移動，若同時按住Shift鍵，可固定在水平方向移動，然后，連續進行多次拖動，直至將文字全部覆蓋。

• 切圖·png24

  • 移動工具選中所需圖層（按住Ctrl多選）
  • 右鍵合并圖層（Ctrl+E）
  • 再右鍵復制圖層到新文件或直接拖至已有文件（新建：Ctrl+N）
  • 所需內容為：
    • 單獨圖層：只需執行第一、三步
    • 多個圖層：Ctrl+E，若這些圖層在同一組，則直接合并組
  • 裁剪畫布：用矩形選框工具選擇區域--->在圖像菜單下選擇裁剪

• 切圖·png8

  • 帶背景切：png8格式不支持半透明效果，很多小圖標上面有半透明的像素點，此時需要帶背景切
  • 合并（可見）圖層（Shift+Ctrl+E）：圖層菜單-->合并可見圖層
  • 矩形選框工具選擇內容
  • 魔棒工具去除多余部分: 從選區中減去,按住Alt

• 可平鋪背景的切圖

  • 針對CSS中background-repeat屬性
    • 用矩形選框工具選取一塊區域
    • 復制粘貼到新文件中：新文件背景內容為透明
  • 平鋪內容充滿文件的寬（X軸）或高（Y軸）：若是沿X軸平鋪，則平鋪內容充滿文件的寬，完全覆蓋文件的背景內容。若無法充滿文件的寬，可對平鋪內容進行水平拉伸直至充滿。

• 切片工具

  • 適用于可以一刀切的活動頁
    • 拉參考線：從標尺欄拉線
    • 選擇切片工具
    • 點擊“基于參考線的切片”按鈕
    • 保存（全選切片，統一設置存儲格式）
    • 文件菜單-->存儲為Web所用格式-->選擇所有切片-->JPG格式-->品質較低：60

5.保存

• 存儲所需內容

  • 移動：
  • 所需內容為獨立圖層：新建Ctrl+N --->拖動內容至新文件
  • 所需內容已經合并到背景中：用矩形選框工具選中目標區域--->魔棒工具+Alt 選擇所需內容--->復制 Ctrl+C--->新建Ctrl+N（寬、高、背景內容：透明）--->粘貼Ctrl+V
  • 存儲：文件菜單--->存儲為Web所用格式（Alt + Shift + Ctrl + S）：跳出保存方框后，點左上角的“雙聯”，可看到對比效果。

• 保存為哪種格式？

  • JPEG（JPG）：當圖片色彩豐富且無透明要求時，建議保存為JPG格式，并選擇合適的品質（60-80），從而對圖片進行壓縮（壓縮原因：因為我們切出來的圖片都是需要運用到網絡中的，所以需要考慮網絡傳輸的問題）
  • PNG8 : 當圖片色彩不太豐富時，無論有無透明要求，請保存為PNG8格式。特點：只有256種顏色，文件比較小，適合網絡傳輸。設置：雜邊-無、擴散-無仿色、右上角小箭頭：存儲設置。
  • PNG24 ：當圖片有半透明要求時，請保存為PNG24格式。特點：不對圖片進行壓縮，文件較大，支持半透明效果。
  • PSD：為了保證圖片質量，保留一份PSD，在PSD上進行修改，再導出所需圖片。
    • 原因
      1.PSD文件可保留單個圖層，對后期維護相當方便。
      2.PNG8會對圖片進行壓縮，在PNG8格式的文件上進行修改的話，修改之后再保存，相當于再一次進行壓縮，導致很多像素點的丟失。

6.修改、維護

• 問題

  1.想要改變圖標的位置
  2.畫布太大，文件空白太多
  3.新功能，加個圖標
  4.圖標多余，要刪除

• 修改與維護一

  • 要繼續放更多的圖片？
    更改畫布大小：圖像菜單-->畫布大小-->寬高、定位--左上角（向右、向下擴展畫布大小），使得已經在使用的圖片，在CSS里面的背景圖位置屬性不需要修改。

• 修改與維護二

  • 移動圖標
    • 若圖標為獨立圖層，則用移動工具拖動即可
    • 若圖標為非獨立圖層
      1.用矩形選框工具選中圖標區域
      2.用移動工具拖動圖標
      e.g 兩個圖標位于同一個圖層，若想移動其中一個圖標，先用移動工具選中該圖層，再用矩形選框工具選中該圖標，然后用移動工具移動圖標。此外，選中該圖標后，還可按住Ctrl + X ，再按Ctrl + V ，即可將該圖標從原來的圖層中分離出來，方便后期維護。

• 修改與維護三

  • 要減小畫布到指定區域
    • 方法一
      1.選定選區：矩形選框工具
      裁剪：圖像菜單--->裁剪
    • 方法二
      選中工具欄的裁剪工具后，畫布周圍出現虛線，點擊邊緣線中間部分，再朝指定方向進行拉伸

• 注：考慮到可維護性，畫布一般稍微大于圖像區域

• 注意事項

  png8格式默認的模式為索引顏色。該模式下，修改顏色容易丟失顏色信息，所以修改png8的圖片顏色之前，需先更改顏色模式為：RGB顏色。具體操作為：圖像菜單--->模式--->RGB顏色

7.圖片優化與合并

• 使用背景的圖代碼

HTML：
<button class="u-btn">點我</button>
CSS：
.u-btn{background:url(images/btn.png) no-repeat 0 0;} 
.u-btn{background:url(images/sprite.png) no-repeat 0 -50px;} 

圖片詳情見課件

• 為什么要拼圖？

  • 什么是Sprite拼圖：小圖標…
  • Sprite拼圖的好處：減少網絡請求，提升網頁加載速度

• 圖片優化與合并

  • 大小與質量
    • 平衡與取舍
    • 壓縮工具
      1. 無損 Minimage 托管于Github上--NetEaseWD/minimage
      2. 有損 TinyPng 在線網站tinypng
  • 合并
    • 排列
      • 圖片之間必須保留空隙
        e.g 若有空隙，當想把圖標、按鈕變高一點時，只需更改圖片的高度，而不需要更改CSS里面背景圖位置這個屬性
      • 圖片排列方式
        1. 橫向排列
        2. 縱向排列
  • 分類
    1. 把同屬于一個模塊的圖片進行合并
    2. 把大小相近的圖片進行合并
    3. 把色彩相近的圖片進行合并
    4. 綜合以上方式合并
  • 合并推薦
    1. 只本頁用到的圖片合并
    2. 有狀態的圖標合并：hover前后
  • 瀏覽器兼容方案
  • IE6不支持PNG24半透明
    存兩份： sprite.png(24)、sprite_ie.png(8-帶背景切)
  • CSS3&切圖
    新技術：陰影、圓角
    高級瀏覽器：CSS3
    低級瀏覽器：切圖
  • 優雅降級原則：都用CSS3來處理，讓IE這種低級瀏覽器沒有這種效果，如圓角變為直角
  • 圖片合并時保留空隙：
    對于具體要保留多大的空隙呢…詳情見可見視頻筆記