《網(wǎng)店美工 第2版》電子教案

《網(wǎng)店美工第2版》電子教案

第1章網(wǎng)店裝修美工設(shè)計(jì)快速入門(mén)

一、初步了解網(wǎng)店裝修

教學(xué)內(nèi)容二、網(wǎng)店裝修的風(fēng)格定位

三、網(wǎng)店裝修中需要注意的問(wèn)題

【知識(shí)目標(biāo)】

1．理解網(wǎng)店裝修的作用和重要性。

2．明白網(wǎng)店裝修與轉(zhuǎn)化率的關(guān)系。

3．學(xué)會(huì)用有效的方法確定網(wǎng)店的裝修風(fēng)格。

教學(xué)要求4．注意網(wǎng)店裝修細(xì)節(jié)問(wèn)題，避免客流量的流失。

【技能目標(biāo)】

1．能夠結(jié)合實(shí)例簡(jiǎn)述網(wǎng)店裝修的重要性。

2．能夠分析品牌店鋪的裝修風(fēng)格。

3．能夠分析品牌店鋪在網(wǎng)店裝修上的優(yōu)勢(shì)。

1．網(wǎng)店裝修的作用和重要性。

教學(xué)重點(diǎn)

2．學(xué)會(huì)用有效的方法確定網(wǎng)店的裝修風(fēng)格。

1．網(wǎng)店裝修與轉(zhuǎn)化率的關(guān)系。

教學(xué)難點(diǎn)

2．能夠確定網(wǎng)店的裝修風(fēng)格。

教學(xué)方法講授法、案例法

課時(shí)數(shù)3課時(shí)

教學(xué)內(nèi)容

第一節(jié)初步了解網(wǎng)店裝修

一、什么是網(wǎng)店裝修

判定一個(gè)網(wǎng)店的好壞，首先要看的就是店鋪的裝修，沒(méi)有一個(gè)進(jìn)行專(zhuān)業(yè)、恰當(dāng)?shù)难b修，

1

《網(wǎng)店美工第2版》電子教案

哪怕店鋪中的商品質(zhì)量再好，也不一定能銷(xiāo)售出去。

二、網(wǎng)店裝修的重要性

網(wǎng)店經(jīng)營(yíng)者對(duì)于如何開(kāi)網(wǎng)店都是在不斷的摸索中前進(jìn)的，大家越來(lái)越意識(shí)到網(wǎng)店裝修

的重要性。因此，需要對(duì)網(wǎng)店進(jìn)行美化，以吸引更多的買(mǎi)家，而網(wǎng)店裝修是提高網(wǎng)店銷(xiāo)售

額的法寶，所以一定要重視這個(gè)問(wèn)題。

三、網(wǎng)店裝修與轉(zhuǎn)化率的關(guān)系

網(wǎng)店首先需要裝修，當(dāng)?shù)赇伒臏?zhǔn)備工作做到一定程度后，就可以進(jìn)行宣傳和推廣了。

在宣傳和經(jīng)營(yíng)的過(guò)程中，再逐步地去完善。既不能一味地裝修，也不能一味地宣傳。網(wǎng)店

的銷(xiāo)售量高低直接與轉(zhuǎn)化率相關(guān)，而影響轉(zhuǎn)化率的主要因素包括商品的圖片、買(mǎi)家的評(píng)價(jià)、

賣(mài)家的促銷(xiāo)活動(dòng)等。在這些因素中，無(wú)疑都會(huì)涉及網(wǎng)店裝修，可見(jiàn)網(wǎng)店裝修與網(wǎng)店的營(yíng)銷(xiāo)

推廣是密不可分的。

第二節(jié)網(wǎng)店裝修的風(fēng)格定位

一、如何確定網(wǎng)店裝修的風(fēng)格

確定店鋪的風(fēng)格就是將頭腦中的思維具體化。想要抓住店鋪的靈魂，不能只靠網(wǎng)店經(jīng)

營(yíng)者或美工的個(gè)人品位，它需要一個(gè)系統(tǒng)的方法。

二、不同行業(yè)的網(wǎng)店裝修風(fēng)格

根據(jù)店鋪銷(xiāo)售商品的不同，對(duì)商品進(jìn)行了有效的包裝和設(shè)計(jì)，使各自所呈現(xiàn)出來(lái)的視

覺(jué)效果獨(dú)具特色，也因此讓買(mǎi)家更加容易區(qū)分，形成特定的記憶，有助于自身店鋪形象的

樹(shù)立。

第三節(jié)網(wǎng)店裝修中需要注意的問(wèn)題

一、裝修圖片的顯示

一定要將裝修的圖片管理好，使用正規(guī)的網(wǎng)絡(luò)存儲(chǔ)空間網(wǎng)站來(lái)管理圖片，并且即時(shí)在

電腦上進(jìn)行備份，以免圖片丟失。

二、適量使用閃圖和特效

在裝修店鋪時(shí)，要適量使用閃圖和特效，因?yàn)殚W圖和特效非常耗費(fèi)電腦空間，當(dāng)買(mǎi)家

電腦配置不是很高的情況下進(jìn)入店鋪，電腦運(yùn)行速度會(huì)變慢，買(mǎi)家會(huì)感覺(jué)等待時(shí)間過(guò)長(zhǎng)，

不能帶給其良好的購(gòu)物體驗(yàn)。

三、添加音樂(lè)要有講究

在店鋪中添加音樂(lè)時(shí)一定要深思熟慮，講究方式與方法。

四、控制裝修圖片的色彩

巧妙地運(yùn)用色彩可以使網(wǎng)店頁(yè)面變得鮮艷、生動(dòng)、富有活力，但頁(yè)面的顏色不能太多、

太雜，保持統(tǒng)一，要有一個(gè)固定的配色方案，對(duì)色彩進(jìn)行規(guī)范，減少視覺(jué)干擾，最主要的

是讓內(nèi)容具有條理性。

五、統(tǒng)一店鋪風(fēng)格

在把握店鋪整體風(fēng)格的同時(shí)，還要考慮其穩(wěn)定性和可更改性。

2

《網(wǎng)店美工第2版》電子教案

六、網(wǎng)店視頻切忌過(guò)長(zhǎng)

賣(mài)家為了在激烈的競(jìng)爭(zhēng)中占據(jù)優(yōu)勢(shì)，的確需要緊跟這一視頻熱潮，但要注意控制視頻

的時(shí)間。

通過(guò)本章的學(xué)習(xí)，我們理解了網(wǎng)店裝修的作用和重要性，明白了網(wǎng)店裝修

與轉(zhuǎn)化率的關(guān)系，學(xué)會(huì)了用有效的方法確定網(wǎng)店的裝修風(fēng)格，也要注意網(wǎng)店裝

修細(xì)節(jié)問(wèn)題，避免客流量的流失。

歸納與為什么同樣的商品，有的網(wǎng)店賣(mài)家就能把商品賣(mài)出去，并做得風(fēng)生水起，

提高而有的賣(mài)家發(fā)布的商品就如同石沉大海，無(wú)人問(wèn)津，買(mǎi)家為什么會(huì)對(duì)相同的商

品有著截然不同的態(tài)度呢？除了推廣方式和營(yíng)銷(xiāo)手段外，就不得不提到網(wǎng)店裝

修的作用，即使自己的商品再好，但吸引不來(lái)買(mǎi)家也毫無(wú)用處。因此，網(wǎng)店裝

修對(duì)于賣(mài)家來(lái)說(shuō)，是決定成敗的重要因素之一。

第2章網(wǎng)店裝修四大要點(diǎn)：圖片、配色、布局與文字

一、準(zhǔn)備圖片素材

二、店鋪色彩搭配

教學(xué)內(nèi)容

三、不拘一格的頁(yè)面布局

四、準(zhǔn)確、搶眼的文字

【知識(shí)目標(biāo)】

1．掌握拍攝商品照片的基本技巧，并能根據(jù)設(shè)計(jì)風(fēng)格收集裝修素材。

2．學(xué)會(huì)如何對(duì)網(wǎng)店頁(yè)面進(jìn)行配色，熟知常用的配色方法和技巧。

3．了解頁(yè)面布局的組成因素和布局方式，學(xué)會(huì)使用布局來(lái)突出畫(huà)面的層次

感和主次感。

4．能夠?qū)Χ温湮淖诌M(jìn)行合理排列，打造具有高表現(xiàn)力的文字造型，并能利

教學(xué)要求

用文字營(yíng)造特定的氛圍。

【技能目標(biāo)】

1．能夠拍攝商品照片，并能根據(jù)設(shè)計(jì)風(fēng)格收集裝修素材。

2．能夠?qū)W(wǎng)店頁(yè)面進(jìn)行配色。

3．能夠了解頁(yè)面布局的組成因素和布局方式。

4．能夠利用文字營(yíng)造特定的氛圍。

3

《網(wǎng)店美工第2版》電子教案

1．拍攝商品照片的基本技巧。

2．常用的配色方法和技巧。

教學(xué)重點(diǎn)

3．頁(yè)面布局的組成因素和布局方式。

4．如何打造具有高表現(xiàn)力的文字造型。

1．拍攝商品照片。

教學(xué)難點(diǎn)2．常用的配色方法和技巧。

3．利用文字營(yíng)造特定的氛圍。

教學(xué)方法講授法、案例法

課時(shí)數(shù)4課時(shí)

教學(xué)內(nèi)容

第一節(jié)準(zhǔn)備圖片素材

一、拍攝商品照片

在網(wǎng)店裝修之前，首先需要拍攝足夠的商品照片。由于網(wǎng)上購(gòu)物的特殊性，消費(fèi)者無(wú)

法接觸到商品的實(shí)物，所以商品的所有信息只得以圖片的形式傳達(dá)。

二、收集裝修素材

在進(jìn)行網(wǎng)店裝修之前，要根據(jù)店鋪的設(shè)計(jì)風(fēng)格以及商品特點(diǎn)，為網(wǎng)店裝修準(zhǔn)備所需的

修飾素材。

第二節(jié)店鋪色彩搭配

一、常見(jiàn)的配色方法

在網(wǎng)店裝修設(shè)計(jì)中，常用的配色方法主要有同一色相的配色、類(lèi)似色相配色、相反色

相配色、補(bǔ)色色相配色、漸變效果配色和重色調(diào)配色。

（一）同一色相配色

以單一顏色為對(duì)象，調(diào)整其明度和彩度，使其呈現(xiàn)出不同的特色。這種配色在表現(xiàn)一

種秩序井然的感覺(jué)時(shí)比較適用，可以傳達(dá)出一種安靜之美。

（二）類(lèi)似色相配色

將色環(huán)上相連的顏色進(jìn)行配色，或者將相連色進(jìn)行明度和彩度上的微調(diào)后進(jìn)行配色，

色相之間和諧、協(xié)調(diào)的特征明顯，適合表現(xiàn)溫馨、甜美、浪漫的視覺(jué)效果。

（三）相反色相配色

4

《網(wǎng)店美工第2版》電子教案

使用色環(huán)上相反方向?qū)?yīng)的顏色進(jìn)行配色，給人一種強(qiáng)勢(shì)和生動(dòng)的感覺(jué)。由于色相之

間差異較大，更容易營(yíng)造出一種動(dòng)態(tài)、華麗的視覺(jué)效果。

（四）漸變效果配色

這是將所配色的明度、彩度和色相等逐層給予適當(dāng)?shù)淖兓?，再組合起來(lái)的一種配

色方案，通常用于表現(xiàn)一種和諧、自然的視覺(jué)效果。

（五）重色調(diào)配色

這是在相對(duì)單調(diào)的配色氛圍中，通過(guò)使用其對(duì)照色相與色調(diào)，從而起到強(qiáng)調(diào)效果的一

種配色方式。這樣的配色會(huì)打破之前平淡、枯燥的頁(yè)面效果，更加引人關(guān)注。

二、色彩與市場(chǎng)營(yíng)銷(xiāo)

色彩對(duì)于網(wǎng)店?duì)I銷(xiāo)而言是一個(gè)極其重要的影響因素。雖然有些消費(fèi)者對(duì)于網(wǎng)店首頁(yè)以

及商品頁(yè)面的顏色搭配并不是太在意，但真正讓買(mǎi)家最先感知的是視覺(jué)，顏色從人的視覺(jué)

開(kāi)始傳輸和滲透，對(duì)買(mǎi)家的心理與思維會(huì)產(chǎn)生重大的影響。

三、不同色調(diào)的展示頁(yè)面

根據(jù)配色方案的不同，商品頁(yè)面給人的感覺(jué)和氛圍也有很多種。分析商品的特征，選

擇一種合適的顏色，能夠?qū)⑸唐诽卣饔行У貍鬟f給買(mǎi)家，這一點(diǎn)在商品頁(yè)面的制作上至關(guān)

重要。

（一）淺色調(diào)頁(yè)面

單純形象的兒童用品，純潔禮服等需要體現(xiàn)出清純感覺(jué)的商品，可以使用淺色調(diào)進(jìn)行

配色，讓頁(yè)面中的商品形象干凈、整潔。

（二）清新色調(diào)頁(yè)面

表現(xiàn)文靜、平和感的商品可以使用清新的色調(diào)來(lái)進(jìn)行配色，這種高明度和高純度的顏

色可以增加頁(yè)面的柔和感，營(yíng)造出高檔的氛圍。

（三）藍(lán)色調(diào)頁(yè)面

藍(lán)色本身散發(fā)著清新、涼爽之感，適合表現(xiàn)夏季商品、電子商品、清潔用品等，并且

藍(lán)色具有穩(wěn)定感，容易讓買(mǎi)家產(chǎn)生踏實(shí)向上的感覺(jué)。

（四）綠色調(diào)頁(yè)面

綠色調(diào)適用于環(huán)保型的用品，利用綠色對(duì)畫(huà)面進(jìn)行配色，可以營(yíng)造出一種干凈、整潔

的氛圍，提高買(mǎi)家在商品使用安全性方面的信賴(lài)度，表現(xiàn)出親近之感。

第三節(jié)不拘一格的頁(yè)面布局

一、頁(yè)面布局的組成要素

為了把商品信息最大限度、有效、正確地傳達(dá)給買(mǎi)家，就需要進(jìn)行合理的頁(yè)面布局。

頁(yè)面布局的組成要素如下：

背景：為了更有效地營(yíng)造出和商品或活動(dòng)主題相統(tǒng)一的頁(yè)面氛圍，可以對(duì)背景進(jìn)行設(shè)

計(jì)，其中可以使用圖案、純色和圖像等元素。

圖像：網(wǎng)店裝修布局中的圖像主要指商品照片、模特照片和用于修飾頁(yè)面的形狀、符

號(hào)和插畫(huà)等，這些圖像本身就包含一定的信息，對(duì)商品或者輔助商品進(jìn)行展示，并為頁(yè)面

營(yíng)造一種特定的氛圍。

文字：主要對(duì)商品信息進(jìn)行說(shuō)明，是布局元素中最重要的組成部分之一，其設(shè)計(jì)風(fēng)格

要與商品的風(fēng)格一致。文字除了用于傳遞商品信息以外，還可作為修飾元素放在頁(yè)面中，

達(dá)到平衡布局的效果。

5

《網(wǎng)店美工第2版》電子教案

留白：指布局好商品、文字與修飾元素之后，余下的空白部分空間。如果在布局中不

注意留白，將頁(yè)面填充得滿(mǎn)滿(mǎn)當(dāng)當(dāng)，反而會(huì)給人帶來(lái)一種沉悶的感覺(jué)，造成視覺(jué)疲勞。

二、常用的商品詳情頁(yè)面布局

買(mǎi)家在瀏覽商品詳情頁(yè)面時(shí)，通常情況下會(huì)將圖像視為一個(gè)整體，然后才將視線(xiàn)定位

到比較突出或者搶眼的其他位置，所以在排列商品圖像或者展示模特照片時(shí)，為了突出商

品的特征，可以將一些希望強(qiáng)調(diào)的圖像放大并布局于顯眼的位置，效果會(huì)更加理想。

下面將介紹幾種較為常用的商品頁(yè)面的布局方式。

（一）中間對(duì)齊模式的頁(yè)面布局

通常情況下，可以調(diào)整一些圖像的尺寸，將留白部分的特色發(fā)揮出來(lái)，從而清除沉悶、

狹窄等弊端，產(chǎn)生安靜、穩(wěn)定的感覺(jué)。

（二）對(duì)角線(xiàn)排列的頁(yè)面布局

無(wú)論是怎樣的自由式布局，都要以指引線(xiàn)為準(zhǔn)進(jìn)行圖片和文字的設(shè)計(jì)和布置。

（三）棋盤(pán)式的頁(yè)面布局

優(yōu)點(diǎn)就是將眾多的圖像集合為視覺(jué)上的一個(gè)整體，形成一種統(tǒng)一感，將瀏覽者的視線(xiàn)

集中到一處。

（四）左對(duì)齊模式的頁(yè)面布局

這種頁(yè)面布局會(huì)吸引更多的視線(xiàn)，適合用在表現(xiàn)那些有順序之分的內(nèi)容上。

6

《網(wǎng)店美工第2版》電子教案

（五）對(duì)稱(chēng)型的頁(yè)面布局

在頁(yè)面布局中，即使兩側(cè)的組成要素不是按照完全相同的尺寸和排列方式來(lái)進(jìn)行，只

要兩側(cè)的空間寬度和重量感相同，就可以體現(xiàn)出對(duì)稱(chēng)的布局效果，這種布局能夠營(yíng)造出一

種文靜、安定的整體氛圍。

第四節(jié)準(zhǔn)確、搶眼的文字

一、網(wǎng)店頁(yè)面段落文字的排列方式

（一）自由對(duì)齊

這種對(duì)齊方式排列的文字表現(xiàn)形式較為自由，給人以活潑、自然的感覺(jué)，能夠表現(xiàn)出

不拘一格的效果。

（二）左對(duì)齊

左對(duì)齊排列通常能夠呈現(xiàn)出一種整齊、利落的感覺(jué)，并且具有很強(qiáng)的協(xié)調(diào)感。如果合

理調(diào)整文字的大小，就可以輕松地制作出層次感。

7

《網(wǎng)店美工第2版》電子教案

（三）居中對(duì)齊

這種對(duì)齊方式可以將視線(xiàn)集中起來(lái)，減少周?chē)貙?duì)文字的影響，也是段落文字編排

中常用的一種對(duì)齊方式。

（四）右對(duì)齊

這種對(duì)齊方式可以讓買(mǎi)家的視覺(jué)集中到文字的右側(cè)，并且利用每行文字的長(zhǎng)短不一在

左側(cè)形成一定的波形，從而產(chǎn)生流動(dòng)感。

二、打造具有高表現(xiàn)力的文字造型

（一）連筆

連筆的設(shè)計(jì)是指字體的前后筆畫(huà)一筆緊連著一筆，呈現(xiàn)出緊密相連的狀態(tài)，使同一字

體或者不同字體的筆畫(huà)之間流暢、自然地銜接起來(lái)。連筆的運(yùn)用，講究的是字體書(shū)寫(xiě)節(jié)奏

的流暢，使信息更為突出和鮮明，并產(chǎn)生有效地傳達(dá)。

（二）省略

8

《網(wǎng)店美工第2版》電子教案

字體形態(tài)的省略設(shè)計(jì)，需要對(duì)字體的基本結(jié)構(gòu)有全面的掌握，在設(shè)計(jì)時(shí)要充分發(fā)揮聯(lián)

想，既要使字體呈現(xiàn)出獨(dú)特的個(gè)性，又要使文字具有可讀性，易于區(qū)分其字體形態(tài)。

（三）裝飾

為了讓文字的表現(xiàn)更加具象化，或者增強(qiáng)店鋪商品的傳播力度，在設(shè)計(jì)某些文字的過(guò)

程中，可以在不改變文本整體效果的情況下，在文字的適當(dāng)位置添加一些修飾元素。

三、利用文字營(yíng)造特定的氛圍

網(wǎng)店的裝修設(shè)計(jì)除了要符合店鋪風(fēng)格以外，大部分的情況下會(huì)隨著節(jié)氣、節(jié)日的變化

而發(fā)生相應(yīng)的改變。而利用文字這一簡(jiǎn)單的元素，通過(guò)字體形狀的變化、修飾元素的添加

和色彩的巧妙搭配可以營(yíng)造出以下特定的氛圍。

通過(guò)本章的學(xué)習(xí)，我們掌握了拍攝商品照片的基本技巧，并能根據(jù)設(shè)計(jì)

風(fēng)格收集裝修素材。學(xué)會(huì)了如何對(duì)網(wǎng)店頁(yè)面進(jìn)行配色，熟知常用的配色方法

和技巧。了解了頁(yè)面布局的組成因素和布局方式，學(xué)會(huì)了使用布局來(lái)突出畫(huà)

面的層次感和主次感。能夠?qū)Χ温湮淖诌M(jìn)行合理排列，打造具有高表現(xiàn)力的

歸納與

文字造型，并能利用文字營(yíng)造特定的氛圍。

提高

買(mǎi)家進(jìn)入網(wǎng)店，第一眼體驗(yàn)到的便是視覺(jué)上的感受，如果視覺(jué)體驗(yàn)不好，

就更不用說(shuō)去看店鋪中的商品了，所以一定不能忽視最基本的店鋪裝修環(huán)節(jié)。

本章主要從圖片、配色、布局與文字四個(gè)方面介紹如何進(jìn)行網(wǎng)店裝修才能吸

引買(mǎi)家眼球，提升轉(zhuǎn)化率。

第3章網(wǎng)店裝修六大技能修煉

一、裁圖——對(duì)照片進(jìn)行裁剪并糾正角度

二、摳圖——選取商品替換背景

三、修圖——完美展現(xiàn)商品細(xì)節(jié)

教學(xué)內(nèi)容

四、調(diào)色——校正有色差的商品圖片

五、編輯——美化與修飾商品圖像

六、文字——商品信息輔助說(shuō)明

9

《網(wǎng)店美工第2版》電子教案

【知識(shí)目標(biāo)】

1．掌握如何對(duì)商品照片的尺寸、構(gòu)圖進(jìn)行調(diào)整，對(duì)商品外形進(jìn)行校正。

2．掌握去除水印、局部擦除、美化處理、調(diào)整模特身形、銳化圖像的方法。

3．能夠根據(jù)網(wǎng)店裝修設(shè)計(jì)的需要，摳出商品圖像并替換背景。

4．掌握調(diào)整圖片亮度、校正照片白平衡、調(diào)整照片色調(diào)的方法與技巧。

教學(xué)要求

5．能夠制作頗具創(chuàng)意感的標(biāo)題文字，能對(duì)段落文字進(jìn)行藝術(shù)化編排。

【技能目標(biāo)】

1．能夠?yàn)楹?bào)去除水印。

2．能夠?qū)ι唐穲D像進(jìn)行摳圖處理。

3．能夠?qū)⑸唐纺Ｌ貓D片進(jìn)行校正調(diào)色，使其恢復(fù)正常色調(diào)。

1．如何對(duì)商品照片的尺寸、構(gòu)圖進(jìn)行調(diào)整。

2．去除水印、局部擦除、美化處理、調(diào)整模特身形、銳化圖像的方法。

教學(xué)重點(diǎn)3．摳出商品圖像并替換背景的方法。

4．調(diào)整圖片亮度、校正照片白平衡、調(diào)整照片色調(diào)的方法與技巧。

5．段落文字進(jìn)行藝術(shù)化編排的方法。

1．如何對(duì)商品外形進(jìn)行校正。

教學(xué)難點(diǎn)2．熟練掌握Photoshop的使用方法。

3．段落文字進(jìn)行藝術(shù)化編排的方法。

教學(xué)方法講授法、案例法

課時(shí)數(shù)6課時(shí)

教學(xué)內(nèi)容

10

《網(wǎng)店美工第2版》電子教案

第一節(jié)裁圖——對(duì)照片進(jìn)行裁剪并糾正角度

一、調(diào)整圖片大小

網(wǎng)店平臺(tái)通常會(huì)對(duì)裝修圖片的大小有一定的限制，這是為了讓圖片能夠在網(wǎng)上快速地

傳輸和顯示，所以在拿到商品照片素材之后，大多數(shù)情況下都需要對(duì)商品照片的大小進(jìn)行

重新設(shè)置，使其符合網(wǎng)店平臺(tái)的要求。

二、裁剪商品照片中多余的圖像

攝影師在拍攝商品照片時(shí)，為了將商品全部囊括到畫(huà)面中，有時(shí)可能會(huì)忽略照片的構(gòu)

圖，或者將不需要的對(duì)象也納入畫(huà)面中，此時(shí)可以使用Photoshop中的裁剪工具或“裁剪”

命令來(lái)快速裁剪照片中多余的圖像，以達(dá)到重新定義照片構(gòu)圖的目的。

三、對(duì)商品外形進(jìn)行校正

在拍攝商品圖片時(shí)，由于拍攝角度等問(wèn)題有可能造成照片中的商品外形出現(xiàn)畸形，這

會(huì)影響買(mǎi)家對(duì)于商品外形的判斷和理解，此時(shí)就需要對(duì)商品的外形進(jìn)行校正。

第二節(jié)摳圖——選取商品替換背景

一、快速摳取單色背景圖片

在商品照片中，如果背景為純色，且商品的顏色與背景的顏色差異很大，可以使用

Photoshop中的快速選擇工具和魔棒工具將商品圖像快速地?fù)溉〕鰜?lái)。

二、摳取規(guī)則的商品圖片

對(duì)于一些外形較為規(guī)則、輪廓較為清晰的商品，如外形輪廓為矩形或圓形的商品，可

以使用Photoshop中的矩形選框工具和橢圓選框工具進(jìn)行快速選取。使用這兩個(gè)工具創(chuàng)建的

選區(qū)邊緣更加平滑，能夠更加準(zhǔn)確地?fù)溉∩唐返倪吘墶?/p>

三、摳取多邊形對(duì)象

有的商品形狀并不是規(guī)則圖形，此時(shí)矩形選框工具和橢圓選框工具就不適用了。如果

商品的外形為多邊形，并且具有非常明顯的棱角，使用多邊形套索工具可以快速完成商品

對(duì)象的摳取。

四、摳取輪廓清晰的圖片

對(duì)于一些邊緣輪廓清晰但不規(guī)則的商品來(lái)說(shuō)，使用磁性套索工具更容易摳取，但商品

與背景之間最好在顏色或明暗上存在較大的反差，否則摳取效果不會(huì)太理想。

五、精細(xì)摳取圖像

如果商品圖像的邊緣不規(guī)整但對(duì)于摳圖質(zhì)量又有較高要求的情況下，使用鋼筆工具摳

取圖像會(huì)更加精細(xì)，讓合成的畫(huà)面更加精致。

六、摳取復(fù)雜或半透明圖像

在網(wǎng)店裝修過(guò)程中，還會(huì)遇到一些摳取起來(lái)比較麻煩的圖像，如模特雜亂的發(fā)絲、半

透明的玻璃等，這些圖像的摳取就不能依靠單一的工具了，還要用到一些特殊的命令或面

板，進(jìn)行一些較為復(fù)雜的操作才能完成。

11

《網(wǎng)店美工第2版》電子教案

七、調(diào)整摳取的商品圖像邊緣

使用Photoshop選區(qū)工具創(chuàng)建選區(qū)并摳取商品圖像的過(guò)程中，可以看到這些工具的選項(xiàng)

欄中都有一個(gè)“調(diào)整邊緣”按鈕。

第三節(jié)修圖——完美展現(xiàn)商品細(xì)節(jié)

一、去除多余的水印

（一）使用仿制圖章工具去除水印

使用仿制圖章工具去除水印是比較常用的方法。

（二）使用修補(bǔ)工具去除水印

如果商品圖像的背景顏色或圖案比較一致，使用修補(bǔ)工具去除水印就比較方便。

（三）使用修復(fù)畫(huà)筆工具去除水印

使用修復(fù)畫(huà)筆工具去除水印的方法與使用仿制圖章工具相似。

二、局部去除多余內(nèi)容

在網(wǎng)店裝修的過(guò)程中，有時(shí)不需要商品廣告中的某些內(nèi)容，或者想使商品照片的背景

更加純粹，這時(shí)可以通過(guò)局部去除的方法來(lái)將多余的內(nèi)容進(jìn)行清除，主要使用的是畫(huà)筆工

具。

三、對(duì)模特進(jìn)行美化處理

如果模特的妝面存在瑕疵，就會(huì)影響商品的表現(xiàn)，此時(shí)就有必要對(duì)模特進(jìn)行“妝面美

容”，其中包括祛斑、磨皮、加深?yuàn)y容色彩等。

四、調(diào)整模特身形

有時(shí)因?yàn)槟Ｌ刈陨項(xiàng)l件、拍攝角度等原因，會(huì)導(dǎo)致展示效果不夠理想，這時(shí)就需要對(duì)

模特的身形進(jìn)行調(diào)修，最常進(jìn)行的就是瘦身處理。

五、對(duì)商品圖像進(jìn)行銳化處理

為了讓商品的細(xì)節(jié)更加清晰，需要在Photoshop中對(duì)商品圖像進(jìn)行銳化處理，方法有兩

種：一是使用“USM銳化”濾鏡進(jìn)行快速銳化，二是使用“高反差保留”濾鏡進(jìn)行無(wú)雜色

銳化。

第四節(jié)調(diào)色——校正有色差的商品圖片

一、調(diào)整圖片的亮度

在商品圖片的后期處理中，要先觀察照片的整體明暗效果，對(duì)于曝光不準(zhǔn)確的照片，

首先應(yīng)對(duì)全圖的明暗進(jìn)行調(diào)整，通過(guò)提高亮度和增強(qiáng)暗調(diào)，可以讓照片的曝光趨于正常。

在Photoshop中可以通過(guò)“曝光度”“色階”“曲線(xiàn)”等命令調(diào)整商品照片的亮度，讓其快速

恢復(fù)正常。

（一）用“曝光度”命令進(jìn)行二次曝光處理

Photoshop中的“曝光度”命令是用于控制照片明暗的有力工具，它的工作原理是模擬

數(shù)碼相機(jī)內(nèi)部的曝光程序?qū)φ掌M(jìn)行二次曝光處理，一般用于調(diào)整曝光不足或者曝光過(guò)度

的照片。

（二）用“色階”命令調(diào)整商品照片的曝光和層次

12

《網(wǎng)店美工第2版》電子教案

在Photoshop中打開(kāi)商品照片后，單擊“圖像”|“調(diào)整”|“色階”命令，在彈出的“色

階”對(duì)話(huà)框中可以看到直方圖，改變直方圖的形狀即可改變照片中像素的分布，從而改變

商品照片的曝光和層次。

（三）用“曲線(xiàn)”命令調(diào)整不同明暗區(qū)域的亮度

“曲線(xiàn)”命令和“色階”命令一樣，都是用于調(diào)整圖像整體明暗的，不同的是“色階”

命令只能調(diào)整亮部、暗部和中間灰度的明暗，而“曲線(xiàn)”命令是應(yīng)用不同的曲線(xiàn)形態(tài)來(lái)控

制圖像的明暗對(duì)比效果的，它可以通過(guò)控制曲線(xiàn)中任意一點(diǎn)的位置，在較小的范圍內(nèi)調(diào)整

圖像的明暗。

二、校正商品照片白平衡，恢復(fù)其真實(shí)色彩

在后期處理中必須要對(duì)商品照片進(jìn)行色彩校正，讓商品圖像恢復(fù)其真實(shí)的色彩。使用

Photoshop中的“色彩平衡”命令可以校正照片的白平衡，讓商品圖像的色彩更加真實(shí)、自然。

三、調(diào)整商品照片色調(diào)，營(yíng)造特殊氛圍

在商品照片的后期處理中，為了突顯店鋪的風(fēng)格，可以適當(dāng)調(diào)整照片的色調(diào)，讓其色

彩表現(xiàn)更獨(dú)特、更符合商品特質(zhì)。

第五節(jié)編輯——美化與修飾商品圖像

一、利用圖層樣式增強(qiáng)特效感

Photoshop提供了各種圖層樣式，如陰影、發(fā)光和斜面等，用于更改圖層內(nèi)容的外觀。圖

層樣式與圖層內(nèi)容相鏈接，當(dāng)移動(dòng)或編輯圖層的內(nèi)容時(shí)，修改的內(nèi)容中會(huì)應(yīng)用相同的樣式。

二、利用圖層混合模式制作特殊效果

通過(guò)調(diào)整圖層混合模式可以對(duì)圖像的顏色進(jìn)行相加或相減，從而制作出各種特殊的效

果。在Photoshop中包含了多種類(lèi)型的圖層混合模式，分別為組合型、加深型、減淡型、對(duì)

比型、比較型和色彩型。根據(jù)不同的視覺(jué)需要，可以應(yīng)用不同的混合模式。

三、利用蒙版控制圖像顯示效果

蒙版用于控制圖層的顯示區(qū)域，但并不參與圖層的操作，蒙版與圖層兩者之間是息息

相關(guān)的。在Photoshop中進(jìn)行網(wǎng)店裝修設(shè)計(jì)時(shí)，使用蒙版可以保持畫(huà)面局部的圖像不變，對(duì)

處理區(qū)域的圖像進(jìn)行單獨(dú)的色調(diào)和影調(diào)的編輯，被蒙版遮蓋起來(lái)的部分不會(huì)發(fā)生改變，通

常用于對(duì)商品圖片進(jìn)行摳取、編輯局部顏色和影調(diào)等操作。

四、制作GIF動(dòng)態(tài)閃圖

為了使店鋪商品能夠全方位地進(jìn)行展示，達(dá)到吸引消費(fèi)者眼球的目的，一些店鋪往往

會(huì)添加一些動(dòng)態(tài)閃圖，也就是GIF格式的動(dòng)態(tài)圖像。

第六節(jié)文字——商品信息輔助說(shuō)明

一、添加文字并設(shè)置格式

在網(wǎng)店裝修的文字編輯工作中，為處理好的商品照片添加文字是第一個(gè)步驟。添加文

字后，還可對(duì)文字的字體、字號(hào)、字間距和顏色等進(jìn)行調(diào)整，使文字的外形和色彩符合當(dāng)

13

《網(wǎng)店美工第2版》電子教案

前頁(yè)面的風(fēng)格，能夠準(zhǔn)確地傳達(dá)出商品的信息。

二、制作創(chuàng)意標(biāo)題文字

（一）使用“圖層樣式”對(duì)文字進(jìn)行修飾

使用圖層樣式對(duì)文字圖層進(jìn)行修飾，可以隨時(shí)調(diào)整其參數(shù)，且不會(huì)影響文字圖層本身

的屬性。

（二）文字外觀的藝術(shù)化設(shè)計(jì)

文字外觀的藝術(shù)化設(shè)計(jì)是指通過(guò)使用矢量圖形工具重新繪制文字、在文字上添加修飾

形狀等方式來(lái)制作標(biāo)題文字。

三、對(duì)段落文字進(jìn)行藝術(shù)化編排

為了更好地調(diào)動(dòng)買(mǎi)家的閱讀興趣，除了讓文字的內(nèi)容更加凝練外，還可以對(duì)不得不出

現(xiàn)的大段文字進(jìn)行藝術(shù)化的編排設(shè)計(jì)，以增強(qiáng)文字信息的視覺(jué)傳達(dá)效果。

通過(guò)本章的學(xué)習(xí)，我們掌握了外形進(jìn)行校正，去除水印、局部擦除、美

化處理、調(diào)整模特身形、銳化圖像的方法。能夠根據(jù)網(wǎng)店裝修設(shè)計(jì)的需要，

摳出商品圖像并替換背景。掌握了調(diào)整圖片亮度、校正照片白平衡、調(diào)整照

片色調(diào)的方法與技巧。能夠制作頗具創(chuàng)意感的標(biāo)題文字，能對(duì)段落文字進(jìn)行

歸納與

藝術(shù)化編排。

提高

由于拍攝環(huán)境、拍攝器材以及攝影水平等條件的限制，網(wǎng)店裝修的準(zhǔn)備

階段拍攝到的商品照片往往是不能直接使用的，需要對(duì)照片的尺寸、構(gòu)圖、

水印、色差、影調(diào)等進(jìn)行調(diào)整和編輯。在完成這些基本操作后，還要根據(jù)實(shí)

際的設(shè)計(jì)需要進(jìn)行摳圖、添加文字等工作。

第4章店招與導(dǎo)航的設(shè)計(jì)

一、了解網(wǎng)店店招與導(dǎo)航

二、實(shí)操案例：嬰幼兒商品網(wǎng)店店招與導(dǎo)航設(shè)計(jì)

教學(xué)內(nèi)容三、實(shí)操案例：女裝網(wǎng)店店招與導(dǎo)航設(shè)計(jì)

四、綜合實(shí)訓(xùn)

五、技能拓展

【知識(shí)目標(biāo)】

1．了解網(wǎng)店店招與導(dǎo)航的作用與設(shè)計(jì)思路。

2．能夠通過(guò)添加修飾元素、圖層樣式等方式對(duì)店招進(jìn)行修飾。

教學(xué)要求

3．根據(jù)店鋪商品圖片及圖片風(fēng)格來(lái)確定店鋪店招和導(dǎo)航的風(fēng)格及配色。

【技能目標(biāo)】

1．能夠設(shè)計(jì)網(wǎng)店的店招與導(dǎo)航，其中包含網(wǎng)店名稱(chēng)、收藏提示和導(dǎo)航。

14

《網(wǎng)店美工第2版》電子教案

2．通過(guò)學(xué)習(xí)案例掌握店招與導(dǎo)航的設(shè)計(jì)方法。

教學(xué)重點(diǎn)設(shè)計(jì)網(wǎng)店的店招與導(dǎo)航。

教學(xué)難點(diǎn)設(shè)計(jì)網(wǎng)店的店招與導(dǎo)航。

教學(xué)方法講授法、案例法

課時(shí)數(shù)5課時(shí)

教學(xué)內(nèi)容

第一節(jié)了解網(wǎng)店店招與導(dǎo)航

一、認(rèn)識(shí)店招與導(dǎo)航

店招和導(dǎo)航位于網(wǎng)店的最頂端，成功的店招通常采用標(biāo)準(zhǔn)的顏色和字體、簡(jiǎn)潔的設(shè)計(jì)

版面。此外，店招包含精煉，吸引力強(qiáng)的廣告語(yǔ)，畫(huà)面還要具備強(qiáng)烈的視覺(jué)沖擊力，清晰

地告訴買(mǎi)家我們?cè)谫u(mài)什么，而且通過(guò)店招也可以對(duì)店鋪的裝修風(fēng)格進(jìn)行定位。

二、店招與導(dǎo)航的設(shè)計(jì)思路

店招好比一個(gè)店鋪的臉面，對(duì)店鋪的宣傳起著非常重要的作用。在設(shè)計(jì)店招時(shí)，要更

多地從留住消費(fèi)者的角度來(lái)考慮。

第二節(jié)實(shí)操案例：嬰幼兒商品網(wǎng)店店招與導(dǎo)航設(shè)計(jì)

掌握其設(shè)計(jì)理念、技術(shù)要點(diǎn)，并能夠進(jìn)行實(shí)操演練。

第三節(jié)實(shí)操案例：嬰幼兒商品網(wǎng)店店招與導(dǎo)航設(shè)計(jì)

掌握其設(shè)計(jì)理念、技術(shù)要點(diǎn)，并能夠進(jìn)行實(shí)操演練。

第四節(jié)綜合實(shí)訓(xùn)

利用提供的素材為食材店鋪設(shè)計(jì)店招和導(dǎo)航，選擇淡雅的顏色進(jìn)行色彩搭配，并采用

偏中國(guó)風(fēng)的設(shè)計(jì)風(fēng)格。

第五節(jié)技能拓展

略。

通過(guò)本章的學(xué)習(xí)，我們了解了網(wǎng)店店招與導(dǎo)航的作用與設(shè)計(jì)思路，能夠

歸納與

通過(guò)添加修飾元素、圖層樣式等方式對(duì)店招進(jìn)行修飾，根據(jù)店鋪商品圖片及

提高

圖片風(fēng)格來(lái)確定店鋪店招和導(dǎo)航的風(fēng)格及配色。

15

《網(wǎng)店美工第2版》電子教案

店招與導(dǎo)航位于網(wǎng)店首頁(yè)的最頂端，是消費(fèi)者進(jìn)入店鋪首頁(yè)后看到的第

一個(gè)模塊，因此是網(wǎng)店首頁(yè)設(shè)計(jì)的重中之重。它們的主要作用是向買(mǎi)家展示

店鋪的店名、所銷(xiāo)售商品等，并提供訪(fǎng)問(wèn)店鋪各個(gè)功能模塊的快速通道。

第5章首焦輪播區(qū)的設(shè)計(jì)

一、首焦輪播區(qū)及其設(shè)計(jì)思路

二、實(shí)操案例：節(jié)日主題的首焦輪播區(qū)設(shè)計(jì)

教學(xué)內(nèi)容三、實(shí)操案例：新品上架的首焦輪播區(qū)設(shè)計(jì)

四、綜合實(shí)訓(xùn)

五、技能擴(kuò)展

【知識(shí)目標(biāo)】

1．了解網(wǎng)店首焦輪播區(qū)的作用與設(shè)計(jì)思路。

2．學(xué)會(huì)根據(jù)店鋪推廣內(nèi)容確認(rèn)首焦輪播區(qū)的風(fēng)格、布局、配色、文字和圖片。

教學(xué)要求

3．學(xué)會(huì)根據(jù)不同的節(jié)日氛圍制作出合適的首焦輪播區(qū)。

【技能目標(biāo)】

能夠設(shè)計(jì)店鋪首頁(yè)輪播區(qū)模塊。

1．學(xué)會(huì)首焦輪播區(qū)的風(fēng)格、布局、配色、文字和圖片。

教學(xué)重點(diǎn)

2．學(xué)會(huì)設(shè)計(jì)店鋪首頁(yè)輪播區(qū)模塊。

教學(xué)難點(diǎn)學(xué)會(huì)設(shè)計(jì)店鋪首頁(yè)輪播區(qū)模塊。

教學(xué)方法講授法、案例法

課時(shí)數(shù)5課時(shí)

教學(xué)內(nèi)容

16

《網(wǎng)店美工第2版》電子教案

第一節(jié)首焦輪播區(qū)及其設(shè)計(jì)思路

一、認(rèn)識(shí)首焦輪播區(qū)

網(wǎng)店的首焦輪播區(qū)主要用于告知買(mǎi)家店鋪某個(gè)時(shí)間段的廣告商品或者促銷(xiāo)活動(dòng)，位于

網(wǎng)店導(dǎo)航條的下方位置。它的主要作用就是告知買(mǎi)家店鋪在某個(gè)特定時(shí)間段的一些動(dòng)態(tài)信

息，幫助買(mǎi)家快速了解店鋪的活動(dòng)或者商品信息。

二、首焦輪播區(qū)的設(shè)計(jì)思路

首焦輪播區(qū)猶如賣(mài)家的外在形象一樣，在設(shè)計(jì)時(shí)用于搭配的圖片不能太復(fù)雜，這樣才

能突出主題。同時(shí)，要采用符合店鋪商品形象的文字，以避免產(chǎn)生凌亂的感覺(jué)。

第二節(jié)實(shí)操案例：節(jié)日主題的首焦輪播區(qū)設(shè)計(jì)

掌握其設(shè)計(jì)理念、技術(shù)要點(diǎn)，并能夠進(jìn)行實(shí)操演練。

第三節(jié)實(shí)操案例：新品上架的首焦輪播區(qū)設(shè)計(jì)

掌握其設(shè)計(jì)理念、技術(shù)要點(diǎn)，并能夠進(jìn)行實(shí)操演練。

第四節(jié)綜合實(shí)訓(xùn)

以提供的圖片為素材，為某男裝店鋪設(shè)計(jì)“新品上架”的首焦輪播區(qū)。

通過(guò)本章的學(xué)習(xí)，我們了解了網(wǎng)店首焦輪播區(qū)的作用與設(shè)計(jì)思路，學(xué)會(huì)了

根據(jù)店鋪推廣內(nèi)容確認(rèn)首焦輪播區(qū)的風(fēng)格、布局、配色、文字和圖片和根據(jù)不

歸納與同的節(jié)日氛圍制作出合適的首焦輪播區(qū)。

提高首焦輪播區(qū)模塊占據(jù)的面積較大，也是整個(gè)網(wǎng)店首頁(yè)中最醒目、最具有視

覺(jué)沖擊力的部分。如果首焦輪播區(qū)做得非常吸引眼球，就會(huì)給網(wǎng)店帶來(lái)很多的

流量；如果首焦輪播區(qū)設(shè)計(jì)得很普通，就給網(wǎng)店的轉(zhuǎn)化率造成很大的影響。

第6章首頁(yè)設(shè)計(jì)——服飾店鋪

一、實(shí)操案例：清新女裝店鋪首頁(yè)設(shè)計(jì)

教學(xué)內(nèi)容二、實(shí)操案例：可愛(ài)童裝店鋪首頁(yè)設(shè)計(jì)

三、綜合實(shí)訓(xùn)

【知識(shí)目標(biāo)】

教學(xué)要求1．能夠根據(jù)服裝的類(lèi)型、色彩和消費(fèi)群體等來(lái)設(shè)計(jì)首頁(yè)的配色。

2．能夠通過(guò)合理的布局來(lái)突顯廣告商品，展示出服飾的特點(diǎn)。

17

《網(wǎng)店美工第2版》電子教案

3．能夠根據(jù)服飾的風(fēng)格與特點(diǎn)制作出獨(dú)具特色的店鋪首頁(yè)。

4．掌握服飾店鋪首頁(yè)設(shè)計(jì)中的各種技術(shù)要點(diǎn)和操作技巧。

【技能目標(biāo)】

1．能夠設(shè)計(jì)首頁(yè)的配色。

2．能夠突顯廣告商品，展示出服飾的特點(diǎn)。

3．能夠制作出獨(dú)具特色的店鋪首頁(yè)。

1．根據(jù)服裝的類(lèi)型、色彩和消費(fèi)群體等來(lái)設(shè)計(jì)首頁(yè)的配色。

教學(xué)重點(diǎn)2．根據(jù)服飾的風(fēng)格與特點(diǎn)制作出獨(dú)具特色的店鋪首頁(yè)。

3．服飾店鋪首頁(yè)設(shè)計(jì)中的各種技術(shù)要點(diǎn)和操作技巧。

教學(xué)難點(diǎn)根據(jù)服飾的風(fēng)格與特點(diǎn)制作出獨(dú)具特色的店鋪首頁(yè)。

教學(xué)方法講授法、案例法

課時(shí)數(shù)3課時(shí)

教學(xué)內(nèi)容

第一節(jié)實(shí)操案例：清新女裝店鋪首頁(yè)設(shè)計(jì)

掌握其設(shè)計(jì)理念、技術(shù)要點(diǎn)，并能夠進(jìn)行實(shí)操演練。

第二節(jié)實(shí)操案例：可愛(ài)童裝店鋪首頁(yè)設(shè)計(jì)

掌握其設(shè)計(jì)理念、技術(shù)要點(diǎn)，并能夠進(jìn)行實(shí)操演練。

第三節(jié)綜合實(shí)訓(xùn)

以女裝店鋪商品模特照片為素材，設(shè)計(jì)店鋪首頁(yè)。要求設(shè)計(jì)的首頁(yè)要能完美展示出店

鋪的主推商品以及店鋪促銷(xiāo)活動(dòng)信息，能夠清晰地反映商品的特色，頁(yè)面色彩簡(jiǎn)潔而統(tǒng)一，

突出夏季、自然等特征。

通過(guò)本章的學(xué)習(xí)，我們能夠根據(jù)服裝的類(lèi)型、色彩和消費(fèi)群體等來(lái)設(shè)計(jì)首

歸納與

頁(yè)的配色，能夠通過(guò)合理的布局來(lái)突顯廣告商品，展示出服飾的特點(diǎn)，根據(jù)服

提高

飾的風(fēng)格與特點(diǎn)制作出獨(dú)具特色的店鋪首頁(yè)，掌握了服飾店鋪首頁(yè)設(shè)計(jì)中的各

18

《網(wǎng)店美工第2版》電子教案

種技術(shù)要點(diǎn)和操作技巧。

網(wǎng)店首頁(yè)代表的是店鋪的整體形象，其裝修效果影響著買(mǎi)家對(duì)店鋪的第一

印象。本章主要以?xún)蓚€(gè)服飾店鋪的首頁(yè)設(shè)計(jì)案例為例，針對(duì)不同的人群，從不

同的設(shè)計(jì)角度出發(fā)，打造出風(fēng)格和布局都各具特色的裝修效果。

第7章首頁(yè)設(shè)計(jì)——箱包店鋪

一、實(shí)操案例：時(shí)尚拉桿箱店鋪首頁(yè)設(shè)計(jì)

教學(xué)內(nèi)容二、實(shí)操案例：女式箱包店鋪首頁(yè)設(shè)計(jì)

三、綜合實(shí)訓(xùn)

【知識(shí)目標(biāo)】

1．根據(jù)商品特點(diǎn)對(duì)店鋪首頁(yè)的設(shè)計(jì)元素和風(fēng)格進(jìn)行定位，突顯出廣告商品。

2．延長(zhǎng)買(mǎi)家在店鋪中的停留時(shí)間，提高成交率。

3．根據(jù)箱包的受眾群和外形特點(diǎn)，對(duì)店鋪首頁(yè)的色彩、布局等進(jìn)行定位。

教學(xué)要求4．掌握箱包店鋪首頁(yè)設(shè)計(jì)中的各種技術(shù)要點(diǎn)和操作技巧。

【技能目標(biāo)】

1．能夠根據(jù)商品特點(diǎn)對(duì)店鋪首頁(yè)的設(shè)計(jì)元素和風(fēng)格進(jìn)行定位。

2．能夠根據(jù)箱包的受眾群和外形特點(diǎn)，對(duì)店鋪首頁(yè)的色彩、布局等進(jìn)行定位。

3．能夠掌握箱包店鋪首頁(yè)設(shè)計(jì)中的各種技術(shù)要點(diǎn)和操作技巧。

1．能夠根據(jù)箱包的受眾群和外形特點(diǎn)，對(duì)店鋪首頁(yè)的色彩、布局等進(jìn)行定位。

教學(xué)重點(diǎn)

2．能夠掌握箱包店鋪首頁(yè)設(shè)計(jì)中的各種技術(shù)要點(diǎn)和操作技巧。

教學(xué)難點(diǎn)能夠根據(jù)箱包的受眾群和外形特點(diǎn)，對(duì)店鋪首頁(yè)的色彩、布局等進(jìn)行定位。

教學(xué)方法講授法、案例法

課時(shí)數(shù)3課時(shí)

教學(xué)內(nèi)容

19

《網(wǎng)店美工第2版》電子教案

第一節(jié)實(shí)操案例：時(shí)尚拉桿箱店鋪首頁(yè)設(shè)計(jì)

掌握其設(shè)計(jì)理念、技術(shù)要點(diǎn)，并能夠進(jìn)行實(shí)操演練。

第二節(jié)實(shí)操案例：女式箱包店鋪首頁(yè)設(shè)計(jì)

掌握其設(shè)計(jì)理念、技術(shù)要點(diǎn)，并能夠進(jìn)行實(shí)操演練。

第三節(jié)綜合實(shí)訓(xùn)

以拉杠箱包店鋪商品照片為素材，設(shè)計(jì)店鋪首頁(yè)，制作出店招、導(dǎo)航條、首焦輪播區(qū)

和廣告商品區(qū)，要求頁(yè)面效果高端大氣、精致簡(jiǎn)約。

通過(guò)本章的學(xué)習(xí)，我們能夠根據(jù)商品特點(diǎn)對(duì)店鋪首頁(yè)的設(shè)計(jì)元素和風(fēng)格進(jìn)

歸納與行定位，突顯出廣告商品，延長(zhǎng)買(mǎi)家在店鋪中的停留時(shí)間，提高成交率，根據(jù)

提高箱包的受眾群和外形特點(diǎn)，對(duì)店鋪首頁(yè)的色彩、布局等進(jìn)行定位，掌握了箱包

店鋪首頁(yè)設(shè)計(jì)中的各種技術(shù)要點(diǎn)和操作技巧。

第8章商品詳情頁(yè)的設(shè)計(jì)

一、商品詳情頁(yè)及其設(shè)計(jì)思路

二、實(shí)操案例：手表網(wǎng)店商品詳情頁(yè)設(shè)計(jì)

教學(xué)內(nèi)容三、實(shí)操案例：女鞋網(wǎng)店商品詳情頁(yè)設(shè)計(jì)

四、綜合實(shí)訓(xùn)

五、技能擴(kuò)展

【知識(shí)目標(biāo)】

1．了解商品詳情頁(yè)設(shè)計(jì)的重要性。

2．了解商品詳情頁(yè)的設(shè)計(jì)思路。

教學(xué)要求

3．能夠抓住不同商品的特點(diǎn)設(shè)計(jì)出別具一格的商品詳情頁(yè)。

【技能目標(biāo)】

能夠設(shè)計(jì)店鋪的商品詳情頁(yè)，要求能夠全面展示出商品的細(xì)節(jié)特點(diǎn)。

1．商品詳情頁(yè)設(shè)計(jì)的重要性和設(shè)計(jì)思路。

教學(xué)重點(diǎn)

2．能夠抓住不同商品的特點(diǎn)設(shè)計(jì)出別具一格的商品詳情頁(yè)。

20

《網(wǎng)店美工第2版》電子教案

1．了解商品詳情頁(yè)的設(shè)計(jì)思路。

教學(xué)難點(diǎn)

2．能夠抓住不同商品的特點(diǎn)設(shè)計(jì)出別具一格的商品詳情頁(yè)。

教學(xué)方法講授法、案例法

課時(shí)數(shù)5課時(shí)

教學(xué)內(nèi)容

第一節(jié)商品詳情頁(yè)及其設(shè)計(jì)思路

一、認(rèn)識(shí)商品詳情頁(yè)

商品詳情頁(yè)是所有店鋪營(yíng)銷(xiāo)的落地點(diǎn)。消費(fèi)者在通過(guò)搜索進(jìn)入店鋪后，首先進(jìn)入的就

是商品詳情頁(yè)，在所有頁(yè)面中有且僅有詳情頁(yè)承擔(dān)著下訂單購(gòu)買(mǎi)的職責(zé)。

二、商品詳情頁(yè)的設(shè)計(jì)思路

是否能讓買(mǎi)家下訂單，要看商品詳情頁(yè)面設(shè)計(jì)得是否具有足夠的吸引力，是否深入人

心。實(shí)拍商品照片是最基本的要求，這能讓買(mǎi)家明白這是商家的直銷(xiāo)商品，質(zhì)量是完全可

以信賴(lài)的。

對(duì)于單個(gè)商品頁(yè)面的設(shè)計(jì)，商品信息的編輯與設(shè)計(jì)尤為重要。再好的商品，如果沒(méi)有

精彩的文案與精致的設(shè)計(jì)，都無(wú)法打動(dòng)買(mǎi)家的心。商品圖像和商品信息通過(guò)精心的設(shè)計(jì)排

版，能使商品詳情頁(yè)面更加美觀，從而更具吸引力。

除了展示商品本身的外觀、性能等各種細(xì)節(jié)外，還可以讓買(mǎi)家在商品詳情頁(yè)中更加直

觀地查看店鋪內(nèi)的優(yōu)惠打折信息，如“包郵”“買(mǎi)一送一”“搭配促銷(xiāo)”等，如圖8-3所示。

適當(dāng)?shù)靥砑右恍└郊有畔⒖梢宰尩赇伜蜕唐返恼故靖诱鎸?shí)和完整，提升頁(yè)面轉(zhuǎn)化率。

在商品詳情頁(yè)中，為了讓買(mǎi)家真實(shí)地體驗(yàn)到商品的實(shí)際效果，通常需要設(shè)計(jì)“使用感

受”“尺碼標(biāo)示”和“商品細(xì)節(jié)”等內(nèi)容。由于對(duì)商品的不同描述需要在同一個(gè)頁(yè)面中展示，

所以在設(shè)計(jì)中要注意把握好頁(yè)面的整體風(fēng)格。在有必要的情況下，可以使用風(fēng)格一致的標(biāo)

題欄對(duì)每組信息進(jìn)行分類(lèi)顯示，讓買(mǎi)家能夠一目了然地瀏覽到自己所需要了解的信息。

商品的規(guī)格、顏色、尺寸、庫(kù)存等雖然很容易介紹清楚，但如果設(shè)計(jì)不好會(huì)顯得非常

死板。從一件商品的描述，可以看出整個(gè)店鋪的營(yíng)銷(xiāo)水平。對(duì)于商品的描述，第一部分寫(xiě)

什么，第二部分寫(xiě)什么，什么時(shí)候添加文字，什么時(shí)候進(jìn)行插圖，都是需要經(jīng)過(guò)設(shè)計(jì)者認(rèn)

真研究與分析的。

第二節(jié)實(shí)操案例：手表網(wǎng)店商品詳情頁(yè)設(shè)計(jì)

掌握其設(shè)計(jì)理念、技術(shù)要點(diǎn)，并能夠進(jìn)行實(shí)操演練。

第三節(jié)實(shí)操案例：女鞋網(wǎng)店商品詳情頁(yè)設(shè)計(jì)

掌握其設(shè)計(jì)理念、技術(shù)要點(diǎn)，并能夠進(jìn)行實(shí)操演練。

21

《網(wǎng)店美工第2版》電子教案

第四節(jié)綜合實(shí)訓(xùn)

以某店鋪家紡四件套照片為素材，設(shè)計(jì)店鋪商品詳情頁(yè)，要求完美地展示商品細(xì)節(jié)，

商品信息要精煉，能夠清晰地反映商品的特點(diǎn)，頁(yè)面設(shè)計(jì)與色彩搭配要突顯出清新、大氣

的感覺(jué)。

第五節(jié)技能擴(kuò)展

略。

通過(guò)本章的學(xué)習(xí)，我們了解商品詳情頁(yè)設(shè)計(jì)的重要性和商品詳情頁(yè)的設(shè)計(jì)

思路，能夠抓住不同商品的特點(diǎn)設(shè)計(jì)出別具一格的商品詳情頁(yè)。

歸納與

商品詳情頁(yè)是整個(gè)店鋪的亮點(diǎn)和聚焦點(diǎn)，沒(méi)有一個(gè)買(mǎi)家在網(wǎng)購(gòu)時(shí)不看商品

提高

詳情頁(yè)就直接下訂單購(gòu)買(mǎi)的。一個(gè)充滿(mǎn)設(shè)計(jì)感的商品詳情頁(yè)能夠刺激買(mǎi)家的消

費(fèi)欲望，促使其快速下訂單購(gòu)買(mǎi)，由此可見(jiàn)商品詳情頁(yè)設(shè)計(jì)的重要性與必要性。

第9章網(wǎng)店視頻的制作

一、實(shí)操案例：網(wǎng)店主圖視頻制作

教學(xué)內(nèi)容

二、互聯(lián)網(wǎng)活動(dòng)海報(bào)文案的寫(xiě)作

【知識(shí)目標(biāo)】

1．掌握視頻轉(zhuǎn)場(chǎng)效果的制作方法。

2．掌握添加標(biāo)題文字并設(shè)置動(dòng)畫(huà)效果的方法。

3．掌握添加背景音樂(lè)的方式，以及如何導(dǎo)出視頻。

4．掌握使用格式工廠轉(zhuǎn)換視頻文件的方法。

教學(xué)要求5．掌握制作覆疊動(dòng)畫(huà)效果的方法。

【技能目標(biāo)】

1．能夠掌握視頻轉(zhuǎn)場(chǎng)效果的制作方法。

2．能夠添加標(biāo)題文字并設(shè)置動(dòng)畫(huà)效果。

3．添加背景音樂(lè)的方式，并導(dǎo)出視頻。

4．制作覆疊動(dòng)畫(huà)效果。

22

《網(wǎng)店美工第2版》電子教案

1．制作視頻轉(zhuǎn)場(chǎng)效果。

2．添加標(biāo)題文字并設(shè)置動(dòng)畫(huà)效果。

教學(xué)重點(diǎn)

3．添加背景音樂(lè)的方式，并導(dǎo)出視頻。

4．制作覆疊動(dòng)畫(huà)效果。

1．制作視頻轉(zhuǎn)場(chǎng)效果。

教學(xué)難點(diǎn)

2．制作覆疊動(dòng)畫(huà)效果。

教學(xué)方法講授法、案例法

課時(shí)數(shù)2課時(shí)

教學(xué)內(nèi)容

第一節(jié)實(shí)操案例：網(wǎng)店主圖視頻制作

一、設(shè)置視頻項(xiàng)目屬性并導(dǎo)入素材

二、制作視頻轉(zhuǎn)場(chǎng)效果

三、添加標(biāo)題文字

四、添加背景音樂(lè)并導(dǎo)出視頻

五、按電商平臺(tái)要求轉(zhuǎn)換視頻文件

第二節(jié)實(shí)操案例：商品詳情頁(yè)廣告視頻制作

掌握其設(shè)計(jì)理念、技術(shù)要點(diǎn)，并能夠進(jìn)行實(shí)操演練。

通過(guò)本章的學(xué)習(xí)，我們掌握了視頻轉(zhuǎn)場(chǎng)效果的制作方法，添加標(biāo)題文字并

設(shè)置動(dòng)畫(huà)效果的方法，添加背景音樂(lè)的方式，如何導(dǎo)出視頻，使用格式工廠轉(zhuǎn)

歸納與換視頻文件的方法，制作覆疊動(dòng)畫(huà)效果的方法。

提高在目前大多數(shù)電商平臺(tái)的網(wǎng)店頁(yè)面中，視頻主要應(yīng)用于商品詳情頁(yè)的主圖

視頻和廣告視頻中，而從2017年開(kāi)始，淘寶的主圖視頻就從9秒放開(kāi)到60

秒了，網(wǎng)店視頻的重要性不言而喻。

第10章移動(dòng)端店鋪裝修美工設(shè)計(jì)

23

《網(wǎng)店美工第2版》電子教案

一、移動(dòng)端店鋪?lái)?yè)面結(jié)構(gòu)分析

教學(xué)內(nèi)容

二、移動(dòng)端店鋪裝修快速入門(mén)

【知識(shí)目標(biāo)】

1．了解移動(dòng)端店鋪?lái)?yè)面的框架結(jié)構(gòu)。

2．了解移動(dòng)端店鋪對(duì)圖片發(fā)布的尺寸要求。

教學(xué)要求3．掌握移動(dòng)端店鋪裝修設(shè)計(jì)的基本方法。

【技能目標(biāo)】

1．能夠了解移動(dòng)端店鋪?lái)?yè)面的框架結(jié)構(gòu)安排。

2．能夠設(shè)計(jì)移動(dòng)端店鋪。

1．掌握移動(dòng)端店鋪?lái)?yè)面的框架結(jié)構(gòu)。

教學(xué)重點(diǎn)

2．移動(dòng)端店鋪裝修設(shè)計(jì)的基本方法。

1．移動(dòng)端店鋪?lái)?yè)面的框架結(jié)構(gòu)。

教學(xué)難點(diǎn)

2．移動(dòng)端店鋪裝修設(shè)計(jì)的基本方法。

教學(xué)方法講授法、案例法

課時(shí)數(shù)2課時(shí)

教學(xué)內(nèi)容

第一節(jié)移動(dòng)端店鋪?lái)?yè)面結(jié)構(gòu)分析

一、移動(dòng)端店鋪?lái)?yè)面的框架結(jié)構(gòu)

移動(dòng)端店鋪和PC端店鋪一樣，也存在著頁(yè)面之間的跳轉(zhuǎn)以及頁(yè)面結(jié)構(gòu)層級(jí)關(guān)系的安排

與布置，而這里所說(shuō)的頁(yè)面不再是指店鋪的各級(jí)網(wǎng)頁(yè)頁(yè)面，而是指存在于淘寶App客戶(hù)端

中的店鋪各級(jí)界面。

二、移動(dòng)端店鋪圖片發(fā)布尺寸要求

手機(jī)淘寶對(duì)圖片的發(fā)布尺寸做出了非常明確的要求，具體如下：

店招規(guī)格尺寸為750像素×254像素；

在圖片上添加文字時(shí)，中文字號(hào)≥30；英文和阿拉伯?dāng)?shù)字字號(hào)≥20；

24

《網(wǎng)店美工第2版》電子教案

圖片高度≤960像素（建議高度不超過(guò)600像素）；支持JPG、GIF、PNG圖片格式；

首頁(yè)和詳情頁(yè)圖片寬度為480像素~620像素（建議不超608像素）。

第二節(jié)移動(dòng)端店鋪裝修快速入門(mén)

一、保持店鋪設(shè)計(jì)風(fēng)格的一致性

移動(dòng)端店鋪整體的裝修與設(shè)計(jì)要做到風(fēng)格一致、首尾呼應(yīng)，否則就不利于店鋪整體設(shè)

計(jì)風(fēng)格的塑造。不同于PC端店鋪，手機(jī)移動(dòng)端屬于狹窄視覺(jué)展示，如果不依據(jù)店鋪品牌基

調(diào)保持設(shè)計(jì)風(fēng)格的一致性，店鋪形象的不鮮明感就會(huì)帶來(lái)視覺(jué)的混亂體驗(yàn)，也無(wú)法讓消費(fèi)

者對(duì)店鋪形成視覺(jué)記憶。

二、采用簡(jiǎn)單且便于操作的設(shè)計(jì)方式

智能手機(jī)讓人們通過(guò)指尖便能輕松地與手機(jī)進(jìn)行親密的接觸與互動(dòng)，操控變得更加隨

心所欲，而這一特色也不免影響著依附于智能手機(jī)的移動(dòng)端店鋪裝修設(shè)計(jì)。

三、店鋪色彩的設(shè)計(jì)與選擇

由于手機(jī)屏幕的尺寸有限，所以移動(dòng)端店鋪的瀏覽面積也相對(duì)較小，消費(fèi)者的視覺(jué)也

會(huì)受到限制。這時(shí)，除了需要對(duì)文字進(jìn)行精簡(jiǎn)以外，在整體色彩上也要具有鮮明感。

四、合理控制店鋪圖片與信息的加載時(shí)間

大多數(shù)消費(fèi)者選擇在手機(jī)移動(dòng)端店鋪進(jìn)行網(wǎng)購(gòu)，是因?yàn)樗軒?lái)隨時(shí)隨地購(gòu)物的便捷

感，所以要合理控制店鋪圖片與信息的加載時(shí)間。

五、店鋪信息的精簡(jiǎn)化處理

由于移動(dòng)端店鋪受手機(jī)載體的限制，其顯示尺寸有限，店鋪信息的呈現(xiàn)也會(huì)受限，如

果信息量過(guò)多且不做取舍，就會(huì)導(dǎo)致信息無(wú)法清晰、明確地加載與顯示，消費(fèi)者很難快速

找到自己想要看到的信息，就很有可能會(huì)選擇離開(kāi)。因此，對(duì)店鋪信息進(jìn)行必要的精簡(jiǎn)化

處理是讓消費(fèi)者快速瀏覽與接收信息的關(guān)鍵。

六、保持店鋪常換常新

對(duì)于移動(dòng)端店鋪的裝修設(shè)計(jì)而言，要保持常換常新的狀態(tài)，不僅能夠滿(mǎn)足這部分消費(fèi)

者對(duì)新奇事物的追求，也不會(huì)讓店鋪看起來(lái)像是一個(gè)無(wú)人看管的空店。當(dāng)然，這一切也需

要建立在店鋪品牌設(shè)計(jì)風(fēng)格不變的基礎(chǔ)上。

通過(guò)本章的學(xué)習(xí)，我們了解了移動(dòng)端店鋪?lái)?yè)面的框架結(jié)構(gòu)，移動(dòng)端店鋪對(duì)

圖片發(fā)布的尺寸要求，掌握了移動(dòng)端店鋪裝修設(shè)計(jì)的基本方法。

移動(dòng)端店鋪可以看作是PC端店鋪的延續(xù)，在進(jìn)行裝修設(shè)計(jì)時(shí)要把握“用

歸納與戶(hù)體驗(yàn)”這一關(guān)鍵點(diǎn)。畢竟移動(dòng)端店鋪主要是依附于智能手機(jī)平臺(tái)的，而智能

提高手機(jī)又讓人與機(jī)器之間有了更親密的接觸與互動(dòng)，因此與手機(jī)移動(dòng)端中其他應(yīng)

用軟件或App一樣，在設(shè)計(jì)移動(dòng)端店鋪?lái)?yè)面時(shí)，要結(jié)合智能手機(jī)平臺(tái)的特色，

設(shè)計(jì)出更加注重交互體驗(yàn)與友好度的頁(yè)面，只有這樣才能博得消費(fèi)者的歡心，

從而提升轉(zhuǎn)化率。

25

《網(wǎng)店美工第2版》電子教案

第11章移動(dòng)端店鋪首頁(yè)與詳情頁(yè)裝修設(shè)計(jì)

一、移動(dòng)端店鋪首頁(yè)裝修設(shè)計(jì)

教學(xué)內(nèi)容

二、移動(dòng)端店鋪詳情頁(yè)裝修設(shè)計(jì)

【知識(shí)目標(biāo)】

1．掌握店招的裝修設(shè)計(jì)方法。

2．掌握輪播圖片的裝修設(shè)計(jì)方法。

3．掌握優(yōu)惠券的裝修設(shè)計(jì)方法。

4．掌握商品分類(lèi)導(dǎo)航及分類(lèi)展示的裝修設(shè)計(jì)方法。

教學(xué)要求5．了解店鋪詳情頁(yè)設(shè)計(jì)的FABE原則。

6．掌握手機(jī)淘寶店鋪詳情頁(yè)的設(shè)計(jì)方法。

【技能目標(biāo)】

1．能夠分析店鋪首頁(yè)設(shè)計(jì)的優(yōu)勢(shì)。

2．能夠舉例說(shuō)明FABE原則在移動(dòng)端店鋪詳情頁(yè)設(shè)計(jì)中的具體應(yīng)用。

3．能夠設(shè)計(jì)移動(dòng)端店鋪設(shè)計(jì)詳情頁(yè)。

1．店招的裝修設(shè)計(jì)方法。

2．輪播圖片的裝修設(shè)計(jì)方法。

3．優(yōu)惠券的裝修設(shè)計(jì)方法。

教學(xué)重點(diǎn)

4．商品分類(lèi)導(dǎo)航及分類(lèi)展示的裝修設(shè)計(jì)方法。

5．店鋪詳情頁(yè)設(shè)計(jì)的FABE原則。

6．手機(jī)淘寶店鋪詳情頁(yè)的設(shè)計(jì)方法。

1．優(yōu)惠券的裝修設(shè)計(jì)方法。

教學(xué)難點(diǎn)

2．商品分類(lèi)導(dǎo)航及分類(lèi)展示的裝修設(shè)計(jì)方法。