目的：

學習使用Photoshop的基本使用，以及Photoshop中關於切圖這一塊的知識，目的是能熟練使用Photoshop檢視UI設計師的設計效果圖，同時利用Photoshop切圖來製作專業html頁面。

常用圖片格式

圖片是網頁製作中很重要的素材，圖片有不同的格式，每種格式都有自己的特性，瞭解這些特效，可以方便我們在製作網頁時選取適合的圖片格式，圖片格式及特性如下：

1、psd  psd是photoshop的專用格式，UI設計師使用photoshop設計效果圖，最後會將psd格式的效果圖交付給前端工程師，這種格式是不壓縮的，而且保留了圖層、透明和半透明等圖片資訊，所以這種圖片格式的容量相對來說是很大的，前端工程師使用這種格式的效果圖來切圖製作網頁，但是網頁中不會使用這個格式的圖片，它的作用一是儲存圖片的原始資料，二是方便圖片的修改。

2、jpg  jpg是一種有失真壓縮格式，壓縮效率高，容量相對來說最小，網路傳輸速度快，它不能存為透明背景，在網頁中應用最廣，一般在不需要透明背景的時候就使用這種圖片。

3、gif  gif是一種無失真壓縮格式的圖片，最多隻有256種顏色，顏色豐富的圖片轉化為這種格式會顏色失真。它的背景可以是透明的，但不能是半透明的，透明背景中的影象，如果邊緣輪廓是曲線的，會產生鋸齒，它還可以儲存為動畫格式。

4、png  png的目的是為了代替gif圖片，無失真壓縮，背景可以是透明或者半透明的，透明影象邊緣光滑，沒有鋸齒，網頁中需要透明或者半透明背景的圖片，首選是png圖片。png也是firework的專用格式，也可以包含圖層資訊。firework是另外一款可以和photoshop相比的影象處理軟體。也有少量的UI設計師使用這種軟體來設計網頁效果圖，他們設計的效果圖就是帶圖層的png格式的，碰到這種設計師，如果我們習慣了photoshop切圖，可以將帶圖層的png效果圖轉化成psd圖片再處理。

5、webp  它是由谷歌於2010年推出的新一代圖片格式，在壓縮方面比當前jpg格式更優越，在質量相同的情況下，WebP格式影象的體積要比jpg格式影象小40%，不過這種圖片還沒有得到廣泛的瀏覽器支援，僅在Chrome和Opera上支援，在其他瀏覽器上需要安裝外掛才可以顯示，目前還沒有大規模使用。

點陣圖和向量圖  點陣圖也叫點陣圖，是由一個個的方形的畫素點排列在一起拼接而成的，點陣圖在放大時，影象會失真。上面講的5種影象都屬於點陣圖。 向量圖和點陣圖組成影象的原理不同，它的影象輪廓是由函式曲線生成的，當放大影象時，實際的原理就是將曲線乘以一個倍數，影象可以輕易地放大，而且不會出現畫素塊，影象邊緣也不會出現鋸齒。

svg  svg是一種向量二維圖形格式，它是基於xml標記語言描述的，可以通過任何文字編輯器建立。它的優點是檔案容量小，放大不失真，而且背景也可以是透明的。目前大量使用這種格式來製作網頁圖示或者網頁地圖，由於它是向量的，所以在不同終端螢幕上(pc、手機)都有很好的顯示效果。

flash  flash是一種向量動畫檔案格式，曾經在網路上風靡一時，如今已逐漸退出歷史舞臺，原因是它的技術更新跟不上發展，這種格式既可以是靜態的圖形，還可以是多媒體動畫，還可以加入使用者互動和資料，這是它曾經很流行的原因，這種格式名為swf，flash是對它的統稱。這種格式在網頁中已經很少使用了，它的很多優秀特性，可以用HTML5取代。swf檔案中衍生出一種視訊格式flv，它是一種流媒體視訊格式，由於它有檔案容量小，可以邊下載，邊觀看等優點，目前廣泛應用在視訊網站中。

總結  在網頁製作中，如何選擇合適的圖片格式呢？ 1、網頁製作中，如果要使用不透明背景的圖片，就使用jpg圖片；如果要使用透明或者半透明背景的圖片，就使用png圖片； 2、製作網頁圖示時候，如果圖示含多種顏色，可以使用gif或png圖片；如果圖示是單色，而且要求有很好的顯示效果，可以使用svg；如果是動畫圖示，可以使用gif。

photoshop常用圖片處理技巧

photoshop是一款優秀的影象處理軟體，作為前端開發工程師，掌握它的一些常用功能是必須的。photoshop的常用功能有：選擇、裁剪影象、修圖、取色、插入文字等等。除了這些常用功能，前端還需要掌握製作新影象、切圖等技巧。本次講解的photoshop版本為cs6。

圖片格式轉換與壓縮  1、檔案/儲存為（不推薦）選擇圖片型別以及壓縮比； 2、檔案/儲存為web所用格式（推薦） 選擇圖片型別以及壓縮比；

影象放縮，平移  1、 放縮工具 影象放大縮小，在影象上點選放大，按住alt鍵點選縮小，快捷鍵Ctrl+“+”放大 Ctrl+“-”縮小，雙擊此工具可以讓影象按照原始大小顯示。

2、 平移工具 對影象進行移動，在使用其他工具時，按住空格鍵盤的空格鍵，可以切換到此工具，移動完後鬆開空格鍵回到原來的工具。雙擊此工具可以讓影象放縮到顯示區域完全顯示。

新建影象  執行選單命令 檔案/新建 可以新建一張圖片，設定大小，顏色模式選RGB，網頁圖片一般選擇72畫素/英寸，如果影象要列印，可設為300/英寸。背景按情況選透明或白色。

移動選擇與圖層面板  1、按住Ctrl，在影象上點選可以選中圖層 2、 選擇此工具，勾選工具屬性欄上的“自動選擇圖層”，可以在影象上點選選中圖層 3、移動元素同時按住Alt鍵可複製一個圖層 4、圖層面板的操作，包括圖層的顯示隱藏、圖層順序、新建圖層、圖層刪除

針對影象中選中圖層的操作  1、移動 2、自由變換 執行選單命令 編輯/自由變換 3、拖拽到另一張影象上完成圖層拷貝

歷史記錄面板  記錄20部操作，可以點選已經記錄的操作步驟回到之前

選擇工具  1、 矩形選擇工具 2、 橢圓選擇工具 按住alt+shift鍵可以從中心拉出正圓 3、 任意套索工具 用手任意畫出選區，不精確，不常用 4、 多邊形套索 可以選擇多邊形物體，對於結構複雜的物體，可以點多個小段來選擇。 5、 磁性套索 可以自動在物體邊緣生成選擇線，但是由於太自動了，所以不夠精確，也不常用。 6、 魔術棒選擇工具 按照點選的點的顏色範圍來選擇，可以設定範圍的容差，容差越大，選擇區域越大，對於有單色背景的影象中的元素，可以用它點選背景，然後反選，從而選中元素。 7、 快速選擇工具 直接在要選的元素上畫，按照畫的顏色範圍進行選擇。 8、對圖層建立選區：按住Ctrl，用滑鼠點選對應的圖層，在圖層外框生成選區。

選區的編輯技巧  1、新選區模式下移動選區 2、選區的加、減、乘，工具屬性欄上設定 3、調整邊緣 工具屬性欄或者執行選單命令 選擇/調整邊緣 4、變換選區 執行選單命令 選擇/變換選區，可對選區進行縮放、移動等 5、反選 執行選單命令 選擇/反向 6、取消選擇 執行選單命令 選擇/取消選擇，快捷鍵ctrl+d

選區特別注意  選區（螞蟻線）只對當前圖層器起作用，選區操作失敗一般是當前圖層弄錯了

裁剪影象  1、 裁切工具 2、對選區執行選單命令 影象/裁剪 3、設定矩形框大小，建立固定寬高的矩形框，可進行固定尺寸裁剪

針對確定選區的操作技巧  1、複製 執行選單命令 編輯/拷貝 快捷鍵ctrl+c 2、貼上 執行選單命令 編輯/貼上 快捷鍵ctrl+v 2、貼上入 執行選單命令 編輯/選擇性貼上/貼入 3、填充 執行選單命令 編輯/填充 4、描邊 執行選單命令 編輯/描邊 5、刪除 執行選單命令 編輯/清除 快捷鍵 delete 6、自由變換 執行選單命令 編輯/自由變換 快捷鍵 ctrl+t

擦除與修復工具  1、 擦除工具 2、 汙點修復工具

參考線技巧  1、檢視/標尺，顯示標尺，在標尺上按住滑鼠拖動可以拉出參考線 2、檢視/對齊到/參考線 讓參考線移動時自動對齊到選框或者影象的邊緣 3、檢視/新建參考線 可以精確建立參考線

文字輸入  1、執行選單命令 編輯/首選項/單位和標尺 設定文字的單位 2、 文字輸入 3、文字編輯 屬性工具欄上點選文字編輯按鈕

取色  1、取色工具，點選前景色按鈕，彈出取色對話方塊，當前工具切換成取色工具。 2、點選前景色按鈕，當前工具自動切換到取色工具

影象大小與畫布大小  1、影象/影象大小 檢視和設定影象的整體大小 2、影象/畫布大小 檢視和設定影象的畫板大小

尺寸測量  1、 切片工具 雙擊切片彈出切片對話方塊 2、 切片選擇工具 2、 矩形框工具，開啟資訊面板

photoshop批量切圖技巧

切圖，就是從效果圖中把網頁製作需要的小圖片裁剪出來。

1、使用psd格式並且帶有圖層的影象切圖

2、在影象上用切片工具切出需要的小圖

3、雙擊切片，給切片命名

4、執行選單命令 儲存為web所用格式

5、點選切片，設定切片的圖片格式

6、儲存切片，選擇“所有使用者切片”，點儲存(多個切片會存到所選資料夾中的images資料夾中)

Photoshop製作雪碧圖技巧

雪碧圖，就是將網頁製作中使用的多個小圖片合併成一個圖片，使用css技術將這張合成的圖片應用在網頁不同的地方，雪碧圖可以減少網頁載入時的http請求數，優化網頁效能。

步驟：

1、使用Photoshop新建一張背景透明的圖片

2、將小圖片複製到此圖片中，排列好每個影象的位置，圖片幅面不夠可以用畫布大小調整大小 

3、按照所有小圖片的範圍裁剪圖片，存為透明背景的png圖片