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

[复制链接]
查看: 193|回复: 0
gggds 发表于 2009-12-27 03:26:27 | 显示全部楼层 |阅读模式
一、显示器的外观  新建一个800*600大小的画布,然后用“矩形”工具直接画一个446*384、圆角度为3的圆角矩形。而千万不要画个小矩形后再拉大到所需的大小,否则圆角度将不规则。然后由左#D4D4D4至右#BEBEBE进行线性渐变的填充。并为其添加一个 “内斜角”的特效,如图01。
. ^+ T) Q  q' I+ R* _9 D9 c9 Q2 N( U% K) c$ R  ^

8 p6 K% H) u2 o7 z
. A. I0 c7 V: q+ U5 s图01  用“椭圆形”工具画一个446*25的椭圆形,然后将这两个对象进行水平对齐后,把椭圆形的水平中线与矩形的底线进行重合对齐。如图02。# q& y. y( V' G9 R
: U' E# [% C2 |, o2 g, T

& d  Q8 Q5 I5 e. r( u$ K
* l$ v' n4 g+ m9 H, u图02
- V' T1 L5 f. g% S  把这两个对象同时选中后使用“修改—组合路径—联合”命令,使其形成一个显示器的外观路径。
# A! @+ E! I% i4 j: {" W( t二、绘制显示屏  为了使这个显示器更加的逼真,我们不妨先回到电脑桌面,然后按下PrintScreenSysRq键,把你当前所用的电脑桌面截取下来,在Firework里按下“粘贴”按钮进行保存。然后把这个桌面的大小改为363*272。接着把桌面和显示器的外观路径进行垂直对齐,并使显示器的外观顶线高出桌面顶线47个像素。如图03。
" c9 \+ O, J5 U, Z2 P" Q9 P3 ]* ?  I" B

; {5 }+ G8 \, }5 N, c5 m: x9 A  ?% i" A, u* h, T' V
图03
8 M1 C9 R" s) V% i0 l% n9 a7 t  显示器的桌面被确定下来后,也就等于将显示器的显示屏位置也确立了下来。这为接下来绘制显示器的边框带来坐标上的定位。三、显示器边框  用“矩形”工具画一个405*6大小的长条矩形,从#CCCCCC至#E6E6E6进行由上而下的线性填充。使其与显示器外观进行垂直对齐后紧靠在显示屏上端,如图04。
3 r& |6 k9 Z% H' o  A3 m1 b) w/ @2 I* D( G" I! c
8 w% H/ g0 n; I; g6 _9 ]
8 Q4 m1 `2 v$ A! v4 m& M; C
图04
; {2 V) ?- c( T, G' T/ L0 `  用类似的方法,再绘制一个405*9的长条矩形,然后从#FFFFFF至#C7C7C7进行由上而下的线性填充。接着使其与显示器外观进行垂直对齐后紧靠在显示屏下端,如图05。
% L5 U& `1 K3 w8 i( y
$ \' _2 l$ p" Q" P* {7 r" [# y) o. q! f( I& j3 n5 j# c
) ?* P1 H/ g6 H: b# m( ]
图05
7 P$ L* W- \0 f  我们再来绘制显示器的左边框。先用“矩形”工具画一条28*286的长条矩形,然后从# D3D3D3至# FFFFFF由左向右进行线性填充。接着用“部分选择”工具将这一矩形右上角边路径节点选中后,用方向键使其向下移动6个像素。同样的,也把右下角的路径节点向上移动9个像素。然后使这个左边框在紧挨着显示屏左边缘的情况下,还要和上、下边框进行对齐。如图06。
) a8 M9 R- G7 A; N. U$ H; d, @+ a, V

5 S9 k# b/ K7 F+ o9 S7 j
$ e2 Y! K& ?" m6 X" c图067 e+ j% W! I& R
  右边框的绘制也大至相同。先画一个28*286的长条矩形后,从# BFBFBF至# FFFFFF由左向右进行线性填充。然后用“部分选择”工具将这一矩形左上角和右下角的两个节点分别向下移动6个和9个像素。然后也要紧靠着显示屏右边缘的情况下进行对齐。如图07。% D+ y+ Y8 b8 e$ n" D( U" T
: `7 Z% m( {; n/ z- [- w* t$ U  `. U
1 P5 {, c: A. {( k9 L9 U
8 k  a0 h3 g, c; H3 _+ M7 g. f& Z; D
图070 X+ ]( P) r3 B0 a# G0 \  a
  完成上面的所有操作后,我们把所有对象全部选中,然后使用“修改—组合”命令。四、显示器托架  接下来我们来画显示器的上托架。先用“椭圆形”工具画一个201*121大小的椭圆形。使其与显示器进行垂直对齐后,采用# C6C6C6至#838383的椭圆形填充和# 757575的1像素柔化描边。然后再为其添加一个5%的木纹纹理。完成后将这一对象通过“修改—排列—移到最后”命令。如图08。
3 {3 i/ v; P" i4 ^/ S- q8 B# p2 H3 ~; {7 U" O) f9 [2 |: D  @+ ~8 r
2 {$ |3 c0 z  `  i) }
9 H0 L+ ?; Z6 q# v$ W6 a
图08
' Q& m& o9 ]; j: K! P4 l- _  画完上托架后再来画下托架。用“椭圆形”工具画一个299*80大小的椭圆。同样要将其与显示器进行垂直对齐,然后采用# E0E0E0至# 5E5E5E的椭圆形填充,并为其添加一个5%的木纹纹理。完成后也通过“修改—排列—移到最后”命令将这一对象移到最后一层。如图09。1 T8 A' q+ [- Z* _1 ]) z# J" i

* }2 V8 W/ B, }) X- U" x% ]4 }3 |9 I" C8 m. P
6 R2 H( n' S: V' g  @0 {
图09$ p5 H8 d# I  f7 g) z& \
  将这一椭圆进行复制后,把复制品改用线性填充,完成后也移到最后一层,如图10。6 M4 c9 B. Y. W9 D
. L% [; D  Q  Z$ E+ ~* T- x
4 z6 r6 s; \! O/ z) @

% n  g; @$ M# x& ~图10
2 C' j- {8 D6 S3 \/ M+ w  在托架上还有个垂直指针样的三角凹槽,我们用“矩形”工具画出一个4*9的矩形后,用“部分选择”工具将矩形左下角的一个路径节点选中后删除,然后把右下角的一个节点向左移动2个像素。接着再用#EBEBEB进行实心填充和#999999的1像素柔化描边,并为其增加一个“内斜角”特效。如图11。
6 w; O8 M2 h1 o9 D- o
" k2 [. u8 Y  _& n1 A0 ?! w/ r7 X8 `( t0 `0 a

& P6 \$ s; M2 C; X/ ~' g图11
( Z& t7 i2 l) v2 z5 {  完成后将这个三角凹槽与显示器托架进行垂直对齐,如图12。& S( v! f# d1 X. r- F- d
/ q( \  h/ A/ k5 ]1 o6 c$ q8 v+ a/ K- R

4 O! M: C- E& p% c( i" Z# W+ p# ~1 o4 ^4 g
图123 X" ]% b! o) t
五、开关键的绘制  用“矩形”工具在显示器右下角的地方画一个21*21的矩形,然后为其使用# C1C1C1的实心填充和# 333333的1像素柔化描边。再分别添加一个“内斜角”特效和一个“外斜角”特效,各项设置如图13。4 ~( M9 k) Y" c. g+ t- V

5 t0 m. }: v9 f5 q0 E% ~6 ^  y3 Y+ s) [
+ c) j9 r$ t& T& ]  H
图13  k( V# q0 K- W0 F9 O% v
  在开关键上画一个7*8的椭圆,并使用#535353的1像素柔化描边,然后用“切线”工具将该圆的上部切出一个缺口,如图14。7 p* O- {8 M9 t  N& P: G! D
& S; U) t8 u4 r( Y

$ f2 v4 [5 }& Y1 L4 y8 G+ D1 ^' q. V+ x% e/ j
图14
# Y" G3 m" j/ |$ A$ w8 f  将该圆上部被切除的路径删除后,用“直线”工具顺着缺口的中央画一条描边色为# 818181的直线,如图15。% ~9 E' _9 N. \( I5 v

6 {4 Z; d, x9 e4 ~; j' b5 z$ c4 p: U' D8 w

+ D/ \- H/ M/ _1 a* Q图15
! D' p9 }0 Z4 u/ h* u/ @" B  这样一来显示器的开关键也就画好了。我们顺便在这开关键的左方绘制一个4*4大小的圆形电源指示灯,用#E2FF71进行实心填充即可,如图16。
3 o+ `& d5 c$ j4 i9 k4 K' G2 b& z2 e, e! v; p

: ^! M4 J1 b( b: ~0 ?% D' ~
7 m- E7 ~: h- q0 B5 d* @, S3 `图16! r7 x6 o5 F! A: X8 a6 j
六、调节键的绘制  我们接着来画显示器上的调节键。先画一个31*13的椭圆,然后再将该椭圆另行复制一份并将其向右移动19个像素,再将这两个对象同时选中后使用“修改—组合路径—联合”命令,使其形成一个新的组合路径。然后对这一路径使用# CCCCCC的实心填充和#666666的1像素柔化描边。接着还要为其分别添加一个“内斜角”和“外斜角”特效,各项设置如图17。
# j8 J" N3 G- C3 j0 l% [* T
+ u* R& K9 Q: W3 A! I1 q6 W  I4 j3 p# P/ R8 r0 H8 m7 r" z

$ z! S: P$ f8 w/ E) ]. J图17+ q. }5 w* w" f7 H4 N* ^& }* o; R* j
  完成这些操作后,将这一组合路径与显示器进行垂直对齐,如图18。
* o+ q% r# s/ e# M/ v* y/ V1 x% @
0 ~/ s# s1 G( v$ u! j0 q6 G3 i6 }7 b

; O% G1 _& s& z# `# i, q& F- \图18
/ I9 M# b5 b: V  把这个组合路径再复制一份,然后用“部分选择”工具将复制品最左边的三个节点同时选中后进行删除,如图19。
3 J. e% T9 F+ ?2 e- ~( t' g8 t8 [! H0 e! _6 C  F' u) [

' N+ [( {# Z! @1 i0 B* `4 W, f1 I
! @. @/ p. ?& p  J" h( o图19
4 F9 x3 E/ e4 x( x6 A  通过“部分选择”工具的修改,使这个复制品的左边路径形成一条直线,如图20。! m5 n) O% u* y. J+ I
* H: f2 T* i$ j8 J$ N
( g. V) g( Z& T  ^0 e$ \

- ~3 w9 }/ k; J9 \' `& }图201 i7 b3 B, e, o0 x& G
  为这一复制品改用# C0C0C0进行实心填充,然后再添加一个“内斜角”特效,如图21。
! I  d, o, k, T0 |, G- ]: X
( K7 d0 a& G+ O1 c; b6 l9 G8 x; u9 b  ~$ Q& a7 B, M
0 W7 v" f  ]$ t& b0 Z0 \( Y
图21
' q1 G- Q9 }3 n2 B! Q  将这一复制品进行克隆后,把克隆对象进行垂直翻转,然后将其平移到右边。接下来就用“直线”工具在这两个调节键上分别绘制“—”号和“+”号,如图22。
$ s% ?( ]) Y4 ?5 l; f! X. ~( D  F* _$ t! n6 n
1 g" d& z9 L, [7 e/ W; K0 @
# w. {4 t2 F0 d0 I3 a* z
图22
8 t; B2 [' f7 \  z3 ]: j七、控制键及文字  在距离调节键右边6像素的水平位置上我们来画一个控制键。用“椭圆”形工具画一个10*10的正圆形,然后对该圆使用# C0C0C0的实心填充,并以# 333333进行1像素的柔化描边。再为其分别增加一个“内斜角”特效和“外斜角”特效,如图23。8 L% N) F  Z) I! l% u( b

; i! w  c- `$ J+ X" S4 P$ X
1 f$ l7 ]+ W  i. I6 d0 `
5 D6 J% Z) t+ ]% C图23
+ d, z$ m/ S  S! s* b  将这一控制键再复制7个,然后按每个控制键相隔6像素进行水平排列,如图24。
( f/ Q' s* _/ I8 z( z) p1 n: _, y1 e0 c9 n5 G% o1 H: u

8 P+ \5 |4 E2 M1 @* X0 {2 s
5 h* q& G4 j  ^' b( P& |图24
7 l" B7 h9 G2 N7 Y* H  B7 L  我们再为显示器加上显示器的商标及型号。选用“Impact”字体在显示器的左下角位置输入大写的“SAMSUNG”,然后更改其字体大小为12号,颜色采用# 838383进行填充,同时字体的水平间隔设为113%。如图25。
$ A0 w; \1 R- ^! `6 S
0 Q/ Z; j. J" f+ \' J- ], D, v# d' Z. Q3 e

$ W! a. U# K' e* x图25
0 |5 g+ [  q8 J0 Q% L  在文本上点击鼠标右键,从弹出菜单中选择“转换为路径”项。然后再对文字使用一次“修改—取消组合”命令。文字被打散后每个字母都可以自由的移动了,我们将这些字母除最左边的S以外,其它的都向右进行水平移动。使每个字母相互间隔均为2个像素,如图26。
0 g  W1 T' O) C6 _' {* r8 ]* m: N* a" W" x6 V1 k1 ^

% [+ c% x5 p/ C- Y" O" M' g6 P# _& k# _5 g7 b. u
图26  我们再为显示器输入型号。用“Haettenschweiler”字体在显示器开关键的上面输入“SyncMaster 550s”。然后改用字体大小为10号。使用# 686868进行文字填充即可,如图27。
0 W; s5 N0 {+ H7 E5 k7 v# _! a# V

' C! o3 ?3 n: z0 [1 ]- n4 l/ {( N. o) x4 H, p' m! Z/ N
图27  最后你还可以将当前所用的桌面壁纸导入Firework里并移至最后一层,为这个显示器当背景。然后通过“文件—导出预览”窗口把整个作品导出成JPG图片后,把这个作品设为你的新桌面,让亲朋友好友也能经常看到你的杰作! 最终效果如图28。2 C( W$ R$ g% p6 H( _

5 M% |6 R( }! w9 n) C* v5 p) U- g8 F- Y

$ r5 ?# P7 p) o+ V图28  源文件下载5 p% U' k1 b6 c2 i3 W, h
?

本版积分规则

精彩图文

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