網(wǎng)店美工贏家寶典(第4章)課件

贏家寶典網(wǎng)店美工贏家寶典贏家寶典網(wǎng)店美工贏家寶典品牌展示的窗口之店鋪頁頭第4章Areyouready?品牌展示的窗口之第4Areyouready?第4章品牌展示的窗口之店鋪頁頭與眾不同的Logo設(shè)計(jì)個(gè)性化店鋪招牌設(shè)計(jì)完善店鋪導(dǎo)航模塊頁頭背景設(shè)計(jì)第4章品牌展示的窗口之店鋪頁頭與眾不同的Logo設(shè)計(jì)個(gè)性Logo（標(biāo)志）作為一種特殊的視覺符號(hào)，是店鋪形象、特征、信譽(yù)、文化的濃縮。它的作用是將店鋪的經(jīng)營(yíng)理念、經(jīng)營(yíng)內(nèi)容、品牌文化等要素傳達(dá)給買家，使買家能夠記住該品牌，從而形成品牌烙印。網(wǎng)店美工贏家寶典(第4章)課件Logo從形態(tài)上大致可分為三大類型：文字Logo、圖形Logo和圖文Logo。Logo從形態(tài)上大致可分為三大類型：文字Logo、圖形Log文字Logo文字logo主要包括漢字標(biāo)志、拉丁字母標(biāo)志和數(shù)字標(biāo)志，其中拉丁字母標(biāo)志在文字Logo設(shè)計(jì)中占主導(dǎo)地位。此類標(biāo)志看上去簡(jiǎn)約卻不簡(jiǎn)單，設(shè)計(jì)前要對(duì)文字結(jié)構(gòu)要有深入的了解，抓住其特點(diǎn)，可進(jìn)行適當(dāng)夸張、變形和美化等加工。文字Logo也是使用最廣泛的一類標(biāo)志，事實(shí)上，很多國(guó)際性的大公司都在使用這種標(biāo)志，如SONY，IBM。文字Logo文字logo主要包括漢字標(biāo)圖形Logo圖形logo通過幾何圖案或象形圖案來表示的標(biāo)志。圖形標(biāo)志可分為3種，即具象圖形標(biāo)志、抽象圖形標(biāo)志與具象抽象相結(jié)合的標(biāo)志。相對(duì)于文字Logo來說，圖形Logo通過形狀的變化更加直觀、形象，視覺吸引力更強(qiáng)，如iPhone的標(biāo)志。圖形Logo圖形logo通過幾何圖案或圖文logo圖文組合標(biāo)志集中了文字標(biāo)志和圖形標(biāo)志的長(zhǎng)處，克服了兩者的不足，讓平淡無味的圖形和文字瞬間變得美麗、漂亮起來，如綠色食品標(biāo)志。圖文Logo圖文logo圖文組合標(biāo)志集中了文字標(biāo)志和圖形標(biāo)志的長(zhǎng)處，克服Logo不僅僅是圖形或文字的組合，也是依據(jù)企業(yè)的構(gòu)成結(jié)構(gòu)、行業(yè)類別、經(jīng)營(yíng)理念并充分考慮標(biāo)志接觸的對(duì)象和應(yīng)用環(huán)境，為產(chǎn)品制定的標(biāo)準(zhǔn)視覺符號(hào)。在設(shè)計(jì)之前，首先要對(duì)產(chǎn)品做全面深入的了解。下面以“石榴汁”為例，制作名為“石榴汁”的商品Logo，首先，要開始思考石榴給人的感覺，鮮紅色的外表和顆粒飽滿的果實(shí)。針對(duì)石榴的形態(tài)，Logo的標(biāo)準(zhǔn)色可以采用紅色，類型可以采用圖文Logo進(jìn)行設(shè)計(jì)，具體操作步驟如下：石榴Logo不僅僅是圖形或文字的組合，也是依據(jù)企業(yè)的構(gòu)成結(jié)構(gòu)、行操作步驟步驟1打開PhotoshopCS6軟件，執(zhí)行【文件】丨【新建】命令，快捷鍵為【Ctrl+N】，在打開的【新建】對(duì)話框中設(shè)置屬性，點(diǎn)擊【確定】按鈕，新建一個(gè)文檔?！拘陆ā繉?duì)話框操作步驟步驟1【新建】對(duì)話框操作步驟步驟2在工具箱中選擇【圓角矩形工具】，在工具選項(xiàng)欄中點(diǎn)擊【設(shè)置形狀填充類型】按鈕，在打開的下拉色板中點(diǎn)擊按鈕，打開【拾色器（填充顏色）】對(duì)話框，在其中設(shè)置填充顏色值為【#fd3336】，點(diǎn)擊【確定】按鈕，再設(shè)置【半徑】為【30像素】。操作步驟步驟2操作步驟步驟3屬性設(shè)置好后，在圖像上按住鼠標(biāo)左鍵并拖動(dòng)繪制一個(gè)圓角矩形。在【圖層】面板【圓角矩形1】上點(diǎn)擊鼠標(biāo)右鍵，在彈出的菜單中選擇【柵格化圖層】。繪制一個(gè)圓角矩形操作步驟步驟3繪制一個(gè)圓角矩形柵格化圖圖層操作步驟柵格化圖圖層操作步驟操作步驟步驟4在工具箱中選擇【鋼筆工具】，在工具選項(xiàng)欄中選擇【工具模式】為【形狀】，設(shè)置【填充】顏色值為【#ffffff】，【描邊】為【無】，然后在圖像上繪制如左圖所示的形狀。繪制形狀操作步驟步驟4繪制形狀操作步驟步驟5按【Ctrl+Enter】組合鍵，將路徑轉(zhuǎn)換為選區(qū)，按【Delete】鍵刪除選區(qū)內(nèi)的圖像，按【Ctrl+D】組合鍵取消選區(qū)。刪除部分圖像操作步驟步驟5刪除部分圖像操作步驟步驟6在工具箱中選擇【橫排文字工具】，在工具選項(xiàng)欄中設(shè)置【字體】為【造字工房朗倩】，【字體大小】為【149點(diǎn)】，【消除鋸齒方法】為【銳利】，【文本顏色】為白色（#ffffff）。操作步驟步驟6操作步驟步驟7將鼠標(biāo)移動(dòng)到圖像左側(cè)，點(diǎn)擊鼠標(biāo)左鍵，待閃爍光標(biāo)出現(xiàn)后輸入【石榴汁】文字，然后按【Ctrl+Enter】組合鍵確認(rèn)輸入。操作步驟步驟7操作步驟步驟8在【圖層】面板中選中文字圖層【石榴汁】，單點(diǎn)擊鼠標(biāo)右鍵，在彈出的菜單中選擇【柵格化文字】。柵格化文字操作步驟步驟8柵格化文字操作步驟步驟9在工具箱中選擇【橡皮擦工具】，在工具選項(xiàng)欄中設(shè)置【大小】為【20像素】，【硬度】為【100%】，【不透明度】為【100%】，在圖像上拖動(dòng)鼠標(biāo)將【汁】字的【氵】擦除。操作步驟步驟9操作步驟步驟10選擇【鋼筆工具】，在工具選項(xiàng)欄中選擇【形狀】，設(shè)置【顏色】為白色，然后在圖像上繪制如左圖所示形狀。繪制形狀操作步驟步驟10繪制形狀操作步驟步驟11在工具箱中選擇【橫排文字工具】，在工具選項(xiàng)欄中設(shè)置屬性。在圖像上輸入【POMEGRANATESAUCE】，使Logo看起來不那么單一。輸入文字操作步驟步驟11輸入文字操作步驟步驟12在【圖層】面板中復(fù)制【圓角矩形1】圖層，得到【圓角矩形1副本】圖層，再次復(fù)制【圓角矩形1】圖層，得到【圓角矩形1副本2】圖層。操作步驟步驟12操作步驟步驟13在【圖層】面板中選中【圓角矩形1】圖層，點(diǎn)擊面板底部的【添加圖層樣式】按鈕，在彈出的菜單中選擇【顏色疊加】命令，在彈出的【圖層樣式】對(duì)話框中點(diǎn)擊【設(shè)置填充顏色】按鈕，在彈出的【拾色器（疊加顏色）】對(duì)話框中設(shè)置填充顏色值為【#008606】，依次點(diǎn)擊兩次【確定】按鈕，為圖形疊加顏色。操作步驟步驟13操作步驟步驟14按鍵盤上的【↑】鍵，將添加圖層樣式后的圖像向上移動(dòng)。向上移動(dòng)圖像操作步驟步驟14向上移動(dòng)圖像操作步驟步驟15利用步驟12～13中的操作方法，為【圓角矩形1副本】圖層添加【顏色疊加】圖層樣式，其中填充顏色值為【#ffffff】。調(diào)整圖形位置后。添加圖層樣式并移動(dòng)位置操作步驟步驟15添加圖層樣式并移動(dòng)位置操作步驟步驟16按【Ctrl+Shift+Alt+E】組合鍵蓋印圖層，將所有圖層合成一個(gè)新的圖層。蓋印圖層操作步驟步驟16蓋印圖層操作步驟步驟17打開本書配套素材【1.jpg】圖像文件，在制作好的【石榴汁.psd】圖像窗口中石榴汁Logo上按住鼠標(biāo)左鍵不放并向【1.jpg】圖像窗口中拖動(dòng)，至合適位置后釋放鼠標(biāo)按鈕，復(fù)制石榴汁Logo。打開素材文件并復(fù)制圖像操作步驟步驟17打開素材文件并復(fù)制圖像制作完成的Logo不但可以作為店鋪品牌形象符號(hào)應(yīng)用于店招、海報(bào)中，還可以應(yīng)用于產(chǎn)品主圖等位置。制作完成的Logo不但可以作為店鋪品牌形象符號(hào)應(yīng)用于店招、海店鋪招牌就是店鋪的招牌，簡(jiǎn)稱店招，從品牌推廣的角度來看，在繁華的地段一個(gè)好的店招不光標(biāo)志著的店鋪?zhàn)涞?，更起到戶外廣告的作用。網(wǎng)店美工贏家寶典(第4章)課件店鋪招牌是品牌展示的窗口，整個(gè)淘寶店鋪只有一個(gè)店招，無論點(diǎn)擊哪個(gè)頁面，店鋪招牌都會(huì)顯示在最上方，所以店招是店鋪中最重要的一部分。店鋪招牌在設(shè)計(jì)的過程中要遵循兩點(diǎn)準(zhǔn)則：美觀性和功能性。美觀性是指店鋪招牌的設(shè)計(jì)不但符合店鋪產(chǎn)品，還能夠吸引買家眼球。功能性是指店招要有明確的品牌定位和產(chǎn)品定位。品牌定位可以讓買家在腦海中產(chǎn)生品牌烙印，產(chǎn)品定位可以讓買家明確的知道店鋪出售的是什么商品。下面將兩款店招進(jìn)行對(duì)比，大家通過這兩款店招來分別猜一猜店鋪出售的是什么商品：店鋪招牌是品牌展示的窗口，整個(gè)淘寶店鋪只有一個(gè)店招，無論點(diǎn)擊第一款店招第二款店招店招效果對(duì)比第一款第二款店招效果對(duì)比從第一款店招的唯美程度來看，我們可以猜出店鋪所賣的產(chǎn)品可能是女性用品，但是具體出售的是什么產(chǎn)品就無從而知了。再看第二款店招，從設(shè)計(jì)角度分析，不如第一款店招設(shè)計(jì)的好看，吸引人眼球，但是單從店招上我們可以看出店鋪所賣的產(chǎn)品是面膜，而且是補(bǔ)水面膜，雖然設(shè)計(jì)上比不上第一款店招，但是第二款店招不但加入了店鋪名稱、產(chǎn)品圖片和產(chǎn)品功效，還利用文字和背景色的鮮明對(duì)比，讓買家可以很清晰的了解該店鋪的產(chǎn)品定位。因此，店招的設(shè)計(jì)不但要考慮它的美觀性，還要考慮它的功能性。從第一款店招的唯美程度來看，我們可以猜出店鋪所賣的產(chǎn)品可能是基礎(chǔ)店招主要應(yīng)用于旺鋪基礎(chǔ)版本，因?yàn)槭敲赓M(fèi)版本，所以無法設(shè)計(jì)太多內(nèi)容，重點(diǎn)設(shè)計(jì)店招部分。淘寶對(duì)基礎(chǔ)店招的尺寸要求是950×120像素（如果高度超過120像素，導(dǎo)航條顯示可能異常），可以上傳GIF，JPG，JPEG和PNG，共4種圖片格式。下面以雨傘的店鋪為例制作一款店招，在制作店招之前需要搜集素材，如天空的圖片，因?yàn)橛陚闩c天空有關(guān)。在制作店招的時(shí)候不要盲目的進(jìn)行設(shè)計(jì)，可以從產(chǎn)品本身關(guān)聯(lián)周圍環(huán)境入手。基礎(chǔ)店招主要應(yīng)用于旺鋪基礎(chǔ)版本，因?yàn)槭敲赓M(fèi)版本，所以無法設(shè)計(jì)操作步驟步驟1在執(zhí)行【文件】丨【新建】命令，打開【新建】對(duì)話框，在其中設(shè)置參數(shù)，點(diǎn)擊【確定】按鈕，新建空白文檔。【新建】對(duì)話框操作步驟步驟1【新建】對(duì)話框操作步驟步驟2打開本書配套素材【2.jpg】文件，將其中的天空?qǐng)D片拖到【雨傘店招.psd】圖像窗口中，適當(dāng)調(diào)整位置。復(fù)制素材文件操作步驟步驟2復(fù)制素材文件操作步驟步驟3打開執(zhí)行【圖像】丨【調(diào)整】丨【色相/飽和度】命令，如圖4-29所示，快捷鍵為【Ctrl+U】。選擇【色相/飽和度】操作步驟步驟3選擇【色相/飽和度】操作步驟步驟4在彈出的【色相/飽和度】對(duì)話框中調(diào)整【色相】的值為【-20】，使晴朗的天空?qǐng)D片變得清澈一些，制造清新的意境，設(shè)置好后點(diǎn)擊【確定】按鈕。操作步驟步驟4操作步驟步驟5在工具箱中選擇【油漆桶工具】，設(shè)置前景色色值為【#15bfd2】。在【圖層】面板中選中【背景】圖層，然后在圖像上點(diǎn)擊鼠標(biāo)左鍵，為背景圖像填充前景色。操作步驟步驟5操作步驟步驟6在工具箱中選擇【畫筆工具】，在工具選項(xiàng)欄中設(shè)置畫筆【大小】為【150像素】，【硬度】為【0%】，【不透明度】為【50%】。選擇【色相/飽和度】操作步驟步驟6選擇【色相/飽和度】操作步驟步驟7在【圖層】面板中選中【圖層1】，然后點(diǎn)擊面板底部的【添加圖層蒙版】按鈕，為【圖層1】添加蒙版。添加圖層蒙版操作步驟步驟7添加圖層蒙版操作步驟步驟8在天空?qǐng)D片上拖動(dòng)鼠標(biāo)進(jìn)行涂抹，將多余的云彩涂抹掉，使圖片看上去更唯美。步驟9打開本書配套素材【3.psd】文件，將其中的雨傘圖像拖至【雨傘店招.psd】圖像窗口中，并且移動(dòng)到合適的位置。操作步驟步驟8步驟9操作步驟步驟10在【圖層】調(diào)板中復(fù)制【圖層2】圖層，得到【圖層2副本】圖層，然后選中【圖層2】圖層。執(zhí)行【編輯】丨【自由變換】命令（快捷鍵為【Ctrl+T】）顯示自由變換框，在框內(nèi)點(diǎn)擊鼠標(biāo)右鍵，在彈出的菜單中選擇【垂直翻轉(zhuǎn)】命令，翻轉(zhuǎn)雨傘圖像，按【Enter】鍵確認(rèn)操作，移動(dòng)位置后，為雨傘添加陰影效果。自由變換圖像添加陰影效果操作步驟步驟10自由變換圖像添加陰影效果操作步驟步驟11在按【Ctrl+U】組合鍵，在彈出的【色彩/飽和度】對(duì)話框中調(diào)整【色相】的值為【17】，【飽和度】的值為【-21】，【明度】的值為【-25】，點(diǎn)擊【確定】按鈕，使雨傘的投影效果更加有意境。操作步驟步驟11操作步驟步驟12在工具箱中選擇【橫排文字工具】，設(shè)置【文體】為【方正蘭亭中黑體】，【文字大小】為【24點(diǎn)】，【文本顏色】的值為【#00c8ff】，然后在圖像的合適位置輸入【天堂傘官方旗艦店】。輸入文字操作步驟步驟12輸入文字操作步驟步驟13在點(diǎn)擊【圖層】面板底部的【添加圖層樣式】按鈕，選擇【描邊】命令，在彈出【圖層樣式】對(duì)話框中設(shè)置參數(shù)，點(diǎn)擊【確定】按鈕，如圖4-40所示，為文字添加描邊圖層樣式。添加描邊圖層樣式操作步驟步驟13添加描邊圖層樣式操作步驟步驟14利用【橫排文字工具】在圖像上的合適位置輸入其他文字內(nèi)容，如店鋪的經(jīng)營(yíng)類目，也可以添加一些英文語句來完善店招的布局。輸入其他文字內(nèi)容字體：微軟雅黑；大小：6點(diǎn)；顏色值：#adf8fe字體：宋體；大?。?2點(diǎn)；顏色值：#fda444操作步驟步驟14輸入其他文字內(nèi)容字體：微軟雅黑；字體：宋體操作步驟步驟15在【圖層】面板中點(diǎn)擊【新建圖層】按鈕，利用【畫筆工具】進(jìn)行涂抹。新建圖層操作步驟步驟15新建圖層操作步驟步驟16在工具箱中選擇【畫筆工具】，設(shè)置畫筆【大小】為【108像素】，【硬度】為【0%】，前景色的值為【#edfbf7】，然后在圖像上拖動(dòng)鼠標(biāo)進(jìn)行涂抹，繪制淺色背景。操作步驟步驟16操作步驟步驟17利用步驟16中的操作方法，分別設(shè)置前景色的值為【#f4d5c0】【#a4f2ef】【#19c1d4】，然后分別在在圖像中進(jìn)行涂抹，畫筆的大小可以根據(jù)所需涂抹的部分而定。按【Ctrl+S】組合鍵保存文件，再保存一份JPEG格式。操作步驟步驟17對(duì)于剛接觸店招設(shè)計(jì)的新手來說，店招的布局是很頭疼的一件事，不知道該如何布局才能夠讓店招看起來舒服、好看，還能體現(xiàn)的全面，這時(shí)候可以參考一些同行業(yè)的店招設(shè)計(jì)，模仿自己喜歡的店招布局，從而提升自己的設(shè)計(jì)能力。對(duì)于剛接觸店招設(shè)計(jì)的新手來說，店招的布局是很頭疼的一件事，不通欄店招主要應(yīng)用于旺鋪專業(yè)版本，可以利用其中的自定義店招模塊，對(duì)店招進(jìn)行多元化的設(shè)計(jì)，使店招整體看上去更美觀，淘寶對(duì)通欄店招的尺寸要求是1920×150像素（150像素內(nèi)包含店招和導(dǎo)航兩部分，每部分所占的比例可以自己布局），可以上傳GIF，JPG，JPEG和PNG四種圖片格式。通欄店招寬度雖然可以制作成1920像素，但是店招和導(dǎo)航條上的文字內(nèi)容，依舊建議C店的放在950像素之內(nèi)，天貓店的放在990像素之內(nèi)。原因是如果店招上的文字需要添加超鏈接，那么超過950像素（或者990像素）的部分是無法添加超鏈接的，但是，為了店招的美觀度，超過950像素（或者990像素）的部分可以用圖片代替。通欄店招通欄店招主要應(yīng)用于旺鋪專業(yè)版本，可以利用其中的自定義店招模塊操作步驟步驟1在Photoshop中新建一個(gè)名稱為通欄店招，尺寸為1920×150像素的空白文檔。在工具箱中選擇【油漆桶工具】，設(shè)置前景色的值為【#010b2f】，然后在圖像上點(diǎn)擊鼠標(biāo)左鍵為背景填充顏色。填充顏色操作步驟步驟1填充顏色操作步驟步驟2打開本書配套素材【4.jpg】文件，將其中的圖像拖到【店招.psd】圖像窗口中。復(fù)制素材文件操作步驟步驟2復(fù)制素材文件操作步驟步驟3執(zhí)行【濾鏡】丨【模糊】丨【高斯模糊】命令，在彈出的【高斯模糊】對(duì)話框中設(shè)置【半徑（R）】為【170像素】，點(diǎn)擊【確定】按鈕，模糊圖像。半徑像素越大，圖片就會(huì)越模糊，不同的圖片模糊的效果不同，可以通過這種方式增加背景的高光顏色。利用【高斯模糊】命令調(diào)整圖像操作步驟步驟3利用【高斯模糊】命令調(diào)整圖像操作步驟步驟4執(zhí)行【視圖】丨【標(biāo)尺】命令啟動(dòng)標(biāo)尺，快捷鍵為【Ctrl+R】，然后將鼠標(biāo)光標(biāo)移動(dòng)到垂直標(biāo)尺上，按住鼠標(biāo)并向右拖動(dòng)至485像素的位置后釋放鼠標(biāo)按鈕，創(chuàng)建垂直參考線。創(chuàng)建垂直參考線操作步驟步驟4創(chuàng)建垂直參考線操作步驟步驟5利用步驟4中的操作方法，分別在960像素和1435像素的位置創(chuàng)建垂直參考線，這樣可以直觀地看出圖片的中心位置和950像素以內(nèi)的位置。操作步驟步驟5操作步驟步驟6打開本書配套素材【5.psd】文件，將Logo圖像拖至【通欄店招.psd】圖像窗口中，并放置在第1條垂直參考線的右側(cè)。利用【橫排文字工具】在Logo圖像的右側(cè)輸入如右圖所示的文字。字體：漢儀菱心體簡(jiǎn)；大小：35點(diǎn)；顏色值：#ffffff字體：方正蘭亭纖黑體；大小：12點(diǎn)；顏色值：#ffffff操作步驟步驟6字體：漢儀菱心體簡(jiǎn)；字體：方正蘭亭纖黑體；步驟7在工具箱中選擇【直線工具】，在工具選項(xiàng)欄中設(shè)置【填充】的值為【#ffffff】，【粗細(xì)】為【1像素】，然后在圖像上按住鼠標(biāo)從上至下拖動(dòng)繪制直線。操作步驟步驟7操作步驟操作步驟步驟8此時(shí)在【圖層】面板中自動(dòng)創(chuàng)建【形狀1】圖層，點(diǎn)擊面板底部的【添加圖層蒙版】按鈕，為【形狀1】圖層創(chuàng)建一個(gè)圖層蒙版。創(chuàng)建圖層蒙版操作步驟步驟8創(chuàng)建圖層蒙版操作步驟步驟9在工具箱中選擇【漸變工具】，在工具選項(xiàng)欄中點(diǎn)擊【點(diǎn)按可編輯漸變】按鈕，在打開的【漸變編輯器】對(duì)話框中漸變顏色條的下方點(diǎn)擊，創(chuàng)建一個(gè)色標(biāo)。然后雙擊右側(cè)的色標(biāo)，在打開的【拾色器（色標(biāo)顏色）】對(duì)話框中設(shè)置顏色值為【#000000】。利用同樣的方法，設(shè)置中間的色標(biāo)顏色值為【#ffffff】。創(chuàng)建色標(biāo)操作步驟步驟9創(chuàng)建色標(biāo)設(shè)置色標(biāo)顏色操作步驟設(shè)置色標(biāo)顏色操作步驟操作步驟步驟10在圖像上從直線形狀頂點(diǎn)向終點(diǎn)拖動(dòng)鼠標(biāo)，得到兩邊尖的分割線條，這種光效線條在作圖過程中會(huì)經(jīng)常用到。操作步驟步驟10操作步驟步驟11打開本書配套素材【6.psd】文件，將其中的主推商品圖片拖動(dòng)到【通欄店招.psd】圖像窗口中第3條垂直參考線的左側(cè)。在工具箱中選擇【橫排文字工具】，在助推商品圖片的左側(cè)輸入如右圖所示的文字。字體：方正蘭亭中黑；大小：點(diǎn)；顏色值：#fff000字體：Impact；大小：點(diǎn)；顏色值：#fff000字體：Impact；大小：44點(diǎn)；顏色值：#fff000輸入文字操作步驟步驟11字體：方正蘭亭中黑；字體：Impact；字操作步驟步驟12在工具箱中選擇【圓角矩形工具】，在工具選項(xiàng)欄中設(shè)置填充顏色值為【#ff9c03】，【半徑】為【30像素】，然后在圖像上繪制圓角矩形，并在圓角矩形上輸入【明星產(chǎn)品】。字體：方正蘭亭細(xì)黑；大?。狐c(diǎn)；顏色值：#000d30繪制圓角矩形并輸入文字操作步驟步驟12字體：方正蘭亭細(xì)黑；繪制圓角矩形并輸入文字操作步驟步驟13在工具箱中選擇【圓角矩形工具】，設(shè)置填充顏色值為【#3349b8】，【半徑】為【6像素】，然后在圖像上第1條參考線右側(cè)繪制圓角矩形，在圖像中只留上半部分，保留高度大約為30像素即可。利用【橫排文字工具】在圓角矩形上輸入【首頁】。字體：方正蘭亭黑；大?。?5點(diǎn)；顏色值：#ededef操作步驟步驟13字體：方正蘭亭黑；操作步驟步驟14利用步驟13中的操作方法，在導(dǎo)航條的位置輸入其他店鋪分類信息。制作導(dǎo)航條操作步驟步驟14制作導(dǎo)航條操作步驟步驟15在工具箱中選擇【自定形狀工具】，在工具選項(xiàng)欄中設(shè)置填充顏色值【#ffffff】，點(diǎn)擊【形狀】右側(cè)的下拉三角按鈕，在打開的下拉列表中選擇選擇【紅心形卡】，然后在圖像上拖動(dòng)鼠標(biāo)繪制心形。操作步驟步驟15操作步驟步驟16至此，完成了通欄店招案例的整體制作步驟。按【Ctrl+S】組合鍵保存文件，再保存一份JPEG格式。在這里我們制作的通欄店招較為簡(jiǎn)單，讀者可以根據(jù)自己的喜好進(jìn)行發(fā)揮。另外，在繪制圖形時(shí)，按住【Shift】鍵的同時(shí)拖動(dòng)鼠標(biāo)繪制圖形，可以得到正比例圖形。最終效果操作步驟步驟16在這里我們制作的通欄店招較為簡(jiǎn)單，讀者可以店招設(shè)計(jì)好了，如何將設(shè)計(jì)的成果展示到店鋪中呢？下面以展示【雨傘店招】為例對(duì)其進(jìn)行詳細(xì)講解。具體設(shè)置步驟如下所示：店招設(shè)計(jì)好了，如何將設(shè)計(jì)的成果展示到店鋪中呢？下面以展示【雨操作步驟步驟1打開淘寶店鋪【賣家中心】頁面，在【店鋪管理】選項(xiàng)欄下點(diǎn)擊【店鋪裝修】按鈕。操作步驟步驟1操作步驟步驟2進(jìn)入【店鋪裝修】頁面，將鼠標(biāo)移動(dòng)至【店鋪招牌】模塊中，然后點(diǎn)擊【編輯】按鈕，打開【店鋪招牌】對(duì)話框，在【店鋪類型】設(shè)置區(qū)中選擇【默認(rèn)招牌】單選鈕；在【店鋪名稱】設(shè)置區(qū)中取消勾選【是否顯示店鋪名稱】復(fù)選框；在【背景圖】設(shè)置區(qū)中點(diǎn)擊【選擇文件】按鈕，彈出【從圖片空間選擇】選項(xiàng)區(qū)。操作步驟步驟2操作步驟步驟3在選項(xiàng)區(qū)中點(diǎn)擊【上傳新圖片】選項(xiàng)卡，在其中點(diǎn)擊【添加圖片】按鈕。操作步驟步驟3操作步驟步驟4在彈出的對(duì)話框中選擇【雨傘店招.jpg】圖片，點(diǎn)擊【打開】按鈕，關(guān)閉對(duì)話框。選擇圖片操作步驟步驟4選擇圖片操作步驟步驟5雨傘店招圖片被上傳至【上傳新圖片】選項(xiàng)區(qū)中，點(diǎn)擊【插入】按鈕。上傳圖片操作步驟步驟5上傳圖片操作步驟步驟6經(jīng)過步驟5的操作，雨傘店招被上傳到【店鋪招牌】對(duì)話框中，在其中點(diǎn)擊【保存】按鈕。操作步驟步驟6操作步驟步驟7保存好以后，雨傘店招顯示在【店鋪裝修】頁面，點(diǎn)擊頁面右上角的【發(fā)布】按鈕，店招會(huì)在【淘寶店鋪】頁面頂部顯示。操作步驟步驟7店招只有在【店鋪裝修】頁面發(fā)布后，買家才可以瀏覽到店招效果，不發(fā)布的話，頁面上顯示的店招還是未裝修之前的效果。店招只有在【店鋪裝修】頁面發(fā)布后，買家才可以瀏覽到店招效果，一個(gè)好的店鋪導(dǎo)航，決定著買家的瀏覽路徑和在店內(nèi)停留的時(shí)間。網(wǎng)店應(yīng)該讓每一個(gè)導(dǎo)航成為店鋪的“導(dǎo)購(gòu)員”，節(jié)約買家時(shí)間。所以在首頁和內(nèi)頁都應(yīng)該合理地設(shè)置導(dǎo)航，讓買家順暢的瀏覽。網(wǎng)店美工贏家寶典(第4章)課件導(dǎo)航區(qū)域可以放置店鋪?zhàn)钪匾男畔?，最多添?2項(xiàng)一級(jí)內(nèi)容，建議不超過7項(xiàng)，二級(jí)內(nèi)容沒有限制。具體設(shè)置步驟如下所示：導(dǎo)航區(qū)域可以放置店鋪?zhàn)钪匾男畔ⅲ疃嗵砑?2項(xiàng)一級(jí)內(nèi)容，建操作步驟步驟1進(jìn)入淘寶店鋪【店鋪裝修】頁面，點(diǎn)擊【導(dǎo)航】模塊右上角的【編輯】按鈕，在彈出的【導(dǎo)航】對(duì)話框中選擇【導(dǎo)航設(shè)置】選項(xiàng)卡，然后點(diǎn)擊【添加】按鈕。操作步驟步驟1步驟2在彈出的【添加導(dǎo)航內(nèi)容】對(duì)話框中可以選擇導(dǎo)航顯示的內(nèi)容，勾選展示內(nèi)容前的復(fù)選框，點(diǎn)擊【確定】按鈕。操作步驟步驟2操作步驟根據(jù)以上操作，我們就完成了店鋪導(dǎo)航的基礎(chǔ)設(shè)置。導(dǎo)航展示了大家需要的內(nèi)容。注意：內(nèi)容不能選擇太多，因?yàn)橄到y(tǒng)導(dǎo)航只有950像素的寬度，如果內(nèi)容超出這個(gè)寬度的范圍，將不顯示選擇的多余內(nèi)容。根據(jù)以上操作，我們就完成了店鋪導(dǎo)航的基礎(chǔ)設(shè)置。導(dǎo)航展示了大家自定義導(dǎo)航是賣家在PS中自己設(shè)計(jì)的導(dǎo)航效果，通過為導(dǎo)航添加鏈接來完成自定義導(dǎo)航內(nèi)容。在這里以節(jié)中的通欄店招為例進(jìn)行實(shí)例操作，具體操作步驟如下：自定義導(dǎo)航是賣家在PS中自己設(shè)計(jì)的導(dǎo)航效果，通過為導(dǎo)航添加鏈步驟1打開在節(jié)已經(jīng)設(shè)計(jì)好的店招和導(dǎo)航條，在工具箱中選擇【裁剪工具】，沿著參考線裁剪圖像，將其保存為名稱為【店招】的JPEG格式圖像。操作步驟步驟1操作步驟步驟2打開Dreamweaver軟件，在【文件】面板【淘寶店鋪代碼】站點(diǎn)中新建【untitled.html】文件，在編輯框中將除【.html】以外的文字刪除，然后在【.html】左側(cè)輸入【導(dǎo)航】，按【Enter】鍵確認(rèn)操作，重命名文件。操作步驟新建并重命名文件步驟2操作步驟新建并重命名文件步驟3雙擊打開【導(dǎo)航】文件，點(diǎn)擊【代碼】按鈕，并刪除頁面中的所有代碼。操作步驟刪除所有代碼步驟3操作步驟刪除所有代碼步驟4點(diǎn)擊【設(shè)計(jì)】按鈕返回設(shè)計(jì)操作頁面，選擇【表格】按鈕，打開【表格】對(duì)話框，在其中設(shè)置參數(shù)，點(diǎn)擊【確定】按鈕，新建一個(gè)表格。操作步驟新建表格步驟4操作步驟新建表格步驟5鼠標(biāo)點(diǎn)擊制作好的表格內(nèi)容區(qū)域，點(diǎn)擊【圖像】按鈕，在彈出的【選擇圖像源文件】對(duì)話框中選擇已保存的【店招.jpg】，點(diǎn)擊【確定】按鈕。系統(tǒng)會(huì)彈出2個(gè)提示框，依次選擇【否】和【取消】命令，完成插入圖片的操作。操作步驟插入圖片步驟5操作步驟插入圖片步驟6點(diǎn)擊【圖像】按鈕右側(cè)的下拉三角按鈕，在彈出的下拉列表中選擇【繪制矩形熱點(diǎn)】命令。操作步驟選擇【繪制矩形熱點(diǎn)】命令步驟6操作步驟選擇【繪制矩形熱點(diǎn)】命令步驟7將鼠標(biāo)移至店招圖像上，在【首頁】模塊上按住鼠標(biāo)左鍵并拖動(dòng)，繪制矩形熱點(diǎn)，然后依次覆蓋店招圖像中導(dǎo)航條上的其他模塊信息。操作步驟步驟7操作步驟步驟8鼠標(biāo)點(diǎn)擊其中一個(gè)繪制好的矩形熱點(diǎn)，在【屬性】面板中添加鏈接地址，【目標(biāo)】選擇為【_blank】。操作步驟添加鏈接地址步驟8操作步驟添加鏈接地址步驟9依次添加好鏈接之后，點(diǎn)擊【代碼】按鈕，將【<map>】與【</map>】之間所有的代碼全部剪切（快捷鍵為【Ctrl+X】），然后粘貼到【<imgsrc="圖片地址"/>】后側(cè)。操作步驟編輯代碼步驟9操作步驟編輯代碼步驟10將代碼中【Map】屬性全部改成【Map031】因?yàn)樘詫毦W(wǎng)站中有【Map】屬性，所以我們需要改一下屬性名。依次按【Ctrl+A】【Ctrl+C】組合鍵，復(fù)制全部代碼。操作步驟編輯代碼步驟10操作步驟編輯代碼步驟11進(jìn)入淘寶【店鋪裝修】頁面，點(diǎn)擊【店鋪招牌】模塊右上角的【編輯】按鈕在彈出的【店招招牌】對(duì)話框中選擇【自定義招牌】單選鈕，點(diǎn)擊【源碼】按鈕，然后將Dreamweaver【導(dǎo)航】文件中所有的代碼粘貼到代碼編輯區(qū)域內(nèi)，并將【高度】更改為【150px】，點(diǎn)擊【確定】按鈕完成操作。操作步驟完成操作步驟11操作步驟完成操作將圖層隱藏后，再次點(diǎn)擊該圖層左邊的區(qū)域可重新顯示被隱藏的圖層。模塊信息后需要跳轉(zhuǎn)的頁面地址。例如，為首頁添加鏈接地址，需要到淘寶頁面點(diǎn)擊店鋪首頁，在瀏覽器上方出現(xiàn)的地址就是鏈接地址。將圖層隱藏后，再次點(diǎn)擊該圖層左邊的區(qū)域可重新顯示被隱藏的圖層多樣化的特效導(dǎo)航指的是利用CSS代碼編輯系統(tǒng)導(dǎo)航樣式。CSS也叫層疊樣式表單，是用于（增強(qiáng)）控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標(biāo)記性語言。店鋪導(dǎo)航開放CSS設(shè)定，是為了讓賣家通過CSS代碼將導(dǎo)航條更加完美地展現(xiàn)出來。具體操作步驟如下：多樣化的特效導(dǎo)航指的是利用CSS代碼編輯系統(tǒng)導(dǎo)航樣式。CSS步驟1進(jìn)入【店鋪裝修】頁面，點(diǎn)擊【導(dǎo)航】模塊右上角的【編輯】按鈕，在彈出的【導(dǎo)航】對(duì)話框中點(diǎn)擊【顯示設(shè)置】選項(xiàng)卡，在編寫區(qū)域內(nèi)編輯代碼。操作步驟步驟1操作步驟操作步驟步驟2進(jìn)入【店鋪裝修】頁面，點(diǎn)擊【導(dǎo)航】模塊右上角的【編輯】按鈕，在彈出的【導(dǎo)航】對(duì)話框中點(diǎn)擊【顯示設(shè)置】選項(xiàng)卡，在編寫區(qū)域內(nèi)編輯代碼。特效代碼在操作的時(shí)候，只修改顏色的數(shù)值就可以了。操作步驟步驟2特效代碼在操作的時(shí)候，只修改顏色的數(shù)值就可以操作步驟步驟3將代碼復(fù)制到編輯區(qū)內(nèi)，點(diǎn)擊【確定】按鈕即可看到多樣化導(dǎo)航的最終效果。顏色值可以根據(jù)自己喜歡的顏色進(jìn)行更改，在Photoshop中可以取顏色值。操作步驟步驟3顏色值可以根據(jù)自己喜歡的顏色進(jìn)行更改，在Ph頁頭背景指的是店招上除去中間尺寸為950像素的左右兩端的位置。網(wǎng)店美工贏家寶典(第4章)課件在這里以節(jié)中設(shè)計(jì)的通欄店招為例，設(shè)置其頁頭背景。具體操作步驟如下：在這里以節(jié)中設(shè)計(jì)的通欄店招為例，設(shè)置其頁頭背景。具體操作步驟操作步驟步驟1在Photoshop軟件中打開【通欄店招.jpg】文件，按【Ctrl+；】組合鍵，顯示參考線。打開素材文件操作步驟步驟1打開素材文件操作步驟步驟2店招寬度為1920像素，選擇【矩形選框工具】，在店招圖像上第1條和第3條垂直參考線之間拖動(dòng)鼠標(biāo)，繪制矩形選區(qū)，寬度為950像素。在工具箱中設(shè)置前景的色值為【#FFFFFF】，按【Alt+Delete】組合鍵，為選區(qū)填充前景色，按【Ctrl+D】組合鍵取消選區(qū)。繪制矩形選區(qū)填充顏色并取消選區(qū)操作步驟步驟2繪制矩形選區(qū)填充顏色并取消選區(qū)操作步驟步驟3執(zhí)行【文件】丨【存儲(chǔ)為Web所用格式】命令，打開【存儲(chǔ)為Web所用格式】對(duì)話框，保持參數(shù)不變，點(diǎn)擊【存儲(chǔ)】按鈕。操作步驟步驟3操作步驟步驟4打開【將優(yōu)化結(jié)果存儲(chǔ)為】對(duì)話框，在其中設(shè)置存儲(chǔ)位置為【桌面】，【文件名】為【頁頭背景.jpg】，點(diǎn)擊【保存】按鈕，將頁頭背景存儲(chǔ)在桌面上。存儲(chǔ)后效果操作步驟步驟4存儲(chǔ)后效果頁頭背景存儲(chǔ)不能超過200K，如果K數(shù)過大，可以利用節(jié)介紹的方法降低圖片品質(zhì)來更改圖片K數(shù)。頁頭背景存儲(chǔ)不能超過200K，如果K數(shù)過大，可以利用節(jié)介紹在節(jié)中已經(jīng)將頁頭背景存儲(chǔ)在桌面上，那么如何將制作好的頁頭背景上傳到店鋪中呢？具體操作步驟如下：在節(jié)中已經(jīng)將頁頭背景存儲(chǔ)在桌面上，那么如何將制作好的頁頭背景操作步驟步驟1進(jìn)入【店鋪裝修】頁面，點(diǎn)擊左側(cè)的【頁頭】按鈕。操作步驟步驟1步驟2在彈出的到頁頭背景操作頁面中設(shè)置【頁頭下邊距10像素】為【關(guān)閉】，點(diǎn)擊【更換圖片】按鈕，更換桌面上的頁頭背景圖，設(shè)置【背景顯示】為【不平鋪】，【背景對(duì)齊】為【居中】，點(diǎn)擊【應(yīng)用到所有頁面】按鈕，完成對(duì)頁頭背景的設(shè)置。操作步驟步驟2操作步驟操作步驟步驟3點(diǎn)擊【店鋪裝修】頁面左上角的【發(fā)布】按鈕，將頁頭背景展示給買家。點(diǎn)擊【應(yīng)用到所有頁面】按鈕以后，頁頭背景才會(huì)在淘寶店鋪的各個(gè)頁面顯示，不然只會(huì)在首頁顯示。操作步驟步驟3點(diǎn)擊【應(yīng)用到所有頁面】按鈕以后，頁頭背景才會(huì)贏家寶典網(wǎng)店美工贏家寶典贏家寶典網(wǎng)店美工贏家寶典品牌展示的窗口之店鋪頁頭第4章Areyouready?品牌展示的窗口之第4Areyouready?第4章品牌展示的窗口之店鋪頁頭與眾不同的Logo設(shè)計(jì)個(gè)性化店鋪招牌設(shè)計(jì)完善店鋪導(dǎo)航模塊頁頭背景設(shè)計(jì)第4章品牌展示的窗口之店鋪頁頭與眾不同的Logo設(shè)計(jì)個(gè)性Logo（標(biāo)志）作為一種特殊的視覺符號(hào)，是店鋪形象、特征、信譽(yù)、文化的濃縮。它的作用是將店鋪的經(jīng)營(yíng)理念、經(jīng)營(yíng)內(nèi)容、品牌文化等要素傳達(dá)給買家，使買家能夠記住該品牌，從而形成品牌烙印。網(wǎng)店美工贏家寶典(第4章)課件Logo從形態(tài)上大致可分為三大類型：文字Logo、圖形Logo和圖文Logo。Logo從形態(tài)上大致可分為三大類型：文字Logo、圖形Log文字Logo文字logo主要包括漢字標(biāo)志、拉丁字母標(biāo)志和數(shù)字標(biāo)志，其中拉丁字母標(biāo)志在文字Logo設(shè)計(jì)中占主導(dǎo)地位。此類標(biāo)志看上去簡(jiǎn)約卻不簡(jiǎn)單，設(shè)計(jì)前要對(duì)文字結(jié)構(gòu)要有深入的了解，抓住其特點(diǎn)，可進(jìn)行適當(dāng)夸張、變形和美化等加工。文字Logo也是使用最廣泛的一類標(biāo)志，事實(shí)上，很多國(guó)際性的大公司都在使用這種標(biāo)志，如SONY，IBM。文字Logo文字logo主要包括漢字標(biāo)圖形Logo圖形logo通過幾何圖案或象形圖案來表示的標(biāo)志。圖形標(biāo)志可分為3種，即具象圖形標(biāo)志、抽象圖形標(biāo)志與具象抽象相結(jié)合的標(biāo)志。相對(duì)于文字Logo來說，圖形Logo通過形狀的變化更加直觀、形象，視覺吸引力更強(qiáng)，如iPhone的標(biāo)志。圖形Logo圖形logo通過幾何圖案或圖文logo圖文組合標(biāo)志集中了文字標(biāo)志和圖形標(biāo)志的長(zhǎng)處，克服了兩者的不足，讓平淡無味的圖形和文字瞬間變得美麗、漂亮起來，如綠色食品標(biāo)志。圖文Logo圖文logo圖文組合標(biāo)志集中了文字標(biāo)志和圖形標(biāo)志的長(zhǎng)處，克服Logo不僅僅是圖形或文字的組合，也是依據(jù)企業(yè)的構(gòu)成結(jié)構(gòu)、行業(yè)類別、經(jīng)營(yíng)理念并充分考慮標(biāo)志接觸的對(duì)象和應(yīng)用環(huán)境，為產(chǎn)品制定的標(biāo)準(zhǔn)視覺符號(hào)。在設(shè)計(jì)之前，首先要對(duì)產(chǎn)品做全面深入的了解。下面以“石榴汁”為例，制作名為“石榴汁”的商品Logo，首先，要開始思考石榴給人的感覺，鮮紅色的外表和顆粒飽滿的果實(shí)。針對(duì)石榴的形態(tài)，Logo的標(biāo)準(zhǔn)色可以采用紅色，類型可以采用圖文Logo進(jìn)行設(shè)計(jì)，具體操作步驟如下：石榴Logo不僅僅是圖形或文字的組合，也是依據(jù)企業(yè)的構(gòu)成結(jié)構(gòu)、行操作步驟步驟1打開PhotoshopCS6軟件，執(zhí)行【文件】丨【新建】命令，快捷鍵為【Ctrl+N】，在打開的【新建】對(duì)話框中設(shè)置屬性，點(diǎn)擊【確定】按鈕，新建一個(gè)文檔?！拘陆ā繉?duì)話框操作步驟步驟1【新建】對(duì)話框操作步驟步驟2在工具箱中選擇【圓角矩形工具】，在工具選項(xiàng)欄中點(diǎn)擊【設(shè)置形狀填充類型】按鈕，在打開的下拉色板中點(diǎn)擊按鈕，打開【拾色器（填充顏色）】對(duì)話框，在其中設(shè)置填充顏色值為【#fd3336】，點(diǎn)擊【確定】按鈕，再設(shè)置【半徑】為【30像素】。操作步驟步驟2操作步驟步驟3屬性設(shè)置好后，在圖像上按住鼠標(biāo)左鍵并拖動(dòng)繪制一個(gè)圓角矩形。在【圖層】面板【圓角矩形1】上點(diǎn)擊鼠標(biāo)右鍵，在彈出的菜單中選擇【柵格化圖層】。繪制一個(gè)圓角矩形操作步驟步驟3繪制一個(gè)圓角矩形柵格化圖圖層操作步驟柵格化圖圖層操作步驟操作步驟步驟4在工具箱中選擇【鋼筆工具】，在工具選項(xiàng)欄中選擇【工具模式】為【形狀】，設(shè)置【填充】顏色值為【#ffffff】，【描邊】為【無】，然后在圖像上繪制如左圖所示的形狀。繪制形狀操作步驟步驟4繪制形狀操作步驟步驟5按【Ctrl+Enter】組合鍵，將路徑轉(zhuǎn)換為選區(qū)，按【Delete】鍵刪除選區(qū)內(nèi)的圖像，按【Ctrl+D】組合鍵取消選區(qū)。刪除部分圖像操作步驟步驟5刪除部分圖像操作步驟步驟6在工具箱中選擇【橫排文字工具】，在工具選項(xiàng)欄中設(shè)置【字體】為【造字工房朗倩】，【字體大小】為【149點(diǎn)】，【消除鋸齒方法】為【銳利】，【文本顏色】為白色（#ffffff）。操作步驟步驟6操作步驟步驟7將鼠標(biāo)移動(dòng)到圖像左側(cè)，點(diǎn)擊鼠標(biāo)左鍵，待閃爍光標(biāo)出現(xiàn)后輸入【石榴汁】文字，然后按【Ctrl+Enter】組合鍵確認(rèn)輸入。操作步驟步驟7操作步驟步驟8在【圖層】面板中選中文字圖層【石榴汁】，單點(diǎn)擊鼠標(biāo)右鍵，在彈出的菜單中選擇【柵格化文字】。柵格化文字操作步驟步驟8柵格化文字操作步驟步驟9在工具箱中選擇【橡皮擦工具】，在工具選項(xiàng)欄中設(shè)置【大小】為【20像素】，【硬度】為【100%】，【不透明度】為【100%】，在圖像上拖動(dòng)鼠標(biāo)將【汁】字的【氵】擦除。操作步驟步驟9操作步驟步驟10選擇【鋼筆工具】，在工具選項(xiàng)欄中選擇【形狀】，設(shè)置【顏色】為白色，然后在圖像上繪制如左圖所示形狀。繪制形狀操作步驟步驟10繪制形狀操作步驟步驟11在工具箱中選擇【橫排文字工具】，在工具選項(xiàng)欄中設(shè)置屬性。在圖像上輸入【POMEGRANATESAUCE】，使Logo看起來不那么單一。輸入文字操作步驟步驟11輸入文字操作步驟步驟12在【圖層】面板中復(fù)制【圓角矩形1】圖層，得到【圓角矩形1副本】圖層，再次復(fù)制【圓角矩形1】圖層，得到【圓角矩形1副本2】圖層。操作步驟步驟12操作步驟步驟13在【圖層】面板中選中【圓角矩形1】圖層，點(diǎn)擊面板底部的【添加圖層樣式】按鈕，在彈出的菜單中選擇【顏色疊加】命令，在彈出的【圖層樣式】對(duì)話框中點(diǎn)擊【設(shè)置填充顏色】按鈕，在彈出的【拾色器（疊加顏色）】對(duì)話框中設(shè)置填充顏色值為【#008606】，依次點(diǎn)擊兩次【確定】按鈕，為圖形疊加顏色。操作步驟步驟13操作步驟步驟14按鍵盤上的【↑】鍵，將添加圖層樣式后的圖像向上移動(dòng)。向上移動(dòng)圖像操作步驟步驟14向上移動(dòng)圖像操作步驟步驟15利用步驟12～13中的操作方法，為【圓角矩形1副本】圖層添加【顏色疊加】圖層樣式，其中填充顏色值為【#ffffff】。調(diào)整圖形位置后。添加圖層樣式并移動(dòng)位置操作步驟步驟15添加圖層樣式并移動(dòng)位置操作步驟步驟16按【Ctrl+Shift+Alt+E】組合鍵蓋印圖層，將所有圖層合成一個(gè)新的圖層。蓋印圖層操作步驟步驟16蓋印圖層操作步驟步驟17打開本書配套素材【1.jpg】圖像文件，在制作好的【石榴汁.psd】圖像窗口中石榴汁Logo上按住鼠標(biāo)左鍵不放并向【1.jpg】圖像窗口中拖動(dòng)，至合適位置后釋放鼠標(biāo)按鈕，復(fù)制石榴汁Logo。打開素材文件并復(fù)制圖像操作步驟步驟17打開素材文件并復(fù)制圖像制作完成的Logo不但可以作為店鋪品牌形象符號(hào)應(yīng)用于店招、海報(bào)中，還可以應(yīng)用于產(chǎn)品主圖等位置。制作完成的Logo不但可以作為店鋪品牌形象符號(hào)應(yīng)用于店招、海店鋪招牌就是店鋪的招牌，簡(jiǎn)稱店招，從品牌推廣的角度來看，在繁華的地段一個(gè)好的店招不光標(biāo)志著的店鋪?zhàn)涞?，更起到戶外廣告的作用。網(wǎng)店美工贏家寶典(第4章)課件店鋪招牌是品牌展示的窗口，整個(gè)淘寶店鋪只有一個(gè)店招，無論點(diǎn)擊哪個(gè)頁面，店鋪招牌都會(huì)顯示在最上方，所以店招是店鋪中最重要的一部分。店鋪招牌在設(shè)計(jì)的過程中要遵循兩點(diǎn)準(zhǔn)則：美觀性和功能性。美觀性是指店鋪招牌的設(shè)計(jì)不但符合店鋪產(chǎn)品，還能夠吸引買家眼球。功能性是指店招要有明確的品牌定位和產(chǎn)品定位。品牌定位可以讓買家在腦海中產(chǎn)生品牌烙印，產(chǎn)品定位可以讓買家明確的知道店鋪出售的是什么商品。下面將兩款店招進(jìn)行對(duì)比，大家通過這兩款店招來分別猜一猜店鋪出售的是什么商品：店鋪招牌是品牌展示的窗口，整個(gè)淘寶店鋪只有一個(gè)店招，無論點(diǎn)擊第一款店招第二款店招店招效果對(duì)比第一款第二款店招效果對(duì)比從第一款店招的唯美程度來看，我們可以猜出店鋪所賣的產(chǎn)品可能是女性用品，但是具體出售的是什么產(chǎn)品就無從而知了。再看第二款店招，從設(shè)計(jì)角度分析，不如第一款店招設(shè)計(jì)的好看，吸引人眼球，但是單從店招上我們可以看出店鋪所賣的產(chǎn)品是面膜，而且是補(bǔ)水面膜，雖然設(shè)計(jì)上比不上第一款店招，但是第二款店招不但加入了店鋪名稱、產(chǎn)品圖片和產(chǎn)品功效，還利用文字和背景色的鮮明對(duì)比，讓買家可以很清晰的了解該店鋪的產(chǎn)品定位。因此，店招的設(shè)計(jì)不但要考慮它的美觀性，還要考慮它的功能性。從第一款店招的唯美程度來看，我們可以猜出店鋪所賣的產(chǎn)品可能是基礎(chǔ)店招主要應(yīng)用于旺鋪基礎(chǔ)版本，因?yàn)槭敲赓M(fèi)版本，所以無法設(shè)計(jì)太多內(nèi)容，重點(diǎn)設(shè)計(jì)店招部分。淘寶對(duì)基礎(chǔ)店招的尺寸要求是950×120像素（如果高度超過120像素，導(dǎo)航條顯示可能異常），可以上傳GIF，JPG，JPEG和PNG，共4種圖片格式。下面以雨傘的店鋪為例制作一款店招，在制作店招之前需要搜集素材，如天空的圖片，因?yàn)橛陚闩c天空有關(guān)。在制作店招的時(shí)候不要盲目的進(jìn)行設(shè)計(jì)，可以從產(chǎn)品本身關(guān)聯(lián)周圍環(huán)境入手?；A(chǔ)店招主要應(yīng)用于旺鋪基礎(chǔ)版本，因?yàn)槭敲赓M(fèi)版本，所以無法設(shè)計(jì)操作步驟步驟1在執(zhí)行【文件】丨【新建】命令，打開【新建】對(duì)話框，在其中設(shè)置參數(shù)，點(diǎn)擊【確定】按鈕，新建空白文檔?！拘陆ā繉?duì)話框操作步驟步驟1【新建】對(duì)話框操作步驟步驟2打開本書配套素材【2.jpg】文件，將其中的天空?qǐng)D片拖到【雨傘店招.psd】圖像窗口中，適當(dāng)調(diào)整位置。復(fù)制素材文件操作步驟步驟2復(fù)制素材文件操作步驟步驟3打開執(zhí)行【圖像】丨【調(diào)整】丨【色相/飽和度】命令，如圖4-29所示，快捷鍵為【Ctrl+U】。選擇【色相/飽和度】操作步驟步驟3選擇【色相/飽和度】操作步驟步驟4在彈出的【色相/飽和度】對(duì)話框中調(diào)整【色相】的值為【-20】，使晴朗的天空?qǐng)D片變得清澈一些，制造清新的意境，設(shè)置好后點(diǎn)擊【確定】按鈕。操作步驟步驟4操作步驟步驟5在工具箱中選擇【油漆桶工具】，設(shè)置前景色色值為【#15bfd2】。在【圖層】面板中選中【背景】圖層，然后在圖像上點(diǎn)擊鼠標(biāo)左鍵，為背景圖像填充前景色。操作步驟步驟5操作步驟步驟6在工具箱中選擇【畫筆工具】，在工具選項(xiàng)欄中設(shè)置畫筆【大小】為【150像素】，【硬度】為【0%】，【不透明度】為【50%】。選擇【色相/飽和度】操作步驟步驟6選擇【色相/飽和度】操作步驟步驟7在【圖層】面板中選中【圖層1】，然后點(diǎn)擊面板底部的【添加圖層蒙版】按鈕，為【圖層1】添加蒙版。添加圖層蒙版操作步驟步驟7添加圖層蒙版操作步驟步驟8在天空?qǐng)D片上拖動(dòng)鼠標(biāo)進(jìn)行涂抹，將多余的云彩涂抹掉，使圖片看上去更唯美。步驟9打開本書配套素材【3.psd】文件，將其中的雨傘圖像拖至【雨傘店招.psd】圖像窗口中，并且移動(dòng)到合適的位置。操作步驟步驟8步驟9操作步驟步驟10在【圖層】調(diào)板中復(fù)制【圖層2】圖層，得到【圖層2副本】圖層，然后選中【圖層2】圖層。執(zhí)行【編輯】丨【自由變換】命令（快捷鍵為【Ctrl+T】）顯示自由變換框，在框內(nèi)點(diǎn)擊鼠標(biāo)右鍵，在彈出的菜單中選擇【垂直翻轉(zhuǎn)】命令，翻轉(zhuǎn)雨傘圖像，按【Enter】鍵確認(rèn)操作，移動(dòng)位置后，為雨傘添加陰影效果。自由變換圖像添加陰影效果操作步驟步驟10自由變換圖像添加陰影效果操作步驟步驟11在按【Ctrl+U】組合鍵，在彈出的【色彩/飽和度】對(duì)話框中調(diào)整【色相】的值為【17】，【飽和度】的值為【-21】，【明度】的值為【-25】，點(diǎn)擊【確定】按鈕，使雨傘的投影效果更加有意境。操作步驟步驟11操作步驟步驟12在工具箱中選擇【橫排文字工具】，設(shè)置【文體】為【方正蘭亭中黑體】，【文字大小】為【24點(diǎn)】，【文本顏色】的值為【#00c8ff】，然后在圖像的合適位置輸入【天堂傘官方旗艦店】。輸入文字操作步驟步驟12輸入文字操作步驟步驟13在點(diǎn)擊【圖層】面板底部的【添加圖層樣式】按鈕，選擇【描邊】命令，在彈出【圖層樣式】對(duì)話框中設(shè)置參數(shù)，點(diǎn)擊【確定】按鈕，如圖4-40所示，為文字添加描邊圖層樣式。添加描邊圖層樣式操作步驟步驟13添加描邊圖層樣式操作步驟步驟14利用【橫排文字工具】在圖像上的合適位置輸入其他文字內(nèi)容，如店鋪的經(jīng)營(yíng)類目，也可以添加一些英文語句來完善店招的布局。輸入其他文字內(nèi)容字體：微軟雅黑；大小：6點(diǎn)；顏色值：#adf8fe字體：宋體；大?。?2點(diǎn)；顏色值：#fda444操作步驟步驟14輸入其他文字內(nèi)容字體：微軟雅黑；字體：宋體操作步驟步驟15在【圖層】面板中點(diǎn)擊【新建圖層】按鈕，利用【畫筆工具】進(jìn)行涂抹。新建圖層操作步驟步驟15新建圖層操作步驟步驟16在工具箱中選擇【畫筆工具】，設(shè)置畫筆【大小】為【108像素】，【硬度】為【0%】，前景色的值為【#edfbf7】，然后在圖像上拖動(dòng)鼠標(biāo)進(jìn)行涂抹，繪制淺色背景。操作步驟步驟16操作步驟步驟17利用步驟16中的操作方法，分別設(shè)置前景色的值為【#f4d5c0】【#a4f2ef】【#19c1d4】，然后分別在在圖像中進(jìn)行涂抹，畫筆的大小可以根據(jù)所需涂抹的部分而定。按【Ctrl+S】組合鍵保存文件，再保存一份JPEG格式。操作步驟步驟17對(duì)于剛接觸店招設(shè)計(jì)的新手來說，店招的布局是很頭疼的一件事，不知道該如何布局才能夠讓店招看起來舒服、好看，還能體現(xiàn)的全面，這時(shí)候可以參考一些同行業(yè)的店招設(shè)計(jì)，模仿自己喜歡的店招布局，從而提升自己的設(shè)計(jì)能力。對(duì)于剛接觸店招設(shè)計(jì)的新手來說，店招的布局是很頭疼的一件事，不通欄店招主要應(yīng)用于旺鋪專業(yè)版本，可以利用其中的自定義店招模塊，對(duì)店招進(jìn)行多元化的設(shè)計(jì)，使店招整體看上去更美觀，淘寶對(duì)通欄店招的尺寸要求是1920×150像素（150像素內(nèi)包含店招和導(dǎo)航兩部分，每部分所占的比例可以自己布局），可以上傳GIF，JPG，JPEG和PNG四種圖片格式。通欄店招寬度雖然可以制作成1920像素，但是店招和導(dǎo)航條上的文字內(nèi)容，依舊建議C店的放在950像素之內(nèi)，天貓店的放在990像素之內(nèi)。原因是如果店招上的文字需要添加超鏈接，那么超過950像素（或者990像素）的部分是無法添加超鏈接的，但是，為了店招的美觀度，超過950像素（或者990像素）的部分可以用圖片代替。通欄店招通欄店招主要應(yīng)用于旺鋪專業(yè)版本，可以利用其中的自定義店招模塊操作步驟步驟1在Photoshop中新建一個(gè)名稱為通欄店招，尺寸為1920×150像素的空白文檔。在工具箱中選擇【油漆桶工具】，設(shè)置前景色的值為【#010b2f】，然后在圖像上點(diǎn)擊鼠標(biāo)左鍵為背景填充顏色。填充顏色操作步驟步驟1填充顏色操作步驟步驟2打開本書配套素材【4.jpg】文件，將其中的圖像拖到【店招.psd】圖像窗口中。復(fù)制素材文件操作步驟步驟2復(fù)制素材文件操作步驟步驟3執(zhí)行【濾鏡】丨【模糊】丨【高斯模糊】命令，在彈出的【高斯模糊】對(duì)話框中設(shè)置【半徑（R）】為【170像素】，點(diǎn)擊【確定】按鈕，模糊圖像。半徑像素越大，圖片就會(huì)越模糊，不同的圖片模糊的效果不同，可以通過這種方式增加背景的高光顏色。利用【高斯模糊】命令調(diào)整圖像操作步驟步驟3利用【高斯模糊】命令調(diào)整圖像操作步驟步驟4執(zhí)行【視圖】丨【標(biāo)尺】命令啟動(dòng)標(biāo)尺，快捷鍵為【Ctrl+R】，然后將鼠標(biāo)光標(biāo)移動(dòng)到垂直標(biāo)尺上，按住鼠標(biāo)并向右拖動(dòng)至485像素的位置后釋放鼠標(biāo)按鈕，創(chuàng)建垂直參考線。創(chuàng)建垂直參考線操作步驟步驟4創(chuàng)建垂直參考線操作步驟步驟5利用步驟4中的操作方法，分別在960像素和1435像素的位置創(chuàng)建垂直參考線，這樣可以直觀地看出圖片的中心位置和950像素以內(nèi)的位置。操作步驟步驟5操作步驟步驟6打開本書配套素材【5.psd】文件，將Logo圖像拖至【通欄店招.psd】圖像窗口中，并放置在第1條垂直參考線的右側(cè)。利用【橫排文字工具】在Logo圖像的右側(cè)輸入如右圖所示的文字。字體：漢儀菱心體簡(jiǎn)；大?。?5點(diǎn)；顏色值：#ffffff字體：方正蘭亭纖黑體；大小：12點(diǎn)；顏色值：#ffffff操作步驟步驟6字體：漢儀菱心體簡(jiǎn)；字體：方正蘭亭纖黑體；步驟7在工具箱中選擇【直線工具】，在工具選項(xiàng)欄中設(shè)置【填充】的值為【#ffffff】，【粗細(xì)】為【1像素】，然后在圖像上按住鼠標(biāo)從上至下拖動(dòng)繪制直線。操作步驟步驟7操作步驟操作步驟步驟8此時(shí)在【圖層】面板中自動(dòng)創(chuàng)建【形狀1】圖層，點(diǎn)擊面板底部的【添加圖層蒙版】按鈕，為【形狀1】圖層創(chuàng)建一個(gè)圖層蒙版。創(chuàng)建圖層蒙版操作步驟步驟8創(chuàng)建圖層蒙版操作步驟步驟9在工具箱中選擇【漸變工具】，在工具選項(xiàng)欄中點(diǎn)擊【點(diǎn)按可編輯漸變】按鈕，在打開的【漸變編輯器】對(duì)話框中漸變顏色條的下方點(diǎn)擊，創(chuàng)建一個(gè)色標(biāo)。然后雙擊右側(cè)的色標(biāo)，在打開的【拾色器（色標(biāo)顏色）】對(duì)話框中設(shè)置顏色值為【#000000】。利用同樣的方法，設(shè)置中間的色標(biāo)顏色值為【#ffffff】。創(chuàng)建色標(biāo)操作步驟步驟9創(chuàng)建色標(biāo)設(shè)置色標(biāo)顏色操作步驟設(shè)置色標(biāo)顏色操作步驟操作步驟步驟10在圖像上從直線形狀頂點(diǎn)向終點(diǎn)拖動(dòng)鼠標(biāo)，得到兩邊尖的分割線條，這種光效線條在作圖過程中會(huì)經(jīng)常用到。操作步驟步驟10操作步驟步驟11打開本書配套素材【6.psd】文件，將其中的主推商品圖片拖動(dòng)到【通欄店招.psd】圖像窗口中第3條垂直參考線的左側(cè)。在工具箱中選擇【橫排文字工具】，在助推商品圖片的左側(cè)輸入如右圖所示的文字。字體：方正蘭亭中黑；大小：點(diǎn)；顏色值：#fff000字體：Impact；大小：點(diǎn)；顏色值：#fff000字體：Impact；大?。?4點(diǎn)；顏色值：#fff000輸入文字操作步驟步驟11字體：方正蘭亭中黑；字體：Impact；字操作步驟步驟12在工具箱中選擇【圓角矩形工具】，在工具選項(xiàng)欄中設(shè)置填充顏色值為【#ff9c03】，【半徑】為【30像素】，然后在圖像上繪制圓角矩形，并在圓角矩形上輸入【明星產(chǎn)品】。字體：方正蘭亭細(xì)黑；大?。狐c(diǎn)；顏色值：#000d30繪制圓角矩形并輸入文字操作步驟步驟12字體：方正蘭亭細(xì)黑；繪制圓角矩形并輸入文字操作步驟步驟13在工具箱中選擇【圓角矩形工具】，設(shè)置填充顏色值為【#3349b8】，【半徑】為【6像素】，然后在圖像上第1條參考線右側(cè)繪制圓角矩形，在圖像中只留上半部分，保留高度大約為30像素即可。利用【橫排文字工具】在圓角矩形上輸入【首頁】。字體：方正蘭亭黑；大?。?5點(diǎn)；顏色值：#ededef操作步驟步驟13字體：方正蘭亭黑；操作步驟步驟14利用步驟13中的操作方法，在導(dǎo)航條的位置輸入其他店鋪分類信息。制作導(dǎo)航條操作步驟步驟14制作導(dǎo)航條操作步驟步驟15在工具箱中選擇【自定形狀工具】，在工具選項(xiàng)欄中設(shè)置填充顏色值【#ffffff】，點(diǎn)擊【形狀】右側(cè)的下拉三角按鈕，在打開的下拉列表中選擇選擇【紅心形卡】，然后在圖像上拖動(dòng)鼠標(biāo)繪制心形。操作步驟步驟15操作步驟步驟16至此，完成了通欄店招案例的整體制作步驟。按【Ctrl+S】組合鍵保存文件，再保存一份JPEG格式。在這里我們制作的通欄店招較為簡(jiǎn)單，讀者可以根據(jù)自己的喜好進(jìn)行發(fā)揮。另外，在繪制圖形時(shí)，按住【Shift】鍵的同時(shí)拖動(dòng)鼠標(biāo)繪制圖形，可以得到正比例圖形。最終效果操作步驟步驟16在這里我們制作的通欄店招較為簡(jiǎn)單，讀者可以店招設(shè)計(jì)好了，如何將設(shè)計(jì)的成果展示到店鋪中呢？下面以展示【雨傘店招】為例對(duì)其進(jìn)行詳細(xì)講解。具體設(shè)置步驟如下所示：店招設(shè)計(jì)好了，如何將設(shè)計(jì)的成果展示到店鋪中呢？下面以展示【雨操作步驟步驟1打開淘寶店鋪【賣家中心】頁面，在【店鋪管理】選項(xiàng)欄下點(diǎn)擊【店鋪裝修】按鈕。操作步驟步驟1操作步驟步驟2進(jìn)入【店鋪裝修】頁面，將鼠標(biāo)移動(dòng)至【店鋪招牌】模塊中，然后點(diǎn)擊【編輯】按鈕，打開【店鋪招牌】對(duì)話框，在【店鋪類型】設(shè)置區(qū)中選擇【默認(rèn)招牌】單選鈕；在【店鋪名稱】設(shè)置區(qū)中取消勾選【是否顯示店鋪名稱】復(fù)選框；在【背景圖】設(shè)置區(qū)中點(diǎn)擊【選擇文件】按鈕，彈出【從圖片空間選擇】選項(xiàng)區(qū)。操作步驟步驟2操作步驟步驟3在選項(xiàng)區(qū)中點(diǎn)擊【上傳新圖片】選項(xiàng)卡，在其中點(diǎn)擊【添加圖片】按鈕。操作步驟步驟3操作步驟步驟4在彈出的對(duì)話框中選擇【雨傘店招.jpg】圖片，點(diǎn)擊【打開】按鈕，關(guān)閉對(duì)話框。選擇圖片操作步驟步驟4選擇圖片操作步驟步驟5雨傘店招圖片被上傳至【上傳新圖片】選項(xiàng)區(qū)中，點(diǎn)擊【插入】按鈕。上傳圖片操作步驟步驟5上傳圖片操作步驟步驟6經(jīng)過步驟5的操作，雨傘店招被上傳到【店鋪招牌】對(duì)話框中，在其中點(diǎn)擊【保存】按鈕。操作步驟步驟6操作步驟步驟7保存好以后，雨傘店招顯示在【店鋪裝修】頁面，點(diǎn)擊頁面右上角的【發(fā)布】按鈕，店招會(huì)在【淘寶店鋪】頁面頂部顯示。操作步驟步驟7店招只有在【店鋪裝修】頁面發(fā)布后，買家才可以瀏覽到店招效果，不發(fā)布的話，頁面上顯示的店招還是未裝修之前的效果。店招只有在【店鋪裝修】頁面發(fā)布后，買家才可以瀏覽到店招效果，一個(gè)好的店鋪導(dǎo)航，決定著買家的瀏覽路徑和在店內(nèi)停留的時(shí)間。網(wǎng)店應(yīng)該讓每一個(gè)導(dǎo)航成為店鋪的“導(dǎo)購(gòu)員”，節(jié)約買家時(shí)間。所以在首頁和內(nèi)頁都應(yīng)該合理地設(shè)置導(dǎo)航，讓買家順暢的瀏覽。網(wǎng)店美工贏家寶典(第4章)課件導(dǎo)航區(qū)域可以放置店鋪?zhàn)钪匾男畔ⅲ疃嗵砑?2項(xiàng)一級(jí)內(nèi)容，建議不超過7項(xiàng)，二級(jí)內(nèi)容沒有限制。具體設(shè)置步驟如下所示：導(dǎo)航區(qū)域可以放置店鋪?zhàn)钪匾男畔ⅲ疃嗵砑?2項(xiàng)一級(jí)內(nèi)容，建操作步驟步驟1進(jìn)入淘寶店鋪【店鋪裝修】頁面，點(diǎn)擊【導(dǎo)航】模塊右上角的【編輯】按鈕，在彈出的【導(dǎo)航】對(duì)話框中選擇【導(dǎo)航設(shè)置】選項(xiàng)卡，然后點(diǎn)擊【添加】按鈕。操作步驟步驟1步驟2在彈出的【添加導(dǎo)航內(nèi)容】對(duì)話框中可以選擇導(dǎo)航顯示的內(nèi)容，勾選展示內(nèi)容前的復(fù)選框，點(diǎn)擊【確定】按鈕。操作步驟步驟2操作步驟根據(jù)以上操作，我們就完成了店鋪導(dǎo)航的基礎(chǔ)設(shè)置。導(dǎo)航展示了大家需要的內(nèi)容。注意：內(nèi)容不能選擇太多，因?yàn)橄到y(tǒng)導(dǎo)航只有950像素的寬度，如果內(nèi)容超出這個(gè)寬度的范圍，將不顯示選擇的多余內(nèi)容。根據(jù)以上操作，我們就完成了店鋪導(dǎo)航的基礎(chǔ)設(shè)置。導(dǎo)航展示了大家自定義導(dǎo)航是賣家在PS中自己設(shè)計(jì)的導(dǎo)航效果，通過為導(dǎo)航添加鏈接來完成自定義導(dǎo)航內(nèi)容。在這里以節(jié)中的通欄店招為例進(jìn)行實(shí)例操作，具體操作步驟如下：自定義導(dǎo)航是賣家在PS中自己設(shè)計(jì)的導(dǎo)航效果，通過為導(dǎo)航添加鏈步驟1打開在節(jié)已經(jīng)設(shè)計(jì)好的店招和導(dǎo)航條，在工具箱中選擇【裁剪工具】，沿著參考線裁剪圖像，將其保存為名稱為【店招】的JPEG格式圖像。操作步驟步驟1操作步驟步驟2打開Dreamweaver軟件，在【文件】面板【淘寶店鋪代碼】站點(diǎn)中新建【untitled.html】文件，在編輯框中將除【.html】以外的文字刪除，然后在【.html】左側(cè)輸入【導(dǎo)航】，按【Enter】鍵確認(rèn)操作，重命名文件。操作步驟新建并重命名文件步驟2操作步驟新建并重命名文件步驟3雙擊打開【導(dǎo)航】文件，點(diǎn)擊【代碼】按鈕，并刪除頁面中的所有代碼。操作步驟刪除所有代碼步驟3操作步驟刪除所有代碼步驟4點(diǎn)擊【設(shè)計(jì)】按鈕返回設(shè)計(jì)操作頁面，選