AI繪制ios美圖秀秀app圖標教程

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

下面以ios為例,講解圖標的設計。雖然毀圖秀秀的圖標設計看起來不是特別復雜,但是想要制作出最終精美的效果,還是需要設計師細心操作的。

第一步,繪制正方形首先打開IOS的線框,直接在它的上面進行繪制,先畫一個矩形,把寬和高都設置為1024px

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

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

接下來繪制光芒,首先拆分一下這個光芒,其實它是由類似小梯形的圖形構成。

為了方便后面的操作,首先將這個矩形放到線框里操作

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

選擇矩形工具在畫板上點擊一下設置它的尺寸


用直接選擇工具框選出描點

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


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


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

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

設置旋轉角度,點擊復制

多次按Ctrl+D,也就是關聯(lián)復制的命令

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

選擇要減掉的地方

點擊鼠標右鍵,建立剪切蒙版,畫板上就只剩下我們需要的東西了。

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

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

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

我們再來新建一個圓,直徑為800px

為將它們中心對齊,選擇上面這個圓,用對其面板,選擇中心對齊

選擇這兩個圓

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

圓環(huán)就形成了

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

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

給它進行色值的改變

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

小太陽的中心就畫好啦

接下來繪制最中心的這個圓

觀察到,它是一個半透明的圓,而且置于剛剛的圓形之上

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

再繪制一個半徑為690px的圓

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

把它的顏色設置為純白色

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


為了讓它有更為柔和的變化,我們需要對滑塊進行拖動變化

進行中心對齊,再將透明度改為40%

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


上面的知識要點包括1.使用漸變工具,對圖形進行漸變填充2.使用關聯(lián)復制,制作圖標的光芒的部分
3.建立剪切蒙版,保留我們所需要的圖形【2】UI圖標深入優(yōu)化一個看似很簡單的圖標也許在你看來就是把幾個元素拼湊起來而已,實際上當你深入到設計領域之后,才會真正了解到,每一次微調(diào)對整體視覺效果的呈現(xiàn)都至關重要。將我們上次做的未優(yōu)化與最終成圖對比,看看我們還需做哪些

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

需要把中間這幾個圓設置為一個圖層

點擊創(chuàng)建一個新的圖層,給創(chuàng)建好的圖層進行命名

把這個圖層名改為"中心的圓"把第一個圖層的名稱改為"矩形",按住Ctrl鍵選擇要拖動的對象然后松開Ctrl鍵

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

"中心的圓"這個圖層置于"矩形"的圖層之上,再來為中間的LOGO新建一個圖層將它置于最頂層,將"秀"字放入"logo"這個圖層里

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

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

先來繪制中間的這個部分,可以隱約看出來像一個眼睛
教程結束,以上就是AI繪制ios美圖秀秀app圖標教程,希望能對大家有所幫助,謝謝閱讀!
相關文章

ai如何創(chuàng)建可編輯偏移文本? ai文字偏移路徑的使用教程
偏移文本或偏移路徑意味著偏離了原來的位置,雖然聽起來可能不太理想或雜亂無章,但在Illustrator中使用偏移技術處理文本可以給您帶來一些很酷的效果,詳細請看下文介紹2026-03-03
ai怎么混合兩種顏色? illustrator混合兩個色塊的顏色的方法
ai填充不同顏色的圖形重疊以后,想要將兩種顏色混合,該怎么混合顏色呢?下面我們就來看看詳細的教程2024-07-18
ai如何自定義網(wǎng)格線間距? ai參考線間距的調(diào)節(jié)方法
ai網(wǎng)格線間距默認的不是很喜歡,想要自己調(diào)整一下,該怎么調(diào)整呢?今天我們就來看看參考線調(diào)整技巧2024-05-28
ai路徑平均效果怎么用? illustrator使用平均路徑的教程
Adobe Illustrator中有一個路徑平均功能,如何使用呢?下面小編為大家演示路徑平均功能的一種使用方法2024-05-21
ai保存pdf格式出現(xiàn)多余內(nèi)容怎么解決? 去掉pdf文件多余內(nèi)容的技巧
ai保存pdf格式出現(xiàn)多余內(nèi)容怎么解決?ai中的文檔保存為pdf文件的時候,發(fā)現(xiàn)有多余內(nèi)容,該怎么操作呢?下面我們就來看看去掉pdf文件多余內(nèi)容的技巧2023-12-19
ai描邊在哪里?ai中想要設置描邊,該怎么操作呢?下面我們就來看看ai設置描邊的多種方法2023-12-19
ai原位復制怎么用?復制圖形的時候,想要原位復制粘貼,該怎么操作呢?下面我們就來看看ai原位復制快捷鍵介紹2023-12-19
ai怎么讓文字隨著路徑變形? illustrator區(qū)域文字不跟著變換方向問題的
ai怎么讓文字隨著路徑變形?選中文字后,發(fā)現(xiàn)文字不跟隨變換區(qū)域旋轉該怎么辦呢?下面我們就來看看illustrator區(qū)域文字不跟著變換問題的解決辦法2023-11-30
ai漸變色怎么調(diào)方向? illustrator將漸變顏色反向的技巧
ai漸變色怎么調(diào)方向?ai中給圖形填漸變色,想要進行反向,該怎么操作呢?下面我們就來看看illustrator將漸變顏色反向的技巧2023-11-30
Ai彩色logo怎么做反白反黑效果? ai彩色logo轉化為黑白稿的技巧
Ai彩色logo怎么做反白反黑效果?設計的彩色logo想要做黑白稿,就是反黑反白效果,下面我們就來看看ai彩色logo轉化為黑白稿的技巧2023-11-12





