AI進階教程!手把手教你繪制20個Apple Watch的圖標 - 特级毛片www,色综合天天综合网,国产成人综合亚洲 - UISDC

AI進階教程!手把手教你繪制20個Apple Watch的圖標

2016/06/21 30976評論區

ai-20-apple-watch-icons-1

編者按︰今天的AI教程比較考驗大家的耐心,但是繪制一套完整的圖標和一個圖標的收獲絕對大不一樣,這篇教程提到很多AI的實用技巧,設置圖標的齒輪怎麼畫才方便?活動圖標的漸變如何變得有質感?練個手你就知道了!

圖標展示︰

apple-watch-icons

1. Apple Watch 圖標準則

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

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

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

第1步

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

open the 38 mm 80 px icon template

第2步

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

place a 4x4 px even circle in the centre of the template

第 3 步

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

add a second hand with the rectangle tool

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

align to the key object

第4步

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

add the base for the minute hand

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

第5步

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

place the hand along the guide line

第6步

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

create the hour hand

第7步

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

create the circle icon base

第8步

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

make the rectangle envelope base

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

add a triangle and expand it

第9步

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

add another triangle at the top

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

cut off the unneeded shapes with intersect

第10步

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

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

finish the mail icon

第11步

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

form the rectangle top of the note

第12步

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

Add details to the note with the rectangles

第13步

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

unite the shapes and make the corners rounded

第14步

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

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

make the overall shape more smooth and add the icon base

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

第1步

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

form the base with Minus Front function

第2步

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

create a ring inside the base of the globe

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

use Arc Warp Effect to bend the line

第3步

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

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

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

make the orange base for the globe icon

第4步

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

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

form the second hand of the stopwatch

第5步

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

add minor details and make the button rounded

第6步

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

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

add a triangle on top of the timer icon base

第7步

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

cut out the unneeded part of the timer icon

第8步

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

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

form the second hand of the timer icon

第9步

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

form the hands of the clock

第10步

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

add details to the top of the alarm

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

第1步

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

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

make a sun and start forming the cloud for the weather icon

第2步

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

add the bottom part of the cloud with the rectangle tool

第3步

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

make the cloud white and semi-transparent

第4步

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

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

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

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

form the camera base from the rounded rectangle

第9步

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

use Minus Front to make a dividing stripe

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

Form the shutter icon

第10步

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

Add the final details to our camera

第11步

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

cut out the object-glass in the camera

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

cut off the unneeded parts to finish up with the icon

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

第1步

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

form the handset base

第2步

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

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

edit the handset outlines

第3步

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

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

form a speech bubble from the ellipse and triangle

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

message icon

第4步

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

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

form the base and triangle shape

第5步

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

make the corners of the triangle rounded

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

第1步

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

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

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

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

create separate lines with the pen tool

第2步

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

fill the shapes with black color

第3步

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

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

form the cog base

第4步

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

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

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

add the ripples to our cog

第5步

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

rotate the objects and fill them with white

第6步

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

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

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

forming the petal from a rectangle

第7步

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

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

from the 8 petal flower and color it

7. 股票,活動,存折和日歷圖標

第1步

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

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

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

form the lines of the diagram

第2步

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

add a zigzagged line for the graphic

第3步

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

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

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

create the art brush from the blend group

第4步

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

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

apply the brush and expand the shape

第5步

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

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

add shadow to the ring

第6步

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

create more art brushes from blends

第7步

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

create pictograms from basic shapes

第8步

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

create a striped icon base

第9步

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

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

add perforation to the orange stripe and place the pictograms

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

calendar icon with font

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

Final result

「儒墨堂字體設計好文最新集錦」

灰晝大大的字體推薦︰

字體排印指南︰

谷歌免費字體網站︰

原文地址︰

yestone-uisdc-2

【特级毛片www,色综合天天综合网,国产成人综合亚洲 原創资讯 投稿郵箱︰02-8993-5275@qq.com】

================關于特级毛片www,色综合天天综合网,国产成人综合亚洲================
“特级毛片www,色综合天天综合网,国产成人综合亚洲“是國內人氣最高的網頁設計師學習平台,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書︰史上最全的設計師圖書導航︰。
設計微博︰擁有粉絲量130萬的人氣微博 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航︰全球頂尖設計網站推薦,設計師必備導航︰

儒墨堂大課堂

非特殊說明,本文版權歸原作者所有,轉載請注明出處
本文地址︰http://www.rumotanartist.com/ai-20-apple-watch-icons

發表評論 加載中....

評論加載中....

uisdc

評論區都快餓癟了,看看我期盼的小眼神...

版式設計 交互設計師 界面設計 排版布局 職場 設計師干貨 儒墨堂專訪 儒墨堂大課堂 設計達人 配色 視覺設計 web前端開發 素材下載 AI教程 設計流程 設計理論 神器下載 字體下載 設計師專訪 psd下載 設計規範 用戶體驗設計 海報設計 平面設計 設計趨勢 動效設計 logo設計 圖標設計 ICON 產品設計 神器推薦 App設計 字體設計 職場規劃 酷站推薦 交互設計 ui設計 優秀網頁設計 設計師職場 ps技巧 酷站 用戶體驗 PS教程 網頁設計 經驗分享

您還沒有登錄

儒墨堂啟用更安全省心的 微信掃碼登錄

微信掃碼

300萬設計師聚集地!特级毛片www,色综合天天综合网,国产成人综合亚洲是極具人氣的設計師平台
2012年成立至今,一直專注于設計師的學習成長交流

特级毛片www|色综合天天综合网|国产成人综合亚洲

打開微信,掃碼分享
學設計 特级毛片www,色综合天天综合网,国产成人综合亚洲 在這里