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

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