• 相關文章
  • 文字效果
  • 調色教學
  • 合成教學
  • 去背教學
  • 照片後製
  • 電腦繪圖
  • 設計教學
  • 動畫教學
  • 簽名製作
  • 其他教學
  • Illustrator
  • CorelDraw教學
  • 攝影教學
  • 3DMAX教學
  • AUTOCAD教學
  • MAYA教學
  • FireWorks教學
  • flash教學
  • 繪畫教學
  • PS作品欣賞
  • 包裝設計範例
  • LOGO設計範例
  • 封面設計範例
  • 名片設計範例
  • CG繪圖設計
  • 海報設計
  • 網頁設計範例
  • PS筆刷下載
  • PS濾鏡下載
  • PS動作下載
  • PS背景下載
  • PS樣式下載




  • 【 Illustrator教學】Illustrator繪製扁平化風格的軟件圖標教程




    Illustrator繪製扁平化風格的軟件圖標教程

    這一次的教學是屬於矢量教程領域中的Illustrator教程的相關教學。

    文章出處是來自優設的矢量教程類文章,寫教學的作者是tutsplus,感謝tutsplus提供Illustrator教程的實作教學。

    教學大綱:

    今天的AI教程比較考驗大家的耐心,但是繪製一套完整的圖標和一個圖標的收穫絕對大不一樣,這篇教程提到很多AI的實用技巧,設置圖標的齒輪怎麼畫才方便?活動圖標的漸變如何變得有質感,喜歡的朋友一起來學習吧。


    Illustrator教程教學開始

    今天的AI教程比較考驗大家的耐心,但是繪製一套完整的圖標和一個圖標的收穫絕對大不一樣,這篇教程提到很多AI的實用技巧,設置圖標的齒輪怎麼畫才方便?活動圖標的漸變如何變得有質感,喜歡的朋友一起來學習吧。

    圖標展示:

    Illustrator繪製扁平化風格的軟件圖標教程

    1. Apple Watch 圖標準則

    Apple Watch 的圖標被設計成與其他iOS圖標非常相似的新潮的扁平化風格,一個引人注目的特定特徵:圖標是圓形的。 你可以下載一個非常漂亮的矢量圖標模版,讓你工作變得更容易。

    如果你對製作Apple Watch圖標的更深入的理論有興趣,我強烈推薦你去看官方的Apple Watch界面準則和規範。

    2. 創建時間,郵件,和音樂App圖標

    第1步

    首先打開其中一個圖標模版(單擊上面的鏈接即可下載。這個教程中,我們將使用80x80px的圖標模版,適用於38mm 手錶)。 轉到視圖>隱藏網格,使網格不可見,但是要確保智能參考線和對齊功能可見。

    Illustrator繪製扁平化風格的軟件圖標教程

    第2步

    讓我們創建我們第一個圖標,創建一個4×4 px的圓。 雙擊橢圓工具(L)調用彈出的選項窗口,然後前往對齊面板,使圓在畫板的水平和垂直放向上對齊。 用橙色(#FF9506)填充這個圓。

    Illustrator繪製扁平化風格的軟件圖標教程

    第 3 步

    用矩形工具(M)創造一個2 x 40 px的矩形用作秒針。用相同的橙色填充,然後把它放中心參考線上,如截圖顯示的一樣。

    Illustrator繪製扁平化風格的軟件圖標教程

    你可以通過按住 Alt 鍵的同時單擊圓對齊關鍵對象和秒針。

    Illustrator繪製扁平化風格的軟件圖標教程

    第4步

    讓我們複製秒針,使它變得更短一點然後選擇-60度,如下面顯示那樣放在參考線上。

    Illustrator繪製扁平化風格的軟件圖標教程

    現在我們將繪製分針的身體。 製作一個黑色4 x 30 px的矩形,然後通過拉動小圓圈標記使尾端變圓,利用直接選擇工具使他們最大化。(在我們這個例子中是2 px的圓角半徑)。

    Illustrator繪製扁平化風格的軟件圖標教程

    第5步

    放這個指針在參考線旁邊的位置(你可以使它小一點,這樣它適合圖標底子內部的圓形)

    Illustrator繪製扁平化風格的軟件圖標教程

    第6步

    創建另一個4 x 20 px尺寸的矩形作為我們的時針。 使其變圓,旋轉60度然後放在與分針相反的一變。

    Illustrator繪製扁平化風格的軟件圖標教程

    第7步

    最後,用橢圓工具(L)創建一個 80 x 80 px 白色的橢圓作為圖標的底子,然後放在其他所有圖標的下面。 太好了! 我們的第一個圖標就緒。讓我們轉到下一個吧。

    Illustrator繪製扁平化風格的軟件圖標教程

    第8步

    現在我們將創建郵件圖標。 首先用一個任意顏色,50 x 33 px的矩形製作一個信封。

    Illustrator繪製扁平化風格的軟件圖標教程

    用多邊形工具或鋼筆工具創建一個有3邊的三角形,並且添加2 pt的描邊。 對象>擴展使這個三角形變得彎曲。

    Illustrator繪製扁平化風格的軟件圖標教程

    第9步

    在信封底子的上面添加另一個三角形,用擴展形狀使其最下面的角變圓潤。 你可以用橡皮擦工具(Shift-E)擦去頂部和底部的矩形,因為我們不需要它們。

    Illustrator繪製扁平化風格的軟件圖標教程

    用橡皮擦工具(Shift-E)刪除頂部較低的三角形,然後在路徑查找器中合併這部分三角形。 最後,拷貝底子信封形狀(Control-C > Control-F),選擇矩形和頂部的形狀,然後用路徑查找器的交集功能切掉信封外面的部分。

    Illustrator繪製扁平化風格的軟件圖標教程

    第10步

    再次選擇矩形和條紋,然後應用路徑查找器的減去頂層功能切除這些線。

    將信封的顏色轉為白色,然後為我們的圖標添加一個圓形的底子,用線性漸變從頂部的深藍色(#2066F0) 到底部的亮藍色(#1DD4FD) 填充。

    Illustrator繪製扁平化風格的軟件圖標教程

    第11步

    我們接下來的圖標是音樂App,僅包含一個元素:一個音符標誌。 首先創建一個27 x 11 px的矩形,用直接選擇工具選中形狀左邊的錨點,然後向下拉使形狀發生偏斜。

    Illustrator繪製扁平化風格的軟件圖標教程

    第12步

    用矩形工具 (M)創建2個形狀,形成符號的“腿”。

    Illustrator繪製扁平化風格的軟件圖標教程

    第13步

    用直接選擇工具選中下面方塊的3個錨點然後使其角圓化。 然後在路徑查找器中合併這些形狀,並且利用活動角的特點使其變得圓潤。

    Illustrator繪製扁平化風格的軟件圖標教程

    第14步

    添加這個符號的第二部分,使總體形狀更加光滑圓潤。

    製作底子,填充從橙色(#FA5D3B)到粉色(#FF2968)線性漸變。

    Illustrator繪製扁平化風格的軟件圖標教程

    3. 世界時鐘,秒錶,定時器和鬧鐘圖標

    第1步

    現在我們將轉到一套與時間有關的圖標。 首先創建一個48 x 48 px的圓,在裡面創建一個小圓。 使用路徑查找器中的減去頂層功能,創建一個圓環。

    Illustrator繪製扁平化風格的軟件圖標教程

    第2步

    在第一個形狀中創建一個更小的橢圓環並且添加2個交叉線,居中對齊。

    Illustrator繪製扁平化風格的軟件圖標教程

    在這個形狀的上面部分添加一個水平線,在效果>變形>弧的幫助下與其混合。 設置水平彎曲值為-35%。

    Illustrator繪製扁平化風格的軟件圖標教程

    第3步

    在我們球的底部添加另一個彎曲線。

    用深橘色(#ff7632)和頂部亮橘色(#ff9408)的線性漸變繪製底子。

    添加一個更小的深橘色 (#e45221)圓並且藏在球形形狀的後面,給予更多的對比。

    Illustrator繪製扁平化風格的軟件圖標教程

    第4步

    為了下一個圖標秒錶,我們將使用之前創建的世界時針圖標的底子。

    從秒錶中心製作一個 8 x 8 px的橢圓,與一個 2 x 25 px的矩形對齊作為手錶的秒針。

    Illustrator繪製扁平化風格的軟件圖標教程

    第5步

    利用矩形工具 (M)在我們的秒錶的頂部添加次要的細節。 為了使秒錶的底部更圓滑,利用活動角並且設置角半徑為1.4px。

    Illustrator繪製扁平化風格的軟件圖標教程

    第6步

    讓我們轉到計時器圖標上 —— 它與秒錶有着同樣的底子。

    用矩形工具(M)在圓環頂部的中心創建一個2.5 x 13 px的條紋。 然後用多邊形工具,設置邊數為3,或者用鋼筆工具(P)畫一個三角形。放置如下圖。

    Illustrator繪製扁平化風格的軟件圖標教程

    第7步

    選中基本白色圓環和三角形,然後用減去底層功能減去圓環左邊部分。 在外面圖標的中心添加一個6 x 6 px的圓。

    Illustrator繪製扁平化風格的軟件圖標教程

    第8步

    最後,旋轉這個圓,使它上面的錨點大約向左偏45度。 用直接選擇工具(A)拉動錨點,擴大形狀。

    用點擊錨點工具 (Shift-C)轉化選中的錨點為角,因此將我們的形狀變為手錶的指針。

    Illustrator繪製扁平化風格的軟件圖標教程

    第9步

    我們這一組最後圖標是鬧鐘。 它與之前的橘色圖標具有相同的底子以及白色的圓環。 鬧鐘的指針是由矩形工具(M)製作的兩個狹窄的條紋形成的。

    Illustrator繪製扁平化風格的軟件圖標教程

    第10步

    讓我們利用橢圓工具(L)製作的圓來繪製一個鬧鐘的上部分,用剪刀工具(C)點擊側錨點的方法,把圓形劃分為2個相等的部分。 在鬧鐘底部放置半圓,然後添加兩個小”腿”在底部,完成這個圖標。

    Illustrator繪製扁平化風格的軟件圖標教程

    4. 創建天氣,相機應用圖標

    第1步

    用深藍色(#2066f0)頂部到淺藍色(#1dd4fd)底部的線性漸變填充基本的天空形狀。

    在圖標的左邊部分添加一個黃色(線性漸變從#ffc505到#fee403)的圓作為太陽。 用兩個圓形成云:一個25.5 x 25.5 px 的圓在模版中心,和一個21 x 21 px 的圓在這個圖標的右邊部分。

    Illustrator繪製扁平化風格的軟件圖標教程

    第2步

    創建一個43 x 16 px矩形並且使其角有8 px角半徑的圓潤。 對齊這個矩形和圓形,然後在路徑查找器中合併3個形狀,形成一個光滑圓潤的雲。

    Illustrator繪製扁平化風格的軟件圖標教程

    第3步

    用白色填充雲,降低透明度到90%。

    Illustrator繪製扁平化風格的軟件圖標教程

    第4步

    讓我們轉到照相機圖標。 製作一個灰色的底部圓,用底部深灰色 (#dadcdd)到頂部淺灰色 (#dadcdd) 的線性漸變填充,

    創建一個深灰色 (#3c3c3c) 圓角矩形形成相機的側影。

    在頂部添加一個小的 30 x 17 px的矩形,然後使其左上的角有7px 圓角半徑的圓潤。

    合併這些形狀,然後也使這些形狀之間的角變圓。

    Illustrator繪製扁平化風格的軟件圖標教程

    第9步

    在照相機的上端添加一個狹窄的條紋,然後用減去頂層將它減去。

    Illustrator繪製扁平化風格的軟件圖標教程

    用9 x 4 px的矩形創建快門圖標,然後放在我們模版的中央。 用鋼筆工具添加一個箭頭來指向快門,設置描邊寬度為4 pt,然後在描邊面板中使端點和邊角圓滑。

    Illustrator繪製扁平化風格的軟件圖標教程

    第10步

    為我們的照相機添加最後的細節:創建一個6 x 6 px 大小的亮黃色(#fac81b)指示燈。 此外,創建一個有4pt 描邊寬度的大圓。 如截圖顯示那樣,將這個圓放在照相機右邊角底部的位置上。

    Illustrator繪製扁平化風格的軟件圖標教程

    第11步

    對象>擴展這個大圓,轉換它為圓環。 選中圓環和照相機,然後應用減去頂層減去圓環,形成對象-玻璃。 選擇相機深灰色的部分並且按下 Control-8轉變它們為單獨組合形狀。

    Illustrator繪製扁平化風格的軟件圖標教程

    最後,利用形狀生成工具(Shift-M)或路徑查找器中的相交功能,切除我們照相機圖標外面不需要的部分。

    Illustrator繪製扁平化風格的軟件圖標教程

    5. 製作電話,短信,和遠程應用圖標

    第1步

    讓我們為電話圖標製作一個話筒。 創建一個8 x 40 px的矩形,然後到效果>扭曲>弧,選擇27%的垂直彎曲值,彎曲矩形的左邊。 在頂部和底部的話筒添加2個17 x 20 px的矩形,然後使它們的角圓潤,使形狀光滑。 在路徑查找器中合併全部話筒的部分。

    Illustrator繪製扁平化風格的軟件圖標教程

    第2步

    通過用刪除錨點工具刪除不需要的錨點,使聽筒左邊變得光滑,然後利用活動角使內部變得圓潤。

    最後,旋轉電話45度,並且把它放在圖標底部的上邊,用淺綠色 (#86fb71)到深綠色 (#0fd51c)的線性漸變填充。

    Illustrator繪製扁平化風格的軟件圖標教程

    第3步

    讓我們用之前用過的相同綠色的底子形成短信圖標。 製作一個 40 x 40 px的白色圓,然後延伸一點邊,使形狀壓扁到 48 x 40 px。

    在白色形狀的底部加一個小小的三角形,形成一個言語泡泡。 使三角形下面的角稍微變圓一點。 利用-36%垂直彎曲值的弧彎曲效果,使三角形稍微變為弧形。

    Illustrator繪製扁平化風格的軟件圖標教程

    這裡顯示了完整圖標的樣子。

    Illustrator繪製扁平化風格的軟件圖標教程

    第4步

    我們接下來的圖標是遠程應用圖標,這也是一個包含單個元素的非常簡單的圖標。

    首先,形成一個漸變的底子(從深藍色#2066f0的底部到淺藍色#1dd4fd的頂部)。 添加5.3pt寬的白色描邊,然後從內部對齊。 在我們的圖標的中心放置一個30 x 30 px白色三角形。

    Illustrator繪製扁平化風格的軟件圖標教程

     

    第5步

    最後,使三角形的角有2.5角半徑。 太好了! 這個圖標已經到位,所以讓我們轉到下一個。

    Illustrator繪製扁平化風格的軟件圖標教程

    6. 創建外出,設置和照片App圖標

    第1步

    外出圖標描繪了一個風格化的跑步者的身影。

    用頂部黃綠色(#c2ec38)和底部綠色(#a3fc3f) 的線性漸變來填充,創建一個明亮的底子。

    用鋼筆工具(P)創建分離的線作為彎曲胳膊,腿,和軀幹,添加3 pt 描邊寬度以及圓形的端點和邊角。

    增加軀幹的描邊寬度的厚度到6 pt,然後添加一個9 x 9 px圓形作為頭部。

    Illustrator繪製扁平化風格的軟件圖標教程

    第2步

    對象>擴展線條,然後用黑色填充這個形狀。

    Illustrator繪製扁平化風格的軟件圖標教程

    第3步

    設置的圖標包含一個齒輪。 繪製一個48 x 48 px的圓,切掉中間部分形,製成了一個環。

    添加3個有3 pt 描邊寬度線條,在圖標模版的中心相互連接。

    Illustrator繪製扁平化風格的軟件圖標教程

    第4步

    現在我們需要添加波紋到我們的齒軌。

    製作一個 5 x 9 px的矩形,然後使上端稍微窄一點。 使上面的角有1.6px角半徑的圓潤。 放這個波紋在齒軌的頂部和底部。

    用旋轉工具(R)選中全部波紋,雙擊旋轉工具(R)調用彈出選項窗口,然後設置旋轉值為360/18。 這種方式, Adobe Illustrator將會自動計算出18個形狀的合適值。 按下拷貝按鈕。

    Illustrator繪製扁平化風格的軟件圖標教程

    第5步

    按下Control-D多次重複我們上一個動作,添加更多波紋。 為了完成這個圖標,選擇所有波紋,轉換顏色為白色,然後將所有的波紋一起旋轉-10度。

    Illustrator繪製扁平化風格的軟件圖標教程

    第6步

    我們接下來的圖標是一個風格化的照片App。 首先創建一個20 x30 px且具有10 px角半徑的圓角矩形,這樣可以作為花瓣。

    複製花瓣,然後放其拷貝在圖標模版的底部,如下面截圖所示。

    選擇全部花瓣用旋轉工具(R)製作8份花瓣拷貝,應用 360/8角值,然後按下拷貝按鈕。

    Illustrator繪製扁平化風格的軟件圖標教程

    第7步

    按下 Control-D數次形成八瓣花。 轉換花瓣為正片疊底混合模式且降低透明度到80%。 讓我們應用喜愛的顏色到每片花瓣,從中間最上的開始順時針移動:橙色 (#fa9700),黃色(#f0e22c),綠色(#b5d558),綠松石色 (#6ec19d),藍色(#71b5e1),紫羅蘭色(#8f60c3),粉色 (#d782a4)和紅色(#ff2c2c)。

    將花放在白色的圖標底板上。

    Illustrator繪製扁平化風格的軟件圖標教程

    7. 股票,活動,存摺和日曆圖標

    第1步

    股票圖標包含一個極簡圖。 先創建一個深色(#3f3f3f)的圖標底板,然後用直線工具製作一個淺藍色(#02a6f5)3pt大小的豎線形成的圖。 把它放在模版的中間,

    添加一個藍色的小圓圈並且應用一個深灰色(#3f3f3f) 1pt 的描邊,為了使它在視覺上分隔開來。 添加另外4條線在這個圖標的兩邊,用淺灰色(#555555)的3pt 描邊 。

    對象>擴展線條,並且切除圖標底部不需要的部分,用形狀生成工具(Shift-M)或路徑查找器都可以。

    Illustrator繪製扁平化風格的軟件圖標教程

    第2步

    用鋼筆工具(P)畫一個有一個1.5pt 描邊的鋸齒狀線條,添加到圖上以結束這個圖標的製作。

    Illustrator繪製扁平化風格的軟件圖標教程

    第3步

    這個活動圖標包含3個彩色的漸變圓環。 為了形成這樣一個圓環,首先需要製作一個混合組。

    製作2個相同的6 x 7 px的矩形,其中一個粉色(#ff2b91)一個紅色(#f1281e)。選中矩形然後找到對象>混合>建立。

    你可以在對象>混合>混合選項編輯這個設置,應用順滑顏色製作一個漂亮的無縫混合。 拖動創建的混合組到筆刷面板,然後創建一個新的默認設置的藝術畫筆。

    Illustrator繪製扁平化風格的軟件圖標教程

    第4步

    創建一個深灰色 (#393839)的圓作為我們圖標的底子,然後在它的頂部放置另一個圓,用我們創建的畫筆作為描邊。 調整圓的尺寸,以便它符合圖標模版的外部邊緣。 設置描邊寬度為1 pt,然後選擇對象>擴展外觀,將筆刷描邊變為形狀。 如果需要,用鏡像工具(O)旋轉或水平地翻動形狀,以便我們有一個從左邊粉紅到右邊紅色的圓環。

    創建一個粉紅色 (#ff2b91)的小圓環,放在彩色圓環中間頂部的區域,使它符合形狀的高度,用來隱藏兩個顏色之間的聯繫。

    Illustrator繪製扁平化風格的軟件圖標教程

    第5步

    現在我們需要添加一個微妙的陰影。 你可能會注意到,這個環在我們擴展它后被分為幾個部分。 這正是我們所需要的!

    選擇圓環頂部紅色的片段,拷貝它然後粘貼在前面(Control-C > Control-F)。 在拷貝層上添加深紅色 (#a11b17)到白色的線性漸變,然後轉換為正片疊底的混合模式,因此漸變使白色的末端不可見。

    Illustrator繪製扁平化風格的軟件圖標教程

    第6步

    用相同的技術在第一個形狀的裡面創建兩個更多彩的圓環。 創建藝術畫筆從黃色(#d8ff06)和綠色(#86e402)的混合組和一個從綠松石色 (#06ffaa) 到藍色 (#06e3f9)的混合組。 添加小圓和應用柔和的陰影來完成這個圖標的製作。

    Illustrator繪製扁平化風格的軟件圖標教程

    第7步

    接下來是存摺圖標,包含4個小小的象形圖:一個信用卡,一個飛機,一個攝像機和一個咖啡杯。 這些象形圖都是簡約的,並且都由基本的形狀在路徑查找器和活動角特徵的幫助下製成的。 你可以從下面一步步的截圖看到每個象形圖標是怎樣連接而成的。

    Illustrator繪製扁平化風格的軟件圖標教程

    第8步

    這個圖標的底子由4個不同顏色的條紋構成:紅色(#ff4e46),藍色 (#439eca),綠色 (#3dca36)和橙色(#ffa02b),每個高度都是 20 px。 在形狀生成器工具(Shift-M)的幫助下創建一個默認的80×80px 圖標的圓形底子,通過選擇所有對象,同時按住Alt鍵,然後單擊不需要的部分,刪除不需要的條紋。

    Illustrator繪製扁平化風格的軟件圖標教程

    第9步

    創建一個3.5 x 3.5 px的圓,與橙色條紋的頂部相交,拷貝的同時按住Alt和Shift鍵拉動形狀。 按住Control-D,以形成圓的更多的複本。 然後,選中所有複本並且通過按Control-8轉化為組合路徑。 選中圓形和橙色的條紋,應用減去頂層功能切割出洞。

    最後,在我們圖標的中心放置我們之前創建的象形圖,對齊它們。

    Illustrator繪製扁平化風格的軟件圖標教程

    我們一套圖標最後一個是日曆圖標 它是由Helvetica Neue 字體製成的文字和一個簡單的白色圖標底子構成。

    Illustrator繪製扁平化風格的軟件圖標教程

    很好! Apple Watch主屏幕圖標已經完成!我們已經創建了總計20個組屏幕應用的圖標,使用了一些基本形狀,彎曲效果和一些技巧。 希望你能享受跟隨這個指南的過程,並且發現一些有趣的技術。

    Illustrator繪製扁平化風格的軟件圖標教程

    — —

    文章永久連結為: Illustrator繪製扁平化風格的軟件圖標教程