Photoshop第六章-智能手機(jī)App界面設(shè)計(jì)

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

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

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

4、器按鈕 ，打開(kāi)漸變編輯器如圖6-4所示，設(shè)置黑白漸變，為圖層2蒙版填充漸變，得到如圖6-5所示效果。圖6-4第六章 智能手機(jī)App界面設(shè)計(jì)圖6-5第六章 智能手機(jī)App界面設(shè)計(jì)5、單擊圖層調(diào)板中創(chuàng)建新組按鈕 ，創(chuàng)建組1，單擊工具箱中橫排文字工具 ，輸入文字“City，Life，北京，城市生活，排列方式”，如圖6-6所示。圖6-6第六章 智能手機(jī)App界面設(shè)計(jì)6、單擊圖層面板下方的創(chuàng)建新圖層按鈕 ，在組1中創(chuàng)建新圖層，得到圖層3，單擊工具箱中橢圓選框工具 ，按下SHIFT鍵的同時(shí)，拖動(dòng)鼠標(biāo)，繪制圓形選區(qū)，設(shè)置前景色為白色，按下ALT+DELETE鍵，為圓形選區(qū)填充白色。按下ALT鍵的同時(shí)，移動(dòng)鼠

5、標(biāo)，重復(fù)5次，復(fù)制出另外5個(gè)白色圓形，CTRL+D取消選區(qū)，效果如圖6-7所示。圖6-7第六章 智能手機(jī)App界面設(shè)計(jì)7、單擊圖層調(diào)板中創(chuàng)建新組按鈕 ，創(chuàng)建組2，單擊圖層面板下方的創(chuàng)建新圖層按鈕 ，在組2中創(chuàng)建新圖層，得到圖層4，單擊工具箱中矩形選框工具 ，按下SHIFT鍵的同時(shí)，拖動(dòng)鼠標(biāo)，繪制正方形選區(qū)，設(shè)置前景色為#ff0000（紅色），按下ALT+DELETE鍵，為正方形選區(qū)填充紅色，CTRL+D取消選區(qū)，得到如圖6-8所示效果。在組2中新建圖層5，按住CTRL鍵的同時(shí)，單擊圖層4縮略圖，載入圖層4選區(qū)，執(zhí)行菜單欄中的【編輯】/【描邊】命令，設(shè)置參數(shù)，如圖6-9所示，CTRL+D取消選區(qū)

6、，單擊工具箱中移動(dòng)工具 ，移動(dòng)白色邊框，得到效果如圖6-10所示。第六章 智能手機(jī)App界面設(shè)計(jì)圖6-8圖6-9第六章 智能手機(jī)App界面設(shè)計(jì)8、重復(fù)步驟7，設(shè)置前景色為#fff600（黃色），分別得到圖層6，圖層7。9、重復(fù)步驟7，設(shè)置前景色為#00a7ed（藍(lán)色），分別得到圖層8，圖層9。10、重復(fù)步驟7，設(shè)置前景色為#007c4c（綠色），分別得到圖層10，圖層11。得到效果如圖6-11所示。第六章 智能手機(jī)App界面設(shè)計(jì)圖6-10圖6-11第六章 智能手機(jī)App界面設(shè)計(jì)11、單擊工具箱中橫排文字工具 ，輸入文字“18：30”，得到效果如圖6-12所示。圖6-12第六章 智能手機(jī)App界

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

8、 智能手機(jī)App界面設(shè)計(jì)14、重復(fù)步驟13，分別輸入文字“美食文化”、“景點(diǎn)”、“地圖”、“實(shí)時(shí)路況”，文字大小有所改變，得到效果如圖6-16所示。圖6-16第六章 智能手機(jī)App界面設(shè)計(jì)15、在組3中，新建圖層13，設(shè)置前景色為ffffff（白色），單擊工具箱中的直線工具 ，工具選項(xiàng)欄設(shè)置如圖6-17所示，繪制如圖6-18所示白色直線。雙擊圖層13彈出圖層樣式對(duì)話框，為圖層13添加投影效果，參數(shù)設(shè)置如圖6-19所示，投影效果如圖6-20所示圖6-17第六章 智能手機(jī)App界面設(shè)計(jì)圖6-18第六章 智能手機(jī)App界面設(shè)計(jì)圖6-19第六章 智能手機(jī)App界面設(shè)計(jì)圖6-20第六章 智能手機(jī)App界

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

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

11、TRL+D取消選區(qū)，得到效果如圖6-26所示。雙擊圖層1，彈出圖層樣式對(duì)話框，為圖層1添加投影效果，參數(shù)設(shè)置如圖6-27所示，得到效果如圖6-28所示。第六章 智能手機(jī)App界面設(shè)計(jì)圖6-25圖6-26第六章 智能手機(jī)App界面設(shè)計(jì)圖6-27圖6-28第六章 智能手機(jī)App界面設(shè)計(jì)3、新建圖層2，設(shè)置前景色為白色，單擊工具箱中的橢圓選框工具 ，將鼠標(biāo)光標(biāo)放在參考線確定的中心位置，按下ALT+SHIFT鍵，得到圓形選區(qū)，按下ALT+DELETE鍵，填充前景色，CTRL+D取消選區(qū)，得到效果如圖6-29所示。圖6-29第六章 智能手機(jī)App界面設(shè)計(jì)4、新建圖層3，單擊工具箱中的橢圓選框工具 ，將鼠

12、標(biāo)光標(biāo)放在參考線確定的中心位置，按下ALT+SHIFT鍵，得到圓形選區(qū)，如圖6-30所示，單擊工具相中的矩形選框工具 ，按下ALT鍵的同時(shí)拖動(dòng)鼠標(biāo)，將圓形選區(qū)的下半部減去，得到如圖6-31所示選區(qū)，繼續(xù)使用矩形選框工具，按下ALT鍵的同時(shí)拖動(dòng)鼠標(biāo)，將圓形選區(qū)的右半部減去，得到如圖6-32所示選區(qū)。圖6-30第六章 智能手機(jī)App界面設(shè)計(jì)圖6-31圖6-32第六章 智能手機(jī)App界面設(shè)計(jì)5、單擊工具箱中漸變工具 ，設(shè)置前景色為#0098f3，設(shè)置背景色為# 005cbd，單擊工具選項(xiàng)欄中漸變編輯器按鈕 ，彈出漸變編輯器，選擇從前景色到背景色漸變，參數(shù)設(shè)置如圖6-33所示。選中圖層3，填充漸變，C

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

14、調(diào)板下方的創(chuàng)建新圖層按鈕 ，得到圖層3副本3，執(zhí)行菜單欄中的【編輯】/【變換】/【垂直翻轉(zhuǎn)】命令，使用移動(dòng)工具，移動(dòng)至如圖6-37所示位置。按下CTRL鍵的同時(shí)單擊圖層3副本2縮略圖，載入圖層3副本2選區(qū)，設(shè)置前景色為3ba600，背景色為135600，單擊工具箱中漸變工具，為圖層2副本2填充漸變，得到效果如圖6-38所示。圖6-37第六章 智能手機(jī)App界面設(shè)計(jì)圖6-38第六章 智能手機(jī)App界面設(shè)計(jì)9、選中圖層3副本3，按下CTRL+E鍵，重復(fù)三次，將四個(gè)圖層合并為圖層3，如圖6-39所示。圖6-39第六章 智能手機(jī)App界面設(shè)計(jì)10、新建圖層4，設(shè)置前景色為白色，單擊工具箱中的橢圓選框工具 ，將鼠標(biāo)光標(biāo)放在參考線確定的中心位置，按下ALT+SHIFT鍵，得到圓形選區(qū)，按下ALT+DELETE鍵，填充前景色，CTRL+D取消選區(qū)，得到效果如圖6-40所示。雙擊圖層4，彈出圖層樣式對(duì)話框，為圖層4添加內(nèi)陰影效果，參數(shù)設(shè)置如圖6-41所示，得到效果如圖6-42所示。圖6-40第六章 智能手機(jī)App界面設(shè)計(jì)圖6-41圖6-42第六章 智能手機(jī)App界面設(shè)計(jì)11、分別打開(kāi)素材2.psd、