Illustrator CS設計精美質感圖標


. {% |. j8 o& x% Y利用 Adobe Illustrator CS 進行圖標設計並在 Photoshop 中進行後

期處理,用 Iconworkshop 輸出 .ico 格式的圖標文件。圖標是界面

設計領域重要的一項設計內容,這次以在 2004 度中由 stardock

公司主辦的 GUI 國際奧林匹克大賽中獲全場大獎的圖標包的

The Last Order 中的一個圖標作為例子給大家講述一下圖標制作的

過程。下圖是這套圖標的部分截圖。教程中所應用到的軟件主要有

Adobe Illustrator CS/Adobe Photoshop/Axialis Icon-workshop

  a9 \/ C4 s5 n8 H6 e

) m! U  T0 h, U# a  R2 h7 l0 F

1.打 AdobeIllustrator CS ,選取工具欄上的圓角矩形工具,單擊

畫板任意位置在彈出的窗口中開可以設定圓角曲度。(如果第一

次圓角矩形長寬不合適,可以刪除,直接拖拽得到合適大小)

* Z2 ^) d7 G! W8 D1 A$ M

; O' _! l! N+ F, z5 s+ s


; i6 x) }+ E: B1 a  Y4 g0 b


" ]0 b3 @2 A" L8 K" Z2.選中菜單 Effect/3D/Rotate 命令調出 3D 旋轉設置窗口,用於

生成3D 透視圖形(只有最新的 Illustrator CS 版 本具有此功能)


+ m# L( b9 g% r: l: k: u" N, F* _0 d- N: i6 y

2 c+ p6 s' v: A% M' w. E

3.調整至合適角度(如過制作一整套圖標,請記住保留設置參數

,以應用於整套圖標設計保持風格統一)選中 Preview 可以既時的

看到畫板中圖形的應用效果。


8 l( B: @. y' e- J( Y0 {! d+ [0 ]


& ^2 K5 A; }1 s$ F# z. @

4.可以在 Appearance 棉板裡看到所應用的 3D Rotate 效果,並

可以隨時通過雙擊調出 3D Rotate 窗口進行調節。

5 c! U4 x$ A9 R# U( z


* P! n' i9 m8 K

5.調整至合適角度,使用 object 菜單下的 Expand Appearance

命令把應用效果的圖形“打散”: 即不再具有 Appearance 的屬性。


" ]: z$ _: ~6 j! w+ w1 K/ j

! u4 ^2 k: d: N8 i' c8 j7 I* B

$ n/ V6 B# f3 o7 N1 f

6.選用工具欄中的白色箭頭選中我們需要的圖形用 Ctrl+c ( 復制 )

Ctrl+v (粘帖)提取出來, 其余的無用圖形刪除。


% O, v; k. W, f8 I6 b( f

* t( I  F6 m- \

3 W# M6 Z. h# ]% Z, |+ l
7.隨後我們用漸變色給這個圖形上色,用 Gradient 面板設計漸變

顏色,用 Swatch 面板調整顏色,這裡采用的是線型(linear)漸變

,假設光源來自左上角,這將是後面所有圖標上色的依據。

" e# ~6 O9 ~& D3 z3 R

* G# s% U2 I0 y1 z" \* u: i4 y

8.把此圖形復制一遍,按圖中方式排列,同時選中兩個圖形,然

後調出 Pathfinder 面板, 使用 Subtract form sharp area 制作出此

圖形的立體厚度。然後可以點擊 Expand 按鈕展開此合並圖形。

# _& N# b* F3 C1 Y


  G* ^# |+ B/ L

9 隨後我們給這個圖形也上色,同樣使 G radient 面板,在這裡我

采用的圓行漸變模式。

" E/ y! u3 ?- f! L+ V


6 o, R$ j8 \. l9 @2 F6 P) v* i7 }

10.這一步我們准備為這個“面板”增加一些高光。先復制一個同樣

的圖形填充為白色置於此“面板”下方。

+ }& ?# [: z: m( f6 ?/ ?


# ^6 l7 T6 q  E' ]

11.隨後再復制一個同樣的圖形置此“面板”上方,並適當縮小一些

,采用黑白兩色線性漸變填充。


( y" j% \1 ~8 R2 H# o/ R

. f. W8 S: B, C6 S% K( Z. b

8 d$ x' h$ T/ J+ N# g: Q8 x

12.隨後同時選中此黑白漸變圖形以及下面的“面板”圖形,打開

Transparncy 面板,點擊面板右下方的小箭頭在彈出菜單中使 用

Make Opacity Mask


1 s( ]) j& r$ ?9 G3 M! c

3 L! _; t" o* m# w

13.同時取消 Clip 選中狀態,並勾選 Invert Mask 選項,這樣我

們就為這個“面板”圖形增加了一個透明蔗遮罩,在這種狀態下,黑

白漸變圖形(已被作為 Opacity Mask 中的圖形)黑色部分表示了

被遮物體(面板)的透明部分,所以剛才我們為“面板”下方添加的

同樣大小的白色圖形是為了怕背景是有色的或是下方還會有其他物

體從透明的“面板”透出。編輯 Opacity Mask 中的物體需要點擊

Transparency 面板中的 Opacity Mask 區域再進行編輯。

, D# W. M1 k1 z% e. ^6 _

8 u6 K0 |6 f0 B$ z" z% Q2 Q

* m' c& u5 F7 ^8 S% p0 V6 ?

14.下面開始為這個面板添加一個屏幕。復制一個圖形置於 “面板”

上方,大小如圖,也采用線性漸變,因為光照方向原因。注意深

色和淺色的方向和“面板”方面:我們在這裡做個凹槽效果。

4 C- p5 s* ?6 ^1 \( P


, {4 F+ [! ^$ R) o

( v. }1 V$ B$ e3 m* z

15.如果理解了透明遮罩的原理,這一步對你非常簡單,和上面

給“面板”加高光一樣首先復制白色底色以及藍色面板,隨後用黑白

色漸變圖形制作透明遮罩效果,各圖形層次如圖所示。

7 l9 d- r  o/ {; |0 a


( u) I( g) r) J& C/ \: ~

6 y* a" d$ ~0 r, l* U

16.藍色面板的色彩填充我采用的圓形填充,如圖所示。

$ I" g1 R9 v* G% Z4 G4 }- W" X! J0 ^

* A7 T( K) {. N9 y) h# W


! @2 ~* Q. U& {/ K$ X

17.下面為這個基本成型的平板電腦增加更多細節,左邊的圖形

,以及右邊的三個凹槽,這裡需要注意的是所有圖形我都復制了

兩遍,下面的圖形填充白色並向右下方位移若干像素,是為了體

現凹槽的高光。


2 w: x: g$ _- X/ M& T- w+ }6 n


* M" q, E4 H+ u

18.下面我們來制作凹槽上面的按鈕,雖然面積很小,也要體現

出高光的漸變,我在這裡采用了 Blend 混合來制作著兩個按鈕。

雙擊 Blend Tool 圖標可以調出 Blend 混合參數面板。選取工具欄

目中的 Blend Tool ,單擊混合的第一個圖形,隨後點擊第二個圖

形完成混合。

& E, H) ]# V( t3 n. _4 Y1 T


4 \0 v, u$ ]; h


9 i9 `2 t- |! n, D1 K, A

19.用鋼筆工具以及各種標准圖形的組合完成下面的圖形,使之

組合成為電腦上的其他各個元素(綠色按鈕同樣采用 Blend 混合

完成)

& e( |4 k0 S; @' z4 F

" P2 ]# k8 S5 l2 L  _: k

20.這樣我門完成了這個圖標的創建工作,隨後作的是輸出。繪

制一個 128 X 128( 單位:像素 ) 的正方行,精確的圖形調整可以

在 Transform 面板中完成,隨後是在 Transparency 面板中將 Opacity

值調整為 0%


( A- `7 ~$ Y) g- V# e  ~# c


" y2 k2 s/ [/ r: B4 H+ L) o


7 b7 A" o; ?! `% f) v * [. L6 r% A- K
' @  t% e& @( B( |

21.使用 Flie 菜單下的 Save for web 命令,在彈出的窗口中選用

PNG 格式輸出(選擇透明輸出: Transparency )


% O+ l* `& ?: J7 C1 c


: r9 a: p. M6 _% g; p

22.隨後在 Photoshop 中打開剛才輸出的 PNG 文件,在其下方新

建一個圖層填充為白色以為圖標加入陰影時便於看到效果)

! {0 i. v" v! |1 _* g


: k9 e, o  r# f( u% L& p7 |


# t  g4 }% v, g! S( n5 _

23.雙擊圖標圖層在 Layer Style 中為其增加了一個陰影效果。以

增強圖標再生成後在各種色彩桌面上的識別率。

  J6 ]4 ], N7 L/ {5 ?

$ X1 L( {& c% F) S1 W  R


5 j  W* r6 X2 {; U, b

24.隨後刪除白色輔助圖層,效果如下。


, b) }4 V' z  S1 n! w3 _; W

& ~" D% S" I" q( ?% c6 H# s

4 A( ^  |/ E& k5 u0 ^0 [

21.使用 Flie 菜單下的 Save for web 命令,在彈出的窗口中選用

PNG 格式輸出(選擇透明輸出: Transparency )

/ s. Z; K0 a& L" N' q


0 J. T: e% W8 u& `/ B

22.隨後在 Photoshop 中打開剛才輸出的 PNG 文件,在其下方新

建一個圖層填充為白色以為圖標加入陰影時便於看到效果)


9 q: f6 B8 Y$ `: `' d


# s. ~( H( I% [0 M; S

, i7 j  x. Y$ n0 b3 r

23.雙擊圖標圖層在 Layer Style 中為其增加了一個陰影效果。以

增強圖標再生成後在各種色彩桌面上的識別率。

" y, B9 s/ U- V0 k3 `


6 ]% I8 B# @2 S: H# [  V


3 |" J7 a1 ~( W6 ^) r0 d, L1 a

24.隨後刪除白色輔助圖層,效果如下。

  w% V& Y  c, u) u# V$ e" |9 _2 X


1 A, _- f3 ?7 {


% ~2 _% _) h. `9 B$ D; _3 T& v$ Y, |

25.新建一個圖層,使之與圖標圖層連接,使用 Ctrl+E 合並連接

圖層把效果應用於圖標,隨後保存這個 PNG 文件。

) v. F9 [& H1 i) {8 x, M

  Y. z. D) a  r/ ~0 R# U  M

26.使用 ICONWORKSHOP 打開這個 PNG 文件,使用

Save Icon Form Image 按鈕轉換 PNG 圖象為 ICO 文件。

6 f/ Q  }% L; a/ V3 t! E7 f' X: R


* O4 a. P( l4 e) |5 `% ?

+ \# r$ L3 S* x4 N7 `

27.選擇你要輸出的 ICO 的文件規格。


2 |. B. K" n- D: A. V9 z0 {. _


1 P+ S8 y+ C* J- E" y0 c" `

28.存儲後的 ICO 格式文件你就可以直接通過 Window 或第三方

圖標管理軟件瀏覽了(推薦使用 Microangelo


jasonfixpc 發表在 痞客邦 PIXNET 留言(0) 人氣()