FW形状文本路径绘图:大学校徽

[复制链接]
查看: 413|回复: 0
gggds 发表于 2009-12-27 13:25:08 | 显示全部楼层 |阅读模式

; ]- T7 O) A3 I! ~0 C- O7 j2 K) R5 o1 V0 I& S
  本文实例主要和大家一起绘制南开大学的校徽。我们的思路是校徽中心放置“南开”两个字来代表学校的名字,文字的四周是个八角的星状图像,星状图外切一个圆形,圆形外围有个“NANKAI UNIVERSITY”和“TIANJIN”等文字,这些文字又是处在另外一个圆环之内的。下面我们就来看看校徽的具体制作步骤,从中熟悉Fireworks MX 2004中形状、文本、路径等工具的使用。文章末尾提供.png文件供大家下载参考。
: N2 }2 j4 R7 h$ q* v5 @  绘制步骤    (1)新建一个大小为400×400的图像,我们首先绘制八角形。点击工具箱上的星状工具 ! y0 B! u3 n# w' T# l: I# h

+ B. n5 Z6 x/ n( _ 绘制一个五角形,并将填充设为无,笔触颜色为#865DA2,笔触类型为Felt Tip中的Dark Marker,并设置笔触大小为8,得到图1所示的图像。 5 m3 e2 N+ @6 w

* _2 K# H" x$ t+ O& ^  d" H$ I8 Q; \/ i6 W. K
图1 绘制五角星形2 S1 C* T  @( }, U: X/ S# N
  (2)我们设计的校徽中的星状图形有八个角,那该怎么办呢?不要着急,在五角星中我们找到点5,也就是左下角的那个控制点。这个点是控制星状工具的角数的,使用选择工具选中这个点,按住鼠标右键不放,并旋转拖动鼠标,这时候我们发现五角星的角开始变化了。当出现八个角的时候我们释放鼠标左键就可以了,如图2所示。' x6 U/ L! Y+ I
  注意:在Fireworks MX 2004中增添了许多功能,其中这些新工具如星形绘制工具的控制点是一个特别的东西,需要我们逐步了解。。
% q' V9 E1 C' Y: Z
; p( _( _/ F; O% [
# v& m, t6 S3 q, C 图2 改变星形的角数
) o9 Y$ N; Y" b  (3)虽然星形编程了八个角,但是我们觉得凹入的角度过于尖锐,需要将凹入的角度变大,这时候我们使用类似的方式,选择控制角度的控制点,按住鼠标右键向外拖动即可将凹入角度值调大,如图3所示。2 N. g4 q: o' D4 ]7 E. ~1 I

5 }$ a/ [6 X6 ]: X$ x" _3 k
  [  {$ Q( O3 Z) [ 图3 调整凹入角度
8 V4 ?+ g  D# w% {6 A  (4)释放鼠标,我们就得到了图4所示的八角内部边框了,下一步的工作便是在图像内部添加“南开”两个文字并对文字进行调整了。
" z" C0 j6 s. a* P: x- x& {  I' n9 m
, M& n7 A, s4 m+ M  `5 c4 D+ C
图4 校徽的八角内部边框- D' U) D* o5 M3 o/ G6 y% a
  (5)现在我们点击工具箱上的文本工具 2 z& Z4 f( U4 |, ?4 I8 [

8 T+ p& t1 Z: W/ o 添加“南开”两个文字,设置字体类型为“文鼎繁淡古”,颜色和内部边框颜色近似即可,如图5所示。* A7 n# t+ R0 R3 {

/ N" Q8 P. c# V; _: I8 [* v2 s4 f4 c; k) z& J+ y  y8 F
图5 添加文本2 N$ |3 Q' Y( M3 T% i  F# j' G
  (6)选择工具箱上的缩放工具
! I! p# p7 `* x
6 o' z: }7 n" T( O 对文本实行变形和缩放,调整文本的大小和长宽比,使得文本能够和边框匹配,如图6所示。
4 @. L( M3 y& D
) J; C9 n6 u6 u& @! w
/ I/ O$ S4 U+ D 图6 对文本进行调整+ u$ T+ U2 ^0 s+ _3 g9 ^  p2 a$ y
  (7)我们还想对“南”字进行一定的调整,使得“南”字的横能够两端向上挑起来,但是没有这样的字体。难道我们没有办法了?其实我们只需将文本转换为路径就可以了。选中文本,右击鼠标选择快捷菜单的“Convert to Paths”即可,这时候我们发现原来的文本变成两组对象的组合了,如图7所示。
3 r$ C1 E, M% d- S% K/ Z1 `" }' q9 [. ^
; F3 C) X9 B$ ~6 Z; ]6 `& O/ S- B
图7 将文本转换为路径
. K/ M& W& X- M$ W1 S' X- G4 A+ R: i  (8)文本现在已经不存在了,原来的文本现在变成两个路径的组合。由于我们只需要改动“南”字,所以需要将组合取消。选中上面的组合,右击鼠标在弹出的快捷菜单中选择“Ungroup”即可取消组合,得到图8所示的图像。
2 V$ O7 s3 n( {1 _" Y3 A- G; L" j8 y: y. L
9 R, |6 f- \# c$ t0 z: X7 {
图8 取消组合
) s. i7 s' M. @* U: g# r% j: l  (9)这时候我们使用选择工具只选择“南”字路径,切换到400%视图,适当的使用钢笔工具 $ \, J5 i! K" C, K$ P8 }% I

. g3 Z) f8 Q' L& I  x. P 增加控制点,使用次选择工具 ) w3 v+ r, _7 e3 A
2 ^+ x" Z' r6 B# ~" T2 a
调整路进,使得“南”字路径上面的一横的两脚上挑起来,如图9所示。- O- E! x2 X: h& k, i9 U8 D9 Z5 F6 b
) j+ }5 N- |8 n2 c
, V& p! {% ~! @) m# @* T
图9 修改路径8 S" W$ |- w- p- e4 L8 H7 w& s
  (10)切换到100%视图之下,我们发现“南”字横线两角已经上挑了,实现了我们需要的效果。接着我们使用工具箱上的椭圆工具同时按住Shift键绘制两个大小分别为216×216、276×276和333×333的三个正圆,并且放置到适当位置,如图10所示。. S9 e/ u& @) V0 x1 r

3 `9 N- y8 L$ i, v- y6 d& L$ b) L4 w) ~$ U5 o8 r9 ]
图10 绘制三个正圆) W* Z4 F  R$ X" ~; j& e
  (11)上面三个正圆中间的那个正圆是为了附加文字所用的。我们由于要附加“NANKAI UNIVERSITY”和“TIANJIN”两组文字,所以中间的圆形路径也要被切割成为上下两段,这样不同文字附加不同路径。选中中间的路径点击工具箱上的刀子工具对路径进行切割,如图11所示。
* M7 s! F0 p, t* @7 K/ _  k/ c4 c  i3 Q0 G+ }0 A, ]' F% v; F
, R9 R; D# J" u  O" G; s
图11 切割路径
# l0 P- M# s6 }1 w5 |  (12)方式我们切下路径对称的两段,然后使用选择工具选择这两段路径并将它们删除,最后剩下如图12所示的路径。' T. r1 j) I1 a2 X/ o; ?/ r5 \
2 X+ y+ K5 B5 L8 {

% s$ U& M! P& Z9 S8 g. Q 图12 删除路径后的图像) F" T/ D0 f1 G( w! [$ L
  (13)现在为图像添加文本,我们首先添加“NANKAI UNIVERSITY”,然后按住Shift键同时选中上面的路径,如图13所示。
# v9 @! }5 \# R/ l, z8 t+ U* M2 v1 a" B) c6 I

' W2 W: ^' p) i  ~. E+ Y' k5 o; t/ X 图13 添加文本并同时选中路径
" B6 @9 t7 `. @5 M! I$ w, I  (14)点击“Text”菜单,选择下拉的“Attach to Paths”,这样文本就被附加到了路径之上了,如图14所示。
* ~( k5 j6 f4 k- i4 r: p
$ c# N/ o5 R* N3 t6 a1 O1 E4 z
0 q$ _5 n4 k  Q 图14 文本附加到路径
6 [( g" G  d( z+ c6 t  (15)我们发现文本在路径上面,我们想让文本处在路径的中心位置,那么怎么办呢?其实我们只需要选中文本,单击鼠标右键,在快捷菜单中选择“Editor”打开文本编辑器,然后在其中调整文本的上下位置即可,如图15所示。9 m2 J5 o, @  i  S

8 s1 u- Q. Q' Q7 |
9 z( h2 U! ^  J4 Q" u 图15 调整文本上下位置* t" o$ a# d; Z6 P7 ]
  (16)调整好位置之后,我们单击“OK”即可,这时候我们发现“NANKAI UNIVERSITY”文本已经处在路径的中心位置了,如图16所示。
, F1 V: d; T2 T- i* v8 m% K
8 D, E5 z; s# M4 D" s( P7 w
; f+ H3 t. m$ p- @, d' \; ?' m 图16 调整文本位置后的图像2 a4 Q; C1 m1 {4 R& ~& Z& h0 b1 ?
  (17)同样方式我们添加“TIANJIN”文本并选择下面的路径,然后选择“Text”>>“Attach to Paths”,但是我们发现文本附加反了,如图17所示。
. g: W$ r/ m" k0 Y$ d- l
( A) `- ^- S' ~+ V* Z3 P$ B2 N
/ }( U4 L0 f, x$ {) { 图17 再次附加文本到路径
: D" N. _- Y( m, }, M: s  (18)其实不要紧,只要我们选中上面的文本对象,然后点击“Text”>>“Reverse Direction”即可将文本倒置过来,如图18所示。
+ b+ B7 ~5 n. O( ^# b0 Y; s+ ~3 A- {$ Q/ A3 i1 L. n& @
, p  w5 U0 G+ S/ Q
图18 倒置文本后的效果* C& l/ k1 S- z* j$ w+ e
  (19)然后使用同样的方法,调整文本的上下位置,适当地在校徽上添加两个修饰的圆形图案,最终我们就得到图19所示的校徽图了。是不是很简单啊? .png文件下载  m& N4 |/ [* g9 y, ^

) ~. ]$ \7 u& T- r$ d  e5 O$ W
3 O% u( E3 y4 o  [* |/ r$ s) r 图19 南开校徽

本版积分规则

精彩图文

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