草根站长论坛 » 站长设计素材 » 设计教程 » Fireworks教程：光芒四射之殊途同归

阿祥 发表于 2007-7-15 14:13

Fireworks教程：光芒四射之殊途同归

类似这样的背景光芒效果近来在很多网站广告和海报上频频出现，尤其配合粗体文字能起到烘托主题的作用，搭配插画风格的人物或产品也极具时尚气息。这种放射状的组合图形有纵深感，吸引眼球对重点的关注。那么在Fireworks要怎样实现这种光芒四射的背景效果呢？先看例图：)~+r6{!K[
[align=center][img]http://www.webjx.com/upfiles/20070708/20070708013725_01.jpg[/img][/align][align=center][img]http://www.webjx.com/upfiles/20070708/20070708013734_26.jpg[/img][/align]这里来介绍两种制作方法，不同的工具和步骤可以达到同样的结果。
T;}3RAt [b]第一种方法：[/b]
C%gad pj 使用星形工具，位置在Fireworks界面左侧的工具栏，用鼠标点下默认的矩形工具右下角的箭头就可以看到了。y~-U6l^fe#F
[align=center][img]http://www.webjx.com/upfiles/20070708/20070708013744_02.jpg[/img][/align]创建画布，因为这里只是做个范例，我的图片尺寸比较小，方便上传。V2b]h/je"c SD
各位在实际操作中可以创建更大的画布，在后面制作时效果会更好，也方便操作。$|n.}N
K
言归正传，我用星形工具画了个默认的五角星。3D-z+eWj
[align=center][img]http://www.webjx.com/upfiles/20070708/20070708013805_03.jpg[/img][/align]注意五角星左下角的控制点，用鼠标按住向上拖拽，直到你需要的星形角数为止，拖拽过程中会有提示显示。 [align=center][img]http://www.webjx.com/upfiles/20070708/20070708013814_04.jpg[/img][/align]多角星上方有四个控制点，按图中所示的红色标记选择半径控制点２向星形中心拖拽。l@\Yt#u-KD"|'Q
[align=center][img]http://www.webjx.com/upfiles/20070708/20070708013823_05.jpg[/img][/align]拖成个海胆样了，见下图：
y$V5O
P8N7q7t-] [align=center][img]http://www.webjx.com/upfiles/20070708/20070708013833_06.jpg[/img][/align]没关系，再继续按住弧度控制点２向外拖拽。
3y3~_:u5D? [align=center][img]http://www.webjx.com/upfiles/20070708/20070708013843_07.jpg[/img][/align]拖到这个程度差不多。
x[6z;\X5m3SGX [align=center][img]http://www.webjx.com/upfiles/20070708/20070708013853_08.jpg[/img][/align]再选择按住弧度控制点１向星形中心拖拽。
Zf| x/d [align=center][img]http://www.webjx.com/upfiles/20070708/20070708013904_09.jpg[/img][/align]拉成个花芯很小的野雏菊状。
9ZgL/w|LI [align=center][img]http://www.webjx.com/upfiles/20070708/20070708013916_10.jpg[/img][/align]改放射渐变。
t5k0l5mP [align=center][img]http://www.webjx.com/upfiles/20070708/20070708013941_11.jpg[/img][/align]再画个同样大小的正圆，也做放射渐变填充，颜色的选择要跟雏菊有差别。
4Mq)Z5nva9A gMw
AcQ\;L(d/V7F0\ [align=center][img]http://www.webjx.com/upfiles/20070708/20070708013952_12.jpg[/img][/align]把正圆放到雏菊的下层。4~lP*k
s9cpmj2J o5`
[align=center][img]http://www.webjx.com/upfiles/20070708/20070708014002_13.jpg[/img][/align]再画个没有填充的矩形，矩形中才是我们所需要的背景。Zkes|:YJ.U
[align=center][img]http://www.webjx.com/upfiles/20070708/20070708014012_14.jpg[/img][/align]选中雏菊和正圆，Ctrl+X剪下，再点选剩下的矩形，Ctrl_Shift+V贴入图形内里，效果完成。
:tg U7K.inP$E.} [align=center][img]http://www.webjx.com/upfiles/20070708/20070708014022_15.jpg[/img][/align]加些文字和小星星就到位啦。5F
W8L|6n^
[align=center][img]http://www.webjx.com/upfiles/20070708/20070708014033_16.jpg[/img][/align][b]第二种方法：[/b]
d4}&Q#}n 是经典的补间实例。如果你的Fireworks版本比较低，工具栏还没有多边形工具，这个方法就比较适用。(OhP)n*_
先画个高度相当于画布一半的矩形，线性渐变填充。j\;}f(d+jC9m5eD
[align=center][img]http://www.webjx.com/upfiles/20070708/20070708014043_17.jpg[/img][/align]在矩形上按鼠标右键，弹出菜单下选择变形-->挤压（skew)，选图形底部右下角的控制点向中间推挤。
m6U7~/y-wy O [align=center][img]http://www.webjx.com/upfiles/20070708/20070708014106_18.jpg[/img][/align]复制同样的图形，翻转，放到原图形底部对齐。 H)h
ql8~VPMM
[align=center][img]http://www.webjx.com/upfiles/20070708/20070708014114_19.jpg[/img][/align]按F8创建图形元件。并Ctrl+D原位复制一个。
/_8KK8ZW#oeq^ 把新复制出来的元件原地旋转１８０度（图形上按右键，弹出菜单下变形-->旋转１８０度）。iG-KEAXd
[align=center][img]http://www.webjx.com/upfiles/20070708/20070708014122_20.jpg[/img][/align]选中这两个元件，Ctrl+Alt+Shift+T调用补间实例命令。(n,us8FfL@
[align=center][img]http://www.webjx.com/upfiles/20070708/20070708014132_21.jpg[/img][/align]弹出对话框内填上１０次，不勾选分散到帧。+@(}x$p[.j
[align=center][img]http://www.webjx.com/upfiles/20070708/20070708014142_22.jpg[/img][/align]按下确认键以后的样子。
5H'h1N:|"X\%QzxD [align=center][img]http://www.webjx.com/upfiles/20070708/20070708014208_23.jpg[/img][/align]下面垫上个放射渐变填充的圆。PB(d X5R:U1`4vV!{
[align=center][img]http://www.webjx.com/upfiles/20070708/20070708013718_25.jpg[/img][/align]剩下的就跟方法一操作一样了，画矩形，剪切其他图形填入矩形内里，添加文字就是成品了。

查看完整版本: Fireworks教程：光芒四射之殊途同归