常用圖片格式
圖片是網頁制作中很重要的素材，圖片有不同的格式，每種格式都有自己的特性，了解這些特效，可以方便我們在制作網頁時選取適合的圖片格式.
圖片格式及特性如下：
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
選區特別注意
選區（螞蟻線）只對當前圖層器起作用，選區操作失敗一般是當前圖層弄錯了
縮放，平移，新建，移動選擇
當我們在放大等操作時，要使用平移，可以按住空格鍵移動，移動后松開空格鍵，還會回到原來的操作；
快速選擇圖層：ctrl+點擊圖像；
從別的圖片中選中圖層，直接拖到新的圖片中，可以復制圖層；
可以使用選擇工具，將選中的內容賦值，再放到另一個圖片中黏貼；
可以通過調整圖層順序來調整圖層哪個在上面，哪個在下面；
雙擊右下角圖層名更改圖層名；
有時候，拷貝出錯的話，有可能是你的圖層選擇錯誤；
自由變換 執行菜單命令 編輯/自由變換 快捷鍵 ctrl+t，等比縮放按住shift；
可以移動旋轉點來一旋轉點為中心進行旋轉；
圓形選擇工具，按住shift，拉出一個正圓；
移動選區：選好選區后，點擊左上角的新選區，即可進行移動選區；或者點擊選擇中的變換選區，也可移動選區；
套索工具
以某點為中心拉出一個正圓：圓形套索，alt+shift，即可；
多邊選擇工具的使用；
在使用多邊形工具時，可以使用delete鍵來刪除一個點；
磁性套索工具的使用；傻瓜式操作，直接描邊過去，不需要自己點擊，但不精確的地方可以自己點擊，支持delete刪除點；
魔棒工具的使用；設置容差值可以增加選中范圍，支持增選，點擊左上角的第二個增選，然后使用舉行選擇工具增選即可；
可以使用魔棒工具，選中外面的邊框，再使用選擇中的反向選擇來快速選擇；
快速選擇工具；
加選，減選，交叉，新選模式；
填充：用選區等設置好選區，再新建圖層，點擊編輯里面的填充，選擇前景色背景色等；
描邊：設置好選區，新建圖層，點擊編輯里面的描邊，設置居外居中顏色等即可；
刪除：選好圖層，設置選區，點擊delete鍵；
裁剪圖像
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文件夾中)
批量切圖
普通裁切：使用裁切工具，進行單張裁剪，裁剪好后雙擊，保存命名；
選區裁剪：使用矩形選擇工具，設置好單張選區，點擊圖像中的裁剪，保存命名；
刪除切片：選擇切片選擇工具，點擊要刪除的切片，點擊delete鍵，即可刪除切片；
批量切片：
點擊切片工具，拉出選框，如果長寬不滿意，可以雙擊手動設置寬高，還可以雙擊命名；
切好后雙擊命名，確定；
當要切的幾個圖形大小一致時，切好第一個后，使用切片選擇工具，按住alt鍵，移動選框，確定好后雙擊命名；按住alt+shift可以垂直下拉賦值選框
要存儲為透明背景的話，要先將這些切片的背景隱藏起來：按住ctrl點擊背景，點擊圖層小眼睛隱藏；
當所有的切片都已經好了之后，點擊存儲為web所用格式，然后要點擊每一個切片，選擇png-24格式，這是因為jpg不能用作透明背景。
但注意，如果我們不需要透明背景時，就要選用jpg格式，點擊存儲；
注意，如果我們存儲多張圖片時，它們會自動放置在images文件夾下，如果沒有回創建，我們應該將圖片選擇在images文件夾的上一級目錄進行存放，而不是在images文件夾；
格式：所有圖像；切片：所有用戶切片；
點擊保存，確定；
Photoshop制作雪碧圖技巧
雪碧圖，就是將網頁制作中使用的多個小圖片合並成一個圖片，使用css技術將這張合成的圖片應用在網頁不同的地方，雪碧圖可以減少網頁加載時的http請求數，優化網頁性能。
步驟：
1、使用Photoshop新建一張背景透明的圖片
2、將小圖片復制到此圖片中，排列好每個圖像的位置，圖片幅面不夠可以用畫布大小調整大小
3、按照所有小圖片的范圍裁剪圖片，存為透明背景的png圖片
雪碧圖制作
新建圖像，設置寬高，背景為透明；
把要制作雪碧圖的圖標拖入進來，點擊右上角的√，為了方便觀看，新建一個背景圖層，將背景圖放在最下面一個圖層，填充背景色；
為了方便有規律的放入圖標，可以固定高，添加多行輔助線；
也可以一次性將圖標拖入，點擊√，再移動；
全部放進來后，用矩形框選中區域，進行裁剪，將背景圖層隱藏；
文件存儲為web所用格式；選擇png-24格式，存放進images文件夾中；
有可能有的psd圖中，會有輪播圖，這個時候，我們應該和ui設計師溝通好，有沒有，並切圖；
如果有的圖標忘記切了，向切好再加入雪碧圖中，建議放在雪碧圖的下面，不然可能會影響布局，
對已經做好的雪碧圖進行擴充，點擊圖像中的畫布大小，點擊向上的箭頭，表示向下擴展，設置好高度，填充顏色，設置輔助線，把圖標拖入；
login頁面ps制作提示
設置參考線，使用矩形框來測量參考線的位置，在新圖中的視圖里面新建參考線；
點擊前景色，點擊點擊背景色，確定，在新圖中新建圖層，編輯中的填充，選擇前景色，確定；
可以在已有參考線的基礎上，拉出一個一定寬高的矩形框，再拉出參考線，參考線會自動貼緊矩形框；
新建logo：打開logo圖片，賦值，粘貼到新圖，ctrl+t或者點擊編輯里面的自由變換，按住shift等比縮放，緊貼參考線放大縮小logo，好了后雙擊，移動到適當位置；
正圓：要在新選區模式下按住alt+shift；
選區固定比例：點擊矩形選擇工具，點擊中上部分的樣式，選擇固定比例，設置寬高即可；
給正圓描邊：按住ctrl，點擊右下角的圖層，注意一定要點擊圖層的圖框，即可給圖層描邊，點擊編輯中的描邊，居外；
污點修復工具：點擊工具，塗抹即可；
選擇貨物：點擊外圍選擇，反選，點擊加選，利用多邊形選擇工具進行增選；
調整邊緣：設置好選取后，點擊選擇里面的羽化邊緣，可以設置像素為1進行柔滑；
復制，粘貼貨物，調整大小位置；
貨物陰影：新建圖層，用矩形框拉出一個橢圓，編輯，填充，黑色，調整陰影圖層的填充度；
復制圖層，按住alt鍵，移動圖層到需要的地方，即可復制圖層；
插入文字，長按工具欄的文字，豎排文字，輸入文字，設置字體大小行高等；
布局實例圖片列表；
取色器可以進行復制#xxxxxx，然后粘貼在顏色處；
鉛筆工具畫橫線：點擊鉛筆，左上角選擇大小，前景色選擇顏色，按住shift畫橫線；可以設置輔助線，矩形框等等，還可以用矩形框選中部分橫線，按delete刪除多於的橫線；
賬號密碼等，設置好矩形框，描邊；
給賬號密碼框內換顏色：里使用魔棒工具，調小容差值，取消鋸齒，選中里面的內容，編輯--填充前景色；
可以直接從文件夾中把圖片拖入圖中；