LOGO設計！教你用AI設計時尚網(wǎng)站LOGO(4)

來源：ifeiwu 作者：飛屋睿UIdesign

在做網(wǎng)頁設計時，難免會遇到將LOGO一并設計的時候。因為客戶往往很少拿原來的印刷版的LOGO再投入使用了，過時的設計也不符合新的網(wǎng)頁風格。因此，這也給UI設計師們一項新的挑戰(zhàn)：怎樣給網(wǎng)站設計新LOGO？

這個LOGO設計來自于最普通的幾何正圓，由于英文字母的圓滑外形，通過一些修飾，就能用圓形來打造出獨特的文字標識效果。

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

一、繪制草圖

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

二、繪制線性圖

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

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

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

運用剪刀工具，先剪掉圓的部分曲邊。剪刀工具的用法十分簡單，選中相應的路徑，點選要剪掉的曲邊部分的兩端，然后再選中這個曲邊，刪除。

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

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

三、配色

這也是我在之前就沒有進行編組的原因，因此此時我要對這個LOGO進行上色。很多人都會在制作前就已經(jīng)有了配色方案。你也可以去到專業(yè)的配色網(wǎng)站Pltts（http://pltts.me），挑選一個你認為合適的配色，
design-seeds 用圖片提供配色靈感的網(wǎng)站：http://design-seeds.com/
pltts 精選的實用配色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 每日分享一個配色給你 http://www.thedayscolor.com/

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

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

四、精修

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

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

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

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