Photoshop UI設(shè)計(jì)實(shí)戰(zhàn)案例教程（移動(dòng)端+Web端） 課件 第6章 Web UI 導(dǎo)航 組件創(chuàng)意設(shè)計(jì)

PhotoshopUI設(shè)計(jì)實(shí)戰(zhàn)案例教程(移動(dòng)端+Web端)第6章WebUI導(dǎo)航組件創(chuàng)意設(shè)計(jì)本章概述：第6章主要介紹了WebUI導(dǎo)航組件創(chuàng)意設(shè)計(jì)。首先闡述了WebUI的主要導(dǎo)航組件，包括頂部導(dǎo)航（常見于首頁，有帶下拉菜單和直接跳轉(zhuǎn)兩種交互方式）、側(cè)邊導(dǎo)航（用于次級頁面，有單層級和多層級兩種樣式）和面包屑導(dǎo)航（輕量級，顯示頁面層級結(jié)構(gòu)）。接著通過實(shí)例講解創(chuàng)意設(shè)計(jì)，如用燈光照亮側(cè)邊導(dǎo)航欄，繪制菜單底板背景和燈光效果，包括不同模糊度的圖層模擬光照、智能對象和高斯模糊創(chuàng)建磨砂玻璃效果等；頂部導(dǎo)航欄展開菜單設(shè)計(jì)，涉及繪制展開菜單、添加圖標(biāo)及設(shè)置樣式等；還介紹了拓展訓(xùn)練，如制作圓形導(dǎo)航菜單，包括設(shè)計(jì)左側(cè)圖文內(nèi)容流和右側(cè)圓盤菜單組件等。第6章WebUI導(dǎo)航組件創(chuàng)意設(shè)計(jì)6.1WebUI的主要導(dǎo)航組件6.2實(shí)例1:用燈光照亮側(cè)邊導(dǎo)航欄6.3實(shí)例2:頂部導(dǎo)航欄展開菜單設(shè)計(jì)6.4拓展訓(xùn)練:制作圓形導(dǎo)航菜單本節(jié)概述該節(jié)主要介紹了WebUI的主要導(dǎo)航組件，具體內(nèi)容如下：6.1WebUI的主要導(dǎo)航組件1.頂部導(dǎo)航位置與布局：是網(wǎng)站最常見的導(dǎo)航形式，位于頁面最頂部的一行橫跨整個(gè)頁面的通欄中，多為左右布局，左側(cè)是導(dǎo)航菜單，右側(cè)是注冊/登錄入口、用戶頭像等元素交互方式分類帶下拉菜單：單擊或鼠標(biāo)指針懸停于導(dǎo)航標(biāo)簽后會展開下拉菜單，展示二級導(dǎo)航菜單項(xiàng)，菜單樣式有單欄、多欄二級菜單甚至更復(fù)雜的父子級結(jié)構(gòu)，視覺樣式以文字為主，部分會加小圖標(biāo)，也有以圖片為主體的設(shè)計(jì)。直接前往對應(yīng)頁面：單擊導(dǎo)航標(biāo)簽后直接前往對應(yīng)頁面，這兩種交互方式可能同時(shí)出現(xiàn)在同一個(gè)網(wǎng)站上。2.側(cè)邊導(dǎo)航位置與應(yīng)用場景：通常用于首頁之下的次級頁面，位于頁面左側(cè)，菜單項(xiàng)縱向排列。樣式分類單層級菜單：僅有單個(gè)層級菜單。多層級菜單（樹狀菜單）：可以展開多層級菜單。少數(shù)側(cè)邊導(dǎo)航會放在網(wǎng)頁右側(cè)。3.面包屑導(dǎo)航位置與視覺特點(diǎn)：常見于網(wǎng)頁主體內(nèi)容上方，視覺上通常比較小而輕，是整個(gè)頁面最小的一類組件。設(shè)計(jì)要點(diǎn)符合導(dǎo)航習(xí)慣：鏈接順序應(yīng)符合用戶從左到右的導(dǎo)航習(xí)慣。清晰表達(dá)層級：鏈接文本必須能清晰地表達(dá)導(dǎo)航層級。區(qū)分可單擊性：樣式上應(yīng)區(qū)分可單擊和不可單擊，保證用戶單擊后能夠正確返回相應(yīng)的導(dǎo)航層級，且應(yīng)在頁面顯著位置展示，但不過于顯眼。6.1.1頂部導(dǎo)航1.布局位置頂部導(dǎo)航是網(wǎng)站常見的導(dǎo)航形式，多位于頁面最頂部的一行橫跨整個(gè)頁面的通欄中。其布局通常為左右布局，左側(cè)為導(dǎo)航菜單，右側(cè)包含注冊/登錄入口、用戶頭像等元素。2.交互方式帶下拉菜單這種交互方式下，當(dāng)單擊或者鼠標(biāo)指針懸停于導(dǎo)航標(biāo)簽后，會展開下拉菜單展示二級導(dǎo)航菜單項(xiàng)。其菜單樣式豐富多樣，有較為簡單的單欄菜單，二級導(dǎo)航項(xiàng)較少；也有復(fù)雜的多欄二級菜單樣式，甚至是更復(fù)雜的父子級結(jié)構(gòu)樣式。在視覺樣式上，多數(shù)以文字為主，部分可能會加上小圖標(biāo)輔助識別。不過，也存在一些設(shè)計(jì)大膽的網(wǎng)頁，其頂部導(dǎo)航的下拉菜單采用以圖片為主體的設(shè)計(jì)，并且采用少見的橫排布局。3.直接跳轉(zhuǎn)單擊導(dǎo)航標(biāo)簽后直接前往對應(yīng)頁面。這兩種交互方式各具特點(diǎn)，并且在實(shí)際應(yīng)用中，它們可能會同時(shí)出現(xiàn)在同一個(gè)網(wǎng)站上，根據(jù)不同的需求混合使用，以滿足網(wǎng)站的導(dǎo)航功能和用戶體驗(yàn)需求。6.1WebUI的主要導(dǎo)航組件6.1.2側(cè)邊導(dǎo)航1.位置與應(yīng)用場景側(cè)邊導(dǎo)航在網(wǎng)站架構(gòu)中具有特定的位置和應(yīng)用場景。它通常用于首頁之下的次級頁面，即當(dāng)用戶從首頁頂部導(dǎo)航欄單擊菜單項(xiàng)之后進(jìn)入的網(wǎng)頁，側(cè)邊導(dǎo)航便開始發(fā)揮作用，為用戶提供進(jìn)一步的導(dǎo)航指引。2.視覺樣式從視覺呈現(xiàn)角度來看，側(cè)邊導(dǎo)航欄通常位于頁面左側(cè)，菜單項(xiàng)縱向排列。這種排列方式符合用戶的閱讀習(xí)慣，方便用戶快速瀏覽和選擇所需的菜單項(xiàng)。3.樣式分類單層級菜單：其中一種側(cè)邊導(dǎo)航樣式是僅有單個(gè)層級菜單。這種樣式較為簡潔，適用于頁面內(nèi)容相對簡單、層級較少的情況。例如華為云官網(wǎng)的“產(chǎn)品”頁面，其側(cè)邊導(dǎo)航采用的就是單層級菜單，用戶可以直接看到所有相關(guān)的產(chǎn)品分類選項(xiàng)。多層級菜單（樹狀菜單）：另一種是可以展開多層級菜單的樹狀菜單。這種樣式適用于頁面內(nèi)容豐富、層級復(fù)雜的情況。例如一些具有復(fù)雜業(yè)務(wù)邏輯和大量信息分類的網(wǎng)頁，其左側(cè)會設(shè)置多層級側(cè)邊導(dǎo)航欄。用戶可以通過點(diǎn)擊菜單項(xiàng)展開下一層級的菜單，逐步深入到具體的內(nèi)容頁面。4.特殊情況雖然大多數(shù)網(wǎng)頁的側(cè)邊導(dǎo)航位于左側(cè)，但也存在極少數(shù)將側(cè)邊導(dǎo)航放在網(wǎng)頁右側(cè)的情況。這種特殊的布局方式可能是出于特定的設(shè)計(jì)需求或網(wǎng)站整體風(fēng)格的考慮，但相對來說不太常見。這種布局方式可能會給用戶帶來一些不同的使用體驗(yàn)，需要在設(shè)計(jì)時(shí)充分考慮用戶的操作習(xí)慣和便利性。6.1WebUI的主要導(dǎo)航組件6.1.3側(cè)邊導(dǎo)航1.位置與視覺特點(diǎn)面包屑導(dǎo)航常見于網(wǎng)頁主體內(nèi)容上方，在視覺上通常比較小而輕，是整個(gè)頁面中相對較小的一類組件。2.設(shè)計(jì)要點(diǎn)符合導(dǎo)航習(xí)慣：其鏈接順序應(yīng)符合用戶從左到右的導(dǎo)航習(xí)慣，這樣能讓用戶更自然地理解頁面層級關(guān)系。清晰表達(dá)層級：鏈接文本必須能清晰地表達(dá)導(dǎo)航層級，使用戶一眼就能明白自己所處的位置以及如何返回上一層級。區(qū)分可單擊性：在樣式上應(yīng)區(qū)分可單擊和不可單擊的部分?？蓡螕舨糠謶?yīng)具有明確的視覺提示，如顏色變化、下劃線等，以保證用戶單擊后能夠正確返回相應(yīng)的導(dǎo)航層級。同時(shí)，面包屑導(dǎo)航應(yīng)在頁面顯著位置展示，但又不過于顯眼，以免影響頁面整體的視覺效果和用戶對主要內(nèi)容的關(guān)注。3.應(yīng)用場景與優(yōu)勢面包屑導(dǎo)航適用于具有多層級頁面結(jié)構(gòu)的網(wǎng)站。它可以幫助用戶快速了解自己在網(wǎng)站中的位置，提供便捷的導(dǎo)航路徑，尤其是當(dāng)用戶需要頻繁在不同層級頁面之間切換時(shí)，面包屑導(dǎo)航能提高用戶的導(dǎo)航效率，減少用戶迷失方向的可能性。與頂部導(dǎo)航和側(cè)邊導(dǎo)航相比，面包屑導(dǎo)航更側(cè)重于展示頁面的層級關(guān)系，以一種簡潔明了的方式輔助用戶導(dǎo)航。6.1WebUI的主要導(dǎo)航組件6.2實(shí)例1:用燈光照亮側(cè)邊導(dǎo)航欄本節(jié)概述設(shè)計(jì)思路通過燈光效果為側(cè)邊導(dǎo)航欄增添視覺吸引力。利用不同的圖層樣式和工具，模擬出燈光照亮導(dǎo)航欄的效果，同時(shí)搭配合理的文字和圖標(biāo)樣式，使導(dǎo)航欄既美觀又實(shí)用。設(shè)計(jì)過程首先繪制側(cè)邊導(dǎo)航欄的底板，用矩形工具繪制特定尺寸的矩形，設(shè)置顏色和不透明度，并添加漸變疊加效果。接著繪制燈光效果，使用橢圓工具繪制橢圓作為發(fā)光區(qū)域，設(shè)置顏色和不透明度后轉(zhuǎn)換為智能對象并添加高斯模糊濾鏡，重復(fù)此步驟繪制多個(gè)不同模糊程度的橢圓層以模擬燈光層次感，還為部分橢圓層添加蒙版并用畫筆工具調(diào)整燈光照射范圍和強(qiáng)度。最后繪制菜單文字及圖標(biāo)，輸入文字并設(shè)置合適的字體、大小、顏色等樣式，同時(shí)為文字添加圖標(biāo)并調(diào)整其大小和位置，使其與文字搭配合理。6.2.1繪制菜單底板背景和燈光照亮效果1.繪制菜單底板背景新建文檔并設(shè)置底層背景：新建一個(gè)1440×1280像素的文檔，將背景圖層轉(zhuǎn)換為普通圖層并命名為“底層背景”，為其添加“徑向”漸變樣式，漸變色條左右兩端色值分別為#53555和#373b41。繪制側(cè)邊欄底板：使用圓角矩形工具繪制一個(gè)300×1180像素的圓角矩形作為側(cè)邊欄底板，設(shè)置“填充”為任意顏色，“描邊”為無，“圓角”半徑為40像素，為其添加“線性”漸變樣式，漸變色條左右兩端色值分別為#17181c和#33333a，“角度”為97度。6.2實(shí)例1:用燈光照亮側(cè)邊導(dǎo)航欄6.2.1繪制菜單底板背景和燈光照亮效果2.繪制燈光照亮效果（1）繪制燈光照亮核心：使用圓角矩形工具繪制一個(gè)特定大小和位置的圓角矩形，命名為“燈光照亮核心”，為其添加“漸變疊加”樣式，漸變色條左右兩端色值分別為#ffdb5e和#ffac4b，“角度”為0度。將該圖層轉(zhuǎn)換為智能對象圖層并添加“高斯模糊”濾鏡和“動(dòng)感模糊”濾鏡。6.2實(shí)例1:用燈光照亮側(cè)邊導(dǎo)航欄6.2.1繪制菜單底板背景和燈光照亮效果2.繪制燈光照亮效果（2）復(fù)制并調(diào)整燈光照亮圖層：重復(fù)按3次Ctrl+J組合鍵復(fù)制3個(gè)圖層，分別重命名為“燈光照亮散射1”“燈光照亮散射2”“燈光照亮散射3”，并設(shè)置不同的放大倍數(shù)、“動(dòng)感模糊”距離、“高斯模糊”半徑和不透明度。最后將所有4個(gè)燈光照亮圖層編組，命名為“燈光照射”。6.2實(shí)例1:用燈光照亮側(cè)邊導(dǎo)航欄6.2.1繪制菜單底板背景和燈光照亮效果3.增加細(xì)節(jié)，繪制描邊照亮效果復(fù)制并設(shè)置菜單項(xiàng)背景底板圖層：復(fù)制一層作為菜單項(xiàng)背景的底板圖層“圓角矩形1”，設(shè)置圖層的“填充”為0%，調(diào)出“圖層樣式”窗口，取消勾選“漸變疊加”樣式，勾選“內(nèi)陰影”，設(shè)置相關(guān)參數(shù)。添加并調(diào)整漸變疊加效果：選中復(fù)制的圖層，按Ctrl+G組合鍵編組并重命名為“描邊照亮”，調(diào)出“圖層樣式”窗口，添加兩個(gè)“漸變疊加”效果，設(shè)置不同的“混合模式”“不透明度”和漸變色條參數(shù)。6.2實(shí)例1:用燈光照亮側(cè)邊導(dǎo)航欄6.2.2繪制被選中照亮的“設(shè)置”菜單項(xiàng)圖標(biāo)1.繪制齒輪圖標(biāo)的基礎(chǔ)效果樣式導(dǎo)入并設(shè)置齒輪圖標(biāo)素材：從素材文件夾中找到“SettingIcon.ai”文件，復(fù)制粘貼到文檔中，重命名為“前層齒輪-基底”，調(diào)出“圖層樣式”窗口，為其添加“漸變疊加”樣式，設(shè)置相關(guān)參數(shù)。6.2實(shí)例1:用燈光照亮側(cè)邊導(dǎo)航欄6.2.2繪制被選中照亮的“設(shè)置”菜單項(xiàng)圖標(biāo)2.繪制齒輪內(nèi)部的光照效果（1）繪制覆蓋齒輪圖標(biāo)的圓形：使用橢圓工具繪制一個(gè)完全覆蓋齒輪圖標(biāo)的圓形矢量形狀，命名為“齒輪發(fā)光描邊1”。（2）創(chuàng)建圖層蒙版：按住Ctrl鍵單擊齒輪圖標(biāo)圖層載入選區(qū)，通過矩形選框工具調(diào)整選區(qū)并反轉(zhuǎn)，以此創(chuàng)建圖層蒙版。將“齒輪發(fā)光描邊1”和“前層齒輪-基底”圖層編組為“前層齒輪-表面”，并獲取齒輪圖標(biāo)外形選區(qū)作為該編組圖層的圖層蒙版。6.2實(shí)例1:用燈光照亮側(cè)邊導(dǎo)航欄6.2.2繪制被選中照亮的“設(shè)置”菜單項(xiàng)圖標(biāo)6.2實(shí)例1:用燈光照亮側(cè)邊導(dǎo)航欄2.繪制齒輪內(nèi)部的光照效果（3）添加漸變疊加和外發(fā)光樣式：雙擊“齒輪發(fā)光描邊1”圖層，調(diào)出“圖層樣式”窗口，添加“漸變疊加”和“外發(fā)光”樣式，設(shè)置相關(guān)參數(shù)。6.2.2繪制被選中照亮的“設(shè)置”菜單項(xiàng)圖標(biāo)6.2實(shí)例1:用燈光照亮側(cè)邊導(dǎo)航欄2.繪制齒輪內(nèi)部的光照效果（4）繪制內(nèi)部發(fā)光描邊圖層：使用類似方法繪制一層齒輪的內(nèi)部發(fā)光描邊圖層“齒輪發(fā)光描邊2”，使其偏左一些，復(fù)制“齒輪發(fā)光描邊1”的圖層樣式粘貼到“齒輪發(fā)光描邊2”上，并調(diào)整不透明度。最后將兩個(gè)圖層編組并重命名為“前層齒輪-內(nèi)部發(fā)光描邊”。6.2.2繪制被選中照亮的“設(shè)置”菜單項(xiàng)圖標(biāo)6.2實(shí)例1:用燈光照亮側(cè)邊導(dǎo)航欄3.繪制齒輪的厚度（1）復(fù)制并移動(dòng)齒輪厚度圖層：選中“前層齒輪-基底”圖層并按Ctrl+J組合鍵復(fù)制，重命名為“齒輪厚度1”，設(shè)置不透明度為50%，移動(dòng)到“前層齒輪-表面”下模擬厚度，按Ctrl+G組合鍵編組并重命名為“前層齒輪-厚度”。（2）復(fù)制并調(diào)整圖層樣式：復(fù)制“齒輪發(fā)光描邊2”圖層的圖層樣式粘貼到“齒輪厚度1”圖層上，關(guān)閉“外發(fā)放光”樣式，將圖層混合模式改為“濾色”，僅更改漸變色條左端手柄的不透明度為40%。（3）進(jìn)一步復(fù)制并移動(dòng)：按Ctrl+J組合鍵復(fù)制“齒輪厚度1”圖層，重命名為“齒輪厚度2”，進(jìn)一步往上和往右移動(dòng)加大厚度，打開“外發(fā)光”圖層樣式。（4）創(chuàng)建厚度效果：按住Ctrl鍵單擊“前層齒輪-基底”圖層調(diào)出齒輪形狀選區(qū)并反轉(zhuǎn)，為“前層齒輪-厚度”編組圖層添加圖層蒙版。6.2.2繪制被選中照亮的“設(shè)置”菜單項(xiàng)圖標(biāo)6.2實(shí)例1:用燈光照亮側(cè)邊導(dǎo)航欄4.繪制后面的一個(gè)齒輪（1）繪制后層齒輪各部分：用繪制前層齒輪相似的步驟，依次繪制“后層齒輪-厚度”“后層齒輪-內(nèi)部發(fā)光描邊”和“后層齒輪-基底”3個(gè)部分，組成后層齒輪，并移動(dòng)到前層齒輪下面。后層齒輪的“后層齒輪-基底”比“前層齒輪”多一個(gè)“漸變疊加”圖層樣式，“后層齒輪-厚度”編組圖層需移動(dòng)到整個(gè)后層齒輪編組內(nèi)的最上層，然后將這三個(gè)圖層編組并添加一個(gè)齒輪形狀反轉(zhuǎn)的選區(qū)作為編組圖層蒙版。（2）編組并設(shè)置參數(shù)：將所有齒輪相關(guān)的圖層編組并命名為“3設(shè)置選中”，設(shè)置相關(guān)參數(shù)。6.2.2繪制被選中照亮的“設(shè)置”菜單項(xiàng)圖標(biāo)6.2實(shí)例1:用燈光照亮側(cè)邊導(dǎo)航欄5.繪制后層齒輪透過前層齒輪顯示的毛玻璃效果（1）復(fù)制并添加模糊濾鏡：復(fù)制“后層齒輪”編組圖層，轉(zhuǎn)換為智能對象圖層，添加一個(gè)“半徑”為6像素的“高斯模糊”濾鏡，然后將其編組，重命名為“后層齒輪-毛玻璃模糊”，添加一個(gè)齒輪外形的圖層蒙版。（2）復(fù)制并調(diào)整內(nèi)部發(fā)光描邊編組圖層：復(fù)制兩層“后層齒輪-內(nèi)部發(fā)光描邊”編組圖層，轉(zhuǎn)換為智能對象圖層，分別重命名為“后層齒輪-內(nèi)部發(fā)光描邊-加強(qiáng)1”和“后層齒輪-內(nèi)部發(fā)光描邊-加強(qiáng)2”，為其添加“半徑”為2像素的“高斯模糊”濾鏡，然后拖到“后層齒輪-毛玻璃模糊”編組中。6.2.3繪制未被選中的日歷圖標(biāo)6.2實(shí)例1:用燈光照亮側(cè)邊導(dǎo)航欄1.繪制前層日歷圖標(biāo)的表面（1）設(shè)置前層日歷圖標(biāo)表面圖層結(jié)構(gòu)和樣式：前層日歷圖標(biāo)表面的圖層結(jié)構(gòu)和設(shè)置圖標(biāo)的前層齒輪圖標(biāo)表面類似，但“漸變疊加”和“外發(fā)光”圖層樣式參數(shù)不同，內(nèi)部發(fā)光描邊編組內(nèi)多一個(gè)編組圖層并添加了從下到上、從明到暗的漸變圖層蒙版。將“前層日歷-基底”圖層的“不透明度”設(shè)為50%，設(shè)置“漸變疊加”圖層樣式參數(shù)。（2）繪制前層日歷發(fā)光描邊圖層：繪制方法與設(shè)置圖標(biāo)相似，將日歷圖標(biāo)的形狀提取為選區(qū)之后反轉(zhuǎn)再略微偏移一些作為圖層蒙版，復(fù)制設(shè)置圖標(biāo)的“齒輪發(fā)光描邊1”圖層的圖層樣式粘貼過來，并將“不透明度”設(shè)為30%。最后將內(nèi)部發(fā)光描邊圖層和基底圖層編組并重命名為“前層日歷-表面”，添加一個(gè)以前層日歷圖標(biāo)形狀為選區(qū)的圖層蒙版。6.2.3繪制未被選中的日歷圖標(biāo)6.2實(shí)例1:用燈光照亮側(cè)邊導(dǎo)航欄2.繪制前層日歷圖標(biāo)的厚度（3）復(fù)制并設(shè)置厚度圖層樣式：復(fù)制“前層日歷-基底”圖層，重命名為“前層日歷-厚度1100%”，提高不透明度至100%，修改“漸變疊加”圖層樣式參數(shù)，按方向鍵使其日歷圖標(biāo)表面偏離一段距離模擬厚度。（4）復(fù)制并調(diào)整厚度圖層：按3次Ctrl+J組合鍵將“前層日歷-厚度1100%”圖層復(fù)制3層，分別重命名并設(shè)置不同的不透明度，保持“漸變疊加”圖層樣式參數(shù)不變，將每個(gè)圖層都往右和往上移動(dòng)更多距離增加厚度。最后將這4個(gè)圖層編組并重命名為“前層日歷-厚度”，提取“前層日歷-基底”圖層的形狀選區(qū)并反轉(zhuǎn)作為圖層蒙版。6.2.3繪制未被選中的日歷圖標(biāo)6.2實(shí)例1:用燈光照亮側(cè)邊導(dǎo)航欄3.繪制后層日歷圖標(biāo)的表面（1）導(dǎo)入并設(shè)置后層日歷圖標(biāo)基底圖層：從素材文件夾中導(dǎo)入“后層日歷圖標(biāo).ai”，將生成的圖層重命名為“后層日歷-基底”。（2）設(shè)置后層日歷圖標(biāo)表面樣式：整個(gè)后層日歷圖標(biāo)表面的繪制過程和編組圖層結(jié)構(gòu)與“前層日歷-表面”編組基本相同，設(shè)置“后層日歷-基底”圖層的“漸變疊加”圖層樣式參數(shù)。“后層日歷發(fā)光描邊”圖層的圖層樣式可直接復(fù)制“前層日歷發(fā)光描邊”圖層的圖層樣式粘貼過來。6.2.3繪制未被選中的日歷圖標(biāo)6.2實(shí)例1:用燈光照亮側(cè)邊導(dǎo)航欄4.繪制后層日歷圖標(biāo)的厚度（1）復(fù)制并設(shè)置厚度圖層：以繪制前層日歷圖標(biāo)厚度相同的方法，制作后層日歷圖標(biāo)的厚度效果，復(fù)制“后層日歷-基底”圖層作為厚度圖層，圖層樣式直接復(fù)制前層日歷圖標(biāo)的厚度圖層粘貼。（2）設(shè)置厚度圖層參數(shù)并編組：后層圖標(biāo)需要3層厚度圖層，分別重命名并設(shè)置不同的不透明度。將“后層日歷-表面”和“后層日歷-厚度”圖層編組并重命名為“后層日歷圖標(biāo)”，添加一個(gè)圖層蒙版，蒙版形狀是提取前層日歷圖標(biāo)形狀后的選區(qū)進(jìn)行反轉(zhuǎn)。6.2.3繪制未被選中的日歷圖標(biāo)6.2實(shí)例1:用燈光照亮側(cè)邊導(dǎo)航欄5.創(chuàng)建透過前層日歷圖標(biāo)的磨砂玻璃效果（1）復(fù)制并添加模糊濾鏡：選中“后層日歷圖標(biāo)”編組圖層，按Ctrl+J組合鍵復(fù)制并轉(zhuǎn)換為智能對象圖層，添加一個(gè)“半徑”為6像素的“高斯模糊”濾鏡，然后將該智能對象圖層編組并重命名為“后層日歷-毛玻璃模糊”，添加一個(gè)以“前層日歷圖標(biāo)”為選區(qū)形狀的圖層蒙版。（2）復(fù)制并調(diào)整內(nèi)部發(fā)光描邊加強(qiáng)圖層：從“后層日歷圖標(biāo)”編組中找到“后層日歷圖標(biāo)描邊加強(qiáng)”圖層，復(fù)制并轉(zhuǎn)換為智能對象圖層，拖到編組“后層日歷-毛玻璃模糊”中，添加一個(gè)“半徑”為4像素的高斯模糊濾鏡。6.2.3繪制未被選中的日歷圖標(biāo)6.2實(shí)例1:用燈光照亮側(cè)邊導(dǎo)航欄6.加強(qiáng)整體層次感（1）復(fù)制并設(shè)置陰影圖層：復(fù)制“前層日歷-基底”圖層，重命名為“前后疊加陰影”，復(fù)制“后層日歷-基底”圖層的圖層樣式粘貼到該圖層上，將其轉(zhuǎn)換為智能對象圖層，設(shè)置不透明度為60%，混合模式為“正片疊底”，添加一個(gè)“半徑”為20像素的“高斯模糊”濾鏡，按Ctrl+G組合鍵編組并重命名為“前后疊加陰影組”，提取前層日歷圖標(biāo)的形狀為選區(qū)并反轉(zhuǎn)作為圖層蒙版。（2）增加未選中狀態(tài)的圖標(biāo)：在圖層最上方增加一個(gè)未選中狀態(tài)的“群組”的圖標(biāo)，繪制方法與繪制日歷圖標(biāo)基本相同。6.3實(shí)例2:頂部導(dǎo)航欄展開菜單設(shè)計(jì)本節(jié)概述設(shè)計(jì)思路參考用燈光照亮側(cè)邊導(dǎo)航欄的方法繪制磨砂玻璃質(zhì)感的雙層結(jié)構(gòu)菜單圖標(biāo)，展開下拉菜單時(shí)，圖標(biāo)前層和后層分別位于菜單組件卡片的上一層和下一層，為菜單組件卡片范圍內(nèi)的區(qū)域頁面添加模糊效果。設(shè)計(jì)過程1.繪制展開菜單設(shè)置背景：打開相關(guān)網(wǎng)頁背景文件另存，已有幾個(gè)圖層。繪制一個(gè)圓角矩形作為展開菜單背景，設(shè)置其屬性和樣式，包括填充、描邊、不透明度等，還添加了漸變疊加樣式。創(chuàng)建磨砂玻璃效果：復(fù)制網(wǎng)頁背景層并編組，通過一些操作創(chuàng)建矢量形狀蒙版，給智能對象圖層添加高斯模糊濾鏡。接著添加文字和分割線，以及導(dǎo)入圖標(biāo)并設(shè)置樣式。2.繪制被選中的雙層菜單圖標(biāo)導(dǎo)入圖標(biāo)素材，調(diào)整其填充屬性，然后添加漸變疊加、投影和內(nèi)陰影三種圖層樣式，并設(shè)置各自的參數(shù)。3.繪制被選中菜單圖標(biāo)的后層復(fù)制圖標(biāo)并移動(dòng)位置，更改圖層樣式，包括漸變疊加的色值、角度等。編組后添加圖層蒙版，通過一些操作修改蒙版顯示范圍，添加模糊效果。進(jìn)一步繪制真正的后層圖標(biāo)，包括復(fù)制粘貼、設(shè)置外發(fā)光樣式等，最后微調(diào)圖標(biāo)效果，改變不透明度和填充值。6.3.1繪制展開菜單1.打開網(wǎng)頁背景文件并另存：從素材文件夾中找到相關(guān)背景文件在Photoshop中打開，然后另存為新的PSD文件，文件中有已轉(zhuǎn)換為智能對象的網(wǎng)頁背景層以及處于選中狀態(tài)的Menu2和menu選中態(tài)圖層。2.繪制菜單展開后的背景繪制圓角矩形：使用圓角矩形工具繪制一個(gè)640×400像素的圓角矩形作為展開菜單背景，設(shè)置“填充”為任意顏色，“描邊”為無，“圓角”半徑為20像素，將其擺放在Menu2菜單字符圖層之下，并設(shè)置“不透明度”為50%，“填充”值改為0%。添加漸變疊加樣式：為展開菜單背景圖層添加“漸變疊加”圖層樣式，漸變色條左右兩端色值分別設(shè)為#f1f2ff和#ffffff，并將右端顏色的不透明度值改為50%。6.3實(shí)例2:頂部導(dǎo)航欄展開菜單設(shè)計(jì)6.3.1繪制展開菜單3.創(chuàng)建菜單背景的磨砂玻璃效果（1）復(fù)制并編組背景圖層：選中底部的“網(wǎng)頁背景”圖層，按Ctrl+J組合鍵復(fù)制，再按Ctrl+G組合鍵編組，重命名為“菜單背景-磨砂玻璃效果”。（2）創(chuàng)建矢量形狀蒙版并添加模糊濾鏡：按A鍵切換到直接選擇工具，選中矩形矢量形狀圖層“展開菜單背景”，復(fù)制其矢量形狀并粘貼為編組圖層的矢量形狀蒙版。為編組圖層內(nèi)的智能對象圖層“網(wǎng)頁背景復(fù)制”添加一個(gè)“半徑”為20像素的“高斯模糊”濾鏡。（3）添加文字和分割線：使用橫排文字工具添加3組文本，設(shè)置字體顏色為#17191f，分別打包編組并命名。使用矩形工具或直線工具繪制一條1像素粗細(xì)的直線作為菜單項(xiàng)之間的分割線，顏色設(shè)為#17191f。6.3實(shí)例2:頂部導(dǎo)航欄展開菜單設(shè)計(jì)6.3.1繪制展開菜單4.添加菜單圖標(biāo)（1）導(dǎo)入圖標(biāo)素材：從素材文件夾中找到3個(gè)圖標(biāo)ai素材并拖入當(dāng)前PSD文件中，擺放在菜單文字左側(cè)。（2）設(shè)置圖標(biāo)樣式：為“次級菜單圖標(biāo)3”圖層添加“漸變疊加”“投影”“內(nèi)陰影”3個(gè)圖層樣式并設(shè)置參數(shù)，然后復(fù)制圖層樣式并粘貼到其他兩個(gè)圖標(biāo)上。6.3實(shí)例2:頂部導(dǎo)航欄展開菜單設(shè)計(jì)6.3.2繪制被選中的雙層菜單圖標(biāo)1.繪制被選中的雙層菜單圖標(biāo)導(dǎo)入并設(shè)置圖標(biāo)素材：從素材文件夾中找到“menu2icon.ai”素材并拖入當(dāng)前PSD工程文件中，設(shè)置圖層的“填充”為0%，然后依次添加“漸變疊加”“投影”“內(nèi)陰影”3個(gè)圖層樣式并設(shè)置參數(shù)。6.3實(shí)例2:頂部導(dǎo)航欄展開菜單設(shè)計(jì)6.3.3繪制被選中的菜單圖標(biāo)的后層1.添加圖層蒙版并修改（1）編組并添加蒙版：按Ctrl+G組合鍵將“menu2icon-后層磨砂效果”編組，重命名為“圖標(biāo)磨砂效果”，按住Ctrl鍵單擊作為被選中圖標(biāo)的前層“menu2icon”圖層提取圖標(biāo)形狀作為選區(qū)，為編組圖層“圖標(biāo)磨砂效果”添加一個(gè)以被選中菜單的前層圖標(biāo)為形狀區(qū)域的圖層蒙版。（2）手動(dòng)修改蒙版：在圖層面板中單擊圖層蒙版進(jìn)入繪制模式，切換到矩形選框工具，按指定位置和大小繪制一個(gè)矩形選區(qū)，填充黑色以縮小圖層蒙版顯示范圍。6.3實(shí)例2:頂部導(dǎo)航欄展開菜單設(shè)計(jì)2.添加模糊效果：將添加了圖層蒙版后的編組圖層“圖標(biāo)磨砂效果”轉(zhuǎn)換為