前端必備技能之Photosh切圖

切圖：即從設計稿裏面切出網頁素材

1、使用Photoshop工具

工具的使用：

1.將文字與標尺的單位的設置爲像素

 

2.打開這五個窗口，關閉其它窗口，保存工做區方便之後使用

 

 

3.工做區弄亂時，可使用上圖中的復位，或者在下圖中選擇工做區：

 

 

4.切圖經常使用工具

 

 

注意：在工具菜單欄中右擊會出現同組備選工具：

 

5.放大縮小畫布：

1）.點擊縮放工具

 

 

2）.ctrl 　+　加號/減號 

3）.alt 　+　鼠標滾輪

6.輔助視圖

 

 

標尺快捷鍵：ctrl + r

 

7.獲取文字大小和行高

1）.文字是單獨圖層，使用文字工具點擊，便可在選項欄中看見相關參數。

2）.文字是否是單獨的圖層，使用文字工具，在這些文字中隨便挑兩個字（若是測行高則須要一行兩個）寫上，設置字體，字號，用他遮蓋原來的文字，同樣便可。

 

 

8.矩形選框

 

 

9.巧用添加到選區，在左邊畫一個選區，按住shift（將新畫的矩形添加到選區）在右邊畫一個選區便可知道寬度。

 

 

10.取色

 

 

11.用取色工具判斷背景是否爲純色，上下左右等多處點擊看顏色值是否同樣

 

 

配合魔術棒判斷是不是線性漸變，將容差調0。

 

 

切圖：

1.哪些須要切：

 

 

 

２.隱藏文字只留背景：

 

 

 

３.切圖，在圖層工具欄對應的圖層上面右擊

 

 

同一個圖層：

 

 

不一樣圖層：使用合併組（ctrl +Ｅ）

 

 

帶背景切圖：

 

 

5..裁剪畫布

 

 

６.平鋪圖片切法

 

 

７.切片工具，或者矩形選框沒法複製時

 

 

保存圖片：

要保存爲web所用格式：

 

 

１.保存類型一

 

 

２.保存類型二

 

 

３.保存類型三

 

 

４.保存類型四

 

 

修改與維護：

 

更改畫布：

 

 

移動圖標：

 

 

可能碰見的問題

１.不能完成拷貝命令,所選區域是空的

這個問題很簡單 新手容易犯的錯誤 你注意你的圖層 雖然你表面選的是某一區域 但因爲不是當前活動圖層 而你選的區域是當前圖層的空白處，將你要剪切的那部分圖層設爲當前就能夠了

２.png８修改顏色失真：

 

 

2、使用背景圖

 

 

3、圖片合併方案

 

1. 好處：減小網絡請求，提高網頁加載速度

圖例：

 

 

1.原則

 

 

1）.大小與質量之間作取捨，達到平衡

圖片壓縮工具：

 

 

2).保留空隙，便於與維護

 

 

3）.雪碧圖（sprite）的排列方式

 

4、瀏覽器兼容

法一：採用優雅降級，給高級瀏覽器用戶提供更好的體驗

法二：高級瀏覽器使用ｃｓｓ３，ＩＥ６使用貼圖達到相同效果。