本教程是教大家如何利用Fireworks設(shè)計(jì)優(yōu)秀的APP圖標(biāo)，教程非常不錯(cuò)，不僅介紹圖標(biāo)設(shè)計(jì)的方法，同時(shí)也向大家指出了在設(shè)計(jì)時(shí)需要注意的事項(xiàng)。希望通過這篇教程，讓各位沒有設(shè)計(jì)基礎(chǔ)的同學(xué)們更快更好的設(shè)計(jì)出自己需要的東西來.推薦給大家，希望對(duì)大家有所幫助！

一. 圖標(biāo)設(shè)計(jì)的思路及注意事項(xiàng)

大家知道,APP設(shè)計(jì)中,應(yīng)用程序的圖標(biāo),可以說是你的作品的一個(gè)面子,隨著手機(jī)使用著審美水平的日益提高,如果圖片設(shè)計(jì)的太丑,使用著可能連下載都不會(huì)下載你的應(yīng)用, 別以為靜電危言聳聽哦. 據(jù)靜電了解,大部分購(gòu)買了智能手機(jī)的用戶,特別是年輕用戶,年齡段大概從十幾歲到三十幾歲,這個(gè)年齡段的人,對(duì)手機(jī)的使用體驗(yàn)要求是非常高的,他們會(huì)時(shí)不時(shí)的從應(yīng)用商店下載幾套好看的皮膚,幾張炫酷的,代表他們個(gè)性的壁紙放到自己手機(jī)上. 當(dāng)然,也包括放在他們手機(jī)桌面上的圖標(biāo)了, 我想,在應(yīng)用類型基本一樣的情況下, 大部分用戶可能會(huì)首選一個(gè)圖標(biāo)好看的應(yīng)用來下載.

另外一點(diǎn),要避免你的應(yīng)用被淹沒在一大片花花綠綠的圖標(biāo)中,那么就要讓自己的圖標(biāo)顯得有特色一點(diǎn),不管是從顏色上區(qū)分,還是外形上區(qū)分,這些都是有必要的. 比如,整個(gè)大趨勢(shì)流行用綠色的時(shí)候,你就用個(gè)橘紅色或者黃色,總之,讓自己的圖標(biāo)顯得引人注目,小細(xì)節(jié)是一定要注意的哈.

最后,通過圖標(biāo),清晰的傳達(dá)你的應(yīng)用是做什么的. 方寸之間,傳達(dá)這款應(yīng)用的功能及設(shè)計(jì)者的格調(diào).一個(gè)與應(yīng)用毫不相關(guān)的圖標(biāo)會(huì)讓用戶產(chǎn)生強(qiáng)烈的分裂感和厭惡感,這是圖標(biāo)設(shè)計(jì)的大忌.

二. 優(yōu)秀的圖標(biāo)設(shè)計(jì)與低品質(zhì)的圖標(biāo)設(shè)計(jì)對(duì)比

三. 實(shí)戰(zhàn)!開始設(shè)計(jì)一個(gè)屬于自己的圖標(biāo).

1.首先,我們來看一下圖標(biāo)的大小. 以iOS平臺(tái)為例,apple要求的最大圖標(biāo)尺寸高達(dá)512px-512px.

其他尺寸為114px-114px, 57-57px. 因?yàn)閳D片可以從大往小縮,所以,我們可以考慮先做最大尺寸的.至于安卓平臺(tái),我們使用最大尺寸縮小一個(gè)即可.

2.使用什么軟件來設(shè)計(jì)呢? 靜電這里推薦adobe的fireworks.原因是什么呢? 一來是這款軟件是靜電一直一來的設(shè)計(jì)軟件,第二,這款軟件比photoshop要好上手不少,對(duì)于開發(fā)者來說,效率也會(huì)高出不少.更重要的是,fireworks可以導(dǎo)出psd格式,也可以使用如AI,EPS等矢量文件,非常方便.強(qiáng)烈推薦大家安裝和使用. 這款軟件的最新版本是CS6. 具體下載地址靜電這里就不放出來了,請(qǐng)大家自行百度或者google.

3.裝完fireworks后,請(qǐng)大家打開它,我們首先會(huì)看到下面的界面. 圖標(biāo)和啟動(dòng)界面都是金黃色,很土豪有木有? 然后跟往常一樣,我們先選擇文件>新建 創(chuàng)建一個(gè)文檔,那么,這個(gè)文檔的大小就是512px-512px 分辨率是72保持不變.

4.畫布顏色我們先選擇白色. 其他參數(shù)跟上圖一樣就可以了.好的,現(xiàn)在我們會(huì)看到一個(gè)空白的畫布,你現(xiàn)在可以在上邊來設(shè)計(jì)圖標(biāo)啦! 今天靜電先拿如下的圖標(biāo)舉個(gè)例子. 先看看成型的圖標(biāo).

這個(gè)靜電練手的一個(gè)圖標(biāo). 好的 讓我們來看看他是怎么做的. 大家可以分析一下,他的組成,其實(shí)很簡(jiǎn)單.

接著,是那個(gè)展開雙臂的小人了. 這個(gè)圖案比較稍微有點(diǎn)復(fù)雜,我們需要用屏幕左側(cè)的鋼筆工具. 鋼筆勾出大概輪廓,然后可以慢慢的來調(diào)整每個(gè)節(jié)點(diǎn),直到理想為止.由于這里比較復(fù)雜,靜電直接提供png文件供大家下載使用.

第三步,我們來畫一個(gè)圓

第四步,就是圍繞在圓周圍的光啦.

第五步.這個(gè)時(shí)候,元素基本準(zhǔn)備完畢,我們發(fā)現(xiàn),這些元素都堆在畫布上.亂七八遭, 我們需要把它們組合起來,

簡(jiǎn)單吧,各位同學(xué)?其實(shí)初次使用,大家會(huì)有一點(diǎn)陌生感是正常的,不過這個(gè)軟件 用習(xí)慣的話,還是很方便的,也很容易上手.大家可以自己多玩玩,折騰一下,你會(huì)發(fā)現(xiàn),這真的很簡(jiǎn)單對(duì)吧?

好的,這期課程先到這里,其實(shí)圖標(biāo)還有很多細(xì)節(jié)要處理,不過這樣大概也能用了. 我們下期來點(diǎn)難度稍高的. 大家一定要及時(shí)復(fù)習(xí)哈.

教程源文件如下.您可以另存為,然后在fireworks中打開就可以看到啦.

教程結(jié)束，以上就是用Fireworks如何設(shè)計(jì)優(yōu)秀的APP圖標(biāo)過程，希望大家看完之后會(huì)有所收獲，謝謝大家觀看本教程！