Adobe Photoshop，簡稱'PS'，是由Adobe Systems開發(fā)和發(fā)行的圖像處理軟件。Photoshop主要處理以像素所構(gòu)成的數(shù)字圖像。使用其眾多的編修與繪圖工具，可以有效地進行圖片編輯工作。
1.1 PhotoShop歷史
最初進入中國市場的版本是5.0 。 后來就有6.0，7.0，8.0(CS)，9.0(CS2)，CS3，CS4，CS5，CS6 ，到后面的CC。
1.2 PhotoShop介紹
圖1-1 Photoshop CC界面介紹
2.1 圖像的基本概念
2.1.1 位圖
Photoshop使用位圖來表示黑白圖像，其邏輯是每一個像素對應(yīng)1個數(shù)據(jù)位。位圖圖像又稱為點陣圖像，是由一系列像素組成的可識別的圖像。位圖圖像與分辨率有關(guān)，任何位圖圖像都含有有限數(shù)目的像素。
圖2-1 位圖
2.1.2 矢量圖
矢量圖與分辨率無關(guān)，其形狀通過數(shù)學(xué)方程描述，由邊線和內(nèi)部填充組成。
圖2-2 矢量圖
2.1.3 像素
像素(pixel)是圖形單元的簡稱，是位圖圖像中最小的完整單位。
2.1.4 分辨率
· 在數(shù)字化的位圖圖像中，分辨率的大小直接影響到圖像的品質(zhì)。
· 分辨率越高，圖像就越清晰，而生成的文件也就越大，操作過程中所占用的內(nèi)存和CPU處理時間也就越多。
· 當(dāng)圖像用于打印輸出時，分辨率就要設(shè)置得高一些；當(dāng)圖像用于屏幕展示時，分辨率可以相應(yīng)設(shè)置得低一些。
2.1.5 位分辨率
用于衡量每個像素儲存信息的位數(shù)。通常有8位、16位、24位或32位色彩。
2.2 圖片格式
2.2.1 JPEG(.jpg)
JPEG圖片以24位顏色存儲單個位圖。
支持最高級別的壓縮，但這種壓縮是有損耗的，壓縮率越大的圖片，顯示的內(nèi)容越模糊。
2.2.2 PNG(.png)
PNG是一種無損壓縮的位圖圖形格式，是網(wǎng)頁常用的圖片格式，原因是它壓縮比高，生成文件體積小。同時其支持透明效果，使彩色圖像的邊緣能與任何背景平滑地融合，從而徹底地消除鋸齒邊緣。
2.2.3 GIF(.gif)
GIF格式可以存多幅彩色圖像，如果把存于一個文件中的多幅圖像數(shù)據(jù)逐幅讀出并顯示到屏幕上，就可構(gòu)成一種最簡單的動畫，也就是我們常見的動圖。 GIF圖片不一定就是動圖，其也可以是一張圖片，由于其具有高壓縮的算法，所以網(wǎng)頁中也常有出現(xiàn)不是動圖的GIF圖。
2.2.4 PSD(.psd)
Photoshop自身的文件格式，當(dāng)使用Photoshop直接保存的時候就是PSD格式的文件。
3.1 文件操作
功能
快捷鍵
新建文件：Ctrl+N
打開文件：Ctrl+O
保存文件： Ctrl+S
關(guān)閉文件：Ctrl+W
3.2 工具操作
移動工具：V
吸管工具：I
裁剪工具：C
字體工具：T
抓手工具：H
自由變換：Ctrl+T
畫布放縮： Alt+滾輪
隱藏選擇框：Ctrl+H
取消選擇框：Ctrl+D
圖像大?。?Ctrl+Alt+I
3.3 圖層操作
新建圖層：Ctrl + Alt + Shift + N
復(fù)制選中圖層：Ctrl + J
合并選中圖層：Ctrl + E
合并可見圖層：Ctrl + Shift + E
組合選中圖層： Ctrl + G
快速選擇圖層：Ctrl + 單擊鼠標(biāo)左鍵
連續(xù)多選圖層：Shift + 單擊鼠標(biāo)左鍵
拖動并復(fù)制圖層：Alt + 拖動
3.4 圖層鎖定解鎖與對齊
圖片解鎖與上鎖:鎖定圖層是為了防止誤操作。
3.4.1 鎖定圖層
Photoshop提供了4種鎖定方式
1. 鎖定透明像素： 鎖定透明圖層，當(dāng)前圖層透明部分不會發(fā)生任何變化。
2. 圖像像素鎖定： 禁止對圖層圖像的繪制或者修改。但可移動圖層，因為，雖然在效果上看圖像改變了，但這并不是修改像素。另外，也可改變圖層不透明度和混合模式，這也不屬于修改圖像的操作，因為圖層像素本身并沒有被修改，只是更改了表現(xiàn)方式。
3. 鎖定位置： 該圖層就無法移動，鼠標(biāo)，鍵盤都不能移動它。
4. 鎖定全部： 這個圖層既無法繪制也無法移動。完全鎖死。
圖3-1 鎖定圖層
3.4.2 解鎖圖層
選中該圖層，在最上邊有個鎖頭的圖標(biāo)，點擊一下即可解鎖，再次點擊即可鎖定。 選中該圖層，點擊圖層上的鎖頭圖標(biāo)，也可以解鎖圖層 。
圖3-2 解鎖圖層
3.4.3 圖層對齊
找到需要操作的圖層。 切換到移動工具（快捷鍵V）。 在選中多個圖層的情況下，對齊工具會被激活，點擊即可。
圖3-3 圖層對齊
3.5 切圖操作
3.5.1 切片切圖法
1. 使用切圖工具（快捷鍵C）對所選的圖片進行切圖
圖3-4 切片切圖法1
2. 選擇所切圖片存儲為 web 所用格式（ctrl+alt+shit+s）
圖3-5 切片切圖法2
3.5.2 圖層切圖法
1. 選中該圖層
· 圖3-6 圖層切圖法1
2. 在圖層區(qū)域，右鍵 -> 復(fù)制圖層 -> 文檔：新建 -> 確定
圖3-7 圖層切圖法2
圖3-8 圖層切圖法3
3. 對新建圖層進行圖像->裁剪->確定
· 圖3-9圖層切圖法4
· 圖3-10 圖層切圖法5
5. 存儲為 web 所用格式 （ctrl+alt+shit+s）
3.5.3 快捷鍵的操作
由于圖層切圖3.5.2的步驟過于繁瑣，可以使用 動作 （Alt+F9） 記錄下來 并使用快捷鍵 進行操作。
1. 打開動作 -> 新建動作 -> 設(shè)置快捷鍵 -> 記錄
· 圖3-11 圖層切圖法1
2. 重復(fù)圖層切圖1-3步驟（錄制過程 不要多余按鍵操作 異步到位），停止錄制，完成錄制
· 圖3-12 圖層切圖法2
3.6 移動工具
· 使用移動工具（快捷鍵V）對所選的元素進行移動。
· 使用鼠標(biāo)左鍵長按可以拖拽所選元素。
3.7 選區(qū)工具
使用矩形選區(qū)工具（快捷鍵M）對圖層內(nèi)的元素進行選中。
作用：
1. 只針對選框內(nèi)的內(nèi)容進行操作。
2. 可以復(fù)制剪切選框內(nèi)的內(nèi)容。
3. 配合移動工具可以拖拽被選中的圖像。
4.1 雪碧圖(Sprites)制作
雪碧圖也稱精靈圖（英文:Sprites）,是一種網(wǎng)頁圖片應(yīng)用處理方式，它允許將一個頁面涉及到的所有零星圖片都包含到一張大圖中。
圖4-1 雪碧圖(Sprites)
3. 優(yōu)點
· 減少http請求次數(shù)
· 減少圖片數(shù)量，提升網(wǎng)頁加載速度
· 減少網(wǎng)絡(luò)帶寬占用
4. 缺點
· 提高了網(wǎng)頁開發(fā)和維護成本。
· 合并內(nèi)容性圖片會影響頁面的可讀性，語義化降低
5. 應(yīng)用場景
· 一般只有描述性圖片用來制作雪碧圖，比如頁面中使用的各種小圖標(biāo)
· 按鈕背景圖及其各種效果的圖片，適合做成雪碧圖
· 對于img標(biāo)簽設(shè)置的內(nèi)容性圖片，是不能合成到雪碧圖的
· 開發(fā)游戲使用的素材圖片
6. 制作規(guī)范
· 圖片在合并之前必須保留空隙
· 圖片排列方式有橫向和縱向
· 合并分類的原則
· 把同屬一個模塊的圖片進行合并
· 把大小相近的圖片進行合并
· 把色彩相近的圖片進行合并
4.2 圖片壓縮
7. 調(diào)整圖片大小
8. 存儲為web所用格式
9. 使用第三方工具
通過本篇文章，你可以學(xué)到以下知識點：
· 認(rèn)識PhotoShop工具操作界面
· 圖像基礎(chǔ)
· 工具使用與快捷鍵操作
· 圖片優(yōu)化
