PS切圖-保存

PS切圖應該保存哪種格式？各種格式之間又有什麼不同呢?!對web前端來說，圖片格式是需要重要掌握的知識。

保存，即存儲所需內容。 // Ctrl+N新建，背景一般設為透明

獨立圖片，使用拖動工具到新的文件即可；

已合併圖片，使用矩形選框工具+魔棒選擇 > 複製、新建、粘貼或拖到新文件 > 存儲為Web所用格式(Ctrl+Shift+S)

圖片格式

目前在前端開發中常用的圖片格式有jpg、png(分為png8和png24)、gif。最近svg格式也開始流行起來。

gif

gif是無損的，具有文件小、支持動畫及透明的特點。但gif無法支持半透明，且僅支持8bit的索引色，即在整個圖片中，只能存在256中不同的顏色。

但實際上，gif是一種逐漸被拋棄的圖片格式，PNG格式的出現就是為了替代它。

由於gif支持動畫的這個「一招鮮」的本領，在網路中仍然佔有一席之地，主要用於一些小圖標。

jpg

jpg又稱為jpeg，是有損的，但採用了直接色，保證了色彩的豐富性。

jpg圖片支持透明和半透明，所有空白區域填充為白色，主要用於高清圖、攝影圖等大圖。

png8

png8是無損的，是png的索引色版本。

前面提到過，png是gif格式的替代者，在相同圖片效果下，png8具有更小的文件體積，且支持透明度的調節，但png8不支持半透明，也不支持動畫。

png24

png24是無損的，是png的直接色版本。

png24支持透明，也支持半透明，但png24有文件體積較大的缺點。

png24的目標是替換jpg，但一般而言，png24文件的大小是jpg文件的5倍之多，但顯示效果只有一點點的提升，所以，一般的，使用半透明效果時，考慮使用png24格式。

svg

svg是無損的矢量圖，svg與上面的圖片格式最大的不同是，上面的圖片都是點陣圖，而svg是矢量圖，具有無論如何縮放都不會失真的優點。

svg格式非常適應於繪製logo、圖表等，但由於低版本瀏覽器支持不足，應用不廣泛。

保存設置

一般地，在對設計圖進行修改前，首先要保存一份PSD源文件，然後再在其副本上進行修改。

通過PS將設計圖切成需要的素材時，涉及到圖片格式的設置問題，應注意以下幾點：

a. 當圖片色彩豐富且無透明需求時，建議存為jpg格式並選擇合適品質，來對圖片進行壓縮。

// 品質越大，圖片質量越高，圖片也會越大；設置原則：品質不要100(相當於沒壓縮)，根據項目需要，一般60-80比較合適

b. 當圖片色彩不太豐富時，無論有無透明需求，請保持為PNG8格式。

// PNG8格式只有256種顏色，文件比較小，比較適合網路傳輸；

設置：存儲為Web所用格式 > PNG8 > 顏色默認256，雜邊：無，擴散：無仿色(右上角可存儲)

c. 當圖片有半透明需求時，請保持為PNG24格式。

// 特點：對圖片不進行壓縮，所以文件比較大；且支持半透明效果(保持面板採用默認設置即可)

Webpiece_整合分析、記錄點滴