頁面制作部分之PS切圖
<--本標簽下，通過頁面制作、頁面架構、javascript程序設計、DOM編程藝術、產品前端架構五部分來分享總結筆記，總結筆記會陸續分享-->
網頁設計在技術層面上，第一步是美工做出網頁效果圖，第二步就是網頁前端進行網頁切圖。網頁切圖工具常用的有fireworks、PS，這里使用PS進行網頁切圖。
我們通過設計稿，得到我們想要的產出物（如.png,.jpg文件），給網頁提供圖片素材（HTML:img，CSS:background）。
一.使用PS工具
1.1 PS首選項設置
編輯-》首選項-》單位與標尺，選改為像素。
1.2 面板
在“窗口”菜單下開啟：
工具（默認已開啟）
選項（默認已開啟）
圖層（默認已開啟）
信息（手動開啟）
歷史記錄（手動開啟）
關閉其他不需要的功能，將以上功能放置在合適的區域，窗口-》工作區-》保存工作區，設置后的工作區如下：
1.3 切圖常用工具
▪移動工具
將自動選擇勾選，將組改為圖層
▪矩形選框工具
▪魔棒工具
▪裁剪工具+切片工具
▪縮放工具
-放大：Ctrl+加號
-縮小：Ctrl+減號
▪取色器
1.4 輔助視圖
在“視圖”菜單下開啟：
▪對齊（默認開啟）（遇到參考線、邊界有一個吸附力）
▪標尺 Ctrl+R
▪顯示->參考線 Ctrl+;（需要顯示額外內容）
二.獲取信息
打開設計稿，獲取信息：
▪尺寸信息：測量
▪顏色信息：取色
獲取信息最重要的是將畫布拉的盡量大，盡量減小誤差。
測量
2.1所有數字都要測量
工具：
矩形選框工具+信息面板
測量內容：
寬度、高度
內邊距、外邊距
邊框
定位
文字大小
行高
背景圖片位置
2.2測量選區（矩形選框工具）
添加到選區：按住Shift
從選區減去：按住Alt
與選區交叉：按住Shift+Alt
2.3文字相關測量
2.3.1單獨的文字圖層
選中圖層，點擊工具T，頂部選項區顯示如下：
可以直接獲得文字的大小；
點擊
，可以獲得其他的一些信心，如行高：
2.3.2非單獨的文字圖層（選擇較大字作為測量）
使用矩形選框工具，選中文字，高度即為字號大小；
行高的測量
使用矩形選框工具，從上一行文字底部到本行文字底部的高度即為行高，如下圖：
取色
2.4所有顏色都要取色
工具：
拾色器+吸管工具
取色內容：
邊框色
背景色
文字色
盡量放大畫布，獲取實點、避免鋸齒點。
2.5單獨的文字圖層可以直接獲取顏色，其他的顏色用“拾色器+吸管工具”獲取
特別注意的是由於圖層的疊加效果，顯示的顏色與實際顏色不相符，這是要用拾色器來獲取顏色
2.6取色工具的巧用
2.6.1確定背景是否為純色（拾色器+吸管工具）
不同區域不停的點擊，看顏色是否變化
2.6.2確定是否是線性漸變（魔術棒）
先選定圖層，再選擇魔棒工具，點擊選中最上面一行，顯示如下：
繼續點擊，一次向下選中一行
確定為線性漸變。
三.切片
3.1 需要切片的內容
修飾性的（一般用在background屬性）：
圖標、logo
有特殊效果的按鈕、文字等
非純色的背景
內容性的（一般用在img標簽）
banner、廣告圖片
文章中的配圖…
例如，下圖，紅色框內是需要切的，黑框內是從后台獲取的不需要切
3.2 切出來的圖片的保存類型
內容性的一般保存為.JPG，
修飾性的一般保存為.PNG8，.png24
其中PNG8和PNG24都支持全透明；PNG24支持半透明的（圖片質量比較高），但ie6不支持PNG24半透明，需要做兼容。
3.3.切圖
隱藏文字只保留背景
3.3.1文字獨立圖層（隱藏文字圖層）
找到文字圖層
去掉眼鏡圖標
3.3.2文字和圖片合並（平鋪背景覆蓋文字）
背景圖可以做拉伸
矩形選框工具選一塊區域
自由變換 Ctrl+T
背景圖不可以做拉伸（背景有紋理效果等）
矩形選框工具選一塊區域
使用移動工具+Alt
3.3.3 獲取切片
切圖.PNG24
•移動工具選中所需圖層(按住Ctrl多選)
•右鍵合並圖層（Ctrl+E)
•再郵件制圖層到新文件或直接拖至已有文件(新建：Ctrl+N )
切圖.PNG8（帶背景切）
•合並可見圖層（Shift+Ctrl+E)
•矩形選框工具選擇內容
•魔棒工具去除多余部分（從選取中減去：按住Alt）
3.3.4 可平鋪背景的切圖
矩形選框工具選一塊區域
復制粘貼到新文件中
平鋪內容充滿文件的寬（x軸）或高（y軸）：如，新建文件用於平鋪x軸，切圖的寬要與新建文件一致
3.4.切片工具（適用於可以一刀切的活動頁）
▪拉參考線
▪選擇切片工具
▪選項欄點擊“基於參考線的切片”按鈕
▪選擇切片選擇工具
雙擊切片，更改文件名等信息
▪保存
全選切片，統一設置存儲格式
四、保存
存儲所需內容（背景一般為透明）
▪復制、新建、粘貼（Ctrl+C、Ctrl+N、Ctrl+V，或拖動內容至新文件）
獨立的圖層：直接拖動內容至新文件
合並在一起：矩形選框工具選區，魔術棒提取，Ctrl+C、Ctrl+N、Ctrl+V
▪存儲為Web所用格式（Alt+Shift+Ctrl+S）
4.1 保存類型一（JPG）
當圖片色彩豐富且無透明要求時
建議保存為JPG格式並選擇合適的品質
注：品質：60-80；不能為100,80已經很好
4.2 保存類型二（PNG8）
當圖片色彩不太豐富時無論有無透明要求
保存為PNG8格式
注：保存時，需要重新設置無仿色和無雜邊
4.3 保存類型三（PNG24）
當圖片有半透明要求時
保存為PNG24格式
默認設置。
4.4 保存類型四（PSD）
為保證圖片質量
保留一份PSD文件，以后任何的修改都在PSD文件上
五 修改與維護
隨着項目的進展，我們可能想要改變圖標的位置、添加新圖標、刪除舊的圖標、修改畫布的大小，所以要進行修改和維護。
5.1 更改畫布大小
5.1.1 增加畫布
圖像-》畫布大小，根據情況，選擇定位點
5.1.2 減小畫布
第一種方法：矩形選擇工具選中區域，圖像-》裁剪進行畫布的裁剪；
第二種方法：直接使用裁剪工具進行裁剪。
5.2 移動圖標
▪若圖標為獨立層
則用移動工具拖動即可
▪若圖標為非獨立
用選區工具選中圖標區域
用移動工具拖動圖標
注：若圖標為非獨立，可用選區工具選中圖標區域，按Ctrl+X剪切，然后再粘貼，將此圖標變為獨立的圖層。
5.3 添加圖標
將圖標整理后，放入相應的位置即可。
注意事項：
修改PNG8的圖片，需要更改顏色模式為RGB顏色，操作方法：圖像-》模式-》RGB顏色。
六 使用
圖片合並方案：Sprite 圖片
CSS Sprites在國內很多人叫CSS精靈，是一種網頁圖片應用處理方式。它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。根據具體圖標在大圖上的位置，給背景定位。
Sprite拼圖好處：減少網絡請求，提升網頁加載速度。
6.1 大小與質量（平衡與取舍）
壓縮工具：
▪有損TinyPng：https://tinypng.com/
▪無損Minimage：https://github.com/NetEaseWD/minimage
6.2 合並
6.2.1 排列
圖片之間必須保留合適空隙，（便於圖片修改、Css代碼編寫）
圖標排列方式：橫排和豎排
6.2.2 分類
▪把同屬於一個模塊的圖片進行合並（功能化）
▪把大小相近的圖片進行合並（節省空間）
▪把色彩相近的圖片進行合並（降低顏色數，文件體積會相對的小）
▪綜合以上方式合並
6.2.3合並推薦
▪只本頁用到的圖片合並
▪有狀態的圖片合並（鼠標經過狀態的改變等）
七 瀏覽器兼容方案
7.1 IE6不支持PNG24半透明
解決方案：存兩份sprite.png(24)和sprite_ie.png(8)
7.2 Css3
▪高級瀏覽器使用css3
▪低級瀏覽器使用切圖
7.3 優雅降級
▪支持的顯示效果
▪不支持沒有效果
具體的sprite使用例子請參考另一篇博文：http://www.cnblogs.com/jingwhale/p/4280073.html
本節完！
下一節預告《頁面制作之開發調試工具》
轉載需注明轉載字樣，標注原作者和原博文地址。
關注微信公眾號獲得及時推送
