效果圖

喜歡老師的文章、關注專欄

步驟1：將您的圖片制作成分層文件

在Photoshop中打開產(chǎn)品圖片。最有可能的是JPG格式。在此示例中，我們將使用在白色背景下拍攝的手表圖像。

打開“ 圖層”面板。默認情況下，該面板位于圖像窗口的右側，但如果看不到它，則可以通過從應用程序窗口頂部的下拉菜單中單擊“ 窗口”>“圖層”來訪問它。

在“ 層”面板中，雙擊“ 背景”層。一個新圖層對話框，要求您重新命名層就會出現(xiàn)。您可以將其保留為默認的第0層，然后單擊“ 確定”。

現(xiàn)在，您已經(jīng)解鎖了背景圖層，從其中刪除的任何內(nèi)容都是透明的。

步驟2：建立選擇

從應用程序窗口左側的工具欄中選擇魔術棒工具。然后，從屏幕頂部的選項欄中單擊“ 選擇主題”。無論背景如何，Photoshop都會嘗試從照片中選擇對象。您將在選擇周圍看到該選擇作為“螞蟻線”。

如果選擇不完美，則可以使用魔術棒工具從選擇中刪除更多背景，或根據(jù)選擇的方式向選擇中添加更多產(chǎn)品。

在此示例中，Photoshop并未完全從選擇中刪除手表的陰影，因此我們將在選項欄中選擇“ 從選擇中減去”圖標，然后使用魔術棒工具單擊陰影的一部分，直到選擇僅包含手表。

創(chuàng)建選擇項時，請確保還選擇產(chǎn)品圖像中任何有“孔”的區(qū)域，例如示例圖像中表盤與腕帶相接的區(qū)域。

步驟3：刪除背景

選擇完產(chǎn)品后，通過鍵入SHIFT + CTRL + I（在Mac上為SHIFT + COMMAND + I）或從應用程序窗口頂部的下拉菜單中選擇“ 選擇”>“反選”來選擇反選區(qū)域。

選擇反（背景）后，鍵入BACKSPACE（在Mac上為Delete）。您的背景現(xiàn)在將是透明的。在Photoshop中，透明的背景用灰色和白色的棋盤圖案表示。

鍵入CTRL + D（在Mac上為COMMAND + D）以取消選擇。

步驟4：以適當?shù)木W(wǎng)絡格式保存圖像

在Photoshop中創(chuàng)建透明背景只是第一步。您需要確保以正確的格式保存產(chǎn)品圖片，以便產(chǎn)品圖片在電子商務網(wǎng)站上以透明背景顯示。

保存圖像的最佳格式是PNG-24。這種格式允許多層透明，這意味著當您將圖像放置在不同顏色的背景上時，圖像永遠不會有像素化的“光暈”。較舊的透明文件格式（例如PNG-8和GIF）會產(chǎn)生這種不良的光暈效果，因此，請盡可能使用PNG-24。

要將文件另存為Photoshop CC中的PNG-24，請鍵入SHIFT + ALT + CTRL + W（在Mac上為SHIFT + OPTION + COMMAND + W），或從頂部菜單中選擇“ 文件”>“導出”>“導出為... ”。應用程序窗口。

注意：如果您使用的是Photoshop的舊版本，并且沒有看到“ 導出為...”選項，則可以選擇“ 另存為Web”，然后從右側的“ 預設”下拉菜單中選擇“ PNG-24”。對話框。

在出現(xiàn)的對話框中，在框右側的“ 文件設置”下，將“ 格式”設置為“ PNG”，并確保選中了“ 透明性”框。不要選檢查文件較?。?位） -此轉換文件為PNG-8

在圖片的左側，您會看到為PNG文件預測的文件大小。這一點非常重要，因為較大的文件大小會使網(wǎng)頁加載速度變慢。我個人的喜好是將Web圖片保持在200 KB或更小。

在對話框的右側，在“ 圖像大小”下，您可以選擇調(diào)整圖像的尺寸。較小的尺寸表示較小的文件大小。但是，您不想使圖像的尺寸小于希望它們出現(xiàn)在網(wǎng)站上的尺寸。這樣做會產(chǎn)生模糊或像素化的圖像。

此外，由于許多客戶在顯示器上查看產(chǎn)品，因此，將產(chǎn)品圖片保存為比您期望的尺寸大50％至100％的大小是一種很好的做法。這將幫助它在所有設備上看起來清晰。換句話說，如果您知道您的產(chǎn)品最大可以顯示400像素寬，那么您需要在此處將其至少顯示600像素寬。

因此，是的，您需要使用一些平衡來最大化圖像大小，同時最小化文件大小。為了最大程度地減少加載時間，您只能選擇將特色產(chǎn)品圖片保存較大以用于視網(wǎng)膜顯示，并允許將大部分產(chǎn)品圖片保存為實際尺寸。

第5步：保存文件

將圖像尺寸設置為適當?shù)某叽绾?，點擊全部導出。

在“保存”對話框中，選擇保存網(wǎng)絡產(chǎn)品圖像的文件夾。最好將優(yōu)化的圖像文件與原始圖像文件分開，以免在將圖像加載到站點時造成混淆。命名圖像文件，并確保其擴展名設置為.png。