发新话题
打印

用 Photoshop 制作微型界面

用 Photoshop 制作微型界面


用 Photoshop 制作微型界面
$ D8 _0 y/ o) Q6 }' ^
1 l5 p# N! C" q9 Y  [4 J4 d$ d' K
% R! _3 W' X; [2 y- C0 W
1.新建一个文件,300X200象素,分辨率为72DPI,白色背景的文件。8 [% p# f3 h. s9 t
2.新建图层1,选择圆角矩形工具,在画布中央拉出一个圆角矩形的路径来!并将此路径转换为选区。再选择渐变填充工具,在矩形选区中拉出如(图1)摸样的渐变色填充。
, {6 q8 W, }% [, e+ t* o+ s* t2 q1 J
" s$ j9 A. G; I) P1 m6 d+ ^4 W5 _0 @/ ]; j. K' {/ e- L3 E
' M& \1 f% Z/ P7 W0 W0 N' w. N0 B

+ h& o. B$ @5 gNO.1
) u( ]2 ^7 p$ ~  B/ z' b; ]3.将图层1复制一个为图层1副本。再回到图层1,将图层1中的矩形垂直向下移动5-6个象素,并用曲线或者明暗命令将其颜色加深至黑色(图2)。
/ w# L8 z5 o3 J$ e; Y  [  u) s9 v; W& |2 \  ]

$ X' n# r- g: K% A4 v" [  L0 B  e. ?) k5 `6 q1 s3 W& `  c& }
! `- F* o( |: s- C' v
NO.20 u) U( r8 c- j
4.将图层1副本再复制一个为图层1副本2,回到图层1副本,将其垂直向上移动5-6个象素,并同样用曲线命令将起颜色加深,加深至深灰色即可(图3)。" H# Q! p. j* u3 [, v3 l" V
! ~9 x, L% g0 L2 Q. y4 n5 {4 e
5 v! _. C  ]5 Y+ Q( f
! c9 N' k5 j3 ?) W

5 S" ]. ^/ K3 {3 _" G2 [7 kNO.3# L* g" h" s. e: q0 O
5.在图层1副本2上面新建一个图层2,再选择圆角矩形工具,在原先矩形位置的上半部拉出个稍窄的矩形,完成后按CTRL T,此时矩形路径上会出现个变换框,然后再按住CTR SHIFT ALT将变换框下端两侧的任意一个角向中间水平移动(图4)。
7 i- p2 c. W7 w0 ~
% G6 O" B; U; R1 k8 G4 {8 x. l
" u4 N. {3 ]6 L- a7 n( O6 `6 w' @5 `; r
* P8 i0 F7 F9 B3 E, K
NO.4: N& O% A% N4 B2 b* f. H
6.完成上述步骤后,将此变形的矩形路径转换为选区,再选择渐变工具,将深浅色两端的颜色都设置为白色,并将浅色端的不透明度设置为0。在此选区内至上而下垂直拖拉(图5)。
" Z% C4 b/ Y+ O; F
! b- j' `. Z3 }, V3 \" z4 Z4 D- V% i) s) r1 c. I

1 X( b2 d. Y0 I6 d
$ h) N6 `4 W7 kNO.5! w1 T5 @, A( k
, v$ M; X+ J9 z. D" X. c

. g* _5 d( t0 [4 z' v/ [7.将图层1,图层1副本,图层1副本2及图层2合并为一个图层,再执行菜单-滤镜-模糊-高斯模糊,模糊1个象素(图6)。
( X- n- O3 _/ A8 z/ k2 V2 r. q! j6 s- Y
& w" w  [6 Z2 k
; L( X+ E; j) g6 D% W) g6 s$ i# A* U

0 A5 _; J& C( c, e6 eNO.6
+ F7 A; z0 X" z. s8.在合并后的图层上方新建一个图层,再选择圆角矩形工具,在原本矩形的中间位置拉出一个矩形路径,并转换为选区,并用原先的灰色渐变色填充,完成后双击此图层,在弹出的图层样式面板上钩选斜面和浮雕选项,取消全局光设置,将大小跟软化都设置为0,角度为-50度,高度为48,其他不变(图7)。
; Q* |8 e- ?; z3 f- ?; y8 V. |+ l, d! a- ~0 V' a. Q
/ O! ^' h. ]* q' P" t

5 S6 h) a( B6 U0 U! d* @5 ?
  h8 e# V' W, F5 j/ HNO.7- p/ H0 w" v; t3 \% H! W
9.按住CTRL点击此图层,使其选区浮起,再执行菜单-选择-修改-收缩,将选区收缩3个象素,再按CTRL U将其选区内图象的明度降低(图8)。; k) k- p) g; [! u  F- S% d
7 ]7 b+ w+ c) D( f

4 Y4 j' y, `" B6 p5 G; ]4 O  r. m# H; ]# M, J5 f) B5 b

. I* ^8 z% l% Z. G' E* z0 N, J. K2 dNO.8
$ v7 j- w# ?6 q7 X; B10.不要取消选区,再执行菜单-选择-修改-收缩,将选区再收缩2个象素,同时在此图层的上方再新建一个图层,如上述第6步中所说的,将简便色相同设置,并在选区中拖拉(图9)。
5 H: N! N' l  @3 z0 T0 Y1 Z2 D. g, ?
* ?7 I) R+ j" A7 Z
$ M7 K+ M' ?- S
$ x4 H( m: M7 k5 p3 ]' p
NO.9
, v6 z' A- ^! \11.回到原先合并的,图层,将其复制一个为副本,并下下面的图层水平象下移动4-5个象素,再回到上面的图层,用鼠标双击此图层,在图层样式面板中选内发光跟投影效果,投影的距离设置为10,扩展为10,大小为15,其它不变,再将内发光的发光色设置为白色,阻塞为0,大小为8个象素,并将等高线设置为第2排第5种样式(图10)。
" _2 d- ^2 D3 p! z& a
9 O- o, _* A& F0 j* h/ L: \- Y; I' o& C8 G8 A9 M
1 ?0 x# p' C* z0 W2 P

$ s) C* p# O+ s5 q6 R) e$ \8 s7 BNO.108 v1 A6 s( B4 o& j2 ^9 \
12.好了"此时的界面已经完成了!若要在上面做别的修饰与美化,自己可以发挥(图11)。5 V- b$ ~* I5 q  X9 W: A+ V
  Q0 O7 Y" C# T, A- m6 c8 w+ r

+ K5 O0 L" G/ w& {* W/ w5 j' y6 m1 l' \9 x: ~: h; x
" \: e  J% }. M7 I: w9 q7 {
NO.11
* _  h7 o/ m5 s  j& }9 n$ V) Z* F  ]( u8 g! v. V
                                            作者:王华



点击图标进入精品网摘收藏 欢迎大家加入网络收藏夹

TOP

发新话题