《網(wǎng)店裝修》項目五 設(shè)計商品圖片

《網(wǎng)店裝修》項目五設(shè)計商品圖片項目綜述小寶把自己精心設(shè)計制作的店鋪的店標、店招和模板置換后，發(fā)現(xiàn)店鋪的瀏覽量增加了，心里十分開心。過了幾天，查看店鋪的經(jīng)營參數(shù)，發(fā)現(xiàn)訪問店鋪的用戶數(shù)量增加了，但用戶點擊商品的卻不多，只是瀏覽店鋪首頁之后就跳轉(zhuǎn)到其他網(wǎng)頁去了，這是怎么回事呢？上課時，他把這個現(xiàn)象告訴了老師。老師訪問了他的店鋪首頁，發(fā)現(xiàn)店招和模板都比以前漂亮，但把頁面下拉到商品展示區(qū)時，老師分析商品展示區(qū)里各個商品的主圖，不僅圖片質(zhì)量差，而且有些圖片還變形了，不能引起客戶的點擊和購買欲望。小寶知道了問題所在，決定馬上對自己店鋪的商品圖片進行優(yōu)化。項目任務(wù)任務(wù)一任務(wù)二任務(wù)三制作白底主圖設(shè)計個性主圖管理商品圖片知識點任務(wù)一理解網(wǎng)店圖片優(yōu)化的必要性了解淘寶網(wǎng)店圖片優(yōu)化的方向了解淘寶網(wǎng)店主圖、細節(jié)圖的功能區(qū)別能對商品圖片進行色差、清晰度的調(diào)整能根據(jù)需要對商品進行摳選熟練掌握淘寶圖片空間的管理制作白底主圖情景設(shè)計一天早上，小寶和他的團隊開會，討論商品圖片優(yōu)化的問題。他們發(fā)現(xiàn)，商品圖片最多可以上傳5張，而在店鋪首頁的商品展示區(qū)中，展示的是商品圖片的主圖。所以小寶決定先對商品的主圖進行優(yōu)化。任務(wù)分解為了完成商品主圖的優(yōu)化任務(wù)，小寶團隊先了解淘寶商品圖片的尺寸規(guī)定，然后收集一些其他服裝天貓店、淘寶店的主圖作為范例參考。他們發(fā)現(xiàn)，其他店鋪的商品主圖色彩明亮、非常清晰，通常是純白底的商品主圖，并附有價格或賣點標簽。所以，小寶團隊討論確定了完成任務(wù)的步驟：摳選商品、美化商品圖片、設(shè)計制作主圖。制作白底主圖（一）鋼筆工具摳選商品步驟1.在Photoshop里打開素材“練習素材/項目5/SC5-1.jpg”，按快捷鍵“Ctrl+J”復(fù)制背景圖層。把背景圖層可視隱藏。選擇“鋼筆工具”，沿著商品邊緣描出T恤商品的閉合路徑。摳選商品制作白底主圖（一）鋼筆工具摳選商品步驟2.鼠標點擊路徑調(diào)板的“將路徑作為選區(qū)載入”，或按快捷鍵“Ctrl+Enter”，將T恤商品路徑轉(zhuǎn)為選區(qū)。摳選商品步驟3.按組合鍵“Shift+Ctrl+I”選擇反向。步驟4.按“Del”鍵，刪除選區(qū)里的圖案。按快捷鍵“Ctrl+D”取消選區(qū)。制作白底主圖（一）鋼筆工具摳選商品步驟5.新建圖層，填充白色(R：255，G：255，B：255)。調(diào)整圖層順序，白底背景商品圖制作完成。摳選商品要點提示：1、在利用鋼筆工具進行摳選商品時，錨點位置應(yīng)該在商品邊緣以內(nèi)。如果錨點位置在商品邊緣以外，則會留有白邊。2、可以利用鋼筆工具在摳選商品時，適當?shù)恼{(diào)整商品的輪廓。制作白底主圖（二）魔術(shù)棒工具摳選商品步驟1.在Photoshop里打開素材“練習素材/項目5/SC5-1.jpg”，按快捷鍵“Ctrl+J”復(fù)制背景圖層，把背景圖層可視隱藏。摳選商品步驟2.選擇菜單“圖層”→“調(diào)整”→“色階”，或者按快捷鍵“Ctrl+L”調(diào)出“色階”對話框，選擇“在圖像中取樣以設(shè)置白場”圖標。制作白底主圖（二）魔術(shù)棒工具摳選商品步驟3.用吸管在圖片的橫向的1/3處左右點擊，取樣設(shè)置為白場。這個步驟，是還原拍攝時的白色背景，同時也調(diào)整了T恤由于白平衡誤差而導致的色差。摳選商品步驟4.設(shè)置前景色為白色(R：255，G：255，B：255)，使用畫筆工具，設(shè)置畫筆大小為40像素，硬度為70%，不透明度為60%，流量為60%，沿著T恤的左邊邊緣涂畫出白色邊線。制作白底主圖（二）魔術(shù)棒工具摳選商品步驟5.變換設(shè)置畫筆參數(shù)。設(shè)置畫筆大小為100，硬度為100%，不透明度為100%，流量為100%，把背景的剩余灰色部分全部涂畫為白色。保存圖片即完成白底圖制作。摳選商品步驟6.使用“魔術(shù)棒工具”，設(shè)置容差為10像素，勾選“連續(xù)”復(fù)選框。在白色背景處選樣。按組合鍵“Shift+Ctrl+I”選擇反向，再按快捷鍵“Ctrl+J”復(fù)制所選圖像為新圖層。商品即被摳選出來了，保存為psd格式。制作白底主圖（二）魔術(shù)棒工具摳選商品要點提示：1、在步驟3中，可以多次取樣，以求取最佳效果。2、在步驟4中，把圖像放大幾倍再仔細涂畫，可以圖畫出白色邊線而又不把T恤涂抹掉。畫筆的參數(shù)也可適當調(diào)整。摳選商品

知識窗：1、通常在進行商品圖片的背景調(diào)整時，會復(fù)制原圖圖層用以備份。2、色階對話框右邊有三只吸管：分別為【在圖像中取樣以設(shè)置黑場】、【在圖像中取樣以設(shè)置灰場】和【在圖像中取樣以設(shè)置白場】工具。使用它們也可以在圖像中自定義黑白場，重新定義最暗顏色、最亮顏色，以及中間調(diào)。色階命令將根據(jù)這些設(shè)置，重新設(shè)置圖像的色調(diào)。制作白底主圖調(diào)整角度美化商品圖片步驟1.選擇“裁剪工具”，設(shè)置參數(shù)，裁剪圖片。步驟2.鼠標移到裁剪框右上角，旋轉(zhuǎn)商品到合適角度，按下“提交當前裁剪操作”按鈕。要點提示：在進行裁剪時，要善于利用網(wǎng)格進行調(diào)整的參考。知識窗：在淘寶店鋪里的商品主、副圖比例要求為1∶1，也就是要求是正方形的商品圖片。制作白底主圖消除色差美化商品圖片步驟1.選擇“魔術(shù)棒工具”，設(shè)置容差為30，勾選“消除鋸齒”和“連續(xù)”復(fù)選框，在圖片白色背景部位取樣。步驟2.按組合鍵“Shift+Ctrl+I”選擇反向，然后按快捷鍵“Ctrl+J”復(fù)制為新圖層。步驟3.選擇套索工具，設(shè)置羽化為30像素，勾選“消除鋸齒”復(fù)選框，選擇T恤右上部較暗的部位。按快捷鍵“Ctrl+L”調(diào)出“色階”對話框。制作白底主圖消除色差美化商品圖片步驟4.按快捷鍵“Ctrl+L”調(diào)出“色階”對話框，選擇“在圖像中取樣以設(shè)置黑場”。在T恤中選擇希望調(diào)整為最黑點的部位取樣。步驟5.選擇“加深工具”，設(shè)置參數(shù)。在T恤的右上部位的邊緣進行精修，保存圖片。要點提示：在利用色階調(diào)整圖片的色差和色彩層次的時候，應(yīng)對照商品實物進行。制作白底主圖消除色差

知識窗：1、在圖像菜單中的調(diào)整項目中有多種圖像色彩、色調(diào)調(diào)整選項，適合不同場合使用。色階，快捷鍵“Ctrl+L”,調(diào)整圖像的明暗度。亮度／對比度，快捷鍵“Ctrl+C”,對圖像的色調(diào)范圍進行調(diào)整。色相／飽和度，快捷鍵“Ctrl+U”,主要調(diào)整整個圖像或圖像中單個顏色成分的色相、飽和度與亮度。曲線，快捷鍵“Ctrl+M”,不但可以調(diào)整圖像的亮度，還可調(diào)整圖像的對比度和控制色彩等。色彩平衡，快捷鍵“Ctrl+B”,調(diào)整圖像的整體色彩平衡。2、在色差調(diào)整中主要是調(diào)整色調(diào)、色相、飽和度和對比度。色調(diào)，指在各種圖像色彩模式下圖形原色(如RGB等)的明暗度，即亮度。色調(diào)有時也稱為色階，其范圍一般為0—255，共計256種色調(diào)。色相，就是組成色彩的顏色。比如光由紅、橙、黃、綠、青、藍、紫等七色組成，每一種顏色就是一種色相。飽和度指圖像顏色的彩度。飽和度，是以百分比來計算的，當飽和度變?yōu)?％時，圖像就成了灰色圖像。對比度，指不同顏色之間的差異程度。對比度越大，兩種顏色之間的反差越大。尤其是黑白兩色差異最明顯。美化商品圖片制作白底主圖提高商品清晰度美化商品圖片步驟.選擇菜單“濾鏡”→“銳化”→“USM銳化”，設(shè)置參數(shù)。知識窗：USM濾鏡用于調(diào)整圖像邊緣細節(jié)的對比度，并在邊緣的每側(cè)制作一條更亮或者更暗的線，以強調(diào)邊緣和產(chǎn)生的模糊，對話框中的“數(shù)量”用來表示銳化的程度；“半徑”表示邊緣像素周圍受影響的像素數(shù)目；“閾值”表示作為邊緣像素的條件，即像素的色階與周圍區(qū)域相差多少以上才被濾鏡看成是邊緣像素而加以銳化，該值為0時表示銳化所有像素。制作白底主圖照片實例設(shè)計制作白底主圖步驟1.用Photoshop打開素材“練習素材/項目5/SC52.jpg”，選擇菜單“圖像”→“圖像大小”或按組合鍵“Ctrl+Alt+I”，調(diào)出“圖像大小”對話框，查看圖像大小是否大于800*800像素。如果小于800*800像素，則可在圖像菜單里調(diào)出“畫布大小”對話框擴展畫布。步驟2.按快捷鍵“Ctrl+T”，對T恤進行自由變換。制作白底主圖照片實例設(shè)計制作白底主圖步驟3.調(diào)整T恤到適當位置。新建圖層，使用矩形選框工具，高度為100像素，填充顏色為灰藍色(R：0，G：47，B：100)。步驟4.新建圖層，使用“多邊形套索工具”建立多邊形，填充為橙黃色(R：247，G：211，B：9)。步驟5.使用“文字工具”，輸入文字“潮牌設(shè)計修身T恤”，文字設(shè)置如圖5.1.42所示，按調(diào)出“切換字符和段落面板”對話框，調(diào)整文字位置效果如圖5.1.43所示。制作白底主圖照片實例設(shè)計制作白底主圖步驟5.使用“文字工具”，輸入文字“潮牌設(shè)計修身T恤”，設(shè)置文字，按調(diào)出“切換字符和段落面板”對話框，調(diào)整文字位置。步驟6.輸入文字“只售68元”，在切換字符和段落面板調(diào)整參數(shù)，，保存文件。要點提示：①一般在主圖上使用“蘭亭雅黑”字體。②在主圖中的字體不超過3種，顏色一般也不超過3種。制作白底主圖了解主圖規(guī)格設(shè)計制作白底主圖步驟1.進入到首頁，在右上角選擇“商家支持”→“幫助中心”，點擊進入。步驟2.選擇“商家?guī)椭薄暗赇侀_通及基礎(chǔ)管理”→“商品發(fā)布”，點擊“商品發(fā)布”，在頁面中點擊“天貓商品主圖發(fā)布規(guī)則”。找到天貓對主圖的要求。制作白底主圖了解主圖規(guī)格設(shè)計制作白底主圖步驟3.對商品所屬類目進行詳細的了解。以服飾為例，選擇“商家?guī)椭薄耙?guī)則與違規(guī)舉報”→“行業(yè)商品規(guī)則”，點擊“行業(yè)商品規(guī)則”，再點擊頁面的“天貓行業(yè)標準”→“服飾行業(yè)”。步驟4.在跳轉(zhuǎn)的頁面尋找關(guān)于商品圖片的規(guī)則。要點提示：要關(guān)注天貓的規(guī)則更改公告，實時跟進，制作出符合規(guī)則的主圖。如果主圖制作違反天貓規(guī)則，會出現(xiàn)商品不予發(fā)布的后果，影響后續(xù)的商品銷售。知識點任務(wù)二設(shè)計個性主圖理解網(wǎng)店圖片優(yōu)化的必要性了解淘寶網(wǎng)店圖片優(yōu)化的方向了解淘寶網(wǎng)店主圖、細節(jié)圖的功能區(qū)別能對商品圖片進行色差、清晰度的調(diào)整能根據(jù)需要對商品進行摳選熟練掌握淘寶圖片空間的管理設(shè)計個性主圖制作個性化主圖背景制作個性化主圖背景步驟1.打開素材“練習素材/項目5/SC5-3.psd”文件，新建圖層，命名為“黑條紋”。選擇油漆桶工具，設(shè)置參數(shù)如圖5.2.5所示，填充“灰色犢皮紙”圖案。步驟2.按快捷鍵“Ctrl+L”，調(diào)出“色階”對話框，設(shè)置參數(shù)。把“黑條紋”圖層下移一層。設(shè)計個性主圖制作個性化主圖背景制作個性化主圖背景步驟3.新建圖層，命名為“大白圈”。使用“橢圓選框工具”，設(shè)置羽化：100像素，樣式：固定大小，寬度900像素，高度900像素。建立選區(qū)，填充為白色(R：255，G：255，B：255)。取消選區(qū)，把圖層下移一層。設(shè)計個性主圖制作個性化主圖背景制作個性化主圖背景步驟4.新建圖層，命名為“黑框”。使用“矩形選框工具”，建立高為250像素，等圖像寬度的選區(qū)，填充為黑色(R：0，G：0，B：0)。取消選區(qū)。新建圖層，命名為“小白圈”，使用“橢圓選框工具”，設(shè)置羽化：50像素，樣式：固定大小，寬度340像素，高度210像素。建立選區(qū)，填充為白色(R：255，G：255，B：255)，取消選區(qū)。制作白底主圖制作個性化主圖背景制作個性化主圖背景步驟5.自由變換“小白圈”放大到適當大小，不透明度為65%，移動到中間。調(diào)整圖層順序。步驟6.復(fù)制T恤圖層，命名為“倒影”。按快捷鍵“Ctrl+T”進行自由變換，右鍵選擇“垂直翻轉(zhuǎn)”。按快捷鍵“V”使用移動工具，下移倒影圖案。制作白底主圖制作個性化主圖背景制作個性化主圖背景步驟7.在“倒影”圖層上添加蒙版，做黑白漸變。調(diào)整“倒影”圖層不透明度為70%。要點提示：①背景里依靠兩個羽化的白圈來實現(xiàn)立體效果，這兩個白圈的大小和羽化像素可以根據(jù)自己需要進行調(diào)整。②一般是根據(jù)商品在店鋪里的類別和定位，分別制作對應(yīng)的背景模板。使用時加入商品即可。設(shè)計個性主圖批量添加店鋪LOGO批量添加店鋪LOGO步驟1.建立一個文件夾命名為“主圖”，把要添加LOGO的主圖放入該文件夾。然后新建一個文件夾，命名為“已加LOGO主圖”，用于存放修改后的主圖。找出一張需要添加LOGO的主圖復(fù)制一份在“主圖”文件夾外。注意：所有需要添加LOGO的主圖必須尺寸一致。步驟2.選擇菜單“窗口”→“動作”。調(diào)出“動作”調(diào)板，點擊“新建動作”按鈕。設(shè)計個性主圖批量添加店鋪LOGO批量添加店鋪LOGO步驟3.在“新建動作”對話框中，名稱命名為“加LOGO”。點擊“記錄”按鈕，則開始記錄動作。紅色圓按鈕表示記錄中。步驟4.打開預(yù)先準備好的文件，通過“操作選區(qū)”→“填充前景色”→“建立文本”→“設(shè)置文本”→“移動”等步驟，在文件中繪制店鋪LOGO，保存文件，按停止鍵停止錄制動作。設(shè)計個性主圖批量添加店鋪LOGO批量添加店鋪LOGO步驟5.選擇菜單“文件”→“自動”→“批處理”，調(diào)出“批處理”對話框。然后使用Photoshop開始批處理，處理幾百張圖片也只需要幾分鐘的時間，每一張主圖都添加了店鋪LOGO。要點提示：所有需要添加LOGO的主圖必須尺寸一致。知識點任務(wù)三管理商品圖片理解網(wǎng)店圖片優(yōu)化的必要性了解淘寶網(wǎng)店圖片優(yōu)化的方向了解淘寶網(wǎng)店主圖、細節(jié)圖的功能區(qū)別能對商品圖片進行色差、清晰度的調(diào)整能根據(jù)需要對商品進行摳選熟練掌握淘寶圖片空間的管理情景設(shè)計小寶團隊制做好商品主圖和細節(jié)副圖后，在上傳到店鋪的過程中發(fā)現(xiàn)，如果一張一張地上傳，工作重復(fù)且瑣碎，效率不高；買家打開頁面的速度也較慢。在咨詢過老師后，得知淘寶有圖片空間，不僅管