編者按：@飛屋睿UIdesign?同學(xué)最近接到一個任務(wù)，給一個網(wǎng)站設(shè)計新LOGO。任務(wù)完成后，他將這次設(shè)計LOGO的過程分享出來，學(xué)習(xí)如何從最普通的正圓里變化出獨特的LOGO，還有特殊的配色技巧，一步一步跟著做起來吧。

前言

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

2015年，飛屋睿的教程開啟了關(guān)于logo設(shè)計的系列，對于圖形的熱愛一直都很赤忱，鮮有佳作，但總是要努力。不管怎樣，我把自己所學(xué)到的再分享給大家，最希望看到的就是大家能從中受益。

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

（提示：文章末尾提供了最終效果圖的EPS文檔下載）

一、繪制草圖

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

二、繪制線性圖

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

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

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

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

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

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

三、配色

這也是我在之前就沒有進(jìn)行編組的原因，因此此時我要對這個LOGO進(jìn)行上色。很多人都會在制作前就已經(jīng)有了配色方案。你也可以去到專業(yè)的配色網(wǎng)站Pltts（http://pltts.me），挑選一個你認(rèn)為合適的配色，也可以來我的收藏夾配色系列（www.ifeiwu.com）看看其他的配色網(wǎng)站是否有你喜歡的配色方式。下圖是我在配色網(wǎng)站里所選擇的配色。

如果有特別喜歡的圖片或者畫作，也可以利用這個方法來配色：《配色弱有救了！教你利用圖片創(chuàng)建獨有的色彩方案！》

想擁有自己的私人圖庫的同學(xué)見右邊：《新年圖庫第一波！20個無版權(quán)限制的高清圖庫特供網(wǎng)站》

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

四、精修

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

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

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

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

添加漸變填色，我們進(jìn)入到外觀面板。面板中增加一個新填色，選擇漸變色板。

對圖形邊緣的瑕疵進(jìn)行修飾，我們用直接選擇工具。這時可以利用路徑查找器將整個圖形修邊后，再進(jìn)行合并，圖形的輪廓會變得平滑。

再對圖形的部分做出點陰影的修飾。選中需要添加陰影的部分形狀，然后復(fù)制一份。進(jìn)入【效果>模糊>高斯模糊】，模糊參數(shù)在此我設(shè)置的是3.5，根據(jù)圖形的大小數(shù)值會有所不同。模糊后，將陰影放置于這個形狀的下方。

另外一個部分我也這樣做，不過由于剛剛我已將這個圖形合并過，所以這里我可以復(fù)制一份后，用一個矩形去裁切這個原有的形狀。讓它只保留住陰影的部分。陰影做好后，還可以適當(dāng)改變下透明度或者形狀，略微旋轉(zhuǎn)等。

最后，效果圖完成，放上其他可以繼續(xù)添加的元素。

后記：

盡量放大圖形進(jìn)行精修，矢量圖的平滑的美感就能得到完美展現(xiàn)。這個用幾何圖形來拼湊的圖案就把它放進(jìn)你的靈感庫吧。

最終效果圖EPS文檔：微盤下載

【飛屋同學(xué)的精品教程合集】

設(shè)計感超強(qiáng)的多邊形背景輕松完成！
《AI新手教程！教你簡單快速地將圖片變成多邊形背景》

最迎合IOS 7的毛玻璃背景輕松完成！
《PS新手教程！教你創(chuàng)建超簡單的炫彩背景》

私人收藏的免費高清大圖輕松找到！
《私家好貨！設(shè)計師的高清圖庫收藏夾（附使用技巧）》

原文地址：ifeiwu
作者：@飛屋睿UIdesign

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

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量89萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com
官方微信：想在手機(jī)上、被窩里獲取設(shè)計教程和各種意想不到的"福利"嗎？添加優(yōu)設(shè)哥微信號：youshege