- 美工思維：寫給淘寶天貓美工看的設計書
- 顧領中
- 2422字
- 2020-10-23 10:55:35
1.5 電商平臺的主流格式
本節介紹電商中常用的主流格式及其特點，如下表所示。
提示：JPEG（或者說．jpg）是最常用的圖片壓縮格式，支持最高級別的壓縮。對于顯示要求比較高的圖片來說，JPEG格式展示的圖片效果較GIF和PNG有明顯的優勢。
GIF（.gif）的圖片顯示質量要比JPEG遜色很多，通常用作非常簡單的圖片展示，比如素材或者裝飾性圖案，GIF也可以用來制作動畫。但GIF不適用于高清的圖片。
PNG圖片是比GIF更好的選擇，因為PNG圖片支持的色彩要比GIF多。此外，和JPEG一樣，PNG反復保存也不會影響圖片質量，而且對于小圖來說，PNG占用的內存極小，PNG完美支持透明背景，所以一般LOGO或一般裝飾性圖案都會選擇PNG格式。注意PNG-24圖片比同樣情況下的PNG-8版本的內存要大3倍以上，因此，要慎用PNG圖片。
1.5.1 JPEG格式的優點與局限
下面介紹JPEG格式的圖片的特點。
1 打開“素材\ch01\jpg路徑.jpg”文件，因為這個素材是經過處理的，打開【路徑】面板可以發現，JPEG格式既可以把路徑保存下來，也可以使用路徑，如下圖所示。
2 按住【Ctrl】鍵單擊【路徑】縮覽圖就可以得到選區，如下圖所示。
3 打開【圖層】面板，選擇【圖層】→【新建】→【通過拷貝的圖層】選項，就能直接把主體圖摳出來，如下圖所示。
摳出來的圖是否可以直接保存為透明格式？
1 刪除背景圖層，選擇【文件】→【儲存為】選項，將摳出來的圖保存到桌面上，保存類型選擇【JPEG】格式，單擊【保存】按鈕，如下圖所示。
提示：先不管圖片的大小，重復操作依次將其保存為PNG和GIF格式，然后查看區別。
2 關閉原始素材文件，打開保存的三種格式的圖片，可以看到PNG和GIF格式保存為透明底，JPEG格式沒有保存為透明底，但它保存了工作路徑，如下圖所示。
提示：由此可以得出，JPEG格式是不支持透明底的，而PNG和GIF格式支持。
下面來看看三種格式在壓縮方案上的區別。
1 在素材文件中打開該圖片的屬性，可以看到原圖的大小是762KB，如下圖所示。
2 打開“素材\ch01\jpg壓縮.jpg”文件，選擇【文件】→【導出】→【存儲為Web所用格式】選項，彈出【存儲為Web所用格式】對話框，如下圖所示。
3 在優化的文件格式中選擇壓縮的格式，在左下角可以查看優化后的圖片大小，如下圖所示。
提示：GIF格式的顏色只有256色，它不支持1677萬色。依次在優化的文件格式中選擇不同的壓縮格式，可以看出只有JPEG格式壓縮得比較成功，JPEG格式還可以壓縮圖片的品質。
4 將壓縮后的圖片存儲到桌面，同時打開原圖和壓縮后的圖片進行對比，如下圖所示。
以上講的是JPEG格式的兩個優點：一是JPEG格式保存支持路徑，二是JPEG格式的壓縮一般支持攝影實拍類的圖片。一般位圖用JPEG格式壓縮，矢量圖用PNG格式或GIF格式壓縮。
1.5.2 PNG格式的優點與局限
本節介紹PNG格式矢量圖的優缺點。
1 將“素材\ch01\矢量圖.ai”文件拖曳到PS中，會彈出【導入PDF】對話框，選中【頁面】復選框，單擊【確定】按鈕，如下圖所示。
2 下面對圖進行優化，選擇【文件】→【導出】→【存儲為Web所用格式】選項，彈出【存儲為Web所用格式】的對話框，如下圖所示。
3 在JPEG格式、【品質】為“60”的情況下，圖片的大小為324.4KB，將圖片品質調至“100”時，可清楚地看到清晰度和大小的區別，如下圖所示。
4 將圖片格式改為PNG-8，圖片的輪廓是有鋸齒的，大小也會變小很多，如下圖所示。
5 也可以通過減少顏色進行優化，將顏色從“256”降至“64”，可以明顯看到圖片的顏色和大小都有變化，如下圖所示。
6 像這種圖片建議使用PNG-24格式，因為它是沒有雜色邊的，如下圖所示。
下面介紹在顏色很少的情況下，比如只有一個單色的LOGO，對其進行優化的最好方式。
1 新建一個透明空白文檔，用【自定義形狀工具】
任意繪制一個圖形，如下圖所示。
2 由于是單色的LOGO，可以使用PNG-8格式壓縮，將顏色調低即可，如下圖所示。
提示：不同的圖片類型，其優化方案是不同的。
1.5.3 GIF格式的優點與局限
GIF格式支持動畫、透明，最好是矢量圖，動畫不宜過大。
1 打開“素材\ch01\動圖.gif ”文件，選擇【窗口】→【時間軸】選項，如下圖所示。
提示：在時間軸面板中單擊
按鈕，選擇【面板】選項，在彈出的【動畫面板選項】對話框中，可以選擇縮覽圖的大小，如下圖所示。
2 選中時間軸中的第1個圖，在【圖層】面板中顯示的是“圖層1”的圖，第2個圖是“圖層2”的圖，它們是輪流交替的，如下圖所示。
3 新建一個空白文檔，做一個顏色變化的字，使用【文字工具】
輸入“2018”，如下圖所示。
4 復制文字圖層，把“2018”字體顏色改為紅色，如下圖所示。
提示：復制圖層有兩種方法：一是選中圖層右擊，并選擇【復制圖層】選項；二是選中圖層拖曳至創建新圖層按鈕
上。
5 在時間軸面板中，選擇【創建幀動畫】選項，如下圖所示。
6 單擊一次【創建幀動畫】，就完成一個畫面的創建，單擊【復制所選幀】按鈕
，如下圖所示。
7 設置動畫停留時間的長短、循環的次數，單擊【播放動畫】按鈕，如下圖所示。
提示：由于畫面的內容是一樣的，所以看不出播放的效果。
8 選中時間軸中的第1個圖，在圖層面板中關閉“2018紅色”圖層，依次替換一個圖，再單擊【播放動畫】按鈕，就可看到效果，如下圖所示。
提示：我們也可以做稍微復雜點的效果，選中“2018黑色”圖層，選中【編輯】→【自由變化】選項做相應的旋轉，按住【Shift+Alt】組合鍵圍繞中心點縮放大小。
9 選擇【文件】→【導出】→【存儲為Web所用格式】選項，彈出【存儲為Web所用格式】對話框，選擇GIF格式，單擊【預覽】按鈕，即可在網頁中查看效果，如下圖所示。
10 單擊【存儲】按鈕保存。
1.5.4 圖片壓縮的解決方案
本節以“素材\ch01\圖像壓縮素材．jpg”文件為例介紹怎樣壓縮圖片，具體操作步驟如下。
1 打開素材圖片讓其1∶1顯示，可以看出原圖是非常大的。
2 選擇【圖像】→【圖像大小】，在彈出的【圖像大小】對話框中，設置【寬度】和【高度】分別為“1000像素”和“1400像素”，勾選【重新采樣】，單擊【確定】按鈕壓縮圖片，如下圖所示。
3 再以JPEG格式進行優化，原圖品質降為60%，單擊【儲存】按鈕即可。通過查看圖片詳細信息對比兩幅圖片的差別，得知原圖大小是3.9MB，尺寸是3662×5125，也就是說，這張圖接近于2000萬像素，而壓縮后的圖大小是202KB，尺寸為1000×1400。
提示：2000萬像素的圖，不適合在網上展示，只適合打印。