所谓打字效果,就是文字在光标的带动下,富有节奏感般地挨个展现出来。这种效果在网站的LOGO制作中还不多见。因此我们今天就一起来制作这样一个动态的网站LOGO。最终的效果如图01。
团购网站系统,团购网程序1 E+ L% ^! X1 f3 ?- H
- t6 P+ V7 I& U' j5 U# X/ ^6 tbbs.163k.com
163k团购网站系统官方服务论坛9 l8 P) a1 M/ Q" L+ k" T
图01
163k团购网站系统官方服务论坛# I% b1 H8 u. Z4 E, M( }
bbs.163k.com" b" ?3 U6 K3 K" ?" r0 | Q" T8 ?
“智慧生活LOGO”源文件下载(50K,ZIP压缩文件)
7 D4 e6 W/ P2 V- ]: ^2 k; {! ~团购网站系统,团购网程序
9 m K9 G3 v* Y' N. q% pbbs.163k.com 启动Firework后新建一个88*31大小的画布。这种大小也正是网站LOGO最为常用的尺寸。然后点击“层”面板右上角的下拉按钮,把“单层编辑”的选勾去掉。这样就可以使鼠标指针跨图层地进行对象的选取了。如图02。
团购网站系统,团购网程序# `9 K! v9 v& ?
: ^( G5 U4 { c6 i5 l" G* R6 Y% g& J163k团购网站系统官方服务论坛
团购网站系统,团购网程序' B4 l- x, O, o
图02
团购网站系统,团购网程序/ k4 d D& B! \; I9 q
为互联网事业发展提供源动力!# B4 }- k; n( V" U; ]: Z1 q
准备工夫做好后我们就来正式绘制了。在画布上用“矩形”工具画一个88*31大小的长方形,使其覆盖整个画布。然后用“波浪”渐变进行填充,渐变色由# 009900至# 56BB12。再用35%的“烟雾效果”进行纹理填充,如图03。
163k团购网站系统官方服务论坛 E, q$ X6 d6 ~, w, `; W+ K- j/ q
' F" X# X: ]$ Nbbs.163k.com
! v' O6 f( |+ }8 _* f! Wbbs.163k.com图03
0 q H4 V2 j5 G; t团购网站系统,团购网程序
, p* [' @( X% t; vbbs.163k.com 然后再为该矩形对象添加一个“内侧发光”的特效,发光色为# FFFFFF,其它各项设置如图04。
% @0 K0 b! R7 ?9 W2 w& U163K网站系统官方论坛
# _- x5 A0 n1 ~( \为互联网事业发展提供源动力!
6 Z" o/ E$ D( p$ T n( ?图04
2 x3 V# P' N4 p3 K为互联网事业发展提供源动力!
7 W; E9 Z: _7 k) I, E* ?为互联网事业发展提供源动力!
7 m* c/ k( ^" y) L) { 用“矩形”工具再画一个88*31的长方形。描边色为# 019A00,不采用任何填充。然后使其与画布进行居中对齐。如图05。
, ^- S: [) {7 G. K P9 B
% @% _: H; t0 T+ p! J8 e
9 y# _7 ~8 v9 S" V3 ]1 R为互联网事业发展提供源动力!图05
2 n. H- C& ^% v- g163K网站系统官方论坛163K网站系统官方论坛2 P( f2 D$ F5 c; ~' R( M
这样,LOGO的背景也是绘制完成了。考虑到这是一个动态的LOGO,而且部分动作效果可以使用动画元件来完成。因此为了后续操作的方便,我们再次点击“层”面板右上角的下拉列表,从中选择“共享此层”。也就是把“层1”设置为共享层,以后该层内的背景对象将被其它帧共用。
团购网站系统,团购网程序1 z" @" M+ X5 f" V
& Z' J; _1 i) j( kbbs.163k.com 在“层”面板中新建一个图层——“层2”。然后用“文本”工具在画布上输入相关网站或论坛的名称。在这里我输入的是“智慧生活”,字体为15号的加粗黑体,色值为# FFFFFF,使用“匀边消除锯齿”。最后使该文本对象保持与画布垂直对齐。如图06。
4 T' A: C5 Y# w& ], C" F为互联网事业发展提供源动力!* S4 F4 X% L4 n& E+ d3 K+ J
4 p- F% Z% H8 W- W2 X
图06
) ^8 b' @/ l' m$ _为互联网事业发展提供源动力!
7 v, c4 w1 S6 k1 Y163K网站系统官方论坛 用“矩形”工具画一个16*16的正方形,对其使用无描边的“条状”渐变填充,左右两个渐变滑块均为纯白色,而不透明度则由100%至20%,如图07。
为互联网事业发展提供源动力!' L9 v! V/ n; c: J2 T3 o# l0 f
bbs.163k.com' O1 v7 m7 R; [# f; ]6 s
bbs.163k.com% \! ^$ g. P) u$ ^1 I) t6 U
图07
为互联网事业发展提供源动力!/ P" w) T" B# g2 u( r& |: M; q! U5 `# J
团购网站系统,团购网程序3 P; l3 ]5 t9 T
我们通过该正方形对象的属性框中,将其宽度设置为1像素,然后通过键盘方面键的移动,使其紧靠在“智”字的左边。这样,一个光标的形状也就绘制出来了,如图08。
% L1 \4 L2 ~ ]9 n/ n& q; [163K网站系统官方论坛
6 d% o+ e) b: y: ^: z2 k为互联网事业发展提供源动力!
3 S4 o9 G' N) f" L3 u nbbs.163k.com图08
: A4 i' R7 B+ M3 }$ s' V( ]' T+ u8 A163K网站系统官方论坛团购网站系统,团购网程序. l# l5 g2 l6 I7 ~/ e
在这个光标对象上点击鼠标右键,从弹出菜单中选择“转换为元件”。然后会弹出一个元件属性对话框。在名称栏中我们可形象的将其命名为“光标”,类型为“图形”。从而把这个对象转成图形元件。
为互联网事业发展提供源动力!2 R: H* j9 q! y) _+ v$ N( K
* }9 l0 }) r" j9 u 此时启动“库”面板的话,可以看到里面就有我们刚转换完成的“光标”元件。选中它,并将其直接拖拽至画布当中。然后通过方向键的移动,把它放置在“活”字的右边并与“智”字前的光标元件进行水平对齐,如图09。
+ b7 G+ _9 e ~) x) Q163K网站系统官方论坛/ F0 g0 W8 y$ w3 R+ K( _+ b
+ l/ G4 F" @' b! n团购网站系统,团购网程序图09
/ U2 w7 i( Z) e2 S) x3 M/ x" Pbbs.163k.com163K网站系统官方论坛, p' ]6 D) p1 P" g$ d
将当前的两个光标对象同时选中,然后选择菜单栏中的“修改—元件—补间实例”项。然后在弹出的“补间实例”窗口中设置步骤数量为3,并勾选“分散到帧”选项。此时启动“帧”面板时可以看到,在两个光标之间已建立了所需的动画帧数。如图10。
, q& H, L- A- B) g4 ~4 d5 T, v为互联网事业发展提供源动力!
5 c6 K6 R" l& y- D5 s U+ O4 W+ q# O团购网站系统,团购网程序
' F: _* F+ y; y! I' N+ ]1 s图10
2 K) u" c# i x9 A: L4 X8 h团购网站系统,团购网程序为互联网事业发展提供源动力!2 @8 B" T2 L1 l! g) \
我们继续回到第一帧中进行操作。将“智慧生活”这个文本对象复制后,在其它帧中进行粘贴。而粘贴后的文本对象仍然会在画布上的原位置中,因此不必担心动画在播放过程中会出现文本偏移的情况。
" f5 F7 x& z2 S* W) ?, ~为互联网事业发展提供源动力!为互联网事业发展提供源动力!7 S9 [3 `+ s/ o
因为文字是在动画的播放过程中逐个展现出来的,这个过程只需要4帧。所以我们把第1帧中的文本对象进行删除。而第2帧中则用“文本”工具对其文字对象进行编辑,使其只保留一个“智”字。以此推论,第3帧中则保留“智慧”两字;第4帧中则保留“智慧生”三个字,第5帧则不对文本对象进行修改。完成后LOGO的打字效果就有了一个初步的效果,我们可以点击文档窗口下方的播放按钮进行查看了,如图11。
为互联网事业发展提供源动力!8 ?! S T/ e/ k! M; P
' x5 l/ P* N1 R, r* fbbs.163k.com
团购网站系统,团购网程序* V# Q$ i, ]$ a3 y
图11
V- @; B$ s( W& o) F8 F* \: [# B* o1 q9 }bbs.163k.com
: q) q% O' J2 y# Q. L, N& ~. ~为互联网事业发展提供源动力! 我们再接再厉。选中第5帧后,点击“帧”面板右上角的下拉菜单,从中选择“重制帧”项,然后在弹出来的“重制帧”设置窗口中设置数量为2,如图12。就是将第5帧进行2次的复制,而复制出来的帧也就是“帧”面板里的第6和第7帧。
0 U V$ }* J7 G6 tbbs.163k.com为互联网事业发展提供源动力!+ {6 ~( H+ f/ b( i# B
! d/ w9 Q& f+ K团购网站系统,团购网程序图12
7 L/ v I* z1 o/ L5 xbbs.163k.com
. U( z( p+ Y" m" G4 W& g163k团购网站系统官方服务论坛! |- l8 |7 X4 H2 z" F; `; {1 R7 I4 e
依次点击第6和第7帧,将“智慧生活”最右边的光标对象删除。然后从第7帧开始,我们就将进行LOGO网址动画的制作了。用“矩形”工具在第7帧的画布上画一个84*10的长方形,使用无描边的实心填充,填充值为# E5F4DC。然后将其移至LOGO的下方与画布进行垂直对齐,如图13。
4 g& X7 \& \! @) ?9 tbbs.163k.com
! r y) W4 p, ]& _% ^4 F) P" W' x为互联网事业发展提供源动力!163k团购网站系统官方服务论坛7 n4 d" A* Z" T1 s( q" |* M, \
; n) R3 Q4 \( |0 i3 sbbs.163k.com图13
163K网站系统官方论坛! S8 L o' d: h/ U3 e/ R
" Y: h9 `3 |3 _% N0 U: v163k团购网站系统官方服务论坛 用“文本”工具在这个矩形上面输入相关的网址,在本例中我输入的是“life8.net”,字体为12号的宋体,颜色为# 489801,使用“不消除锯齿”项。然后使其与下方的淡绿色矩形进行水平和垂直对齐,如图14。
团购网站系统,团购网程序% l7 x1 F% M6 g' V; D9 b
4 _+ k1 D8 h1 }- V( Y163K网站系统官方论坛
团购网站系统,团购网程序3 y6 d! G# \; _$ \
图14
163k团购网站系统官方服务论坛/ D* R. s8 c# f3 v0 T
' S8 g( z9 g* B" O; ~- v# S: h为互联网事业发展提供源动力! 将淡绿色矩形和这一文本对象同时选中后使用“修改——组合”命令,使其成为一个组合对象。然后再次从“帧”面板的右上角下拉菜单中选择“重制帧”项。在“重制帧”设置窗口中将所要复制的帧数设置为6,其它选项不变。
163K网站系统官方论坛3 T2 ]& H0 R) [5 Q# U ~/ K3 t0 t
?8 v( [* K5 V: vbbs.163k.com 此时在“帧”面板中将自动把复制出来的6个帧排列出来,分别是第8至第13帧,如图15。
8 G1 h/ }% |" S
3 O0 u1 c5 T" k) h2 v* \0 B: T3 ?4 f163K网站系统官方论坛
7 q* w r2 Q5 nbbs.163k.com图15
163K网站系统官方论坛1 m: j! }, v0 O. R1 W
# j7 s2 v2 |0 p( h/ P* L4 m0 n" | 我们分别将第8、第10和第12帧中的网址组合对象的不透明度设置为50%,如图16。
163K网站系统官方论坛/ t7 O9 |& a( x; T% @; T1 ~
' F. u1 b* b) W: I& G163K网站系统官方论坛
$ Y- u( U O* G' E0 E- U" _! j
图16
163k团购网站系统官方服务论坛5 |3 u7 G4 h0 r7 I7 [( u
团购网站系统,团购网程序 `. e+ C1 n' Q5 N& A
. a) m# y, Q5 g2 @6 t/ }* y1 Dbbs.163k.com 这样一来就可以使网址动画在显示时产生闪动的效果,如图17。
为互联网事业发展提供源动力!" n5 Y9 _! u7 {6 d
9 G' H* \4 H% z$ T9 D为互联网事业发展提供源动力!
bbs.163k.com9 C$ t& i7 n: |1 @+ y
图17
团购网站系统,团购网程序1 i/ z4 G0 H" i+ j% n
163k团购网站系统官方服务论坛1 I& F5 i) q" a" h) g* x) Z
团购网站系统,团购网程序+ U$ i8 R. o4 ^9 l, n
是否觉得动画闪得太快了呢!别急,帧的延时时间我们还可以进行调整。双击第1帧右侧的延时时间数,将原来的7/100秒改成14/100秒。使该帧的停留时间增加一倍,如图18。
) P* ^ O6 G0 w3 w/ G8 {2 ?163k团购网站系统官方服务论坛
' ~: z9 B6 g% N$ B' }163K网站系统官方论坛
为互联网事业发展提供源动力!* k) b) F5 i( L$ c
图18
为互联网事业发展提供源动力!( t! |9 p+ ^6 u/ y! s# q- @) w
, a2 H" a" }* S& q, \) f为互联网事业发展提供源动力! 用同样的设置方法对其它帧的延时时间进行设置,在本例中我将各帧的延时时间设置如下(图19)。
4 M/ k; N$ ?/ H! s为互联网事业发展提供源动力!
" Z: G& J, Y' C4 s为互联网事业发展提供源动力!
163K网站系统官方论坛- \' e. Y/ O6 h) q/ [ t
图19
/ j9 p4 L( E1 b0 s9 N, ^ V( I3 D163k团购网站系统官方服务论坛
3 K5 t8 _6 [& B. @: ?( P2 m163K网站系统官方论坛 可以看到,第13帧的延时时间是最长的,这样做只是使观看者能有足够的时间看清上面的网站名称和网址,这当然也是宣传的需要。
bbs.163k.com( I5 R2 T8 `/ z+ s; w9 q* C1 i, O
& T) k7 X3 Y& ~为互联网事业发展提供源动力! 至此整个LOGO的制作就大功告成了。可通过菜单栏上的“文件——导出预览”项将动画导出并保存为动态的GIF图片格式。最终效果如图20。
bbs.163k.com2 V3 j! n9 U" n
bbs.163k.com1 K5 g( [/ J( B2 m; \
163K网站系统官方论坛6 `9 l% N/ L+ p
图20
bbs.163k.com) m8 a& n: G( H9 a d7 P: A
团购网站系统,团购网程序: I( @" F" p2 J5 t( [
“智慧生活LOGO”源文件下载(50K,ZIP压缩文件)