Photoshop職業(yè)應用項目教程 第3版 課件 第六章 慧心巧思之智能手機App界面設計

第六章慧心巧思之智能手機App界面設計項目情境：風起云涌的高科技時代，智能終端的普及不僅推動了移動互聯(lián)網(wǎng)的發(fā)展，也帶來了移動應用的爆炸式增長。智能手機已經(jīng)成為生活必需品之一，而智能手機的普及推動了手機App應用的發(fā)展。第六章慧心巧思之智能手機App界面設計項目概要：智能手機的用戶界面及體驗受到用戶越來越多的關注，如何能夠讓用戶使用的更加流暢，更加舒適，其中，App設計就作為最為迫切的需求，推到了每個設計者面前。通過對本章的學習，可以快速掌握用戶界面、按鈕、控件的制作方法。第六章慧心巧思之智能手機App界面設計項目學習目標：本章主要是利用Photoshop2021強大功能來制作手機App應用。從最基礎的UI界面開始，通過循序漸進的方式逐一介紹關于App應用的知識。通過對本章的學習，可以了解關于App、UI的概念，掌握如何制作出美觀、簡潔、方便的用戶界面、按鈕、控件。第六章慧心巧思之智能手機App界面設計01用戶界面設計任務情境：用戶界面是否美觀，直接影響著使用者的心情，進而影響其對軟件的直接印象。界面中功能菜單的布局是否合理，是否符合大眾的使用習慣，都直接影響著使用者對此軟件的喜愛與否。首先讓使用者喜歡上界面，才會促使使用者去了解軟件中強大的功能，因此，界面的布局是非常重要的。通過PhotoshopCS6的強大功能來設計一款美觀的用戶界面是本任務的主要作用。第六章慧心巧思之智能手機App界面設計任務實施：1、執(zhí)行菜單欄中的【文件】/【新建】命令，在彈出的對話框中設置各參數(shù)及選項，如圖6-1所示圖6-1第六章慧心巧思之智能手機App界面設計2、單擊圖層面板下方的創(chuàng)建新圖層按鈕，得到“圖層1”，設置前景色為黑色，按下<Alt+Delete>鍵，為圖層填充黑色，如圖6-2所示圖6-2第六章慧心巧思之智能手機App界面設計3、執(zhí)行菜單欄中的【文件】/【打開】命令，打開素材圖“任務1.jpg”，使用移動工具，將“任務1.jpg”移動到“用戶界面”文件，調(diào)整圖片大小和位置，得到圖層2，效果如圖6-3所示。圖6-3第六章慧心巧思之智能手機App界面設計4、單擊圖層面板下方添加圖層蒙版按鈕，為“圖層2”添加矢量蒙版，單擊工具箱中漸變工具，單擊工具選項欄中漸變編輯器按鈕，打開漸變編輯器如圖6-4所示，設置黑白漸變，為“圖層2蒙版”填充漸變，得到如圖6-5所示效果。圖6-4第六章慧心巧思之智能手機App界面設計圖6-5第六章慧心巧思之智能手機App界面設計5、單擊圖層調(diào)板中創(chuàng)建新組按鈕，創(chuàng)建“組1”，單擊工具箱中橫排文字工具，輸入文字“City，Life，北京，城市生活”，設置合適的字體和字號，并按照圖6-6進行文字排版。圖6-6第六章慧心巧思之智能手機App界面設計6、單擊圖層面板下方的創(chuàng)建新圖層按鈕，在“組1”中創(chuàng)建新圖層，得到“圖層3”，單擊工具箱中橢圓選框工具，按下<Shift>鍵的同時，拖動鼠標，繪制圓形選區(qū)，設置前景色為白色，按下<Alt+Delete>鍵，為圓形選區(qū)填充白色。按下<Alt>鍵的同時，移動鼠標，重復5次，復制出另外5個白色圓形，<Ctrl+D>取消選區(qū)，效果如圖6-7所示。圖6-7第六章慧心巧思之智能手機App界面設計7、單擊圖層調(diào)板中創(chuàng)建新組按鈕，創(chuàng)建“組2”，單擊圖層面板下方的創(chuàng)建新圖層按鈕，在“組2”中創(chuàng)建新圖層，得到“圖層4”，單擊工具箱中矩形選框工具，按下<Shift>鍵的同時，拖動鼠標，繪制正方形選區(qū)，設置前景色為#ff0000（紅色），按下<Alt+Delete>鍵，為正方形選區(qū)填充紅色，<Ctrl+D>取消選區(qū)，得到如圖6-8所示效果。在組2中新建“圖層5”，按住Ctrl鍵的同時，單擊“圖層4”縮略圖，載入“圖層4”選區(qū)，執(zhí)行菜單欄中的【編輯】/【描邊】命令，設置參數(shù)，如圖6-9所示，<Ctrl+D>取消選區(qū)，單擊工具箱中移動工具，移動白色邊框，得到效果如圖6-10所示。第六章慧心巧思之智能手機App界面設計圖6-8圖6-9第六章慧心巧思之智能手機App界面設計圖6-10第六章慧心巧思之智能手機App界面設計8、重復步驟7，設置前景色為#fff600（黃色），分別得到圖層6，圖層7。9、重復步驟7，設置前景色為#00a7ed（藍色），分別得到圖層8，圖層9。10、重復步驟7，設置前景色為#007c4c（綠色），分別得到圖層10，圖層11。得到效果如圖6-11所示。第六章慧心巧思之智能手機App界面設計圖6-11第六章慧心巧思之智能手機App界面設計11、單擊工具箱中橫排文字工具，輸入文字“18：30”，得到效果如圖6-12所示。圖6-12第六章慧心巧思之智能手機App界面設計12、在組2中，新建“圖層12”，設置前景色為ff5400，單擊工具箱中的圓角矩形工具，工具選項欄設置如圖6-13所示，繪制橘色圓角矩形，輸入文字“其他城市”，得到效果如圖6-14所示。圖6-13第六章慧心巧思之智能手機App界面設計圖6-14第六章慧心巧思之智能手機App界面設計13、單擊圖層調(diào)板中創(chuàng)建新組按鈕，創(chuàng)建“組3”，設置前景色為#000000(黑色)，輸入文字“同城交友”，設置字體：ZHSRuiXian-yolan，單擊“同城交友”文字圖層，拖拽至圖層調(diào)板下方的創(chuàng)建新圖層按鈕，得到同城交友副本文字圖層，改變文字顏色為ff0000（紅色），單擊工具箱中的移動工具，移動同城交友副本文字圖層的位置，得到效果如圖6-15所示。圖6-15第六章慧心巧思之智能手機App界面設計14、重復步驟13，分別輸入文字“美食文化”、“景點”、“地圖”、“實時路況”，修改文字大小和顏色，得到效果如圖6-16所示。圖6-16第六章慧心巧思之智能手機App界面設計15、在“組3”中，新建“圖層13”，設置前景色為ffffff（白色），單擊工具箱中的直線工具，工具選項欄設置如圖6-17所示，繪制如圖6-18所示白色直線。雙擊圖層13彈出圖層樣式對話框，為圖層13添加投影效果，參數(shù)設置如圖6-19所示，投影效果如圖6-20所示。圖6-17第六章慧心巧思之智能手機App界面設計圖6-18第六章慧心巧思之智能手機App界面設計圖6-19第六章慧心巧思之智能手機App界面設計圖6-20第六章慧心巧思之智能手機App界面設計16、輸入文字“北京”，然后新建“圖層14”，設置前景色為白色，單擊工具箱中的直線工具，工具選項欄設置如圖6-21所示，繪制如圖6-22所示白色直線。最終效果如圖6-23所示。圖6-21圖6-22第六章慧心巧思之智能手機App界面設計圖6-23第六章慧心巧思之智能手機App界面設計任務拓展請為“天天購”購物網(wǎng)站“觸屏版”設計一款個性化用戶界面。第六章慧心巧思之智能手機App界面設計任務總結通過對任務1的學習，掌握用戶界面的大小及設計方法，掌握PhotoShop2021中圖層及描邊命令的使用。第六章慧心巧思之智能手機App界面設計02APP圖標設計任務情境：圖標是具有指代意義的符號，它具有高度濃度、簡便快捷傳達信息的特性，其應用范圍非常廣泛，任何一款App應用都會涉及到圖標，本任務就是應用PhotoShop2021中一些簡單工具制作一款經(jīng)典圖標。第六章慧心巧思之智能手機App界面設計任務實施：1、執(zhí)行菜單欄中的【文件】/【新建】命令，在彈出的對話框中設置各參數(shù)及選項，如圖6-24所示圖6-24第六章慧心巧思之智能手機App界面設計2、按下<Ctrl+R>鍵打開標尺，添加橫向、豎向兩條參考線，單擊圖層面板下方的創(chuàng)建新圖層按鈕，得到“圖層1”，設置前景色為#a3a3a3，單擊工具箱中的橢圓選框工具，將鼠標光標放在參考線確定的中心位置，按下<Alt+Shift>鍵，得到圓形選區(qū)，如圖6-25所示，按下<Alt+Delete>鍵，填充前景色，<Ctrl+D>取消選區(qū)，得到效果如圖6-26所示。雙擊“圖層1”，彈出圖層樣式對話框，為“圖層1”添加投影效果，參數(shù)設置如圖6-27所示，得到效果如圖6-28所示。第六章慧心巧思之智能手機App界面設計圖6-25圖6-26第六章慧心巧思之智能手機App界面設計圖6-27圖6-28第六章慧心巧思之智能手機App界面設計3、新建“圖層2”，設置前景色為白色，單擊工具箱中的橢圓選框工具，將鼠標光標放在參考線確定的中心位置，按下<Alt+Shift>鍵，得到圓形選區(qū)，按下<Alt+Delete>鍵，填充前景色，<Ctrl+D>取消選區(qū)，得到效果如圖6-29所示。圖6-29第六章慧心巧思之智能手機App界面設計4、新建“圖層3”，單擊工具箱中的橢圓選框工具，將鼠標光標放在參考線確定的中心位置，按下<Alt+Shift>鍵，得到圓形選區(qū)，如圖6-30所示，單擊工具相中的矩形選框工具，按下<Alt>鍵的同時拖動鼠標，將圓形選區(qū)的下半部減去，得到如圖6-31所示選區(qū)，繼續(xù)使用矩形選框工具，按下<Alt>鍵的同時拖動鼠標，將圓形選區(qū)的右半部減去，得到如圖6-32所示選區(qū)。圖6-30第六章慧心巧思之智能手機App界面設計圖6-31圖6-32第六章慧心巧思之智能手機App界面設計5、單擊工具箱中漸變工具，單擊工具選項欄中漸變編輯器按鈕，彈出漸變編輯器，設置左色標顏色為#0098f3，設置右色標顏色色為#005cbd，參數(shù)設置如圖6-33所示。選中“圖層3”，填充漸變，<Ctrl+D>取消選區(qū)，得到效果如圖6-34所示。圖6-33第六章慧心巧思之智能手機App界面設計圖6-34第六章慧心巧思之智能手機App界面設計6、單擊“圖層3”，拖動“圖層3”到圖層調(diào)板下方的創(chuàng)建新圖層按鈕，得到“圖層3拷貝”，執(zhí)行菜單欄中的【編輯】/【變換】/【垂直翻轉(zhuǎn)】命令，使用移動工具，移動至如圖6-35所示位置。圖6-35第六章慧心巧思之智能手機App界面設計7、單擊圖層3副本，拖動圖層3副本到圖層調(diào)板下方的創(chuàng)建新圖層按鈕

，得到圖層3副本2，執(zhí)行菜單欄中的【編輯】/【變換】/【水平翻轉(zhuǎn)】命令，使用移動工具，移動至如圖6-36所示位置。圖6-36第六章慧心巧思之智能手機App界面設計8、單擊“圖層3拷貝2”，拖動“圖層3拷貝2”到圖層調(diào)板下方的創(chuàng)建新圖層按鈕，得到“圖層3拷貝3”，執(zhí)行菜單欄中的【編輯】/【變換】/【垂直翻轉(zhuǎn)】命令，使用移動工具，移動至如圖6-37所示位置。按下<Ctrl>鍵的同時單擊“圖層3拷貝3”縮略圖，載入“圖層3拷貝3”選區(qū)，單擊工具箱中漸變工具，設置左色標顏色為#3ba600，設置右色標顏色為#135600，為圖層3副本3填充漸變，得到效果如圖6-38所示。圖6-37第六章慧心巧思之智能手機App界面設計圖6-38第六章慧心巧思之智能手機App界面設計9、選中“圖層3拷貝3”，按下<Ctrl+E>鍵，重復三次，將四個圖層合并為圖層3，如圖6-39所示。圖6-39第六章慧心巧思之智能手機App界面設計10、新建“圖層4”，設置前景色為白色，單擊工具箱中的橢圓選框工具，將鼠標光標放在參考線確定的中心位置，按下<Alt+Shift>鍵，得到圓形選區(qū)，按下<Alt+Delete>鍵填充前景色，按<Ctrl+D>鍵取消選區(qū)，得到效果如圖6-40所示。雙擊“圖層4”，彈出圖層樣式對話框，為“圖層4”添加內(nèi)陰影效果，參數(shù)設置如圖6-41所示，得到效果如圖6-42所示。圖6-40第六章慧心巧思之智能手機App界面設計圖6-41圖6-42第六章慧心巧思之智能手機App界面設