《Photoshop平面設(shè)計(jì)與制作（第三版）》 課件 項(xiàng)目十一 綜合項(xiàng)目訓(xùn)練三

項(xiàng)目十一

綜合項(xiàng)目訓(xùn)練三講課人：PS

在前面我們學(xué)習(xí)了Photoshop各項(xiàng)基本操作，只有將所學(xué)知識綜合運(yùn)用到實(shí)際工作中，我們才會真正理解知識，才能夠滿足我們理想的效果表現(xiàn)。

本項(xiàng)目中將通過三個(gè)實(shí)戰(zhàn)項(xiàng)目的練習(xí)，將前面所學(xué)知識貫穿起來綜合運(yùn)用。學(xué)習(xí)目的任務(wù)1：校園之星三折頁學(xué)習(xí)目標(biāo)任務(wù)分析任務(wù)實(shí)施學(xué)習(xí)目標(biāo)01任務(wù)1：校園之星三折頁學(xué)習(xí)目標(biāo)通過本任務(wù)綜合運(yùn)用圖層、筆刷、文字、蒙版、圖層樣式等知識，制作一幅具有一定設(shè)計(jì)性的三折頁。任

務(wù)分析02任務(wù)1：校園之星三折頁

本任務(wù)提供相關(guān)素材，分別是“校園之星”、“無限活力”、“奔跑吧”和“墨點(diǎn)圖片”等主要素材。將這幾個(gè)元素有機(jī)的組合在一起，搭配藝術(shù)字效果，設(shè)計(jì)出一幅具有一定設(shè)計(jì)性的三折頁。通過這個(gè)任務(wù)，我們主要復(fù)習(xí)圖層、筆刷、文字、蒙版、圖層樣式等相關(guān)知識。

相關(guān)素材如圖11-1-1校園之星,圖11-1-2墨點(diǎn)圖片,圖11-1-3奔跑吧，圖11-1-4無限活力所示。任務(wù)分析圖11-1-1校園之星圖11-1-2墨點(diǎn)圖片圖11-1-3奔跑吧圖11-1-44無限活力任

務(wù)

實(shí)

施03任務(wù)實(shí)施任務(wù)1：校園之星三折頁一、新建文檔1.設(shè)置折頁的尺寸大小用直尺量好要做的折頁大小。打開Photoshop2022，選擇菜單欄的文件→新建→填入尺寸，填入的尺寸要加上出血位。每條邊加上3mm出血位。比如：寬度28.5cm，實(shí)際填入29.1cm，高度21cm，實(shí)際填入21.6cm。單位要記住選擇的是：厘米,如圖11-1-6所示。2.設(shè)置折頁的分辨率折頁的印刷分辨率是300dpi，輸入數(shù)字：300，選擇單位是：像素/英寸，這是印刷輸出的通用分辨率，如圖11-1-7所示。圖11-1-6尺寸大小圖11-1-7分辨率設(shè)置任務(wù)實(shí)施任務(wù)1：校園之星三折頁3.設(shè)置折頁的顏色模式印刷的顏色模式是CMYK，不是RGB，所以一開始新建文檔的時(shí)候就要把CMYK模式選好，如圖11-1-8所示。4．打開標(biāo)尺按Ctrl+R鍵打開標(biāo)尺，右擊標(biāo)尺在彈出的快捷菜單中選擇“厘米”，將標(biāo)尺的單位設(shè)為“厘米”。圖11-1-8顏色模式任務(wù)實(shí)施任務(wù)1：校園之星三折頁5．新建參考線選擇菜單“視圖”→“新建參考線”，根據(jù)三折頁的劃分及出血尺寸，我們要在水平上新建兩條參考線（0.3厘米、21.3厘米），垂直上新建四條參考線（0.3厘米、9.8厘米、19.3厘米、28.8厘米），建立完后選擇菜單“視圖→鎖定參考線”進(jìn)行參考線鎖定，如果參考線沒有顯示，可以選擇菜單“視圖→顯示→參考線”即可，效果如圖11-1-9所示。圖11-1-9新建參考線小提示：參考線之外多出的3mm就是出血，4個(gè)方向的出血尺寸必須要一致。任務(wù)實(shí)施任務(wù)1：校園之星三折頁二、活動簡介頁制作1．背景顏色設(shè)置前景色為“#f9f1ab”，按Alt+Delete組合鍵，將背景顏色填充為暗黃色。2.創(chuàng)建新組在圖層面板中創(chuàng)建新組，并命名為“活動簡介”，如圖11-1-10所示。圖11-1-10創(chuàng)建新組任務(wù)實(shí)施任務(wù)1：校園之星三折頁1．背景顏色設(shè)置前景色為“#f9f1ab”，按Alt+Delete組合鍵，將背景顏色填充為暗黃色。2.創(chuàng)建新組在圖層面板中創(chuàng)建新組，并命名為“活動簡介”，如圖11-1-10所示。導(dǎo)入圖像“圖11-1-1校園之星”至活動簡介頁，按組合鍵“Ctrl+T”，進(jìn)行自由變換，適當(dāng)調(diào)整大小及位置。并適當(dāng)調(diào)整圖像的“色相/飽和度”，效果如圖11—11所示。圖11-1-10創(chuàng)建新組圖11-1-11色相/飽和度任務(wù)實(shí)施任務(wù)1：校園之星三折頁導(dǎo)入圖像“圖11-1-3奔跑吧”至活動簡介頁，適當(dāng)調(diào)整圖像大小及位置，并為其“添加圖層蒙版”，單擊選擇畫筆工具，將前景色設(shè)置為黑色，畫筆大小為100左右，利用畫筆工具處理圖像邊緣，使其與背景融合，效果如圖11-1-12所示。導(dǎo)入圖像“校園之星logo圖像”至頂部，適當(dāng)調(diào)整圖像大小及位置，將圖層混合模式設(shè)置為“正片疊底”，效果如圖11-1-13所示。圖11-1-12添加圖層蒙版圖11-1-13混合模式任務(wù)實(shí)施任務(wù)1：校園之星三折頁3.文字處理在活動簡介頁中輸入文字內(nèi)容，并設(shè)置標(biāo)題字體為“漢儀菱心體簡”。正文字體為“黑體”。字體安裝方法：復(fù)制“漢儀菱心體簡”→“計(jì)算機(jī)”→“C：\Windows\Fonts”，將“漢儀菱心體簡”粘貼至Fonts里面。效果如圖11-1-14所示。小提示：文字和主要圖片內(nèi)容不要超過出血線位置，印刷時(shí)出血線以外的部分是要被裁剪掉的。圖11-1-14文字處理任務(wù)實(shí)施任務(wù)1：校園之星三折頁三、封底頁制作1.導(dǎo)入圖像首先，創(chuàng)建“封底頁”新組，利用活動簡介頁中的方法，將二維碼導(dǎo)入至封底頁中，效果如圖11-1-15所示。2.文字處理在封底頁中輸入相關(guān)文字，設(shè)置字體為“黑體”、字號為“10點(diǎn)”、顏色為“#e72833”，效果如圖11-1-16所示。圖11-1-15封底頁新組圖11-1-16封底頁文字任務(wù)實(shí)施任務(wù)1：校園之星三折頁四、封面頁制作1.載入畫筆在封面頁中制作墨點(diǎn)效果，將墨點(diǎn)庫中的“高清晰墨汁滴濺筆刷”載入畫筆。方法：選擇畫筆工具，點(diǎn)擊畫筆預(yù)設(shè)，導(dǎo)入畫筆，如圖11-1-17所示。2.墨點(diǎn)制作在圖層面板中新建5個(gè)圖層，運(yùn)用所導(dǎo)入畫筆在這5個(gè)圖層中繪制顏色為：#f5a437、#e94643、#f5a538、#f5a437、#f5cc1d的墨點(diǎn)效果，并適當(dāng)設(shè)置它們的透明度。效果如圖11-1-18所示。圖11-1-17導(dǎo)入畫筆圖11-1-18墨點(diǎn)效果任務(wù)實(shí)施任務(wù)1：校園之星三折頁3.圖像處理導(dǎo)入圖像“星星”至封面頁，按組合鍵“Ctrl+T”，進(jìn)行自由變換，適當(dāng)調(diào)整大小及位置。并為其“添加圖層蒙版”，單擊選擇畫筆工具，將前景色設(shè)置為黑色，畫筆大小為100左右，將前景色設(shè)置為黑色，利用畫筆工具處理星星底部，使其與校園之星文字融合，效果如圖11-1-19所示。4.藝術(shù)字制作在封面頁中輸入“校園之星”，設(shè)置字體為“漢儀菱心體簡”、字號為“45點(diǎn)”、文字顏色：校（#f18b3f）、園（#3a95d3）、之（#ce6998）、星（#4f9836）。圖11-1-17導(dǎo)入畫筆任務(wù)實(shí)施任務(wù)1：校園之星三折頁在圖層面版中雙擊“校園之星”，勾選“描邊”和“投影”為其添加圖層樣式效果，“描邊”具體參數(shù)如圖11—20所示?！巴队啊本唧w參數(shù)如圖11—21所示。圖11-1-20描邊設(shè)置圖11—21投影設(shè)置圖11-1-22校園之星效果任務(wù)實(shí)施任務(wù)1：校園之星三折頁5.其他文字在藝術(shù)字下面輸入主辦單位等等相關(guān)信息，字體為“黑體”、字號為“15點(diǎn)”、顏色為“#e72833”，并適當(dāng)調(diào)整好文字的位置。6.陰影區(qū)域處理導(dǎo)入素材圖像“做舊背景”，將它移至“封面頁”區(qū)域，適當(dāng)調(diào)整圖像大小和位置，并將圖像不透明度調(diào)制50%左右。為“做舊背景”添加圖層蒙版，單擊選擇畫筆工具，將前景色設(shè)置為黑色，畫筆大小為900左右、不透明度50%、流量60%左右，如圖11-1-23所示。將前景色設(shè)置為黑色，利用畫筆工具處理做舊背景的明暗度，直至形成陰影效果，使其與封面頁內(nèi)容相融合，效果如圖11-1-24所示。圖11-1-23畫筆設(shè)置果圖11-1-24明暗效果任務(wù)實(shí)施任務(wù)1：校園之星三折頁用上述步驟“6.陰影區(qū)域處理”方法制作“活動簡介頁”明暗陰影效果，完成活動簡介頁陰影效果后，在折頁底部導(dǎo)入圖像素材“圖11-1-4無限活力”，適當(dāng)調(diào)整圖像大小及位置，為此，校園之星三折頁制作完成，最終效果如下圖：任務(wù)2：校園網(wǎng)制作學(xué)習(xí)目標(biāo)任務(wù)分析任務(wù)實(shí)施學(xué)習(xí)目標(biāo)01任務(wù)2：校園網(wǎng)制作學(xué)習(xí)目標(biāo)通過本書所學(xué)知識設(shè)計(jì)導(dǎo)航菜單、banner、網(wǎng)頁主體部分等內(nèi)容，最后再通過切片工具對平面圖進(jìn)行切割，存儲為網(wǎng)頁所使用的格式。任

務(wù)分析02任務(wù)2：校園網(wǎng)制作

校園網(wǎng)是為學(xué)校師生提供教學(xué)、科研和綜合信息服務(wù)的寬帶多媒體網(wǎng)絡(luò)。首先，校園網(wǎng)應(yīng)為學(xué)校教學(xué)、科研提供先進(jìn)的信息化教學(xué)環(huán)境。校園網(wǎng)內(nèi)容涉及范圍較廣，為廣大師生們提供在校的學(xué)習(xí)生活所需，同時(shí)又涉及步入社會所必需的常識，致力于為學(xué)生提供更好的學(xué)習(xí)、生活、成長、就業(yè)的綜合性服務(wù)平臺。學(xué)校校園網(wǎng)正在積極與各類信息網(wǎng)站、商家聯(lián)系，以求更好的服務(wù)校園學(xué)生。

最終效果如圖11-2-1所示。任務(wù)分析圖11-2-1校園網(wǎng)最終效果任

務(wù)

實(shí)

施03任務(wù)實(shí)施任務(wù)2：校園網(wǎng)制作一、新建文檔啟動Photoshop2022，選擇“文件”/“新建”命令，打開“新建”對話框，在“名稱”文本框中輸入文件名為“校園網(wǎng)主頁”，在“寬度”和“高度”文本框中分別輸入1000和1550，單擊“創(chuàng)建”，完成文檔建立，如圖11-2-2所示。圖11-2-2新建文檔任務(wù)實(shí)施任務(wù)2：校園網(wǎng)制作二、新建參考線選擇“視圖”/“標(biāo)尺”命令或按組合鍵“Ctrl+R”顯示出標(biāo)尺，使用鼠標(biāo)的水平和垂直標(biāo)尺上拖動，繪制參考線，以確定網(wǎng)頁每部分區(qū)域的劃分，如圖11-2-3所示。圖11-2-3新建參考線任務(wù)實(shí)施任務(wù)2：校園網(wǎng)制作三、制作網(wǎng)頁banner和導(dǎo)航1.在“圖層”面板中單擊“創(chuàng)建新組”按鈕，新建一個(gè)圖層組，并將其命名為“banner”，將banner素材置入該組中，如圖11-2-4所示。2.打開素材文件夾“圖片”直接將“banner.jpg”拖入到“校園網(wǎng)制作.psd”圖像文件中，按Enter鍵，在打開的對話框中單擊“確定”置入圖片。然后再“圖層”面板上“banner”圖層上右擊，在彈出的快捷菜單中選擇“柵格化圖層”命令，將其轉(zhuǎn)換為普通圖層，如圖11-2-5所示。圖11-2-4新建圖層組圖11-2-5柵格化圖層任務(wù)實(shí)施任務(wù)2：校園網(wǎng)制作3.創(chuàng)建“導(dǎo)航”新組，將導(dǎo)航素材置入該組中。置入“導(dǎo)航背景.png”素材文件,將其放置在banner的右上側(cè),并在導(dǎo)航背景上輸入導(dǎo)航文本和分割線，效果如圖11-2-6所示。圖11-2-6制作導(dǎo)航任務(wù)實(shí)施任務(wù)2：校園網(wǎng)制作4.創(chuàng)建“藝術(shù)字”新組，將素材“藝術(shù)字配圖”導(dǎo)入該組中。在banner中輸入文本“青春不散場”，字體為“葉根友行書繁”，字號“70點(diǎn)”，適當(dāng)調(diào)整文本的位置。將“藝術(shù)字配圖”圖層移至“青春不散場”圖層上方，按住Alt鍵，將光標(biāo)放在兩個(gè)圖層之間“創(chuàng)建剪貼蒙版”，適當(dāng)移動調(diào)整“藝術(shù)字配圖”的大小與位置，效果如圖11-2-7所示。5.在圖層面板中雙擊“青春不散場”，打開“圖層樣式”對話框,選擇“描邊”選項(xiàng),設(shè)置其大小為“3”，顏色為“白色”；選擇“投影”選項(xiàng),設(shè)置其顏色為“黑色”，不透明度“50%”，距離7、擴(kuò)展2、大小2，如圖11-2-8所示。圖11-2-7創(chuàng)建剪貼蒙版圖11-2-8設(shè)置圖層樣式任務(wù)實(shí)施任務(wù)2：校園網(wǎng)制作四、制作網(wǎng)頁內(nèi)容區(qū)域1.制作內(nèi)容區(qū)域前，在banner背景圖像之上，利用圓角矩形工具繪制“內(nèi)容區(qū)域”左側(cè)背景。將圓角矩形的半徑設(shè)置為“40像素”，顏色為白色，繪制到頁面的最底部，并適當(dāng)調(diào)整大小。2.創(chuàng)建“重要公告”新組，在頁面左側(cè)制作“重要公告”區(qū)域。繪制圓角矩形，將圓角矩形的半徑設(shè)置為“90”像素，添加“斜面和浮雕”效果，參數(shù)如圖11-2-9所示。在圓角矩形上添加文本“重要公告”和“Information”字體為“方正行楷簡體”，字號為25點(diǎn)和15點(diǎn)，顏色為“#695044”，效果如圖11-2-10所示。圖11-2-9設(shè)置圖層樣式圖11-2-10重要公告效果任務(wù)實(shí)施任務(wù)2：校園網(wǎng)制作3.創(chuàng)建“畢業(yè)專欄”新組，在頁面左側(cè)制作“畢業(yè)專欄”區(qū)域。用矩形工具繪制矩形，將填充顏色設(shè)置為“#f6b693”,描邊無色，在矩形上輸入文本“畢業(yè)專欄”，字體為“方正行楷簡體”，字號為25點(diǎn),顏色為“#ffffff”。4.在“畢業(yè)專欄”區(qū)域制作5條虛線下劃線。選擇直線工具設(shè)置線條為“虛線”如圖11-2-11所示。填充顏色為無色，描邊為“#766157”，3像素，粗細(xì)1像素。分別在5條虛線上輸入文本內(nèi)容和瀏覽更多“>>”，文本字體為“華文新魏”，字號為20點(diǎn),顏色為“#766157”。圖11-2-11設(shè)置線型任務(wù)實(shí)施任務(wù)2：校園網(wǎng)制作5.創(chuàng)建“站內(nèi)搜索”新組，在頁面左側(cè)制作“站內(nèi)搜索”區(qū)域。選擇“圓角矩形”，填充顏色為“#faf8f8”，描邊顏色為“#766157”，線型為實(shí)線，半徑為“10像素”。6.在“站內(nèi)搜索”內(nèi)制作搜索圖標(biāo)。選擇自定義形狀工具，在形狀庫里找到“搜索”形狀，按住shift鍵，繪制“搜素”圖標(biāo)，將填充顏色設(shè)置為“#766157”，描邊顏色為“#a0a0a0”。在其后輸入文本“站內(nèi)搜索”，本文字體為“方正行楷簡體”，字號為25點(diǎn),顏色為“#000000”。7.繪制搜索框，選擇矩形工具，設(shè)置填充顏色為“#ffffff”，描邊顏色為“#000000”。在其后制作搜索按鈕，選擇圓角矩形工具，填充顏色為“#ffffff”，描邊顏色為“#000000”，線型為實(shí)線，半徑為“10像素”，輸入文本“搜索”本文字體為“方正行楷簡體”，字號為20點(diǎn),顏色為“#000000”。最后在其后繪制黑色三角形，效果如圖11-2-12所示。圖11-2-12站內(nèi)搜索效果任務(wù)實(shí)施任務(wù)2：校園網(wǎng)制作8.創(chuàng)建“圖像”新組，在頁面中間制作“30周年校慶”區(qū)域。導(dǎo)入素材圖片“30周年”，適當(dāng)調(diào)整圖像大小及位置。并利用圓角矩形在圖像上繪制白邊，選擇圓角矩形，設(shè)置填充色為“無色”，描邊色為“ffffff”，半徑為“10像素”。9.創(chuàng)建“快捷通道”新組，在頁面左側(cè)制作“快捷通道”區(qū)域。選擇圓角矩形工具，將填充顏色設(shè)置為“#f6b693”,描邊為“#766157”，1像素，半徑為“10像素”繪制圓角矩形，將本圖層命名為“快捷通道1”，復(fù)制本圖層，并命名為“快捷通道2”。選中圖層“快捷通道2”，選擇“矩形工具”，在“路徑操作”中選擇“減去頂層形狀”如圖11-2-13所示。圖11-2-13減去頂層形狀任務(wù)實(shí)施任務(wù)2：校園網(wǎng)制作10.利用矩形工具掏空“快捷通道2”四分之三空間，選擇“快捷通道1”，設(shè)置圓角矩形填充色為白色，效果如圖11-2-14所示。最后將“快捷通道1”和“快捷通道2”合并，并重命名圖層為“快捷通道”。11.選擇“矩形工具”，設(shè)置填充色為“#fad3be”，描邊色為“#bfbfbf”，1像素，在快捷通道繪制6個(gè)矩形模塊，并輸入相應(yīng)的文本。字體為“方正行楷簡體”?！翱旖萃ǖ馈蔽谋绢伾珵榘咨?ffffff”,字號為25點(diǎn)。其余文本顏色為咖色“#695044”，字號為18點(diǎn)，效果如圖11-2-15所示。圖11-2-14快捷通道框架圖11-2-15快捷通道效果任務(wù)實(shí)施任務(wù)2：校園網(wǎng)制作12.打開素材文件夾“圖片”，將“綠色間隔線.png”拖入到“快捷通道”下方，完成間隔效果的制作。13.創(chuàng)建“部門通道”新組，在頁面左側(cè)制作“部門通道”區(qū)域。重復(fù)以上第9、10、11、12的步驟，完成“部門通道”的制作，效果如圖11-2-16所示。圖11-2-16部門通道效果任務(wù)實(shí)施任務(wù)2：校園網(wǎng)制作14.創(chuàng)建“二級導(dǎo)航”新組，在頁面中上部制作“二級導(dǎo)航”區(qū)域。選擇直線工具，將填充顏色設(shè)置為“#9b8a82”,描邊為無色，1像素，粗細(xì)：2像素，繪制一條直線，將本圖層命名為“間隔線”。15.雙擊“間隔線”圖層，為其添加“斜面和浮雕”效果，參數(shù)設(shè)置如圖11-2-17所示。圖11-2-17間隔線設(shè)置任務(wù)實(shí)施任務(wù)2：校園網(wǎng)制作16.點(diǎn)擊“自定義形狀”，選擇“三角形”，將填充顏色設(shè)置為“#9b8a82”,在間隔線上繪制三角形，并輸入導(dǎo)航文本，字體為“方正行楷簡體”，字號為25點(diǎn)，文本顏色為咖色“#695044”，效果如圖11-2-18所示。17.用同樣的方法制作右側(cè)“公共平臺”的間隔線。18.創(chuàng)建“學(xué)校要聞”新組，在頁面中間制作“學(xué)校要聞”區(qū)域。導(dǎo)入素材圖片“14廣告301”，適當(dāng)調(diào)整圖像大小及位置。并利用圓角矩形在圖像上繪制白邊，選擇圓角矩形，設(shè)置填充色為“無色”，描邊色為“#ffffff”，半徑為“10像素”。19.在圖像底部制作圖片輪播區(qū)域，選擇“圓角矩形”，設(shè)置填色顏色為黑色“#000000”，描邊無色，半徑為“10像素”，繪制圓角矩形，設(shè)置圓角矩形“不透明度：40%”。圖11-2-18二級導(dǎo)航效果任務(wù)實(shí)施任務(wù)2：校園網(wǎng)制作20.選擇直線工具，設(shè)置填充色為白色“#ffffff”,描邊為無色，1像素，粗細(xì)：1像素，繪制一條直線，將本圖層命名為“線條”。復(fù)制6條線條，并調(diào)整好線條位置。21.選擇矩形工具，設(shè)置填充色為紅色“#fe1125”,描邊為無色，在數(shù)字“2”上方繪制矩形和三角形，將不透明度設(shè)置為：60%，效果如圖11-2-19所示。22.選擇自定義形狀工具，選擇“前進(jìn)”工具，如圖11-2-20所示，將填充顏色設(shè)置為“#695044”，描邊為無色，繪制前進(jìn)形狀。圖11-2-19輪播區(qū)域效果圖11-2-20自定義”前進(jìn)“形狀任務(wù)實(shí)施任務(wù)2：校園網(wǎng)制作23.在“前進(jìn)”形狀下制作5條虛線下劃線。選擇直線工具設(shè)置線條為“虛線”。填充顏色為無色，描邊為“#766157”，3像素，粗細(xì)1像素。分別在5條虛線上輸入文本內(nèi)容，文本字體為“方正行楷簡體”，字號為18點(diǎn),顏色為“#766157”，效果如圖11-2-20所示。圖11-2-21學(xué)校要聞文字區(qū)域效果任務(wù)實(shí)施任務(wù)2：校園網(wǎng)制作24.創(chuàng)建“公共平臺”新組，在頁面右側(cè)制作“公共平臺”區(qū)域。選擇圓角矩形，設(shè)置填充色為“#ddeada”，描邊色為“#a9aca8”，半徑為“10像素”，繪制“信息門戶”和“移動APP”區(qū)域圓角矩形。25.導(dǎo)入素材圖片“電腦”“手機(jī)”和“綠色間隔線”適當(dāng)調(diào)整圖像大小及位置，輸入文本“信息門戶”和“移動APP”，文本字體為“方正行楷簡體”，字號為16點(diǎn),顏色為“#766157”。26.在綠色間隔線下方制作鏈接區(qū)域，選擇“矩形工具”，設(shè)置填色顏色為白色“#ffffff”，描邊“#a9aca8”，繪制矩形，在矩形中輸入文本，文本字體為“新宋體”，字號為12點(diǎn),顏色為“#000000”，并制作左右兩側(cè)小物件，效果如圖11-2-22所示。圖11-2-22公共平臺效果任務(wù)實(shí)施任務(wù)2：校園網(wǎng)制作27.制作“學(xué)院宣傳片”區(qū)域，輸入文本“學(xué)院宣傳片”文本字體為“方正行楷簡體”，字號為25點(diǎn)，文本顏色為咖色“#695044”。28.制作間隔線，根據(jù)上述步驟第14、15、16步的方法制作間隔線，或者復(fù)制上面已完成的間隔線。將圖片“膠片播放”素材導(dǎo)入至“圖像”組里，適當(dāng)調(diào)整圖像大小及位置，效果如圖11-2-23所示。圖11-2-23學(xué)院宣傳片效果任務(wù)實(shí)施任務(wù)2：校園網(wǎng)制作29.按照“學(xué)院宣傳片”制作方式，完成“畢業(yè)影集”區(qū)域的制作，效果如圖11-2-24所示。30.制作“畢業(yè)語錄”區(qū)域，輸入文本“畢業(yè)語錄”文本字體為“方正行楷簡體”，字號為25點(diǎn)，文本顏色為咖色“#695044”。復(fù)制以上間隔線，做間隔效果。31.選擇圓角矩形，設(shè)置填充色為白色“#ffffff”，描邊色為“#a9aca8”，半徑為“10像素”，繪制“畢業(yè)語錄”區(qū)域圓角矩形。圖11-2-24畢業(yè)影集效果任務(wù)實(shí)施任務(wù)2：校園網(wǎng)制作32.在圓角矩形中導(dǎo)入素材圖片“學(xué)士帽”適當(dāng)調(diào)整圖像大小及位置，并在圓角矩形中輸入文本，文本字體為“新宋體”，字號為15點(diǎn)，文本顏色為咖色“#695044”，效果如圖11-2-25所示。33.按照“畢業(yè)語錄”制作方式，完成“教師寄語”區(qū)域的制作，效果如圖11-2-26所示。圖11-2-25畢業(yè)語錄效果圖11-2-26教師寄語效果任務(wù)實(shí)施任務(wù)2：校園網(wǎng)制作34.將圖片“眾創(chuàng)杯”素材導(dǎo)入至“圖像”組里，適當(dāng)調(diào)整圖像大小及位置。并利用圓角矩形在圖像上繪制白邊，選擇圓角矩形，設(shè)置填充色為“無色”，描邊色為“ffffff”，半徑為“10像素”，效果如圖11-2-27所示。35.創(chuàng)建“版權(quán)”新組，在頁面底部制作“版權(quán)”區(qū)域。選擇圓角矩形，設(shè)置填充色為“#078d8e”，描邊色為“#f6b693”，半徑為“10像素”，繪制“版權(quán)”區(qū)域圓角矩形。36.在版權(quán)區(qū)域輸入文本，文本字體為“宋體”，字號為13點(diǎn)，文本顏色為白色“#ffffff”,效果如圖11-2-28所示。圖11-2-27眾創(chuàng)杯效果圖11-2-28版權(quán)效果任務(wù)3：用戶界面設(shè)計(jì)學(xué)習(xí)目標(biāo)任務(wù)分析任務(wù)實(shí)施學(xué)習(xí)目標(biāo)01任務(wù)3：用戶界面設(shè)計(jì)學(xué)習(xí)目標(biāo)通過本任務(wù)綜合運(yùn)用矩形工具、橢圓工具和圓角矩形工具等工具繪制圖形，制作設(shè)計(jì)旅游App的登陸界面和主界面首頁。任

務(wù)分析02任務(wù)3：用戶界面設(shè)計(jì)

本任務(wù)是制作旅游App的登陸界面和主界面首頁，通過這個(gè)任務(wù)，了解用戶界面設(shè)計(jì)和APP的分類，復(fù)習(xí)移動工具、橢圓工具和圓角矩形工具、圖層樣式、剪貼蒙版、文字工具等相關(guān)知識。

最終效果如圖11-3-1所示。任務(wù)分析圖11-3-1最終效果任

務(wù)

實(shí)

施03任務(wù)實(shí)施任務(wù)3：用戶界面設(shè)計(jì)一、新建文檔啟動Photoshop2022，選擇“文件”/“新建”命令，打開“新建”對話框，在“名稱”文本框中輸入文件名為“登錄界面頁”，“寬度”750像素，“高度”1334像素，分辨率72像素，點(diǎn)擊“創(chuàng)建”。如圖11-3-2所示。圖11-3-2新建文檔任務(wù)實(shí)施任務(wù)3：用戶界面設(shè)計(jì)二、繪制旅游App的登陸界面1．新建參考線選擇菜單“視圖”→“新建參考線”，建立完后選擇菜單“視圖→鎖定參考線”進(jìn)行參考線鎖定，如果參考線沒有顯示，可以選擇菜單“視圖→顯示→參考線”即可，效果如圖11-3-3所示。圖11-3-3新建參考線任務(wù)實(shí)施任務(wù)3：用戶界面設(shè)計(jì)2．新建圖層，選擇“漸變工具”，選擇“線性漸變”，填充漸變色，色值為#209cff，#68e0cf，設(shè)置如圖11-3-4所示。3.導(dǎo)入素材“狀態(tài)欄”，在狀態(tài)欄左下方用“鋼筆工具”繪制返回形狀，雙擊“狀態(tài)欄”圖層，為其添加“斜面和浮雕”效果，參數(shù)設(shè)置如圖11-3-5所示。圖11-3-4“漸變工具”參數(shù)設(shè)置圖11-3-5“斜面和浮雕”參數(shù)設(shè)置任務(wù)實(shí)施任務(wù)3：用戶界面設(shè)計(jì)4.創(chuàng)建“登錄”新組，選擇“矩形工具”創(chuàng)建“寬度”590像素“高度”94像素，“圓角”調(diào)整為47像素，邊框填充為白色，描邊大小為2像素。使用“選擇工具”調(diào)整到合適位置，選擇“文字工具”輸入“+86”、“請輸入手機(jī)號”文本，顏色為白色，調(diào)整位置。在上方輸入文本“未注冊手機(jī)驗(yàn)證后即完成注冊”。5.復(fù)制圓角矩形，填充顏色#ffffff，選擇“文字工具”輸入文本“獲取驗(yàn)證碼”，下方輸入“忘記密碼”。如圖11-3-6所示。圖11-3-6登錄效果任務(wù)實(shí)施任務(wù)3：用戶界面設(shè)計(jì)6.創(chuàng)建“其他登錄方式”新組，導(dǎo)入“其他方式.psd”素材。使用“選擇工具”調(diào)整到合適位置，選擇“文字工具”輸入“其他登錄方式”，選擇“直線工具”繪制兩條直線，調(diào)整合適位置。登錄頁完成，效果如圖11-3-7所示。圖11-3-7其他登錄方式效果任務(wù)實(shí)施任務(wù)3：用戶界面設(shè)計(jì)三、繪制旅游App的主界面首頁1.選擇“文件”/“新建”命令，打開“新建”對話框，在“名稱”文本框中輸入文件名為“主界面”，“寬度”750像素，“高度”1334像素，分辨率72像素，點(diǎn)擊“創(chuàng)建”。2.新建參考線，選擇菜單“視圖”→“新建參考線”，填充前景色為#fafafa。3.選擇“矩形工具”繪制一個(gè)矩形，寬750像素，高404像素，與頂部對齊，雙擊“矩形1”圖層，為其添加“投影”效果，參數(shù)設(shè)置如圖11-3-8所示。圖11-3-8投影參數(shù)設(shè)置任務(wù)實(shí)施任務(wù)3：用戶界面設(shè)計(jì)4.導(dǎo)入素材“狀態(tài)欄”，使用“選擇工具”調(diào)整到合適位置。5.創(chuàng)建“定位”新組，使用多邊形工具繪制倒三角形，選擇“文字工具”輸入“東莞”，黑體，字號66點(diǎn)，使用