LOGO設(shè)計(jì)！教你用AI設(shè)計(jì)時(shí)尚網(wǎng)站LOGO(4)

來(lái)源：ifeiwu 作者：飛屋睿UIdesign

在做網(wǎng)頁(yè)設(shè)計(jì)時(shí)，難免會(huì)遇到將LOGO一并設(shè)計(jì)的時(shí)候。因?yàn)榭蛻敉苌倌迷瓉?lái)的印刷版的LOGO再投入使用了，過(guò)時(shí)的設(shè)計(jì)也不符合新的網(wǎng)頁(yè)風(fēng)格。因此，這也給UI設(shè)計(jì)師們一項(xiàng)新的挑戰(zhàn)：怎樣給網(wǎng)站設(shè)計(jì)新LOGO？

這個(gè)LOGO設(shè)計(jì)來(lái)自于最普通的幾何正圓，由于英文字母的圓滑外形，通過(guò)一些修飾，就能用圓形來(lái)打造出獨(dú)特的文字標(biāo)識(shí)效果。

（提示：EPS文檔下載鏈接: http://pan.baidu.com/s/1eQJ6tzk 密碼: xh3z ）

一、繪制草圖

一般而言，LOGO設(shè)計(jì)前，除了先要將其要傳達(dá)出的信息理解透徹外，還要在草稿紙上，反復(fù)嘗試各種形式。我將這個(gè)過(guò)程稱之為“找感覺”。我們沒有辦法憑空就能設(shè)計(jì)出最優(yōu)的版本，那么前面試錯(cuò)的過(guò)程尤為重要。

二、繪制線性圖

草圖其實(shí)只是一個(gè)前期的概念化的過(guò)程，細(xì)節(jié)則放到實(shí)際制作過(guò)程中去表現(xiàn)。在此，我省略了草圖繪制的過(guò)程。

打開AI軟件，新建一個(gè)文檔，800px*600px。由于是矢量圖形，因此大小可以任意。

使用橢圓工具，畫出一個(gè)80px*80px的正圓。這里點(diǎn)選橢圓工具后，在畫筆上雙擊兩下就能彈出橢圓工具對(duì)話框，高度和寬度設(shè)置為相應(yīng)的數(shù)字，點(diǎn)擊確定即可。然后將這個(gè)圓，按住ALT鍵，復(fù)制7份，排列成下圖的形狀。

運(yùn)用剪刀工具，先剪掉圓的部分曲邊。剪刀工具的用法十分簡(jiǎn)單，選中相應(yīng)的路徑，點(diǎn)選要剪掉的曲邊部分的兩端，然后再選中這個(gè)曲邊，刪除。

使用鋼筆工具，在已有的圓形路徑上對(duì)其中一些部分添加一些路徑，讓圓形更傾向于字母的外形。

選中所有的路徑，然后將描邊擴(kuò)大到20pt。

三、配色

這也是我在之前就沒有進(jìn)行編組的原因，因此此時(shí)我要對(duì)這個(gè)LOGO進(jìn)行上色。很多人都會(huì)在制作前就已經(jīng)有了配色方案。你也可以去到專業(yè)的配色網(wǎng)站Pltts（http://pltts.me），挑選一個(gè)你認(rèn)為合適的配色，
design-seeds 用圖片提供配色靈感的網(wǎng)站：http://design-seeds.com/
pltts 精選的實(shí)用配色http://pltts.me/
coleure 超美而又好用的配色板，可以下載配色哦！https://www.coleure.com/
colourlovers 配色愛好者們的社區(qū) http://www.colourlovers.com/
neilorangepeel CSS的色彩值和色彩名 http://colours.neilorangepeel.com/
adobe color CC Adobe的在線配色工具 https://color.adobe.com/zh/create/color-wheel
thedayscolor 每日分享一個(gè)配色給你 http://www.thedayscolor.com/

下圖是我在配色網(wǎng)站里所選擇的配色。

開始上色的時(shí)候，會(huì)將現(xiàn)有的曲邊再分拆，這時(shí)，依然可以選擇剪刀工具，只是不要再刪除。另外需要相應(yīng)調(diào)整字母與字母的疊放順序，比較快捷的方式是按住ctrl+[]來(lái)進(jìn)行疊放。經(jīng)過(guò)上色修飾后的效果如下。

四、精修

或許這樣的排列顯得不夠特別，那么，讓我們?cè)噲D將這些字母靠緊一點(diǎn)，讓它們有種擁擠的感覺。甚至有些可以穿過(guò)對(duì)方，營(yíng)造一種交織的狀態(tài)。選中相應(yīng)的字母，然后用鍵盤的左右鍵就能控制其左右移動(dòng)，這個(gè)過(guò)程當(dāng)中，可能會(huì)遇到字母的部分之間的疊放順序也會(huì)不一致，這沒有關(guān)系。遇到疊加部分，我會(huì)用剪刀工具修剪掉多余的部分，你也可以參考我的做法。

當(dāng)已經(jīng)確定好位置后，我們就選中整個(gè)圖形，進(jìn)入【對(duì)象>擴(kuò)展】，將我們的描邊變?yōu)榱颂畛洹?/p>

這時(shí)，我想要為上圖中的兩個(gè)字母（黃綠色）改為漸變填色。這時(shí)，大家會(huì)發(fā)現(xiàn)由于這個(gè)部分已經(jīng)拆為好多小的部分，疊加的次序也不盡相同，如果直接給它們編組，疊放次序就變得一致，而疊放次序的改變就會(huì)讓我們的圖形發(fā)生改變。但如果不編組，圖形要添加一個(gè)漸變填色也是非常困難的事。

這里，我獻(xiàn)上我的解決辦法，當(dāng)然，你的辦法或者更巧妙。我將整個(gè)圖形選中后，用ctrl+shift+F9調(diào)出路徑查找器，點(diǎn)擊“分割”，也就是左下的那個(gè)小圖標(biāo)。這樣，我就將這個(gè)圖形四分五裂了，在我們要添加漸變的這個(gè)部分里，將疊放到底部被遮擋的部分拋棄，將看得見的部分選擇之后，再編組，編組后的圖形，點(diǎn)選路徑查找器中的合并（即下排左邊開始第三個(gè)小圖標(biāo)）。這樣，添加漸變填色就不在話下了。