Illustrator(AI) CS設(shè)計繪制矢量精致網(wǎng)頁運用圖標組合實例教程步驟詳解
圖標是界面設(shè)計領(lǐng)域重要的一項設(shè)計內(nèi)容,這次我們以在 2004 度中由 stardock 公司主辦的 GUI 國際奧林匹克大賽中獲全場大獎的圖標包的 The Last Order 中的一個圖標作為例子給大家講述一下圖標制作的詳細過程。
下圖是這套圖標的部分截圖。
教程中所應(yīng)用到的軟件主要有 Adobe Illustrator CS/Adobe Photoshop/Axialis Icon-workshop等。我們用Adobe Illustrator CS 進行圖標設(shè)計,并在Photoshop 中進行后期處理,最后用Iconworkshop 輸出成 .ico 格式的圖標文件。

1.打開 Adobe Illustrator CS ,選取工具欄上的圓角矩形工具,單擊畫板任意位置在彈出的窗口中開可以設(shè)定圓角曲度。(如果第一次圓角矩形長寬不合適,可以刪除,直接拖拽得到合適大?。?。

2.選中菜單 Effect/3D/Rotate 命令調(diào)出 3D 旋轉(zhuǎn)設(shè)置窗口,用于生成 3D 透視圖形(只有最新的 Illustrator CS 版 本具有此功能)。

3.調(diào)整至合適角度(如過制作一整套圖標,請記住保留設(shè)置參數(shù),以應(yīng)用于整套圖標設(shè)計保持風格統(tǒng)一)選中 Preview 可以既時的看到畫板中圖形的應(yīng)用效果。
4.可以在 Appearance 棉板里看到所應(yīng)用的 3D Rotate 效果,并可以隨時通過雙擊調(diào)出 3D Rotate 窗口進行調(diào)節(jié)。

5.調(diào)整至合適角度,使用 object 菜單下的 Expand Appearance 命令把應(yīng)用效果的圖形“打散”: 即不再具有 Appearance 的屬性。

6.選用工具欄中的白色箭頭選中我們需要的圖形用 Ctrl+c( 復(fù)制 ) Ctrl+v (粘帖)提取出來, 其余的無用圖形刪除。

7.隨后我們用漸變色給這個圖形上色,用 Gradient 面板設(shè)計漸變顏色,用 Swatch 面板調(diào)整顏色,這里采用的是線型(linear)漸變,假設(shè)光源來自左上角,這將是后面所有圖標上色的依據(jù)。

8.把此圖形復(fù)制一遍,按圖中方式排列,同時選中兩個圖形,然后調(diào)出 Pathfinder 面板, 使用 Subtract form sharp area 制作出此圖形的立體厚度。然后可以點擊 Expand 按鈕展開此合并圖形。


21.使用 Flie 菜單下的 Save for web 命令,在彈出的窗口中選用 PNG 格式輸出(選擇透明輸出: Transparency )


22.隨后在 Photoshop 中打開剛才輸出的 PNG 文件,在其下方新建一個圖層填充為白色以為圖標加入陰影時便于看到效果)

23.雙擊圖標圖層在 Layer Style 中為其增加了一個陰影效果。以增強圖標再生成后在各種色彩桌面上的識別率。
24.隨后刪除白色輔助圖層,效果如下。

25.新建一個圖層,使之與圖標圖層連接,使用 Ctrl+E 合并連接圖層把效果應(yīng)用于圖標,隨后保存這個 PNG 文件。

26.使用 ICONWORKSHOP 打開這個 PNG 文件,使用 Save Icon Form Image 按鈕轉(zhuǎn)換 PNG 圖象為 ICO 文件。

27.選擇你要輸出的 ICO 的文件規(guī)格。

28.存儲后的 ICO 格式文件你就可以直接通過 Window 或第三方圖標管理軟件瀏覽了(推薦使用 Microangelo )。

相關(guān)文章
- 這篇AI快速繪制房車圖標教程是我剛剛學(xué)習過的,教程僅僅使用了簡單的七個步驟就繪制出了一個房車的造型,原作者的靈感來源是《絕命毒師》中的房車造型2013-09-26
- 這篇AI創(chuàng)建規(guī)則圖標技巧教程對于正在學(xué)習UI設(shè)計的朋友們來說非常有用,我最近也在學(xué)習UI設(shè)計,APP圖標最近挺火,不與時俱進不行了2013-09-19
Illustrator(AI)模仿制作逼真的mediaplayer11媒體播放器圖標實例教程
mediaplayer11.0 是微軟媒體播放器的最新版本, 作為VISTA 系統(tǒng)自帶的播放工具。它的圖標質(zhì)感很強。下面我們來使用AI做mediaplayer11.0 的圖標2013-07-31Illustrator(AI)設(shè)計繪制精致可愛的矢量三維圖標實例教程
本章教大家利用Illustrator繪圖軟件中的三維功能來設(shè)計繪制三維圖標,當然以此類推可以制作更多中的三維圖片2013-07-26Illustrator(AI)設(shè)計制作卡通立體效果的小熊圖標實例教程
本章給大家分享用Illustrator制圖軟件設(shè)計制作立體的卡通效果的小熊圖標圖片,希望大家喜歡2013-07-10
在設(shè)計一個圖標之前,在腦海中應(yīng)有個大體的意象,意象形成后,可以通過畫些草稿圖來具象圖標2013-07-10- 本教程使用AI制作質(zhì)感超炫的紅色立體@圖標,教程不算難,適合初學(xué)者學(xué)習,喜歡的朋友可以一起來學(xué)習吧2013-05-31
- Hi all! 今天很高興請到了我們可愛的太空熊做為麻豆,他將會協(xié)助我一起為大家展示一下卡通角色造型圖標的設(shè)計流程與方法。OK,廢話不多說,我們先來看一下最終的效果圖。2013-04-03
- 這篇AI實例教程將向朋友們介紹用AI繪制卡通士兵圖標的方法,這是一篇國外翻譯教程,學(xué)習制作難度適中,適合有一定AI基礎(chǔ)的朋友學(xué)習,繪制完成的效果也很漂亮,喜歡的朋友快2013-02-07

Illustrator使用3D工具和參考線來創(chuàng)建立體的圖標
當我們在做一些立方造型的時候會用到一些帶顏色的參考線,來保持個圖標形體間的大小相似。2013-02-06



