網(wǎng)店美工的基礎(chǔ)知識

項目1網(wǎng)店美工的基礎(chǔ)知識目錄任務(wù)1.1什么是網(wǎng)店美工任務(wù)1.2網(wǎng)店配色寶典任務(wù)1.3文字的應(yīng)用任務(wù)1.1什么是網(wǎng)店美工子目錄1.1.1走進網(wǎng)店裝修1.1.2合理布局讓產(chǎn)品更搶眼任務(wù)1.1什么是網(wǎng)店美工技能要求（1）理解網(wǎng)店裝修的定義及重要性。（2）掌握適合自己網(wǎng)店的網(wǎng)店裝修風(fēng)格的確定方法。（3）了解網(wǎng)店裝修中需要注意的問題。1.1.1走進網(wǎng)店裝修網(wǎng)店裝修主要完成網(wǎng)店頁面設(shè)計美化、網(wǎng)店促銷海報制作、把商品照片制作成寶貝描述中所需要的圖片、設(shè)計電子宣傳單等工作。1.了解網(wǎng)店裝修1.1.1走進網(wǎng)店裝修1.了解網(wǎng)店裝修

圖1-1

皮帶商品的原始照片圖1-2

還原皮帶的色彩圖1-3

寶貝主圖1.1.1走進網(wǎng)店裝修1.了解網(wǎng)店裝修圖1-4首圖設(shè)計示例從原始照片處理開始，通過素材之間的組合，結(jié)合當(dāng)前的活動主題，最終制作成網(wǎng)店裝修頁面的過程就是網(wǎng)店美工。1.1.1走進網(wǎng)店裝修1.了解網(wǎng)店裝修圖1-5網(wǎng)店首頁示例好的網(wǎng)店美工設(shè)計可以給顧客帶來視覺上的愉悅、心靈上的震撼，讓人過目不忘、流連忘返，有助于提高成交轉(zhuǎn)化率。1.1.1走進網(wǎng)店裝修優(yōu)秀的網(wǎng)店美工設(shè)計應(yīng)將主次分清楚，將每個細節(jié)都做到極致，這樣才有更大的機會獲得顧客的點擊。合理的布局和精心的設(shè)計，不僅能帶來新顧客，還能留住老顧客，最終提高成交轉(zhuǎn)化率，即提高銷量。1.了解網(wǎng)店裝修1.1.1走進網(wǎng)店裝修影響網(wǎng)店成交的因素有很多，如決定性因素有首頁裝修、寶貝主圖、詳情頁描述、描述可信度、銷售量、服務(wù)保障、質(zhì)量保證、買家評價、旺旺客服等。而這些因素中的大部分都是需要依靠網(wǎng)店裝修來完成的。2.網(wǎng)店裝修的重要性1.1.1走進網(wǎng)店裝修圖1-6所示的服飾由于沒有經(jīng)過后期的潤色，因而顯得毫無生氣，很難讓顧客產(chǎn)生興趣。而圖1-7所示的服飾由于經(jīng)過了后期的色調(diào)調(diào)整，而顯得明亮、鮮艷，具有品質(zhì)感。2.網(wǎng)店裝修的重要性

圖1-6沒有經(jīng)過后期的潤色圖1-7經(jīng)過后期的色調(diào)調(diào)整1.1.1走進網(wǎng)店裝修如圖1-8所示，雖然網(wǎng)店銷售產(chǎn)品的種類很多，但是整個頁面都沒有對寶貝進行分類，消費者很難找到自己想要的產(chǎn)品；而如圖1-9所示，每種商品都陳列安排得很恰當(dāng)，增加了顧客的停留時間。由此可以，漂亮恰當(dāng)?shù)木W(wǎng)店裝修，會給顧客帶來美感，顧客瀏覽網(wǎng)頁時不易疲勞，自然愿意長時間地瀏覽。并且如圖1-9所示，商品在恰當(dāng)裝飾品的襯托下，會顯得更加誘人，讓人會有購買的欲望，有利于促進成交。2.網(wǎng)店裝修的重要性

1.1.1走進網(wǎng)店裝修

圖1-8效果不好的頁面圖1-9效果好的頁面

1.1.1走進網(wǎng)店裝修圖1-10和圖1-11為兩個相似商品的寶貝詳情頁面，通過比較可以看出，圖1-10一開始就是大段的文字，雖然對商品進行了詳細的說明，但是沒有針對寶貝的細節(jié)進行有目的的講解，讓顧客失去了繼續(xù)閱讀的興趣。而圖1-11先展示了商品全景，再將寶貝的重要細節(jié)進行放大，充分展現(xiàn)出寶貝的特點。由此可以看出，只有經(jīng)過深思熟慮、精細策劃的網(wǎng)店，才能提高顧客的興趣，從而提高網(wǎng)店的轉(zhuǎn)化率。3.網(wǎng)店裝修與轉(zhuǎn)化率的關(guān)系

1.1.1走進網(wǎng)店裝修圖1-10沒有瀏覽興趣的頁面

1.1.1走進網(wǎng)店裝修圖1-11有瀏覽興趣的頁面

1.1.1走進網(wǎng)店裝修大多數(shù)的設(shè)計師裝修網(wǎng)店時會按照品牌上的美感來裝修。然而，這種網(wǎng)店其實是企業(yè)用來展示品牌的，真正要達到銷售轉(zhuǎn)化是很難的。因為顧客網(wǎng)購的目的很明確，之所以進店，一定是對產(chǎn)品感興趣，所以在裝修網(wǎng)店時切記不可喧賓奪主，過多地花時間在裝修設(shè)計上。做好網(wǎng)店裝修，可為網(wǎng)店帶來很多好處，如引入流量，提高銷售量；為買家提供方便，使其能快速找到所需的產(chǎn)品；能夠提高認知度，建立品牌和網(wǎng)店形象；讓賣家自身對店內(nèi)銷售有一個清晰的了解，最終提升網(wǎng)店轉(zhuǎn)化率。3.網(wǎng)店裝修與轉(zhuǎn)化率的關(guān)系

關(guān)系1.1.1走進網(wǎng)店裝修下面以網(wǎng)店首頁裝修為例（見圖1-12），介紹網(wǎng)店裝修風(fēng)格布局的方法。4.如何確定網(wǎng)店裝修的風(fēng)格

（a）網(wǎng)店首頁裝修實例1圖1-12

網(wǎng)店示例1.1.1走進網(wǎng)店裝修4.如何確定網(wǎng)店裝修的風(fēng)格

（b）網(wǎng)店首頁裝修實例2圖1-12

網(wǎng)店示例1.1.1走進網(wǎng)店裝修4.如何確定網(wǎng)店裝修的風(fēng)格

（c）網(wǎng)店首頁裝修實例3圖1-12

網(wǎng)店示例1.1.1走進網(wǎng)店裝修4.如何確定網(wǎng)店裝修的風(fēng)格

12345網(wǎng)店設(shè)計風(fēng)格要與主營產(chǎn)品相符風(fēng)格要統(tǒng)一主題突出，切忌花里胡哨合理使用色彩加載背景音樂的利弊1.1.1走進網(wǎng)店裝修5.網(wǎng)店裝修中需要注意的問題1）網(wǎng)店定位網(wǎng)店定位很重要，就像網(wǎng)店的一個招牌，一眼就能讓消費者了解該店是賣什么的。在網(wǎng)店定位中，風(fēng)格定位尤為重要，風(fēng)格定位要結(jié)合網(wǎng)店產(chǎn)品所對應(yīng)的目標(biāo)人群而定，基本分為清爽型、商業(yè)型、耍酷型、可愛型四種。對于那些無法準(zhǔn)確把握目標(biāo)客戶和產(chǎn)品所針對的類型，建議以清爽型為主，把握好整體色調(diào)的搭配，給人一種間接明了、賞心悅目的感覺。1.1.1走進網(wǎng)店裝修5.網(wǎng)店裝修中需要注意的問題2）網(wǎng)店名稱過短的網(wǎng)店名稱造成的結(jié)果就是雷同的太多，沒有特色。例如，做代購起一個名字叫海外代購，搜索關(guān)鍵詞“海外代購”，結(jié)果會出來很多以“海外代購”為名稱的網(wǎng)店，顧客很難進行有針對性的查找。1.1.1走進網(wǎng)店裝修5.網(wǎng)店裝修中需要注意的問題2）網(wǎng)店名稱建議確定網(wǎng)店名稱時要突出本店個性，突出特色品牌和產(chǎn)品，最好還要跟自己的商品有關(guān)，讓人一看就懂，并且了解你網(wǎng)店經(jīng)營的范圍。例如，淘寶網(wǎng)給掌柜30個字的編輯限度是非常重要的，要充分利用好30個字，因為很多人還會利用搜索網(wǎng)店名稱的這個方法來對寶貝進行搜索。1.1.1走進網(wǎng)店裝修5.網(wǎng)店裝修中需要注意的問題3）寶貝分類雖然產(chǎn)品類目采用圖片的方式來分類，更能體現(xiàn)出網(wǎng)店的個性，但是作為新手賣家，為了獲得更多的瀏覽量和人氣，建議不要用圖片進行分類，而是采用關(guān)鍵詞對寶貝進行分類。1.1.1走進網(wǎng)店裝修5.網(wǎng)店裝修中需要注意的問題4）商品描述模板賣家的網(wǎng)店裝修模板多為專業(yè)設(shè)計，大量的圖片不僅會占用大量的空間，而且會大大降低網(wǎng)頁的加載速度。網(wǎng)店描述模板太過華麗，會弱化顧客對商品描述的關(guān)注。因此，建議商品描述模板少用圖片，多用代碼；不要過于花哨，要突出對寶貝的描述。1.1.1走進網(wǎng)店裝修5.網(wǎng)店裝修中需要注意的問題5）網(wǎng)店顏色網(wǎng)店的顏色不要太豐富，要統(tǒng)一，要有一個固定的配色方案，就像百度一樣，只用了三種顏色——紅、藍、黑。對顏色進行規(guī)范，可減少視覺垃圾，可讓內(nèi)容更具條理性。1.1.1走進網(wǎng)店裝修5.網(wǎng)店裝修中需要注意的問題6）背景音樂為了讓顧客選購商品時心情更舒暢，打開網(wǎng)頁更快，建議不要加載背景音樂。如果實在想加，也要注意優(yōu)化音樂大小，設(shè)置控制開關(guān)。1.1.2合理布局讓產(chǎn)品更搶眼1.分析首頁布局此處添加您的標(biāo)題網(wǎng)店LOREMIPSUMDOLOR我們以網(wǎng)店是旺鋪專業(yè)版，在其自定義模塊上進行裝修。1.1.2合理布局讓產(chǎn)品更搶眼1.分析首頁布局一個正常營業(yè)的網(wǎng)店首頁主要由店招、導(dǎo)航條、海報、廣告區(qū)、客服旺旺、產(chǎn)品展示、網(wǎng)店頁尾、網(wǎng)店背景等部分組成，如圖1-13所示。首頁布局示例如圖1-14和圖1-15所示。網(wǎng)店首頁及寶貝詳情頁應(yīng)盡可能將活動和商品的信息最大程度地傳達給顧客。網(wǎng)店首頁首先要找到與產(chǎn)品協(xié)調(diào)的色調(diào)，給人一種良好的印象，其次整個首頁的排版也很重要，如果弄得不好，反而毀了整個頁面布局。1.1.2合理布局讓產(chǎn)品更搶眼圖1-13首頁布局1.1.2合理布局讓產(chǎn)品更搶眼圖1-14首頁布局示例11.1.2合理布局讓產(chǎn)品更搶眼圖1-15首頁布局示例21.1.2合理布局讓產(chǎn)品更搶眼1.分析首頁布局下面以一個化妝品類目的網(wǎng)店（見圖1-16）為例，說明各種裝修頁面中構(gòu)成布局的組成要素。1234圖像文字背景留白1.1.2合理布局讓產(chǎn)品更搶眼圖1-16化妝品類目的網(wǎng)店1.1.2合理布局讓產(chǎn)品更搶眼1.分析首頁布局一個好的淘寶網(wǎng)店首頁，是能夠吸引買家停留駐足的頁面，在把握整體頁面布局時，首先確定畫面中的幾大模塊，如海報、促銷區(qū)、商品分類等，然后確定它們的位置，最后對每個模塊進行細節(jié)設(shè)計。一個合理的布局能夠給買家很好的購物體驗，在視覺和操作上都能夠給買家留下良好的印象。1.1.2合理布局讓產(chǎn)品更搶眼2.常見的寶貝詳情頁布局下面介紹幾種基本的、較為常用的寶貝詳情頁布局。1）中間對齊模式的頁面布局中間對齊模式的頁面布局是詳情頁設(shè)計中用得最廣泛的一種布局方式。如圖1-17所示，頁面結(jié)構(gòu)清晰、主次分明，是初學(xué)者最容易上手的布局方法，更貼近消費者的閱讀習(xí)慣，同時能夠集中消費者的視線。中間對齊模式的頁面布局的缺點是規(guī)矩呆板，如果不注意細部色彩，很容易讓人“看之無味”。1.1.2合理布局讓產(chǎn)品更搶眼圖1-17中間對齊模式的頁面布局1.1.2合理布局讓產(chǎn)品更搶眼2.常見的寶貝詳情頁布局2）Z形模式的頁面布局Z形模式的頁面布局使得顧客的視線是沿曲線前進的，視線形成Z形模式。如圖1-18所示，Z形模式擁有更佳的敘事效果和靈活性。它層次清晰、路徑明確，很受設(shè)計師的歡迎；但是一個太生動的背景會分散顧客的視線。因此，在Z形模式中，背景應(yīng)力求簡潔、平淡。1.1.2合理布局讓產(chǎn)品更搶眼圖1-18

Z形模式的頁面布局1.1.2合理布局讓產(chǎn)品更搶眼2.常見的寶貝詳情頁布局3）左對齊模式的頁面布局要善于抓住顧客的興趣，每行只應(yīng)傳達一個要點（用圖片顯示），然后將要點分散論述（用文字），左對齊模式的頁面布局適合用于表現(xiàn)有順序之分的內(nèi)容，如商品的使用說明（見圖1-19）、商品的制作過程等。這些連貫的主題采用左對齊模式的頁面布局來表現(xiàn)，會獲得不錯的效果。1.1.2合理布局讓產(chǎn)品更搶眼圖1-19左對齊模式的頁面布局1.1.2合理布局讓產(chǎn)品更搶眼2.常見的寶貝詳情頁布局4）對稱型的頁面布局對稱是一種美，生活中的許多事物都是對稱的。但過度的對稱會給人一種呆板、死氣沉沉的感覺，因此要適當(dāng)?shù)卮蚱茖ΨQ，制造一點變化。在頁面布局時，即使兩邊的組成元素不是按照完全相同的尺寸和排列方式來布置，但只要兩邊的空間寬度和重量感相同，同樣可以體現(xiàn)出對稱的布局效果。因此，只要頁面左右兩部分協(xié)調(diào)搭配，網(wǎng)頁就會有非常好的視覺效果，具有沖擊力，如圖1-20和圖1-21所示。1.1.2合理布局讓產(chǎn)品更搶眼圖1-20對稱型的頁面布局11.1.2合理布局讓產(chǎn)品更搶眼圖1-21對稱型的頁面布局21.1.2合理布局讓產(chǎn)品更搶眼2.常見的寶貝詳情頁布局5）棋盤式的頁面布局典型的棋盤式頁面布局與圍棋棋盤一樣，是四四方方的布局，將很多的產(chǎn)品圖片一次性地呈現(xiàn)給顧客，如圖1-22和圖1-23所示。這種布局方法在設(shè)計關(guān)聯(lián)營銷時最常見，有時也適合用在展示商品的各個細節(jié)部分上。顧客可以將眾多的商品圖片集中進行比較，在視覺上達到統(tǒng)一和協(xié)調(diào)。1.1.2合理布局讓產(chǎn)品更搶眼圖1-22棋盤式的頁面布局11.1.2合理布局讓產(chǎn)品更搶眼圖1-23棋盤式的頁面布局21.1.2合理布局讓產(chǎn)品更搶眼2.常見的寶貝詳情頁布局6）口字形模式的頁面布局口字形模式的頁面布局類似于一個方框，就是頁面的左邊和右邊一般是小圖，中間是大圖的主要內(nèi)容，即鼠標(biāo)移動到哪個小圖上，中間就呈現(xiàn)出該小圖產(chǎn)品的放大圖片，如圖1-24所示。這種布局的優(yōu)點是充分利用版面，信息量大；缺點是頁面擁擠，不夠靈活。1.1.2合理布局讓產(chǎn)品更搶眼圖1-24口字形模式的頁面布局1.1.2合理布局讓產(chǎn)品更搶眼2.常見的寶貝詳情頁布局總之，寶貝詳情頁在重構(gòu)寶貝的過程中只能通過文字和圖片來表達。排列和布置好文字及圖片，是營造良好的客戶體驗，把瀏覽者轉(zhuǎn)化為消費者的重要前提。由于寶貝的性質(zhì)不同，需要裝修的風(fēng)格、內(nèi)容也就不同，要想給寶貝詳情頁一個合理、有效的布局，就需要確定商品的特點和意圖表現(xiàn)的氛圍，并結(jié)合上述的一些頁面布局方式進行設(shè)計。任務(wù)1.2網(wǎng)店配色寶典技能要求（1）理解色彩的基本分類及屬性。（2）學(xué)會色彩的搭配。（3）學(xué)會不同風(fēng)格的產(chǎn)品獲得滿意配色的方法。任務(wù)1.2網(wǎng)店配色寶典子目錄1.2.1色彩的基礎(chǔ)知識1.2.2獲取滿意的配色方案1.2.1色彩的基礎(chǔ)知識1.色彩的基本分類我們常用的電腦顯示器等器材所顯示的色彩就是色光，而RGB就是色光的三原色：B表示藍色R表示紅色G表示綠色1.2.1色彩的基礎(chǔ)知識2.色彩的屬性色相即各類色彩的相貌稱謂，是色彩的首要特征，是區(qū)別各種不同色彩的最準(zhǔn)確的標(biāo)準(zhǔn)。事實上任何黑、白、灰以外的顏色都有色相的屬性。色彩可通過色相呈現(xiàn)出其本質(zhì)的面貌。1）色相1.2.1色彩的基礎(chǔ)知識2.色彩的屬性

如圖1-25（a）所示，最初的基本色相為紅、橙、黃、綠、藍、紫。在各色中間加插一兩個中間色，其頭尾色相按光譜順序為紅、紅橙、橙、黃橙、黃、黃綠、綠、綠藍、藍綠、藍、藍紫、紫、紅紫，可制出12種基本色相，如圖1-25（b）所示。若在各主要色相中再取中間色，就可做成24色相環(huán)。1）色相1.2.1色彩的基礎(chǔ)知識

(a)6色相環(huán)(b)12色相環(huán)1.2.1色彩的基礎(chǔ)知識下面通過Photoshop軟件操作來了解通過調(diào)整圖片的色相，可使其顏色發(fā)生改變。如圖1-26和圖1-27所示，通過調(diào)整樹葉的色相，使綠色的樹葉變成紅色的樹葉。圖1-26色相調(diào)整前1.2.1色彩的基礎(chǔ)知識下面通過Photoshop軟件操作來了解通過調(diào)整圖片的色相，可使其顏色發(fā)生改變。如圖1-26和圖1-27所示，通過調(diào)整樹葉的色相，使綠色的樹葉變成紅色的樹葉。圖1-27色相調(diào)整后1.2.1色彩的基礎(chǔ)知識2.色彩的屬性明度是指色彩的亮度，即顏色有深淺、明暗的變化，所有色彩都有自己的光亮。暗色被稱為低明度，亮色被稱為高明度。對于有彩色的明度差別包括兩個方面，一是指某一色相在混入黑或白色后，產(chǎn)生的深淺變化；二是指有彩色不同色相間存在的明度差別。2）明度1.2.1色彩的基礎(chǔ)知識圖1-28明度變化1.2.1色彩的基礎(chǔ)知識為了更好地理解明度，下面通過Photoshop軟件操作來學(xué)習(xí)。如圖1-29和圖1-30所示，調(diào)整樹葉的明度后，樹葉的顏色變得更深了。圖1-29未調(diào)整明度的樹葉1.2.1色彩的基礎(chǔ)知識為了更好地理解明度，下面通過Photoshop軟件操作來學(xué)習(xí)。如圖1-29和圖1-30所示，調(diào)整樹葉的明度后，樹葉的顏色變得更深了。圖1-30調(diào)整明度后的樹葉1.2.1色彩的基礎(chǔ)知識2.色彩的屬性飽和度也稱為純度或彩度、鮮艷度，是指色彩的純凈程度，也就是色相感覺明確或含糊、鮮艷或混濁的程度。彩度常用高低來表述，彩度越高，色越純，越鮮艷；彩度越低，色越澀，越混濁。3）飽和度1.2.1色彩的基礎(chǔ)知識為了更好地理解飽和度，下面通過Photoshop軟件操作來學(xué)習(xí)。如圖1-31和圖1-32所示，調(diào)整化妝品的飽和度后，商品由原來的暗淡無光變得非常鮮艷誘人。圖1-31未調(diào)整飽和度的化妝品1.2.1色彩的基礎(chǔ)知識為了更好地理解飽和度，下面通過Photoshop軟件操作來學(xué)習(xí)。如圖1-31和圖1-32所示，調(diào)整化妝品的飽和度后，商品由原來的暗淡無光變得非常鮮艷誘人。圖1-32調(diào)整飽和度后的化妝品1.2.1色彩的基礎(chǔ)知識對于非彩色，沒有色相飽和度的特征，只有明度的特征。如圖1-33、圖1-34和圖1-35所示，調(diào)整色相飽和度，圖片不會有任何變化，只有調(diào)整明度才會有變化。圖1-33色相變化1.2.1色彩的基礎(chǔ)知識對于非彩色，沒有色相飽和度的特征，只有明度的特征。如圖1-33、圖1-34和圖1-35所示，調(diào)整色相飽和度，圖片不會有任何變化，只有調(diào)整明度才會有變化。圖1-34飽和度變化1.2.1色彩的基礎(chǔ)知識對于非彩色，沒有色相飽和度的特征，只有明度的特征。如圖1-33、圖1-34和圖1-35所示，調(diào)整色相飽和度，圖片不會有任何變化，只有調(diào)整明度才會有變化。圖1-35明度變化1.2.1色彩的基礎(chǔ)知識3.色彩的心理感覺1）色彩有冷暖感色彩的冷暖感被稱為色性。紅、黃、橙等色相給人的視覺刺激性強，使人聯(lián)想到太陽、火光，感到溫暖，所以稱為暖色。青色和藍色使人聯(lián)想到天空、河流、陰天，感到寒冷，所以稱為冷色。1.2.1色彩的基礎(chǔ)知識3.色彩的心理感覺（2）色彩有興奮感和沉靜感。凡明度高、純度高的色調(diào)，又屬偏紅、橙的暖色系，均有興奮感。凡明度低、純度低的色調(diào)，又屬偏藍、青的冷色系，具有沉靜感。1.2.1色彩的基礎(chǔ)知識3.色彩的心理感覺（3）色彩有膨脹感和收縮感。同一面積、同一背景的物體，由于色彩的不同，給人造成大小不同的視覺效果。凡色彩明度高的物體，看起來面積大些，有膨脹的感覺；凡色彩明度低的物體看起來面積小些，有收縮的感覺。1.2.1色彩的基礎(chǔ)知識3.色彩的心理感覺（4）色彩有前進感和后退感。暖色和明色給人以前進的感覺，冷色和暗色給人以后退的感覺。（5）色彩有輕重感。高明度的色彩給人以輕的感覺，低明度的色彩給人以重的感覺。1.2.1色彩的基礎(chǔ)知識4.色彩的意義紅色是最強有力的色彩，能引起肌肉的興奮、熱烈、沖動。（1）紅色橙色較溫和，是一種很活潑、輝煌的色彩，是一種富足的、快樂的色彩；稍加黑色則顯穩(wěn)重；與藍色對比時較生動。（2）橙色1.2.1色彩的基礎(chǔ)知識4.色彩的意義黃色亮度最高，尤其燦爛、輝煌，象征著智慧之光，象征著權(quán)力、驕傲；經(jīng)不起白色的沖淡；當(dāng)用黑、紫、深藍反襯時，能得到加強；淡粉色能使之變得柔和。（3）黃色綠色具有中性的特點。綠色是和平色，偏向自然美，寧靜、生機勃勃。綠色是寬容的色彩，可襯托多種顏色而達到和諧。（4）綠色1.2.1色彩的基礎(chǔ)知識4.色彩的意義藍色代表永恒、博大，讓人有遙遠感。（5）藍色大面積紫色會讓人有恐怖感，紫紅尤其明顯。暗紫有災(zāi)難感。淡紫則是一種優(yōu)美的活潑色。紫與黃共存時，消極性更加顯著。（6）紫色1.2.1色彩的基礎(chǔ)知識4.色彩的意義黑與白既對立又有共性，是色彩最后的抽象，能夠用來表達富有哲理性的東西。其中，黑色代表空、無、永恒的沉默；白色代表虛無，有無盡的可能性。黑色與白色都是通過對方的存在來顯示自己的力量的。（7）黑與白1.2.1色彩的基礎(chǔ)知識4.色彩的意義灰色是色彩中最被動的顏色，受有彩色影響極大，靠鄰近的色彩獲得自己的生命；近冷則暖，近暖則冷；最有平靜感（中性），是視覺中最安靜的色彩；有很強的調(diào)和對比的作用。（8）灰色1.2.1色彩的基礎(chǔ)知識5.色彩的搭配色彩像音樂一樣，是一種感覺。音樂需要依賴音階來保持秩序，而形成一個體系。同樣的，色彩的三屬性如同音樂中的音階一般，可以用來維持繁多色彩間的秩序，形成一個容易理解又方便使用的色彩體系，所有的色可排成一個環(huán)形。這種色相的環(huán)狀配列，叫做色相環(huán)。1.2.1色彩的基礎(chǔ)知識5.色彩的搭配眾所周知，不同的顏色會給人不同的視覺感受。網(wǎng)店裝修設(shè)計在配色時有一定的技巧和規(guī)則，只有掌握了這些技巧和規(guī)則，才能把自己網(wǎng)店的色彩做到讓顧客看著舒服，又能突出想要表達的東西。1.2.1色彩的基礎(chǔ)知識1）用一種彩色首先選出一種顏色作為主色調(diào)，然后調(diào)整透明度或者飽和度，說得通俗些就是將色彩加深或減淡，產(chǎn)生新的色彩用于網(wǎng)頁，這樣的頁面看起來色彩統(tǒng)一，有層次感。如圖1-36所示，該頁面選擇了藍色作為主色調(diào)，在頁面中配出深淺不一的藍色，這種配色方法在所有的設(shè)計中都會用到。1.2.1色彩的基礎(chǔ)知識1）用一種彩色圖1-36用一種彩色1.2.1色彩的基礎(chǔ)知識1）用一種彩色圖1-37拾色器下面說明用Photoshop軟件配出同一種色彩的方法。如圖1-37所示，拾色器中的H表示色相，S表示飽和度，B表示亮度。其中色相就像每一張色卡的“頁碼”，從0°到360°。飽和度就是這張色卡橫向的顏色變化趨勢，越往左，就越跟它差180°的顏色（補色）混合而顏色變淡。1.2.1色彩的基礎(chǔ)知識1）用一種彩色圖1-38亮度變化配出同一種色彩的方法是，在保證色相和飽和度不變的條件下調(diào)整亮度。如圖1-38所示，這四個色塊的色調(diào)和飽和度是一樣的，只是亮度在變化。1.2.1色彩的基礎(chǔ)知識1）用一種彩色同一種顏色，不同深淺度的漸變，看起來有質(zhì)感，如圖1-39（a）所示。

（a）（b）圖1-39漸變色注意：漸變色一般不用兩個色系的顏色做漸變，如紅色到藍色、黃色到藍色等。因為不同顏色的漸變，看起來不協(xié)調(diào)、無質(zhì)感，而且很刺眼，如圖1-39（b）所示。1.2.1色彩的基礎(chǔ)知識2）選第二種色彩第二種色彩，是基于第一個主色調(diào)的對比色。什么是對比色？舉個例子，如果我們在白紙上寫白色的字，是看不到的；但如果寫紅色的字，就可以看到。這里，白色和紅色就是對比色。1.2.1色彩的基礎(chǔ)知識2）選第二種色彩圖1-40對比色不明顯如果在黃色底上寫白色的字，在暗紅色色底上寫黑色的字，因為這些顏色都不是對比色，所以離屏幕遠了根本看不清楚，如圖1-40所示。1.2.1色彩的基礎(chǔ)知識2）選第二種色彩圖1-41對比色太刺眼，色調(diào)不統(tǒng)一網(wǎng)店如果沒有對比色，那么這個網(wǎng)店看起來就會很單調(diào)，而且沒有重點。但如果在選擇對比色時只憑感覺，就會使設(shè)計出來的對比色不夠清晰或者太刺眼，色調(diào)不統(tǒng)一，如圖1-41所示。1.2.1色彩的基礎(chǔ)知識2）選第二種色彩圖1-42對比色突出，整體協(xié)調(diào)如圖1-42所示，對比色突出，整體協(xié)調(diào)。

1.2.1色彩的基礎(chǔ)知識2）選第二種色彩圖1-43找到某個底色的對比色下面說明用Photoshop軟件找到某個底色的對比色的方法。

如圖1-43所示，左上角的對比色顏色與背景色只是改變了亮度，其余三個圖形的對比色亮度值保持不變，色相和飽和度可以任意調(diào)節(jié)，從這四幅圖的對比可以看出，大多數(shù)情況下，對比色與背景色的色調(diào)、飽和度統(tǒng)一搭配，可使色彩看起來更穩(wěn)重，色調(diào)更統(tǒng)一，而且層次分明。1.2.1色彩的基礎(chǔ)知識3）同一色系圖1-47同一色系簡單地說，同一色系就是同一種感覺的色彩，如淺粉色、淺藍色、淺黃色或者暗紅色、暗黃色等。在實際應(yīng)用中，同一色系的配色要領(lǐng)是，在保證亮度不變的前提下任意調(diào)節(jié)色相，就可以調(diào)出同一種感覺的色彩。如圖1-47所示。

1.2.2獲取滿意的配色方案1.了解配色方案所謂配色方案，簡單地說就是如何將不同的顏色搭配到一起，起到一種和諧的或者有視覺沖擊力的效果。配色方案主要有以下兩種方式。（1）通過色彩的色相、明度和純度的對比來控制視覺刺激，達到配色的效果。（2）通過心理層面感觀傳達、間接性地改變顏色，從而達到配色的效果。1.2.2獲取滿意的配色方案1.了解配色方案如圖1-48所示，黃色和橙色就是鄰近色的搭配。圖1-48鄰近色的搭配

1.2.2獲取滿意的配色方案1.了解配色方案如圖1-49所示，背景色為產(chǎn)品顏色的明度和純度變化，字體采用亮色與背景暗色形成對比。圖1-49對比色的使用1.2.2獲取滿意的配色方案1.了解配色方案如圖1-50、圖1-51所示，從標(biāo)題的配色能感覺到清爽，符合夏天的感覺，我們會想到夏日、藍天、沙灘、大海、冰塊。圖1-50標(biāo)題的配色11.2.2獲取滿意的配色方案1.了解配色方案如圖1-50、圖1-51所示，從標(biāo)題的配色能感覺到清爽，符合夏天的感覺，我們會想到夏日、藍天、沙灘、大海、冰塊。圖1-51標(biāo)題的配色21.2.2獲取滿意的配色方案2.色彩的基本搭配方法對于美工設(shè)計師來講，學(xué)配色必須了解配色比例和色彩的關(guān)系，這樣才能設(shè)計出優(yōu)秀的作品。如圖1-52所示，日本的設(shè)計師提出過一個配色黃金比例，即70∶25∶5，其中70%為大面積使用的主色，25%為輔助色，5%為點綴色。主色的確立會影響整個畫面的格調(diào)。圖1-52配色黃金比例1.2.2獲取滿意的配色方案2.色彩的基本搭配方法一般情況下，建議畫面色彩不超過3種，3種是指的3種色相，比如深藍和天藍就是一種色相。一般來說，顏色用得越少越好，顏色越少畫面越簡潔，作品會顯得更加成熟。顏色越少，越容易控制畫面，除非是特殊情況，比如一些節(jié)日類的海報等，要求畫面有一種熱鬧、活力的感覺。多些顏色可使畫面顯得很活躍，但是顏色越多越要嚴格按照配色比例來進行分配，不然會使畫面非常混亂，難以控制。1.2.2獲取滿意的配色方案3.配色方案的制作過于花哨的頁面只能造成訪客的混亂。所以，網(wǎng)店的整體顏色一定要給人統(tǒng)一諧調(diào)的感覺。當(dāng)然，統(tǒng)一的外觀并不是說只能用一種顏色，而是指主色調(diào)（在頁面中占據(jù)的面積最大且具有主導(dǎo)作用的色彩）只能有一種，在此基礎(chǔ)上再搭配一些其他顏色。如圖1-53所示，主色調(diào)是紅色，文字用白色或黑色點綴其間，使得整個頁面既統(tǒng)一又不古板。1）統(tǒng)一的外觀1.2.2獲取滿意的配色方案3.配色方案的制作統(tǒng)一的外觀不僅僅針對某一個頁面，而是對整個網(wǎng)店的所有頁面都適用；否則風(fēng)格差異太大，當(dāng)顧客從一個頁面進入另一個頁面時，很容易產(chǎn)生進入了不同網(wǎng)店的錯覺。當(dāng)然，除了色彩的統(tǒng)一，其他元素（如店招、導(dǎo)航條等）也應(yīng)統(tǒng)一。1）統(tǒng)一的外觀1.2.2獲取滿意的配色方案3.配色方案的制作圖1-53統(tǒng)一的外觀1.2.2獲取滿意的配色方案3.配色方案的制作（1）單一色彩頁面。選擇單一色彩，并不表示就毫無變化，可以通過調(diào)整透明度或飽和度，使單一色彩深淺有別。如圖1-54所示，主色調(diào)是藍色，店招、商品修飾圖形及部分文字采用了藍紫色、淺藍色和深藍色等，使得整個頁面看起來色彩統(tǒng)一、有層次感。2）統(tǒng)一色彩的搭配1.2.2獲取滿意的配色方案

圖1-54單一色彩頁面1.2.2獲取滿意的配色方案3.配色方案的制作（2）對比色頁面。先選定一種色彩，然后選擇它的對比色，這個對比色就是第二種顏色。一般來說，色彩的對比強，看起來就有誘惑力，能夠起到集中視線的作用。如圖1-55所示，采用了橙色和藍色的對比，屬于最強烈的色相對比，令人感受到一種極強烈的色彩沖突，產(chǎn)生深刻的印象。2）統(tǒng)一色彩的搭配1.2.2獲取滿意的配色方案圖1-55對比色頁面1.2.2獲取滿意的配色方案3.配色方案的制作（3）類似色頁面。類似色彩雖不是同一色彩但又非常接近，在色相環(huán)中，90°角內(nèi)相鄰接的色，由于其色相對比不強而給人以色感平靜、調(diào)和的感覺。如圖1-56所示，使用藍色和紫色兩種類似色彩搭配，這兩種色彩都屬于低明度，由于在色環(huán)中屬于類似色，所以在搭配的時候顯得較為自然。這個色彩搭配方案在時尚領(lǐng)域中較為常見，多面向女性受眾和一些對色彩要求較為時尚的場合。2）統(tǒng)一色彩的搭配1.2.2獲取滿意的配色方案圖1-56類似色頁面1.2.2獲取滿意的配色方案3.配色方案的制作（1）合理地使用色彩，可使頁面變得鮮艷、生動、富有活力。但色彩數(shù)量的增加并不能與頁面的表現(xiàn)力成正比，要有一種主色貫穿其中，主色不一定是面積最大的顏色，也可以是最重要、最能揭示和反映主題的顏色。不要將所有顏色都用到，盡量控制在3~5種色彩。3）使用色彩的注意事項1.2.2獲取滿意的配色方案3.配色方案的制作（2）在生活中，我們看顏色時會感覺到某些顏色很刺眼，看起來比較累。買家上網(wǎng)絕不希望對自己的視力有損害。因此，頁面用色要盡量少用視疲勞度高的色調(diào)。一般來說，高明度、高純度的顏色，刺激強度高，疲勞度也大。在無彩色系中，白色的明度最高，黑色的明度最低；在彩色系中，最明亮的是黃色，最暗的是紫色。刺激強度高的色彩不宜大面積使用，出現(xiàn)的頻率也不宜太高。低明度色彩的色疲勞度雖然較小，但往往給人以壓抑感。因此，比較理想的色調(diào)是柔和、明快的淺調(diào)暖色。3）使用色彩的注意事項任務(wù)1.3文字的應(yīng)用技能要求（1）理解常見的基礎(chǔ)字體。（2）掌握字體的不同創(chuàng)作手法。（3）學(xué)會文字的搭配與布局。任務(wù)1.3文字的應(yīng)用子目錄1.3.1網(wǎng)店設(shè)計中字體的選擇1.3.2創(chuàng)意使文字更具創(chuàng)造力1.3.3文字的布局與搭配1.3.1網(wǎng)店設(shè)計中字體的選擇從網(wǎng)店設(shè)計應(yīng)用的角度來看，常見的基礎(chǔ)字體有以下幾種。（1）宋體類型（見圖1-57）。宋體是默認文檔的字體，其客觀、典雅、嚴肅，給人古色古香的視覺效果，在網(wǎng)頁中的運用較為普遍。宋體的點、撇、捺、鉤等筆畫有尖端，屬于襯線字體。宋體筆畫中的橫筆較細，不好識別，所以在海報中運用的較少。宋體一般只出現(xiàn)在標(biāo)題中，在正文內(nèi)容中運用較少。圖1-57宋體類型

1.3.1網(wǎng)店設(shè)計中字體的選擇從網(wǎng)店設(shè)計應(yīng)用的角度來看，常見的基礎(chǔ)字體有以下幾種。（2）黑體類型（見圖1-58）。黑體給人時尚、厚重、搶眼的感覺，多用于標(biāo)題制作、字幕展示，有強調(diào)的效果。Windows系統(tǒng)里自帶的黑體筆畫較細，不太適合直接用于廣告設(shè)計中。目前，標(biāo)題和導(dǎo)語多采用粗黑、大黑、中黑、雅黑加粗等。圖1-58黑體類型1.3.1網(wǎng)店設(shè)計中字體的選擇從網(wǎng)店設(shè)計應(yīng)用的角度來看，常見的基礎(chǔ)字體有以下幾種。（3）書法體類型（見圖1-59）。書法體的傳統(tǒng)韻律比較強，在中國式傳統(tǒng)類的設(shè)計對象中運用廣泛。例如，隸書剛?cè)岵?yōu)雅、表現(xiàn)力豐富、古色古香、韻味十足。因此，書法體在前沿時尚類廣告的設(shè)計中不適用。圖1-59書法體類型1.3.1網(wǎng)店設(shè)計中字體的選擇從網(wǎng)店設(shè)計應(yīng)用的角度來看，常見的基礎(chǔ)字體有以下幾種。（4）創(chuàng)意類型（見圖1-60）。創(chuàng)意類型即藝術(shù)體，藝術(shù)體的字體形式比較多變，造型風(fēng)格各有千秋。例如，娃娃體稚嫩可愛；飾藝體造型復(fù)古、優(yōu)美、活潑，猶如西文的花體字。因此，藝術(shù)體常應(yīng)用于特定人群或節(jié)日等創(chuàng)意型、個性型網(wǎng)頁的設(shè)計中。圖1-60創(chuàng)意類型1.3.1網(wǎng)店設(shè)計中字體的選擇從網(wǎng)店設(shè)計應(yīng)用的角度來看，常見的基礎(chǔ)字體有以下幾種。不一樣的字體會呈現(xiàn)不同的文字風(fēng)格，給人的感覺不一樣，文化底蘊也不同。注意：字體的選擇要注意字體的使用版權(quán)，通常情況下，Windows自帶的字體是可以直接使用的；其他下載的字體，理論上都須授權(quán)后才可使用，特別不能直接用于企業(yè)網(wǎng)店的標(biāo)志，以免造成日后出現(xiàn)版權(quán)糾紛。1.3.2創(chuàng)意使文字更具創(chuàng)造力1.字體創(chuàng)意設(shè)計形象變化是指將整個字作形象化處理。如圖1-61所示，筆畫公用是文字圖形化創(chuàng)意設(shè)計中廣泛運用的一種形式。文字是一種視覺圖形，它的線條有著強烈的構(gòu)成性，可以從單純的構(gòu)成角度來看筆畫之間的異同，尋找筆畫之間的內(nèi)在聯(lián)系，找到它們可以共同利用的條件，把它提取出來。1）形象變化1.3.2創(chuàng)意使文字更具創(chuàng)造力

圖1-61形象變化1.3.2創(chuàng)意使文字更具創(chuàng)造力

圖1-62代替法如圖1-62所示，圓形代替方形可以說是代替法的一種，也就是把豎線、橫線或折線換成其他比劃。1.3.2創(chuàng)意使文字更具創(chuàng)造力

圖1-63形象變化如圖1-63所示，找到標(biāo)志中的一個點或一條線作為重點，將其適當(dāng)拉長，起到畫龍點睛的作用。1.3.2創(chuàng)意使文字更具創(chuàng)造力

圖1-64疊加法如圖1-64所示，疊加法是將文字的筆畫互相重疊或?qū)⒆峙c字、字與圖形相互重疊的表現(xiàn)手法。疊加能使圖形產(chǎn)生三度空間感，通過疊加處理的實形和虛形，增加了設(shè)計的內(nèi)涵和意念，以圖形的巧妙組合與表現(xiàn)，使單調(diào)的形象豐富起來。

1.3.2創(chuàng)意使文字更具創(chuàng)造力

圖1-65斷肢法如圖1-65所示，將一些封合包圍的字適當(dāng)?shù)財嚅_，或把左邊斷一截，或?qū)⒂疫吶ヒ唤?，稱為斷肢法。

提示：斷肢法應(yīng)在能識別文字的情況下采用。1.3.2創(chuàng)意使文字更具創(chuàng)造力1.字體創(chuàng)意設(shè)計通過字體的肌理變化、漸變效果、字內(nèi)裝飾、字外裝飾等方式使文字的表現(xiàn)更加具象化。如圖1-66所示，替換法是在統(tǒng)一形態(tài)的文字元素中加入另類不同的圖形元素或文字元素。其本質(zhì)是根據(jù)文字的內(nèi)容意思，用某一形象替代字體的某個部分或某一筆畫。這些形象或?qū)憣嵒蚩鋸?。將文字的局部進行替換，使文字的內(nèi)涵外露，在形象和感官上都增加了一定的藝術(shù)感染力。2）裝飾變化1.3.2創(chuàng)意使文字更具創(chuàng)造力

圖1-66替換法

1.3.2創(chuàng)意使文字更具創(chuàng)造力

圖1-67漸變效果如圖1-67所示，在文字上添加漸變效果，強調(diào)主題活動，提前告知消費者網(wǎng)店的銷售信息。

1.3.2創(chuàng)意使文字更具創(chuàng)造力1.字體創(chuàng)意設(shè)計根據(jù)字詞含義及圖片的應(yīng)景需要設(shè)計字體整體形象。如圖1-68所示，把橫中間拉成圓弧，角也用圓處理。這個方法還有重要的一點就是色彩，在字體處理的基礎(chǔ)上搭配色彩，才能做出俏皮可愛的字體。3）意象變化1.3.2創(chuàng)意使文字更具創(chuàng)造力

圖1-68意象變化

1.3.2創(chuàng)意使文字更具創(chuàng)造力

圖1-69文字錯落有致排列如圖1-69所示，把左右改為左上左下、上下排或斜排（一邊高、一邊低），讓文字錯落有致地排列。

1.3.2創(chuàng)意使文字更具創(chuàng)造力1.字體創(chuàng)意設(shè)計畫出字的三維空間感，從視覺上帶給人震撼，甚至讓人激動。鑒于這種立體效果給人的特殊感覺，很多主題文字因為添加了立體效果而容易讓人記住。如圖1-70所示，主題文字的立體變化營造出特定的銷售氛圍。4）立體變化1.3.2創(chuàng)意使文字更具創(chuàng)造力

圖1-70立體變化

1.3.2創(chuàng)意使文字更具創(chuàng)造力2.通過文字營造意境通過文字來傳遞信息、營造意境是設(shè)計的有效方式之一。不同的字體擁有不同的特征，如黑體字的莊重肅穆、楷書的優(yōu)美圓潤、隸書的嚴謹秀氣和草書的張狂飛揚等，這些多樣化字體的應(yīng)用豐富了畫面意境。例如，炎炎夏日的海報設(shè)計中使用帶有冰塊元素的文字，可以營造冰爽的意境。1.3.2創(chuàng)意使文字更具創(chuàng)造力2.通過文字營造意境網(wǎng)店的裝修字體設(shè)計不僅應(yīng)符合網(wǎng)店的風(fēng)格，還要根據(jù)季節(jié)、節(jié)日的變化而發(fā)生相對的變化。簡單的文字配合一些氣氛的營造或色調(diào)的渲染，可以讓海報整體呈現(xiàn)不一樣的感覺；還可通過改變顏色、改變字體等方式使主要文字在整體排列中更加突出。1.3.2創(chuàng)意使文字更具創(chuàng)造力2.通過文字營造意境如圖1-71所示，畫面中的文字稍微傾斜，同時主題文字帶有立體效果，再配上漂浮的紅絲帶，整體營造出動態(tài)的效果；在文字上使用卡通帽子、小熊、愛心等素材渲染出主題“萌”“愛”的意境；色彩背景給人清新淡雅的感覺，搭配暖色調(diào)的主題文字，帶給人濃濃的親情感。1.3.2創(chuàng)意使文字更具創(chuàng)造力2.通過文字營造意境圖1-71文字營造意境11.3.2創(chuàng)意使文字更具創(chuàng)造力2.通過文字營造意境如圖1-72所示，畫面中的主題文字借助書法抽象而成視覺符號，并借助輕重緩和之筆表現(xiàn)出書法獨特的形式美，賦予其濃厚的人文情懷。模特的飄渺，促銷文字的渾厚、“生命的顏色”的雋秀共同打造出一種極富藝術(shù)魅力、質(zhì)樸飄逸的東方意境之美。除此之外，畫面中的紅色文字模塊突出了節(jié)日的氛圍，傳遞出網(wǎng)店活動的主要內(nèi)容。1.3.2創(chuàng)意使文字更具創(chuàng)造力2.通過文字營造意境圖1-72文字營造意境21.3.2創(chuàng)意使文字更具創(chuàng)造力2.通過文字營造意境如圖1-73所示，設(shè)