邊做邊學 Photoshop圖像制作案例教程（第2版）（Photoshop 2020）課件 第7、8章　網(wǎng)頁設計、包裝設計

第7章網(wǎng)頁設計本章簡介：一個優(yōu)秀的網(wǎng)站必定有著獨具特色的網(wǎng)頁設計，漂亮的網(wǎng)頁頁面能夠吸引瀏覽者的注意力。設計網(wǎng)頁時要根據(jù)網(wǎng)絡的特殊性對頁面進行精心的設計和編排。本章以制作多個類型的網(wǎng)頁為例，介紹網(wǎng)頁的設計方法和制作技巧。課堂學習目標掌握網(wǎng)頁的設計思路和手段掌握網(wǎng)頁的制作方法和技巧【案例分析】【設計理念】【操作步驟】【相關工具】【實戰(zhàn)演練】制作生活家具類網(wǎng)站首頁7.1制作中式茶葉官網(wǎng)首頁棲茶是一家專注于生產和銷售中式茶葉的公司。致力于傳承和發(fā)揚茶文化，提供高質量的中式茶葉產品給消費者?，F(xiàn)為了更好的宣傳茶葉，需要為公司設計制作一款PC端網(wǎng)站首頁，要求能夠體現(xiàn)出產品特點和公司特色。7.1.1【案例分析】在設計制作過程中，通過簡約的頁面設計，給人直觀的印象，易于閱讀。產品的展示主次分明，讓人一目了然，促進銷售。顏色的運用合理，給人品質感。整體設計清新自然，易給人好感，產生購買欲望。最終效果參看云盤中的“Ch07/效果/制作中式茶葉官網(wǎng)首頁.psd”。7.1.2【設計理念】7.1.3【操作步驟】1．裁剪工具裁切圖像打開一幅圖像，選擇“裁剪”工具，在圖像中單擊并按住鼠標左鍵，拖曳鼠標到適當?shù)奈恢茫砷_鼠標，繪制出矩形裁剪框。在矩形裁剪框內雙擊或按Enter鍵，都可以完成圖像的裁剪。7.1.4【相關工具】2．使用菜單命令裁切圖像。選擇“矩形選框”工具，在圖像窗口中繪制出要裁剪的圖像區(qū)域。選擇“圖像>裁剪”命令，圖像按選區(qū)進行裁剪。按Ctrl+D組合鍵，取消選區(qū)。7.1.4【相關工具】3．透視裁剪工具裁切圖像打開一幅圖片。選擇“透視裁剪”工具，在圖像窗口中單擊并拖曳鼠標，繪制矩形裁剪框。將光標放置在裁剪框右下角的控制點上，按住Shift鍵的同時，向上拖曳控制節(jié)點。單擊屬性欄中的按鈕或按Enter鍵，即可裁剪圖像。7.1.4【相關工具】4．模糊濾鏡命令模糊濾鏡可以使圖像中過于清晰或對比度強烈的區(qū)域，產生模糊效果。此外，也可用于制作柔和陰影。7.1.4【相關工具】5．模糊畫廊濾鏡命令模糊畫廊濾鏡組可以使用圖釘或路徑來控制圖像，制作模糊效果。7.1.4【相關工具】6．圖層的不透明度通過“圖層”控制面板上方的“不透明度”選項和“填充”選項可以調節(jié)圖層的不透明度?！安煌该鞫取边x項可以用于調節(jié)圖層中的圖像、圖層樣式和混合模式的不透明度；“填充”選項不能用來調節(jié)圖層樣式的不透明度。7.1.4【相關工具】使用橫排文字工具添加Loge、導航和相關信息，使用矩形工具、移動工具和剪貼蒙版制作圖像效果。最終效果參看云盤中的“Ch07>效果>制作生活家具類網(wǎng)站首頁.psd”。7.1.5【實戰(zhàn)演練】制作生活家具類網(wǎng)站首頁【案例分析】【設計理念】【操作步驟】【相關工具】【實戰(zhàn)演練】制作生活家具類網(wǎng)站詳情頁7.2制作中式茶葉官網(wǎng)詳情頁品茗茶葉是一家以制茶為主的企業(yè)，秉承匯聚源產地好茶的理念，在業(yè)內深受客戶的喜愛，已開設多家連鎖店?，F(xiàn)為推廣茶文化，需要設計一款官網(wǎng)詳情頁，要求著重體現(xiàn)品茶方法，并普及泡茶過程以及制茶流程。7.2.1【案例分析】在設計制作過程中，以真實茶山圖片做為背景，起到襯托的作用，營造氛圍。以商品實物照片作為主體元素，圖文搭配合理。產品的展示醒目突出，讓人一目了然，宣傳性強。文字的運用醒目突出，易讀性強。整體設計以圖片為主，易給人好感，產生購買欲望。最終效果參看云盤中的“Ch07/效果/制作中式茶葉官網(wǎng)詳情頁.psd”。7.2.2【設計理念】7.2.3【操作步驟】1．色彩平衡選擇“圖像>調整>色彩平衡”命令，或按Ctrl+B組合鍵，彈出“色彩平衡”對話框。7.2.4【相關工具】2．圖像的復制要在操作過程中隨時按需要復制圖像，就必須掌握復制圖像的方法。打開一張圖片。選擇“磁性套索”工具，繪制出要復制的圖像區(qū)域。選擇“移動”工具，將鼠標放在選區(qū)中，鼠標指針變?yōu)閳D標。按住Alt鍵的同時，鼠標指針變?yōu)閳D標。單擊鼠標并按住不放，拖曳選區(qū)中的圖像到適當?shù)奈恢?，釋放鼠標和Alt鍵，圖像復制完成。7.2.4【相關工具】使用矩形工具、移動工具和剪貼蒙版命令制作圖像顯示區(qū)域，使用橫排文字工具添加相關信息，使用置入嵌入對象命令置入圖像。最終效果參看云盤中的“Ch07>效果>制作生活家具類網(wǎng)站詳情頁.psd”。7.2.5【實戰(zhàn)演練】制作生活家具類網(wǎng)站詳情頁【案例分析】【設計理念】【知識要點】7.3綜合演練——制作中式茶葉官網(wǎng)招聘頁茶源中式茶葉公司是一家專注于傳統(tǒng)中式茶葉的研發(fā)、生產和銷售的公司。公司以追求卓越的品質和傳承茶文化為使命，致力于為茶葉愛好者帶來正宗的中式茶香體驗。現(xiàn)為拓展公司業(yè)務、擴大規(guī)模，要求設計一款官網(wǎng)招聘頁，設計要符合產品的宣傳主題，能體現(xiàn)出公司的特點。7.3.1【案例分析】在設計制作過程中，規(guī)整大氣的頁面布局，給人簡潔直觀的印象，易讀性強。主次分明的招聘信息，讓人一目了然，便于人們的查找和了解。簡介大氣的畫面，展現(xiàn)出品牌嚴謹?shù)淖非蠛推焚|的保障。7.3.2【設計理念】使用移動工具添加素材圖片，使用橫排文字工具添加相關信息，使用高斯模糊命令模糊圖像效果，使用圖層樣式美化圖像，使用剪貼蒙版命令和矩形工具控制圖像的顯示區(qū)域。最終效果參看云盤中的“Ch07>效果>制作中式茶葉官網(wǎng)招聘頁.psd”。7.3.3【知識要點】【案例分析】【設計理念】【知識要點】7.4綜合演練——制作生活家具類列表頁艾利佳家居是一家具有設計感的現(xiàn)代家具品牌，秉承簡約風格，傳遞“零壓力”生活概念。平臺重點打造簡約、時尚、現(xiàn)代的家居風格?，F(xiàn)為拓展公司業(yè)務、擴大規(guī)模，需要開發(fā)線上購物平臺。要求設計一款網(wǎng)站列表，設計要符合產品的宣傳主題，能體現(xiàn)出平臺的特點。7.4.1【案例分析】在設計制作過程中，規(guī)整大氣的頁面布局，給人簡潔直觀的印象，易讀性強。主次分明的商品展示，讓人一目了然，便于人們的查找和購買。淺色的運用，展現(xiàn)出商品的精致和品質感，同時給人時尚可靠的印象。7.4.2【設計理念】使用置入嵌入對象命令置入圖像，使用矩形工具和橢圓工具繪制裝飾圖形，使用橫排文字工具添加相關信息，使用剪貼蒙版命令和矩形工具控制圖像的顯示區(qū)域。最終效果參看云盤中的“Ch07>效果>制作生活家具類列表頁.psd”。7.4.3【知識要點】第8章包裝設計本章簡介：包裝代表著一個商品的品牌形象，好的包裝設計可以讓商品在同類產品中脫穎而出，吸引消費者的注意力并引發(fā)其購買行為，也可以起到美化商品及傳達商品信息的作用，更可以極大地提高商品的價值。本章以制作多個類別的商品包裝為例，介紹包裝的設計方法和制作技巧。課堂學習目標掌握包裝的設計思路和手段掌握包裝的制作方法和技巧【案例分析】【設計理念】【操作步驟】【相關工具】【實戰(zhàn)演練】制作花藝工坊書籍封面8.1制作攝影書籍封面文安影像出版社，是一家為廣大讀者及出版界提供品種豐富、文化含量高的優(yōu)質圖書的出版社。出版社現(xiàn)要出版《走進攝影世界》一書，要求根據(jù)書籍內容特點，設計書籍封面及封底的內容。8.1.1【案例分析】在設計制作過程中，通過使用優(yōu)秀攝影作品為主要內容，吸引讀者的注意。在畫面中添加推薦文字，布局合理，主次分明。封底與封面相互呼應，向讀者傳達主要的信息內容。整體設計醒目直觀，讓人印象深刻。最終效果參看云盤中的“Ch08/效果/制作攝影書籍封面.psd”。8.1.2【設計理念】8.1.3【操作步驟】1．參考線將鼠標的光標放在水平標尺上，按住鼠標不放，向下拖曳出水平的參考線。將鼠標的光標放在垂直標尺上，按住鼠標不放，向右拖曳出垂直的參考線。8.1.4【相關工具】2．自定形狀工具選擇“自定形狀”工具，或反復按Shift+U組合鍵。屬性欄中的內容與矩形工具屬性欄的選項內容類似，只增加了“形狀”選項，用于選擇所需的形狀。8.1.4【相關工具】3．變換命令在操作過程中可以根據(jù)設計和制作的需要變換已經繪制好的選區(qū)。打開一張圖片。選擇“橢圓選框”工具，在要變換的圖像上繪制選區(qū)。選擇“編輯>自由變換”或“變換”命令。8.1.4【相關工具】使用新建參考線命令添加參考線，使用置入命令置入圖片，使用剪貼蒙版和矩形工具制作圖像顯示效果，使用橫排文字工具添加文字信息，使用鋼筆工具和直線工具添加裝飾圖案，使用圖層混合模式更改圖像的顯示效果。最終效果參看云盤中的“Ch08>效果>制作花藝工坊書籍封面.psd”。8.1.5【實戰(zhàn)演練】制作花藝工坊書籍封面【案例分析】【設計理念】【操作步驟】【相關工具】【實戰(zhàn)演練】制作時尚雜志封面8.2制作影視雜志封面時尚風格雜志社是為走在時尚前沿的人們準備的資訊類雜志。雜志的主要內容是介紹完美彩妝、流行影視、時尚發(fā)型、服飾等信息，獲得了廣大新新人類的喜愛。本案例是設計制作影視雜志封面，設計要求要營造出時尚和現(xiàn)代感，用于雜志的出版及發(fā)售。8.2.1【案例分析】在設計制作過程中，通過極具現(xiàn)代氣息的女性照片作為畫面主體，展現(xiàn)出時尚和潮流感。欄目標題的設計能詮釋雜志內容，表現(xiàn)雜志特色。畫面色彩清新雅致，給人舒適感。設計風格具有特色，版式布局相對集中緊湊、合理有序。最終效果參看云盤中的“Ch08/效果/制作影視雜志封面.psd”。8.2.2【設計理念】8.2.3【操作步驟】1．液化濾鏡命令液化濾鏡命令可以制作出各種類似液化的圖像變形效果。打開一張圖片。選擇“濾鏡>液化”命令，或按Shift+Ctrl+X組合鍵，彈出“液化”對話框。8.2.4【相關工具】2．修補工具使用修補工具可以用圖像中的其他區(qū)域來修補當前選中的需要修補的區(qū)域，也可以使用圖案來進行修補。選擇“修補”工具，或反復按Shift+J組合鍵。8.2.4【相關工具】3．污點修復畫筆工具污點修復畫筆工具的工作方式與修復畫筆工具相似，都是使用圖像中的樣本像素進行繪畫，并將樣本像素的紋理、光照、透明度和陰影與所要修復的像素相匹配。污點修復畫筆工具不需要設定樣本點，它會自動從所修復區(qū)域的周圍取樣。8.2.4【相關工具】4．仿制圖章工具仿制圖章工具可以以指定的像素點為復制基準點，將其周圍的圖像復制到其他地方。選擇“仿制圖章”工具，或反復按Shift+S組合鍵。8.2.4【相關工具】5．加深工具選擇“加深”工具，或反復按Shift+O組合鍵。8.2.4【相關工具】6．可選顏色命令打開一張圖片，選擇“圖像>調整>可選顏色”命令，彈出“可選顏色”對話框，單擊“確定”按鈕。8.2.4【相關工具】使用可選顏色調整圖像顏色，使用仿制圖章工具修復碎發(fā)，使用液化命令修復臉部和肩部，使用快速選擇工具調整人物形體。最終效果參看云盤中的“Ch08>效果>制作時尚雜志封面.psd”。8.2.5【實戰(zhàn)演練】制作時尚雜志封面【案例分析】【設計理念】【操作步驟】【相關工具】【實戰(zhàn)演練】制作蘋果包裝8.3制作果汁飲料包裝冰爽果汁飲品公司致力于創(chuàng)造高品質、天然和美味的果汁飲品，為消費者帶來健康和愉悅的飲品體驗。公司堅持以自然美味的新鮮原材料制作每一杯果汁，致力于滿足消費者對美味和健康的需求。本例是本例是為公司新款葡萄汁制作的包裝，在包裝設計上希望能夠表現(xiàn)出產品健康美味的特點。8.3.1【案例分析】在設計制作過程中，以藍色打底與冰塊相呼應，傳達出冷爽、清新的感覺。綠色易拉罐包裝能夠強調產品天然、健康的屬性。傾斜的藍色字體使包裝具有動感，并且給人力量的感覺，將口感順滑的特色充分地表現(xiàn)出來。最終效果參看云盤中的“Ch08/效果/制作果汁飲料包裝/果汁飲料包裝展示效果.psd”。8.3.2【設計理念】8.3.3【操作步驟】1．漸變工具選擇“漸變”工具，或反復按Shift+G組合鍵。8.3.4【相關工具】2．變形文字選擇“橫排文字”工具，在圖像窗口中輸入文字，單擊屬性欄中的“創(chuàng)建文字變形”按鈕，彈出“變形文字”對話框，在“樣式”選項的下拉列表中包含多種文字的變形效果。8.3.4【相關工具】3．扭曲濾鏡命令扭曲濾鏡效果可以生成一組從波紋到扭曲圖像的變形效果。8.3.4【相關工具】4．渲染濾鏡命令渲染濾鏡可以在圖片中產生不同的照明、光源和夜景效果。8.3.4【相關工具】5．橡皮擦工具選擇“橡皮擦”工具，或反復按Shift+E組合鍵。8.3.4【相關工具】6．“背景色橡皮擦”工具選擇“背景色橡皮擦”工具，或反復按Shift+E組合鍵。8.3.4【相關工具】使用圖層混合模式制作紋理和二維碼與背景融合，使用矩形工具、剪貼蒙版和圖層蒙版制作底圖效果，使用橢圓工具和圖層樣式制作裝飾圖像，使用橫排文字工具添加文件信息，使用鏡頭光暈濾鏡命令制作光暈效果，使用自由變換命令制作斜切效果，使用漸變工具和不透明度制作包裝的明暗變化。最終效果參看云盤中的“Ch08>效果>制作蘋果包裝>制作蘋果立體展示.psd”。8.3.5【實戰(zhàn)演練】制作蘋果包裝【案例分析】【設計理念】【知識要點】8.4綜合演練——制作土豆片軟包裝脆鄉(xiāng)食品有限公司是一家生產、銷售和營銷各種零食的綜合型制造企業(yè)。涵蓋糖果、巧克力、果凍、糕點和調味品等眾多類別。本例是為土豆片設計制作的產品包裝，要求能體現(xiàn)出健康、時尚的特點和陽光、舒適的生活態(tài)度。8.4.1【案例分析】在設計制作過程中，橙黃色的背景用色營造出陽光、舒適的氛圍。綠色葉子和薯片的搭配給人自然、健康的印象。以土豆和土