常用圖片格式
圖片是網頁製作中很重要的素材，圖片有不同的格式，每種格式都有自己的特性，瞭解這些特效，可以方便我們在製作網頁時選取適合的圖片格式，圖片格式及特性如下：
1、psd
photoshop的專用格式。
優點：完整保存圖像的信息，包括未壓縮的圖像數據、圖層、透明等信息，方便圖像的編輯。
缺點：應用範圍窄，圖片容量相對比較大。
2、jpg
網頁製作及日常使用最普遍的圖像格式。
優點：圖像壓縮效率高，圖像容量相對最小。
缺點：有損壓縮，圖像會丟失數據而失真，不支持透明背景，不能製作成動畫。
3、gif
製作網頁小動畫的常用圖像格式。
優點：無損壓縮，圖像容量小、可以製作成動畫、支持透明背景。
缺點：圖像色彩範圍最多隻有256色，不能保存色彩豐富的圖像，不支持半透明，透明圖像邊緣有鋸齒。
4、png
網頁製作及日常使用比較普遍的圖像格式。
優點：無損壓縮，圖像容量小、支持透明背景和半透明色彩、透明圖像的邊緣光滑。
缺點：不能製作成動畫
5、webp
將要取代jpg的圖像格式。
優點：同jpg格式，容量相對比jpg還要小。
缺點：同jpg格式，目前不支持所有的瀏覽器。
位圖和矢量圖
位圖也叫點陣圖，是由一個個的方形的像素點排列在一起拼接而成的，位圖在放大時，圖像會失真。上面講的5種圖像都屬於位圖。
矢量圖和位圖組成圖像的原理不同，它的圖像輪廓是由函數曲線生成的，當放大圖像時，實際的原理就是將曲線乘以一個倍數，圖像可以輕易地放大，而且不會出現像素塊，圖像邊緣也不會出現鋸齒。
svg
目前首選的網頁矢量圖格式。
優點：圖像容量小、圖像放大不失真、支持透明背景和半透明色彩、圖像邊緣光滑。
缺點：色彩不夠豐富。
flash
退出歷史的重量級網頁矢量圖格式。
優點：圖像容量小、圖像放大不失真、支持透明背景和半透明色彩、圖像邊緣光滑、還可以製作動畫、可編寫交互。
缺點：不支持搜索引擎、運行慢、瀏覽器需要裝插件才可支持。
總結
在網頁製作中，如何選擇合適的圖片格式呢？
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
3、填充 執行菜單命令 編輯/填充
4、描邊 執行菜單命令 編輯/描邊
5、刪除 執行菜單命令 編輯/清除 快捷鍵 delete
6、自由變換 執行菜單命令 編輯/自由變換 快捷鍵 ctrl+t
擦除與修復工具
1、擦除工具
2、汙點修復工具
參考線技巧
1、視圖/標尺，顯示標尺，在標尺上按住鼠標拖動可以拉出參考線
2、視圖/對齊到/參考線 讓參考線移動時自動對齊到選框或者圖像的邊緣
3、視圖/新建參考線 可以精確創建參考線
文本輸入
1、執行菜單命令 編輯/首選項/單位和標尺 設置文字的單位
2、文本輸入
3、文本編輯 屬性工具欄上點擊文本編輯按鈕
取色
1、取色工具，點擊前景色按鈕，彈出取色對話框，當前工具切換成取色工具。
2、點擊前景色按鈕，當前工具自動切換到取色工具
圖像大小與畫布大小
1、圖像/圖像大小 查看和設置圖像的整體大小
2、圖像/畫布大小 查看和設置圖像的畫板大小
尺寸測量
1、 切片工具 雙擊切片彈出切片對話框
2、 切片選擇工具
2、 矩形框工具，打開信息面板