Photoshop UI設(shè)計(jì)實(shí)戰(zhàn)案例教程（移動(dòng)端+Web端） 課件 第7章 綜合案例 設(shè)計(jì)網(wǎng)站歡迎頁(yè)

PhotoshopUI設(shè)計(jì)實(shí)戰(zhàn)案例教程(移動(dòng)端+Web端)第7章綜合案例:設(shè)計(jì)網(wǎng)站歡迎頁(yè)本章概述：第6章主要介紹了WebUI導(dǎo)航組件創(chuàng)意設(shè)計(jì)。首先闡述了WebUI的主要導(dǎo)航組件，包括頂部導(dǎo)航（常見(jiàn)于首頁(yè)，有帶下拉菜單和直接跳轉(zhuǎn)兩種交互方式）、側(cè)邊導(dǎo)航（用于次級(jí)頁(yè)面，有單層級(jí)和多層級(jí)兩種樣式）和面包屑導(dǎo)航（輕量級(jí)，顯示頁(yè)面層級(jí)結(jié)構(gòu)）。接著通過(guò)實(shí)例講解創(chuàng)意設(shè)計(jì)，如用燈光照亮側(cè)邊導(dǎo)航欄，繪制菜單底板背景和燈光效果，包括不同模糊度的圖層模擬光照、智能對(duì)象和高斯模糊創(chuàng)建磨砂玻璃效果等；頂部導(dǎo)航欄展開(kāi)菜單設(shè)計(jì)，涉及繪制展開(kāi)菜單、添加圖標(biāo)及設(shè)置樣式等；還介紹了拓展訓(xùn)練，如制作圓形導(dǎo)航菜單，包括設(shè)計(jì)左側(cè)圖文內(nèi)容流和右側(cè)圓盤菜單組件等。第7章綜合案例:設(shè)計(jì)網(wǎng)站歡迎頁(yè)7.1添加文字并轉(zhuǎn)換為形狀7.2創(chuàng)建文字立體效果7.3繪制立體字母上的高光7.4繪制陰影7.5

添加輔助文字和按鈕7.1添加文字并轉(zhuǎn)換為形狀1.新建文檔按Ctrl+N組合鍵新建一個(gè)寬度為1920像素、高度為1080像素的空白文檔雙擊背景圖層，將其轉(zhuǎn)換為普通圖層，并命名為“底層背景”2.添加并編輯文字在字符面板中設(shè)置字體大小，先添加一個(gè)字體大小為300像素的“HELLO”文字圖層，再添加一個(gè)字體大小為210像素的“WELCOME”文字圖層使用的卡通字體樣式為“方正胖頭魚(yú)簡(jiǎn)體”，文字顏色可任意設(shè)置7.1添加文字并轉(zhuǎn)換為形狀3.將文字轉(zhuǎn)換為形狀分別右鍵單擊“HELLO”和“WELCOME”文字圖層，選擇“轉(zhuǎn)換為形狀”選項(xiàng)，將文字轉(zhuǎn)換為形狀路徑。為方便后期操作，使用直接選擇工具將每個(gè)字母做成獨(dú)立的矢量形狀圖層。以字母H為例，選中字母的矢量路徑形狀后按Ctrl+Shift+J組合鍵，將其獨(dú)立分割出來(lái)生成一個(gè)新的矢量形狀圖層。對(duì)每個(gè)字母都進(jìn)行上述操作，做好重命名和編組工作，分成“Hello”和“Welcome”兩個(gè)編組，然后移動(dòng)字母使它們互相靠近。7.2創(chuàng)建文字立體效果1.添加圖層樣式（1）以“Hello”編組的H、E和“Welcome”編組的W、E四個(gè)字母為例進(jìn)行操作。（2）添加漸變樣式：雙擊字母H所在圖層，調(diào)出“圖層樣式”窗口，添加“漸變疊加”圖層樣式，設(shè)置漸變色條左右兩端色值分別為#f2ff64和#ff961b，“角度”為-108度。7.2創(chuàng)建文字立體效果1.添加圖層樣式（3）添加內(nèi)陰影：勾選“內(nèi)陰影”圖層樣式，連續(xù)添加3個(gè)“內(nèi)陰影”圖層樣式，從下到上參數(shù)設(shè)置如下：最下面的第一組內(nèi)陰影，“混合模式”為“正片疊底”，“不透明度”為30%，“角度”為-162度，“距離”為20像素，“大小”為48像素。第二組內(nèi)陰影，“不透明度”為15%，“角度”為104度，“距離”為12像素，“大小”為20像素。第三組內(nèi)陰影，“不透明度”為12%，“角度”為103度，“距離”為6像素，“大小”為8像素。最上面的第一組內(nèi)陰影，“不透明度”為10%，“角度”為10度，“距離”為6像素，“大小”為12像素。7.2創(chuàng)建文字立體效果3.為文字添加噪點(diǎn)效果（1）創(chuàng)建新圖層并填充黑色：在字母H的圖層上添加新圖層，按D鍵將前景色重置為黑色，按Alt+Delete組合鍵將整個(gè)圖層填充為黑色。（2）轉(zhuǎn)換為智能對(duì)象并添加雜色濾鏡：將新圖層轉(zhuǎn)換為智能對(duì)象圖層，執(zhí)行“濾鏡?雜色?添加雜色”命令，添加一個(gè)“智能”濾鏡，設(shè)置“數(shù)量”為70，“分布”為“高斯分布”。（3）將添加了雜色濾鏡的智能對(duì)象圖層的圖層疊加模式設(shè)為“濾色”，圖層“不透明度”設(shè)為40%7.2創(chuàng)建文字立體效果4.為“雜色”圖層創(chuàng)建蒙版（1）編組并提取選區(qū)：選中添加了雜色濾鏡的智能對(duì)象圖層“圖層1”（此處可能是文檔錯(cuò)誤，推測(cè)應(yīng)為之前操作中添加雜色的智能對(duì)象圖層），按Ctrl+G組合鍵編組，并重命名為“雜色”。按住Ctrl鍵，單擊圖層“H”，創(chuàng)建以H為外形的選區(qū)。（2）收縮和羽化選區(qū)：執(zhí)行“選擇>修改>收縮”命令，將選區(qū)沿著選區(qū)邊緣向內(nèi)縮小10像素；再次執(zhí)行“選擇?修改?羽化”命令，將羽化半徑設(shè)為10像素。7.2創(chuàng)建文字立體效果4.為“雜色”圖層創(chuàng)建蒙版（3）創(chuàng)建圖層蒙版并設(shè)置矢量形狀蒙版：保持選中“雜色”編組圖層，單擊圖層面板底部的“添加圖層蒙版”按鈕，創(chuàng)建邊緣羽化模糊的圖層蒙版。將矢量形狀圖層字母H和“雜色”編組圖層編組并重命名為“H字母”。使用路徑選擇工具選中字母H的矢量形狀按Ctrl+C組合鍵復(fù)制，再切換選中“H字母”編組圖層，按Ctrl+V組合鍵粘貼剛才復(fù)制的矢量形狀，生成矢量蒙版。5.添加投影（1）創(chuàng)建矢量蒙版：先將字母E圖層編組并創(chuàng)建一個(gè)以字母E的矢量形狀為形狀的矢量蒙版。（2）復(fù)制并設(shè)置投影樣式：在“H字母”編組圖層內(nèi)，復(fù)制字母H圖層并重命名為“H陰影”。清除原有圖層樣式，雙擊該圖層彈出“圖層樣式”窗口，勾選添加“投影”圖層樣式，設(shè)置“混合模式”為“正片疊底”，投影顏色為#d87000，“不透明度”為30%，“角度”為-162度，“距離”為10像素，“大小”為30像素。7.3繪制立體字母上的高光1.繪制高光形狀選擇合適圖層：選中“H字母”編組圖層，此圖層是之前對(duì)字母H進(jìn)行一系列操作后所形成的包含字母H相關(guān)樣式和設(shè)置的圖層組。使用鋼筆工具繪制：利用鋼筆工具在字母H上精心繪制3個(gè)高光形狀。鋼筆工具可以精確地繪制出所需的形狀路徑，通過(guò)調(diào)整節(jié)點(diǎn)和曲線來(lái)達(dá)到理想的高光形狀效果。重命名并設(shè)置混合模式：將繪制好的3個(gè)高光形狀分別重命名為“高光1”“高光2”和“高光3”，同時(shí)將它們的混合圖層模式設(shè)置為“濾色”。這種混合模式設(shè)置使得高光部分能夠在字母表面呈現(xiàn)出明亮的效果，與字母本身的顏色和立體感相互融合，增強(qiáng)視覺(jué)效果。7.3繪制立體字母上的高光2.轉(zhuǎn)換為智能對(duì)象圖層并添加“高斯模糊”濾鏡轉(zhuǎn)換為智能對(duì)象圖層：將“高光1”“高光2”和“高光3”這3個(gè)高光圖層全部轉(zhuǎn)換為智能對(duì)象圖層。智能對(duì)象圖層具有獨(dú)特的優(yōu)勢(shì)，它可以保留原始圖像的所有信息，并且在進(jìn)行后續(xù)的編輯操作時(shí)不會(huì)對(duì)原始圖像造成破壞。例如，在添加濾鏡或進(jìn)行其他調(diào)整時(shí)，可以隨時(shí)返回原始狀態(tài)進(jìn)行修改。添加“高斯模糊”濾鏡：為每個(gè)高光智能對(duì)象圖層添加“高斯模糊”濾鏡，以實(shí)現(xiàn)柔和的高光效果，使其更加自然地融合在字母的立體表面上。具體設(shè)置為“高光1”的模糊半徑為3像素，“高光2”的模糊半徑為4像素，“高光3”的模糊半徑為5像素。通過(guò)這種不同程度的模糊設(shè)置，可以根據(jù)字母表面的不同位置和光照需求，呈現(xiàn)出更加真實(shí)和立體的高光效果。例如，某些位置可能需要更強(qiáng)烈的高光突出，而某些位置則需要相對(duì)柔和的過(guò)渡，這些不同的模糊半徑設(shè)置能夠滿足這種多樣化的需求。7.4繪制陰影1.轉(zhuǎn)換為智能對(duì)象圖層選中“Welcome”編組圖層，按Ctrl+J組合鍵復(fù)制，并重命名為“Welcome陰影”。將復(fù)制出來(lái)的“Welcome陰影”編組轉(zhuǎn)化為智能對(duì)象圖層，在圖層面板上將該圖層拖動(dòng)到“Welcome”編組圖層順序之下，將“填充”值改為0%。7.4繪制陰影2.添加“投影”圖層樣式雙擊“Welcome陰影”編組圖層彈出“圖層樣式”窗口，勾選添加“投影”圖層樣式。設(shè)置“投影”圖層樣式的參數(shù)：“混合模式”為“正片疊底”，投影顏色為#d87000，“不透明度”為30%，“角度”為-90度，“距離”為3像素，“大小”為10像素。為進(jìn)一步豐富投影的層次效果，再次添加一個(gè)“投影”圖層樣式，設(shè)置“混合模式”為“正片疊底”，投影顏色為#d87000，“不透明度”為30%，“角度”為-90度，“距離”為4像素，“大小”為30像素。7.4繪制陰影3.設(shè)置陰影顯示范圍將鼠標(biāo)指針移動(dòng)到圖層面板中“Welcome陰影”編組圖層和“Hello”編組圖層之間交接線位置，當(dāng)鼠標(biāo)指針形狀改變時(shí)，按住Alt鍵單擊。這樣操作后陰影效果只出現(xiàn)在Hello編組圖層的形狀范圍內(nèi)，并且“Welcome陰影”圖層左側(cè)出現(xiàn)一個(gè)直角箭頭圖標(biāo)，表示自動(dòng)將下一個(gè)圖層作為當(dāng)前被選中圖層的蒙版。7.5添加輔助文字和按鈕1.添加副標(biāo)題文字選擇文字工具，在字符面板中設(shè)置字體為細(xì)體字（如方正細(xì)黑），字體大小為60點(diǎn)，字體顏色為#000000。在畫(huà)布上單擊添加第1個(gè)文字圖層并輸入文本“Hi,welcometo?ProductName?”，放置在主標(biāo)題HELLOWELCOME下方。7.5添加輔助文字和按鈕2.添加跳轉(zhuǎn)按鈕添加文字并設(shè)置樣式使用文字工具，在字符面板中設(shè)置字體為30點(diǎn)，字體顏色為#ffbc09。在畫(huà)布上單擊添加第2個(gè)文字圖層并輸入文本“Skiptohomepage6S”。拖動(dòng)鼠標(biāo)框選6S兩個(gè)字，在字符面板上將字體改為粗體字，大小不變。繪制按鈕形狀使用橢