第1章網(wǎng)店美工基礎(chǔ).第1章網(wǎng)店美工基礎(chǔ)

網(wǎng)店美工基礎(chǔ)長沙職業(yè)技術(shù)學(xué)院網(wǎng)店美工視覺設(shè)計(jì)實(shí)戰(zhàn)教程（全彩微課版）第1章目錄Contents網(wǎng)店美工概述網(wǎng)店美工必備視覺營銷知識(shí)PhotoshopCS6基本操作1.21.11.3PhotoshopCS6摳圖實(shí)戰(zhàn)演練1.41.51.1.1網(wǎng)店美工的應(yīng)用范疇3圖片的美化店鋪的裝修頁面的設(shè)計(jì)運(yùn)營推廣的了解與應(yīng)用應(yīng)用范疇1.1.2網(wǎng)店美工的技能要求4作為一名合格的網(wǎng)店美工，除了能夠熟練使用Photoshop、Flash、fireworks、Dreamweaver等常用設(shè)計(jì)與制作軟件外，還需要具備扎實(shí)的美術(shù)功底和創(chuàng)新思維，精通網(wǎng)頁設(shè)計(jì)語言并有一定的文字功底。

一個(gè)好的網(wǎng)店美工不僅僅是懂專業(yè)知識(shí)，更是懂產(chǎn)品、懂營銷、懂廣告的美工，了解如何將良好的營銷思維應(yīng)用到產(chǎn)品中，了解所制作的圖片將傳達(dá)什么信息，懂得如何去打動(dòng)買家，引起買家的購買欲。目錄Contents網(wǎng)店美工概述網(wǎng)店美工必備視覺營銷知識(shí)PhotoshopCS6基本操作1.21.11.3PhotoshopCS6摳圖實(shí)戰(zhàn)演練1.41.51.2.1色彩搭配61色彩的屬性與對(duì)比色彩由色相、明度以及純度3種屬性構(gòu)成。色相，即各類色彩的視覺感受，如紅、黃、綠、藍(lán)等各種顏色；明度是眼睛對(duì)光源和物體表面的明暗程度的感覺，取決于光線的強(qiáng)弱；純度也稱飽和度，是指色彩鮮艷度與渾濁度的感受。在搭配色彩時(shí)，經(jīng)常需要用到一些色彩的對(duì)比。明度對(duì)比01用色彩的明暗程度進(jìn)行對(duì)比純度對(duì)比02用純度的強(qiáng)弱形成對(duì)比色相對(duì)比03用色相之間的差別形成對(duì)比冷暖色對(duì)比04從顏色給人帶來的感官刺激形成對(duì)比色彩面積對(duì)比05色彩占面積的不同，呈現(xiàn)的對(duì)比效果不同1.2.1色彩搭配72主色、輔助色與點(diǎn)綴色淘寶美工在搭配店鋪的頁面色彩時(shí)，并不是隨心所欲的，而是需要遵循一定的比例與程序。網(wǎng)店裝修配色的黃金比例為“70:25:5”，其中，主色色域應(yīng)該占總版面的70%，輔助顏色所占比例為25%，而其他點(diǎn)綴性的顏色所占比例為5%。02主色：主色調(diào)是頁面中占用面積最大，也是最受矚目的色彩，它決定了整個(gè)店鋪的風(fēng)格，主色調(diào)不宜過多，一般控制在1~3種顏色，過多容易造成視覺疲勞。主色調(diào)不是隨意選擇的，而是系統(tǒng)性分析自己品牌受眾人群的心理特征，找到群體中易于接受的色彩。輔助色：輔助色是指占用面積略小于主色，用于烘托主色的顏色。合理應(yīng)用輔助色能豐富頁面的色彩，使頁面顯示更加完整、美觀。點(diǎn)綴色：點(diǎn)綴色是指頁面中面積小、色彩比較醒目的一種或多種顏色。合理應(yīng)用點(diǎn)綴色，可以起到畫龍點(diǎn)睛的作用，使頁面主次更加分明、富有變化。01031.2.2圖形元素的應(yīng)用8點(diǎn)是可見的最小的形式單元，具有凝聚視覺的作用，可以使畫面布局顯得合理舒適、靈動(dòng)且富有沖擊力。點(diǎn)線在視覺形態(tài)中可以表現(xiàn)長度、寬度、位置、方向性和性格，具有剛?cè)峁矟?jì)、優(yōu)美和簡(jiǎn)潔的特點(diǎn)，經(jīng)常用于渲染畫面，引導(dǎo)、串聯(lián)或分割畫面元素。線點(diǎn)的放大即為面，線的分割產(chǎn)生各種比例的空間也稱為面。在版面中面具有組合信息、分割畫面、平衡和豐富空間層次，烘托與深化主題的作用。面1.2.3文字的應(yīng)用91字體的性格特征黑體黑體筆畫粗細(xì)一致，粗壯有力、突出醒目，具有強(qiáng)調(diào)的視覺感，宣傳性強(qiáng)，常用于促銷廣告、導(dǎo)航條，或車、剃須刀、重金屬、搖滾、競(jìng)技游戲、足球等男性消費(fèi)者占主導(dǎo)地位的產(chǎn)品圖的設(shè)計(jì)。美術(shù)體具有明顯的藝術(shù)特征?；蚴菍⑽谋镜墓P畫涂抹變形，或用花瓣、樹枝等拼湊成各種圖形化的字體，其裝飾作用強(qiáng)力，主要用于海報(bào)的設(shè)計(jì)。宋體宋體是店鋪應(yīng)用最廣泛的字體，其筆畫的起點(diǎn)與結(jié)束點(diǎn)有額外的裝飾、橫細(xì)豎粗，其外形端莊秀美、具有濃厚的文藝氣息，適合用于標(biāo)題設(shè)計(jì)。而方正大標(biāo)宋不僅具有宋體的秀美，還具備黑體的醒目性，因此經(jīng)常被用于女性產(chǎn)品的設(shè)計(jì)。書法體書法體包括楷體、葉根友毛筆行書、篆書體、隸書體、行書體和燕書體等，書法體具有古樸秀美、歷史悠久的特征，常用于古玉、茶葉、筆墨、書籍等古典氣息濃厚的店鋪中。1.2.3文字的應(yīng)用102字體的布局技巧020103排版淘寶廣告文案時(shí)，選擇2~3種匹配度高的字體是最佳的視覺效果。字體的選用與變化文字的字體、粗細(xì)、大小與顏色在搭配組合上讓買家有一種關(guān)聯(lián)的感覺。文字的統(tǒng)一按重要程度設(shè)置文本的顯示級(jí)別。在進(jìn)行編排時(shí)，可利用字體、粗細(xì)、大小與顏色的對(duì)比來設(shè)計(jì)文本的顯示級(jí)別。文字的層次布局目錄Contents網(wǎng)店美工概述網(wǎng)店美工必備視覺營銷知識(shí)PhotoshopCS6基本操作1.21.11.3PhotoshopCS6摳圖實(shí)戰(zhàn)演練1.41.51.3.1設(shè)置前景色與背景色12前景色是插入、繪制圖形的顏色，背景色是需要處理的圖片底色，默認(rèn)為白色。用戶可以根據(jù)需要設(shè)置前景色與背景色，下面對(duì)前景色與背景色常見的操作進(jìn)行介紹。設(shè)置前景色與背景色的顏色：當(dāng)需要設(shè)置前景色與背景色時(shí)，單擊工具箱底部前景色與背景色對(duì)應(yīng)的色塊可打開顏色設(shè)置對(duì)話框，在其中可選擇需要的顏色?；謴?fù)默認(rèn)前景色與背景色：?jiǎn)螕舭粹o可恢復(fù)默認(rèn)的前景色與背景色。切換前景色與背景色：?jiǎn)螕舭粹o，可在前景色與背景色之間切換。選區(qū)填充：創(chuàng)建選區(qū)后，按【Ctrl+Delete】組合鍵可以用背景色填充當(dāng)前圖形，按【Alt+Delete】組合鍵可以用前景色填充當(dāng)前圖形。1.3.2圖層的基本操作13選擇【窗口】/【圖層】命令即可打開“圖層”面板。拖動(dòng)圖層到其他位置可移動(dòng)圖層的堆疊順序；使用移動(dòng)工具拖動(dòng)圖層中的圖像可移動(dòng)圖像在畫布中的位置。1.3.2圖層的基本操作14此外，常用的圖層操作還包括以下幾種。復(fù)制圖層：按【Ctrl+J】組合鍵可復(fù)制當(dāng)前選擇的圖層，拖動(dòng)圖層至“新建圖層”按鈕上也可復(fù)制該圖層。合并圖層：選擇兩個(gè)或兩個(gè)以上要合并的圖層，選擇【圖層】/【合并圖層】菜單命令或按【Ctrl+E】組合鍵可將多個(gè)圖層合并為一個(gè)圖層。選擇【圖層】/【合并可見圖層】菜單命令，或按【Shift+Ctrl+E】組合鍵將合并可見的圖層，其中隱藏的圖層不進(jìn)行合并。蓋印圖層：若要將多個(gè)圖層的內(nèi)容合并到一個(gè)新的圖層中，同時(shí)保留原來的圖層不變，可執(zhí)行蓋印圖層操作。選擇多個(gè)圖層，按【Ctrl+Alt+E】組合鍵，可將選擇的圖層蓋印到一個(gè)新的圖層中。利用圖層組管理圖層：當(dāng)圖層較多時(shí)，可使用圖層組進(jìn)行分類管理，方便后期查找與修改。選擇需要移動(dòng)到一個(gè)圖層組的圖層，按【Ctrl+G】組合鍵即可移動(dòng)到新建的圖層組中，雙擊組名稱或圖層名稱可重命名組名稱或圖層名稱，也可單擊“新建圖層組”按鈕新建圖層組，然后將圖層拖動(dòng)到該圖層組中。1.3.3裁剪并更改圖片尺寸15網(wǎng)店不同位置的圖片尺寸也不相同，而自己拍攝的商品圖片或從網(wǎng)上搜集的素材圖片的尺寸并不一定能符合需要，當(dāng)圖片尺寸過大時(shí)，就需要進(jìn)行裁剪。下面以裁剪淘寶主圖背景圖為800×800像素為例講解裁剪并更改圖片尺寸的方法，其具體操作如下。打開圖像文件12裁剪圖片1.3.3裁剪并更改圖片尺寸16網(wǎng)店不同位置的圖片尺寸也不相同，而自己拍攝的商品圖片或從網(wǎng)上搜集的素材圖片的尺寸并不一定能符合需要，當(dāng)圖片尺寸過大時(shí)，就需要進(jìn)行裁剪。下面以裁剪淘寶主圖背景圖為800×800像素為例講解裁剪并更改圖片尺寸的方法，其具體操作如下。調(diào)整圖像尺寸查看圖像效果431.3.4批處理圖片17在Photoshop中，批處理圖片是指為圖片的處理創(chuàng)建動(dòng)作，然后利用批處理命令自動(dòng)完成其他圖片的相同處理，常用于修改圖片大小、調(diào)色、添加邊框或標(biāo)簽等。在日常網(wǎng)店裝修或網(wǎng)頁圖文編輯時(shí)，常常會(huì)遇到圖片素材大小不一的情況，為了節(jié)約相同大小圖片的調(diào)整時(shí)間，可用批處理命令對(duì)圖片的大小進(jìn)行統(tǒng)一的修改設(shè)置，其具體操作如下。打開圖像文件12新建動(dòng)作1.3.4批處理圖片18更改圖像高度3設(shè)置批處理45查看創(chuàng)建的動(dòng)作目錄Contents網(wǎng)店美工概述網(wǎng)店美工必備視覺營銷知識(shí)PhotoshopCS6基本操作1.21.11.3PhotoshopCS6摳圖實(shí)戰(zhàn)演練1.41.51.4.1規(guī)則圖形摳圖20使用多邊形套索工具繪制選區(qū)12新建白色背景圖像對(duì)于一些規(guī)則的矩形和圓形商品，如粉餅、包裝盒等，可通過對(duì)應(yīng)的選擇工具快速創(chuàng)建選區(qū)。對(duì)于邊緣呈直線的規(guī)則商品，也可以選擇多邊形套索工具進(jìn)行快速摳圖。下面利用多邊形套索工具和橢圓選框工具對(duì)面膜進(jìn)行摳圖，其具體操作如下。1.4.1規(guī)則圖形摳圖21使用移動(dòng)工具移動(dòng)選區(qū)內(nèi)的圖像34調(diào)整圖像大小和移動(dòng)圖像位置完成摳圖制作1.4.1規(guī)則圖形摳圖22創(chuàng)建橢圓選區(qū)制作撕口561.4.2簡(jiǎn)單背景摳圖23設(shè)置快速選擇工具參數(shù)12快速創(chuàng)建選區(qū)商品或背景的顏色較為簡(jiǎn)單，商品與背景的邊界分明，可使用魔棒工具、快速選擇工具單擊需要選擇的部分區(qū)域快速選擇需要的選區(qū)。下面利用魔棒工具和快速選擇工具，并配合套索工具對(duì)箱包進(jìn)行摳圖，為其更換背景，其具體操作如下。使用多邊形套索工具減選選區(qū)31.4.2簡(jiǎn)單背景摳圖24使用套索工具、魔棒工具加減選選區(qū)45羽化選區(qū)1.4.2簡(jiǎn)單背景摳圖25移動(dòng)并調(diào)整圖像大小67使用“曲線”命令調(diào)整圖像1.4.2簡(jiǎn)單背景摳圖26繪制陰影89查看摳圖效果1.4.3復(fù)雜圖像摳圖2712繪制路徑當(dāng)遇到商品的輪廓比較復(fù)雜，背景也比較復(fù)雜，或背景與商品的分界不明顯時(shí)，上述的摳圖方法都很難得到精確的摳圖效果，此時(shí)可使用路徑摳圖的方法。鋼筆工具是網(wǎng)店美工經(jīng)常用到的路徑摳圖方式，使用鋼筆工具可以快速地勾勒商品的輪廓，將其轉(zhuǎn)化為選區(qū)，達(dá)到精確摳取商品的目的。下面將使用鋼筆工具摳取圖像中的商品的方法，其具體操作如下。編輯路徑1.4.3復(fù)雜圖像摳圖28將路徑轉(zhuǎn)化為選區(qū)并羽化選區(qū)34移動(dòng)圖像1.4.3復(fù)雜圖像摳圖29添加素材后的效果56添加投影1.4.4毛發(fā)摳圖3012創(chuàng)建選區(qū)在摳取人物模特的頭發(fā)或毛絨的物品時(shí)，通過一般的摳圖方法，既浪費(fèi)時(shí)間，又達(dá)不到理想的效果。此時(shí)可利用Photoshop的調(diào)整邊緣功能快速進(jìn)行摳取，下面進(jìn)行人物頭像的摳取，其具體操作如下。完成封閉路徑的繪制1.4.4毛發(fā)摳圖31設(shè)置調(diào)整邊緣的參數(shù)34手動(dòng)調(diào)整邊緣1.4.4毛發(fā)摳圖32移動(dòng)圖像后的效果57細(xì)節(jié)修改查看調(diào)整邊緣的摳圖效果61.4.5半透明物體摳圖3313創(chuàng)建選區(qū)一些特殊的商品，如水杯、酒杯、婚紗、冰塊、礦泉水等，使用一般的摳圖工具得不到想要的透明效果，此刻可結(jié)合鋼筆工具、圖層蒙版和通道等進(jìn)行摳圖。下面以摳取婚紗為例講解半透明商品圖片的摳圖方法，讀者可借鑒該方法進(jìn)行其他半透明商品的摳圖，其具體操作如下。新建通道存儲(chǔ)路徑21.4.5半透明物體摳圖34復(fù)制“綠”通道45填充背景選區(qū)1.4.5半透明物體摳圖35再次計(jì)算通道7計(jì)算通道并查看計(jì)算結(jié)果61.4.5半透明物體摳圖36設(shè)置調(diào)整邊緣的參數(shù)10復(fù)制選區(qū)8移動(dòng)圖像91.4.5半透明物體摳圖37混合婚紗圖層13設(shè)置色階銳化婚紗11121.4.5半透明物體摳圖38精修邊緣并添加陰影15加深圖像14目錄Contents網(wǎng)店美工概述網(wǎng)店美工必備視覺營銷知識(shí)PhotoshopCS6基本操作1.21.11.3PhotoshopCS6摳圖實(shí)戰(zhàn)演練1.41.51.5.1為沙發(fā)更換背景401.設(shè)計(jì)思路ABC首先為沙發(fā)創(chuàng)建選區(qū)，摳取沙發(fā)圖像。然后將摳取的沙發(fā)圖像移動(dòng)到背景中，調(diào)整沙發(fā)的大小與位置。根據(jù)沙發(fā)的光影關(guān)系，在背景圖上制作投影，使沙發(fā)與背景融合得更加真實(shí)。1.5.1為沙發(fā)更換背景41按【Shift+F6】組合鍵羽化選區(qū)使用“快速選擇工具”創(chuàng)建選區(qū)，按【Shift】鍵加選選區(qū)設(shè)置前景色，使用“畫筆工具”添加投影2.知識(shí)要點(diǎn)▲▲▲▲▲▲1.5.1為沙發(fā)更換背景42

3.操作步驟下面進(jìn)行沙發(fā)的更換背景處理，其具體操作如下。創(chuàng)建選區(qū)12羽化選區(qū)復(fù)制選區(qū)31.5.1為沙發(fā)更換背景43移動(dòng)圖像4繪制陰影51.5.2為原汁機(jī)更換背景44Designideas123將原汁機(jī)從灰色背景中分離。更換綠色的背景，為原汁機(jī)添加投影，使其與背景更好地融合。添加橘子素材，復(fù)制原汁機(jī)的投影效果到橘子上。1.設(shè)計(jì)思路1.5.2為原汁機(jī)更換背景45背景是用來襯托商品主體的，如果在拍攝商品圖片時(shí)沒有很好地利用背景，圖片則往往會(huì)顯得很單調(diào)。本例為了顯出一個(gè)原汁機(jī)的特色，將為其添加帶有牛奶、氣泡和文本說明的清新背景，并添加新鮮的橘子素材，點(diǎn)綴畫面，增加畫面的活力。1.設(shè)計(jì)思路清新的綠色是種比較舒適、環(huán)保、健康的顏色，比較符合與食品相關(guān)的商品，因此本例為原汁機(jī)添加綠色背景，可以從以下幾個(gè)方面闡述其設(shè)計(jì)方法。（1）首先將原汁機(jī)從灰色背景中分離。（2）然后為其更換綠色的背景，為原汁機(jī)添加投影，使其與背景更