@飛屋睿UIdesign?：一直有很多同學(xué)認(rèn)為黃金分割很難學(xué)，運(yùn)用起來(lái)也并沒(méi)有嚴(yán)格邏輯可循。然而，我們今天根據(jù)黃金分割矩形，就能繪制出較完美的圖標(biāo)造型。對(duì)于很多不知道怎么運(yùn)用黃金分割的小伙伴，趕快學(xué)起來(lái)！

一、用圓形搭建基礎(chǔ)形

STEP 01

打開(kāi)AI，新建文檔，文檔大小可以參考我的設(shè)置。

STEP 02

根據(jù)黃金分割矩形，在每個(gè)矩形中繪制不同的圓。這些不同的圓形的大型比例剛好符合黃金分割的法則。我們簡(jiǎn)單將這些圓稱(chēng)為圓A、圓B、圓C、圓D……，方便接下加以區(qū)分。

STEP 03

利用這些不同的圓進(jìn)行基礎(chǔ)形的搭建。什么是基礎(chǔ)形呢？我們?nèi)搜蹖?duì)于身邊一切事物形狀特點(diǎn)的觀察，所有的事物都可以簡(jiǎn)化成為簡(jiǎn)單幾何形的組合。這些簡(jiǎn)單的幾何形即是造型的基礎(chǔ)形。

根據(jù)雞的造型特點(diǎn)，我們利用圓形來(lái)給這個(gè)圖標(biāo)作出基礎(chǔ)形搭建。在繪制基礎(chǔ)形時(shí)，最終的目標(biāo)效果要始終放在大腦中，這樣才能保證基礎(chǔ)形的結(jié)構(gòu)的合理性。

用1個(gè)圓A，以及4個(gè)圓B，先搭建最初步的簡(jiǎn)單基礎(chǔ)形。這部分是雞的身體和尾巴的部分。由于雞的尾巴是其重要的識(shí)別特征，因此稍微夸大一點(diǎn)并不未過(guò)。

造型中的有一些關(guān)鍵的節(jié)點(diǎn)，它們扮演著銜接各個(gè)身體組成部分的作用，因此這些部分必須要幾個(gè)關(guān)鍵的形狀相交于某一點(diǎn)，才能合理的完成過(guò)渡。

STPE 04

繼續(xù)加入2個(gè)圓C，其中一個(gè)圓與之前的圓相交。這一步所繪制的是雞身的部分。

STEP 05

接下繪制雞頭的部分，這部分稍微有點(diǎn)復(fù)雜。再繼續(xù)增加2個(gè)圓D。

STEP 06

再為其增加線條輔助造型，并用最小的黃金分割矩形中的圓來(lái)組成雞頭。

到此，我們的基礎(chǔ)形就搭建完畢了。為了保持黃金分割的比率，決不能輕易去改動(dòng)某一個(gè)形狀的大小。整個(gè)造型都要保持同步縮放比例。

二、“剪”出雞形

這時(shí)的基礎(chǔ)形還處于未加工狀態(tài)，因此，我們需要將多余的部分“剪掉”。

STEP 07

全選整個(gè)基礎(chǔ)形，然后利用“形狀生成工具”對(duì)其進(jìn)行修剪，按住ALT鍵點(diǎn)擊形狀時(shí)工具圖標(biāo)會(huì)從加號(hào)變?yōu)闇p號(hào)，這時(shí)就可以直接點(diǎn)擊圖形的線條進(jìn)行刪減處理。先剪出雞身和雞尾的部分。在刪減的過(guò)程中，也許根據(jù)實(shí)際情況需要要微調(diào)基礎(chǔ)形的某些形狀位置，這些都是靈活的，在處理時(shí)要非常留心整體造型的效果。

STEP 08

再剪出雞頭的部分，雞頭的部分不好處理的地方是它的線條稍微復(fù)雜，因此在細(xì)微的地方一定要放大了細(xì)節(jié)進(jìn)行刪減處理。刪除的是大多數(shù)，剩下的才是精華。刪減完成后利用鋼筆工具繪制出線條表現(xiàn)雞喙和雞腳。

STEP 09

雞的形狀就繪制完成了，這時(shí)我們?cè)贆z查某些未連接起來(lái)的錨點(diǎn)，以便讓線條更流暢完美。也繼續(xù)刪減還未完全清理干凈的線條。

三、為圖標(biāo)填色

圖標(biāo)可以有線性圖標(biāo)，也可以是帶有色彩的圖標(biāo)。這里我們將色彩效果一并完成。

STEP 10

在前面我們?yōu)榱颂幚砭€條的方便，線條的粗細(xì)值為2px，這時(shí)我們需要加粗線條以便讓畫(huà)面看起來(lái)更有力。線條加粗到4px，也就是2倍后，整個(gè)圖案就更顯“可愛(ài)”。

STEP 11

選中整個(gè)圖案，然后進(jìn)入【對(duì)象>擴(kuò)展】，擴(kuò)展外觀后，線條轉(zhuǎn)換成為了填充圖形。進(jìn)入【路徑查找器】，點(diǎn)擊形狀模式的第一個(gè)圖標(biāo)即“聯(lián)集”。這時(shí)，要為其填色就變得非常容易。

STEP 12

運(yùn)用實(shí)時(shí)上色工具，對(duì)目前的圖形“線條”（注：這里已經(jīng)變?yōu)榱丝商畛涞膱D形）填充顏色，我在這里選擇了深褐色。將前景色設(shè)置為某種色彩，實(shí)時(shí)上色工具就會(huì)在所點(diǎn)擊的位置填充某色彩。比如我在這里為雞頭的部分填充紅色。

STEP 13

我的配色方案如下。這是最為簡(jiǎn)單的純色搭配。

最終效果如下：

后記

很多圖標(biāo)都可以采用簡(jiǎn)單幾何進(jìn)行造型，而造型時(shí)能利用黃金分割比率也許能產(chǎn)出更好的效果。但黃金分割并不是萬(wàn)能公式，也不是百試百靈，這需要不斷在實(shí)踐中積累。黃金分割也許是個(gè)神話，也許不是。

「用一個(gè)案例教你學(xué)東西系列」

1. 智能對(duì)象丨《用一個(gè)實(shí)戰(zhàn)教程，讓你學(xué)會(huì)智能對(duì)象》
2. 直方圖丨《用一個(gè)后期教程，幫你學(xué)會(huì)利用直方圖破解圖像的方法》
3. 圖層樣式丨《做一個(gè)實(shí)戰(zhàn)教程，讓你學(xué)會(huì)圖層樣式9大技能》
4. 設(shè)計(jì)流程丨《用一個(gè)實(shí)戰(zhàn)案例，幫你認(rèn)識(shí)完整的設(shè)計(jì)流程》
5. 總監(jiān)思考方式丨《用一個(gè)簡(jiǎn)單的體重記錄功能，揭秘UI設(shè)計(jì)總監(jiān)的思考過(guò)程》
6. 交互思考方式《用一個(gè)文本框，讓你學(xué)到交互設(shè)計(jì)師的邏輯思考方法》
7. 交互面試題丨《用一個(gè)框架，幫你學(xué)會(huì)這個(gè)最常見(jiàn)的交互面試題》

原文地址：ifeiwu

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專(zhuān)注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量180萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com