出处：PConline      作者：转载：mashijia/牛筋大学

　先来看看最终效果图：
$ |. \9 G, m" a1 L1 G5 Q7 o7 e

, y0 R% {  y1 O# p% u　　OK，让我们开始...
0 P7 m8 _' R- v# e+ o) l" X- Q3 |( Z- o4 {( K! ?
　　1.1 O5 `; \7 C; p  G7 Y1 X& j: L; y
　　做这个外壳界面时,我用了相当多的技巧,所以教程变的相当长, 希望你有耐心去完成它 :)
: H2 A, ]" V9 t; ?( e/ m% E( s　　开始新建一文件 - 600 x 500 pixels. 白色背景.
1 P: i7 d. ?4 S0 B$ {: a　　新建一层 (起名叫 Interface body) 选择圆形选取工具 画出一圆形. 填充黑色. 依照图一,在刚刚的黑圆中再画一相似的小圆.按下Delete键.
8 q/ Z9 G% R; v　　(在实例中我用了大圆 50% 大小的小圆形删除...); @# s' k; h* X( f
　　duplicate(复制) Interface body 层,回到Interface body copy图层,一会儿我们要用它.　Interface body我们展时不用,可以先关闭它,防止干扰我们的视线.7 e4 ^* p7 h# e4 @2 t( m& [; }

# u) G1 ]+ H6 Y, z0 v7 I

$ W* w6 X7 Y# ^5 ~  A, X1 D, T

1 c9 N) `  D/ o
　　2.+ C8 m  K) n* I, u; A
　　用圆形选取工具画出如图二的椭圆选择区域.
' |; o1 X4 p0 S% B" f　　从顶部开始,每隔40 pixels 按下键盘上的Delete 键一次 如图二.) d% {( ]1 u: y3 `1 \
　　取消选定.
& C: u0 d+ q* n. \* T2 I$ W: p& r

　3.4 I0 Y3 r( Q* O+ E' g
　　Ctrl+单击选中Interface body copy 层.
* p8 {' ^$ L" s4 x　　切换置Channels(面板)点击保存选择区域按钮. 取消选定.. Y+ b/ s3 H) a' p0 h% F) _

8 z! _7 ?9 e) O) S　　执行Filter - Blur - Gaussian Blur(滤镜 – 模糊 – 高斯模糊) - 4 pixels.+ D- u# M  ]' M6 i# T% g

0 ^' a; c+ h) {　　接着执行Image - Adjust – Levels(图像 – 调整 – 色阶) – 将左右两个小箭头向中心拖动,直到图像的边缘非常干净为止. 以下是我的具体设置.
& e6 m! Z: P( e# j
# v$ O6 s' V% `% D  j　　(通道可以起名为 Interface).3 p+ ^4 }( k1 \

6 x# h  g4 ~+ X) f

4 U# x% {3 \& c2 M3 g. h% s　　4." G& i* B% d" Z9 f. U5 H" l. a7 q0 ]! y
　　回到层面板,新建一层叫 Interface.
( v) {5 ]2 S1 b0 w　　Select - Load Selection(选择 – 读取选择区域) – 在对话框中选择我们刚刚新建的 Interface body通道.0 D8 {* \% U. X" Z
* C* ?) z) K4 L) E' U
　　在选择区域中可以随意填充颜色 – 我选择灰色. 当我们添加特效时颜色就会改变了...
7 U, A$ A$ O, D7 R! n

　5.% v" R6 f& z8 S: l% t! o
　　好玩的开始了!
# r" h* f( v$ m% C2 m% N) C. P$ T) Y1 v- v# A+ V
　　现在是特效时间!- x. U1 h: H6 }! y! {1 f/ X! q
　　实际是我们要用到的是Photoshop 6中的layer styles (层特效)功能.2 S+ `0 V+ n- T

4 A7 v. B, e3 L/ p. L3 i* q, E　　见下图.
/ M1 @% C+ N1 l$ [( |( S, _( |
- o3 ~3 W5 k2 g- }( |　　另外我还加上了soft drop shadow (柔和的阴影特效)! j$ P' S1 r3 N

7 E) d1 a- Y9 D

& G/ ~# u: D& b# @　　6.' q! M. ~# U5 B" W. g3 b$ `
　　Ok – 现在让我们回到最初的Interface body 层.
% }- T( J/ n+ T  y. B# m0 ]. M% j$ {# E- a' N- D2 H
　　Ctrl + 单击使该层浮动.
: q$ p3 \1 z+ x3 _$ v6 @. r# n2 i' F2 X1 d; I5 s. v! W
　　执行Select - Modify – Contract(选择 – 修改 – 收缩) - 5 pixels - OK.
- Q' w0 C4 f# [( Q
- {  G6 M$ F" m1 k+ p' w7 i  Y　　接着 Ctrl + Shift + I to 反转选择区域.
3 Y2 z/ v% F% e: k, w8 |0 \1 m　　按Delete删除.9 P. y# X% x5 j

　7.6 G6 s9 M* x  F' f# o: s
　　再次使该层浮动 (Ctrl + 单击);, j$ v4 z+ _# W7 c- B, ~
% U5 X& p  x$ A8 k$ M9 x% Q5 N
　　Select - Modify - Contract(选择 – 修改 – 收缩) - 3 pixels - OK.9 H! n0 U  I# l) S0 i

$ o4 @& D, A) f5 v( h* X) U8 B+ @& R. A9 W$ k
　　按下Delete键将Interface body层的中心部分删除.我也为这一层添加了drop shadow(阴影)特效.
) \6 |8 H' u; X# f0 t2 D+ W
( c/ E, L( M2 p) u% _0 k如图七.: h: d. ^4 \& C+ N2 G2 b' N& @7 s$ n
2 B* h! {" ?3 `6 s5 q* U
　　基本的界面我们已经做好了, 但是它看起来并不怎么惹人喜爱.
, j/ J3 B1 o2 H, \9 T# y# e" v" k. B2 Z; ^# T7 _0 s3 o
　　让我们为它加入些细节吧!/ }8 y# G5 R1 P/ h+ i

1 f6 G4 _* p" j7 _1 p  Y
　　8.) l1 P4 V- D$ q8 ~( J* n% N
　　使Interface layer层浮动.# h6 Y  R5 r1 h4 h/ {

$ x1 c7 u* y7 ]( X' J1 z- b　　执行Edit - Copy Merged(编辑 – 拷贝合并). 接着Edit – Paste(编辑 –粘贴).
! s# m# }8 r! ~9 ^将新层更名为Interface details.6 V* W: g: M! D
% Y* O7 ^7 e5 a5 T
　　使Interface details层浮动,执行' H- U6 T7 X  P  f  K/ q8 _+ c; z- K
　　Select - Modify – Contract(选择 – 修改 – 收缩) - 10 pixels - OK.
: I0 u* k. G. J; Z1 k　　反选选择区域(Ctrl + Shift + I) 按Delete键删除.
; t( q! p" z( [  S& R2 \- s$ w; \4 r- d5 b
　　取消选定.
9 ^- H" e# u# h: g* t! C" M( e1 s, J, y9 V  o; ^9 D3 ~6 a( e
　　选择矩形选择工具画出如图八的矩形选择区域来.
% O  x! Y% X6 J1 V- t
$ E$ q* f# }7 O: u; S　　在进行下一步之前,请按下图添加图层特效.
0 h" \9 k% z: U- ^

+ s. J& V( @$ D) m! q6 i# v ) r" M4 G9 W% Z8 }' o + e7 ^* n* u  l; R# l# [

# ?; ~2 M5 J/ x( ~1 }4 R

6 U8 h; W& O( o4 p7 h+ J　　9.& M; n. B7 P! Q5 w+ W
　　接着如图九,每移动矩形选择区域12 pixels,按Delete删除 一次./ ^% p: z9 m4 }( t. t/ X" j2 Y# g0 h
效果如图九.6 A3 L2 q9 }. A0 a% ]& z3 L( T

+ ]2 }8 f6 u- n7 H: f, I
　　10.9 u% y5 B: T! F$ g. l* q
　　用圆形选择工具画出入图十的圆形.
8 q) y6 {4 C0 a$ y1 b  w( I7 _1 [
　　按Delete键删除所选区域.
' f* z3 j5 |* ^% E  r+ q& @

　11.
2 T- a2 D1 ?* g2 n2 ^　　接着我将Interface details 层向左移动了一些 (方法是选择移动工具并按下键盘上的方向键).
9 c1 }0 b$ k$ @) F# d9 `

' d" Z  Y$ k$ J7 X; z9 S% D) q　　12.
/ T0 I0 R8 A, [7 S- `8 P0 A　　现在是给我们的界面填加些Cool原料的时候了 :)8 g; T6 T/ z) i. q4 W  y6 A5 a

. w( {  F4 P! e7 Y6 Q　　在背景层上新建一层叫 Aqua Triangles.
! H$ ]2 Y# T3 ]( u3 @- i  {0 P- B
0 o4 C0 Z$ l: v) i. Q+ P　　选择圆形选取工具在界面内画出一圆形. 填充灰色 -#595959.
5 Y: x! C# r' G/ s, d
9 O, G2 ^0 K2 h6 W! m" n　　依照图十二,再画一相似的小圆.按下Delete键..
% _( |4 K, F- ~3 ~" V

! O4 ~  y" @* `* q# C8 m　　13.3 m/ Y8 H: L. H5 l& h
　　依照图十三,再画一椭圆.按下Delete键.
  G; N7 |- t0 a" E) \+ C
& @0 V) R+ x: c5 D* s　　取消选定.
( O/ D; w3 w+ b2 u1 t

14.
1 H7 x- {+ e: M! H　　应用第五步中我们所添加的layer style(图层特效) (Interface 层).
7 `9 f& p3 Y! x% a, y" E  o, c; h' d; x7 I& u. S" }
　　接着再添加 Drop Shadow(阴影)特效.
+ k" Q) Z- p0 J3 u6 i　　设置 Opacity(不透明度): 97 %, Distance(距离): 3 pixels,其它都用默认的设置.8 p, i/ V4 j; R! d& U

3 d- ^" S, L) k% |" X' u6 r
　　15
) M: D+ d- E/ a! Z　　接着我在Aqua Triangles层上新建了一ayers Bolts层,并放置了一些球体如图十五,详细的制作方法请见我们前面的教程.
2 X+ r% J6 N0 c. i( G6 P& w
9 [! k1 D; L; M' r* q) I　　我又为其添加了Bevel and Emboss(斜面和浮雕)效果,见下图.5 C/ D, R- l$ W1 \3 f6 i

$ j* d: U9 L5 q

　16.
4 g* d# ^6 y1 s4 t% z: o　　回到背景层新建一新层Chrome Detail.& {5 Z% k4 T4 ~5 C8 U" L9 j5 q( h

' H# J% X* [+ @- K　　选择圆形选取工具 画出一椭圆形,填充灰色.在椭圆的右边画一较小的圆形,按Delete 键删除.6 G4 Z" P" ^4 B+ R" x9 C
2 M/ O$ M2 D3 @
　　接着如图十六,再次画出一椭圆选取区域,按Ctrl + Shift + I进行反选, 按Delete 键删除.
9 J9 t& G9 X3 ^5 ~. |4 H$ Y( B

9 F& L% k- r( k. P: p　　17.
1 _1 M# s+ a6 d, t4 L' P! d9 v　　Duplicate(复制)此层,执行 Edit - Transform - Flip Horizontal(编辑 – 变形 – 水平翻转). 5 J) W1 \$ f, S& ^

' r% I/ T- c) C# V9 p& W　　将Chrome Detail copy 层向右移动.
/ W' b: j' d8 p& h# c$ \
( C. w% k0 Y; `　　接着添加一些Drop Shadow(阴影) (默认设置) 和 Gradient Overlay(渐变覆盖)见下图.
0 |4 s4 l' E  _; z" a+ J

" r# i& v" G; W# B# A

　18.
. f3 h2 H! G6 Q# I/ c　　回到背景层新建一新层 Ring 1.
' U' c' D7 }- ]
$ @# E0 e  a, x, S  z! j　　选择圆形选取工具 画出如图十八的椭圆选取工具. ) B9 k3 |: f( v. t  e+ i# H+ b
　　确保你的前景色为深灰色(#212121) 执行3 A' ]7 M9 I" K' F2 A! C
　　Edit - Stroke – Center(编辑 – 描边 – 中心) - 9 pixels - ok.: I/ f% h* P, ~+ W) K

" Z! k6 b; e( O7 P　　保持选择区域的浮动!0 z- }6 J" a% E$ P+ S! g% e% s
$ j; y( t% h3 e8 H
　　新建一新层 Ring 2, 将前景色该边为亮灰色 (#4B4B4B) 执行Edit - Stroke – Inside(编辑 – 描边 – 内部) - 5 pixels - ok.$ G) X. I, P" X% R6 h5 u- e, B. B& b

4 b- G, \' D6 m4 I! |$ x# V* |1 r　　取消选定.  X2 c- R! n% y9 T8 d

* K7 V# }% Q  _　　19.6 V5 H2 \$ N# M6 A- ?: q
　　在 Ring 2 层上画出一矩形选择区域如图十九,按Delete 删除.- K1 x- {; _6 X7 o6 I3 Z5 m, S
1 o/ M7 v, l# g3 l$ ]
　　移动选择区域到圆环的底部,同样按Delete 删除.
+ {4 L8 m9 E- E

3 _; |6 H! k# v1 V, }　　20.
+ S* P# x  N  ^　　回到 Ring 1 layer.
( A% U& @3 x4 V6 Q0 B! a. m( U; E, k4 U! B' j4 `" @
　　画出一圆形选择区域如图二十,按Delete 删除.
. A5 I6 @: w5 R2 P  j
9 k+ j% Z# k- |4 g* e5 Z0 m　　现在是给Ring 1 层和 Ring 2 层添加特效的时候了.
: l! ?( I8 q" |+ l2 p' t. F( u- T7 l2 }) k, s" o+ Y" G# E
　　Ring 1层的设置见下图.  F% \, L/ D4 q

. q/ v; [  P  w$ [7 d　　Ring 2层特效设置:
7 P* D( i5 a6 b* ]　　用和Ring 1层同样的Bevel and Emboss(斜面和浮雕)效果.
/ E7 ?+ W1 g5 j* E2 l  G
3 A" Z: ^& k" \  z　　接着增加Drop Shadow(阴影) 特效. Distance(距离): 2 pixels 和 Size(尺寸): 2 pixels.
2 m/ L% @# n  G3 F4 b
. v1 z6 H5 \; o- p- a* m　　如果你愿意 – 可以加入Stroke(描边)特效: 1 pixel - Outside – 黑色.  M7 z, z0 s/ M: S0 w9 z

$ i' s6 n2 ?" g3 x3 _' r9 {: m! b　　21.  I, y4 c/ M# |# ^$ L+ e% P9 Q- q
　　Ok – 该增加一些文字了...
  o) P; s: ]# a0 s4 g6 N! ~& j  Y6 S6 p4 z+ `1 E3 E
　　在所有层上新建一层并用Type Tool(文字工具) 敲入你想要的文字.- A$ M2 i6 [, [

7 P2 V( c; a5 R+ ~　　执行Edit - Transform - Rotate 90° CCV(编辑 – 变形 – 左旋转90度).
/ m& H2 b  {# p. u3 S% P( l$ R3 ?  P
　　选中text层并点击 Create Warped Text(建立弯曲文字)按钮.1 p* }& T  g' S7 [6 S' I

, `4 A% B5 I3 v+ C% V8 a# |　　图二十一是我的设置,但不同的文字具体设置可能有所不同,在这里我只是教你如何使用建立弯曲文字工具罢了....  I8 B2 P7 h! r% x* R

. i1 k7 Y3 T* Q2 m( F2 h& Y/ b　　22.' D: }$ E% p; l3 v1 o  [$ l
　　回到 Background 层新建一 Background Buttons. + M" d6 Y+ N: M9 U6 A
2 h' r8 I% O% A
　　选择Rounded Rectangle Tool(圆角矩形工具) 画出如图二十二的圆角矩形.
) c) ?& k1 k' |+ }& m6 u) m5 j! [+ n; z' V& z
　　确保 Create Filled Region(建立填充区域) 是选中的改变前景色为#737373.; }7 D' [' [4 P+ ^7 e
4 c/ Y5 \. b: M; q
　　接着在 Background Buttons 层是建立一layer Button层.
9 s  |* k' w/ L; b　　选择 Rounded Rectangle Tool(圆角矩形工具) 改变前景色为黑色,建立一个如图二十二的按钮外形.
: W3 ~- q" c+ _; Q! Z

1 y0 W+ g& n% b) N& J
　　23.0 X; V- b8 z5 b0 e& P* ~9 B7 b2 y
　　同样的,为这一层也加如第五步中Interface的层特效. 3 [/ x. m2 d7 m- J2 R8 h6 H; D! {/ z$ e4 [
' w9 L3 E2 I9 v# O
　　加入Drop Shadow(阴影) – 默认设置 – 但Distance(距离): 2 pixels, Size(尺寸): 2 pixels.2 n6 c+ x8 x; w

2 |- u' [) @- U( q, F. A5 `7 w9 P　　用拖拽置新建按钮的方法复制该Button 层. 重复复制,直到你要的数量并把它们移动到合适的位置.
' c: X  S) {4 [4 b( B7 s3 N
6 z) S; R9 x8 {- U　　连接所有我们刚刚复制的按钮层. 按 Ctrl + E合并为一层. 重命名为Buttons.: F0 C( N) t2 W1 M% A; l$ J

3 _7 Y5 Q7 J4 f: J: l) @　　加入Drop Shadow(阴影) – 默认设置 – 但Distance(距离): 1 pixels, Size(尺寸): 1 pixels.
5 _7 Q+ I  @! k, U4 |& C5 i2 Q  X

$ R* {; a. ?5 U4 v
　　24.
- |0 R+ k+ |* A' ~: `　　在 Buttons 层之下新建一Inset Buttons层.
3 g/ t! B* S) L+ F, b　　Ctrl + 单击左键Buttons 层,使按钮浮动. : |; N2 F# I0 p, m$ I; T- {# L% {
　　取消较低按钮的浮动线,只保留顶部的按钮被选中.# |* B/ I, v  W# [, }8 |- o

& f3 l2 h4 ]+ K- x　　方法是在属性面板上选择相减按钮,勾选出要删除的部分即可.: T6 [! L& `) @/ P' R8 J! S
如图二十三!
- w- ]4 `, [9 Y' I4 y　　执行Select - Modify - Expand(选择 – 修改 – 扩展)- 2 pixels.
6 M1 q4 x; n3 O% O% v! |　　按D键恢复默认颜色 (黑色前景,白色背景)0 ]5 ]) Y; y+ P  Q) i
　　选择Gradient Tool(渐变工具)从上到下填充选择区域. 3 z" e2 M! f1 M  T, K

3 H4 {, v+ {8 N; D: I% z  |　　取消选定.
6 j4 D' X5 F3 R& J6 y
" a" [: R( c; v: N& z0 R3 Z　　复制这一层,将它移动到底部的按钮上.
8 w8 {4 Z3 F5 q) [  z2 [1 i% e
3 N# z7 D  t# q& z) n如图二十四.

　连接这两个Inset buttons 层进行合并. 9 t$ P( E% L+ N3 y6 ~9 \' d; ?
　　执行 Gaussian Blur (高斯模糊)- 4 pixels.) K7 A8 t% U4 ~6 M1 t. @8 _

& v+ ?  n3 `, v: J　　25.
* a, p' s, o4 `) p　　现在是进一步修整的时间了.1 V7 M% f2 o* g+ q7 C8 h

$ R. b' U8 W  B) Y2 W* b4 c　　Ctrl + 单击左键Chrome Detail 层,使Chrome Detail 浮动并且复制该层. 9 o: F9 I" |5 U4 j& a( o2 U
　　制作一如图二十五的选择区域并进行反选 (Ctrl + Shift + I).5 [% `* A! [' I% E
　　按Delete删除. 取消选定.; z8 h9 r# z/ F+ s

+ d% C8 ~6 H; U: \: n/ G$ k　　接着关闭Drop Shadow(阴影)特效 !
3 P. m1 Y. {' ^$ ]

# q( e  n  I* G& |# V6 W- V0 O; |
　　26.
$ F+ w% [9 m' R3 f　　执行 Gaussian Blur (高斯模糊)- 5 pixels.
3 Y) p. z9 N- |% l  s  h% W: l: T9 Q/ I! x' f3 n+ @
　　停留在Chrome detail copy 层, Ctrl + 单击左键Chrome Detail 层,使Chrome Detail 浮动. ! J6 z% @  r3 i' a8 S$ t
　　反选选择区域 (Ctrl + Shift + I).
4 Y: w) h8 ]3 i! W　　按Delete删除(确定你是在Chrome detail copy 层). 取消选定. ! G6 |5 [/ R4 u9 r1 D/ u

: O2 d/ _, D- U* z" j8 k　　复制 Chrome detail copy 层执行Edit - Transform - Flip horizontal (编辑 – 变形 – 水平翻转) – 移动置右边部分.
) {4 E' j2 Z  T

　27.  D: ^8 G: k9 D( X; ]
　　使 Background Buttons 层浮动.$ f0 T( U# a; k- m
　　新建一层叫 Highlights.0 a6 E4 ?  @; o+ d  G( N# `

# \7 \+ u. T- d4 ^. M　　用圆形选取工具画出如图二十七的圆形填充百色. 1 m# p& q! J& b

. M3 e2 `. n, g4 A6 s) Y7 M$ K　　用键盘移动选择区域,使它和图二十七类似.
& E7 ]* t& V5 P5 e* i" v/ `! x. @2 l2 D* }( x
　　按下 Delete删除所选区域.
( d  a/ k6 ^) x% w0 f% ?- Q& H

# z4 G; {, A" l, |
　　28.
  O9 O8 h% C6 d　　复制Highlights 层 3 次执行 Edit - transform - Flip Horizontal/Vertical(编辑 – 变形 – 水平垂直/翻转)移动到不同的位置知道和图二十八相同.
. X) H( x3 ^9 j( \4 Q+ K
9 U1 S" s: v5 i% J5 K, u" g　　连接这四个不同的highlights 层,进行合并 t (Ctrl + E).. |2 z, a1 N1 c5 e. D& w
+ `9 a3 Z- W0 n# T2 F$ Q
　　执行 Gaussian Blur (高斯模糊)- 3 pixels.
) e7 |+ y4 a# M! d

% l9 w  s$ C1 h6 t+ M2 M　　29.
9 _! d+ g7 S+ h' T* O# ~$ Z" s　　新建一层叫Highlights 2.
$ u$ [4 @* R2 o2 N# G" H0 D: X/ t# L# r7 I
　　制作一个如图二十九的选区,填充白色.
, a9 i) t* O, I9 a6 _
) ^$ r0 s. j' s3 F　　取消选定
+ o2 I  P7 M9 t1 e
( X! s0 E( z5 d) Y9 O7 j" `& u　　Gaussian Blur (高斯模糊)- 2 pixel
5 ^" f6 l/ g3 w% y

　30.
% K) H4 a4 S0 S0 N! R4 W! V　　复制 Highlights 2 层将它移动置按钮的下部
6 A1 Y8 g; t5 d
4 z: |8 ?; k% L, o# X( Q  f　　接着用象皮擦工具在高光条中心部分进行擦除.如图三十.* ]5 H  n: H, H* w6 L
( t% M9 b& ?; n5 F; w( o
　　象皮擦具体设置见下图.
' l3 R( O% J" l3 C! i$ c0 `8 ?: T; |5 a% n* ?: q
　　新建一层叫 Black Shadow.0 C* x, s( B: V& W( L
　　制作一个和图三十相似的选择区域,填充黑色. * S  j  {- P3 X4 V3 L/ J# i
　　高斯模糊4 pixels./ ]6 g& p6 D, m
　　复制此层并移动Black Shadow copy层到另一侧.
* P6 P+ [* x/ x1 w

- O7 W6 ]9 P. L# e* y0 w2 S& \
　　31./ _) S1 n" O& N9 y: c
　　Ahhhh – 最后一步
* M" t* t  Q& Q+ u$ b& G- q5 k+ T　　只要加入文字在按钮上,你就完成啦!5 ~( d3 j2 U) [4 a: F6 L
* a: [1 E; K2 b
　　这个教程还远远没有结速,用你的想象,还能给这个界面添加更多更cool 的特效来:)! G- V4 {& U# ?, r; b) s
) L1 t2 ^; P( {: |8 `8 [
　　好运!
; s' d5 F. G, a$ |1 |+ _

好东东啊，好好学习了

好厉害哦/ K6 l5 D5 T' u' |( V8 ]
支持你哦

学习。。