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

[复制链接]
查看: 245|回复: 0
gggds 发表于 2009-12-27 12:03:51 | 显示全部楼层 |阅读模式
一、显示器的外观  新建一个800*600大小的画布,然后用“矩形”工具直接画一个446*384、圆角度为3的圆角矩形。而千万不要画个小矩形后再拉大到所需的大小,否则圆角度将不规则。然后由左#D4D4D4至右#BEBEBE进行线性渐变的填充。并为其添加一个 “内斜角”的特效,如图01。
* N  v" s# M& p# l, r
% G$ \9 |, z1 Y; e2 d' S& D
: [4 X! W/ T; Q$ K1 r- F" A' @+ x% {% T2 x' \
图01  用“椭圆形”工具画一个446*25的椭圆形,然后将这两个对象进行水平对齐后,把椭圆形的水平中线与矩形的底线进行重合对齐。如图02。3 A! k; [$ \  f5 S* k" `# L
1 z& l( @  |. B" h9 g
. P# P3 h1 v( I
- \- e" \4 F# d4 h
图02
* r2 u  e3 C! b" M7 y  把这两个对象同时选中后使用“修改—组合路径—联合”命令,使其形成一个显示器的外观路径。$ z. D# p# [, k# H! ^; q9 a3 T
二、绘制显示屏  为了使这个显示器更加的逼真,我们不妨先回到电脑桌面,然后按下PrintScreenSysRq键,把你当前所用的电脑桌面截取下来,在Firework里按下“粘贴”按钮进行保存。然后把这个桌面的大小改为363*272。接着把桌面和显示器的外观路径进行垂直对齐,并使显示器的外观顶线高出桌面顶线47个像素。如图03。: a7 k/ q$ x; M
4 z1 u; e4 e6 |( N1 b7 ~. r
' |& m& ]1 ~# u  w& |
# P' U. Q+ W! b  w& ^
图034 K0 l9 a1 Z2 ~$ H# ^+ T9 J
  显示器的桌面被确定下来后,也就等于将显示器的显示屏位置也确立了下来。这为接下来绘制显示器的边框带来坐标上的定位。三、显示器边框  用“矩形”工具画一个405*6大小的长条矩形,从#CCCCCC至#E6E6E6进行由上而下的线性填充。使其与显示器外观进行垂直对齐后紧靠在显示屏上端,如图04。0 p/ |- n/ X  ?. q0 ]9 R2 L
, k$ ]* R% C& M1 ^- N# j9 o

# {) P3 W; Z9 y+ A  q. m: W- P# I' H  f% O1 ^
图04/ {* |% |5 A( ^& {/ G; K! {
  用类似的方法,再绘制一个405*9的长条矩形,然后从#FFFFFF至#C7C7C7进行由上而下的线性填充。接着使其与显示器外观进行垂直对齐后紧靠在显示屏下端,如图05。+ j' G5 h7 V$ M) U; Y. T

, ~1 W0 f, \% t) ]" @$ ]! I3 ?8 }- A* P' l1 k
) F4 q3 I; n& W( d# O
图05
7 D4 T' J0 t& n3 d0 Y  J7 a- _1 U  \  我们再来绘制显示器的左边框。先用“矩形”工具画一条28*286的长条矩形,然后从# D3D3D3至# FFFFFF由左向右进行线性填充。接着用“部分选择”工具将这一矩形右上角边路径节点选中后,用方向键使其向下移动6个像素。同样的,也把右下角的路径节点向上移动9个像素。然后使这个左边框在紧挨着显示屏左边缘的情况下,还要和上、下边框进行对齐。如图06。
4 f% C! [2 L) q' _2 m8 ?3 a3 Q& a

5 p# e6 P9 b6 R. ?0 Z1 k% G) u
, F; q5 }0 E/ p, _) m6 w8 d3 o; z9 h图06
3 x8 u! m  G$ E4 ?% \3 X% K! ^  右边框的绘制也大至相同。先画一个28*286的长条矩形后,从# BFBFBF至# FFFFFF由左向右进行线性填充。然后用“部分选择”工具将这一矩形左上角和右下角的两个节点分别向下移动6个和9个像素。然后也要紧靠着显示屏右边缘的情况下进行对齐。如图07。# r- q  d  S7 t
6 P, j: U5 B: c! {4 l' p

3 G% T* N; w, F& r$ q# [) f) I
图075 k* E9 i2 A7 L  ]& z" C
  完成上面的所有操作后,我们把所有对象全部选中,然后使用“修改—组合”命令。四、显示器托架  接下来我们来画显示器的上托架。先用“椭圆形”工具画一个201*121大小的椭圆形。使其与显示器进行垂直对齐后,采用# C6C6C6至#838383的椭圆形填充和# 757575的1像素柔化描边。然后再为其添加一个5%的木纹纹理。完成后将这一对象通过“修改—排列—移到最后”命令。如图08。
  x) t: D1 d; i% {( C* o' U7 b
2 S) i) Y; }, T) j: g: |
8 ?2 s, q% h3 a4 W9 I5 Q
( B( Z9 p, ]7 O, n图08
) O" }/ {; H4 x; L6 X) X: I6 q, M$ Y  画完上托架后再来画下托架。用“椭圆形”工具画一个299*80大小的椭圆。同样要将其与显示器进行垂直对齐,然后采用# E0E0E0至# 5E5E5E的椭圆形填充,并为其添加一个5%的木纹纹理。完成后也通过“修改—排列—移到最后”命令将这一对象移到最后一层。如图09。
$ X" U0 |. c# C/ t  n" B* M( E. ]+ r3 e- _* e: Y: u# h

! i5 f& [4 i' A0 K& C' b$ n% j% F
图090 s7 |6 o' f: |
  将这一椭圆进行复制后,把复制品改用线性填充,完成后也移到最后一层,如图10。* `) T; W  @: W4 x3 W
- ?) y1 n0 g" u2 z
7 |1 y7 W7 z, d8 r
5 E  f1 ]9 }9 {1 ~' s! A2 R
图10! a; \7 {# i' V2 U
  在托架上还有个垂直指针样的三角凹槽,我们用“矩形”工具画出一个4*9的矩形后,用“部分选择”工具将矩形左下角的一个路径节点选中后删除,然后把右下角的一个节点向左移动2个像素。接着再用#EBEBEB进行实心填充和#999999的1像素柔化描边,并为其增加一个“内斜角”特效。如图11。
$ c4 u4 b) \$ {8 m
5 n, u. `3 ~) @
% P$ F2 u6 L7 B# {4 Q4 h; W! p+ o1 z: M
图11: s" C2 m7 H& x7 J2 L" m
  完成后将这个三角凹槽与显示器托架进行垂直对齐,如图12。  O* [: t2 C* L: k

, z: v1 a6 N6 ?% I2 O! ~; \2 i& f6 k+ H- l9 \( u
; z, \2 }" }- B- I( C
图12! O  p, k8 x# U# v5 |$ T6 Q% B
五、开关键的绘制  用“矩形”工具在显示器右下角的地方画一个21*21的矩形,然后为其使用# C1C1C1的实心填充和# 333333的1像素柔化描边。再分别添加一个“内斜角”特效和一个“外斜角”特效,各项设置如图13。
( n" f4 F4 V. F! J6 `9 Y6 I+ l( B8 ~" @6 `

3 k6 T3 K% `! U) l
! C* a6 T1 U" I8 }图13
& f: J4 ]6 ]5 z4 i2 b  在开关键上画一个7*8的椭圆,并使用#535353的1像素柔化描边,然后用“切线”工具将该圆的上部切出一个缺口,如图14。
( L& o6 Z) [  ^# H: X0 V6 L: U/ `0 y7 {" S1 b8 _, Q

) M# p" ^# g8 r8 m: [% a
* p9 d; a3 ~" f  i( d图146 |: S4 K7 N+ y! q( x$ i
  将该圆上部被切除的路径删除后,用“直线”工具顺着缺口的中央画一条描边色为# 818181的直线,如图15。, W9 L$ _+ K& z8 Q

6 D. _& D# s! |  D
- l% E' c6 \: E4 @2 w  x7 `) \- A, i+ w+ P% \
图15; d) B2 L$ h4 x  v
  这样一来显示器的开关键也就画好了。我们顺便在这开关键的左方绘制一个4*4大小的圆形电源指示灯,用#E2FF71进行实心填充即可,如图16。
& B, p' g* f8 f2 B+ q* g5 p
  V9 ]5 e. w/ U5 f/ |4 ?) z+ d. G
; O( w4 {3 ?' o4 U3 \/ k3 D, w0 [% M1 s3 _' U9 m6 `" W, Q
图16
' X# w* N8 P1 E8 J4 v! k$ c六、调节键的绘制  我们接着来画显示器上的调节键。先画一个31*13的椭圆,然后再将该椭圆另行复制一份并将其向右移动19个像素,再将这两个对象同时选中后使用“修改—组合路径—联合”命令,使其形成一个新的组合路径。然后对这一路径使用# CCCCCC的实心填充和#666666的1像素柔化描边。接着还要为其分别添加一个“内斜角”和“外斜角”特效,各项设置如图17。
& T  N2 z& v$ K6 }& p1 O: _2 o+ V: o. e
+ Y* \' y$ y0 U' I$ G
1 O/ L$ }' e* ~3 ]/ t, d! I4 P/ g% ^0 G, B) ~2 @7 K
图17
) U* C9 f& c7 v, K  完成这些操作后,将这一组合路径与显示器进行垂直对齐,如图18。
4 H  J2 i9 V; h$ v
+ A# o0 y, q* j9 b  J0 W
0 P+ m; a) w0 w# u7 z' W( ^9 s$ e
, S2 i  i! W! ^1 G% L4 n9 S2 q图18# g  J2 M2 Z3 w5 d: }0 N; Q
  把这个组合路径再复制一份,然后用“部分选择”工具将复制品最左边的三个节点同时选中后进行删除,如图19。. M; Q; w+ W' \- R

' N/ i% ~7 x4 J- S
  ]* Q' ?% s. `% e" F$ f  Z* Y* G: z: F4 b3 p# X+ j( h! f
图19
" [1 i: C- G% h( I. V  d  通过“部分选择”工具的修改,使这个复制品的左边路径形成一条直线,如图20。6 F+ j3 c$ d7 S6 D  C5 [+ H7 O
! h+ r4 ]4 G: U! f
/ _, W( L* m4 j) ?% v, W2 R
! n7 D7 w6 i4 G: ?, T
图20; S6 y2 r6 j4 e( N/ h5 m
  为这一复制品改用# C0C0C0进行实心填充,然后再添加一个“内斜角”特效,如图21。/ g" M; K+ d5 ]! s7 E4 x* M+ G

7 `1 n+ p* X0 {6 Y+ h3 n. }" y- J& L  Z! Y, ?0 D  p
8 D7 n/ }" N( T
图21
. j+ _8 m1 S5 Q! C( z4 m+ w  将这一复制品进行克隆后,把克隆对象进行垂直翻转,然后将其平移到右边。接下来就用“直线”工具在这两个调节键上分别绘制“—”号和“+”号,如图22。* D5 _$ K( J0 a0 K$ D+ C- a

& [9 R# T8 {; u. U( X4 o2 Q" A% @
4 k7 V' ~$ O* z* m# D/ }: S' A
1 m0 o6 M0 W" ^6 e1 h图223 K0 m) `/ D+ @0 K
七、控制键及文字  在距离调节键右边6像素的水平位置上我们来画一个控制键。用“椭圆”形工具画一个10*10的正圆形,然后对该圆使用# C0C0C0的实心填充,并以# 333333进行1像素的柔化描边。再为其分别增加一个“内斜角”特效和“外斜角”特效,如图23。
. y) w* f8 e+ b6 V0 g$ J4 o3 n" Q' k' B+ ]
) J' {) r6 `3 I6 [0 n; _. s
  Y& ]' h, ?; d' d7 r
图23
8 H" S# U' S8 f0 ~; \  将这一控制键再复制7个,然后按每个控制键相隔6像素进行水平排列,如图24。
/ j/ W1 X) I( c9 I4 k+ J
6 O& x9 \. g& C* }6 V3 A
+ L" r4 X8 N- p0 y; L0 u6 v
+ q/ C# N- }  ?  v6 V图24
' _: h" P# O& c- s9 B8 m" {  我们再为显示器加上显示器的商标及型号。选用“Impact”字体在显示器的左下角位置输入大写的“SAMSUNG”,然后更改其字体大小为12号,颜色采用# 838383进行填充,同时字体的水平间隔设为113%。如图25。3 n# n2 F+ @  x; l0 p/ i% d1 v

5 _5 g8 c& e3 A6 m% b7 g+ Z9 ]5 G6 }. q6 o% O" Y' k  n

4 C* \0 |7 k6 n( U图250 z  M4 ^% d: f' B' ^% f* e7 a
  在文本上点击鼠标右键,从弹出菜单中选择“转换为路径”项。然后再对文字使用一次“修改—取消组合”命令。文字被打散后每个字母都可以自由的移动了,我们将这些字母除最左边的S以外,其它的都向右进行水平移动。使每个字母相互间隔均为2个像素,如图26。4 v# G2 U" K' S" T5 q  a8 w
  |. \% ?' G+ N% \# w5 I5 ~

" V% ~( Q6 F+ [
$ q3 o) H6 O# y+ U, U图26  我们再为显示器输入型号。用“Haettenschweiler”字体在显示器开关键的上面输入“SyncMaster 550s”。然后改用字体大小为10号。使用# 686868进行文字填充即可,如图27。
# C% g2 A) `  F& l) n( i1 O' a; i+ I3 C) v+ E
3 Z1 b: U: V6 c0 J& r' c  N
! D- T6 C& E6 g' `
图27  最后你还可以将当前所用的桌面壁纸导入Firework里并移至最后一层,为这个显示器当背景。然后通过“文件—导出预览”窗口把整个作品导出成JPG图片后,把这个作品设为你的新桌面,让亲朋友好友也能经常看到你的杰作! 最终效果如图28。
8 }, I0 p: J$ u# I% V! G, `# Y! i- s  G7 [: c4 j

* Q5 ]6 S" v1 r" C' O$ ^: p: c" J+ x4 n  O- @- s* \
图28  源文件下载" ~. i7 B* _' x1 G" c
?

本版积分规则

精彩图文

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