常用圖片格式

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

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、 矩形框工具，開啟資訊皮膚