3.1.1 課堂案例——制作旅游類App首頁

【案例學習目標】學習使用繪圖工具、文字工具和“創建剪貼蒙版”命令制作旅游類App首頁。

【案例知識要點】使用“移動”工具移動素材，使用“置入”命令置入圖片，使用“剪貼蒙版”命令調整圖片顯示區域，使用“橫排文字”工具輸入文字，使用“矩形”工具和“圓角矩形”工具繪制基本形狀，最終效果如圖3-1所示。

【效果所在位置】Ch03/效果/制作旅游類App/制作旅游類App首頁.psd。

1. 制作狀態欄、導航欄和搜索欄

（1）按Ctrl+N組合鍵，彈出“新建文檔”對話框，寬度設為750像素，高度設為3092像素，分辨率為72像素/英寸，如圖3-2所示，單擊“創建”按鈕，完成文檔的新建。

（2）選擇“視圖 > 新建參考線版面”命令，彈出“新建參考線版面”對話框，設置如圖3-3所示。單擊“確定”按鈕，完成參考線的創建，效果如圖3-4所示。

（3）選擇“文件 > 置入嵌入對象”命令，彈出“置入嵌入的對象”對話框，選擇云盤中的“Ch03 > 素材 > 制作旅游類App首頁 > 01”文件，單擊“置入”按鈕，將圖片置入到圖像窗口中，將其拖曳到適當的位置，按Enter鍵確認操作，效果如圖3-5所示，在“圖層”控制面板中生成新的圖層并將其命名為“狀態欄”。

（4）選擇“視圖 > 新建參考線”命令，彈出“新建參考線”對話框，在128像素（距離上方參考線88像素）的位置建立參考線，設置如圖3-6所示。單擊“確定”按鈕，完成參考線的創建。

（5）按Ctrl＋O組合鍵，打開云盤中的“Ch03 > 素材 > 制作旅游類App首頁 > 02”文件，選擇“移動”工具，將“菜單”圖形拖曳到圖像窗口中適當的位置，在“圖層”控制面板中生成新的形狀圖層“菜單”。用相同的方法拖曳“更多”圖形到適當的位置，效果如圖3-7所示。

（6）按住Shift鍵的同時，單擊“菜單”圖層，將需要的圖層同時選取，按Ctrl+G組合鍵，群組圖層并將其命名為“導航欄”，如圖3-8所示。

（7）選擇“視圖 > 新建參考線”命令，彈出“新建參考線”對話框，在152像素（距離上方參考線24像素）的位置建立參考線，設置如圖3-9所示。單擊“確定”按鈕，完成參考線的創建。

（8）選擇“橫排文字”工具，在適當的位置輸入需要的文字并選取文字，選擇“窗口 > 字符”命令，彈出“字符”面板，在面板中將“顏色”設為綠色（27、229、141），其他選項的設置如圖3-10所示，按Enter鍵確認操作，在“圖層”控制面板中生成新的文字圖層。從上方的標尺處拖曳出一條水平參考線到“嗨！你想去哪兒旅行？”文字的下方，效果如圖3-11所示。

（9）選擇“視圖 > 新建參考線”命令，彈出“新建參考線”對話框，在492像素（距離上方參考線40像素）的位置建立參考線，設置如圖3-12所示。單擊“確定”按鈕，完成參考線的創建。

（10）再次在適當的位置輸入需要的文字并選取文字，在“字符”面板中將“顏色”設為灰色（157、163、180），其他選項的設置如圖3-13所示，按Enter鍵確認操作，在“圖層”控制面板中生成新的文字圖層。從上方的標尺處拖曳出一條水平參考線到“目的地，酒店，關鍵詞”文字的下方，效果如圖3-14所示。

（11）在“02”圖像窗口中，選擇“移動”工具，選中“搜索”圖層，將其拖曳到圖像窗口中適當的位置，效果如圖3-15所示，在“圖層”控制面板中生成新的形狀圖層“搜索”。

（12）選擇“直線”工具，在屬性欄中的“選擇工具模式”選項中選擇“形狀”，將“粗細”選項設為1像素。按住Shift鍵的同時，在距離上方參考線34像素的位置繪制直線，在屬性欄中將“填充”顏色設為無，“描邊”顏色設為灰色（205、212、232），如圖3-16所示，在“圖層”控制面板中生成新的形狀圖層“形狀1”。

（13）按住Shift鍵的同時，單擊“嗨！你想去哪兒旅行？”圖層，將需要的圖層同時選取，按Ctrl+G組合鍵，群組圖層并將其命名為“搜索欄”，如圖3-17所示。

2. 制作內容區

（1）選擇“視圖 > 新建參考線”命令，彈出“新建參考線”對話框，在640像素（距離上方形狀80像素）的位置建立參考線，設置如圖3-18所示。單擊“確定”按鈕，完成參考線的創建。

（2）選擇“橫排文字”工具，在適當的位置輸入需要的文字并選取文字，在“字符”面板中，將“顏色”設為藍灰色（69、69、83），其他選項的設置如圖3-19所示，按Enter鍵確認操作。再次在適當的位置輸入需要的文字并選取文字，在“字符”面板中，將“顏色”設為灰色（157、163、180），其他選項的設置如圖3-20所示，按Enter鍵確認操作，效果如圖3-21所示，在“圖層”控制面板中分別生成新的文字圖層。

（3）選擇“視圖 > 新建參考線”命令，彈出“新建參考線”對話框，在714像素（距離上方文字34像素）的位置建立參考線，設置如圖3-22所示，單擊“確定”按鈕，完成參考線的創建。

（4）選擇“圓角矩形”工具，在屬性欄中的“選擇工具模式”選項中選擇“形狀”，將“填充”顏色設為黑色，“描邊”顏色設為無，“半徑”選項設為12像素，在圖像窗口中適當的位置繪制圓角矩形，如圖3-23所示，在“圖層”控制面板中生成新的形狀圖層“圓角矩形1”。

（5）選擇“文件 > 置入嵌入對象”命令，彈出“置入嵌入的對象”對話框，選擇云盤中的“Ch03 > 素材 > 制作旅游類App首頁 > 03”文件，單擊“置入”按鈕，將圖片置入到圖像窗口中，將其拖曳到適當的位置并調整其大小，按Enter鍵確認操作，在“圖層”控制面板中生成新的圖層并將其命名為“圖1”。按Alt+Ctrl+G組合鍵，為“圖1”圖層創建剪貼蒙版，效果如圖3-24所示。

（6）在“02”圖像窗口中，選擇“移動”工具，選中“喜歡”圖層，將其拖曳到圖像窗口中適當的位置，效果如圖3-25所示，在“圖層”控制面板中生成新的形狀圖層“喜歡”。

（7）選擇“視圖 > 新建參考線”命令，彈出“新建參考線”對話框，在1038像素（距離上方形狀34像素）的位置建立參考線，設置如圖3-26所示，單擊“確定”按鈕，完成參考線的創建。

（8）選擇“橫排文字”工具，在適當的位置輸入需要的文字并選取文字，在“字符”面板中，將“顏色”設為藍灰色（69、69、83），其他選項的設置如圖3-27所示，按Enter鍵確認操作，效果如圖3-28所示，在“圖層”控制面板中生成新的文字圖層。

（9）在適當的位置輸入需要的文字并選取文字，在“字符”面板中，將“顏色”設為灰色（146、146、175），其他選項的設置如圖3-29所示，按Enter鍵確認操作，效果如圖3-30所示，在“圖層”控制面板中生成新的文字圖層。

（10）在“02”圖像窗口中，選擇“移動”工具，選中“五顆星”圖層，將其拖曳到圖像窗口中適當的位置，效果如圖3-31所示，在“圖層”控制面板中生成新的形狀圖層“五顆星”。

（11）選擇“橫排文字”工具，在適當的位置輸入需要的文字并選取文字。在“字符”面板中，將“顏色”設為灰色（146、146、175），其他選項的設置如圖3-32所示，按Enter鍵確認操作，效果如圖3-33所示，在“圖層”控制面板中分別生成新的文字圖層。

（12）按住Shift鍵的同時，單擊“圓角矩形1”圖層，將需要的圖層同時選取，按Ctrl+G組合鍵，群組圖層并將其命名為“網紅店”，如圖3-34所示。用相同的方法制作“森林屋”圖層組，如圖3-35所示，效果如圖3-36所示。

（13）按住Shift鍵的同時，單擊“酒店推薦”圖層，將需要的圖層同時選取，按Ctrl+G組合鍵，群組圖層并將其命名為“酒店推薦”，如圖3-37所示。

（14）選擇“視圖 > 新建參考線”命令，彈出“新建參考線”對話框，在1224像素（距離上方文字80像素）的位置建立參考線，設置如圖3-38所示。單擊“確定”按鈕，完成參考線的創建。

（15）選擇“橫排文字”工具，在適當的位置輸入需要的文字并選取文字，在“字符”面板中，將“顏色”設為藍灰色（69、69、83），其他選項的設置如圖3-39所示，按Enter鍵確認操作。再次在適當的位置輸入需要的文字并選取文字，在“字符”面板中，將“顏色”設為灰色（157、163、180），其他選項的設置如圖3-40所示，按Enter鍵確認操作，效果如圖3-41所示，在“圖層”控制面板中分別生成新的文字圖層。

（16）選擇“視圖 > 新建參考線”命令，彈出“新建參考線”對話框，在1296像素（距離上方文字34像素）的位置建立參考線，設置如圖3-42所示。單擊“確定”按鈕，完成參考線的創建。

（17）選擇“圓角矩形”工具，在屬性欄中將“填充”顏色設為灰色（170、170、170），“描邊”顏色設為無，“半徑”選項設為12像素，在圖像窗口中適當的位置繪制圓角矩形，如圖3-43所示，在“圖層”控制面板中生成新的形狀圖層“圓角矩形2”。

（18）選擇“文件 > 置入嵌入對象”命令，彈出“置入嵌入的對象”對話框，選擇云盤中的“Ch03 > 素材 > 制作旅游類App首頁 > 05”文件，單擊“置入”按鈕，將圖片置入到圖像窗口中，拖曳到適當的位置并調整其大小，按Enter鍵確認操作，在“圖層”控制面板中生成新的圖層并將其命名為“圖3”。按Alt+Ctrl+G組合鍵，為“圖3”圖層創建剪貼蒙版，效果如圖3-44所示。

（19）選擇“圓角矩形”工具，在屬性欄中將“填充”顏色設為綠色（27、229、141），在圖像窗口中適當的位置繪制圓角矩形，如圖3-45所示，在“圖層”控制面板中生成新的形狀圖層“圓角矩形3”。選擇“窗口 > 屬性”命令，彈出“屬性”面板，設置如圖3-46所示，按Enter鍵確認操作，效果如圖3-47所示。

（20）在“02”圖像窗口中，選擇“移動”工具，選中“喜歡”圖層，將其拖曳到圖像窗口中適當的位置，效果如圖3-48所示，在“圖層”控制面板中生成新的形狀圖層“喜歡”。

（21）選擇“視圖 > 新建參考線”命令，彈出“新建參考線”對話框，在1686像素（距離上方形狀34像素）的位置建立參考線，設置如圖3-49所示。單擊“確定”按鈕，完成參考線的創建。

（22）選擇“橫排文字”工具，在適當的位置輸入需要的文字并選取文字，在“字符”面板中，將“顏色”設為藍灰色（69、69、83），其他選項的設置如圖3-50所示，按Enter鍵確認操作。再次在適當的位置輸入需要的文字并選取文字，在“字符”面板中，將“顏色”設為灰色（146、146、175），其他選項的設置如圖3-51所示，按Enter鍵確認操作，效果如圖3-52所示，在“圖層”控制面板中分別生成新的文字圖層。

（23）按住Shift鍵的同時，單擊“圓角矩形2”圖層，將需要的圖層同時選取，按Ctrl+G組合鍵，群組圖層并將其命名為“米尼奧河畔”，如圖3-53所示。用相同的方法制作“舊金山”圖層組和“紐約”圖層組，效果如圖3-54所示。

（24）按住Shift鍵的同時，單擊“特色景點”圖層，將需要的圖層同時選取，按Ctrl+G組合鍵，群組圖層并將其命名為“特色景點”，如圖3-55所示。

（25）選擇“視圖 > 新建參考線”命令，彈出“新建參考線”對話框，在1828像素（距離上方文字80像素）的位置建立參考線，設置如圖3-56所示。單擊“確定”按鈕，完成參考線的創建。

（26）選擇“橫排文字”工具，在適當的位置輸入需要的文字并選取文字，在“字符”面板中，將“顏色”設為藍灰色（69、69、83），其他選項的設置如圖3-57所示，按Enter鍵確認操作。再次在適當的位置輸入需要的文字并選取文字，在“字符”面板中，將“顏色”設為灰色（157、163、180），其他選項的設置如圖3-58所示，按Enter鍵確認操作，在“圖層”控制面板中分別生成新的文字圖層，效果如圖3-59所示。

（27）選擇“視圖 > 新建參考線”命令，彈出“新建參考線”對話框，在1902像素（距離上方文字34像素）的位置建立參考線，設置如圖3-60所示。

（28）選擇“圓角矩形”工具，在屬性欄中將“填充”顏色設為灰色（170、170、170），“描邊”顏色設為無，“半徑”選項設為12像素，在圖像窗口中適當的位置繪制圓角矩形，在“圖層”控制面板中生成新的形狀圖層“圓角矩形4”。從上方的標尺處拖曳出一條水平參考線到“圓角矩形4”圖形的下方，如圖3-61所示。

（29）選擇“文件 > 置入嵌入對象”命令，彈出“置入嵌入的對象”對話框，選擇云盤中的“Ch03 > 素材 > 制作旅游類App首頁 > 08”文件，單擊“置入”按鈕，將圖片置入到圖像窗口中，拖曳到適當的位置并調整其大小，按Enter鍵確認操作，在“圖層”控制面板中生成新的圖層并將其命名為“圖6”。按Alt+Ctrl+G組合鍵，為“圖6”圖層創建剪貼蒙版，效果如圖3-62所示。

（30）在“02”圖像窗口中，選擇“移動”工具，選中“喜歡”圖層，將其拖曳到圖像窗口中適當的位置，效果如圖3-63所示，在“圖層”控制面板中生成新的形狀圖層“喜歡”。

（31）選擇“圓角矩形”工具，在屬性欄中將“填充”顏色設為綠色（27、229、141），在圖像窗口中適當的位置繪制圓角矩形，如圖3-64所示，在“圖層”控制面板中生成新的形狀圖層“圓角矩形5”。

（32）選擇“橫排文字”工具，在適當的位置輸入需要的文字并選取文字，在“字符”面板中，將“顏色”設為藍灰色（69、69、83），其他選項的設置如圖3-65所示，按Enter鍵確認操作。效果如圖3-66所示，在“圖層”控制面板中生成新的文字圖層。

（33）選擇“橢圓”工具，在屬性欄中的“選擇工具模式”選項中選擇“形狀”，將“填充”顏色設為藍灰色（69、69、83），“描邊”顏色設為無。按住Shift鍵的同時，在圖像窗口中適當的位置繪制圓形，如圖3-67所示，在“圖層”控制面板中生成新的形狀圖層“橢圓1”。

（34）選擇“橫排文字”工具，在適當的位置輸入需要的文字并選取文字，在“字符”面板中，將“顏色”設為藍灰色（146、146、175），其他選項的設置如圖3-68所示，在“圖層”控制面板中生成新的文字圖層。按住Shift鍵的同時，單擊“圓角矩形4”圖層，將需要的圖層同時選取，按Ctrl+G組合鍵，群組圖層并將其命名為“日本大阪”。用相同的方法制作“壽司”圖層組，效果如圖3-69所示。

（35）按住Shift鍵的同時，單擊“美食精選”圖層，將需要的圖層同時選取，按Ctrl+G組合鍵，群組圖層并將其命名為“美食精選”，如圖3-70所示。

（36）選擇“視圖 > 新建參考線”命令，彈出“新建參考線”對話框，在2542像素（距離上方文字80像素）的位置建立參考線，設置如圖3-71所示。單擊“確定”按鈕，完成參考線的創建。

（37）用上述方法建立參考線，并制作“其他推薦”圖層組，如圖3-72所示，效果如圖3-73所示。按住Shift鍵的同時，單擊“酒店推薦”圖層組，將需要的圖層同時選取，按Ctrl+G組合鍵，群組圖層并將其命名為“內容區”，如圖3-74所示。

（38）按Ctrl+S組合鍵，彈出“存儲為”對話框，將其命名為“制作旅游類App首頁”，保存為psd格式。單擊“保存”按鈕，彈出“Photoshop格式選項”對話框，單擊“確定”按鈕，將文件保存，旅游類App首頁制作完成。