Photoshop第六章-智能手機App界面設計

1、第六章 智能手機App界面設計第六章 智能手機App界面設計項目情境：風起云涌的高科技時代，智能終端的普及不僅推動了移動互聯(lián)網的發(fā)展，也帶來了移動應用的爆炸式增長。智能手機已經成為生活必需品之一，而智能手機的普及推動了手機App應用的發(fā)展。第六章 智能手機App界面設計項目概要：智能手機的用戶界面及體驗受到用戶越來越多的關注，如何能夠讓用戶使用的更加流暢，更加舒適，其中，App設計就作為最為迫切的需求，推到了每個設計者面前。通過對本章的學習，可以快速掌握用戶界面、按鈕、控件的制作方法。第六章 智能手機App界面設計項目學習目標：本章主要是利用Photoshop CS6強大功能來制作手機App應

2、用。從最基礎的UI界面開始，通過循序漸進的方式逐一介紹關于App應用的知識。通過對本章的學習，可以了解關于App、UI的概念，掌握如何制作出美觀、簡潔、方便的用戶界面、按鈕、控件。01繪制用戶界面第六章 智能手機App界面設計任務情境：用戶界面是否美觀，直接影響著使用者的心情，進而影響其對軟件的直接印象。界面中功能菜單的布局是否合理，是否符合大眾的使用習慣，都直接影響著使用者對此軟件的喜愛與否。首先讓使用者喜歡上界面，才會促使使用者去了解軟件中強大的功能，因此，界面的布局是非常重要的。通過Photoshop CS6的強大功能來設計一款美觀的用戶界面是本任務的主要作用。第六章 智能手機App界面

3、設計任務實施：1、執(zhí)行菜單欄中的【文件】/【新建】命令，在彈出的對話框中設置各參數(shù)及選項，如圖6-1所示圖6-1第六章 智能手機App界面設計2、單擊圖層面板下方的創(chuàng)建新圖層按鈕 ，得到圖層1，設置前景色為黑色 ，按下ALT+DELETE鍵，為圖層填充黑色，如圖6-2所示圖6-2第六章 智能手機App界面設計3、執(zhí)行菜單欄中的【文件】/【打開】命令，打開素材1.jpg，使用移動工具 ，將素材1移動到“用戶界面”文件，得到圖層2，效果如圖6-3所示。圖6-3第六章 智能手機App界面設計4、單擊圖層面板下方添加圖層蒙版按鈕 ，為圖層2添加圖層蒙版，單擊工具箱中漸變工具 ，單擊工具選項欄中漸變編輯

4、器按鈕 ，打開漸變編輯器如圖6-4所示，設置黑白漸變，為圖層2蒙版填充漸變，得到如圖6-5所示效果。圖6-4第六章 智能手機App界面設計圖6-5第六章 智能手機App界面設計5、單擊圖層調板中創(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次，復制出另外5個白色圓形，CTRL+D取消選區(qū)，效果如圖6-7所示。圖6-7第六章 智能手機App界面設計7、單擊圖層調板中創(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、，單擊工具箱中移動工具 ，移動白色邊框，得到效果如圖6-10所示。第六章 智能手機App界面設計圖6-8圖6-9第六章 智能手機App界面設計8、重復步驟7，設置前景色為#fff600（黃色），分別得到圖層6，圖層7。9、重復步驟7，設置前景色為#00a7ed（藍色），分別得到圖層8，圖層9。10、重復步驟7，設置前景色為#007c4c（綠色），分別得到圖層10，圖層11。得到效果如圖6-11所示。第六章 智能手機App界面設計圖6-10圖6-11第六章 智能手機App界面設計11、單擊工具箱中橫排文字工具 ，輸入文字“18：30”，得到效果如圖6-12所示。圖6-12第六章 智能手機App界

7、面設計12、在組2中，新建圖層12，設置前景色為ff5400，單擊工具箱中的圓角矩形工具 ，工具選項欄設置如圖6-13所示，繪制橘色圓角矩形，輸入文字“其他城市”，得到效果如圖6-14所示。圖6-13第六章 智能手機App界面設計圖6-14第六章 智能手機App界面設計13、單擊圖層調板中創(chuàng)建新組按鈕 ，創(chuàng)建組3，設置前景色為000000 (黑色)，輸入文字“同城交友”，單擊“同城交友”文字圖層，拖拽至圖層調板下方的創(chuàng)建新圖層按鈕 ，得到同城交友副本文字圖層，改變文字顏色為ff0000（紅色），單擊工具箱中的移動工具 ，移動同城交友副本文字圖層的位置，得到效果如圖6-15所示。圖6-15第六章

8、 智能手機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界

9、面設計16、輸入文字“北京”，新建圖層14，設置前景色為白色，單擊工具箱中的直線工具 ，工具選項欄設置如圖6-21所示，繪制如圖6-22所示白色直線。任務1最終效果如圖6-23所示。圖6-21圖6-22第六章 智能手機App界面設計圖6-23第六章 智能手機App界面設計任務拓展請為“天天購”購物網站“觸屏版”設計一款個性化用戶界面。第六章 智能手機App界面設計任務總結通過對任務1的學習，掌握用戶界面的大小及設計方法，掌握PhotoShop CS6中圖層及描邊命令的使用。02制作經典圖標第六章 智能手機App界面設計任務情境：圖標是具有指代意義的符號，它具有高度濃度、簡便快捷傳達信息的特性，

10、其應用范圍非常廣泛，任何一款App應用都會涉及到圖標，本任務就是應用 PhotoShop CS6中一些簡單工具制作一款經典圖標。第六章 智能手機App界面設計任務實施：1、執(zhí)行菜單欄中的【文件】/【新建】命令，在彈出的對話框中設置各參數(shù)及選項，如圖6-24所示圖6-24第六章 智能手機App界面設計2、按下CTRL+R鍵打開標尺，添加橫向、豎向兩條參考線，單擊圖層面板下方的創(chuàng)建新圖層按鈕 ，得到圖層1，設置前景色為#a3a3a3，單擊工具箱中的橢圓選框工具 ，將鼠標光標放在參考線確定的中心位置，按下ALT+SHIFT鍵，得到圓形選區(qū)，如圖6-25所示，按下ALT+DELETE鍵，填充前景色，C

11、TRL+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，單擊工具箱中的橢圓選框工具 ，將鼠

12、標光標放在參考線確定的中心位置，按下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，填充漸變，C

13、TRL+D取消選區(qū)，得到效果如圖6-34所示。圖6-33第六章 智能手機App界面設計圖6-34第六章 智能手機App界面設計6、單擊圖層3，拖動圖層3到圖層調板下方的創(chuàng)建新圖層按鈕 ，得到圖層3副本，執(zhí)行菜單欄中的【編輯】/【變換】/【垂直翻轉】命令，使用移動工具，移動至如圖6-35所示位置。圖6-35第六章 智能手機App界面設計7、單擊圖層3副本，拖動圖層3副本到圖層調板下方的創(chuàng)建新圖層按鈕 ，得到圖層3副本2，執(zhí)行菜單欄中的【編輯】/【變換】/【水平翻轉】命令，使用移動工具，移動至如圖6-36所示位置。圖6-36第六章 智能手機App界面設計8、單擊圖層3副本2，拖動圖層3副本2到圖層

14、調板下方的創(chuàng)建新圖層按鈕 ，得到圖層3副本3，執(zhí)行菜單欄中的【編輯】/【變換】/【垂直翻轉】命令，使用移動工具，移動至如圖6-37所示位置。按下CTRL鍵的同時單擊圖層3副本2縮略圖，載入圖層3副本2選區(qū)，設置前景色為3ba600，背景色為135600，單擊工具箱中漸變工具，為圖層2副本2填充漸變，得到效果如圖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添加內陰影效果，參數(shù)設置如圖6-41所示，得到效果如圖6-42所示。圖6-40第六章 智能手機App界面設計圖6-41圖6-42第六章 智能手機App界面設計11、分別打開素材2.psd、