邊做邊學(xué)-Photoshop圖像制作案例教程（第2版）（Photoshop 2020）課件 第7章　網(wǎng)頁設(shè)計

第7章網(wǎng)頁設(shè)計本章簡介：一個優(yōu)秀的網(wǎng)站必定有著獨具特色的網(wǎng)頁設(shè)計，漂亮的網(wǎng)頁頁面能夠吸引瀏覽者的注意力。設(shè)計網(wǎng)頁時要根據(jù)網(wǎng)絡(luò)的特殊性對頁面進(jìn)行精心的設(shè)計和編排。本章以制作多個類型的網(wǎng)頁為例，介紹網(wǎng)頁的設(shè)計方法和制作技巧。課堂學(xué)習(xí)目標(biāo)掌握網(wǎng)頁的設(shè)計思路和手段掌握網(wǎng)頁的制作方法和技巧【案例分析】【設(shè)計理念】【操作步驟】【相關(guān)工具】【實戰(zhàn)演練】制作生活家具類網(wǎng)站首頁7.1制作中式茶葉官網(wǎng)首頁棲茶是一家專注于生產(chǎn)和銷售中式茶葉的公司。致力于傳承和發(fā)揚(yáng)茶文化，提供高質(zhì)量的中式茶葉產(chǎn)品給消費者?，F(xiàn)為了更好的宣傳茶葉，需要為公司設(shè)計制作一款PC端網(wǎng)站首頁，要求能夠體現(xiàn)出產(chǎn)品特點和公司特色。7.1.1【案例分析】在設(shè)計制作過程中，通過簡約的頁面設(shè)計，給人直觀的印象，易于閱讀。產(chǎn)品的展示主次分明，讓人一目了然，促進(jìn)銷售。顏色的運(yùn)用合理，給人品質(zhì)感。整體設(shè)計清新自然，易給人好感，產(chǎn)生購買欲望。最終效果參看云盤中的“Ch07/效果/制作中式茶葉官網(wǎng)首頁.psd”。7.1.2【設(shè)計理念】7.1.3【操作步驟】1．裁剪工具裁切圖像打開一幅圖像，選擇“裁剪”工具，在圖像中單擊并按住鼠標(biāo)左鍵，拖曳鼠標(biāo)到適當(dāng)?shù)奈恢茫砷_鼠標(biāo)，繪制出矩形裁剪框。在矩形裁剪框內(nèi)雙擊或按Enter鍵，都可以完成圖像的裁剪。7.1.4【相關(guān)工具】2．使用菜單命令裁切圖像。選擇“矩形選框”工具，在圖像窗口中繪制出要裁剪的圖像區(qū)域。選擇“圖像>裁剪”命令，圖像按選區(qū)進(jìn)行裁剪。按Ctrl+D組合鍵，取消選區(qū)。7.1.4【相關(guān)工具】3．透視裁剪工具裁切圖像打開一幅圖片。選擇“透視裁剪”工具，在圖像窗口中單擊并拖曳鼠標(biāo)，繪制矩形裁剪框。將光標(biāo)放置在裁剪框右下角的控制點上，按住Shift鍵的同時，向上拖曳控制節(jié)點。單擊屬性欄中的按鈕或按Enter鍵，即可裁剪圖像。7.1.4【相關(guān)工具】4．模糊濾鏡命令模糊濾鏡可以使圖像中過于清晰或?qū)Ρ榷葟?qiáng)烈的區(qū)域，產(chǎn)生模糊效果。此外，也可用于制作柔和陰影。7.1.4【相關(guān)工具】5．模糊畫廊濾鏡命令模糊畫廊濾鏡組可以使用圖釘或路徑來控制圖像，制作模糊效果。7.1.4【相關(guān)工具】6．圖層的不透明度通過“圖層”控制面板上方的“不透明度”選項和“填充”選項可以調(diào)節(jié)圖層的不透明度?！安煌该鞫取边x項可以用于調(diào)節(jié)圖層中的圖像、圖層樣式和混合模式的不透明度；“填充”選項不能用來調(diào)節(jié)圖層樣式的不透明度。7.1.4【相關(guān)工具】使用橫排文字工具添加Loge、導(dǎo)航和相關(guān)信息，使用矩形工具、移動工具和剪貼蒙版制作圖像效果。最終效果參看云盤中的“Ch07>效果>制作生活家具類網(wǎng)站首頁.psd”。7.1.5【實戰(zhàn)演練】制作生活家具類網(wǎng)站首頁【案例分析】【設(shè)計理念】【操作步驟】【相關(guān)工具】【實戰(zhàn)演練】制作生活家具類網(wǎng)站詳情頁7.2制作中式茶葉官網(wǎng)詳情頁品茗茶葉是一家以制茶為主的企業(yè)，秉承匯聚源產(chǎn)地好茶的理念，在業(yè)內(nèi)深受客戶的喜愛，已開設(shè)多家連鎖店?，F(xiàn)為推廣茶文化，需要設(shè)計一款官網(wǎng)詳情頁，要求著重體現(xiàn)品茶方法，并普及泡茶過程以及制茶流程。7.2.1【案例分析】在設(shè)計制作過程中，以真實茶山圖片做為背景，起到襯托的作用，營造氛圍。以商品實物照片作為主體元素，圖文搭配合理。產(chǎn)品的展示醒目突出，讓人一目了然，宣傳性強(qiáng)。文字的運(yùn)用醒目突出，易讀性強(qiáng)。整體設(shè)計以圖片為主，易給人好感，產(chǎn)生購買欲望。最終效果參看云盤中的“Ch07/效果/制作中式茶葉官網(wǎng)詳情頁.psd”。7.2.2【設(shè)計理念】7.2.3【操作步驟】1．色彩平衡選擇“圖像>調(diào)整>色彩平衡”命令，或按Ctrl+B組合鍵，彈出“色彩平衡”對話框。7.2.4【相關(guān)工具】2．圖像的復(fù)制要在操作過程中隨時按需要復(fù)制圖像，就必須掌握復(fù)制圖像的方法。打開一張圖片。選擇“磁性套索”工具，繪制出要復(fù)制的圖像區(qū)域。選擇“移動”工具，將鼠標(biāo)放在選區(qū)中，鼠標(biāo)指針變?yōu)閳D標(biāo)。按住Alt鍵的同時，鼠標(biāo)指針變?yōu)閳D標(biāo)。單擊鼠標(biāo)并按住不放，拖曳選區(qū)中的圖像到適當(dāng)?shù)奈恢?，釋放鼠?biāo)和Alt鍵，圖像復(fù)制完成。7.2.4【相關(guān)工具】使用矩形工具、移動工具和剪貼蒙版命令制作圖像顯示區(qū)域，使用橫排文字工具添加相關(guān)信息，使用置入嵌入對象命令置入圖像。最終效果參看云盤中的“Ch07>效果>制作生活家具類網(wǎng)站詳情頁.psd”。7.2.5【實戰(zhàn)演練】制作生活家具類網(wǎng)站詳情頁【案例分析】【設(shè)計理念】【知識要點】7.3綜合演練——制作中式茶葉官網(wǎng)招聘頁茶源中式茶葉公司是一家專注于傳統(tǒng)中式茶葉的研發(fā)、生產(chǎn)和銷售的公司。公司以追求卓越的品質(zhì)和傳承茶文化為使命，致力于為茶葉愛好者帶來正宗的中式茶香體驗?，F(xiàn)為拓展公司業(yè)務(wù)、擴(kuò)大規(guī)模，要求設(shè)計一款官網(wǎng)招聘頁，設(shè)計要符合產(chǎn)品的宣傳主題，能體現(xiàn)出公司的特點。7.3.1【案例分析】在設(shè)計制作過程中，規(guī)整大氣的頁面布局，給人簡潔直觀的印象，易讀性強(qiáng)。主次分明的招聘信息，讓人一目了然，便于人們的查找和了解。簡介大氣的畫面，展現(xiàn)出品牌嚴(yán)謹(jǐn)?shù)淖非蠛推焚|(zhì)的保障。7.3.2【設(shè)計理念】使用移動工具添加素材圖片，使用橫排文字工具添加相關(guān)信息，使用高斯模糊命令模糊圖像效果，使用圖層樣式美化圖像，使用剪貼蒙版命令和矩形工具控制圖像的顯示區(qū)域。最終效果參看云盤中的“Ch07>效果>制作中式茶葉官網(wǎng)招聘頁.psd”。7.3.3【知識要點】【案例分析】【設(shè)計理念】【知識要點】7.4綜合演練——制作生活家具類列表頁艾利佳家居是一家具有設(shè)計感的現(xiàn)代家具品牌，秉承簡約風(fēng)格，傳遞“零壓力”生活概念。平臺重點打造簡約、時尚、現(xiàn)代的家居風(fēng)格?，F(xiàn)為拓展公司業(yè)務(wù)、擴(kuò)大規(guī)模，需要開發(fā)線上購物平臺。要求設(shè)計一款網(wǎng)站列表，設(shè)計要符合產(chǎn)品的宣傳主題，能體現(xiàn)出平臺的特點。7.4.1【案例分析】在設(shè)計制作過程中，規(guī)整大氣的頁面布局，給人簡潔直觀的印象，易讀性強(qiáng)。主次分明的商品展示，讓人一目了然，便于人們的查找和購買。淺色的運(yùn)用，展現(xiàn)出商品的精致和品質(zhì)感，同時給人時尚可靠的印象。7.4.