圖標(biāo)的設(shè)計(jì)，它的主色調(diào)是玫紅色，另外又用到了粉紅和橘紅，這樣的色調(diào)搭配很受女性歡迎，因此在UI設(shè)計(jì)時(shí)一定要注意，根據(jù)受眾確定合適的色彩。下面小編就為大家介紹AI繪制ios美圖秀秀app圖標(biāo)方法，希望能對(duì)大家有所幫助，謝謝閱讀!

圖標(biāo)的設(shè)計(jì)不是任意而為之的，還有一個(gè)不能改變的限制條件，就是尺寸。所以APP的圖標(biāo)設(shè)計(jì)都有固定的設(shè)計(jì)規(guī)范，不同的手機(jī)系統(tǒng)，規(guī)范也不同。ios系統(tǒng)分為視網(wǎng)膜屏和普通屏，但在平時(shí)的界面設(shè)計(jì)中，只需要設(shè)計(jì)視網(wǎng)膜屏的尺寸就可以了，也就是普通屏幕512x512px的兩倍大小。

下面以ios為例，講解圖標(biāo)的設(shè)計(jì)。雖然毀圖秀秀的圖標(biāo)設(shè)計(jì)看起來不是特別復(fù)雜，但是想要制作出最終精美的效果，還是需要設(shè)計(jì)師細(xì)心操作的。

第一步，繪制正方形首先打開IOS的線框，直接在它的上面進(jìn)行繪制，先畫一個(gè)矩形，把寬和高都設(shè)置為1024px

第二步，制作放射狀光芒對(duì)上圖的矩形進(jìn)行一個(gè)漸變的填充，這個(gè)時(shí)候我們不需要描邊，在漸變滑塊那雙擊0%的位置，選擇RGB的顏色模式，對(duì)它的顏色進(jìn)行一個(gè)更改，把0%的地方更改為第一個(gè)色塊的顏色，把100%的地方更改為第二個(gè)色塊的顏色，角度改為-90度

扁平化涉設(shè)計(jì)中，它是弱化了高光和陰影的，所以它的整體色調(diào)和它所表現(xiàn)的立體效果應(yīng)該是比較柔和的，但是，在剛剛設(shè)置的漸變中，它的對(duì)比度相對(duì)來說有些強(qiáng)烈，要解決問題，就需要用到工具欄里的漸變工具，使用漸變條進(jìn)行拉伸和修改，讓它的顏色對(duì)比變得更為柔和。

接下來繪制光芒，首先拆分一下這個(gè)光芒，其實(shí)它是由類似小梯形的圖形構(gòu)成。

為了方便后面的操作，首先將這個(gè)矩形放到線框里操作

調(diào)整一下他們的圖層順序，將他們都進(jìn)行鎖定

選擇矩形工具在畫板上點(diǎn)擊一下設(shè)置它的尺寸

用直接選擇工具框選出描點(diǎn)

在工具欄找到比例縮放工具將選擇的描點(diǎn)往里收一下

這樣我們就得到了最終需要的圖形了

設(shè)置它的透明度，為了讓圖形和底色融合得更好，這個(gè)時(shí)候需要采用混合模式中的"疊加"模式.這樣就可以提高基色的飽和度以及對(duì)比度

現(xiàn)在我們要讓這個(gè)圖形以我們的矩形中心點(diǎn)，開始旋轉(zhuǎn)并且復(fù)制。選中工具欄里里面的旋轉(zhuǎn)工具，然后按住鍵盤上的Alt鍵，記住，這個(gè)時(shí)候千萬不要松手，找到我們的旋轉(zhuǎn)中心點(diǎn)，點(diǎn)擊一下

設(shè)置旋轉(zhuǎn)角度，點(diǎn)擊復(fù)制

多次按Ctrl+D，也就是關(guān)聯(lián)復(fù)制的命令

這樣就可以得到明顯的放射性的感覺了我們還需要把這個(gè)小光芒多余的部分減掉，先繪制一個(gè)與圖案紅色部分同等大小的正方形。

選擇要減掉的地方

點(diǎn)擊鼠標(biāo)右鍵，建立剪切蒙版，畫板上就只剩下我們需要的東西了。

在AI里，如果想要保留我們需要的畫面，就可以建立剪切蒙版，把我們需要的圖形用另外一個(gè)圖形覆蓋起來就可以了。接下來?，F(xiàn)在我們來繪制中心的這個(gè)圓

首先來繪制大的輪廓，找到橢圓工具，找到中心點(diǎn)，按住鍵盤Alt和Shift鍵，就可以從中心點(diǎn)繪制這個(gè)圓，直到它與線框中的外輪廓的圓同等大小。

在之后的過程中，我們需要用到圓環(huán)來制作一些陰影的效果，所以我們要做出這樣的一個(gè)圓環(huán)

我們?cè)賮硇陆ㄒ粋€(gè)圓，直徑為800px

為將它們中心對(duì)齊，選擇上面這個(gè)圓，用對(duì)其面板，選擇中心對(duì)齊

選擇這兩個(gè)圓

在菜單欄窗口找到路徑查找器 在浮動(dòng)面板里找到減去頂層

圓環(huán)就形成了

接下來繪制小太陽的中心 它的顏色就會(huì)更深一些

這個(gè)小太陽的大小跟上面第二個(gè)圓的大小是一樣的

給它進(jìn)行色值的改變

在通過中心對(duì)齊把第三個(gè)圓鑲嵌到白色的圓環(huán)內(nèi)

小太陽的中心就畫好啦

接下來繪制最中心的這個(gè)圓

觀察到，它是一個(gè)半透明的圓，而且置于剛剛的圓形之上

將它的線框調(diào)整到最頂層

再繪制一個(gè)半徑為690px的圓

這個(gè)圓雖然是半透明的，但是它有一種很飽滿的效果怎么來達(dá)到這種效果這是先用漸變填充 在它50%的地方添加一個(gè)滑塊

把它的顏色設(shè)置為純白色

再把它第一個(gè)和最后一個(gè)滑塊的顏色都設(shè)置為第二個(gè)色塊的顏色角度設(shè)置為0度

為了讓它有更為柔和的變化，我們需要對(duì)滑塊進(jìn)行拖動(dòng)變化

進(jìn)行中心對(duì)齊，再將透明度改為40%

再將"秀"放上去看下效果

上面的知識(shí)要點(diǎn)包括1.使用漸變工具，對(duì)圖形進(jìn)行漸變填充2.使用關(guān)聯(lián)復(fù)制，制作圖標(biāo)的光芒的部分

3.建立剪切蒙版，保留我們所需要的圖形【2】UI圖標(biāo)深入優(yōu)化一個(gè)看似很簡(jiǎn)單的圖標(biāo)也許在你看來就是把幾個(gè)元素拼湊起來而已，實(shí)際上當(dāng)你深入到設(shè)計(jì)領(lǐng)域之后，才會(huì)真正了解到，每一次微調(diào)對(duì)整體視覺效果的呈現(xiàn)都至關(guān)重要。將我們上次做的未優(yōu)化與最終成圖對(duì)比，看看我們還需做哪些

還需要做6個(gè)優(yōu)化

需要把中間這幾個(gè)圓設(shè)置為一個(gè)圖層

點(diǎn)擊創(chuàng)建一個(gè)新的圖層，給創(chuàng)建好的圖層進(jìn)行命名

把這個(gè)圖層名改為"中心的圓"把第一個(gè)圖層的名稱改為"矩形"，按住Ctrl鍵選擇要拖動(dòng)的對(duì)象然后松開Ctrl鍵

 將這三個(gè)對(duì)象直接拖進(jìn)"中心的圓"這個(gè)圖層點(diǎn)小眼睛看。現(xiàn)在它們已經(jīng)被分為兩個(gè)圖層了

"中心的圓"這個(gè)圖層置于"矩形"的圖層之上，再來為中間的ＬＯＧＯ新建一個(gè)圖層將它置于最頂層，將"秀"字放入"ｌｏｇｏ"這個(gè)圖層里

然后將暫時(shí)不用需要的"ｌｏｇｏ"這個(gè)圖層隱藏起來當(dāng)要處理的路徑文件很多的時(shí)候，一定要靈活的使用圖層工具，這樣你處理的步驟也會(huì)因此清晰明了進(jìn)入優(yōu)化圖標(biāo)的內(nèi)容，先從中心半透明的圓入手中心這個(gè)半透明的圓，它飽滿的質(zhì)感是在表現(xiàn)方式上模擬了光線的效果和一些光影的關(guān)系

在ＡＩ里，需要用到混合模式的同時(shí)結(jié)合別的效果來給它表現(xiàn)出來可以把這個(gè)半透明的圓分為三個(gè)部分上半部暖色調(diào)，中間的部分是眼睛的圖形，和下半部分的冷色調(diào)。

先來繪制中間的這個(gè)部分，可以隱約看出來像一個(gè)眼睛

 教程結(jié)束，以上就是AI繪制ios美圖秀秀app圖標(biāo)教程，希望能對(duì)大家有所幫助，謝謝閱讀！

最新評(píng)論