第2章 網(wǎng)店美工設(shè)計(jì)要領(lǐng)

41

因?yàn)橹苯诱故臼址ㄖ苯訉⑸唐吠频较M(fèi)者面前，所以要十分注意畫面上商

品的組合和展示角度，突出商品的品牌和商品本身的特點(diǎn)，運(yùn)用光影、顏色和

背景進(jìn)行烘托，將商品置于一個(gè)具有感染力的空間，這樣才能增強(qiáng)海報(bào)畫面的

視覺沖擊力。

知識補(bǔ)充 直接展示手法的注意事項(xiàng)

圖 2-57 直接展示型海報(bào)文案

? 突出特點(diǎn)：要想在同行業(yè)眾多相似的商品中脫穎而出，在創(chuàng)作海報(bào)文案時(shí)，

就要強(qiáng)調(diào)并鮮明地表現(xiàn)出商品本身與眾不同的特征。將這些特征置于海報(bào)頁

面的主要視覺部位，或加以烘托處理，消費(fèi)者能立即感受到商品的特征，并

注意該商品，進(jìn)而引起興趣，達(dá)到刺激其購買欲望的促銷目的。圖 2-58 所示

的海報(bào)文案，通過“美肌出眾 寄語真愛”文案，將商品的特點(diǎn)展現(xiàn)出來，從

而使商品更具吸引力。

圖 2-58 突出特點(diǎn)的海報(bào)文案

? 合理夸張：對電商文案中所宣傳的商品品質(zhì)或特性進(jìn)行合理夸張，可加深或

擴(kuò)大消費(fèi)者對這些特征的認(rèn)識。通過這種手法能更鮮明地強(qiáng)調(diào)或揭示商品的

品質(zhì)，還能使海報(bào)文案有藝術(shù)感。圖 2-59 所示的海報(bào)文案，通過“醇情告白

時(shí)刻年輕”，將商品的特點(diǎn)展現(xiàn)出來，從而使其更具吸引力。

42

淘寶天貓網(wǎng)店美工實(shí)戰(zhàn)——視覺設(shè)計(jì)＋店鋪裝修＋移動(dòng)端店鋪（微課版）

按商品表現(xiàn)的特征，夸張還可以分為形態(tài)夸張和神情夸張兩種類型，前者為

表現(xiàn)性的商品表現(xiàn)，后者則為含蓄性的商品表現(xiàn)?？鋸埵址梢詾楹?bào)文案注入

濃郁的感情色彩，使商品的特征鮮明、突出、生動(dòng)。

知識補(bǔ)充 夸張的其他類型

圖 2-59 合理夸張的海報(bào)文案

? 以情托物：海報(bào)是圖片與文字的完美結(jié)合，消費(fèi)者觀看海報(bào)的過程就是與海

報(bào)不斷交流感情并產(chǎn)生共鳴的過程。海報(bào)文案可以借用美好的感情來烘托商

品，真實(shí)而生動(dòng)地反映商品特點(diǎn)，發(fā)揮藝術(shù)的感染力，達(dá)到銷售商品的目的。

圖 2-60 所示的海報(bào)方案為“歸家有你 滿心歡喜”，就是以歸家的情感來承托

商品的。

圖 2-60 以情托物的海報(bào)文案

? 制造懸念：首先在文案上“故弄玄虛”，布下疑陣，使消費(fèi)者對海報(bào)內(nèi)容抱

有期待，激發(fā)其好奇心，從而促使其產(chǎn)生進(jìn)一步探明廣告題意的強(qiáng)烈愿望；

然后通過文案標(biāo)題或正文點(diǎn)明海報(bào)的主題，使消費(fèi)者的懸念得以解除（或者

不解除而保留下去）。圖 2-61 所示的海報(bào)文案是通過預(yù)售制造商品懸念的。

第2章 網(wǎng)店美工設(shè)計(jì)要領(lǐng)

43

圖 2-61 制造懸念的海報(bào)文案

課堂實(shí)訓(xùn) —— 鑒賞森林大叔旗艦店的首頁

實(shí)訓(xùn)目標(biāo)

本實(shí)訓(xùn)要求從色彩、構(gòu)圖和頁面布局等角度鑒賞森林大叔旗艦店的首頁，以學(xué)習(xí)

色彩搭配和版式布局的方法，首頁效果如圖 2-62 所示。

圖 2-62 首頁效果圖

實(shí)訓(xùn)思路

根據(jù)實(shí)訓(xùn)目標(biāo)，需要先了解該首頁中包含的信息和內(nèi)容，再分析其色彩搭配和版

式布局的方法。

44

淘寶天貓網(wǎng)店美工實(shí)戰(zhàn)——視覺設(shè)計(jì)＋店鋪裝修＋移動(dòng)端店鋪（微課版）

（1）觀察圖 2-62 可發(fā)現(xiàn)，該網(wǎng)店首頁采用明度較高的紅色，整個(gè)畫面較鮮亮。與不

同色彩的堅(jiān)果進(jìn)行對比則增添了一絲樂趣，讓人產(chǎn)生可愛、活潑、精致和美觀

的感覺。

（2）文字字體以黑體、宋體為主，畫面簡潔、大方。使用的文案具有促銷性，如

“滿199減100專區(qū)”，因此通過板塊來展現(xiàn)滿減信息，消費(fèi)者可單擊此板塊鏈

接進(jìn)入相應(yīng)的活動(dòng)頁面。文字顏色主要采用白色和紅色，與背景顏色相符，不

會(huì)讓人產(chǎn)生突兀的感覺。

（3）頁面布局采用頁頭、頁中和頁尾的形式。頁頭為促銷信息的展示，頁中為活動(dòng)

商品的展示，頁尾則為網(wǎng)店信息的總結(jié)。整個(gè)頁面布局板塊清晰，內(nèi)容格式統(tǒng)

一，給人一種整潔、大方的感覺。

課后練習(xí)

練習(xí)1：賞析戈美琪女鞋旗艦店的色彩搭配和字體搭配

圖 2-63 所示為戈美琪女鞋旗艦店首頁展示效果，要求對該頁面的設(shè)計(jì)元素、色

彩搭配與字體搭配進(jìn)行分析。

圖 2-63 戈美琪女鞋旗艦店首頁展示效果

第2章 網(wǎng)店美工設(shè)計(jì)要領(lǐng)

45

練習(xí)2：賞析森馬官方旗艦店首頁的布局

圖 2-64 所示為森馬官方旗艦店首頁，要求對首頁的顏色、風(fēng)格、搭配、構(gòu)圖方式、

網(wǎng)頁元素等進(jìn)行分析。

圖 2-64 森馬官方旗艦店首頁

拓展知識

1. 色彩的搭配方法

在網(wǎng)店裝修中，一般不會(huì)單獨(dú)使用某種色彩，而是搭配使用多種色彩。不同的色

彩搭配可直接影響整個(gè)設(shè)計(jì)的基調(diào)。下面介紹 3 種常用的色彩搭配方法，以幫助網(wǎng)店

美工快速選擇色彩搭配方案。

? 對比色調(diào)搭配方法：把色相完全相反的色彩搭配在同一個(gè)空間 ，如紅與綠、

黃與紫、橙與藍(lán)等。這種色彩搭配方法可以產(chǎn)生強(qiáng)烈的視覺效果，給人以亮麗、

鮮艷、喜慶的感覺。當(dāng)然，使用對比色調(diào)搭配方法時(shí)要把握“大調(diào)和，小對比”

原則，即總體色調(diào)應(yīng)該是統(tǒng)一和諧的，局部可以有一些小的強(qiáng)烈的對比。

? 暖色調(diào)搭配方法：把紅色、橙色、黃色、赭色等暖色搭配使用。這種色彩搭

46

淘寶天貓網(wǎng)店美工實(shí)戰(zhàn)——視覺設(shè)計(jì)＋店鋪裝修＋移動(dòng)端店鋪（微課版）

配方法可使頁面呈現(xiàn)出溫馨、和煦、熱情的氛圍。

? 冷色調(diào)搭配方法：把青色、綠色、紫色等冷色搭配使用。這種色彩搭配方法

可使頁面呈現(xiàn)出寧靜、清涼、高雅的氛圍。

2. 文案視覺寫作要點(diǎn)

文案在視覺設(shè)計(jì)中也起著十分重要的作用。網(wǎng)店美工需要通過一些技巧來突出展

示具有吸引力的文案，這樣才能在突出商品賣點(diǎn)的同時(shí)，有效抓住消費(fèi)者的購物心理，

提升商品銷量。

? 巧用數(shù)字：數(shù)字對消費(fèi)者的吸引力比文本更大，可以使用數(shù)字對商品的銷量、

價(jià)格、排名等信息進(jìn)行視覺設(shè)計(jì)，以快速彰顯自己的實(shí)力，增強(qiáng)消費(fèi)者的購

物信心。

? 利益誘惑：通過有力度的商品優(yōu)惠信息，如“買就送”“立減 × 元”“量大

從優(yōu)”“活動(dòng)僅此一次”等，促使消費(fèi)者盡快做出購買決定。

? 情感宣泄：通過場景化的文案描述，使消費(fèi)者產(chǎn)生場景及事件聯(lián)想，觸及消

費(fèi)者的購物痛點(diǎn)，如“媽媽再也不用擔(dān)心我的學(xué)習(xí)了”。

? 效果描述：描述使用商品后的理想效果，如“30 天完美瘦身”等。

? 名人效應(yīng)：將自己的商品與名人聯(lián)系起來，如“×× 同款”“×× 不老的秘密”

等，增加商品的說服力。

? 事件借勢：將熱門事件中的詞語、名稱等融入文案中，對商品進(jìn)行個(gè)性化描述，

也可以快速吸引追求潮流、獨(dú)特的消費(fèi)者的關(guān)注。

3. 品牌文案的設(shè)計(jì)與編寫

品牌文案其實(shí)是一種細(xì)化的文案類型，其主要功能是通過宣傳企業(yè)的品牌來促進(jìn)

商品的銷售。品牌文案是現(xiàn)在很多企業(yè)都會(huì)采用的一種行之有效的宣傳方式，因?yàn)檫@

種方式非常直接，比較通俗，成本也比其他的文案宣傳方式低。

品牌文案中的品牌是宣傳的主要內(nèi)容，如果品牌文案寫得不夠出眾，就會(huì)使消費(fèi)

者忽略品牌，也就無法達(dá)到品牌宣傳的目的。一篇有品質(zhì)的品牌文案所能創(chuàng)造的品牌

影響力十分大，能讓消費(fèi)者通過文案體會(huì)到品牌的誠意，進(jìn)而認(rèn)識并認(rèn)可品牌。品牌

文案主要包括以下 3 個(gè)要素。

? 標(biāo)題：一個(gè)好的標(biāo)題是一篇優(yōu)秀品牌文案的開端，能夠吸引消費(fèi)者的注意。

其實(shí)現(xiàn)在成功的品牌宣傳文案范例很多，要想脫穎而出，就要通過好的標(biāo)題

引起消費(fèi)者的興趣。

? 內(nèi)容：內(nèi)容要突出品牌的特點(diǎn)所在，適當(dāng)?shù)剡\(yùn)用生活中的例子來進(jìn)行講述，

讓品牌更貼近生活，這樣的品牌故事才更有真實(shí)感；同時(shí)，內(nèi)容還要注意體

現(xiàn)品牌優(yōu)勢，這樣消費(fèi)者才能更好地認(rèn)清品牌，繼而選擇品牌。

? 結(jié)尾：結(jié)尾要突出品牌的品質(zhì)，體現(xiàn)品牌的個(gè)性化與獨(dú)特性，這樣才能吸引

消費(fèi)者購買該品牌的商品。

學(xué)習(xí)目標(biāo)

案例展示

＊ 掌握商品圖片尺寸的修改方法

＊ 掌握商品圖片畫面的優(yōu)化方法

＊ 掌握商品圖片的摳取與合成方法

小美是一名網(wǎng)店美工，主要負(fù)責(zé)商品圖片的處理和網(wǎng)店的美化設(shè)計(jì)工作，

但是她收到的攝影師拍攝的商品圖片總是存在很多問題，如商品圖片大小不

一、畫面不清晰、噪點(diǎn)多、背景過于繁雜、主體不明確等。為了讓圖片符合

要求并提高其美觀度，小美需要對這些商品圖片進(jìn)行處理，首先是調(diào)整商品

圖片的大小，其次是優(yōu)化圖片，如提高清晰度、減少噪點(diǎn)等。此外，由于商

品圖片的背景過于繁雜，還應(yīng)將商品摳取出來，放到新的背景中，保證商品

圖片整體畫面的美觀。

由此可見，攝影師拍攝的商品圖片并不一定都是完美的，還需要根據(jù)實(shí)

際情況進(jìn)行處理。本章將對商品圖片的基本處理方法進(jìn)行講解，具體包括商

品圖片的尺寸修改、畫面優(yōu)化和摳取合成等，以提高網(wǎng)店美工初學(xué)者對商品

圖片的處理能力。

案例導(dǎo)入

紅酒杯 玻璃杯 街拍女裝

03 商品圖片的基本處理

C H A P T E R

48

淘寶天貓網(wǎng)店美工實(shí)戰(zhàn)——視覺設(shè)計(jì)＋店鋪裝修＋移動(dòng)端店鋪（微課版）

3.1? 修改商品圖片構(gòu)圖

攝影師在拍攝商品時(shí)會(huì)根據(jù)商品的特點(diǎn)選擇不同的拍攝角度，但是這樣拍攝出的

商品圖片往往不能符合網(wǎng)店不同模塊對尺寸的要求，這時(shí)就需要修改商品圖片的尺寸。

而對于傾斜的圖片，則需要進(jìn)行校正并重新構(gòu)圖。

3.1.1 修改商品圖片尺寸

修改商品圖片的尺寸是網(wǎng)店美工對圖片進(jìn)行處理的第一

步，可以直接通過裁剪工具來實(shí)現(xiàn)。本例先打開“櫥柜 .jpg”

素材文件，裁剪圖片中多余的部分，以凸顯商品主體“櫥柜”，

再將裁剪后的圖片移到海報(bào)背景中，最后修改海報(bào)的大小，將

其組合成一張完整的櫥柜商品海報(bào)。其具體操作如下。

（1）打開“櫥柜 .jpg”素材文件（配套資源 :\\ 素材文件 \\ 第 3 章 \\ 櫥柜 .jpg），如圖 3-1

所示。

（2）在工具箱中選擇“裁剪工具” ，此時(shí)圖片編輯區(qū)出現(xiàn)裁剪框，按住鼠標(biāo)左鍵向

下拖曳右側(cè)、上側(cè)的控制點(diǎn)，調(diào)整裁剪區(qū)域，凸顯主體商品“櫥柜”，如圖 3-2 所示。

拖動(dòng)控制點(diǎn)

圖 3-1 打開素材文件 圖 3-2 調(diào)整裁剪區(qū)域

（3）在工具箱中選擇“移動(dòng)工具” ，裁剪后的效果如圖 3-3 所示。

（4）打開“櫥柜海報(bào) .psd”素材文件（配套資源 :\\ 素材文件 \\ 第 3 章 \\ 櫥柜海報(bào) .psd），

選擇【圖像】【圖像大小】命令，打開“圖像大小”對話框，設(shè)置“寬度”為“ / 1920”，

此時(shí)高度將根據(jù)寬度自行調(diào)整，單擊 按鈕，完成尺寸的調(diào)整，如圖3-4所示。

1. 設(shè)置

2. 單擊

圖 3-3 裁剪后的效果圖 圖 3-4 調(diào)整圖像尺寸

微 課 視 頻

修改商品圖片尺寸

第3章 商品圖片的基本處理

49

（5）使用“移動(dòng)工具” 將裁剪好的櫥柜素材移動(dòng)到“櫥柜海報(bào)背景”圖片文件中，

并放置在櫥柜海報(bào)背景的左側(cè)。按【Ctrl+T】組合鍵，此時(shí)櫥柜素材呈可編輯狀態(tài)，

拖曳右上方的控制點(diǎn)，將櫥柜素材縮放到適當(dāng)大小，編輯完成后按【Enter】鍵確認(rèn)，

效果如圖 3-5 所示。最后按【Ctrl+S】組合鍵保存文件（配套資源 :\\ 效果文件 \\ 第

3 章 \\ 櫥柜海報(bào) .psd）。

圖 3-5 移動(dòng)素材到背景中

選擇“裁剪工具” 后，還可在工具屬性欄的“比例”下拉列表中選擇按

比例裁剪的方式對商品圖片進(jìn)行裁剪。

知識補(bǔ)充 裁剪商品圖片的其他方法

3.1.2 校正傾斜的商品圖片

攝影師在拍攝商品圖片時(shí)，經(jīng)常會(huì)因?yàn)榕臄z角度或拍攝姿

勢的問題導(dǎo)致商品圖片發(fā)生傾斜。網(wǎng)店美工為了保證圖片符合

要求，就要對傾斜的圖片進(jìn)行處理，比較常見的處理方法是使

用透視裁剪工具來進(jìn)行校正。本例將對偏右傾斜的商品圖片“紅

酒杯 .jpg”進(jìn)行校正，使其恢復(fù)正常，垂直立于桌面上。其具體操作如下。

（1）打開“紅酒杯.jpg”素材文件（配套資源:\\素材文件\\第3章\\紅酒杯.jpg），如圖3-6

所示。從圖 3-6 中可以看出，紅酒杯存在傾斜現(xiàn)象。

（2）選擇“透視裁剪工具” ，依次單擊圖片的四角以創(chuàng)建透視網(wǎng)格，然后根據(jù)紅酒杯

的傾斜度調(diào)整裁剪框的控制點(diǎn)，使裁剪框的虛線與紅酒杯的邊緣平行，如圖3-7所示。

（3）確定透視角度后，按【Enter】鍵完成對傾斜商品圖片的校正，如圖 3-8 所示。

（4）此時(shí)酒杯位于畫面偏左的位置，需再次進(jìn)行調(diào)整。選擇“裁剪工具” ，在工具

屬性欄的“比例”下拉列表中選擇“2 ∶ 3（4 ∶ 6）”選項(xiàng)，如圖 3-9 所示。

（5）此時(shí)畫布中出現(xiàn)裁剪框，拖曳裁剪框四角的控制點(diǎn)調(diào)整裁剪框的大小，將鼠標(biāo)

指針移至裁剪框內(nèi)，按住鼠標(biāo)左鍵拖曳圖片，調(diào)整裁剪框在圖片中的位置，使

酒杯位于畫面的正中間，效果如圖 3-10 所示。

微 課 視 頻

校正傾斜的商品圖片

50

淘寶天貓網(wǎng)店美工實(shí)戰(zhàn)——視覺設(shè)計(jì)＋店鋪裝修＋移動(dòng)端店鋪（微課版）

圖 3-6 打開素材文件 圖 3-7 調(diào)整裁剪框的控制點(diǎn) 圖 3-8 完成校正

（6）確定裁剪區(qū)域后，按【Enter】鍵，完成裁剪操作，按【Shift+Ctrl+S】組合鍵，打開“另

存為”對話框，保存文件，裁剪完成后的效果如圖3-11所示（配套資源:\\效果文件\\第

3 章 \\ 紅酒杯 .jpg）。

圖 3-9 選擇裁剪比例 圖 3-10 調(diào)整裁剪區(qū)域 圖 3-11 完成裁剪

3.2? 商品圖片畫面的優(yōu)化

網(wǎng)店美工除了要校正商品圖片的尺寸和角度外，還要對商品圖片的畫面進(jìn)行優(yōu)

化，如對模糊的商品圖片進(jìn)行清晰度優(yōu)化處理、對噪點(diǎn)較多的商品圖片進(jìn)行降噪處理、

去除商品圖片中多余的對象，以及虛化商品圖片的背景來突出商品等。下面分別進(jìn)行

介紹。

3.2.1 商品圖片清晰度優(yōu)化處理

當(dāng)商品圖片較為灰暗、模糊時(shí)，就很難體現(xiàn)出該商品的輪

廓和細(xì)節(jié)。網(wǎng)店美工可通過高反差保留和設(shè)置圖層混合模式來

提高圖片的清晰度，增強(qiáng)圖片的質(zhì)感。本例將打開“玻璃杯 .jpg”

素材文件，對模糊的玻璃杯進(jìn)行清晰度優(yōu)化處理，讓玻璃杯的

輪廓和細(xì)節(jié)更加清晰。其具體操作如下。

（1）打開“玻璃杯 .jpg”素材文件（配套資源 :\\ 素材文件 \\ 第

微 課 視 頻

商品圖片清晰度優(yōu)化

處理

第3章 商品圖片的基本處理

51

3 章 \\ 玻璃杯 .jpg），如圖 3-12 所示。

（2）按【Ctrl+J】組合鍵復(fù)制圖層。選擇【圖像】/【調(diào)整】/【去色】命令，對復(fù)制

的圖層進(jìn)行去色處理，效果如圖 3-13 所示。

圖 3-12 打開素材文件 圖 3-13 去色圖層

（3）選擇【濾鏡】/【其他】/【高反差保留】命令，打開“高反差保留”對話框，設(shè)置“半

徑”為“2.5”，單擊 按鈕，如圖 3-14 所示。

（4）打開“圖層”面板，在“設(shè)置圖層的混合模式”下拉列表中選擇“疊加”選項(xiàng)，

此時(shí)可發(fā)現(xiàn)玻璃杯的輪廓和細(xì)節(jié)變得清晰，如圖 3-15 所示。

通過高反差保留對商品輪廓進(jìn)行清晰度處理時(shí)，只需微調(diào)半徑值，保證所處

理對象的輪廓顯示清楚。若處理后效果不太明顯，可多次復(fù)制疊加圖層，以提高

輪廓的清晰度。

知識補(bǔ)充 高反差保留的設(shè)置技巧

1. 設(shè)置

2. 單擊

圖 3-14 設(shè)置“高反差保留”參數(shù) 圖 3-15 設(shè)置圖層的混合模式

（5）按【Ctrl+J】組合鍵復(fù)制圖層 1，此時(shí)可發(fā)現(xiàn)玻璃瓶變得更加清晰，如圖 3-16

所示。

（6）選擇【窗口】/【屬性】命令，打開“屬性”面板，單擊“色階”按鈕 ，打開

“色階”屬性面板，設(shè)置色階值分別為“22、1.2、230”，完成圖片亮度的調(diào)整，

保存文件 ，效果如圖 3-17 所示（配套資源 :\\ 效果文件 \\ 第 3 章 \\ 玻璃杯 .psd）。

52

淘寶天貓網(wǎng)店美工實(shí)戰(zhàn)——視覺設(shè)計(jì)＋店鋪裝修＋移動(dòng)端店鋪（微課版）

圖 3-16 復(fù)制圖層 圖 3-17 完成后的效果

3.2.2 商品圖片降噪優(yōu)化處理

商品圖片中的噪點(diǎn)主要有兩類：顏色噪點(diǎn)和明亮度噪點(diǎn)。

顏色噪點(diǎn)是指圖片中單純的色彩區(qū)域內(nèi)出現(xiàn)的五顏六色的雜色

塊。明亮度噪點(diǎn)是指圖片中亮度一致的區(qū)域內(nèi)出現(xiàn)的斑斑點(diǎn)點(diǎn)，

以及亮度不一的灰色顆粒。網(wǎng)店美工在處理噪點(diǎn)較多的商品圖

片時(shí)，可使用減少雜色、表面模糊等功能實(shí)現(xiàn)。本例將對“糕

點(diǎn) .jpg”素材文件中的顏色噪點(diǎn)進(jìn)行降噪處理，使圖片整體更加美觀。其具體操作如下。

（1）打開“糕點(diǎn) .jpg”素材文件（配套資源 :\\ 素材文件 \\ 第 3 章 \\ 糕點(diǎn) .jpg），可發(fā)

現(xiàn)整個(gè)畫面存在顏色噪點(diǎn)，如圖 3-18 所示。按【Ctrl+J】組合鍵復(fù)制圖層。

（2）選擇【濾鏡】/【雜色】/【減少雜色】命令，打開“減少雜色”對話框，設(shè)置“強(qiáng)

度、保留細(xì)節(jié)、減少雜色、銳化細(xì)節(jié)”分別為“10、15、72、20”，完成后勾選“移

去 JPEG 不自然感”復(fù)選框，單擊 按鈕，如圖 3-19 所示。

3. 單擊

1. 設(shè)置

2. 勾選

圖 3-18 打開素材文件 圖 3-19 設(shè)置“減少雜色”參數(shù)

（3）按【Ctrl+J】組合鍵復(fù)制圖層。選擇【濾鏡】/【模糊】/【表面模糊】命令，打開“表

面模糊”對話框，設(shè)置“半徑、閾值”分別為“3、19”，完成后單擊 按鈕，

此時(shí)可發(fā)現(xiàn)顏色噪點(diǎn)區(qū)域變得光滑，但存在輪廓模糊的現(xiàn)象，如圖 3-20 所示。

（4）再次按【Ctrl+J】組合鍵復(fù)制圖層。選擇【濾鏡】/【其他】/【高反差保留】命令，

打開“高反差保留”對話框，設(shè)置“半徑”為“3”，單擊 按鈕，保留圖片輪廓，

如圖 3-21 所示。

微 課 視 頻

商品圖片降噪優(yōu)化

處理

第3章 商品圖片的基本處理

53

2. 單擊

1. 設(shè)置

2. 單擊

1. 設(shè)置

圖 3-20 表面模糊圖片 圖 3-21 設(shè)置“高反差保留”參數(shù)

（5）打開“圖層”面板，在“設(shè)置圖層的混合模式”下拉列表中選擇“顏色減淡”選項(xiàng)，

設(shè)置“不透明度”為“20%”，此時(shí)可發(fā)現(xiàn)糕點(diǎn)的輪廓對比強(qiáng)烈，但還是存在少

量顏色噪點(diǎn)，如圖 3-22 所示。

（6）先按【Shift+Ctrl+Alt+E】組合鍵蓋印圖層，然后按【Ctrl+J】組合鍵復(fù)制圖層。

選擇【濾鏡】/【雜色】/【減少雜色】命令，打開“減少雜色”對話框，設(shè)置“保

留細(xì)節(jié)”為“0”，單擊 按鈕，此時(shí)可發(fā)現(xiàn)顏色噪點(diǎn)已清除干凈，但糕點(diǎn)效

果不夠明顯。選擇“歷史記錄畫筆工具” 在糕點(diǎn)上進(jìn)行涂抹，恢復(fù)糕點(diǎn)本身

的色彩。

（7）完成后按【Ctrl+S】組合鍵保存文件，效果如圖3-23所示（配套資源:\\效果文件\\第

3 章 \\ 糕點(diǎn) .psd）。

1. 選擇

2. 設(shè)置

圖 3-22 設(shè)置圖層的混合模式 圖 3-23 完成后的效果圖

3.2.3 去除商品圖片中的多余對象

攝影師在拍攝商品圖片時(shí)，為了完整地展現(xiàn)商品的特點(diǎn)，

往往會(huì)擴(kuò)大取景范圍，這可能導(dǎo)致商品圖片中出現(xiàn)多余的對象，

如人物、街道等。特別是在拍攝外景時(shí)，這種情況更加常見。

當(dāng)遇到這種情況時(shí)，網(wǎng)店美工可以使用修復(fù)工具去除圖片中多

余的對象。本例將去除“街拍女裝 .jpg”素材文件中多余的人物，

使背景更加干凈，主體人物更加突出，進(jìn)而更好地表現(xiàn)街拍風(fēng)格。其具體操作如下。

（1）打開“街拍女裝 .jpg”素材文件（配套資源 :\\ 素材文件 \\ 第 3 章 \\ 街拍女裝 .jpg），

微 課 視 頻

去除商品圖片中的

多余對象

54

淘寶天貓網(wǎng)店美工實(shí)戰(zhàn)——視覺設(shè)計(jì)＋店鋪裝修＋移動(dòng)端店鋪（微課版）

如圖 3-24 所示。從圖中可以看出，在模特的后方有多余的人物，整個(gè)畫面顯得

有些雜亂。

（2）在工具箱中選擇“修補(bǔ)工具” ，在工具屬性欄中設(shè)置“修補(bǔ)”為“內(nèi)容識別”，

在圖片編輯區(qū)選擇后方穿黑色衣服的人物，按住鼠標(biāo)左鍵并拖曳來框選該人物，

此時(shí)框選區(qū)域變?yōu)檫x區(qū)，如圖 3-25 所示。

2. 框選

1. 選擇

圖 3-24 打開素材文件 圖 3-25 框選人物

（3）將鼠標(biāo)指針移至選區(qū)內(nèi)，按住鼠標(biāo)左鍵向右拖曳至空白墻面，釋放鼠標(biāo)后可發(fā)現(xiàn)

選擇的人物區(qū)域已修復(fù)為鼠標(biāo)拖曳后目標(biāo)位置所在的墻面圖片，如圖 3-26 所示。

（4）使用相同的方法去除穿粉色衣服的人物，效果如圖 3-27 所示。注意：修復(fù)時(shí)要

連同下方的投影一起框選，拖曳時(shí)則要與地平線對齊，否則就會(huì)出現(xiàn)拖曳后的

效果與原圖片不匹配的情況。

拖曳

拖曳

圖 3-26 去除穿黑色衣服的人物 圖 3-27 去除穿粉色衣服的人物

（5）在工具箱中選擇“仿制圖章工具” ，在工具屬性欄中設(shè)置“畫筆大小”為“10”，

在人物的上方按住【Alt】鍵后單擊鼠標(biāo)左鍵進(jìn)行取樣，再向下拖曳對人物進(jìn)行

覆蓋，若拖曳過程中發(fā)現(xiàn)人物沒有被覆蓋，可在不同區(qū)域取樣再進(jìn)行覆蓋，如

圖 3-28 所示。

（6）使用相同的方法，反復(fù)進(jìn)行取樣和覆蓋，直至后方的人物全部被去除。完成后

保存文件，效果如圖 3-29 所示（配套資源 :\\ 效果文件 \\ 第 3 章 \\ 街拍女裝 .jpg）。

第3章 商品圖片的基本處理

55

1. 取樣 2. 拖曳

圖 3-28 覆蓋人物 圖 3-29 完成后的效果圖

除了可使用修補(bǔ)工具去除商品圖片中多余的對象外，還可使用污點(diǎn)修復(fù)畫筆

工具、修復(fù)畫筆工具、內(nèi)容感知移動(dòng)工具等實(shí)現(xiàn)上述功能，其使用方法基本相同。

去除多余對象后還可對背景進(jìn)行虛化，使商品更加突出。

知識補(bǔ)充 去除商品圖片中多余對象的其他方法

3.2.4 虛化商品圖片背景以突出商品

若商品圖片背景過于突出，網(wǎng)店美工可使用模糊工具對其進(jìn)行虛化處理，避免背

景喧賓奪主。本例將打開“街拍商品圖片.jpg”素材文件，先使用模糊工具模糊全部場景，

再使用歷史畫筆工具突出人物主體，最后使用減淡工具降低背景的亮度，使人物主體

更加美觀、突出。其具體操作如下。

（1）打開“街拍商品圖片 .jpg”素材文件（配套資源 :\\ 素材

文件 \\ 第 3 章 \\ 街拍商品圖片 .jpg），按【Ctrl+J】組合

鍵復(fù)制圖層，如圖 3-30 所示。

（2）在工具箱中選擇“模糊工具” ，在工具屬性欄中設(shè)置“畫

筆大小、強(qiáng)度”分別為“100、80%”，對背景部分進(jìn)行

涂抹以模糊背景，如圖 3-31 所示。

（3）在工具箱中選擇“套索工具” ，在圖片編輯區(qū)的人物部分繪制一個(gè)選區(qū)，使

其框選住人物身形，如圖 3-32 所示。

（4）選擇【濾鏡】/【銳化】/【USM 銳化】命令，打開“USM 銳化”對話框，設(shè)置“數(shù)

量、半徑、閾值”分別為“40、2.0、30”，單擊 按鈕，如圖 3-33 所示。

（5）返回圖片編輯區(qū)，按【Ctrl+D】組合鍵取消選區(qū)，再選擇工具箱中的“減淡工

具” ，在工具屬性欄中設(shè)置“畫筆大小、曝光度”分別為“130、50%”，在

整張圖片上涂抹以增強(qiáng)亮度，使其更加美觀。

（6）完成后按【Ctrl+S】組合鍵，保存文件并查看完成后的效果，如圖 3-34 所示（配

套資源 :\\ 效果文件 \\ 第 3 章 \\ 街拍商品圖片 .psd）。

微 課 視 頻

虛化商品圖片背景

以突出商品

56

淘寶天貓網(wǎng)店美工實(shí)戰(zhàn)——視覺設(shè)計(jì)＋店鋪裝修＋移動(dòng)端店鋪（微課版）

1. 設(shè)置 2. 設(shè)置

3. 涂抹

圖 3-30 打開素材文件并復(fù)制圖層 圖 3-31 模糊背景 圖 3-32 繪制選區(qū)

2. 單擊

1. 設(shè)置

圖 3-33 銳化圖片 圖 3-34 完成后的效果圖

在虛化背景的過程中，創(chuàng)建圖片選區(qū)時(shí)，最好使選區(qū)與圖片邊緣間有一定

的距離，以免繪制選區(qū)時(shí)出錯(cuò)。同時(shí)還可通過銳化來提高對象的清晰度，增強(qiáng)其

質(zhì)感。

知識補(bǔ)充 虛化背景時(shí)繪制選區(qū)和銳化的技巧

3.3? 摳取并合成商品圖片

網(wǎng)店頁面需要具備強(qiáng)烈的視覺表現(xiàn)力和營銷導(dǎo)向性的圖片，使用普遍的商品圖片遠(yuǎn)

遠(yuǎn)不能達(dá)到為網(wǎng)店引流、提高銷售的目的。此時(shí)就需要先將圖片中的商品摳取出來，再

為其替換更加符合需要的背景。通過圖層的疊加，使摳取出來的商品與新背景融合在一

起，不僅能提高商品的美觀度，還能營造良好的營銷氛圍，突出商品的特點(diǎn)并引導(dǎo)消費(fèi)

者點(diǎn)擊商品圖片。下面對摳取并合成商品圖片的方法進(jìn)行介紹。

3.3.1 摳取單色背景的商品圖片并合成

對于單色背景的商品圖片，可直接使用快速選擇工具和魔

棒工具進(jìn)行摳取，其摳取方法基本相同。本例將打開“空調(diào) .jpg”

素材文件，使用魔棒工具摳取空調(diào)，并應(yīng)用到其他背景中進(jìn)行

微 課 視 頻

摳取單色背景的商品

圖片并合成

第3章 商品圖片的基本處理

57

合成。其具體操作如下。

（1）打開“空調(diào) .jpg”素材文件（配套資源 :\\ 素材文件 \\ 第 3 章 \\ 空調(diào) .jpg），按【Ctrl+J】

組合鍵復(fù)制圖層，如圖 3-35 所示。

（2）在工具箱中選擇“魔棒工具” ，在工具屬性欄中設(shè)置“容差”為“10”，再

在白色空白區(qū)域單擊鼠標(biāo)左鍵，創(chuàng)建選區(qū)，如圖 3-36 所示。

復(fù)制

圖 3-35 打開素材文件并復(fù)制圖層 圖 3-36 創(chuàng)建選區(qū)

設(shè)置容差值是為了擴(kuò)大顏色的選取區(qū)域，容差值為 0 意味著只能選擇與單擊

鼠標(biāo)左鍵處相同顏色的區(qū)域。容差值越大，可選擇的區(qū)域就越大。但應(yīng)注意的是，

容差值并不是越大越好，因?yàn)槿莶钪颠^大可能會(huì)造成圖片選擇區(qū)域不準(zhǔn)確。

知識補(bǔ)充 設(shè)置容差的技巧

（3）按【Ctrl+Shift+I】組合鍵反選選區(qū)，使空調(diào)被選中，如圖 3-37 所示。

（4）打開“空調(diào)背景 .jpg”素材文件（配套資源 :\\ 素材文件 \\ 第 3 章 \\ 空調(diào)背景 .jpg），

使用“移動(dòng)工具” 將摳取出的商品圖片拖曳到背景中并調(diào)整位置，如圖 3-38

所示。

（5）按【Ctrl+J】組合鍵復(fù)制上一步驟得到的圖層，并將其拖曳到空調(diào)圖層的下方，

按【Ctrl+T】組合鍵使圖片呈框選狀態(tài)，再在其上單擊鼠標(biāo)右鍵，在彈出的快捷

菜單中選擇“垂直翻轉(zhuǎn)”命令，如圖 3-39 所示。

選擇

圖 3-37 選中空調(diào) 圖 3-38 移動(dòng)空調(diào)到背景中 圖 3-39 選擇“垂直翻轉(zhuǎn)”命令

并調(diào)整位置

58

淘寶天貓網(wǎng)店美工實(shí)戰(zhàn)——視覺設(shè)計(jì)＋店鋪裝修＋移動(dòng)端店鋪（微課版）

（6）在“圖層”面板中設(shè)置翻轉(zhuǎn)后圖層的“填充”為“30%”，完成后將圖片向下移

動(dòng)，形成投影效果，如圖 3-40 所示。

1. 設(shè)置

2. 調(diào)整

3. 查看

圖 3-40 添加投影效果

（7）在“圖層”面板中單擊“添加圖層樣式”按鈕 ，在打開的下拉列表中選擇“投

影”選項(xiàng)，打開“圖層樣式”對話框，設(shè)置“距離、擴(kuò)展、大小”分別為“5、3、

8”，單擊 按鈕，如圖 3-41 所示。

（8）完成后按【Ctrl+S】組合鍵，保存文件并查看效果，如圖 3-42 所示（配套資源 :\\ 效

果文件 \\ 第 3 章 \\ 空調(diào)主圖 .psd）。

1. 設(shè)置

2. 單擊

圖 3-41 設(shè)置“投影”參數(shù) 圖 3-42 完成后的效果圖

3.3.2 摳取精細(xì)商品圖片并合成

當(dāng)商品圖片中的商品輪廓和背景均比較復(fù)雜時(shí)，直接使用

魔棒工具很難得到較好的摳圖效果。網(wǎng)店美工可使用鋼筆工具

摳取商品細(xì)節(jié)，并在摳取時(shí)注意錨點(diǎn)、平滑點(diǎn)的調(diào)整方法。本

例將打開“耳機(jī) .jpg”素材文件，使用鋼筆工具摳圖并替換背景，

使其形成具有商業(yè)展示效果的圖片。其具體操作如下。

（1）打開“耳機(jī).jpg”素材文件（配套資源:\\素材文件\\第3章\\耳

機(jī) .jpg），如圖 3-43 所示。

微 課 視 頻

摳取精細(xì)商品圖片

并合成

第3章 商品圖片的基本處理

59

（2）在工具箱中選擇“鋼筆工具” ，在工具屬性欄中設(shè)置“工具模式”為“路徑”，

按住【Alt】鍵并向上滾動(dòng)鼠標(biāo)滾輪放大圖片到合適大小，在耳機(jī)的右上角單擊

鼠標(biāo)左鍵確定路徑起始點(diǎn)，如圖 3-44 所示。

（3）在輪廓的中間位置再次單擊鼠標(biāo)左鍵，確定第二點(diǎn)，并按住鼠標(biāo)左鍵創(chuàng)建平滑點(diǎn)，

如圖 3-45 所示。注意創(chuàng)建平滑點(diǎn)的位置不要過遠(yuǎn)，否則輪廓線將不夠貼合。

確定起始點(diǎn)

確定第二點(diǎn)

圖 3-43 打開素材文件 圖 3-44 確定起始點(diǎn) 圖 3-45 確定第二點(diǎn)

（4）使用相同的方法，沿著耳機(jī)繪制其他路徑。當(dāng)路徑不夠平滑時(shí)，可在工具箱中

選擇“添加錨點(diǎn)工具” 和“刪除錨點(diǎn)工具” 對錨點(diǎn)進(jìn)行調(diào)整，使路徑與耳

機(jī)能更好地貼合，如圖 3-46 所示。

（5）完成路徑的繪制后，在其上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“建立選區(qū)”

命令，如圖 3-47 所示。

（6）打開“建立選區(qū)”對話框，設(shè)置“羽化半徑”為“1”，單擊 按鈕，如圖 3-48

所示。

選擇

1. 設(shè)置

2. 單擊

圖 3-46 完成路徑的繪制 圖 3-47 選擇“建立選區(qū)”命令 圖 3-48 建立選區(qū)

（7）打開“耳機(jī)背景 .jpg”素材文件（配套資源 :\\ 素材文件 \\ 第 3 章 \\ 耳機(jī)背景 .jpg），

將摳取的耳機(jī)圖片拖曳到該背景中，調(diào)整大小和位置，保存文件并查看完成后

的效果，如圖 3-49 所示（配套資源 :\\ 效果文件 \\ 第 3 章 \\ 耳機(jī)海報(bào) .psd）。

60

淘寶天貓網(wǎng)店美工實(shí)戰(zhàn)——視覺設(shè)計(jì)＋店鋪裝修＋移動(dòng)端店鋪（微課版）

圖 3-49 完成后的效果圖

在使用鋼筆工具摳圖時(shí)，可按【Ctrl++】組合鍵或【Ctrl+-】組合鍵來放大或

縮小窗口；可按【Backspace】鍵移動(dòng)畫面，以便更好地觀察圖片的細(xì)節(jié)，從而

使摳圖效果更精確。

知識補(bǔ)充 如何快速放大和縮小窗口

3.3.3 摳取半透明商品圖片并合成

對于一些特殊的商品，如酒杯、婚紗、冰塊、礦泉水等，

使用一般的摳圖工具很難得到想要的透明效果。此時(shí)需結(jié)合鋼

筆工具、圖層蒙版和通道等進(jìn)行摳圖，以保證透明區(qū)域的完整

與美觀。本例通過摳取婚紗講解半透明商品圖片的摳圖方法，

網(wǎng)店美工可借鑒該方法進(jìn)行其他半透明商品的摳圖。其具體操

作如下。

（1）打開“婚紗 .jpg”素材文件（配套資源 :\\ 素材文件 \\ 第 3 章 \\ 婚紗 .jpg），按【Ctrl+J】

組合鍵復(fù)制背景圖層，得到“圖層 1”圖層，如圖 3-50 所示。

（2）在工具箱中選擇“鋼筆工具” ，沿著人物輪廓繪制路徑，注意繪制的路徑不

包括半透明的婚紗部分，如圖 3-51 所示。

（3）打開“路徑”面板，雙擊“工作路徑”路徑，打開“存儲(chǔ)路徑”對話框，保持

默認(rèn)設(shè)置不變，單擊 按鈕，如圖 3-52 所示。

（4）按【Ctrl+Enter】組合鍵將繪制的路徑轉(zhuǎn)換為選區(qū)，單擊“通道”面板中的“將

選區(qū)存儲(chǔ)為通道”按鈕 ，創(chuàng)建“Alhpa1”通道，如圖 3-53 所示。

（5）選擇“藍(lán)”通道，將其拖曳到“創(chuàng)建新通道”按鈕 上，得到“藍(lán) 拷貝”通道。

繼續(xù)選擇“鋼筆工具” ，為背景創(chuàng)建選區(qū)，并填充為黑色，完成后取消選區(qū)，

如圖 3-54 所示。

微 課 視 頻

摳取半透明商品圖片

并合成

第3章 商品圖片的基本處理

61

1. 雙擊

2. 單擊

圖 3-50 打開素材文件并復(fù)制圖層 圖 3-51 繪制婚紗路徑 圖 3-52 存儲(chǔ)路徑

單擊

1. 單擊

2. 填充

圖 3-53 將選區(qū)存儲(chǔ)為通道 圖 3-54 創(chuàng)建選區(qū)并填充為黑色

創(chuàng)建 Alpha 1 通道的目的是對人物輪廓進(jìn)行展現(xiàn)，而透明的婚紗部分則需要

先復(fù)制對比更加強(qiáng)烈的藍(lán)色通道，再摳取透明的婚紗部分。若選擇的婚紗圖片背

景比較復(fù)雜，則需要使用鋼筆工具慢慢摳??；若選擇的是純色背景，則直接使用

魔棒工具即可。

知識補(bǔ)充 復(fù)制藍(lán)色通道的原因

（6）選擇【圖像】/【計(jì)算】命令，打開“計(jì)算”對話框，設(shè)置“源2、混合”分別為“Alpha 1、

相加”，單擊 按鈕，如圖 3-55 所示。

（7）查看計(jì)算通道的效果，在“通道”面板底部單擊“將通道作為選區(qū)載入”按鈕

，載入通道的人物選區(qū)如圖 3-56 所示。

1. 選擇

2. 選擇

3. 單擊

1. 單擊 2. 載入

圖 3-55 設(shè)置“計(jì)算”參數(shù) 圖 3-56 載入通道的人物選區(qū)

62

淘寶天貓網(wǎng)店美工實(shí)戰(zhàn)——視覺設(shè)計(jì)＋店鋪裝修＋移動(dòng)端店鋪（微課版）

（8）切換到“圖層”面板，選擇“圖層 1”圖層，按【Ctrl+J】組合鍵復(fù)制選區(qū)到“圖

層 2”圖層上，隱藏其他圖層。

（9）打開“婚紗背景 .jpg”素材文件（配套資源 :\\ 素材文件 \\ 第 3 章 \\ 婚紗背景 .jpg），

將人物拖曳到婚紗背景中，調(diào)整大小與位置，保存文件并查看完成后的效果，

如圖 3-57 所示（配套資源 :\\ 效果文件 \\ 第 3 章 \\ 婚紗海報(bào) .psd）。

圖 3-57 完成后的效果

課堂實(shí)訓(xùn)

實(shí)訓(xùn)1：修改運(yùn)動(dòng)商品圖片尺寸

實(shí)訓(xùn)目標(biāo)

圖 3-58 所示為左側(cè)空白的運(yùn)動(dòng)商品圖片，要求在保證畫面完整、美觀的基礎(chǔ)上，

對空白區(qū)域進(jìn)行裁剪，使其最終尺寸為“1500像素×1000像素”，完成后的效果如圖3-59

所示。

圖 3-58 運(yùn)動(dòng)商品圖片原圖 圖 3-59 裁剪后的效果

實(shí)訓(xùn)思路

根據(jù)實(shí)訓(xùn)目標(biāo)，需要首先確定裁剪尺寸，然后調(diào)整裁剪位置，最后進(jìn)行裁剪。

（1）打開“運(yùn)動(dòng) .jpg”素材文件（配套資源 :\\ 素材文件 \\ 第 3 章 \\ 運(yùn)動(dòng) .jpg）。

第3章 商品圖片的基本處理

63

（2）在工具箱中選擇“裁剪工具” ，在工具屬性欄的“比例”下拉列表中選擇“寬 ×

高 × 分辨率”選項(xiàng)。

（3）在“寬、高”數(shù)值框中分別輸入“1500、1000”，在“設(shè)置裁剪圖片的分辨率”

下拉列表中選擇“像素 / 英寸”選項(xiàng)，然后在“分辨率”數(shù)值框中輸入 “72”，

單擊 按鈕。

（4）返回圖片編輯區(qū)，可發(fā)現(xiàn)圖片中出現(xiàn)裁剪框，按住鼠標(biāo)左鍵并拖曳圖片，調(diào)整

裁剪框在圖片中的位置。

（5）確定裁剪區(qū)域后，按【Enter】鍵，完成裁剪操作（配套資源 :\\ 效果文件 \\ 第 3 章

\\ 運(yùn)動(dòng) .jpg）。

實(shí)訓(xùn)2：處理菠蘿商品圖片效果

實(shí)訓(xùn)目標(biāo)

圖 3-60 所示為菠蘿商品圖片。通過觀察可發(fā)現(xiàn)，該商品圖片的主體是菠蘿，但

畫面中有多余的枇杷。因此，網(wǎng)店美工在處理該商品圖片時(shí)，需要先去除畫面中多余

的枇杷，然后對商品圖片的整體色調(diào)進(jìn)行處理，如提升其亮度、對比度，以保證商品

圖片的清晰、美觀。在處理時(shí)，可使用修補(bǔ)工具、污點(diǎn)修復(fù)畫筆工具、仿制圖章工具，

然后使用“調(diào)整”面板對顏色進(jìn)行簡單調(diào)整，完成后的效果如圖 3-61 所示。

圖 3-60 菠蘿商品圖片原圖 圖 3-61 處理后的效果圖

實(shí)訓(xùn)思路

根據(jù)實(shí)訓(xùn)目標(biāo)，需要首先去除枇杷，然后對污點(diǎn)進(jìn)行修復(fù)，最后調(diào)整商品圖片的

整體色彩。

（1）打開“菠蘿 .jpg”素材文件（配套資源 :\\ 素材文件 \\ 第 3 章 \\ 菠蘿 .jpg），按【Ctrl+J】

組合鍵復(fù)制圖層。

（2）選擇“修補(bǔ)工具” ，框選右側(cè)的枇杷，并向左拖曳，即可對畫面進(jìn)行修復(fù)。

（3）使用“污點(diǎn)修復(fù)畫筆工具” ，在去除枇杷后的區(qū)域進(jìn)行涂抹，去除殘留的黃

色污點(diǎn)。

64

淘寶天貓網(wǎng)店美工實(shí)戰(zhàn)——視覺設(shè)計(jì)＋店鋪裝修＋移動(dòng)端店鋪（微課版）

（4）打開“調(diào)整”面板，單擊“亮度 / 對比度”按鈕 ，打開“亮度 / 對比度”調(diào)整面板，

設(shè)置“亮度、對比度”分別為“80、-22”。

（5）打開“調(diào)整”面板，單擊“色相 / 飽和度”按鈕 ，打開“色相 / 飽和度”調(diào)整面板，

設(shè)置“色相、飽和度、明度”分別為“-10、-10、0”。

（6）完成后保存文件，并查看效果（配套資源 :\\ 效果文件 \\ 第 3 章 \\ 菠蘿 .psd）。

實(shí)訓(xùn)3：摳取耳機(jī)圖片并合成

實(shí)訓(xùn)目標(biāo)

圖 3-62 所示為耳機(jī)商品圖片。通過觀察可發(fā)現(xiàn)，耳機(jī)的輪廓不夠清晰，使用魔

棒工具很難完整地?fù)溉〕龆鷻C(jī)的全部細(xì)節(jié)，因此需要使用鋼筆工具來摳取。摳取完成

后，為了提高商品圖片的美觀度，還要對其進(jìn)行合成并添加背景、文字和陰影等操作，

完成后的效果如圖 3-63 所示。

圖 3-62 耳機(jī)商品圖片原圖 圖 3-63 完成后的效果圖

實(shí)訓(xùn)思路

根據(jù)實(shí)訓(xùn)目標(biāo)，需要先將耳機(jī)摳取出來，再進(jìn)行背景合成。

（1）打開“頭戴式耳機(jī).jpg”素材文件（配套資源:\\素材文件\\第3章\\頭戴式耳機(jī).jpg），

按【Ctrl+J】組合鍵復(fù)制背景圖層。

（2）在工具箱中選擇“鋼筆工具” ，沿著耳機(jī)的輪廓繪制路徑，繪制完成后按

【Ctrl+Enter】組合鍵，將路徑轉(zhuǎn)換為選區(qū)再進(jìn)行反選。

（3）打開“頭戴式耳機(jī)背景 .jpg”素材文件（配套資源 :\\ 素材文件 \\ 第 3 章 \\ 頭戴式

耳機(jī)背景 .jpg），將摳取出的耳機(jī)圖片拖曳到此背景中，調(diào)整大小與位置，并添

加文字、陰影，完成合成操作。

（4）完成后保存文件，并查看效果（配套資源 :\\ 效果文件 \\ 第 3 章 \\ 耳機(jī)主圖 .psd）。

第3章 商品圖片的基本處理

65

課后練習(xí)

練習(xí)1：處理紅毛丹污點(diǎn)

紅毛丹這類水果的商品圖片，常常會(huì)出現(xiàn)黑

點(diǎn)、雜點(diǎn)和斑點(diǎn)等問題。網(wǎng)店美工可結(jié)合污點(diǎn)修

復(fù)畫筆工具、海綿工具等對商品圖片進(jìn)行處理，

還可根據(jù)需要對背景進(jìn)行虛化，使商品圖片更加

美觀。本練習(xí)將打開“紅毛丹 .jpg”素材文件（配

套資源 :\\ 素材文件 \\ 第 3 章 \\ 紅毛丹 .jpg），處理

其中的污點(diǎn)并加深紅毛丹的色澤。處理前后的對

比效果如圖 3-64 所示（配套資源 :\\ 效果文件 \\ 第

3 章 \\ 紅毛丹 .jpg）。

其具體要求如下。

熟練掌握商品圖片的優(yōu)化方法。

分別使用污點(diǎn)修復(fù)畫筆工具、海綿工具、

模糊工具對圖片進(jìn)行處理，使整個(gè)畫面

中的紅毛丹更加美觀。

練習(xí)2：摳取紅酒商品圖片并合成

對于背景較為干凈的商品圖片，網(wǎng)店美工可直接使用魔棒工具處理。本練習(xí)將對

“紅酒 .jpg”素材文件（配套資源 :\\ 素材文件 \\ 第 3 章 \\ 紅酒 .jpg）進(jìn)行摳圖，將摳取

出來的紅酒瓶應(yīng)用到其他背景中，調(diào)整大小和位置后合成為更具有營銷表現(xiàn)力效果的

圖片。處理前后的對比效果如圖 3-65 所示（配套資源 :\\ 效果文件 \\ 第 3 章 \\ 紅酒 .psd）。

其具體要求如下。

熟練掌握摳取商品圖片的方法。

使用魔棒工具摳取紅酒瓶并應(yīng)用到其他背景中。

圖 3-65 處理前后的對比效果

圖 3-64 處理前后的對比效果

66

淘寶天貓網(wǎng)店美工實(shí)戰(zhàn)——視覺設(shè)計(jì)＋店鋪裝修＋移動(dòng)端店鋪（微課版）

拓展知識

1. 商品圖片摳圖前的分析

在對商品圖片進(jìn)行摳圖前，網(wǎng)店美工需要先根據(jù)圖片的特點(diǎn)分析應(yīng)采取何種摳圖

方式。常見的圖片分析方法有以下兩種。

分析對象的形狀特征：首先觀察需要摳取對象的形狀特征，若為幾何圖形，

則可使用選框工具和多邊形套索工具進(jìn)行摳取；若為不規(guī)則圖形，則可使用

鋼筆工具進(jìn)行摳取。選框工具一般使用矩形選框工具和橢圓選框工具，拖曳

鼠標(biāo)即可完成選區(qū)的選擇；多邊形套索工具與文中講解的磁性套索工具屬于

同一類工具。

分析對象的色彩特征：當(dāng)需要摳取色差較大的某一色彩區(qū)域時(shí)，可通過魔棒

工具和“色彩范圍”命令實(shí)現(xiàn)。如果背景與需要摳取對象的顏色反差較大，

則即使是毛發(fā)類等對精確度要求很高的圖片，也可以通過“色彩范圍”命令

來實(shí)現(xiàn)。

2. 復(fù)雜圖片的摳取策略

對于一些背景復(fù)雜的毛發(fā)類圖片或透明、半透明的商品圖片，使用前面講解的摳

圖方法都無法實(shí)現(xiàn)比較精確的摳圖效果，這時(shí)可借用通道這一功能摳取圖片。通道摳

圖的原理是通過紅、綠、藍(lán) 3 個(gè)通道找出黑白對比最強(qiáng)烈的一個(gè)通道圖片，然后通過

創(chuàng)建選區(qū)的方法將商品摳取出來。圖 3-66 所示為任意一張圖片的 3 個(gè)通道的黑白對比

效果，從中可發(fā)現(xiàn)綠通道的顏色對比最強(qiáng)烈。

圖 3-66 黑白對比效果

若在“通道”面板中每個(gè)通道的顏色對比都不太明顯，則可通過“計(jì)算”對話框

加深圖片輪廓，生成一張顏色對比強(qiáng)烈的新通道來做選區(qū)，從而使摳取的圖片更加精

確。如果網(wǎng)店美工希望能提高自己在 Photoshop 中的摳圖技藝，可在學(xué)習(xí)完本章后再

學(xué)習(xí)通道的相關(guān)知識。