Photoshop-智能手機App圖標(biāo)和界面設(shè)計課件

第4章制作不同風(fēng)格的圖標(biāo)第4章制作不同風(fēng)格的圖標(biāo)區(qū)分不同風(fēng)格的App圖標(biāo)了解扁平化風(fēng)格圖標(biāo)了解立體質(zhì)感圖標(biāo)了解卡通風(fēng)格圖標(biāo)區(qū)分不同風(fēng)格的App圖標(biāo)4.1扁平化風(fēng)格圖標(biāo)要制作扁平化風(fēng)格圖標(biāo)，首先應(yīng)該了解什么是扁平化。扁平化概念最核心的地方如下。去掉冗余的裝飾效果，意思是去掉多余的透視，紋理，漸變等等能做出3D效果的元素。讓“信息”本身重新作為核心被凸顯出來。并且在設(shè)計元素上強調(diào)抽象、極簡、符號化。這里注意，扁平化設(shè)計并不是就意味著拋棄了所有的效果。4.1扁平化風(fēng)格圖標(biāo)要制作扁平化風(fēng)格圖標(biāo)，首先應(yīng)該了解什扁平化尤其在手機上，更少的按鈕和選項使得界面干凈整齊，使用起來格外簡潔?？梢愿雍唵沃苯拥膶⑿畔⒑褪挛锏墓ぷ鞣绞秸故境鰜?，減少認(rèn)知障礙的產(chǎn)生。扁平化尤其在手機上，更少的按鈕和選項使得界面干凈整齊，使用起扁平化不僅界面美觀、簡潔，而且達到降低功耗，延長待機時間和提高運算速度。它的優(yōu)點在于：降低移動設(shè)備的硬件需求，延長待機時間；扁平風(fēng)格的一個優(yōu)勢就在于它可以更加簡單直接的將信息和事物的工作方式展示出來，減少認(rèn)知障礙的產(chǎn)生。隨著App在許多平臺涵蓋了越來越多不同的屏幕尺寸，創(chuàng)建多個屏幕尺寸和分辨率的擬物化設(shè)計既繁瑣又費時。所以設(shè)計正朝著更加扁平化的設(shè)計而發(fā)展，它可以保證在所有的屏幕尺寸上都能達到同樣的效果。扁平化不僅界面美觀、簡潔，而且達到降低功耗，延長待機時間和提4.1.1時鐘圖標(biāo)時鐘圖標(biāo)是系統(tǒng)基礎(chǔ)組件之一，在制作時只要把握住始終的必要元素，隨意的設(shè)計即可。4.1.1時鐘圖標(biāo)時鐘圖標(biāo)是系統(tǒng)基礎(chǔ)組件之一，在制作時只案例制作時鐘圖標(biāo)案例制作時鐘圖標(biāo)4.1.2火箭圖標(biāo)本案例制作的時火箭圖標(biāo)，除模擬火箭外觀以外，采用了長陰影的效果，并且搭配點綴的星辰也是設(shè)計中比較小的技巧。4.1.2火箭圖標(biāo)本案例制作的時火箭圖標(biāo)，除模擬火箭外觀案例制作火箭圖標(biāo)案例制作火箭圖標(biāo)4.2立體質(zhì)感風(fēng)格圖標(biāo)立體質(zhì)感的圖標(biāo)就是通過模擬物體本身材質(zhì)的質(zhì)感、細(xì)節(jié)、光亮和陰影等細(xì)節(jié)，來達到一種接近于真實的效果，其實相對于扁平化風(fēng)格的設(shè)計，立體質(zhì)感肯定是要更加真實和富有情感的。但是立體質(zhì)感的圖標(biāo)有一個比較嚴(yán)重的缺點，現(xiàn)在的手機尺寸繁多，立體質(zhì)感的各種效果制作就限制了本身，因為在改變尺寸時，會大大的加重工作量和時間，讓設(shè)計變得非常的繁雜。4.2立體質(zhì)感風(fēng)格圖標(biāo)立體質(zhì)感的圖標(biāo)就是通過模擬物體本身4.2.1水晶質(zhì)感按鈕本案例制作的是水晶質(zhì)感的按鈕，主要通過對質(zhì)感的控制制作出水晶的效果，水晶效果的重點比較偏向于對于高光的掌握。4.2.1水晶質(zhì)感按鈕本案例制作的是水晶質(zhì)感的按鈕，主要案例制作水晶質(zhì)感按鈕案例制作水晶質(zhì)感按鈕4.2.2調(diào)節(jié)按鈕圖標(biāo)本案例主要是通過擬物實際應(yīng)用的控制開關(guān)而制作的圖標(biāo)。4.2.2調(diào)節(jié)按鈕圖標(biāo)本案例主要是通過擬物實際應(yīng)用的控制案例制作調(diào)節(jié)按鈕圖標(biāo)案例制作調(diào)節(jié)按鈕圖標(biāo)4.3卡通風(fēng)格圖標(biāo)除了扁平化和立體質(zhì)感的圖標(biāo)以外，卡通風(fēng)格算是可以自成一系的風(fēng)格。描邊卡通算是卡通風(fēng)格中比較使用的一種風(fēng)格，制作方法簡單而且實用。這種圖標(biāo)主要通過布爾運算、路徑和錨點就可以輕松的制作。4.3卡通風(fēng)格圖標(biāo)除了扁平化和立體質(zhì)感的圖標(biāo)以外，卡通風(fēng)4.3.1描邊卡通一本案例制作的是一個描邊卡通的冰棍，重點需要掌握制作的方法，要學(xué)會自己制作更多的圖標(biāo)。4.3.1描邊卡通一本案例制作的是一個描邊卡通的冰棍，重案例制作描邊卡通一案例制作描邊卡通一4.3.2描邊卡通二本案例制作的是一個描邊卡通的太陽，通過這兩個案例，要理解設(shè)計的要點，要學(xué)會通過觀察物體的特點制作出更多的描邊卡通圖案。4.3.2描邊卡通二本案例制作的是一個描邊卡通的太陽，通案例制作描邊卡通二案例制作描邊卡通二3.2.3對話框現(xiàn)在基本上所有App都有對話的功能，所以對話框基本上也是所有App必備的一個組件3.2.3對話框現(xiàn)在基本上所有App都有對話的功能，所以案例制作對話框案例制作對話框3.2.4選項框選項框也叫做復(fù)選框，是按鈕中的一個組件，用于簡化管理一些復(fù)雜的功能。3.2.4選項框選項框也叫做復(fù)選框，是按鈕中的一個組件，案例制作選項框案例制作選項框3.3圖形的效果處理隨著Photoshop的日益成熟，圖片處理技術(shù)的無所不能，Photoshop也已應(yīng)用在很多領(lǐng)域中?；旧弦磺心憧梢韵胂蠡蛴^察到的效果都可以使用Photoshop實現(xiàn)，在App中也會應(yīng)用到這些效果處理，從原來擬物化圖標(biāo)中，可以明顯的看出，Photoshop制作的效果非常逼真，讓人看上去就知道其意思，表達得很清晰，但是要設(shè)計得如此真實，設(shè)計師的功力是必不可少的，必須有一定的能力才能制作出如此漂亮和真實的圖標(biāo)。3.3圖形的效果處理隨著Photoshop的日益成熟，圖而現(xiàn)在的設(shè)計趨勢已經(jīng)逐漸趨于扁平化，拋棄了冗余、厚重和繁雜的裝飾效果，強調(diào)了一種抽象極簡和符號化的設(shè)計理念。這里需要注意，扁平化雖然拋棄了過多的去使用復(fù)雜的效果，但是并不代表就不會使用一些效果來讓設(shè)計更加精美，下面的效果處理中，后面3個案例會具體講解一些簡單的效果對扁平化圖形從美觀上的提升。而現(xiàn)在的設(shè)計趨勢已經(jīng)逐漸趨于扁平化，拋棄了冗余、厚重和繁雜的3.3.1鏡面效果鏡面效果常用于制作App的展示頁面，將App界面置于手機屏幕中，然后為其添加鏡面效果，可以讓展示效果看起來更加的真實。3.3.1鏡面效果鏡面效果常用于制作App的展示頁面，將案例制作鏡面效果案例制作鏡面效果3.3.2倒影效果倒影效果也是常常用于制作App的展示界面，可以將其賦予手機，也可以直接將App的界面進行倒影展示。3.3.2倒影效果倒影效果也是常常用于制作App的展示界案例制作倒影效果案例制作倒影效果3.3.3畫中畫效果畫中畫效果一般用于制作App的一些界面內(nèi)容，比如頭像與背景之間的層次關(guān)系。3.3.3畫中畫效果畫中畫效果一般用于制作App的一些界案例制作畫中畫效果案例制作畫中畫效果3.3.4彌散陰影效果彌散陰影是最近大熱的設(shè)計效果，一個簡單的效果就讓畫面顯得非常的精致，普通的【投影】圖層樣式相對就比較古板。但是彌散陰影在畫面中不宜過多，在主要的組件使用就可以了，不然會讓畫面非常的雜亂。3.3.4彌散陰影效果彌散陰影是最近大熱的設(shè)計效果，一個案例制作彌散陰影效果案例制作彌散陰影效果3.3.5長陰影效果在扁平化設(shè)計中，長陰影也是非常流行的一種設(shè)計趨勢，長陰影其實就是擴展了對象的投影，感覺是一種光線照射下的影子，通常采用角度為45°的投影，給對象添加了一份立體感。長陰影快速發(fā)展為流行的設(shè)計趨勢，并經(jīng)常被應(yīng)用到扁平設(shè)計方案的對象。這些陰影特別之處在于它們也是扁平的。目前，長陰影設(shè)計主要用于較小的對象和元素，如圖標(biāo)。3.3.5長陰影效果在扁平化設(shè)計中，長陰影也是非常流行的案例制作長陰影效果案例制作長陰影效果3.3.6缺角陰影效果缺角陰影不算是非常流行使用的效果，但是偶爾使用在圖標(biāo)中也會使圖標(biāo)變得非常的生動有趣。3.3.6缺角陰影效果缺角陰影不算是非常流行使用的效果，案例制作缺角陰影效果案例制作缺角陰影效果謝謝謝謝第4章制作不同風(fēng)格的圖標(biāo)第4章制作不同風(fēng)格的圖標(biāo)區(qū)分不同風(fēng)格的App圖標(biāo)了解扁平化風(fēng)格圖標(biāo)了解立體質(zhì)感圖標(biāo)了解卡通風(fēng)格圖標(biāo)區(qū)分不同風(fēng)格的App圖標(biāo)4.1扁平化風(fēng)格圖標(biāo)要制作扁平化風(fēng)格圖標(biāo)，首先應(yīng)該了解什么是扁平化。扁平化概念最核心的地方如下。去掉冗余的裝飾效果，意思是去掉多余的透視，紋理，漸變等等能做出3D效果的元素。讓“信息”本身重新作為核心被凸顯出來。并且在設(shè)計元素上強調(diào)抽象、極簡、符號化。這里注意，扁平化設(shè)計并不是就意味著拋棄了所有的效果。4.1扁平化風(fēng)格圖標(biāo)要制作扁平化風(fēng)格圖標(biāo)，首先應(yīng)該了解什扁平化尤其在手機上，更少的按鈕和選項使得界面干凈整齊，使用起來格外簡潔?？梢愿雍唵沃苯拥膶⑿畔⒑褪挛锏墓ぷ鞣绞秸故境鰜?，減少認(rèn)知障礙的產(chǎn)生。扁平化尤其在手機上，更少的按鈕和選項使得界面干凈整齊，使用起扁平化不僅界面美觀、簡潔，而且達到降低功耗，延長待機時間和提高運算速度。它的優(yōu)點在于：降低移動設(shè)備的硬件需求，延長待機時間；扁平風(fēng)格的一個優(yōu)勢就在于它可以更加簡單直接的將信息和事物的工作方式展示出來，減少認(rèn)知障礙的產(chǎn)生。隨著App在許多平臺涵蓋了越來越多不同的屏幕尺寸，創(chuàng)建多個屏幕尺寸和分辨率的擬物化設(shè)計既繁瑣又費時。所以設(shè)計正朝著更加扁平化的設(shè)計而發(fā)展，它可以保證在所有的屏幕尺寸上都能達到同樣的效果。扁平化不僅界面美觀、簡潔，而且達到降低功耗，延長待機時間和提4.1.1時鐘圖標(biāo)時鐘圖標(biāo)是系統(tǒng)基礎(chǔ)組件之一，在制作時只要把握住始終的必要元素，隨意的設(shè)計即可。4.1.1時鐘圖標(biāo)時鐘圖標(biāo)是系統(tǒng)基礎(chǔ)組件之一，在制作時只案例制作時鐘圖標(biāo)案例制作時鐘圖標(biāo)4.1.2火箭圖標(biāo)本案例制作的時火箭圖標(biāo)，除模擬火箭外觀以外，采用了長陰影的效果，并且搭配點綴的星辰也是設(shè)計中比較小的技巧。4.1.2火箭圖標(biāo)本案例制作的時火箭圖標(biāo)，除模擬火箭外觀案例制作火箭圖標(biāo)案例制作火箭圖標(biāo)4.2立體質(zhì)感風(fēng)格圖標(biāo)立體質(zhì)感的圖標(biāo)就是通過模擬物體本身材質(zhì)的質(zhì)感、細(xì)節(jié)、光亮和陰影等細(xì)節(jié)，來達到一種接近于真實的效果，其實相對于扁平化風(fēng)格的設(shè)計，立體質(zhì)感肯定是要更加真實和富有情感的。但是立體質(zhì)感的圖標(biāo)有一個比較嚴(yán)重的缺點，現(xiàn)在的手機尺寸繁多，立體質(zhì)感的各種效果制作就限制了本身，因為在改變尺寸時，會大大的加重工作量和時間，讓設(shè)計變得非常的繁雜。4.2立體質(zhì)感風(fēng)格圖標(biāo)立體質(zhì)感的圖標(biāo)就是通過模擬物體本身4.2.1水晶質(zhì)感按鈕本案例制作的是水晶質(zhì)感的按鈕，主要通過對質(zhì)感的控制制作出水晶的效果，水晶效果的重點比較偏向于對于高光的掌握。4.2.1水晶質(zhì)感按鈕本案例制作的是水晶質(zhì)感的按鈕，主要案例制作水晶質(zhì)感按鈕案例制作水晶質(zhì)感按鈕4.2.2調(diào)節(jié)按鈕圖標(biāo)本案例主要是通過擬物實際應(yīng)用的控制開關(guān)而制作的圖標(biāo)。4.2.2調(diào)節(jié)按鈕圖標(biāo)本案例主要是通過擬物實際應(yīng)用的控制案例制作調(diào)節(jié)按鈕圖標(biāo)案例制作調(diào)節(jié)按鈕圖標(biāo)4.3卡通風(fēng)格圖標(biāo)除了扁平化和立體質(zhì)感的圖標(biāo)以外，卡通風(fēng)格算是可以自成一系的風(fēng)格。描邊卡通算是卡通風(fēng)格中比較使用的一種風(fēng)格，制作方法簡單而且實用。這種圖標(biāo)主要通過布爾運算、路徑和錨點就可以輕松的制作。4.3卡通風(fēng)格圖標(biāo)除了扁平化和立體質(zhì)感的圖標(biāo)以外，卡通風(fēng)4.3.1描邊卡通一本案例制作的是一個描邊卡通的冰棍，重點需要掌握制作的方法，要學(xué)會自己制作更多的圖標(biāo)。4.3.1描邊卡通一本案例制作的是一個描邊卡通的冰棍，重案例制作描邊卡通一案例制作描邊卡通一4.3.2描邊卡通二本案例制作的是一個描邊卡通的太陽，通過這兩個案例，要理解設(shè)計的要點，要學(xué)會通過觀察物體的特點制作出更多的描邊卡通圖案。4.3.2描邊卡通二本案例制作的是一個描邊卡通的太陽，通案例制作描邊卡通二案例制作描邊卡通二3.2.3對話框現(xiàn)在基本上所有App都有對話的功能，所以對話框基本上也是所有App必備的一個組件3.2.3對話框現(xiàn)在基本上所有App都有對話的功能，所以案例制作對話框案例制作對話框3.2.4選項框選項框也叫做復(fù)選框，是按鈕中的一個組件，用于簡化管理一些復(fù)雜的功能。3.2.4選項框選項框也叫做復(fù)選框，是按鈕中的一個組件，案例制作選項框案例制作選項框3.3圖形的效果處理隨著Photoshop的日益成熟，圖片處理技術(shù)的無所不能，Photoshop也已應(yīng)用在很多領(lǐng)域中?；旧弦磺心憧梢韵胂蠡蛴^察到的效果都可以使用Photoshop實現(xiàn)，在App中也會應(yīng)用到這些效果處理，從原來擬物化圖標(biāo)中，可以明顯的看出，Photoshop制作的效果非常逼真，讓人看上去就知道其意思，表達得很清晰，但是要設(shè)計得如此真實，設(shè)計師的功力是必不可少的，必須有一定的能力才能制作出如此漂亮和真實的圖標(biāo)。3.3圖形的效果處理隨著Photoshop的日益成熟，圖而現(xiàn)在的設(shè)計趨勢已經(jīng)逐漸趨于扁平化，拋棄了冗余、厚重和繁雜的裝飾效果，強調(diào)了一種抽象極簡和符號化的設(shè)計理念。這里需要注意，扁平化雖然拋棄了過多的去使用復(fù)雜的效果，但是并不代表就不會使用一些效果來讓設(shè)計更加精美，下面的效果處理中，后面3個案例會具體講解一些簡單的效果對扁平化圖形從美觀上的提升。而現(xiàn)在的設(shè)計趨勢已經(jīng)逐漸趨于扁平化，拋棄了冗余、厚重和繁雜的3.3.1鏡面效果鏡面效果常用于制作App的展示頁面，將App界面置于手機屏幕中，然后為其添加鏡面效果，可以讓展示效果看起來更加的真實。3.3.1鏡面效果鏡面效果常用于制作App的展示頁面，將案例制作鏡面效果案例制作鏡面效果3.3.2倒影效果倒影效果也是常常用于制作App的展示界面，可以將其賦予手機，也可以直接將App的界面進行倒影展示。3.3.2倒影效果倒影效果也是常常用于制作App的展示界案例制作倒影效果案例