常見Ai 繪圖手法— Icon 創作篇 - Medium

顧名思義，「聯集」就是把幾何圖型給合併在一起，而「分割」就是將圖型切割成想要的圖案。

利用幾何工具畫出只有邊框的圓角矩形. 在進行分割前，需要先將 ... GetunlimitedaccessOpeninappHomeNotificationsListsStoriesWrite常見Ai繪圖手法—Icon創作篇學會Ai最快的方法，就是先從設定目標開始。

當然不只Ai，學習其它技能也是；那些堆在一旁、幾近塵封的室內設計與C++等書，就是這麼提醒的。

羨慕別人很會、但離自己很遠的東西，就是傷自己荷包的開始。

終究還是會發現：那麼多的我以為，只是自以為可以而已。

沒目標，就不會有動力想把它完成。

雖然聽起來好像以前沒什麼目標似的，但總不能都把蠢事給揭露出來。

轉移話題一下。

想好目標後，就能在練習過程中，了解如何使用Ai工具；累積一定經驗後，甚至能產生出適合自己且靈活的繪圖手法。

但先別管那難以體會的境界，總之，開始動手就對了！1.建立工作區檔案→新增→＊網頁／列印→就能建立繪圖區域2.幾何工具：矩形、圓角矩形、多邊形、星形等圖型「幾何工具」是創作圖型的好方法。

使用上可說相當省力。

左邊工作區裡，反黑的地方即是幾何工具利用「幾何工具」產生圖型的方式有兩種，一是排列組合，二是「路徑管理員」的應用。

更也可以兩種一起組合應用。

3.就從Icon開始練習吧就說要靈活了，當然得「幾何工具」與「路徑管理員」一起使用步驟1→幾何工具的使用&顏色搭配利用幾何工具來畫出圓角矩形，會發現預設的顏色為白與黑。

像這樣其中白色區域稱為「填色」，黑色區域是為「筆畫」；可以將「填色」想像成圖型裡的顏色，而「筆畫」則為圖型邊框的顏色。

顏色可以從右邊工作區的「色票」或「顏色」中挑選。

「色票」在這「顏色」在那顏色選好後，手機的輪廓就抵定了。

還差87%，就能完成了步驟2→圖型的排列組合接著，可以再畫出圓型、圓角矩形與矩形，並與原本的手機圖型作搭配。

手機的樣貌又更清楚了等等。

這圖型好像不在幾何工具裡沒錯。

這就是產生圖型的第二種方法－「路徑管理員」。

＊補充：按下Space鍵並移動滑鼠，就能喚出「手形」工具來移動畫面位置。

步驟3→路徑管理員的應用路徑管理員最好用的功能，莫過於「聯集」與「分割」。

顧名思義，「聯集」就是把幾何圖型給合併在一起，而「分割」就是將圖型切割成想要的圖案。

利用幾何工具畫出只有邊框的圓角矩形在進行分割前，需要先將線展開成物件圖型，這樣才有辦法進行分割。

不然可能會切割的不乾淨。

像這樣不乾不淨的分割法，其實可以應用在其它地方，但不是這次想要俐落點，就應該先展開左邊為展開前的型態，可以看到線的樣子；右邊為展開後，可以發現線已經不見了，並已轉變成幾何圖型接著，再利用工作區左邊的「線段區段工具」線是個不錯的分割工具。

先想好分割後的圖型，就可以利用「線段區段工具」來畫出線。

拿捏一下位置接著，就同時點選這兩個圖型，並使用「線段區段工具」中的分割功能。

「路徑管理員」在工作區的右邊發現線不見了，但怎麼圖型還是沒變！？這是正常的，切割完後的圖型，預設是以「群組」連接在一起；只要按右鍵取消群組，就能單獨移動切割後的圖型。

想要的圖型就切割好了接著，再從「幾何工具」中選擇多邊型，連擊兩下後就會跑出設定畫面。

邊數選擇3，三角型就跑出來了步驟4→再來一次組合應用替手機畫面加點圖型，幾何工具再次上場。

更好看了點替Icon上點光澤。

順便再複習一次「線段區段工具」。

跟真的手機有94%像差不多已進入收尾階段。

走到這步，可以發現Ai工具其實不難使用，最難的還是想像力的發揮。

最後，再替Icon上個背景與陰影，讓整個Icon更吸引人。

陰影的切割方法為了讓每個圖型能彼此對齊，可以使用「對齊」工具來作位置上的調整。

在工作區的右邊調整好後，接著再來點特效。

路徑：效果→風格化→製作陰影，介面就會跑出來了久等了~Icon！4.去哪補充想像力最快的方法，就是多看別人的作品。

除了會覺得「哇」之外，更想把自己畫的給刪了(誤)XDㄇㄞˋ點子、Pinterest都是不錯能獲得靈感的來源。

多看，就會孕育出想法；多畫，就會產生出風格。

擁有風格，才能擁有與別人不同的識別度！自己的作品也才能真正被看見。

MorefromBevisCiouFollowOnthewayoflearningvisualdesignandfront-end.Lovepodcastsoraudiobooks?Learnonthegowithournewapp.TryKnowableAboutHelpTermsPrivacyGettheMediumappGetstartedBevisCiou406FollowersOnthewayoflearningvisualdesignandfront-end.FollowHelpStatusWritersBlogCareersPrivacyTermsAboutKnowable