《第14章 網(wǎng)站頁(yè)面設(shè)計(jì)教學(xué)課件 Photoshop CC 圖形圖像處理實(shí)戰(zhàn)案例教程》由會(huì)員分享，可在線閱讀，更多相關(guān)《第14章 網(wǎng)站頁(yè)面設(shè)計(jì)教學(xué)課件 Photoshop CC 圖形圖像處理實(shí)戰(zhàn)案例教程（16頁(yè)珍藏版）》請(qǐng)?jiān)谘b配圖網(wǎng)上搜索。

1、單擊此處編輯母版標(biāo)題樣式,單擊此處編輯母版文本樣式,二級(jí),三級(jí),四級(jí),五級(jí),2022/12/26,#,單擊此處編輯母版標(biāo)題樣式,單擊此處編輯母版文本樣式,第二級(jí),第三級(jí),第四級(jí),第五級(jí),第14章 網(wǎng)站頁(yè)面設(shè)計(jì)教學(xué)課件 Photoshop CC 圖形圖像處理實(shí)戰(zhàn)案例教程,第,14,章,網(wǎng)站頁(yè)面設(shè)計(jì),圖形圖像處理實(shí)戰(zhàn)案例教程（微課版）,目錄,Contents,14.1,行業(yè)知識(shí)充電,14.2,制作網(wǎng)站登錄頁(yè),14.1.1,網(wǎng)站界面設(shè)計(jì)規(guī)范,網(wǎng)頁(yè)界面主要由頁(yè)頭、內(nèi)容主體、頁(yè)腳組成。其中頁(yè)頭包括網(wǎng)站標(biāo)志、導(dǎo)航欄等元素；內(nèi)容主體包括橫幅（,banner,）和內(nèi)容相關(guān)信息；頁(yè)腳包括導(dǎo)航、版權(quán)聲明等元素,1

2、4.1.2,網(wǎng)頁(yè)常用界面類型,在網(wǎng)頁(yè)設(shè)計(jì)中，常用界面類型可分為首頁(yè)、列表頁(yè)、詳情頁(yè)、專題頁(yè)、控制臺(tái)以及表單頁(yè)。,首頁(yè)：進(jìn)入網(wǎng)站的首張頁(yè)面，是了解網(wǎng)站的第一步，包括產(chǎn)品展示圖、產(chǎn)品介紹信息、用戶登錄注冊(cè)入口等。,列表頁(yè)：對(duì)信息進(jìn)行歸類管理，提高關(guān)鍵信息的可閱讀性以及可操作性。,詳情頁(yè)：產(chǎn)品信息頁(yè)面。清晰的布局可以快速定位關(guān)鍵信息，提高效率。,專題頁(yè)：針對(duì)特定主題制作的頁(yè)面，該頁(yè)面信息豐富，設(shè)計(jì)感十足。,控制臺(tái)頁(yè)：集合了數(shù)字、圖形及文案等大量多樣化的信息，需一目了然地將關(guān)鍵信息展示給用戶，該頁(yè)面精簡(jiǎn)、清晰，可視性高。,表單頁(yè)：此頁(yè)常用于登錄、注冊(cè)、下單、評(píng)論等，可引導(dǎo)用戶高效完成表單的工作流程。,

3、14.1.5,網(wǎng)站頁(yè)面設(shè)計(jì)賞析,以下是不同類型的網(wǎng)頁(yè)設(shè)計(jì)。,目錄,Contents,14.1,行業(yè)知識(shí)充電,14.2,制作網(wǎng)站登錄頁(yè),14.2.1,制作網(wǎng)頁(yè)背景,背景部分主要是對(duì)圖像進(jìn)行徑向模糊、高斯模糊處理。,制作網(wǎng)頁(yè)背景效果,14.2.1,制作網(wǎng)頁(yè)背景,【,制作效果與思路,】,（,1,）,啟動(dòng),Photoshop,，單擊“新建”按鈕，在彈出的“新建文檔”對(duì)話框中單擊“,Web,”選項(xiàng)卡，單擊“網(wǎng)頁(yè),-,大尺寸”空白文檔預(yù)設(shè)，在對(duì)話框右側(cè)設(shè)置文檔名。,（,2,）,置入素材圖像，調(diào)整大小。,（,3,）,按,Ctrl+J,組合鍵復(fù)制圖層。,（,4,）,按,Enter,鍵完成調(diào)整，執(zhí)行“濾鏡,模糊

4、,徑向模糊”命令，在彈出的“徑向模糊”對(duì)話框中設(shè)置參數(shù)。,（,5,）,調(diào)整位置。,（,6,）,按,Enter,鍵完成調(diào)整，執(zhí)行“濾鏡,模糊,高斯模糊”命令，在彈出的“高斯模糊”對(duì)話框中設(shè)置參數(shù)。,14.2.1,制作網(wǎng)頁(yè)登錄卡,-1,登錄卡部分主要是使用圓角矩形繪制卡片狀態(tài)，左邊為原背景圖層，右面為登錄與注冊(cè)信息填寫(xiě)部分。,制作網(wǎng)頁(yè)登錄卡效果,14.2.1,制作網(wǎng)頁(yè)登錄卡,-1,【,制作效果與思路,】,（,1,）,按,Ctrl+,組合鍵顯示網(wǎng)格，選擇“圓角矩形工具”，設(shè)置填充顏色為白色，半徑,50,像素，繪制圓角矩形。,（,2,）,按,Ctrl+J,復(fù)制圖層，按,Ctrl+T,組合鍵自由變換，按

5、住,Shift,鍵調(diào)整圓角矩形寬度。,（,3,）,在“屬性”對(duì)話框中調(diào)整圓角半徑。將背景圖層移動(dòng)至最頂層，按,Ctrl+Alt+G,組合鍵創(chuàng)建剪貼蒙版，按,Ctrl+T,組合鍵自由變換，調(diào)整大小。,（,4,）,選擇“橫排文字工具”輸入文字，在“字符”面板中設(shè)置參數(shù)。,（,5,）,選擇“圓角矩形工具”，設(shè)置半徑為,1,像素，顏色為字體顏色，繪制圓角矩形，并使其與文字居中對(duì)齊。,（,6,）,按住,Alt,鍵復(fù)制文字，更改文字與字體顏色。,（,7,）,選擇“圓角矩形工具”，設(shè)置填充為無(wú)，描邊,1,像素，顏色,30%,灰色，半徑為,10,像素，繪制圓角矩形，并使其與文字左對(duì)齊。,14.2.1,制作網(wǎng)頁(yè)

6、登錄卡,-1,【,制作效果與思路,】,（,8,）,選擇“橫排文字工具”輸入文字，字體顏色（,R,：,132,、,G,：,132,、,B,：,132,）。,（,9,）,框選圓角矩形框和文字，按住,Alt,鍵移動(dòng)復(fù)制并更改文字。,（,10,）,按住,Alt,鍵移動(dòng)復(fù)制圓角矩形框，填充,10%,灰色。,（,11,）,按,Ctrl+J,組合鍵復(fù)制圖層，按,Ctrl+T,組合鍵自由變換，按住,Shift,鍵調(diào)整圓角矩形寬度。,（,12,）,更改填充顏色為白色，描邊為淺青藍(lán)。,（,13,）,選擇“橫排文字工具”輸入文字，字體顏色為黑色。,（,14,）,選擇“橢圓工具”，按住,Shift,鍵繪制正圓，填充純

7、青藍(lán)，按住,Alt,鍵移動(dòng)復(fù)制。,（,15,）,選擇“自定形狀工具”，在屬性欄中選擇形狀“箭頭,6,”，按住,Shift,鍵繪制并填充純青藍(lán)，使其與兩個(gè)正圓居中對(duì)齊。,14.2.1,制作網(wǎng)頁(yè)登錄卡,-1,【,制作效果與思路,】,（,16,）,選擇“自定形狀工具”，在屬性欄中選擇形狀“箭頭,2,，按住,Shift,鍵繪制并填充,45%,灰色，按住,Alt,鍵移動(dòng)復(fù)制。,（,17,）,選擇“矩形工具”，繪制矩形，填充顏色淺青藍(lán)。,（,18,）,選擇“自定形狀工具”，在屬性欄中選擇形狀“復(fù)選標(biāo)記”，按住,Shift,鍵繪制并填充白色，使其與矩形垂直水平居中對(duì)齊。,（,19,）,按住,Alt,鍵移動(dòng)復(fù)

8、制“密碼”，更改文字并將字號(hào)更該為,14,號(hào)。,（,20,）,按住,Alt,鍵移動(dòng)復(fù)制文字，更改文字并更改字體顏色為純青藍(lán)。,（,21,）,按住,Alt,鍵移動(dòng)復(fù)制圓角矩形，在屬性欄中更改填充參數(shù)，描邊為無(wú)。,（,22,）,選擇“橫排文字工具”輸入文字，在“字符”面板中設(shè)置參數(shù)。,14.2.1,制作網(wǎng)頁(yè)登錄卡,-2,本部分主要制作卡片右上角的二維碼登錄以及第三方登錄部分，最后為登錄卡片添加投影效果。,制作網(wǎng)頁(yè)登錄卡效果,14.2.1,制作網(wǎng)頁(yè)登錄卡,-2,【,制作效果與思路,】,（,1,）,選擇“矩形工具”按住,Shift,鍵繪制正方形，在“圖層”面板中柵格化該圖層。,（,2,）,選擇“多邊形套索工具”沿對(duì)角繪制選區(qū)，按,Delete,鍵刪除選區(qū)，按,Ctrl+D,組合鍵取消選區(qū)。,（,3,）,置入二維碼，按,Ctrl+Alt,組合鍵創(chuàng)建剪貼蒙版。,（,4,）,按住,Alt,鍵移動(dòng)復(fù)制“記住賬號(hào)密碼”，更改文字并使其居中對(duì)齊。,（,5,）,選擇“矩形工具”繪制矩形，填充文字顏色，按住,Alt,鍵水平移動(dòng)復(fù)制。,（,6,）,置入素材圖像，調(diào)整大小位置。,（,7,）,調(diào)整整體位置。,（,8,）,按,Ctrl+,隱藏網(wǎng)格，在“圖層”面板中雙擊“圓角矩形,1,”圖層，在彈出的“圖層樣式”對(duì)話框中添加投影圖層樣式。,學(xué)習(xí)進(jìn)步,圖形圖像處理實(shí)戰(zhàn)案例教程（微課版）,