photoshop天貓網(wǎng)店美工與廣告設(shè)計實戰(zhàn)從入門到精通教案第10章導(dǎo)航條

第10章導(dǎo)航條設(shè)計實例54時尚簡潔風(fēng)格的導(dǎo)航條設(shè)計實例55布紋質(zhì)感風(fēng)格的導(dǎo)航條設(shè)計實例

突顯立體感的導(dǎo)航條設(shè)計實例

清爽活潑風(fēng)格的導(dǎo)航條設(shè)計實例58木紋質(zhì)感風(fēng)格的導(dǎo)航條設(shè)計實例54時尚簡潔風(fēng)格的導(dǎo)航條設(shè)計本實例是簡潔風(fēng)格的導(dǎo)航條圖片，在配色時選擇暗紅色為主色，給人溫暖的視覺感受，在導(dǎo)航條中間用紅色的互補(bǔ)色綠色作為底色，將店鋪的名稱、徽標(biāo)突顯出來，對店鋪品牌進(jìn)行強(qiáng)調(diào)，給顧客留下深刻印象。網(wǎng)店裝修的概念步驟01：在新建文件中為背景填充顏色啟動Photoshop程序，將背景色設(shè)置為R242、G239、B220，執(zhí)行“文件>新建”菜單命令，打開“新建”對話框，根據(jù)網(wǎng)店導(dǎo)航條的尺寸要求在“新建”對話框中設(shè)置選項，單擊“確定”按鈕，新建一個空白文件。由于此實例需要制作簡潔風(fēng)格的導(dǎo)航條，因此在設(shè)計前需要定義畫面的背景主色，并創(chuàng)建“導(dǎo)航條”圖層組。步驟02：創(chuàng)建復(fù)合圖形選擇“矩形工具”，設(shè)置前景色為黑色，在畫面左側(cè)單擊并拖曳鼠標(biāo)，繪制一個黑色的矩形。選擇“鋼筆工具”，單擊選項欄中的“路徑操作”按鈕，在展開的下拉列表中單擊“合并形狀”選項，繪制圖形，創(chuàng)建復(fù)合形狀。步驟03：設(shè)置并應(yīng)用樣式為了讓繪制的圖形與店鋪裝修風(fēng)格更統(tǒng)一，可以對圖形顏色進(jìn)行調(diào)整。執(zhí)行“圖層>圖層樣式>漸變疊加”菜單命令，打開“圖層樣式”對話框，在對話框中設(shè)置“漸變疊加”選項，為圖像疊加漸變顏色。步驟04：復(fù)制圖形調(diào)整大小并設(shè)置圖層樣式調(diào)整了圖形大小，但是兩個圖形的顏色相同，無法表現(xiàn)疊加的畫面效果。雙擊圖層，打開“圖層樣式”對話框，在對話框中重新對樣式進(jìn)行設(shè)置。設(shè)置完成后單擊“確定”按鈕，應(yīng)用樣式效果。步驟05：使用“矩形工具”繪制灰色矩形為了讓繪制的圖形表現(xiàn)出立體的視覺效果，需要進(jìn)行投影的添加。設(shè)置前景色為R39、G39、B39，選擇“矩形工具”，在選項欄中設(shè)置各選項，在之前繪制好的圖形下單擊并拖曳鼠標(biāo)，繪制深灰色矩形。步驟06：用“漸變工具”設(shè)置漸隱效果選擇“漸變工具”，單擊“漸變”拾色器下的“黑，白漸變”，從深灰色矩形底部向上拖曳，釋放鼠標(biāo)后，得到漸隱的圖形效果，此時可以看到添加投影后的效果。步驟07：使用“畫筆工具”編輯圖層蒙版為了讓添加的投影顯得更自然，選擇“畫筆工具”，設(shè)置前景色為黑色，降低不透明度后，在灰色矩形兩側(cè)單擊并涂抹，經(jīng)過反復(fù)涂抹，隱藏圖形。步驟08：繪制三角形使用“鋼筆工具”繪制三角形。繪制完后，發(fā)現(xiàn)繪制的三角形與下方的圖形顏色反差太明顯了。因此執(zhí)行“圖層>圖層樣式>顏色疊加”菜單命令，打開“圖層樣式”對話框，在對話框中將顏色設(shè)置為R62、G17、B0，設(shè)置后單擊“確定”按鈕，應(yīng)用樣式，統(tǒng)一畫面色調(diào)。步驟09：使用“矩形工具”繪制灰色矩形經(jīng)過前面的操作，完成了導(dǎo)航條左側(cè)外形輪廓的繪制，接下來是導(dǎo)航條中間部分的繪制。選擇“矩形工具”，設(shè)置繪制模式為“形狀”，填充顏色為灰色，在畫面中間單擊并拖曳鼠標(biāo)，繪制一個灰色的矩形。步驟10：設(shè)置多個圖層樣式繪制圖形后需要統(tǒng)一圖形顏色，執(zhí)行“圖層>圖層樣式>描邊”菜單命令，打開“圖層樣式”對話框，在對話框中勾選“描邊”“內(nèi)陰影”和“顏色疊加”樣式，并設(shè)置對應(yīng)的樣式選項。步驟11：設(shè)置并應(yīng)用樣式復(fù)制并調(diào)整圖形大小后，發(fā)現(xiàn)兩個圖形顏色太相近，無法區(qū)分開來。因此執(zhí)行“圖層>圖層樣式>內(nèi)陰影”菜單命令，打開“圖層樣式”對話框，在對話框中設(shè)置“內(nèi)陰影”和“顏色疊加”樣式，設(shè)置完成后單擊“確定”按鈕，應(yīng)用樣式效果。步驟12：使用“橫排文字工具”輸入導(dǎo)航信息繼續(xù)使用同樣的方法，運(yùn)用圖形繪制工具繪制更多圖形，得到更完整的導(dǎo)航條輪廓。繪制完成導(dǎo)航條輪廓后，接下來就根據(jù)店鋪中商品的分類，輸入分類信息。選擇“橫排文字工具”，在導(dǎo)航條上方輸入文字，輸入后打開“字符”面板，將文字字體設(shè)置為較工整的黑體，方便顧客閱讀。步驟13：設(shè)置“投影”樣式為了讓輸入的文字更有立體感，雙擊文字圖層，打開“圖層樣式”對話框，在對話框中勾選

“投影”復(fù)選框，并設(shè)置“投影”選項。設(shè)置

后單擊“確定”按鈕，應(yīng)用樣式，為文字添加

投影效果。步驟14：設(shè)置并應(yīng)用樣式使用“橫排文字工具”輸入分類信息。為了加深顧

客對店鋪品牌的印象，繼續(xù)在導(dǎo)航條中繪制標(biāo)志圖

案。新建“店鋪LOGO”圖層組，設(shè)置前景色為R95、

G87、B35，選擇“橢圓工具”，按住Shift鍵不放，

在導(dǎo)航條中間位置單擊并拖曳鼠標(biāo)，繪制一個正圓

圖形。執(zhí)行“圖層>圖層樣式>描邊”菜單命令，打

開“圖層樣式”對話框，在對話框中設(shè)置選項，為

繪制的圓形添加樣式，得到風(fēng)格更為統(tǒng)一的畫面。步驟15：復(fù)制圖形調(diào)整樣式連續(xù)按下快捷鍵Ctrl+J，復(fù)制“橢圓1”圖層，得到“橢圓1拷貝”和“橢圓1拷貝2”圖層，按下快捷鍵Ctrl+T，打開自由變換編輯框，調(diào)整復(fù)制的圖形大小。調(diào)整大小后根據(jù)畫面效果對樣式做適當(dāng)?shù)恼{(diào)整，得到疊加的圓形圖形。步驟16：使用“橫排文字工具”輸入店鋪名使用“橢圓工具”在綠色圓下方繪制黑色橢圓，添加圖層蒙版，隱藏部分圖形，創(chuàng)建投影效果。選擇

“橫排文字工具”，在圓形中間位置單擊并輸入店鋪名稱，為了增強(qiáng)視覺沖擊力，按下快捷鍵Ctrl+T，打開自由變換編輯框，并在選項欄中設(shè)置“旋轉(zhuǎn)角度”為-10，旋轉(zhuǎn)文字效果。步驟17：使用“自定形狀工具”繪制裝飾圖案選擇“自定形狀工具”，單擊“形狀”右側(cè)的下拉按鈕，在展開的“形狀”拾色器中單擊“花3”形狀，在店鋪名稱旁邊單擊并拖曳鼠標(biāo)，繪制花朵圖案，完成店鋪徽標(biāo)圖案的設(shè)計。至此，已完成本實例的制作。實例55布紋質(zhì)感風(fēng)格的導(dǎo)航條設(shè)計本實例是為牛仔專賣店設(shè)計的導(dǎo)航條，在導(dǎo)航欄中將與主題相關(guān)的牛仔褲素材圖像疊加于導(dǎo)航條上方，深化了主題，顧客通過圖片就能清楚地知道店鋪所銷售的主要商品。為了增強(qiáng)畫面的質(zhì)感，在導(dǎo)航條中將圖層樣式疊加起來，表現(xiàn)更有質(zhì)感的畫面效果。步驟01：設(shè)置“添加雜色”添加顆粒效果將背景定義為藍(lán)色，將前景色設(shè)置為R51、G58、

B68，使用“矩形工具”繪制一個比背景稍大的矩形。為了讓背景表現(xiàn)出紋理質(zhì)感，執(zhí)行“濾鏡>雜色>添加雜色”菜單命令，打開“添加雜色”對話框，在對話框中設(shè)置選項，單擊“確定”按鈕，為圖像添加雜色效果。步驟02：使用樣式為背景增強(qiáng)紋理添加雜色后發(fā)現(xiàn)圖形的質(zhì)感不是很明顯，執(zhí)行“圖層>圖層樣式>斜面和浮雕”菜單命令，打開“圖層樣式”對話框，在對話框中設(shè)置“斜面和浮雕”選項，再勾選“紋理”樣式，單擊“水彩”紋理，設(shè)置后單擊“確定”按鈕，應(yīng)用樣式。創(chuàng)建“曲線1”調(diào)整圖層，打開“屬性”面板。由于添加樣式后背景顯得太亮，因此單擊并向下拖曳曲線，降低背景亮度。步驟03：使用“矩形工具”繪制導(dǎo)航條輪廓經(jīng)過前面幾步操作，完成了導(dǎo)航條背景的設(shè)計，接下來就是導(dǎo)航條的制作。新建“導(dǎo)航條”圖層組，將前景色設(shè)置為R48、

G104、B120，選擇“圓角矩形工具”，設(shè)置繪制模式為“形

狀”，“半徑”為3像素，在畫面中間單擊并拖曳鼠標(biāo)，繪制圓角矩形。步驟04：用“添加錨點(diǎn)工具”添加路徑錨點(diǎn)為了讓繪制的導(dǎo)航條更有創(chuàng)意，可以對導(dǎo)航條進(jìn)行變形。選擇“直接選擇工具”，單擊繪制的圓角矩形，選擇“添加錨點(diǎn)工具”，在圓角矩形右側(cè)的路徑上單擊，添加一個路徑錨點(diǎn)。步驟05：使用“轉(zhuǎn)換點(diǎn)工具”轉(zhuǎn)換路徑錨點(diǎn)選擇“轉(zhuǎn)換點(diǎn)工具”，將鼠標(biāo)移至在路徑上添加的錨點(diǎn)位置，單擊將錨點(diǎn)轉(zhuǎn)換為直角錨點(diǎn)，然后用“直接選擇工具”單擊并向右拖曳該錨點(diǎn)，更改圖形外形。步驟06：設(shè)置多個圖層樣式這里還需要在繪制的導(dǎo)航條中添加紋理以增強(qiáng)質(zhì)感。執(zhí)行“圖層>圖層樣式>斜面和浮雕”菜單命令，打開“圖層樣式”對話框，在對話框中勾選“斜面和浮雕”“內(nèi)陰影”“投影”復(fù)選框，然后在對話框右側(cè)為勾選的圖層樣式設(shè)置選項。步驟09：設(shè)置多個圖層樣式確?！皥A角矩形1拷貝”圖層為選中狀態(tài)，雙擊該圖層，打開“圖層樣式”對話框，在對話框中勾選“描邊”“內(nèi)陰影”“投影”和“顏色疊加”復(fù)選框，并設(shè)置對應(yīng)的樣式選項，取消“斜面和浮雕”樣式的勾選狀態(tài)。步驟07：設(shè)置并應(yīng)用樣式效果繼續(xù)對圖層樣式進(jìn)行設(shè)置，勾選“顏色疊加”復(fù)選框，設(shè)置顏色疊加選項。設(shè)置完成后單擊“確定”按鈕，應(yīng)用樣式效果。步驟08：使用“圓角矩形工具”繪制矩形添加樣式后，雖然圖形看起來更有立體感了，但是感覺立體感不強(qiáng)。所以按下快捷鍵Ctrl+J，復(fù)制

“圓角矩形”圖層，創(chuàng)建“圓角矩形1拷貝”圖層。步驟10：復(fù)制圖像更改混合模式為了迎合牛仔專賣這一主題，打開素材文件01.jpg，這是一張店鋪中的牛仔褲上身效果圖，把這張圖像

復(fù)制到導(dǎo)航條上方，得到“圖層1”圖層，將圖層混合模式設(shè)置為“濾色”，“不透明度”設(shè)置為65%，然后執(zhí)行“編輯>變換>逆時針旋轉(zhuǎn)90度”菜單命令，旋轉(zhuǎn)圖像。步驟11：載入并復(fù)制選區(qū)內(nèi)的圖像由于此處只需要在導(dǎo)航條上疊加牛仔布紋理，所以按

住Ctrl鍵不放，單擊“圓角矩形1”圖層縮覽圖，載入

選區(qū)。選擇“圖層1”圖層，單擊“圖層”面板中的

“添加圖層蒙版”按鈕，添加蒙版，隱藏多余的圖像。步驟12：疊加紋理圖像將打開的圖像復(fù)制到導(dǎo)航條上，得到“圖層2”圖層，更改圖層混合模式后，復(fù)制圖層，調(diào)整位置，使牛

仔布紋理填滿整個導(dǎo)航條。步驟13：設(shè)置并輸入文字選擇“橫排文字工具”，打開“字符”面板，為了

方便顧客閱讀，設(shè)置導(dǎo)航文字字體為較工整的黑體，然后在導(dǎo)航條上輸入文字。輸入后雙擊文字圖層，

打開“圖層樣式”對話框，設(shè)置“投影”樣式，為

文字添加投影效果。步驟14：添加更多裝飾元素使用圖形繪制工具在導(dǎo)航條右側(cè)繪制圖形，并根據(jù)畫面需要添加樣式，得到更加漂亮的導(dǎo)航條效果。實例56突顯立體感的導(dǎo)航條設(shè)計本實例是為某家居用品店設(shè)計的導(dǎo)航條，將絲帶運(yùn)用到導(dǎo)航條的設(shè)計中增加了時尚感，反復(fù)卷起的帶子給畫面增加了動態(tài)感，通過動靜結(jié)合的表現(xiàn)方式吸引眼球。同時將店鋪紅包放置到導(dǎo)航條中，利用店鋪紅包優(yōu)惠的方式提高店鋪點(diǎn)擊率。步驟01：為背景填充顏色啟動Photoshop程序，新建文件。設(shè)置前景色為R220、G217、B198，選擇“矩形工具”，沿文件邊緣單擊并拖曳鼠標(biāo)，繪制一個與文檔同等大小的矩形。步驟02：使用“圓角矩形工具”繪制圖形此實例是為天貓店鋪店慶設(shè)計的導(dǎo)航條，為了突出店慶氛圍，用鮮艷的紅色作為導(dǎo)航條背景顏色。選擇

“圓角矩形工具”，在選項欄中設(shè)置繪制模式為“形狀”，填充顏色為R40、G40、B38，“半徑”為10像素，在畫面中間位置單擊并拖曳鼠標(biāo)，繪制圓角矩形效果。步驟03：使用“刪除錨點(diǎn)工具”刪除路徑錨點(diǎn)為了使導(dǎo)航條更加新穎，可對圖形進(jìn)行變形。選擇

“刪除錨點(diǎn)工具”，將鼠標(biāo)移至圓角矩形左下角的錨點(diǎn)位置，單擊鼠標(biāo)，彈出提示對話框，單擊對話框中的“是”按鈕，刪除路徑錨點(diǎn)。步驟04：使用“轉(zhuǎn)換點(diǎn)工具”轉(zhuǎn)換路徑錨點(diǎn)選擇“轉(zhuǎn)換點(diǎn)工具”，將鼠標(biāo)移至要轉(zhuǎn)換的路徑錨點(diǎn)處，單擊鼠標(biāo)，將錨點(diǎn)轉(zhuǎn)換為直線錨點(diǎn)。步驟05：移動錨點(diǎn)位置選擇“直接選擇工具”，單擊轉(zhuǎn)換后的路徑錨點(diǎn)，將其選中，然后按下鍵盤中的左方向鍵，移動錨點(diǎn)位置。繼續(xù)使用同樣的操作方法，對圓角矩形右下角進(jìn)行變形，將其更改為直角矩形效果。步驟06：復(fù)制圖形更改顏色按下快捷鍵Ctrl+J，復(fù)制圖層，得到“圓角矩形1拷貝”圖層。這里想要制作疊加的圖形效果，因此按下快捷鍵Ctrl+T，打開自由變換編輯框，將鼠標(biāo)移至編輯框邊緣，對圖形進(jìn)行輕微的縮小操作。為了區(qū)別圖形的前后關(guān)系，單擊“圓角矩形1拷貝”圖層縮覽圖，將圖形填充顏色更改為R40、G40、B38。步驟07：設(shè)置并應(yīng)用樣式效果調(diào)整圖形顏色后，還需要為圖形設(shè)置紋理。雙擊“圓角矩形1拷貝”圖層，打開“圖層樣式”對話框，在對話框中勾選“斜面和浮雕”復(fù)選框，設(shè)置“斜面和浮雕”樣式；再勾選“紋理”復(fù)選框，設(shè)置“垂直線1”樣式。設(shè)置后單擊“確定”按鈕，應(yīng)用樣式。步驟08：復(fù)制圖形并進(jìn)行變形為了使繪制的導(dǎo)航條呈現(xiàn)更自然的立體效果，按下快捷鍵Ctrl+J，復(fù)制圖形并將其填充顏色更改為R203、G203、B203。選擇“直接選擇工具”，單擊圖形，選中圖形上面的錨點(diǎn)，結(jié)合“添加錨點(diǎn)工具”對圖形進(jìn)行變形，得到更有創(chuàng)意的圖形效果。步驟09：設(shè)置“紋理”樣式復(fù)制圖形時，圖形上的紋理也會隨之復(fù)制。為了使圖形上的紋理更豐富，執(zhí)行“圖層>圖層樣式>斜面和浮雕”菜單命令，打開“圖層樣式”對話框，在對話框中更改“紋理”選項，單擊“確定”按鈕，應(yīng)用樣式。步驟13：設(shè)置“漸變疊加”樣式繪制圖形后，為了讓圖形表現(xiàn)出立體感，雙擊圖層，打開“圖層樣式”對話框，在對話框中勾選“漸變疊加”復(fù)選框，設(shè)置“漸變疊加”樣式選項。設(shè)置后單擊“確定”按鈕，應(yīng)用樣式效果步驟10：使用“矩形選框工具”繪制選區(qū)選擇“矩形選框工具”，在深灰色矩形下半部分單擊并拖曳鼠標(biāo)，繪制矩形選區(qū)。步驟11：反選選區(qū)添加圖層蒙版執(zhí)行“選擇>反選”菜單命令，反選選區(qū)。單擊“圓角矩形1”圖層，單擊“圖層”面板中的“添加圖層蒙版”按鈕，添加蒙版，隱藏圖形。步驟12：使用“矩形工具”繪制紅色矩形設(shè)置前景色為R155、G13、B3，選擇“矩形工具”，在選項欄中設(shè)置繪制模式為

“形狀”，填充顏色為前景色，在灰色矩形中間單擊并拖曳鼠標(biāo)，繪制紅色矩形。步驟14：繪制更多圖形繼續(xù)使用同樣的方法，結(jié)合圖形繪制工具和圖層樣式，在導(dǎo)航條上繪制更多的圖形效果。步驟16：設(shè)置并輸入文字選擇“橫排文字工具”，在紅包旁邊輸入文字“進(jìn)店有禮”。輸入后打開“字符”面板，為了突出這部分文字信息，將文字字體設(shè)置為較粗的迷你簡少兒字體。，步驟15：復(fù)制圖像更改圖層混合模式為了獲得更多顧客的關(guān)注，可以在導(dǎo)航條中添加紅包。將圖像移到多邊形圖層下方按下快捷鍵Ctrl+J，復(fù)制紅包圖像，調(diào)整圖層混合模式，增強(qiáng)顏色。步驟17：使用“直線工具”繪制線條繼續(xù)使用“橫排文字工具”在導(dǎo)航條上完成更多導(dǎo)航文字的輸入。輸入后選擇“直線工具”，設(shè)置“粗細(xì)”為2像素，在導(dǎo)航信息中間繪制白色的線條；按下快捷鍵

Ctrl+J，復(fù)制多個線條圖形，將文字分隔開來。步驟18：創(chuàng)建圖層蒙版設(shè)置漸隱效果最后為線條圖層添加蒙版，選擇“漸變工具”，在“漸變”拾色器中單擊“黑，白漸變”，從線條上方往下拖曳漸變，創(chuàng)建漸隱的線條效果。實例57清爽活潑風(fēng)格的導(dǎo)航條設(shè)計本實例是為一家寵物用品店設(shè)計的導(dǎo)航條，畫面通過非常微妙的色調(diào)差異營造出精致、細(xì)膩的效果，在畫面中添加草地、花朵、蝴蝶等元素更是增強(qiáng)了整個圖像的活力。為了迎合主題，設(shè)計時還將卡通動物店鋪徽標(biāo)置于畫面中間位置，讓主題顯得更為醒目。設(shè)計分析設(shè)計要點(diǎn)01：導(dǎo)航條選擇飽和度較低的深灰綠，為顧客營造出一種更為舒適的色彩感受，將淺綠色的植物添加到導(dǎo)航條上，為畫面增添生機(jī)。設(shè)計要點(diǎn)02：視覺中心位置的正六邊形圖形，填充白色到灰色的漸變，增強(qiáng)了層次感，突出了中間的店鋪徽標(biāo)。設(shè)計要點(diǎn)03：導(dǎo)航條中的文字采用中、英文對比的設(shè)計方式，增強(qiáng)了文字的可讀性。布局分析本實例在布局的設(shè)計中，使用了十字交叉來劃分版面，給人帶來更穩(wěn)定、踏實的感覺。位于十字線上的內(nèi)容為主要內(nèi)容，而交叉位置是整個設(shè)計的中心，通過規(guī)則的正六邊形來表現(xiàn)，將店鋪徽標(biāo)放置其中，加深了品牌印象。配色方案整體的配色以明度較低的綠色為主，讓畫面不會因色彩太

強(qiáng)而產(chǎn)生視覺刺激感，同時在綠色的畫面中適當(dāng)加入紅色、橙色，弱化了畫面的單調(diào)感，使畫面顯得更有生機(jī)。技術(shù)要點(diǎn)使用“圓角矩形工具”繪制導(dǎo)航條，復(fù)