1、正版可修改PPT課件(中職） Photoshop CC網店視覺設計第九章教學課件第九章 網店商品詳情圖的視覺設計9.1 商品主圖的設計 9.2 商品引導促銷廣告視覺設計9.3 商品規格參數圖的視覺設計 9.4 商品色碼屬性圖的視覺設計9.5 商品設計理念展示圖的設計 9.6 商品賣點展示圖的視覺設計返回下一頁第九章 網店商品詳情圖的視覺設計9.7 商品主體多角度展示圖的設計 9.8 商品使用狀態展示圖的設計 9.9 商品細節展示圖的設計 9.10 商品功能展示圖的設計9.11 商品售后、品牌、商家信息展示圖的設計返回上一頁9.1 商品主圖的設計商品主圖是首先進入消費者視角的第一組概略性商品圖像

2、信息圖，對商品的促銷起到關鍵性的作用，目前的大部分網絡銷售平臺中，商品主圖一組一般為5 幅，不同的平臺有不同的尺寸規定與要求，而淘寶平臺規范不嚴格。一組商品主圖中第一張圖為首圖，這張圖非常重要。各類網絡零售平臺系統設定的，允許商家發布的主圖最多是五幅，有些平臺要求五幅圖全部上傳，有些沒有嚴格的要求，但對于正規的商家來說，用于銷售的商品的五幅主圖一般是要做全的，除了首圖以外，其他主圖的作用與首圖比相對要輕一些，但也是非常重要的。一般主圖需要展現商品各個視角的外觀，也可以用于展現同款但不同顏色的幾個商品圖。下一頁返回9.1 商品主圖的設計下面是一款鞋類商品的主圖設計方法。（1）根據商品的顏色來設計

3、主圖，主圖的大小為800800 像素，具體如圖9.1圖9.5所示。（2）根據同一款商品的不同視角與細節設計主圖。（3）根據不同顏色的組合進行主圖的設計。上一頁返回9.2 商品引導促銷廣告視覺設計商品引導促銷廣告圖一般都是在商品詳圖前面，其作用是一步一步引導消費者對商品產生興趣，引導消費者進一步去詳細了解商品的屬性與特征，所以在商品詳情頁上的商品引導促銷廣告圖也是非常重要的。不同的商家對商品促銷廣告圖的重視程度不一樣，有些商家設計了多張商品引導促銷廣告圖，有些商家就設計了一張商品引導促銷廣告圖，有些甚至沒有。當然商品引導促銷廣告圖的設計要看商家的整體規劃，而且對于不同品類的商品，不同用途的商品，

4、甚至不同的銷售平臺，其商品引導促銷廣告圖的設計方式與風格也是不一樣的，需要具體情況具體分析，要符合整體的設計與布局，下面為本款鞋類商品的促銷引導設計具體方法。下一頁返回9.2 商品引導促銷廣告視覺設計9.2.1 商品促銷廣告視覺設計（一）（1）在計算機中啟動Photoshop 軟件，執行Ctrl+N 命令或者在“文件”菜單中選擇“新建”命令，創建一個新的圖像文件，在彈出的對話框中設置圖像文件的寬度為790 像素，高度為751 像素，分辨率為72 像素/英寸。顏色模式為RGB 顏色，具體如圖9.16 所示。（2）在軟件的工具箱中單擊前景色按鈕，在彈出的對話框中設置顏色，設置RGB 的數值為（0、

5、74、110）。（3） 在圖層面板的底部，單擊“創建新圖層”按鈕，創建一個新的圖層，然后執行Alt+Delete 命令將上一步設置的前景色填充到新的圖層中。上一頁下一頁返回9.2 商品引導促銷廣告視覺設計（4）在軟件的工具箱中選擇漸變填充工具，在工具屬性欄中點取“徑向漸變”的漸變方式，混合模式為“正常”，其他參數默認設置。（6）單擊漸變工具選項上的漸變顏色設置選項，設置類型為“前景色到背景色”，設置前景色RGB 為（15、128、190），設置背景色RGB 為（39、244、250）。（7）在軟件的圖層面板，創建一個新圖層，設置圖層的不透明度為35%，運用前面幾步設置好的漸變工具在新圖層進行填

6、充。（8）打開“01 sucai 1.psd”素材圖像文件，在Photoshop 軟件的工具箱中選取移動工具，將素材圖像文件中的“云紋”圖像移到目標圖像中，運用Ctrl+T 命令，對“云紋”圖像的大小與位置進行調整。上一頁下一頁返回9.2 商品引導促銷廣告視覺設計（9）繼續運用移動工具，將“01 sucai 1.psd”素材圖像文件中的“運動的晶體”圖像移到目標文件中，運用Ctrl+T 命令，對“運動的晶體”圖像的大小與位置進行調整。（10）繼續運用移動工具，將“01 sucai 1.psd”素材圖像文件中的“運動的晶體”圖像移到目標文件中，運用Ctrl+T 命令，對“運動的晶體”圖像的大小與

7、位置進行調整，然后再選取部分圖像進行調整。（11）在工具面板選取毛筆工具，設置筆刷大小為106 像素，硬度為0，模式為正常，流量為43%。上一頁下一頁返回9.2 商品引導促銷廣告視覺設計（12）將“01 sucai 1.psd”素材圖像文件中的“運動的晶體”圖像移到目標文件中，運用Ctrl+T 命令，對“運動的晶體”圖像的大小與位置進行調整，然后在圖層面板將這幾個素材圖像的圖層分別添加圖層蒙版效果，并運用上一步設置的畫筆工具在圖層蒙版上對素材圖像的結構進行調整，（13）運用軟件的移動工具，將素材文件中的“炫光”圖像移到目標文件中來，調整大小與位置，并設置圖層混合模式為“疊加”。（14）繼續從素

8、材圖像文件中移動“炫光”圖像到目標文件中，調整位置與大小。上一頁下一頁返回9.2 商品引導促銷廣告視覺設計（15）打開素材圖像文件“01 sycai 2”運動鞋圖像文件，然后移動工具將運動鞋圖像移到目標圖像文件中，調整運動鞋的大小與位置。（16）選取工具箱中的文本工具，設置文本字體為“方正蘭亭粗黑”，顏色為白色。（17）在目標圖像文件的左上方輸入“足夠清爽”文字，如果“引號”因位置關系無法編輯，文字可以分開輸入并調整好位置。（18）選取工具箱中的自定義形狀工具，在圖層面板創建一個新圖層，選擇自定義形狀工具的“填充”選項，描邊為“無”，寬度為3 個點，繪制一個圓形線條，然后用橡皮擦工具，擦除圓形

9、線條的上面一部分形成一個開放的圓環。上一頁下一頁返回9.2 商品引導促銷廣告視覺設計（19）繼續運用自定義形狀工具，在圖層面板重新創建一個新圖層，然后用自定義形成工具繪制一個三角形形狀。（20）在繪制好上面的兩個形狀后，用移動工具進行調整，使箭頭的位置放置恰當，并調整整體的大小與位置。（21）選取軟件工具箱中的文本工具，設置字體為“楷體”，字體大小為42.06 點，顏色為白色，選擇“加粗”選項。（22）在目標圖像文件中輸入“360”文字，用移動工具放置合適的位置。上一頁下一頁返回9.2 商品引導促銷廣告視覺設計（23）繼續運用文字工具，設置字體均為“方正大黑簡體”，文字顏色均為白色，設置字體大

10、小輸入相關文字，其中文字要左對齊。（24）輸入相關文字以后，最后的圖像效果如圖9.36 所示，并保存文件。上一頁返回9.3 商品規格參數圖的視覺設計在商品引導促銷廣告圖之后，一般的情況下是接著向消費者展現商品的具體參數，通過主圖、商品促銷廣告圖的引導，消費者對商品的性能已經有初步的了解，接下來一般的消費者想了解的是商品的參數，所以很多商家特別是銷售服裝類與鞋類的商家，一般把商品的具體參數規格放在商品促銷廣告圖之后。商品參數展示圖主要是較為全面地描述商品的參數，一般包含商品的品牌、標識，本商品的型號、尺碼大小，商品的材質，商品所具備的顏色系列，商品流行元素，商品的版型，等等，最重要的是要展現商品

11、的規格，即整體大小尺寸與部位大小尺寸。設計形式多樣，但風格要符合整體設計規劃。其中長寬高的標注可以用軟件中的形狀工具進行選型，也可以根據圖像自行繪制，具體如下面所敘。下一頁返回9.3 商品規格參數圖的視覺設計（1）啟動計算機運行Photoshop 軟件，執行命令創建一個新的圖像文件，設置圖像大小寬度為790 像素，高度為579 像素，分辨率為72 像素/英寸，具體如圖9.55 所示。（2）在軟件的工具箱中單擊前景色按鈕，在彈出的拾色器面板中設置前景色，其RGB值為（42、70、89）。（3）在軟件的工具箱中點選矩形選擇工具，設置羽化值為0 像素。（4）在新建立的圖像文件中執行Ctrl+R 命令

12、使圖像邊緣顯示標尺，然后在圖像的頂部區域創建一個長方形，在圖層面板創建一個新圖層，執行Ctrl+Delete 命令用前景色填充。上一頁下一頁返回9.3 商品規格參數圖的視覺設計（5）在軟件的工具箱中單擊前景色按鈕，在彈出的拾色器面板中設置顏色RGB 為（230、230、230）的一種灰色。（6）執行Ctrl+D 命令先取消上一步創建的長方形選區，在圖層面板長方形填充所在的圖層下方，創建一個新圖層，執行Ctrl+Delete 命令用前景色進行填充。（7）在軟件的工具箱中選取自由形狀工具，設置繪圖方式為形狀，填充選項設置為白色，（8）在圖層面板首先于長方形填充所在的圖層上方創建一個新圖層，然后用形

13、狀工具繪制一個顏色RGB 為（230、230、230）的圓點。上一頁下一頁返回9.3 商品規格參數圖的視覺設計（9）在軟件的工具箱中選取文本工具，設置文本屬性，其中文本字體為微軟雅黑，大小為18.51 點，顏色為RGB（230、230、230），設置加粗選項，輸入文字“商品信息”；在設置字體為Arial 字體，大小為12 點，字間距為9，字體顏色為RGB（230、230、230），設置加粗選項，輸入英文文字。（10）在軟件的工具箱中選取移動工具，將輸入的文字對象以及圓點進行對齊設置。（11）在軟件的工具箱中選取文本工具，設置文字字體為方正大黑簡體，文字大小為20點，字體顏色為黑色，選擇大寫選項

14、。上一頁下一頁返回9.3 商品規格參數圖的視覺設計（12）在圖像文件中分別輸入“SIZE”與“尺碼推薦”文字，并用移動工具調整文字的位置，使它們左對齊。（13）繼續運用文本工具，設置字體為微軟雅黑，字體大小為13 點，行間距為20 點，字體顏色為黑色。（14）在“尺碼推薦”文字下方輸入中文段落，并使段落文本左對齊。（15） 在軟件的工具箱中選取自由形狀工具，設置繪制方式為形狀，設置顏色為RGB（101、183、11）。（16） 在軟件的形狀庫中選取不同的形狀，在分別創建一個新圖層的同時，繪制三個形狀，然后用移動工具進行對齊排列。上一頁下一頁返回9.3 商品規格參數圖的視覺設計（17）選取軟件中

15、的文本工具，設置字體為微軟雅黑，字體大小為15 點，行間距為20點，顏色為黑色。（18）分別輸入段落文字，并進行左右對齊。（19）在軟件的工具箱中選取矩形選擇工具，設置羽化值為0。（20）前景色設置為RGB（101、183、11），在圖像文件的右邊繪制一個長方形選區，創建一個新圖層以后，將前景色填充。（21）運用文本工具，設置字體為微軟雅黑，選擇Regular 選項，字體大小為16 點，行間距為30 點，字符間距為0，顏色為白色。（22）在右邊的長方形填充區域輸入白色的段落文字，設置對齊方式為左對齊，并把文字放置合適的位置。上一頁返回9.4 商品色碼屬性圖的視覺設計9.4.1 商品顏色分類展示

16、圖的設計（1）運行Photoshop 軟件，創建一個新的圖像文件，設置文件尺寸，其中寬度為790 像素，高度為1 020 像素，分辨率為72 像素/英寸，具體如圖9.73 所示。（2）在軟件中打開素材文件“04sucai 1.psd”。（3）將素材文件用軟件的移動工具移到目標圖像中，執行Ctrl+T 命令，對素材圖像的大小進行適當的調整，并放置合適的位置。（4）運用軟件的文本工具，設置字體為微軟雅黑，選擇Regular 選項，字體大小為14 點，行間距為30 點，字符間距為50，字體顏色為黑色。下一頁返回9.4 商品色碼屬性圖的視覺設計（5）運用上一步設置完成的文字工具，分別輸入兩列注意對齊方

17、式與文字的位置。（6）運用軟件的文本工具，設置字體為微軟雅黑，選擇Regular 選項，大小為14 點，行間距為30 點，字符間距為50，字體顏色為RGB（4、123、220）。（7）運用上一步設置完成的文字工具，注意對齊方式與文字的位置。（8）運用軟件的文本工具，設置字體為方正粗宋簡體，大小為24 點，行間距為16.81 點，字符間距為200，字體顏色為黑色。（9）創建一個新圖層，在以上兩個步驟輸入的文字下方，運用省略號輸入文本，形成一條虛線。上一頁下一頁返回9.4 商品色碼屬性圖的視覺設計（10）在軟件的工具箱中選取矩形選擇工具，設置羽化值為0 像素。（11）在圖層面板創建一個新圖層，然后

18、繪制一個矩形選區，設置前景色為黑色，執行編輯菜單下面的描邊命令，將選區描邊，最后取消選擇，把描邊形成的矩形放置合適的位置。（12）運用文字工具設置字體為方正粗宋簡體，大小設置為24 點，字符間距為200，顏色為黑色。（13）在描邊的長方形內輸入文字，英文文字的大小運用Ctrl+T 命令進行調整（14）運用文字工具設置字體為微軟雅黑，大小設置為14 點，選擇Regular 選項，字符間距為50，行間距為20 點，顏色為RGB（137、137、137）。上一頁下一頁返回9.4 商品色碼屬性圖的視覺設計（15）輸入灰色文字，文字設置為左對齊，并移到合適的位置，如圖9.83 所示。（16）在軟件中打開

19、素材文件“04sucai 2.psd”，將素材逐個移到目標圖像文件中，用移動工具進行位置排列。（17）選取矩形選擇工具，設置羽化值為0 像素。（18）繪制一個大小合適的正方形選區，創建一個新圖層以后用RGB 為（33、118、171）的顏色填充，接著繼續創建圖層，用矩形選擇工具移動平行移動選區后，用RGB 為（145、4、51）5）的顏色填充；繼續相同的操作，用RGB 為（33、118、171）的顏色填充。上一頁下一頁返回9.4 商品色碼屬性圖的視覺設計（19）取消選擇，運用文字工具，設置中文文字的字體為方正蘭亭粗體，大小為24 點，字符間距為24，顏色為白色；設置英文文字的字體為Arial，

20、大小為19 點，顏色為白色，大寫。（20）將文字輸入并移到合適的位置，最后效果如圖9.89 所示。上一頁返回9.5 商品設計理念展示圖的設計商品設計理念風格展示圖對于服裝類商品、鞋類商品，以及手表等時尚類商品來說是必不可少的，其展現的是設計的風格、流行的元素、制作的工藝水準、設計理念、品牌的內涵，等等，有些還專門表明設計師的形象等，其中商品設計理念風格展示圖中的文案設計也比較重要。下面這一商品設計理念風格展示圖制作上并不復雜，左邊直接采用現場照片圖像排列，右邊為一幅設計線描草稿，簡介、明快、生動。文案設計能突出設計風格，字體設計活潑，文字左對齊排列顯得整齊，軟件操作上也比較容易實現。具體操作過

21、程如下所示。（1）運行Photoshop 軟件，執行菜單命令創建一個新的圖像文件，設置圖像的寬度為790像素，高度為389 像素，分辨率為72 像素/英寸，具體如圖9.97 所示。下一頁返回9.5 商品設計理念展示圖的設計（2）在軟件的工具箱中，單擊前景色按鈕，設置前景色RGB 為（188、188、188）。（3）在軟件的圖層面板，創建一個新的圖層，執行Ctrl+Delete 命令，將前景色填充在新創建的圖層中。（4）在軟件中打開“03 sucai.psd”圖像文件，將素材圖像用移動工具拖到文件中，并執行Ctrl+T 命令對素材圖像進行調整。（5）運用文字工具設置字體為微軟雅黑，大小為36 點

22、，顏色為RGB（70、22、22），輸入“感受更精致的品質”文字；運用文字工具，設置字體為Arial，大小為14 點，顏色為RGB（70、22、22），輸入一行英文文字。上一頁下一頁返回9.5 商品設計理念展示圖的設計（6）運用移動工具，將上面輸入的兩條文字移到文件中合適的位置，并使之中間對齊。（7）在軟件的工具箱中單擊前景色按鈕，在彈出的拾色器對話框中設置前景色RGB（56、60、91）。（8）在軟件的工具箱中選取橢圓選擇工具，在圖像文件的左邊創建一個圓形選區（同時按住shift 鍵），在圖層面板創建一個新圖層，執行Ctrl+Delete 命令將前景色填充。（9）執行Ctrl+D 命令，取消

23、前面創建的圓形選區，然后在軟件的工具箱中選取鋼筆工具，設置繪制方式為形狀，描邊方式為直線2 個點，描邊線型為虛線，然后創建一個新圖層，在圓形填充區域內繪制一條虛線。上一頁下一頁返回9.5 商品設計理念展示圖的設計（10）在軟件的工具箱中選取文本工具，設置文本字體為微軟雅黑，顯示方式為“regular”，大小為18 點，字符間距為0 ，行間距為自動，顏色為RGB（182、185、209），輸入文字“運動風尚”。（11）繼續運用文字工具，設置字體為微軟雅黑，字體顯示方式為bold，字體大小為28點，行間距為自動，字符間距為0，字體顏色為RGB（210、207、226），輸入文字“更耐穿”。（12）

24、運用軟件的移動工具將前面幾步創建的“虛線”“運動風尚”“更耐穿”三個對象進行位置移動與編輯，使它們以圓形填充為背景居中對齊。上一頁下一頁返回9.5 商品設計理念展示圖的設計（13）在軟件的圖層面板，將“圓形填充”“虛線”“運動風尚”“更耐穿”四個圖形對象所在的圖層同時選中，并進行復制，復制成5 份，使復制出來的圖像水平對齊，然后雙擊需要更改的文字所在的圖層，編輯更改相關的文字。（14）在軟件的工具面板中選取文本工具，設置文字字體為微軟雅黑，顯示方式為bold，字體大小為14 點，行間距為18 點，字符間距為0，顏色為RGB（39、44、82）。（15）運用段落文本輸入三行中文段落，并將文本設置

25、為左對齊，然后將文本放置在合適的位置。上一頁下一頁返回9.5 商品設計理念展示圖的設計（16）繼續運用段落文本工具，設置字體為Arial 字體，選擇Regular 選項，行間距為10點，字符間距為0，顏色為黑色。（17）在圖像的下方輸入英文段落，并使文字中間對齊，最后的圖像效果如圖9.108 所示。上一頁返回9.6 商品賣點展示圖的視覺設計9.6.1 商品賣點展示圖視覺設計（1）運行軟件創建一個新的圖像文件，設置文件寬度為790 像素，高度為682 像素，分辨率為72 像素/英寸，具體如圖9.109 所示。（2）設置前景色RGB 為（38、65、83），運用矩形選擇工具，羽化值為0 像素，創建

26、一個新圖層后，在圖像文件的上部繪制一個長方形選區，并用前景色填充。（3）打開素材文件，將天空素材放入圖像文件中，按住Shift 鍵的同時調整素材圖像的大小確保等比編輯。下一頁返回9.6 商品賣點展示圖的視覺設計（4）選取工具箱中的漸變填充工具，設置漸變顏色為從白色到透明，漸變方式為線性漸變，模式為正常，不透明度100%。（5）創建一個新圖層，運用從白色到透明的漸變對圖像漸變填充。（6）選取文字工具，分別設置字體為微軟雅黑與一種英文字體（如果計算機中沒有字體（7）輸入文字“為什么選擇我”與“WHY DID YOU CHOOSE ME”，使文字中間對齊居中排列。上一頁下一頁返回9.6 商品賣點展示

27、圖的視覺設計（8）打開素材文件，將素材移到文件中，執行Ctrl+T 命令調整素材圖像的大小與位置。（9）選取鉛筆工具，設置筆刷大小為3 像素，模式為正常，不透明度為100%，創建一個新圖層，在圖像中繪制一直角形狀。（10）運用文字工具設置字體為華文新魏，大小分別為30 點與79 點，顏色為黑色與深灰色。（11）運用設置好的文字工具分別輸入“讓您健步如”與“飛”兩組文字，確定當前圖層為“飛”字所在的圖層，執行Ctrl+T 命令轉動一個角度。上一頁下一頁返回9.6 商品賣點展示圖的視覺設計（12）繼續運用文字工具，設置字體為Elephant，選擇Regular 樣式，大小為50 點，字符間距為0，

28、斜體大寫，顏色為一種深藍色。（13）將文字放入合適的位置，運用編輯菜單下面的斜切工具對文字進一步地變形。（14）分別運用方正韻動粗體與微軟雅黑，不同的字體大小。（15）分別輸入文字，并放到合適的位置，文字為左對齊。（16）運用鋼筆工具，繪制方式為形狀，設置描邊為3 個像素，選擇線型為虛線，創建一個新圖層以后，用黑色繪制兩條平行的虛線，具體效果如圖9.126 所示。上一頁返回9.7 商品主體多角度展示圖的設計商品主體多角度展示圖是讓消費者對商品的外觀屬性進行全面了解的一個環節，一般情況下消費者在這里對商品的了解要求深入細致，商品主體多角度展示圖應盡可能全面地描述商品的外觀特征，應從前后、左右、上

29、下、里外等多個角度來充分展示商品，商品主體多角度展示圖在設計上相對較為簡單，多直接采用拍攝好的圖片，但尺寸上、顏色上要進行調整。商品主體多角度展示圖的設計重心是圖文并排，以圖為主。一般的圖像照片的排列順序是根據商品使用的順序，消費者一般瀏覽觀察商品的順序編排，即從前到后，從上到下，從左到右，從整體到局部，從外到內的順序。當然不能千篇一律、照搬照抄，還要在遵守風格統一的基礎上，根據具體情況進行設計，下面是一款鞋類一種顏色的商品展示。下一頁返回9.7 商品主體多角度展示圖的設計這款鞋有三種顏色，應根據三種顏色分別進行格調一致的設計。商品主體多角度展示圖的設計均采用了拍攝好的照片圖像，拍攝時商品主體

30、組合擺放合理生動，能充分展示商品的外觀，制作方法也較為方便。而商品主體多角度展示圖應對拍攝好的不同角度的商品圖像進行摳圖，然后進行排列組合來實現。（1）運行軟件創建一個新的圖像文件，設置文件大小寬度為790 像素，高度為4 391 像素，分辨率為72 像素/英寸，具體如圖9.150 所示。（2）與上一講的案例一樣繪制一個藍色填充的長方形，設置工具參數，先運用形狀工具繪制“花型”形狀，然后運用文字工具輸入白色的文字，最后運用形狀工具繪制三角形形狀，并轉動三角形形狀。上一頁下一頁返回9.7 商品主體多角度展示圖的設計（3）打開素材文件，將素材放入圖像文件中，并調整素材的大小與位置。（4）創建一個新

31、圖層，運用矩形選擇工具，繪制一正方形選區，用藍色的前景色填充選區，取消選擇以后，設置文字屬性。（5）輸入“彩藍”文字與“BLUE”文字，用移動工具放置合適的位置并對齊。（6）將彩藍鞋子的素材全部放入圖像中，運用編輯工具設置圖像的大小與位置，做到排列整齊。上一頁下一頁返回9.7 商品主體多角度展示圖的設計（7）在圖像文件中移動繪圖區域，用同樣的方式編輯灰紅鞋子的圖像素材，注意排列整齊。（8）在圖像文件中移動繪圖區域，用同樣的方式編輯灰藍鞋子的圖像素材，注意排列整齊。（9）運用縮放工具，將整體圖像文件縮小，最后圖像效果如圖9.158 所示。上一頁返回9.8 商品使用狀態展示圖的設計商品使用狀態展示

32、圖是用來表現商品使用狀況的一組圖像，這對進一步刺激消費者的購買欲望非常重要，這一組圖往往能促進消費者聯想自身使用該商品的狀況，實際上是一種虛擬的體驗，因為網上銷售的商品最大的缺點就是無法滿足消費者對商品的直接體驗，不能直接接觸商品，感悟品質，更不能試穿、使用商品體驗使用的效果，只能根據消費者自身的經驗，結合商家展示的商品圖像信息來判斷商品的使用價值，進而做出購買決定。所以商品使用狀態展示圖的設計是非常重要的。下面的操作實例就是使用直接拍攝的穿著狀態的圖像，通過軟件進行切割，突出鞋與腿為主體，充分展示這款鞋子的使用效果，設計過程中圖片上也可以運用紅花綠葉等素材加以陪襯來突出主體效果。圖像邊緣的文

33、字是裝飾性的，字體活潑隨意，起到關聯與統一風格的作用，軟件操作上比較容易實現，注意使用段落文本。下一頁返回9.8 商品使用狀態展示圖的設計（1）運行軟件創建一個新文件，設置文件的寬度為790 像素，高度為3 505 像素，分辨率為72 像素/英寸，具體如圖9.159 所示。（2）選取工具箱中的矩形選擇工具，設置羽化值為0 像素，在圖像文件的上部繪制一長方形選區，設置前景色為RGB（4、123、220），創建一個新圖層后填充選區。（3）在工具箱中選取自定義形狀工具，設置繪制方式為形狀，填充顏色為白色，描邊為無，從形狀庫中選擇“花6”形狀。（4）創建一個新圖層，運用設置好的自定義形狀工具繪制“花6

34、”形狀，設置“花6”形狀的大小與位置。上一頁下一頁返回9.8 商品使用狀態展示圖的設計（5）運用文字工具，設置字體為微軟雅黑，選取Regular 選項，設置字體大小為18點，顏色為白色，字符間距為0，輸入“模特展示”文字；設置字體為10 點，顏色為白色，字符間距為0，輸入“MODEL SHOWS”大寫英文字體。（6）運用自定義形狀工具，選擇形狀選項，填充為白色，描邊為無，從形狀庫中選擇“三角形”形狀。上一頁下一頁返回9.8 商品使用狀態展示圖的設計（7）創建一個新圖層后運用設置好的自定義形狀工具繪制一個正立的三角形形狀，執行CTRL+T 變換編輯命令按住Shift 鍵的同時轉動90，使三角形朝

35、右，然后運用移動工具將“花的形狀”“模特展示”“MODEL SHOWS”“朝右的三角形形狀”進行有序整齊的排列（這實際上是詳情頁的標題，在下面的章節中還會用到）。（8）打開素材文件并將第一幅素材圖像運用移動工具拖入到目標文件中，調整其位置與大小。上一頁下一頁返回9.8 商品使用狀態展示圖的設計（9）選取文字工具，設置字體為方正超粗黑簡體，文字大小為18.42 點，字符間距為0，顏色為RGB（159、159、159），輸入大寫文字“DAYS OF SUMMER”；設置字體為微軟雅黑，文字大小為10 點，字符間距為100，顏色為RGB（174、174、174），輸入大寫加粗的斜體文字“STANFO

36、RDUNIVERSITY CUTTING-SDGE TECHNOLOGY”。（10）運用移動工具將文字“DAYS OF SUMMER”與“STANFORD UNIVERSITYCUTTING-SDGE TECHNOLOGY”移到合適的位置，并使左對齊。（11）在打開的素材文件中，繼續把素材圖像移入文件中，調整大小與位置。上一頁下一頁返回9.8 商品使用狀態展示圖的設計（12）運用文字工具，設置字體為微軟雅黑，選擇Bold 選項，字體大小為10 點，行間距為12 點，字符間距為0，顏色為黑色，輸入大寫加粗傾斜的段落英文文字，設置段落對齊方式為居中；設置字體為方正正纖黑簡體，大小為48 點，字符間

37、距為0，顏色為（174、174、174），輸入斜體的“SIMPLE 簡約”文字。（13）運用移動工具把英文段落文字與“SIMPLE 簡約”文字移到合適的文字，并使中間對齊。（14）運用移動工具，從素材文件中把灰藍顏色的鞋子穿著效果圖像移到文件中，調整其大小與位置。上一頁下一頁返回9.8 商品使用狀態展示圖的設計（15）運用移動工具，從素材文件中把其余2 幅灰藍顏色的鞋子穿著效果圖像移到文件中，調整其大小與位置。（16）運用文字工具，設置字體為微軟雅黑，選擇Regular 選項，字體大小為30 點，行間距為12 點，字符間距為0，顏色為黑色，輸入“追逐生活的腳步”文字；設置字體為Edwardia

38、nS字體，選擇Regular 選項，大小為24 點，字符間距為10，行間距為20 點，顏色為黑色，輸入斜體的“The worst way to miss someone is to be shying right beside them knowing you”文字。上一頁下一頁返回9.8 商品使用狀態展示圖的設計（17）將文字“追逐生活的腳步”與“The worst way to miss someone is to be shying rightbeside them knowing you”放到合適的位置。（18）運用移動工具，從素材文件中把灰紅顏色的鞋子穿著效果圖像移到文件中，調整其大

39、小與位置。（19）運用移動工具，從素材文件中把其余2 幅灰紅顏色的鞋子穿著效果圖像移到文件中，調整其大小與位置。（20）選取工具箱中的矩形選擇工具，繪制一個長方形選區，然后運用橢圓選擇工具，設置羽化值為0 像素，設置為減選模式，根據圖像的位置減選部分長方形選區。上一頁下一頁返回9.8 商品使用狀態展示圖的設計（21）確定當前圖層為左邊的灰紅穿著效果圖像，執行刪除命令刪除部分圖像，形成圓弧狀（也可用剪切蒙版的方式實現），具體如圖9.183 所示。（22）運用相同的方法刪除右邊灰紅穿著效果圖像的部分圖像，形成圓弧狀。（23）設置前景色 RGB 為（33、118、171），運用矩形選擇工具繪制一個正

40、方形選區，建立一個新圖層以后用前景色填充。上一頁下一頁返回9.8 商品使用狀態展示圖的設計（24）運用文字工具，字體為微軟雅黑，選取Regular 選項，大小為16.91 點，字符間距為0顏色為白色，輸入“彩藍”文字，調整大小后輸入“BLUE”文字，放置合適的位置。（25）分別運用相同的方法為灰藍與灰紅圖像效果設置相同大小、垂直方向位置對齊的標簽，最后縮小圖像，整體效果如圖9.187 所示。上一頁返回9.9 商品細節展示圖的設計商品細節展示圖是指商品整體信息中無法展示的商品局部信息，一般用放大的圖像來表示，對鞋類商品主要描述商品材料的質感、工藝的精細程度、局部的裝飾效果等，以輔助說明商品的品質

41、與工藝，促進消費者信任感的產生。對于服裝類商品，要根據商品的特點來考慮并設計展示的部位，有選擇地進行重點展示，消費者通常對服裝造型關注的部位有：領口造型、肩部造型、袖口造型、腰部造型、裙擺造型、口袋造型、褲腰造型、蝴蝶結等裝飾品造型等；消費者對工藝質量關注的內容有：面料質量、縫紉線痕跡、扣眼工藝、拉鏈安裝工藝、花邊工藝、腰帶工藝、里料襯托工藝等；消費者一般還會關注品牌信息、質量檢測信息、工藝合格證、權威認證信息、配件、贈品、外包裝、生產實景等商品相關內容。商品的細節展示主要為消費者提供商品的質量信息、制作工藝信息等，滿足消費者對商品的質量、工藝等要求。下一頁返回9.9 商品細節展示圖的設計下面

42、是一組鞋子的細節展示圖，主要采用照片圖像放大局部圖，通過裁剪工具合理裁剪以后使用，配以文字說明，真實而具體。（1）運行軟件，創建一個新的圖像文件，設置圖像寬度為790 像素，高度為2 184 像素，分辨率為72 像素/英寸，具體如圖9.188 所示。（2）設置前景色RGB 為（4、123、220）為一種藍色。選用羽化值為0 像素的矩形選擇工具，在圖像文件的上部繪制一個長方形選區，創建一個新圖層后用前景色填充。（3）選擇工具箱中的自定義形狀路徑工具，設置繪制方式為形狀，描邊為無，從形狀庫中選擇星形形狀（或者多邊形形狀進行多邊形設置）。上一頁下一頁返回9.9 商品細節展示圖的設計（4）創建一個新圖

43、層，在藍色長方形上方繪制一個白色多邊形形狀。（5）運用文字工具設置字體為方正蘭亭粗黑，顏色均為白色，字體大小分別為18 點與10 點。（6）在多邊形形狀后面輸入“細節展示”與“THE DETAILS SHOW”文字，使文字放在合適的位置，然后運用形狀工具繪制一個三角形。（7）在圖像文件中顯示標尺，從標尺中用移動工具拖出參考線。（8）將素材文件在軟件中打開，用移動工具將素材拖進圖像中，運用編輯命令把素材圖像的大小調整到兩條參考線之間。上一頁下一頁返回9.9 商品細節展示圖的設計（9）運用文字工具，設置字體為方正蘭亭粗黑、方正蘭亭準黑、方正蘭亭中黑，顏色為RGB（4、123、220）的一種藍色與黑

44、色，分別運用文字屬性設置的方式輸入文字。（10）在圖像中輸入文字，并使文字移到合適的位置，左邊的文字基本接近右對齊，右邊的段落文字為左對齊。（11）將素材文件在軟件中打開，用移動工具將素材拖進圖像中，運用編輯命令把素材圖像的大小調整到兩條參考線之間。（12）運用上面相同的字體，在圖像中輸入文字，并使文字移到合適的位置，左邊的文字基本接近右對齊，右邊的段落文字為左對齊。上一頁下一頁返回9.9 商品細節展示圖的設計（13）將素材文件在軟件中打開，用移動工具將素材拖進圖像中，運用編輯命令把素材圖像的大小調整到兩條參考線之間。（14）運用上面相同的字體，在圖像中輸入文字，并使文字移到合適的位置，左邊的

45、文字基本接近右對齊，右邊的段落文字為左對齊。（15）將素材文件在軟件中打開，用移動工具將素材拖進圖像中，運用編輯命令把素材圖像的大小調整到兩條參考線之間。（16）運用上面相同的字體，在圖像中輸入文字，并使文字移到合適的位置，左邊的文字基本接近右對齊，右邊的段落文字為左對齊。（17）運用工具箱中的縮放工具，將整幅圖像縮小后圖像的最后效果如圖9.208 所示。上一頁返回9.10 商品功能展示圖的設計商品功能展示圖是指用來展示商品的特殊使用功能，展示與眾不同的設計，提醒適合的人群等，并不是所有的網絡銷售的商品都必須設計功能性展示圖，要根據需要進行設計與安排，有些商家為了節省成本而不進行設計，但對于一

46、些特殊類別的商品，最好是配備商品功能性展示圖，以提升流量的轉化率。對于服裝商品有適合于各種體型的，有用于不同著裝場合的，還存在一個穿著的合身度問題。由于網上購物過程無法對服裝進行試穿比較，消費者只能根據商家提供的規格信息，結合自身的尺寸進行判斷服裝商品的合身度與可用性。但是由于個體間體型存在巨大的差距，即便是相同的規格，也存在不同部位上尺寸的差別，比如從身高判斷體型一樣為中號的消費者，因為存在胸圍與腰圍的不同，中號規格的服裝就不一定都適合這類消費者。下一頁返回9.10 商品功能展示圖的設計因此，服裝商品的特殊性使消費者網上購物存在規格上的風險。為了使消費者更好地把握服裝型號與尺寸規格，盡可能將

47、消費者在型號規格上的風險與疑慮降到最低，判明服裝的功能，一些精明的經銷商往往非常詳盡地把服裝的使用功能、服裝的規格型號、尺寸以及試穿報告展現給消費者，以提高消費者的滿意度。而鞋類產品與服裝類產品類似，由于不同消費者的腳型完全不同，比如腳板寬與窄，使相同的款式與尺碼，不一定能滿足所有消費者，所以對商品來說，為了避免高退貨率的發生，最好配置商品功能性展示圖。上一頁下一頁返回9.10 商品功能展示圖的設計9.10.1 商品功能展示圖的設計（1）創建一個新的圖像文件，設置文件寬度為790 像素，高度為647 像素，分辨率為72像素/英寸，背景內容為白色，具體如圖9.209 所示。（2）設置前景色為RG

48、B（210、210、210），在圖層面板創建一個新圖層，然后用前景色填充，設置圖層不透明度為50%，填充值為100%。（3）打開素材文件，將天空素材用移動工具移入圖像文件中，運用變換編輯命令設置素材文件的大小，使素材圖像完全適合文件的大小。（4）打開素材文件，將土地的素材放入到圖像文件中，調整大小與位置。上一頁下一頁返回9.10 商品功能展示圖的設計（5）打開石塊素材文件，選擇魔術棒工具，設置容差為32，在石塊素材的白色背景區域點選使白色背景區域全部選中，然后執行反選命令。（6）運用移動工具將選中的石塊素材移到目標文件中，運用編輯命令調整石塊圖像的大小，并放置合適的位置。（7）打開運動鞋圖像素

49、材，選擇磁性套索工具，設置寬度為10 像素，對比度為10%，頻率為57，沿著運動鞋圖像周圍移動使運動鞋全部選中。（8）運用移動工具，將選中的運動鞋圖像移到目標文件中，運用變換編輯命令調整運動鞋圖像的大小與位置。上一頁下一頁返回9.10 商品功能展示圖的設計（9）選取工具箱中的縮放工具，將圖像顯示局部放大，然后選取多邊形套索工具，設置羽化值為0 像素，在運動鞋造型下方繪制一個箭頭形狀的選區。（10）設置前景色為RGB（145、8、251），創建一個新圖層后運用前景色填充選區。（11）運用以上同樣的方法，在運動鞋圖像上方繪制兩個箭頭造型并填充。（12）運用文字工具，設置文字字體為方正蘭亭粗黑，大小

50、為52 點，字符間距為0，顏色為RGB（254、252、1），輸入文字“防撞鞋頭設計”，然后雙擊文字所在的圖層，設置圖層樣式，勾選投影選項，上一頁下一頁返回9.10 商品功能展示圖的設計設置混合模式為正片疊底，顏色為黑色，不透明度為75%，角度為90 度，距離為1 個像素，擴展值為0 ，大小為2 個像素，執行確定按鈕完成圖層樣式設置，最后把文字移到合適的位置。（13）運用文字工具設置字體為方正大黑簡體，大小為16.5 點，字符間距為0，行間距為20.17，顏色為白色與深灰色，輸入文字，右對齊，并放置合適的位置。（14）運用文字工具設置字體為微軟雅黑，選擇Regular 選項，大小為9 點，行間

51、距為12，顏色為RGB（123、123、123），設置大寫，輸入英文段落，設置左對齊，放置合適的位置。（15）選取多邊形套索工具，設置羽化值為5 像素，繪制一個圓弧狀的選區，創建一個新圖層后用白色填充。上一頁下一頁返回9.10 商品功能展示圖的設計（16）創建一個新圖層，羽化值為0 像素，運用矩形選擇工具繪制一矩形選區并用白色填充，設置圖層不透明度為30%，運用多邊形選擇工具繪制一個多邊形選區，運用流量為20%的橡皮擦工具擦除選區內的部分像素，形成鏤空狀，然后運用畫筆工具，不透明度設置為42%，流量為43%，繪制簡筆石塊造型，最后用微軟雅黑大小為9 點的文字輸入“防撞功能”文字。（17）運用軟

52、件工具箱中的縮放工具，顯示全部的圖像文件，最后效果如圖9.225所示。上一頁返回9.11 商品售后、品牌、商家信息展示圖的設計商品售后、品牌、商家信息展示圖主要是為了解除消費者購買商品后產生的一系列顧慮，現在我國商務部已經規定15 天無理由退貨，一些平臺也要求商家做出相應的承諾，但是消費者對于商家的不信任感總是存在的，所以在銷售平臺上設計售后問題、物流問題、退換貨問題的、商品的質保期限、售后的維修問題，以及商家的品牌信息、商家的生產場景等還是有必要的，能提升消費者對商品與商家的信任度。下面就是一組商品售后、品牌、商家信息展示圖的設計。（1）運行Photoshop 軟件，創建一個新的圖像文件，設

53、置文件寬度為790 像素，高度為660 像素，分辨率為72 像素/英寸，具體如圖9.242 所示。下一頁返回9.11 商品售后、品牌、商家信息展示圖的設計（2）選取軟件工具箱中的矩形選擇工具，設置羽化值為0 像素。（3）設置前景色為RGB（252、234、194），在圖層面板創建一個新圖層，運用矩形選擇工具繪制一個長方形選區，然后用前景色填充。（4）設置前景色RGB 為（29、170、178），創建一個新的圖層，選擇工具箱中的多邊形套索工具，設置羽化值為0 像素，按住Alt 鍵的同時對長方形選區進行減選，形成一個倒梯形選區，然后用前景色填充。（5）設置前景色RGB 為（136、127、104）的一種深灰色，在圖層面板，單擊上一步創建的圖層左邊的“眼睛”將圖層關閉，然后在關閉的圖層下方創建一個新圖層，用設置好的深灰色填充。上一頁下一頁返回9.11 商品售后、品牌、商家信息展示圖的設計（6）重新顯示被關閉的圖層，確定當前工作的圖層為深灰色填充所在的圖層，執行編輯菜單下的斜切命令，適當移出一點深灰色填充。（7）執行Ctrl+D 命令取消選擇，設置前景色RGB 為（245、122、172），選取工具箱中的圓形選擇工具，設置羽化值為0 像素。（8）在圖層面板創建一個新圖層，運用圓形選擇工具繪制一個大小合適的圓形選區并用前景色填