[组图]写实:Fireworks中显示器的绘制

[复制链接]
查看: 229|回复: 0
gggds 发表于 2009-12-27 03:26:27 | 显示全部楼层 |阅读模式
一、显示器的外观  新建一个800*600大小的画布,然后用“矩形”工具直接画一个446*384、圆角度为3的圆角矩形。而千万不要画个小矩形后再拉大到所需的大小,否则圆角度将不规则。然后由左#D4D4D4至右#BEBEBE进行线性渐变的填充。并为其添加一个 “内斜角”的特效,如图01。
# Q3 f7 C1 X( a; \) k; N* |8 t6 [! X" X, C9 \
# B" U& w5 l3 G2 r$ g+ Y( G! y
$ v4 ^. o: l  Z6 r. q" L9 b8 B
图01  用“椭圆形”工具画一个446*25的椭圆形,然后将这两个对象进行水平对齐后,把椭圆形的水平中线与矩形的底线进行重合对齐。如图02。9 W3 [$ L" C9 Y  y; f% @5 W- Y
4 @6 n( @: F2 j3 v5 E1 H
* J" I) \5 E$ g6 ^* N# s& E6 R/ _

2 |3 ?: b7 E+ P6 U图02
  M: J( I  u' _: h% w  把这两个对象同时选中后使用“修改—组合路径—联合”命令,使其形成一个显示器的外观路径。
6 d$ F! e% Q( `6 y$ H0 E5 b" B二、绘制显示屏  为了使这个显示器更加的逼真,我们不妨先回到电脑桌面,然后按下PrintScreenSysRq键,把你当前所用的电脑桌面截取下来,在Firework里按下“粘贴”按钮进行保存。然后把这个桌面的大小改为363*272。接着把桌面和显示器的外观路径进行垂直对齐,并使显示器的外观顶线高出桌面顶线47个像素。如图03。
7 c) x( _+ @. k; A& h4 F+ t- E" t) s2 P1 ]
2 _; ?$ T5 N% J; o* P
0 |: F( ~3 S# b+ H/ R% f
图03' ~9 I0 b3 S- ?. u6 M: A9 O
  显示器的桌面被确定下来后,也就等于将显示器的显示屏位置也确立了下来。这为接下来绘制显示器的边框带来坐标上的定位。三、显示器边框  用“矩形”工具画一个405*6大小的长条矩形,从#CCCCCC至#E6E6E6进行由上而下的线性填充。使其与显示器外观进行垂直对齐后紧靠在显示屏上端,如图04。. j. W' D, I2 j2 M" E$ m) P

3 F/ y) a, i4 j" z" r
) z$ `/ Y5 C% H2 f3 ^! P. x
% N. _' S# [. x$ w7 y图04
7 P* J) }, Y9 U; t  V$ `& o1 u: o  用类似的方法,再绘制一个405*9的长条矩形,然后从#FFFFFF至#C7C7C7进行由上而下的线性填充。接着使其与显示器外观进行垂直对齐后紧靠在显示屏下端,如图05。) C0 b3 d# V& N  Q4 T

, t" B4 R) D/ n. ~6 L
- r  R8 \- D; L" `1 m
  n2 C0 D2 i) ]6 F/ N1 m( ]% K图05* k" B& F+ @7 r
  我们再来绘制显示器的左边框。先用“矩形”工具画一条28*286的长条矩形,然后从# D3D3D3至# FFFFFF由左向右进行线性填充。接着用“部分选择”工具将这一矩形右上角边路径节点选中后,用方向键使其向下移动6个像素。同样的,也把右下角的路径节点向上移动9个像素。然后使这个左边框在紧挨着显示屏左边缘的情况下,还要和上、下边框进行对齐。如图06。% Y* T. Y- Q, n- j- D% _3 x
* q6 p2 W4 }/ u
, s. F: `# X2 a8 A8 B( N

& ?3 i6 L& }) N$ h图06
; `7 o6 m0 b5 f, w, ]  右边框的绘制也大至相同。先画一个28*286的长条矩形后,从# BFBFBF至# FFFFFF由左向右进行线性填充。然后用“部分选择”工具将这一矩形左上角和右下角的两个节点分别向下移动6个和9个像素。然后也要紧靠着显示屏右边缘的情况下进行对齐。如图07。; N9 h2 @( ]( v" k
! e- @2 J  u4 [( C2 l% O

- m; L, u( Q: n) v, H! g3 s6 V
$ {# v" \$ X& n) g) h0 V图07
2 ?1 B" X: X4 a4 G  完成上面的所有操作后,我们把所有对象全部选中,然后使用“修改—组合”命令。四、显示器托架  接下来我们来画显示器的上托架。先用“椭圆形”工具画一个201*121大小的椭圆形。使其与显示器进行垂直对齐后,采用# C6C6C6至#838383的椭圆形填充和# 757575的1像素柔化描边。然后再为其添加一个5%的木纹纹理。完成后将这一对象通过“修改—排列—移到最后”命令。如图08。
3 t0 H* F/ N% ]+ x7 E3 T6 r( t8 \/ b% K

+ e4 ~% b  Q6 q/ ~" F% P1 r7 k0 J6 C: Z
图08! J/ {3 Y! L2 b/ R% J/ d
  画完上托架后再来画下托架。用“椭圆形”工具画一个299*80大小的椭圆。同样要将其与显示器进行垂直对齐,然后采用# E0E0E0至# 5E5E5E的椭圆形填充,并为其添加一个5%的木纹纹理。完成后也通过“修改—排列—移到最后”命令将这一对象移到最后一层。如图09。/ m/ U* @! O- B) M1 K

+ v* m4 E+ n9 k) B8 }* Q
& k  c! M/ l" C$ g+ f1 l4 G. a9 d8 x7 V! U  v5 ^3 Y2 q
图09, ~5 N/ s  V* q/ `, l
  将这一椭圆进行复制后,把复制品改用线性填充,完成后也移到最后一层,如图10。8 t8 Y4 V& K" J" R: J8 X
# }" p6 r" s6 X$ T$ h* C. _
9 c: h6 m+ |' j+ y; g' z

: H- m7 f1 y2 W' Q. G0 a图10
( C* b/ P% r0 B" F9 ]3 t  在托架上还有个垂直指针样的三角凹槽,我们用“矩形”工具画出一个4*9的矩形后,用“部分选择”工具将矩形左下角的一个路径节点选中后删除,然后把右下角的一个节点向左移动2个像素。接着再用#EBEBEB进行实心填充和#999999的1像素柔化描边,并为其增加一个“内斜角”特效。如图11。1 z, S# B# P" y7 v) w
( Q- Y9 o7 y# `# u8 }* {+ u
: w$ g' h' c8 Z
. z- {# H/ e& [
图117 t9 K7 R- G8 |- h
  完成后将这个三角凹槽与显示器托架进行垂直对齐,如图12。* y5 |: i. R8 G' ]4 b% c

' H4 P: K; t% I
) i# z7 o! E2 K8 p- Q$ v0 N
+ d# W/ |0 r6 ~1 O图12
2 i2 W( r& v8 u) P. ?) i3 ^五、开关键的绘制  用“矩形”工具在显示器右下角的地方画一个21*21的矩形,然后为其使用# C1C1C1的实心填充和# 333333的1像素柔化描边。再分别添加一个“内斜角”特效和一个“外斜角”特效,各项设置如图13。
1 m, l! i9 b* Q8 n& o* y! l0 e; ?* n2 H% D' P4 z

8 `: r- a! ], L: ?, l* m3 F8 f4 C$ B1 V7 q" i! B8 t. E. |
图135 G4 k7 }+ ?7 c! x& |8 M3 s. r: L
  在开关键上画一个7*8的椭圆,并使用#535353的1像素柔化描边,然后用“切线”工具将该圆的上部切出一个缺口,如图14。
# {2 A) a, }4 [8 N/ X
' F/ M3 K% a% @: t
3 n3 X& W( r# @: r$ m/ h
+ }4 b8 O# Q  g  L1 W. |5 z$ @图14
" p) g' S0 k& e, j0 F! j  将该圆上部被切除的路径删除后,用“直线”工具顺着缺口的中央画一条描边色为# 818181的直线,如图15。
% p9 ]2 W/ r4 D: F% g% |0 |! ^% D& G6 j! z/ g: w8 e: t$ V

" Y4 u7 z) }3 s/ @. L6 E9 ?* t, L4 G  |3 v* ^* w' _
图15! M4 @& ?( h' u  N' E" q0 u1 I
  这样一来显示器的开关键也就画好了。我们顺便在这开关键的左方绘制一个4*4大小的圆形电源指示灯,用#E2FF71进行实心填充即可,如图16。% z$ K' a! j; v2 @$ y5 [/ n2 x

  Q2 w( u+ E9 d- {
$ i9 P0 @0 l0 P2 \! q" h- F8 ~" t% Z- g6 `% l- J5 c
图16
% D3 p- C1 @( z7 }5 _1 s六、调节键的绘制  我们接着来画显示器上的调节键。先画一个31*13的椭圆,然后再将该椭圆另行复制一份并将其向右移动19个像素,再将这两个对象同时选中后使用“修改—组合路径—联合”命令,使其形成一个新的组合路径。然后对这一路径使用# CCCCCC的实心填充和#666666的1像素柔化描边。接着还要为其分别添加一个“内斜角”和“外斜角”特效,各项设置如图17。7 |" Z; M/ p: ~
! C5 U# s' k3 k0 M( s) `- l7 ]
9 Z1 L# P- V" ?% h

2 y9 h( ]# Z" V/ h7 F1 l图17" q/ C6 x& n6 a' Y
  完成这些操作后,将这一组合路径与显示器进行垂直对齐,如图18。
& g( C! Y- n! o% h$ j: s
2 r8 R/ H, ]& [% j$ l9 D
7 i2 B  ?( m2 v/ h, g
' F& p1 P# s1 O+ Z8 L3 U  k0 s# t: i图186 T7 w% v) v) X& d0 H
  把这个组合路径再复制一份,然后用“部分选择”工具将复制品最左边的三个节点同时选中后进行删除,如图19。/ A$ x$ e  i) B0 W5 ~) X  b2 }

" w+ q/ v. \+ B# g* S, w0 j
' J; i- K8 @- T" ?% b# F8 h( G  e; n4 r
/ t8 y) n$ T! s$ ^3 e; u图19
& c8 e8 ^( \( g$ A  通过“部分选择”工具的修改,使这个复制品的左边路径形成一条直线,如图20。- B3 g3 P$ ]6 U( j0 y

/ N9 f& v1 o$ U& Z+ H- h
8 M: L% h3 X, [7 M* k- R  \, }0 x8 J9 e8 }- Z; e+ U- Q6 h
图20
1 q) E0 d" _. V6 |  为这一复制品改用# C0C0C0进行实心填充,然后再添加一个“内斜角”特效,如图21。9 E) r2 y5 E) a# z, e* \+ g2 G* ]

+ h' }' W  \7 @4 _3 b' n0 w+ M2 Q! }! o7 H; F2 T
* u" P' y+ z& E4 e
图21/ Y# x( ?1 `! S9 X' s" q7 g8 ]  `
  将这一复制品进行克隆后,把克隆对象进行垂直翻转,然后将其平移到右边。接下来就用“直线”工具在这两个调节键上分别绘制“—”号和“+”号,如图22。
7 ]: W3 k( E0 C5 E5 H" |
0 ^- @+ p# a7 h
3 G& M: i! ^6 i, I
: w1 S8 u( I( q- b% [图22
# q& }) K4 g4 s" G3 m9 c4 @, i七、控制键及文字  在距离调节键右边6像素的水平位置上我们来画一个控制键。用“椭圆”形工具画一个10*10的正圆形,然后对该圆使用# C0C0C0的实心填充,并以# 333333进行1像素的柔化描边。再为其分别增加一个“内斜角”特效和“外斜角”特效,如图23。. `3 T. e2 W# w1 c4 x) W- n

7 V# I' Z, t' {6 V" k' A% T; W- K; }6 n

$ ~" P1 Q, s+ e/ M! Z图23! s9 l2 K3 N+ f+ f. y3 B; d
  将这一控制键再复制7个,然后按每个控制键相隔6像素进行水平排列,如图24。
- S; B" D+ S" |0 b2 F+ {( i/ V5 d5 O3 w  }" H# I

7 [' c  w5 m5 D$ H4 W0 _) Q/ R. z2 `6 z& P$ I  o, s
图24  E7 o0 ?% a( f# ]  i. u
  我们再为显示器加上显示器的商标及型号。选用“Impact”字体在显示器的左下角位置输入大写的“SAMSUNG”,然后更改其字体大小为12号,颜色采用# 838383进行填充,同时字体的水平间隔设为113%。如图25。: Y; _, R" t% }& z. M4 g; w

' z- u7 g5 V: Z/ s9 s+ }/ y) J
4 Q: h/ ?- F; S! M9 K
2 S" J7 m& A; S! E0 A" Z6 y+ B图25
" I  p: {$ j& _/ p  在文本上点击鼠标右键,从弹出菜单中选择“转换为路径”项。然后再对文字使用一次“修改—取消组合”命令。文字被打散后每个字母都可以自由的移动了,我们将这些字母除最左边的S以外,其它的都向右进行水平移动。使每个字母相互间隔均为2个像素,如图26。
( W& Y/ w4 E+ H
- D/ G0 ~  T. \" b8 L
) a: t5 I- _/ y/ H$ Z! n" r9 k# P
图26  我们再为显示器输入型号。用“Haettenschweiler”字体在显示器开关键的上面输入“SyncMaster 550s”。然后改用字体大小为10号。使用# 686868进行文字填充即可,如图27。" d1 ~' O8 h  j" g, S3 R2 a6 n

: a+ F5 X% L8 f8 V4 g. w# g
$ g$ A+ `9 \; c  p7 X( {$ D, m+ S) M; a9 K
图27  最后你还可以将当前所用的桌面壁纸导入Firework里并移至最后一层,为这个显示器当背景。然后通过“文件—导出预览”窗口把整个作品导出成JPG图片后,把这个作品设为你的新桌面,让亲朋友好友也能经常看到你的杰作! 最终效果如图28。2 F* L/ i% U$ r% @, j
3 Q) x& f! i* N6 v5 `

6 s# I1 v* q+ w! R1 m3 `4 S2 m& A0 }8 P
图28  源文件下载( x' p; A; V, [6 Y4 ~
?

本版积分规则

精彩图文

Copyright   ©2015-2016  展示网  Powered by©Discuz!  技术支持:凡尚展览     ( 粤ICP备14065977号 )