UI界面設(shè)計與制作電子教案

教案編號:5課題:第5章UI中的頁面設(shè)計課時:16課時授課類型:講授+實訓(xùn)項目目標(biāo):●掌握App的閃屏頁制作●掌握App的引導(dǎo)頁制作●掌握App的首頁制作●掌握App的個人中心頁制作●掌握App的詳情頁制作●掌握App的注冊登錄頁制作項目重點:●App的閃屏頁制作●App的引導(dǎo)頁制作●App的首頁制作●App的個人中心頁制作●App的詳情頁制作●App的注冊登錄頁制作項目難點:App閃屏頁、引導(dǎo)頁、首頁、個人中心頁、詳情頁、注冊登錄頁的制作方法項目技能點：App閃屏頁、引導(dǎo)頁、首頁、個人中心頁、詳情頁、注冊登錄頁的制作項目教學(xué)技巧：1.知識講解2.案例實訓(xùn)項目過程：（一）課前準(zhǔn)備1.授課前準(zhǔn)備準(zhǔn)備好教學(xué)用具和教學(xué)設(shè)備2.板書課題：第5章UI中的頁面設(shè)計項目目標(biāo):●掌握App的閃屏頁制作●掌握App的引導(dǎo)頁制作●掌握App的首頁制作●掌握App的個人中心頁制作●掌握App的詳情頁制作●掌握App的注冊登錄頁制作3.課程引入通過課堂案例效果展示介紹App各頁面閃屏頁引導(dǎo)頁首頁個人中心頁詳情頁登錄頁（二）課程內(nèi)容閃屏頁作為UI設(shè)計中的常用頁面之一，具有突出產(chǎn)品、展示營銷的作用。下面分別從概念以及類型這兩個方面進行閃屏頁的講解。5.1.1閃屏頁的概念閃屏頁又稱為“啟動頁”，是用戶點擊App圖標(biāo)后，預(yù)先加載的一張圖片。閃屏頁承載了用戶對App的第一印象，是情感化設(shè)計的重要組成部分，可以細分為品牌推廣型、活動廣告型、節(jié)日關(guān)懷型。5.1.2閃屏頁的類型1.品牌推廣型品牌推廣型閃屏頁是為表現(xiàn)產(chǎn)品品牌而設(shè)定?；静捎谩爱a(chǎn)品logo+產(chǎn)品名稱+產(chǎn)品”的簡潔化設(shè)計形式，如圖所示。1號店閑魚螞蟻財富2.活動廣告型活動廣告型閃屏頁是為推廣活動或廣告而設(shè)定，通常將推廣的內(nèi)容直接設(shè)計在閃屏頁內(nèi)。多采用插畫以及暖色的設(shè)計形式，用以營造熱鬧的氛圍，如圖所示。百度網(wǎng)盤百度瀏覽器知乎雙11國慶雙123.節(jié)日關(guān)懷型節(jié)日關(guān)懷型閃屏頁是為營造節(jié)假日氛圍同時凸顯產(chǎn)品品牌而設(shè)定的。多采用“產(chǎn)品logo+內(nèi)容插畫”的設(shè)計形式，使用戶感受到節(jié)日的關(guān)懷與祝福，如圖所示。百度錢包QQ音樂QQ瀏覽器5.1.3課堂案例——制作旅游類App閃屏頁【案例設(shè)計要求】1.產(chǎn)品名稱：游兒，運用軟件Photoshop制作旅游類App閃屏頁，效果如圖所示。2.頁面尺寸：750px（寬）×1624px（高）。3.體現(xiàn)出行業(yè)風(fēng)格。【案例學(xué)習(xí)目標(biāo)】學(xué)習(xí)使用軟件Photoshop制作旅游類App閃屏頁。效果圖【案例知識要點】使用置入嵌入對象命令置入圖像，使用顏色疊加命令添加效果。（1）按Ctrl+N組合鍵，彈出“新建文檔”對話框，將寬度設(shè)為750像素，高度設(shè)為1624像素，分辨率設(shè)為72像素/英寸，背景內(nèi)容設(shè)為白色，如圖所示。單擊“創(chuàng)建”按鈕，完成文檔新建。（2）選擇“文件>置入嵌入對象”命令，彈出“置入嵌入的對象”對話框。選擇云盤中的“Ch05>制作旅游類App>制作旅游類App閃屏頁>素材>01”文件，單擊“置入”按鈕，將圖片置入到圖像窗口中，按Enter鍵確定操作，效果如圖所示，在“圖層”控制面板中生成新的圖層并將其命名為“背景圖”。（3）選擇“視圖>新建參考線”命令，彈出“新建參考線”對話框，設(shè)置如圖所示。單擊“確定”按鈕，完成參考線的創(chuàng)建，效果如圖所示。（4）選擇“視圖>新建參考線版面”命令，彈出“新建參考線版面”對話框，設(shè)置如圖所示。單擊“確定”按鈕，完成參考線的創(chuàng)建，效果如圖所示。（5）選擇“文件>置入嵌入對象”命令，彈出“置入嵌入的對象”對話框。選擇云盤中的“Ch05>制作旅游類App>制作旅游類App閃屏頁>素材>02”文件，單擊“置入”按鈕，將圖片置入到圖像窗口中，將其拖曳到適當(dāng)?shù)奈恢?，按Enter鍵確定操作，效果如圖所示，在“圖層”控制面板中生成新的圖層并將其命名為“狀態(tài)欄”。（6）單擊“圖層”控制面板下方的“添加圖層樣式”按鈕，在彈出的菜單中選擇“顏色疊加”命令，彈出對話框，設(shè)置“疊加”顏色為白色，單擊“確定”按鈕。返回到“顏色疊加”對話框，其他選項的設(shè)置如圖所示，單擊“確定”按鈕，效果如圖所示。（7）選擇“文件>置入嵌入對象”命令，彈出“置入嵌入的對象”對話框。選擇云盤中的“Ch05>制作旅游類App>制作旅游類App閃屏頁>素材>03”文件，單擊“置入”按鈕，將圖片置入到圖像窗口中，將其拖曳到適當(dāng)?shù)奈恢貌⒄{(diào)整大小，按Enter鍵確定操作，在“圖層”控制面板中生成新的圖層并將其命名為“Logo”。選擇“窗口>屬性”命令，彈出“屬性”面板，在面板中進行設(shè)置，如圖所示，效果如圖所示。（8）選擇“文件>置入嵌入對象”命令，彈出“置入嵌入的對象”對話框。選擇云盤中的“Ch05>制作旅游類App>制作旅游類App閃屏頁>素材>04”文件，單擊“置入”按鈕，將圖片置入到圖像窗口中，將其拖曳到適當(dāng)?shù)奈恢?，按Enter鍵確定操作，在“圖層”控制面板中生成新的圖層并將其命名為“HomeIndicator”。將其“不透明度”選項設(shè)為60%，如圖所示，效果如圖所示。引導(dǎo)頁作為UI設(shè)計中的常用頁面之一，具有操作引導(dǎo)、講解功能的作用。下面分別從概念以及類型這兩個方面進行引導(dǎo)頁的講解。5.2.1引導(dǎo)頁的概念引導(dǎo)頁是用戶在第一次或經(jīng)過更新，打開App看到的一組圖片，通常由3-5頁組成。引導(dǎo)頁起到了在用戶使用App之前，提前幫助用戶快速了解App的主要功能和特點的作用，可以細分為功能說明型以及產(chǎn)品推廣型。5.2.2引導(dǎo)頁的類型1.功能說明型功能說明型引導(dǎo)頁是引導(dǎo)頁中最基礎(chǔ)的，主要對產(chǎn)品的新功能進行展示，常用于App重大版本的更新中。多采用插圖的設(shè)計形式，達到短時間內(nèi)吸引用戶的效果，如圖所示。高德地圖App的功能說明型引導(dǎo)頁2.產(chǎn)品推廣型產(chǎn)品推廣型引導(dǎo)頁是表達App的價值，讓用戶更了解這款A(yù)pp的情懷。多采用與企業(yè)形象和產(chǎn)品風(fēng)格一致的生動化、形象化設(shè)計形式，讓用戶感到畫面的精美，如圖所示。京東商城App的產(chǎn)品推廣型引導(dǎo)頁5.2.3課堂案例——制作旅游類App引導(dǎo)頁【案例設(shè)計要求】1.運用軟件Photoshop制作旅游類App引導(dǎo)頁，效果如圖所示。2.頁面尺寸：750px（寬）×1624px（高）。3.體現(xiàn)出行業(yè)風(fēng)格?！景咐龑W(xué)習(xí)目標(biāo)】學(xué)習(xí)使用軟件Photoshop制作旅游類App引導(dǎo)頁。效果圖【案例知識要點】使用置入嵌入對象命令置入圖像和圖標(biāo)，使用漸變疊加命令和顏色疊加命令添加效果，使用橫排文字工具輸入文字。1.制作美食到家App引導(dǎo)頁1（1）按Ctrl+N組合鍵，彈出“新建文檔”對話框，將寬度設(shè)為750像素，高度設(shè)為1624像素，分辨率設(shè)為72像素/英寸，背景內(nèi)容設(shè)為白色，如圖所示。單擊“創(chuàng)建”按鈕，完成文檔新建。（2）選擇“文件>置入嵌入對象”命令，彈出“置入嵌入的對象”對話框。選擇云盤中的“Ch05>制作旅游類App>制作旅游類App引導(dǎo)頁1>素材>01”文件，單擊“置入”按鈕，將圖片置入到圖像窗口中，拖曳到適當(dāng)?shù)奈恢貌⒄{(diào)整大小，按Enter鍵確定操作，效果如圖所示，在“圖層”控制面板中生成新的圖層并將其命名為“背景圖”。（3）單擊“圖層”控制面板下方的“創(chuàng)建新圖層”按鈕，在“圖層”控制面板生成新的圖層“圖層1”。將前景色設(shè)為黑色，按Alt+Delete組合鍵，為“圖層1”填充前景色，如圖所示。（4）單擊“圖層”控制面板下方的“添加圖層樣式”按鈕，在彈出的菜單中選擇“漸變疊加”命令，彈出對話框，單擊“漸變”選項右側(cè)的“點按可編輯漸變”按鈕，彈出“漸變編輯器”對話框，在“位置”選項中分別輸入0、100兩個位置點，分別設(shè)置兩個位置點顏色的RGB值均設(shè)為黑色。設(shè)置兩個位置點的不透明度值為0（30%）、100（0%），如圖所示，單擊“確定”按鈕。返回到“漸變疊加”對話框，其他選項的設(shè)置如圖所示，單擊“確定”按鈕，效果如圖所示。（5）選擇“視圖>新建參考線版面”命令，彈出“新建參考線版面”對話框，設(shè)置如圖所示。單擊“確定”按鈕，完成參考線的創(chuàng)建，效果如圖所示。（6）選擇“文件>置入嵌入對象”命令，彈出“置入嵌入的對象”對話框。選擇云盤中的“Ch05>制作旅游類App>制作旅游類App引導(dǎo)頁1>素材>02”文件，單擊“置入”按鈕，將圖片置入到圖像窗口中，將其拖曳到適當(dāng)?shù)奈恢?，按Enter鍵確定操作，效果如圖所示，在“圖層”控制面板中生成新的圖層并將其命名為“狀態(tài)欄”。（7）單擊“圖層”控制面板下方的“添加圖層樣式”按鈕，在彈出的菜單中選擇“顏色疊加”命令，彈出對話框，設(shè)置“疊加”顏色為白色，單擊“確定”按鈕。返回到“顏色疊加”對話框，其他選項的設(shè)置如圖所示，單擊“確定”按鈕，效果如圖所示。（8）選擇“視圖>新建參考線”命令，彈出“新建參考線”對話框，設(shè)置如圖所示。單擊“確定”按鈕，完成參考線的創(chuàng)建，效果如圖所示。（9）選擇“文件>置入嵌入對象”命令，彈出“置入嵌入的對象”對話框。選擇云盤中的“Ch05>制作旅游類App>制作旅游類App引導(dǎo)頁1>素材>03”文件，單擊“置入”按鈕，將圖標(biāo)置入到圖像窗口中，拖曳到適當(dāng)?shù)奈恢貌⒄{(diào)整大小，按Enter鍵確定操作，效果如圖所示，在“圖層”控制面板中生成新的圖層并將其命名為“關(guān)閉”。（10）按Ctrl＋G組合鍵，群組圖層并將其命名為“導(dǎo)航欄”，如圖所示。選擇“橫排文字”工具，在適當(dāng)?shù)奈恢幂斎胄枰奈淖植⑦x取文字，選擇“窗口>字符”命令，彈出面板，將“顏色”設(shè)為白色，其他選項的設(shè)置如圖所示，按Enter鍵確定操作，效果如圖所示，在“圖層”控制面板中生成新的文字圖層。（11）使用相同的方法，再次在適當(dāng)?shù)奈恢梅謩e輸入需要的文字并選取文字，在“字符”面板中，將“顏色”設(shè)為白色，其他選項的設(shè)置如圖所示，按Enter鍵確定操作，效果如圖所示，在“圖層”控制面板中分別生成新的文字圖層。（12）按Ctrl＋O組合鍵，打開云盤中的“Ch03>制作旅游類App頁面控件.psd”文件，在“圖層”控制面板中，選中“頁面控件”圖層組。選擇“移動”工具，將選取的圖層組拖曳到新建的圖像窗口中適當(dāng)?shù)奈恢茫鐖D所示，效果如圖所示。（13）選擇“橫排文字”工具，在適當(dāng)?shù)奈恢幂斎胄枰奈淖植⑦x取文字，在“字符”面板中，將“顏色”設(shè)為白色，其他選項的設(shè)置如圖所示，按Enter鍵確定操作，在“圖層”控制面板中生成新的文字圖層。在“圖層”控制面板中將其“不透明度”選項設(shè)為50%，如圖所示，效果如圖所示。（16）選擇“文件>置入嵌入對象”命令，彈出“置入嵌入的對象”對話框。選擇云盤中的“Ch05>制作旅游類App>制作旅游類App引導(dǎo)頁1>素材>04”文件，單擊“置入”按鈕，將圖標(biāo)置入到圖像窗口中，拖曳到適當(dāng)?shù)奈恢貌⒄{(diào)整大小，按Enter鍵確定操作，在“圖層”控制面板中生成新的圖層并將其命名為“上一頁”。設(shè)置圖層的“不透明度”選項為50%，如圖所示。使用相同的方法置入“05”文件，拖曳到適當(dāng)?shù)奈恢貌⒄{(diào)整大小，按Enter鍵確定操作，在“圖層”控制面板中生成新的圖層并將其命名為“下一頁”，如圖所示，效果如圖所示。（17）按住Shift鍵的同時，單擊“說走就走，…的奢侈！”文字圖層，將需要的圖層同時選取。按Ctrl+G組合鍵，群組圖層并將其命名為“內(nèi)容區(qū)”，如圖所示。（18）選擇“文件>置入嵌入對象”命令，彈出“置入嵌入的對象”對話框。選擇云盤中的“Ch05>制作旅游類App>制作旅游類App引導(dǎo)頁1>素材>06”文件，單擊“置入”按鈕，將圖片置入到圖像窗口中，將其拖曳到適當(dāng)?shù)奈恢?，按Enter鍵確定操作，在“圖層”控制面板中生成新的圖層并將其命名為“HomeIndicator”，如圖所示，效果如圖所示。（19）按Ctrl+S組合鍵，彈出“另存為”對話框，將其命名為“制作旅游類App引導(dǎo)頁1”，保存為psd格式。單擊“保存”按鈕，彈出“Photoshop格式選項”對話框，單擊“確定”按鈕，將文件保存。2.制作美食到家App引導(dǎo)頁2（1）按Ctrl+N組合鍵，彈出“新建文檔”對話框，將寬度設(shè)為750像素，高度設(shè)為1624像素，分辨率設(shè)為72像素/英寸，背景內(nèi)容設(shè)為白色，如圖所示。單擊“創(chuàng)建”按鈕，完成文檔新建。（2）在“制作旅游類App引導(dǎo)頁1”圖像窗口中，選中“HomeIndicator”圖層，按住Shift鍵的同時，單擊“背景圖”圖層，將需要的圖層同時選取，如圖所示。單擊鼠標(biāo)右鍵，在彈出的菜單中選擇“復(fù)制圖層”命令，在彈出的對話框中進行設(shè)置，如圖所示，單擊“確定”按鈕，效果如圖所示。（3）在“圖層”控制面板中選中“背景圖”圖層，按Delete鍵將其刪除。選擇“文件>置入嵌入對象”命令，彈出“置入嵌入的對象”對話框。選擇云盤中的“Ch05>制作旅游類App>制作旅游類App引導(dǎo)頁2>素材>01”文件，單擊“置入”按鈕，將圖片置入到圖像窗口中，將其拖曳到適當(dāng)?shù)奈恢?，按Enter鍵確定操作，在“圖層”控制面板中生成新的圖層并將其命名為“背景圖”，如圖所示，效果如圖所示。展開“內(nèi)容區(qū)”圖層組，選中“說走就走，…的奢侈！”文字圖層，如圖所示。（4）選擇“橫排文字”工具，選取文字并修改文字，效果如圖所示。使用相同的方法修改其他文字，效果如圖所示。（5）在“圖層”控制面板中展開“頁面控件”圖層組，選中“形狀1”圖層，選擇“直線”工具，在屬性欄中將“H”選項設(shè)為1像素，并調(diào)整形狀位置，如圖所示。在“圖層”控制面板中將其“不透明度”選項設(shè)為50%，效果如圖所示。（6）選中“形狀2”圖層，在屬性欄中將“H”選項設(shè)為2像素，并調(diào)整形狀位置，如圖所示。在“圖層”控制面板中將其“不透明度”選項設(shè)為100%，效果如圖所示。選中“上一頁”圖層，在“圖層”控制面板中將其“不透明度”選項設(shè)為100%，效果如圖所示，并折疊“內(nèi)容區(qū)”圖層組。（7）按Ctrl+S組合鍵，彈出“另存為”對話框，將其命名為“制作旅游類App引導(dǎo)頁2”，保存為psd格式。單擊“保存”按鈕，彈出“Photoshop格式選項”對話框，單擊“確定”按鈕，將文件保存。3.制作美食到家App引導(dǎo)頁3（1）按Ctrl+N組合鍵，彈出“新建文檔”對話框，將寬度設(shè)為750像素，高度設(shè)為1624像素，分辨率設(shè)為72像素/英寸，背景內(nèi)容設(shè)為白色，如圖所示。單擊“創(chuàng)建”按鈕，完成文檔新建。（2）在“制作旅游類App引導(dǎo)頁2”圖像窗口中，選中“HomeIndicator”圖層，按住Shift鍵的同時，單擊“背景圖”圖層，將需要的圖層同時選取，如圖所示。單擊鼠標(biāo)右鍵，在彈出的菜單中選擇“復(fù)制圖層”命令，在彈出的對話框中進行設(shè)置，如圖所示，單擊“確定”按鈕，效果如圖所示。（3）在“圖層”控制面板中選中“背景圖”圖層，按Delete鍵將其刪除。選擇“文件>置入嵌入對象”命令，彈出“置入嵌入的對象”對話框。選擇云盤中的“Ch05>制作旅游類App>制作旅游類App引導(dǎo)頁3>素材>01”文件，單擊“置入”按鈕，將圖片置入到圖像窗口中，將其拖曳到適當(dāng)?shù)奈恢?，按Enter鍵確定操作，在“圖層”控制面板中生成新的圖層并將其命名為“背景圖”，如圖所示，效果如圖所示。展開“內(nèi)容區(qū)”圖層組，選中“一個背包…好了嗎！”文字圖層，如圖所示。（4）選擇“橫排文字”工具，選取文字并修改文字，效果如圖所示。使用相同的方法修改其他文字，效果如圖所示。（5）在“圖層”控制面板中展開“頁面控件”圖層組，選中“形狀2”圖層，選擇“直線”工具，在屬性欄中將“H”選項設(shè)為1像素，并調(diào)整形狀位置，如圖所示。在“圖層”控制面板中將其“不透明度”選項設(shè)為50%，效果如圖所示。（6）選中“形狀2拷貝”圖層，在屬性欄中將“H”選項設(shè)為2像素，并調(diào)整形狀位置，如圖所示。在“圖層”控制面板中將其“不透明度”選項設(shè)為100%，效果如圖所示。選中“下一頁”圖層，在“圖層”控制面板中將其“不透明度”選項設(shè)為50%，效果如圖所示，并折疊“內(nèi)容區(qū)”圖層組。（7）在“圖層”控制面板中選中“內(nèi)容區(qū)”圖層組。選擇“視圖>新建參考線”命令，彈出“新建參考線”對話框，設(shè)置如圖所示。單擊“確定”按鈕，完成參考線的創(chuàng)建，效果如圖所示。（8）選擇“圓角矩形”工具，在屬性欄的“選擇工具模式”選項中選擇“形狀”，將“填充”顏色設(shè)為橘黃色（255、151、1），“描邊”顏色設(shè)為無，“半徑”選項設(shè)置為24像素。在圖像窗口中適當(dāng)?shù)奈恢美L制圓角矩形，在“圖層”控制面板中生成新的形狀圖層“圓角矩形1”。選擇“窗口>屬性”命令，彈出“屬性”面板，設(shè)置如圖所示，按Enter鍵確定操作，效果如圖所示。（9）選擇“橫排文字”工具，在適當(dāng)?shù)奈恢幂斎胄枰奈淖植⑦x取文字，在“字符”面板中，將“顏色”設(shè)為白色，其他選項的設(shè)置如圖所示，按Enter鍵確定操作，如圖所示，在“圖層”控制面板中生成新的文字圖層。（10）在“圖層”控制面板中，按住Shift鍵的同時，單擊“圓角矩形1”圖層，將需要的圖層同時選取。按Ctrl+G組合鍵，群組圖層并將其命名為“開始”，如圖所示。（11）按Ctrl+S組合鍵，彈出“另存為”對話框，將其命名為“制作旅游類App引導(dǎo)頁3”，保存為psd格式。單擊“保存”按鈕，彈出“Photoshop格式選項”對話框，單擊“確定”按鈕，將文件保存。旅游類App引導(dǎo)頁制作完成。首頁作為UI設(shè)計中的常用頁面之一，具有流量分發(fā)、行為轉(zhuǎn)化的作用。下面分別從概念以及類型這兩個方面進行首頁的講解。5.3.1首頁的概念首頁又稱為“起始頁”，是用戶使用App的第一頁。首頁承擔(dān)著流量分發(fā)的作用，是展現(xiàn)產(chǎn)品氣質(zhì)的關(guān)鍵頁面，可以細分為列表型、網(wǎng)格型、卡片型、綜合型。5.3.2首頁的類型1.列表型列表型首頁是在頁面上將同級別的模塊進行分類展示，常用于表現(xiàn)數(shù)據(jù)展示、文字閱讀等方面。采用單一的設(shè)計形式，方便用戶瀏覽，如圖所示。QQ郵箱2.網(wǎng)格型網(wǎng)格型首頁是在頁面上將重要的功能以矩形模塊的形式進行展示，常用于工具類等方面。采用的統(tǒng)一矩形模塊的設(shè)計形式，刺激用戶點擊，如圖所示。墨刀3.卡片型卡片型首頁是在頁面上將圖片、文字、控件放置于同一張卡片中，再將卡片進行分類展示，常用于表現(xiàn)數(shù)據(jù)展示、文字閱讀、工具使用等方面。采用的統(tǒng)一的卡片設(shè)計形式，不僅讓用戶一目了然，更能加強產(chǎn)品內(nèi)容的點擊欲望，如圖所示。微信讀書App4.綜合型綜合型首頁是由搜索欄、Banner、金剛區(qū)、瓷片區(qū)以及標(biāo)簽欄等組成的頁面，運用范圍較廣，常用于電商類、教育類、旅游類等方面。采用豐富的設(shè)計形式，滿足用戶的需求，如圖所示。1號店App途牛旅游App5.3.3課堂案例-制作旅游類App首頁【案例設(shè)計要求】1.運用軟件Photoshop制作旅游類App首頁，效果如圖所示。2.頁面尺寸：750px（寬）×2086px（高）。3.設(shè)計一款綜合型首頁，并體現(xiàn)出行業(yè)風(fēng)格?！景咐龑W(xué)習(xí)目標(biāo)】學(xué)習(xí)使用軟件Photoshop制作旅游類App首頁。效果圖【案例知識要點】使用圓角矩形工具、矩形工具和橢圓工具繪制形狀，使用置入嵌入對象命令置入圖片和圖標(biāo)，使用創(chuàng)建剪貼蒙版命令調(diào)整圖片顯示區(qū)域，使用漸變疊加命令添加效果，使用屬性面板制作彌散投影，使用橫排文字工具輸入文字。1.制作Banner、狀態(tài)欄、導(dǎo)航欄和滑動軸（1）按Ctrl+N組合鍵，彈出“新建文檔”對話框，將寬度設(shè)為750像素，高度設(shè)為2086像素，分辨率設(shè)為72像素/英寸，背景內(nèi)容設(shè)為淺灰色（249、249、249），如圖所示。單擊“創(chuàng)建”按鈕，完成文檔新建。（2）選擇“視圖>新建參考線版面”命令，彈出“新建參考線版面”對話框，設(shè)置如圖所示。單擊“確定”按鈕，完成參考線的創(chuàng)建。（3）選擇“圓角矩形”工具，在屬性欄的“選擇工具模式”選項中選擇“形狀”，將“填充”顏色設(shè)為黑色，“描邊”顏色設(shè)為無，“半徑”選項設(shè)置為40像素。在圖像窗口中適當(dāng)?shù)奈恢美L制圓角矩形，如圖所示，在“圖層”控制面板中生成新的形狀圖層“圓角矩形1”。選擇“窗口>屬性”命令，彈出“屬性”面板，設(shè)置如圖所示，按Enter鍵確定操作，效果如圖所示。（4）選擇“文件>置入嵌入對象”命令，彈出“置入嵌入的對象”對話框。選擇云盤中的“Ch05>制作旅游類App>制作旅游類App首頁>素材>01”文件，單擊“置入”按鈕，將圖片置入到圖像窗口中并拖曳到適當(dāng)?shù)奈恢?，按Enter鍵確定操作，如圖所示，在“圖層”控制面板中生成新的圖層并將其命名為“底圖”。按Alt+Ctrl+G組合鍵，為圖層創(chuàng)建剪貼蒙版，效果如圖所示。（5）選擇“文件>置入嵌入對象”命令，彈出“置入嵌入的對象”對話框。選擇云盤中的“Ch05>制作旅游類App>制作旅游類App首頁>素材>02”文件，單擊“置入”按鈕，將圖片置入到圖像窗口中并拖曳到適當(dāng)?shù)奈恢茫碋nter鍵確定操作，如圖所示，在“圖層”控制面板中生成新的圖層并將其命名為“樹”。（6）單擊“圖層”控制面板下方的“添加圖層樣式”按鈕，在彈出的菜單中選擇“描邊”命令，彈出對話框，設(shè)置描邊顏色為白色，其他選項的設(shè)置如圖所示，單擊“確定”按鈕。按Alt+Ctrl+G組合鍵，為圖層創(chuàng)建剪貼蒙版，效果如圖所示。（7）使用相同的方法，置入云盤中的“Ch05>制作旅游類App>制作旅游類App首頁>素材>03”文件，將其拖曳到適當(dāng)?shù)奈恢貌⑻砑用柽呅Ч?，效果如圖所示，在“圖層”控制面板中生成新的圖層并將其命名為“熱氣球”。（8）選擇“橫排文字”工具，在適當(dāng)?shù)奈恢幂斎胄枰奈淖植⑦x取文字，選擇“窗口>字符”命令，彈出面板，將“顏色”設(shè)為白色，其他選項的設(shè)置如圖所示，按Enter鍵確定操作，在“圖層”控制面板中生成新的文字圖層。選中文字“6”，在“字符”面板中進行設(shè)置，如圖所示，效果如圖所示。（9）按Ctrl+J組合鍵，復(fù)制文字圖層，在“圖層”控制面板中生成新的文字圖層“景點6折起拷貝”。選擇“橫排文字”工具，刪除不需要的文字，并調(diào)整文字位置，如圖所示。在“圖層”控制面板中，將圖層的“填充”選項設(shè)為0%，如圖所示。為該圖層添加描邊樣式，如圖所示，效果如圖所示。（10）選擇“圓角矩形”工具，在屬性欄中將“填充”顏色設(shè)為白色，“描邊”顏色設(shè)為無，“半徑”選項設(shè)置為4像素。在圖像窗口中適當(dāng)?shù)奈恢美L制圓角矩形，在“圖層”控制面板中生成新的形狀圖層“圓角矩形2”。在“屬性”面板中進行設(shè)置，如圖所示，按Enter鍵確定操作，效果如圖所示。（11）單擊“圖層”控制面板下方的“添加圖層樣式”按鈕，在彈出的菜單中選擇“漸變疊加”命令，彈出對話框，單擊“漸變”選項右側(cè)的“點按可編輯漸變”按鈕，彈出“漸變編輯器”對話框，在“位置”選項中分別輸入0、100兩個位置點，分別設(shè)置兩個位置點顏色的RGB值為0（255、137、51）、100（250、175、137），如圖所示，單擊“確定”按鈕。返回到“漸變疊加”對話框，其他選項的設(shè)置如圖所示。切換到“描邊”選項卡中，設(shè)置“描邊”顏色為淡黃色（255、248、234），其他選項的設(shè)置如圖所示，單擊“確定”按鈕，效果如圖所示。（12）選擇“橫排文字”工具，在適當(dāng)?shù)奈恢幂斎胄枰奈淖植⑦x取文字，在“字符”面板中，將“顏色”設(shè)為白色，其他選項的設(shè)置如圖所示，按Enter鍵確定操作，在“圖層”控制面板中生成新的文字圖層。選中文字“299”，在“字符”面板中進行設(shè)置，如圖所示，效果如圖所示。（13）選擇“鋼筆”工具，在屬性欄中將“填充”顏色設(shè)為無，“描邊”顏色設(shè)為白色，“粗細”選項設(shè)為1像素，在適當(dāng)?shù)奈恢美L制一條不規(guī)則曲線，在“圖層”控制面板中生成新的形狀圖層“形狀1”，如圖所示。使用相同的方法繪制多條曲線，效果如圖所示。（14）按住Shift鍵的同時，單擊“形狀1”圖層，將需要的圖層組同時選取。按Ctrl+G組合鍵，群組圖層組并將其命名為“裝飾”，如圖所示。按住Shift鍵的同時，單擊“圓角矩形1”圖層，將需要的圖層組同時選取。按Ctrl+G組合鍵，群組圖層組并將其命名為“Banner”，如圖所示。（15）選擇“文件>置入嵌入對象”命令，彈出“置入嵌入的對象”對話框。選擇云盤中的“Ch05>制作旅游類App>制作旅游類App首頁>素材>04”文件，單擊“置入”按鈕，將圖片置入到圖像窗口中并拖曳到適當(dāng)?shù)奈恢?，按Enter鍵確定操作，如圖所示，在“圖層”控制面板中生成新的圖層并將其命名為“狀態(tài)欄”。按Ctrl＋G組合鍵，群組圖層并將其命名為“狀態(tài)欄”，如圖所示。（16）選擇“視圖>新建參考線”命令，彈出“新建參考線”對話框，設(shè)置如圖所示。單擊“確定”按鈕，完成參考線的創(chuàng)建，效果如圖所示。（17）按Ctrl＋O組合鍵，打開云盤中的“Ch04>制作旅游類App導(dǎo)航欄>效果>制作旅游類App導(dǎo)航欄.psd”文件，在“圖層”控制面板中，選中“導(dǎo)航欄”圖層組。選擇“移動”工具，將選取的圖層組拖曳到新建的圖像窗口中適當(dāng)?shù)奈恢?，如圖所示，效果如圖所示。（18）選擇“圓角矩形”工具，在屬性欄中將“填充”顏色設(shè)為白色，“描邊”顏色設(shè)為無，“半徑”選項設(shè)置為6像素。在圖像窗口中適當(dāng)?shù)奈恢美L制圓角矩形，在“圖層”控制面板中生成新的形狀圖層“圓角矩形3”。在“屬性”面板中進行設(shè)置，如圖所示，按Enter鍵確定操作，效果如圖所示。（19）選擇“橢圓”工具，按住Shift鍵的同時，在圖像窗口中適當(dāng)?shù)奈恢美L制圓形，在“圖層”控制面板中生成新的形狀圖層“橢圓1”。在“屬性”面板中進行設(shè)置，如圖所示，按Enter鍵確定操作，效果如圖所示。在“圖層”控制面板中將“橢圓1”圖層的“不透明度”選項設(shè)為60%，效果如圖所示。（20）選擇“路徑選擇”工具，按住Alt+Shift組合鍵的同時，選中圓形，在圖像窗口中將其水平向右拖曳，復(fù)制形狀。在“屬性”面板中進行設(shè)置，如圖所示，效果如圖所示。使用相同的方法再次復(fù)制三個圓形，效果如圖所示。（21）按住Shift鍵的同時，單擊“圓角矩形3”圖層，將需要的圖層同時選取。按Ctrl+G組合鍵，群組圖層并將其命名為“滑動軸”，如圖所示。2.制作金剛區(qū)、瓷片區(qū)、分段控件和熱搜（1）選擇“視圖>新建參考線”命令，彈出“新建參考線”對話框，設(shè)置如圖所示，效果如圖所示。圖5-圖5-（2）選擇“視圖>新建參考線”命令，彈出“新建參考線”對話框，設(shè)置如圖所示，在距離上方參考線96像素的位置新建一條水平參考線。使用相同的方法再次新建一條參考線，如圖所示，在距離上方參考線24像素的位置新建一條水平參考線。分別單擊“確定”按鈕，完成參考線的創(chuàng)建，效果如圖所示。（3）按Ctrl＋O組合鍵，打開云盤中的“Ch04>制作旅游類App金剛區(qū)>效果>制作旅游類App金剛區(qū).psd”文件，在“圖層”控制面板中，選中“金剛區(qū)”圖層組。選擇“移動”工具，將選取的圖層組拖曳到新建的圖像窗口中適當(dāng)?shù)奈恢?，如圖所示，效果如圖所示。（4）選擇“視圖>新建參考線”命令，彈出“新建參考線”對話框，設(shè)置如圖所示，在距離上方參考線24像素的位置新建一條水平參考線。使用相同的方法再次新建一條參考線，如圖所示，在距離上方參考線360像素的位置新建一條水平參考線。分別單擊“確定”按鈕，完成參考線的創(chuàng)建，效果如圖所示。（5）選擇“視圖>新建參考線”命令，彈出“新建參考線”對話框，設(shè)置如圖所示。使用相同的方法再次新建一條參考線，設(shè)置如圖所示。分別單擊“確定”按鈕，完成參考線的創(chuàng)建，效果如圖所示。（6）按Ctrl＋O組合鍵，打開云盤中的“Ch04>制作旅游類App瓷片區(qū)>效果>制作旅游類App瓷片區(qū).psd”文件，在“圖層”控制面板中，選中“瓷片區(qū)”圖層組。選擇“移動”工具，將選取的圖層組拖曳到新建的圖像窗口中適當(dāng)?shù)奈恢?，如圖所示，效果如圖所示。（7）選擇“視圖>新建參考線”命令，彈出“新建參考線”對話框，設(shè)置如圖所示，在距離上方參考線24像素的位置新建一條水平參考線。使用相同的方法再次新建一條參考線，如圖所示，在距離上方參考線72像素的位置新建一條水平參考線。分別單擊“確定”按鈕，完成參考線的創(chuàng)建，效果如圖所示。（8）按Ctrl＋O組合鍵，打開云盤中的“Ch03>制作旅游類App分段控件.psd”文件，在“圖層”控制面板中，選中“分段控件”圖層組。選擇“移動”工具，將選取的圖層組拖曳到新建的圖像窗口中適當(dāng)?shù)奈恢?，如圖所示，效果如圖所示。（9）選擇“視圖>新建參考線”命令，彈出“新建參考線”對話框，設(shè)置如圖所示，在距離上方參考線16像素的位置新建一條水平參考線。使用相同的方法再次新建一條參考線，如圖所示，在距離上方參考線44像素的位置新建一條水平參考線。分別單擊“確定”按鈕，完成參考線的創(chuàng)建，效果如圖所示。（10）選擇“圓角矩形”工具，在屬性欄中將“填充”顏色設(shè)為淺灰色（240、242、245），“描邊”顏色設(shè)為無，“半徑”選項設(shè)置為22像素。在圖像窗口中適當(dāng)?shù)奈恢美L制圓角矩形，在“圖層”控制面板中生成新的形狀圖層“圓角矩形5”。在“屬性”面板中進行設(shè)置，如圖所示，按Enter鍵確定操作，效果如圖所示。（11）選擇“文件>置入嵌入對象”命令，彈出“置入嵌入的對象”對話框。選擇云盤中的“Ch05>制作旅游類App>制作旅游類App首頁>素材>05”文件，單擊“置入”按鈕，將圖標(biāo)置入到圖像窗口中，將其拖曳到適當(dāng)?shù)奈恢貌⒄{(diào)整大小，按Enter鍵確定操作，如圖所示，在“圖層”控制面板中生成新的圖層并將其命名為“熱門”。（12）選擇“橫排文字”工具，在適當(dāng)?shù)奈恢幂斎胄枰奈淖植⑦x取文字，在“字符”面板中，將“顏色”設(shè)為深灰色（125、131、140），其他選項的設(shè)置如圖所示，按Enter鍵確定操作，效果如圖所示，在“圖層”控制面板中生成新的文字圖層。（13）按住Shift鍵的同時，單擊“圓角矩形5”圖層，將需要的圖層同時選取。按Ctrl+G組合鍵，群組圖層并將其命名為“火星營地”，如圖所示。使用相同的方法分別繪制形狀并輸入文字，如圖所示，效果如圖所示。（14）按住Shift鍵的同時，單擊“火星營地”圖層組，將需要的圖層組同時選取。按Ctrl+G組合鍵，群組圖層組并將其命名為“熱搜”，如圖所示。圖5-3.制作瀑布流和標(biāo)簽欄（1）選擇“視圖>新建參考線”命令，彈出“新建參考線”對話框，設(shè)置如圖所示，在距離上方參考線24像素的位置新建一條水平參考線，單擊“確定”按鈕，完成參考線的創(chuàng)建，效果如圖所示。（2）選擇“圓角矩形”工具，在屬性欄中將“填充”顏色設(shè)為灰色（199、207、220），“描邊”顏色設(shè)為無，“半徑”選項設(shè)置為10像素。在圖像窗口中適當(dāng)?shù)奈恢美L制圓角矩形，在“圖層”控制面板中生成新的形狀圖層“圓角矩形6”。在“屬性”面板中進行設(shè)置，如圖所示，按Enter鍵確定操作，效果如圖所示。（3）選擇“文件>置入嵌入對象”命令，彈出“置入嵌入的對象”對話框。選擇云盤中的“Ch05>制作旅游類App>制作旅游類App首頁>素材>06”文件，單擊“置入”按鈕，將圖片置入到圖像窗口中并拖曳到適當(dāng)?shù)奈恢茫碋nter鍵確定操作，在“圖層”控制面板中生成新的圖層并將其命名為“圖片1”。按Alt+Ctrl+G組合鍵，為圖層創(chuàng)建剪貼蒙版，效果如圖所示。（4）選擇“圓角矩形”工具，在屬性欄中將“填充”顏色設(shè)為灰色（199、207、220），“描邊”顏色設(shè)為無，“半徑”選項設(shè)置為10像素。在圖像窗口中適當(dāng)?shù)奈恢美L制圓角矩形，在“圖層”控制面板中生成新的形狀圖層“圓角矩形7”。在“屬性”面板中進行設(shè)置，如圖所示，按Enter鍵確定操作，效果如圖所示。（5）單擊“圖層”控制面板下方的“添加圖層樣式”按鈕，在彈出的菜單中選擇“漸變疊加”命令，彈出對話框，單擊“漸變”選項右側(cè)的“點按可編輯漸變”按鈕，彈出“漸變編輯器”對話框，在“位置”選項中分別輸入0、100兩個位置點，分別設(shè)置兩個位置點顏色的RGB值為0（251、99、75）、100（251、129、66），如圖所示，單擊“確定”按鈕。返回到“漸變疊加”對話框，其他選項的設(shè)置如圖所示，單擊“確定”按鈕，效果如圖所示。按Alt+Ctrl+G組合鍵，為圖層創(chuàng)建剪貼蒙版，效果如圖所示。（6）選擇“橫排文字”工具，在適當(dāng)?shù)奈恢幂斎胄枰奈淖植⑦x取文字，在“字符”面板中將“顏色”設(shè)為白色，其他選項的設(shè)置如圖所示，按Enter鍵確定操作，效果如圖所示，在“圖層”控制面板中生成新的文字圖層。選中文字“榜首”，在“字符”面板中進行設(shè)置，如圖所示，效果如圖所示。（7）選擇“圓角矩形”工具，在屬性欄中將“填充”顏色設(shè)為白色，“描邊”顏色設(shè)為無，“半徑”選項設(shè)置為10像素。在圖像窗口中適當(dāng)?shù)奈恢美L制圓角矩形，在“圖層”控制面板中生成新的形狀圖層“圓角矩形8”。在“屬性”面板中進行設(shè)置，如圖所示，按Enter鍵確定操作，效果如圖所示。（8）單擊“圖層”控制面板下方的“添加圖層樣式”按鈕，在彈出的菜單中選擇“漸變疊加”命令，彈出對話框，單擊“漸變”選項右側(cè)的“點按可編輯漸變”按鈕，彈出“漸變編輯器”對話框，在“位置”選項中分別輸入0、100兩個位置點，分別設(shè)置兩個位置點顏色的RGB值為0（239、103、75）、100（251、129、66）。設(shè)置兩個位置點的不透明度值為0（70%）、70（0%），如圖所示，單擊“確定”按鈕。返回到“漸變疊加”對話框，其他選項的設(shè)置如圖所示，單擊“確定”按鈕，效果如圖所示。（9）在“圖層”控制面板中，將該圖層的“填充”選項設(shè)為4%，如圖所示，效果如圖所示。選擇“文件>置入嵌入對象”命令，彈出“置入嵌入的對象”對話框。選擇云盤中的“Ch05>制作旅游類App>制作旅游類App首頁>素材>07”文件，單擊“置入”按鈕，將圖標(biāo)置入到圖像窗口中，將其拖曳到適當(dāng)?shù)奈恢貌⒄{(diào)整大小，按Enter鍵確定操作，如圖所示，在“圖層”控制面板中生成新的圖層并將其命名為“位置”。（10）選擇“橫排文字”工具，在適當(dāng)?shù)奈恢幂斎胄枰奈淖植⑦x取文字，在“字符”面板中將“顏色”設(shè)為白色，其他選項的設(shè)置如圖所示，按Enter鍵確定操作，效果如圖所示，在“圖層”控制面板中生成新的文字圖層。（11）選擇“圓角矩形”工具，在屬性欄中將“填充”顏色設(shè)為白色，“描邊”顏色設(shè)為無，“半徑”選項設(shè)置為10像素。在圖像窗口中適當(dāng)?shù)奈恢美L制圓角矩形，在“圖層”控制面板中生成新的形狀圖層“圓角矩形9”。在“屬性”面板中進行設(shè)置，如圖所示，按Enter鍵確定操作，效果如圖所示。（12）在“圖層”控制面板中，將該圖層的“不透明度”選項設(shè)為80%，如圖所示，效果如圖所示。選擇“橫排文字”工具，在適當(dāng)?shù)奈恢幂斎胄枰奈淖植⑦x取文字，在“字符”面板中將“顏色”設(shè)為深灰色（52、52、52），其他選項的設(shè)置如圖所示，按Enter鍵確定操作，效果如圖所示，在“圖層”控制面板中生成新的文字圖層。（13）選擇“橢圓”工具，在屬性欄中將“填充”顏色設(shè)為黑色，按住Shift鍵的同時，在圖像窗口中適當(dāng)?shù)奈恢美L制圓形，在“圖層”控制面板中生成新的形狀圖層“橢圓3”。在“屬性”面板中進行設(shè)置，如圖所示，按Enter鍵確定操作，效果如圖所示。（14）選擇“文件>置入嵌入對象”命令，彈出“置入嵌入的對象”對話框。選擇云盤中的“Ch05>制作旅游類App>制作旅游類App首頁>素材>08”文件，單擊“置入”按鈕，將圖片置入到圖像窗口中并拖曳到適當(dāng)?shù)奈恢貌⒄{(diào)整大小，按Enter鍵確定操作，在“圖層”控制面板中生成新的圖層并將其命名為“頭像”。按Alt+Ctrl+G組合鍵，為圖層創(chuàng)建剪貼蒙版，效果如圖所示。（15）選擇“橫排文字”工具，在適當(dāng)?shù)奈恢梅謩e輸入需要的文字并選取文字，在“字符”面板中將“顏色”設(shè)為灰色（80、80、80），其他選項的設(shè)置如圖所示，按Enter鍵確定操作，效果如圖所示，在“圖層”控制面板中分別生成新的文字圖層。（16）選擇“文件>置入嵌入對象”命令，彈出“置入嵌入的對象”對話框。選擇云盤中的“Ch05>制作旅游類App>制作旅游類App首頁>素材>09”文件，單擊“置入”按鈕，將圖標(biāo)置入到圖像窗口中，將其拖曳到適當(dāng)?shù)奈恢貌⒄{(diào)整大小，按Enter鍵確定操作，如圖所示，在“圖層”控制面板中生成新的圖層并將其命名為“返回”。（17）選擇“圓角矩形”工具，在屬性欄中將“填充”顏色設(shè)為深綠色（185、202、206），“描邊”顏色設(shè)為無，“半徑”選項設(shè)置為10像素。在圖像窗口中適當(dāng)?shù)奈恢美L制圓角矩形，在“圖層”控制面板中生成新的形狀圖層“圓角矩形10”。在“屬性”面板中進行設(shè)置，如圖所示，按Enter鍵確定操作。單擊“蒙版”按鈕，設(shè)置如圖所示，按Enter鍵確定操作，效果如圖所示。（18）在“圖層”控制面板中將“圓角矩形10”圖層的“不透明度”選項設(shè)為60%，并將其拖曳到“圓角矩形6”圖層的下方，如圖所示，效果如圖所示。按住Shift鍵的同時，單擊“返回”圖層，將需要的圖層同時選取。按Ctrl+G組合鍵，群組圖層并將其命名為“今日榜首”，如圖所示。（19）使用相同的方法分別繪制形狀、置入圖片并輸入文字，如圖所示，效果如圖所示。按住Shift鍵的同時，單擊“今日榜首”圖層組，將需要的圖層組同時選取。按Ctrl+G組合鍵，群組圖層組并將其命名為“瀑布流”，如圖所示。（20）選擇“矩形”工具，在屬性欄中將“填充”顏色設(shè)為白色，“描邊”顏色設(shè)為無。在圖像窗口中適當(dāng)?shù)奈恢美L制矩形，在“圖層”控制面板中生成新的形狀圖層“矩形3”。在“屬性”面板中進行設(shè)置，如圖所示，按Enter鍵確定操作，效果如圖所示。（21）按Ctrl＋O組合鍵，打開云盤中的“Ch04>制作旅游類App標(biāo)簽欄>效果>制作旅游類App標(biāo)簽欄.psd”文件，在“圖層”控制面板中，選中“標(biāo)簽欄”圖層組。選擇“移動”工具，將選取的圖層組拖曳到新建的圖像窗口中適當(dāng)?shù)奈恢?，如圖所示，效果如圖所示。（22）選擇“矩形”工具，在屬性欄中將“填充”顏色設(shè)為深藍色（42、42、68），“描邊”顏色設(shè)為無。在圖像窗口中適當(dāng)?shù)奈恢美L制矩形，在“圖層”控制面板中生成新的形狀圖層“矩形4”。在“屬性”面板中進行設(shè)置，如圖所示，按Enter鍵確定操作。單擊“蒙版”按鈕，設(shè)置如圖所示，按Enter鍵確定操作，效果如圖所示。（23）在“圖層”控制面板中將“矩形4”圖層的“不透明度”選項設(shè)為30%，并將其拖曳到“矩形3”圖層的下方，如圖所示，效果如圖所示。（24）展開“標(biāo)簽欄”圖層組，選中“矩形4”圖層，按住Shift鍵的同時，單擊“矩形3”圖層，將需要的圖層同時選取，將其拖曳到“首頁”圖層的下方，如圖所示。折疊“標(biāo)簽欄”圖層組，如圖所示。（25）選擇“文件>置入嵌入對象”命令，彈出“置入嵌入的對象”對話框。選擇云盤中的“Ch05>制作旅游類App>制作旅游類App首頁>素材>13”文件，單擊“置入”按鈕，將圖片置入到圖像窗口中并拖曳到適當(dāng)?shù)奈恢?，按Enter鍵確定操作，效果如圖所示，在“圖層”控制面板中生成新的圖層并將其命名為“HomeIndicator”，如圖所示。旅游類App首頁制作完成。個人中心頁作為UI設(shè)計中的常用頁面之一，具有功能集合、信息集合的作用。下面主要從概念對個人中心頁進行講解。5.4.1個人中心頁的概念個人中心頁是展示個人信息的頁面，主要由頭像和信息內(nèi)容組成。個人中心頁有時也會以抽屜打開的形式出現(xiàn)，如圖所示。淘寶閑魚36Kr5.4.2課堂案例——制作旅游類App個人中心頁【案例設(shè)計要求】1.運用軟件Photoshop制作旅游類App個人中心頁，效果如圖所示。2.頁面尺寸：750px（寬）×1624px（高）。3.體現(xiàn)出行業(yè)風(fēng)格。【案例學(xué)習(xí)目標(biāo)】學(xué)習(xí)使用軟件Photoshop制作旅游類App個人中心頁。效果圖【案例知識要點】使用圓角矩形工具、矩形工具橢圓工具和直線工具繪制形狀，使用置入嵌入對象命令置入圖片和圖標(biāo)，使用創(chuàng)建剪貼蒙版命令調(diào)整圖片顯示區(qū)域，使用漸變疊加命令添加效果，使用屬性面板制作彌散投影，使用橫排文字工具輸入文字。（1）按Ctrl+N組合鍵，彈出“新建文檔”對話框，將寬度設(shè)為750像素，高度設(shè)為1624像素，分辨率設(shè)為72像素/英寸，背景內(nèi)容設(shè)為淺灰色（249、249、249），如圖所示。單擊“創(chuàng)建”按鈕，完成文檔新建。（2）選擇“視圖>新建參考線版面”命令，彈出“新建參考線版面”對話框，設(shè)置如圖所示。單擊“確定”按鈕，完成參考線的創(chuàng)建。（3）選擇“矩形”工具，在屬性欄的“選擇工具模式”選項中選擇“形狀”，將“填充”顏色設(shè)為黑色，“描邊”顏色設(shè)為無。在圖像窗口中適當(dāng)?shù)奈恢美L制矩形，在“圖層”控制面板中生成新的形狀圖層“矩形1”。在“屬性”面板中進行設(shè)置，如圖所示，按Enter鍵確定操作，效果如圖所示。（4）選擇“文件>置入嵌入對象”命令，彈出“置入嵌入的對象”對話框。選擇云盤中的“Ch05>制作旅游類App>制作旅游類App個人中心頁>素材>01”文件，單擊“置入”按鈕，將圖片置入到圖像窗口中，將其拖曳到適當(dāng)?shù)奈恢茫碋nter鍵確定操作，在“圖層”控制面板中生成新的圖層并將其命名為“底圖”。按Alt+Ctrl+G組合鍵，為圖層創(chuàng)建剪貼蒙版，效果如圖所示。（5）選擇“文件>置入嵌入對象”命令，彈出“置入嵌入的對象”對話框。選擇云盤中的“Ch05>制作旅游類App>制作旅游類App個人中心頁>素材>02”文件，單擊“置入”按鈕，將圖片置入到圖像窗口中，將其拖曳到適當(dāng)?shù)奈恢?，按Enter鍵確定操作，效果如圖所示，在“圖層”控制面板中生成新的圖層并將其命名為“狀態(tài)欄”。（6）單擊“圖層”控制面板下方的“添加圖層樣式”按鈕，在彈出的菜單中選擇“顏色疊加”命令，彈出對話框，設(shè)置“疊加”顏色為白色，單擊“確定”按鈕。返回到“顏色疊加”對話框，其他選項的設(shè)置如圖所示，單擊“確定”按鈕，效果如圖所示。（7）選擇“視圖>新建參考線”命令，彈出“新建參考線”對話框，設(shè)置如圖所示，效果如圖所示。（8）選擇“文件>置入嵌入對象”命令，彈出“置入嵌入的對象”對話框。選擇云盤中的“Ch05>制作旅游類App>制作旅游類App個人中心頁>素材>03”文件，單擊“置入”按鈕，將圖標(biāo)置入到圖像窗口中，將其拖曳到適當(dāng)?shù)奈恢貌⒄{(diào)整大小，按Enter鍵確定操作，如圖所示，在“圖層”控制面板中生成新的圖層并將其命名為“返回”。（9）使用相同的方法，分別置入“04”和“05”文件，將其拖曳到適當(dāng)?shù)奈恢貌⒄{(diào)整大小，按Enter鍵確定操作，效果如圖所示，在“圖層”控制面板中分別生成新的圖層并將其命名為“評價”和“更多”，如圖所示。（10）按Ctrl＋O組合鍵，打開云盤中的“Ch03>制作旅游類App反饋控件.psd”文件，在“圖層”控制面板中，選中“反饋控件”圖層組。選擇“移動”工具，將選取的圖層組拖曳到新建的圖像窗口中適當(dāng)?shù)奈恢?，如圖所示，效果如圖所示。按住Shift鍵的同時，單擊“返回”圖層，將需要的圖層同時選取，按Ctrl+G組合鍵，群組圖層并將其命名為“導(dǎo)航欄”，如圖所示。（11）選擇“橫排文字”工具，在適當(dāng)?shù)奈恢幂斎胄枰奈淖植⑦x取文字，選擇“窗口>字符”命令，彈出面板，將“顏色”設(shè)為白色，其他選項的設(shè)置如圖所示，按Enter鍵確定操作，效果如圖所示，在“圖層”控制面板中生成新的文字圖層。（12）選擇“圓角矩形”工具，在屬性欄中將“填充”顏色設(shè)為白色，“描邊”顏色設(shè)為無，“半徑”選項設(shè)置為16像素。在圖像窗口中適當(dāng)?shù)奈恢美L制圓角矩形，在“圖層”控制面板中生成新的形狀圖層“圓角矩形1”。在“屬性”面板中進行設(shè)置，如圖所示，按Enter鍵確定操作，效果如圖所示。（13）單擊“圖層”控制面板下方的“添加圖層樣式”按鈕，在彈出的菜單中選擇“漸變疊加”命令，彈出對話框，單擊“漸變”選項右側(cè)的“點按可編輯漸變”按鈕，彈出“漸變編輯器”對話框，在“位置”選項中分別輸入0、100兩個位置點，分別設(shè)置兩個位置點顏色的RGB值為0（255、151、1）、100（236、101、25）。設(shè)置兩個位置點的不透明度值為0（100%）、100（30%），如圖所示，單擊“確定”按鈕。返回到“漸變疊加”對話框，其他選項的設(shè)置如圖所示，單擊“確定”按鈕，效果如圖所示。（14）在“圖層”控制面板中，將該圖層的“填充”選項設(shè)為0%，如圖所示，效果如圖所示。（15）選擇“橫排文字”工具，在適當(dāng)?shù)奈恢幂斎胄枰奈淖植⑦x取文字，在“字符”面板中，將“顏色”設(shè)為白色，其他選項的設(shè)置如圖所示，按Enter鍵確定操作，效果如圖所示，在“圖層”控制面板中生成新的文字圖層。（16）選擇“文件>置入嵌入對象”命令，彈出“置入嵌入的對象”對話框。選擇云盤中的“Ch05>制作旅游類App>制作旅游類App個人中心頁>素材>06”文件，單擊“置入”按鈕，將圖標(biāo)置入到圖像窗口中，將其拖曳到適當(dāng)?shù)奈恢貌⒄{(diào)整大小，按Enter鍵確定操作，如圖所示，在“圖層”控制面板中生成新的圖層并將其命名為“探索”。（17）按住Shift鍵的同時，單擊“探索我的旅程”圖層，將需要的圖層同時選取，按Ctrl+G組合鍵，群組圖層并將其命名為“去探索”，如圖所示。（18）選擇“視圖>新建參考線”命令，彈出“新建參考線”對話框，設(shè)置如圖所示，效果如圖所示。（19）選擇“視圖>新建參考線”命令，彈出“新建參考線”對話框，設(shè)置如圖所示，在距離上方參考線24像素的位置新建一條水平參考線。使用相同的方法再次新建一條參考線，如圖所示，在距離上方參考線244像素的位置新建一條水平參考線。分別單擊“確定”按鈕，完成參考線的創(chuàng)建，效果如圖所示。（20）選擇“圓角矩形”工具，在屬性欄中將“填充”顏色設(shè)為白色，“描邊”顏色設(shè)為無，“半徑”選項設(shè)置為10像素。在圖像窗口中適當(dāng)?shù)奈恢美L制圓角矩形，在“圖層”控制面板中生成新的形狀圖層“圓角矩形2”。在“屬性”面板中進行設(shè)置，如圖所示，按Enter鍵確定操作，效果如圖所示。（21）選擇“橢圓”工具，按住Shift鍵的同時，在圖像窗口中適當(dāng)?shù)奈恢美L制圓形，在“圖層”控制面板中生成新的形狀圖層“橢圓1”。在“屬性”面板中進行設(shè)置，如圖所示，按Enter鍵確定操作，效果如圖所示。（22）按Ctrl+J組合鍵，復(fù)制“橢圓1”圖層，在“圖層”控制面板中生成新的形狀圖層“橢圓1拷貝”。按Ctrl+T組合鍵，在圖形周圍出現(xiàn)變換框，按住Alt+Shift組合鍵的同時，拖曳右上角的控制手柄等比例縮小圖形，按Enter鍵確定操作。在“屬性”面板中進行設(shè)置，如圖所示，按Enter鍵確定操作，效果如圖所示。（23）選擇“文件>置入嵌入對象”命令，彈出“置入嵌入的對象”對話框。選擇云盤中的“Ch05>制作旅游類App>制作旅游類App個人中心頁>素材>07”文件，單擊“置入”按鈕，將圖片置入到圖像窗口中，將其拖曳到適當(dāng)?shù)奈恢?，按Enter鍵確定操作，效果如圖所示，在“圖層”控制面板中生成新的圖層并將其命名為“頭像”。按Alt+Ctrl+G組合鍵，為圖層創(chuàng)建剪貼蒙版，效果如圖所示。（24）選擇“橢圓”工具，在屬性欄中將“填充”顏色設(shè)為深藍色（180、203、213），“描邊”顏色設(shè)為無。按住Shift鍵的同時，在圖像窗口中適當(dāng)?shù)奈恢美L制圓形，在“圖層”控制面板中生成新的形狀圖層“橢圓2”。在“屬性”面板中進行設(shè)置，如圖所示，按Enter鍵確定操作。單擊“蒙版”按鈕，設(shè)置如圖所示，按Enter鍵確定操作，效果如圖所示。（25）在“圖層”控制面板中將“橢圓2”圖層的“不透明度”選項設(shè)為70%，并將其拖曳到“橢圓1”圖層的下方，如圖所示，效果如圖所示。按住Shift鍵的同時，單擊“頭像”圖層，將需要的圖層同時選取，按Ctrl+G組合鍵，群組圖層并將其命名為“頭像”，如圖所示。（26）選擇“橫排文字”工具，在適當(dāng)?shù)奈恢幂斎胄枰奈淖植⑦x取文字，在“字符”面板中，將“顏色”設(shè)為深灰色（51、51、51），其他選項的設(shè)置如圖所示，按Enter鍵確定操作，效果如圖所示，在“圖層”控制面板中生成新的文字圖層。（27）選擇“圓角矩形”工具，在屬性欄中將“填充”顏色設(shè)為淺灰色（235、235、235），“描邊”顏色設(shè)為無，“半徑”選項設(shè)為4像素。在圖像窗口中適當(dāng)?shù)奈恢美L制圓角矩形，在“圖層”控制面板中生成新的形狀圖層“圓角矩形3”。在“屬性”面板中進行設(shè)置，如圖所示，按Enter鍵確定操作，效果如圖所示。（28）選擇“文件>置入嵌入對象”命令，彈出“置入嵌入的對象”對話框。選擇云盤中的“Ch05>制作旅游類App>制作旅游類App個人中心頁>素材>08”文件，單擊“置入”按鈕，將圖標(biāo)置入到圖像窗口中，將其拖曳到適當(dāng)?shù)奈恢貌⒄{(diào)整大小，按Enter鍵確定操作，如圖所示，在“圖層”控制面板中生成新的圖層并將其命名為“等級”。（29）選擇“圓角矩形”工具，在圖像窗口中適當(dāng)?shù)奈恢美L制圓角矩形，在“圖層”控制面板中生成新的形狀圖層“圓角矩形4”。在“屬性”面板中進行設(shè)置，如圖所示，按Enter鍵確定操作，效果如圖所示。（30）選擇“橫排文字”工具，在適當(dāng)?shù)奈恢幂斎胄枰奈淖植⑦x取文字，在“字符”面板中，將“顏色”設(shè)為深灰色（51、51、51），其他選項的設(shè)置如圖所示，按Enter鍵確定操作，效果如圖所示，在“圖層”控制面板中生成新的文字圖層。（31）使用相同的方法再次繪制形狀、置入圖標(biāo)并輸入需要的文字，如圖所示，效果如圖所示。按住Shift鍵的同時，單擊“圓角矩形3”圖層，將需要的圖層同時選取，按Ctrl+G組合鍵，群組圖層并將其命名為“Vip”，如圖所示。（32）選擇“橫排文字”工具，在適當(dāng)?shù)奈恢幂斎胄枰奈淖植⑦x取文字，在“字符”面板中，將“顏色”設(shè)為深灰色（51、51、51），其他選項的設(shè)置如圖所示，按Enter鍵確定操作。再次輸入文字，在“字符”面板中，將“顏色”設(shè)為灰色（153、153、153），其他選項的設(shè)置如圖所示，按Enter鍵確定操作，效果如圖所示。在“圖層”控制面板中分別生成新的文字圖層。（33）使用相同的方法，再次分別輸入文字，在“圖層”控制面板中分別生成新的文字圖層，如圖所示，效果如圖所示。（34）選擇“圓角矩形”工具，在屬性欄中將“填充”顏色設(shè)為橘黃色（255、151、1），“描邊”顏色設(shè)為無，“半徑”選項設(shè)為32像素。在圖像窗口中適當(dāng)?shù)奈恢美L制圓角矩形，在“圖層”控制面板中生成新的形狀圖層“圓角矩形6”。在“屬性”面板中進行設(shè)置，如圖所示，按Enter鍵確定操作，效果如圖所示。（35）選擇“橫排文字”工具，在適當(dāng)?shù)奈恢幂斎胄枰奈淖植⑦x取文字，在“字符”面板中，將“顏色”設(shè)為白色，其他選項的設(shè)置如圖所示，按Enter鍵確定操作，效果如圖所示。在“圖層”控制面板中生成新的文字圖層。（36）在“圖層”控制面板中選中“圓角矩形6”圖層，按Ctrl+J組合鍵，復(fù)制圖層，在“圖層”控制面板中生成新的形狀圖層“圓角矩形6拷貝”。在屬性欄中將“填充”顏色設(shè)為深黃色（207、176、131），“描邊”顏色設(shè)為無，在“屬性”面板中進行設(shè)置，如圖所示，按Enter鍵確定操作。單擊“蒙版”按鈕，設(shè)置如圖所示，按Enter鍵確定操作，效果如圖所示。在“圖層”控制面板中將“圓角矩形6拷貝”圖層拖曳到“圓角矩形6”圖層的下方，效果如圖所示。（37）在“圖層”控制面板中選中“圓角矩形2”圖層。選擇“圓角矩形”工具，在圖像窗口中適當(dāng)?shù)奈恢美L制圓角矩形，在“圖層”控制面板中生成新的形狀圖層“圓角矩形7”。在屬性欄中將“填充”顏色設(shè)為淺灰色（235、235、235），“描邊”顏色設(shè)為無，在“屬性”面板中進行設(shè)置，如圖所示，按Enter鍵確定操作。單擊“蒙版”按鈕，設(shè)置如圖所示，按Enter鍵確定操作，效果如圖所示。（38）在“圖層”控制面板中將“圓角矩形7”圖層拖曳到“圓角矩形2”圖層的下方，如圖所示，效果如圖所示。按住Shift鍵的同時，單擊“打卡”圖層，將需要的圖層同時選取，按Ctrl+G組合鍵，群組圖層并將其命名為“用戶信息”，如圖所示。（39）選擇“視圖>新建參考線”命令，彈出“新建參考線”對話框，設(shè)置如圖所示，在距離上方參考線24像素的位置新建一條水平參考線。使用相同的方法再次新建一條參考線，如圖所示，在距離上方參考線112像素的位置新建一條水平參考線。分別單擊“確定”按鈕，完成參考線的創(chuàng)建，效果如圖所示。（40）選擇“圓角矩形”工具，在屬性欄中將“填充”顏色設(shè)為白色，“描邊”顏色設(shè)為無，“半徑”選項設(shè)為10像素。在圖像窗口中適當(dāng)?shù)奈恢美L制圓角矩形，在“圖層”控制面板中生成新的形狀圖層“圓角矩形8”。在“屬性”面板中進行設(shè)置，如圖所示，按Enter鍵確定操作，效果如圖所示。（41）選擇“橫排文字”工具，在適當(dāng)?shù)奈恢幂斎胄枰奈淖植⑦x取文字，在“字符”面板中，將“顏色”設(shè)為深灰色（51、51、51），其他選項的設(shè)置如圖所示，按Enter鍵確定操作。再次輸入文字，在“字符”面板中，將“顏色”設(shè)為灰色（153、153、153），其他選項的設(shè)置如圖所示，按Enter鍵確定操作，效果如圖所示。在“圖層”控制面板中分別生成新的文字圖層。（42）選擇“文件>置入嵌入對象”命令，彈出“置入嵌入的對象”對話框。選擇云盤中的“Ch05>制作旅游類App>制作旅游類App個人中心頁>素材>10”文件，單擊“置入”按鈕，將圖標(biāo)置入到圖像窗口中，將其拖曳到適當(dāng)?shù)奈恢貌⒄{(diào)整大小，按Enter鍵確定操作，如圖所示，在“圖層”控制面板中生成新的圖層并將其命名為“積分”。（43）選擇“圓角矩形”工具，在圖像窗口中適當(dāng)?shù)奈恢美L制圓角矩形，在“圖層”控制面板中生成新的形狀圖層“圓角矩形9”。在屬性欄中將“填充”顏色設(shè)為淺灰色（235、235、235），“描邊”顏色設(shè)為無，在“屬性”面板中進行設(shè)置，如圖所示，按Enter鍵確定操作。單擊“蒙版”按鈕，設(shè)置如圖所示，按Enter鍵確定操作，效果如圖所示。（44）在“圖層”控制面板中將“圓角矩形9”圖層拖曳到“圓角矩形8”圖層的下方，如圖所示，效果如圖所示。按住Shift鍵的同時，單擊“積分”圖層，將需要的圖層同時選取，按Ctrl+G組合鍵，群組圖層并將其命名為“領(lǐng)積分”，如圖所示。（45）使用相同的方法，再次繪制形狀、輸入文字、置入圖標(biāo)并群組圖層，如圖所示，效果如圖所示。（46）選擇“視圖>新建參考線”命令，彈出“新建參考線”對話框，設(shè)置如圖所示，在距離上方參考線32像素的位置新建一條水平參考線。使用相同的方法再次新建一條參考線，如圖所示，在距離上方參考線140像素的位置新建一條水平參考線。分別單擊“確定”按鈕，完成參考線的創(chuàng)建，效果如圖所示。（47）選擇“文件>置入嵌入對象”命令，彈出“置入嵌入的對象”對話框。選擇云盤中的“Ch05>制作旅游類App>制作旅游類App個人中心頁>素材>12”文件，單擊“置入”按鈕，將圖標(biāo)置入到圖像窗口中，將其拖曳到適當(dāng)?shù)奈恢貌⒄{(diào)整大小，按Enter鍵確定操作，如圖所示，在“圖層”控制面板中生成新的圖層并將其命名為“待付款”。（48）單擊“圖層”控制面板下方的“添加圖層樣式”按鈕，在彈出的菜單中選擇“漸變疊加”命令，彈出對話框，單擊“漸變”選項右側(cè)的“點按可編輯漸變”按鈕，彈出“漸變編輯器”對話框，在“位置”選項中分別輸入0、100兩個位置點，分別設(shè)置兩個位置點顏色的RGB值為0（255、222、0）、100（255、150、0），如圖所示，單擊“確定”按鈕。返回到“漸變疊加”對話框，其他選項的設(shè)置如圖所示，單擊“確定”按鈕，效果如圖所示。（49）使用相同的方法，再次分別置入需要的圖標(biāo)并添加漸變疊加效果，效果如圖所示，在“圖層”控制面板中分別生成新的圖層。（50）選擇“橫排文字”工具，在適當(dāng)?shù)奈恢梅謩e輸入需要的文字并選取文字，在“字符”面板中，將“顏色”設(shè)為灰色（153、153、153），其他選項的設(shè)置如圖所示，按Enter鍵確定操作，效果如圖所示。在“圖層”控制面板中分別生成新的文字圖層。（51）選擇“文件>置入嵌入對象”命令，彈出“置入嵌入的對象”對話框。選擇云盤中的“Ch05>制作旅游類App>制作旅游類App個人中心頁>素材>17”文件，單擊“置入”按鈕，將圖標(biāo)置入到圖像窗口中，將其拖曳到適當(dāng)?shù)奈恢貌⒄{(diào)整大小，按Enter鍵確定操作，如圖所示，在“圖層”控制面板中生成新的圖層并將其命名為“展開”。（52）按住Shift鍵的同時，單擊“待付款”圖層，將需要的圖層同時選取，按Ctrl+G組合鍵，群組圖層并將其命名為“我的訂單”，如圖所示。（53）選擇“視圖>新建參考線”命令，彈出“新建參考線”對話框，設(shè)置如圖所示，在距離上方參考線336像素的位置新建一條水平參考線，單擊“確定”按鈕，完成參考線的創(chuàng)建，效果如圖所示。（54）選擇“圓角矩形”工具，在屬性欄中將“填充”顏色設(shè)為白色，“描邊”顏色設(shè)為無，“半徑”選項設(shè)為10像素。在圖像窗口中適當(dāng)?shù)奈恢美L制圓角矩形，在“圖層”控制面板中生成新的形狀圖層“圓角矩形10”。在“屬性”面板中進行設(shè)置，如圖所示，按Enter鍵確定操作，效果如圖所示。（55）選擇“橫排文字”工具，在適當(dāng)?shù)奈恢幂斎胄枰奈淖植⑦x取文字，在“字符”面板中，將“顏色”設(shè)為灰色（51、51、51），其他選項的設(shè)置如圖所示，按Enter鍵確定操作，效果如圖所示。在“圖層”控制面板中生成新的文字圖層。（56）選擇“直線”工具，在屬性欄中將“填充”顏色設(shè)為無，“描邊”顏色設(shè)為淺灰色（234、234、234），“粗細”選項設(shè)為1像素，按住Shift鍵的同時，在適當(dāng)?shù)奈恢美L制一條直線，在“圖層”控制面板中生成新的形狀圖層“形狀1”，如圖所示。（57）選擇“橫排文字”工具，在適當(dāng)?shù)奈恢幂斎胄枰奈淖植⑦x取文字，在“字符”面板中，將“顏色”設(shè)為橘黃色（240、124、20），其他選項的設(shè)置如圖所示，按Enter鍵確定操作。再次輸入文字，在“字符”面板中，將“顏色”設(shè)為灰色（153、153、153），其他選項的設(shè)置如圖所示，按Enter鍵確定操作，效果如圖所示。在“圖層”控制面板中分別生成新的文字圖層。（58）使用相同的方法，分別輸入其他文字，效果如圖所示，在“圖層”控制面板中分別生成新的文字圖層。（59）選擇“文件>置入嵌入對象”命令，彈出“置入嵌入的對象”對話框。選擇云盤中的“Ch05>制作旅游類App>制作旅游類App個人中心頁>素材>18”文件，單擊“置入”按鈕，將圖標(biāo)置入到圖像窗口中，將其拖曳到適當(dāng)?shù)奈恢貌⒄{(diào)整大小，按Enter鍵確定操作，如圖所示，在“圖層”控制面板中生成新的圖層并將其命名為“在線客服”。（60）單擊“圖層”控制面板下方的“添加圖層樣式”按鈕，在彈出的菜單中選擇“顏色疊加”命令，彈出對話框，設(shè)置“疊加”顏色為深黃色（242、163、49），單擊“確定”按鈕。返回到“顏色疊加”對話框，其他選項的設(shè)置如圖所示，單擊“確定”按鈕，效果如圖所示。（61）選擇“橫排文字”工具，在適當(dāng)?shù)奈恢幂斎胄枰奈淖植⑦x取文字，在“字符”面板中，將“顏色”設(shè)為灰色（153、153、153），其他選項的設(shè)置如圖所示，按Enter鍵確定操作，效果如圖所示。在“圖層”控制面板中生成新的文字圖層。（62）使用相同的方法，分別置入其他圖標(biāo)、添加顏色疊加效果并輸入其他文字，效果如圖所示，在“圖層”控制面板中分別生成新的圖層。（63）選擇“圓角矩形”工具，在圖像窗口中適當(dāng)?shù)奈恢美L制圓角矩形，在“圖層”控制面板中生成新的形狀圖層“圓角矩形11”。在屬性欄中將“填充”顏色設(shè)為淺灰色（235、235、235），“描邊”顏色設(shè)為無，在“屬性”面板中進行設(shè)置，如圖所示，按Enter鍵確定操作。單擊“蒙版”按鈕，設(shè)置如圖所示，按Enter鍵確定操作，效果如圖所示。（64）在“圖層”控制面板中將“圓角矩形11”圖層拖曳到“圓角矩形10”圖層的下方，如圖所示，效果如圖所示。（65）按住Shift鍵的同時，單擊“我的游記”圖層，將需要的圖層同時選取，按Ctrl+G組合鍵，群組圖層并將其命名為“常用工具”，如圖所示。按住Shift鍵的同時，單擊“去探索”圖層組，將需要的圖層組同時選取，按Ctrl+G組合鍵，群組圖層組并將其命名為“內(nèi)容區(qū)”，如圖所示。（66）選擇“視圖>新建參考線”命令，彈出“新建參考線”對話框，設(shè)置如圖所示，在距離上方參考線66像素的位置新建一條水平參考線。使用相同的方法再次新建一條參考線，如圖所示，在距離上方參考線98像素的位置新建一條水平參考線。分別單擊“確定”按鈕，完成參考線的創(chuàng)建，效果如圖所示。（67）按Ctrl＋O組合鍵，打開云盤中的“Ch05>制作旅游類App>制作旅游類App首頁>效果>制作旅游類App首頁.psd”文件，在“圖層”控制面板中，選中“標(biāo)簽欄”圖層組。選擇“移動”工具，將選取的圖層組拖曳到新建的圖像窗口中適當(dāng)?shù)奈恢茫鐖D所示，效果如圖所示。（68）展開標(biāo)簽欄圖層組，單擊“首頁（已選中）”圖層左側(cè)的眼睛圖標(biāo)，隱藏圖層，單擊“首頁（未選中）”圖層左側(cè)的空白圖標(biāo)，顯示圖層，如圖所示，效果如圖所示。使用相同的方法隱藏“我的（未選中）”圖層，顯示“我的（已選中）”圖層，效果如圖所示。（69）選中“首頁”文字圖層，在“字符”面板中，將“顏色”設(shè)為灰色（153、153、153），其他選項的設(shè)置如圖所示，按Enter鍵確定操作。選中“我的”文字圖層，在“字符”面板中，將“顏色”設(shè)為橘黃色（255、151、1），其他選項的設(shè)置如圖所示，按Enter鍵確定操作，效果如圖所示。（70）按Ctrl＋O組合鍵，打開云盤中的“Ch03>制作旅游類App反饋控件.psd”文件，在“圖層”控制面板中，選中“反饋控件”圖層組。選擇“移動”工具，將選取的圖層組拖曳到新建的圖像窗口中適當(dāng)?shù)奈恢茫鐖D所示，效果如圖所示。（71）折疊標(biāo)簽欄圖層組。選擇“文件>置入嵌入對象”命令，彈出“置入嵌入的對象”對話框。選擇云盤中的“Ch05>制作旅游類App>制作旅游類App個人中心頁>素材>22”文件，單擊“置入”按鈕，將圖片置入到圖像窗口中并拖曳到適當(dāng)?shù)奈恢茫碋nter鍵確定操作，效果如圖所示，在“圖層”控制面板中生成新的圖層并將其命名為“HomeIndicator”，如圖所示。旅游類App個人中心頁制作完成。詳情頁作為UI設(shè)計中的常用頁面之一，具有展示產(chǎn)品、流量轉(zhuǎn)化的作用。下面主要從概念對個人中心頁進行講解。5.5.1詳情頁的概念詳情頁是展示App產(chǎn)品詳細信息，用于用戶產(chǎn)生消費的頁面。頁面內(nèi)容較豐富，以圖文信息為主，如圖所示。京東商城途牛