web切圖的幾個快速鍵及總結

標籤：變換   建立   完成   一個   使用   文本   技巧   表徵圖   點擊   

 

自由的控制視圖系列

• 自由的瀏覽圖片：按住空格後，滑鼠拖動
• 自由的縮放圖片：按住alt+滾輪
• 切換到實際像素（100%）：Ctrl + 1
• 工作區類型切換：Tab

控制內容系列

• 通過畫面上點選一個圖層：Alt + 滑鼠右鍵
• 在畫面上拖動一個圖層：V 切換到移動模式 滑鼠拖動
• 複製拖動一個圖層：移動模式下 Alt+拖動
• 刪除一個圖層：選中要刪除的圖層 按下 Delete
• 合并多個圖層：選中要合并的圖層 按下 Ctrl+E
• 選區內填充顏色：Alt+Delete (前景色彩) Ctrl+Delete(背景色)
• 縮放當前選擇圖層：Ctrl+T(自由變換模式)

工具 + 生產力系列

• 畫一個選區：點擊M進入選區模式 ， 滑鼠拖畫
• 放棄選區：Ctrl+D
吸管工具：點擊I進入吸管模式，點選畫面顏色
• 文字工具：點擊T進入文字模式，點選畫面的文字或者建立新文本
• 切片工具：點擊C進入切片模式（舊版本會有不同）

• 快速隱藏其他圖層：alt+小眼睛

• ctr+r尺規

 

切圖之前的思路分析

拿PSD後，首先應該對這張進行分析，在切圖層面上，主要分析三點哪些圖片是單獨的，比如Logo和banner部分

 

哪些圖片是需要平鋪的，比如導航部分的背景*

哪些圖片是需要CSS sprite
比如一些列表前面的icon小表徵圖

圖片的格式
logo統一切成png透明度的（顏色較少的都用png）

看透明度情況使用png8或png24

一般情況下臨時圖
、ad
、banner
圖用jpg格式，色彩豐富的、大圖切成jpg

顏色較少的都用png，用png8還是png24需看圖片具體透明底情況，半透明的切成png24

在保證圖片的畫質情況下，圖片的大小越小越好

尺寸小的，色彩不豐富的和背景透明的切成gif或者png8的

（註：IE6不支援PNG24透明度圖片，需做相容處理或切成PNG8）
*【PNG-8和PNG-24的區別】png8有1位的布爾透明通道（要麼完全透明，要麼完全不透明），png24則有8位（256階）的布爾透明通道（所謂半透明）**

png-8 和gif有一些相似之處，模式都是索引顏色，只支援像素級的純透明，不支援 alpha 透明。

（註：我們通常說的“IE6不支援 PNG 透明”，是指不支援 PNG-24 的透明。但是 IE6 支援 PNG-8 的透明，就像支援gif的透明一樣）
切圖的一些小技巧
Ctrl+N
建立一個透明背景圖層（大小識圖層比例而定，比裁剪的圖層大就行）

shift
+滑鼠左鍵點擊圖層可選中多個圖層進行操作

Ctrl
+滑鼠左鍵選中需要裁剪的圖層移至第1步中建立好的透明背景圖層當中，再按ctrl+shift+E
進行合并可視圖層。

Ctrl
+滑鼠左鍵點擊右邊圖層欄的選區視圖，選中需要裁剪的圖層選區，再按快速鍵[Alt+I+R
（裁切）或Alt+I+P
（裁剪）]進行裁剪

裁剪完成後ctrl+shift+alt+s
進行儲存為web可用格式。

web切圖的幾個快速鍵及總結