PS切圖
切圖 設計稿中切出網頁素材
給網頁提供圖片素材
使用PS工具
編輯>首選項>單位與標尺-像素
需要用到的面板
工具 -列出了ps提供的工具
選項 -
信息 -顯示顏色 位置 尺寸信息
圖層 -當前打開的文件圖層
歷史記錄-記錄了當前文件的所有歷史操作 可以回提到任意歷史操作
工具
切圖常用工具：
- 移動工具
- 矩形選框工具
- 添加到選區：按住Shift
- 從選區減去：按住Alt
- 與選區交叉：按住Shift+Alt
- 魔棒工具
- 裁剪工具+切片工具
- 縮放工具
- 放大：Ctrl+加號
- 縮小：Ctrl+減號
- 取色器
輔助視圖
"視圖"菜單下開啓： - 對齊
- 標尺 Ctrl+R
- 顯示>參考線Ctrl+；
測量
矩形選框工具&信息面板 - 寬度、高度
- 內邊框、外邊框
- 邊框
- 定位
- 文字大小
- 行高
- 背景圖位置
取色
- 邊框色
- 背景色
- 文字色
切圖準備工作
確定哪些是需要切出來的
修飾性的（一般用在background屬性）
- 圖標、logo
- 有特殊效果的按鈕、文字等
- 非純色的背景
一般存爲PNG24 PNG8
內容性的（一般用在 img 標籤） - Banner、廣告圖片
- 文章的配圖…
一般存爲JPG
切圖第一步
隱藏文字只留背景
若文字爲獨立圖層，隱藏文字圖層 - 找到文字圖層
- 去掉眼鏡圖標
若文字和背景合併，平鋪背景覆蓋文字 - 矩形選工具
- 自由變換（Ctrl+T）
使用移動工具+Alt
按住shift水平移動
切圖
PNG24
- 移動工具選中所需圖層（按住Crtl多選）
- 右鍵合併圖層（Ctrl+E）
- 再右鍵複製圖層到新文件
或直接拖到已有文件（新建：Ctrl+N）
PNG8
帶背景切
- 合併（可見）圖層（Shift+Ctrl+E）
- 矩形選框工具選擇內容
- 魔棒工具去除多餘部分
-從選區中減去：按住Alt
可平鋪背景的切圖
- 用矩形選框工具選取一塊區域
- 複製粘貼到新文件
平鋪內容充滿文件的寬（x軸）或高（y軸）
切片工具
適用於可以一刀切的活動頁
- 拉參考線
- 選擇切片工具
- 點擊"基於參考線的切片"按鈕
- 保存（全選切片，統一設置存儲格式）
保存
存儲所需內容
- 複製、新建、粘貼
Ctlr+C Ctrl+N Ctrl+V
（拖動內容到新文件）
格式選擇
當圖片色彩豐富且無透明要求時
建議保存爲JPG格式並選擇合適的品質
當圖片色彩不太豐富時無論有無透明要求
請保存爲PNG8格式
當圖片有半透明要求
請保存PNG24格式
爲保證圖片質量
保留一份PSD，在PSD上進行修改
圖片修改與維護
更改畫布大小
圖像-畫布大小-
（定位需要選在左上角）
減小畫布到指定區域
選定區域-裁剪
移動圖標
- 若圖標爲獨立圖標，則用移動工具拖動即可
- 若圖標爲非獨立圖層
- 用選區工具選中圖標區域
- 用移動工具拖動圖標
修改PNG8的圖片
需要改顏色模式爲：PGB顏色
使用背景圖
HTML
<button class="u-btn">1</button>
CSS
.u-btn{background:url(images/btn.png)no=repeat 0 0;}
圖片合併方案
Sprite拼圖
好處：減少網絡請求，提升網頁加載速度
大小與質量
合併
圖片之間必須保留空隙
排列方式
橫向 縱向
合併-分類
- 把同屬於一個模塊的圖片進行合併
- 把大小相近的圖片進行合併
- 把色彩相近的圖片進行合併
- 綜合以上方式合併
推薦 - 只本頁用到的圖片合併
- 有狀態的圖標合併
瀏覽器兼容
IE6不支持PNG24半透明
CSS3&切圖
