当前位置：首页 → 问答吧 → 【教程】Fireworks层层激发彩光魅力

【教程】Fireworks层层激发彩光魅力

时间：2009-05-03

来源：互联网

看到会员xinye在论坛贴了张华硕液晶屏幕的产品效果图，求教图片背景的五彩光线迸发的效果是怎么达成的。
请教各位这种五彩的效果是怎么做的，谢了先。。。
就我眼光看来，原图多半是Photoshop的作品，但既然会员到Fireworks版来问，就不免想用FW尝试一下。

经过一段时间的玩味，应该说是可以实现的。
当然其中也走了点小弯路，这些我在下面的教程中会分别说明，但总的来说制作的思路是对了。
现在先看看完成后的作品。

首先建立600x600像素的画布，各位也可以设置其他适合的尺寸。设置底色黑色。
在画面中间画一个300x200像素的矩形，并在属性面板设置Feather羽化值为100。

设置填充为Gradient/渐变-->Folds/折叠渐变，渐变色由红到白。
点击图形上的渐变控点拉成水平状，整个图案现在看起来类似一张羽化过的条形码。

现在把渐变色改为由黑到白，并转为点阵图。

直接在点阵图上右键调出弹出菜单，选择Transform/变形-->Skew/斜切，选中底边的控点向外拉伸到近屏幕边缘。
现在你有个很大的梯形已经远远超出画布范围，横跨屏幕。
不必担心，直接到属性面板把图形宽度改成60像素，再把它拖到画布中间来，这就是我们要的第一束光的原型。

[ 本帖最后由 moonjeep 于 2009-5-3 22:35 编辑 ]

作者: moonjeep 发布时间: 2009-05-03

Edit/编辑-->Clone/克隆或快捷键Ctrl+Shift+D原位克隆一份，右键选择Transform/变形-->Rotate 180°/旋转180度。
把两束光沿相反方向摆成一线，对齐。
Modify/修改-->Symbol/元件-->Convert to Symbol.../转化成元件，或快捷键F8直接将这两个组合图建立成图形元件。

Ctrl+Shift+D原位克隆这份元件，并在克隆出来的元件上点击右键，选择Transform/变形-->Rotate 180°/旋转180度。
目前虽然看不出有什么明显变化，这是为下一步的旋转补间作准备。
选中这两个元件，Modify/修改-->Symbol/元件-->Tween Instances.../补间实例，
在弹出的窗口设置步数值21，并取消勾选Distribute to frames/分散到帧。
实现的效果就如同这个蒲公英的样子。
如果你的电脑配置低些，完成这一步会多需要几秒钟时间。

因为这个旋转补间的最上层是重合的，所以可以把最上层的元件删除。
Select/选择-->Select All/全选，或者直接快捷键Ctrl+A，把所有补间的元件都选起来。
Modify/修改-->Symbol/元件-->Break Apart/打散，或者使用快捷键Ctrl+Shift+B。
把蒲公英变成每一分支都可以单独移动的点阵图。

因为这朵蒲公英的形状太圆了，要做成所需要的爆炸样式还需要个别调整每个分支的位置。
这是个需要点耐心，凭感觉的活。
调整的宗旨是让发散的光束有参差不齐的层次。
总之沿着每个光束的方向向内或向外移动。注意光束的指向始终对准蒲公英的中心。

[ 本帖最后由 moonjeep 于 2009-5-3 22:26 编辑 ]

作者: moonjeep 发布时间: 2009-05-03

几分钟后，整个迸发的光球打底已经完成。
确定不需要再修改后，把分散在各层的点阵图再Ctrl+G/群组起来。
然后我们把这一组在层面板上点掉眼睛图示，将这层隐藏起来。

接下来开始为光球赋予五彩光环。
在画布上画出与画布同等大小的方形，
填充渐变方式为Cone锥形，点击色彩图示，调出填充渐变色面板。
在预设选项下，色彩选择Spectrum/光谱。

现在把光谱图的图层混合模式改成Multiply/正片叠底。
画布上现在看不到光谱的锥形图了。没关系，暂时也先把它隐藏。

回到先前做好的光球原型，Ctrl+Shift+D/原位克隆。
在克隆出来的这层，把图层混合模式改为Additive/添加。
光束开始变亮。

选中新克隆出来的图层，再接再厉，再克隆两个新层出来。
并把最上层克隆的图层混合模式改为Reflect/反射。
这一步是为了把光束的对比进一步加强。

现在可以打开之前隐藏起来的光谱图看效果了。

作者: moonjeep 发布时间: 2009-05-03

回到图层底部选中最初的光球原型，Ctrl+Shift+D/原位克隆。
把克隆出来的图层拉到光谱图层上面，右键选择Transform/变形-->Numeric Transform/数值变形。
在弹出的对话窗口键入百分比为90。

同样原理再克隆两次，把每次新克隆的图层混合模式改成Additive/添加。
热力四射的彩光底图就完成了。

接下来再加点镜头光点的装饰。
我是直接用钢笔线条的笔触改的，这样比较省时间。
笔触的选择是30像素白色，Random/随机-->Dots/点状。
具体数值我在Stroke Options/笔触选项的Advanced/进阶中改过。
各位可以用源文件在FW中打开，在属性面板下的笔触选项内查看。
由于Fireworks的笔触选项基调没有六角形，就用正方形代替了。

环境光效完成，放上预先准备好的素材图。
如果细致点，焦点产品最好是另外扣图再放上，但是这个教程的重点不在于此，我就偷懒了。:P
鉴于产品图片是单纯的白底，底光中心部位也是白色，我就直接改了图层混合模式为Multiply/正片叠底,略修正了下产品图的明暗对比度。

用钢笔勾勒三条流动的光线，设置发光和改图层混合模式为Overlay/叠加。
整个效果就此大功告成了。

如果有的朋友对流光的制作有问题，可以参考我以前在论坛解说的一篇文字。
具体见：http://bbs.blueidea.com/thread-2835585-1-1.html

[ 本帖最后由 moonjeep 于 2009-5-4 07:59 编辑 ]

作者: moonjeep 发布时间: 2009-05-03

哇哇，厉害-,-...

作者: sofish 发布时间: 2009-05-03

PNG源文件以及产品素材图打包下载（点击下载）

后记：
这里有些部分要解释下。
①开始的矩形为什么不用其他形状，比如说椭圆形？
因为到最后变形成蒲公英的形状后，椭圆形开始制作的最终成型会像雏菊，光束末端显得比较尖，缺乏光球的自然感觉。
②矩形的尺寸设置必须为偶数，不然折叠渐变会拉不出条形码形状。
③矩形的渐变色为什么要先设置成红白，再改成黑白呢？直接填色的时候就用黑白不更简单？
先填成红白色是为了方便调整折叠渐变的控制手柄。FW的渐变色控制手柄是黑色的，如果直接用黑白渐变会不易控制手柄拉到水平状。
④斜切变形为什么要先放大再变窄，直接把矩形变成的点阵图某一边在斜切时变窄不就行了？
理论上是这样操作比较简单。但是FW本身的算法问题，这样操作会让变形的点阵图内纹路锯齿相当严重，采取这种先放大再缩小的方式，光束会自然许多。
⑤为什么光束的补间是21步，不多些或少些？
其实这个跟光球的尺寸和画面整体有关，光束太稀疏显得场面不够，也影响色彩表现，太密集的话又缺乏冲击力。对于本案例的尺寸，我试过不同数值，认为目前是比较合适的。

[ 本帖最后由 moonjeep 于 2009-5-20 22:18 编辑 ]

作者: moonjeep 发布时间: 2009-05-03

哈``万分感谢````moonjeep 的教程个个超棒``
我自己做的是这样的``
达不到那样的效果``所以麻烦斑竹了``
按教程做个研究下``再次感谢了``

[ 本帖最后由 xinye 于 2009-5-3 13:23 编辑 ]

作者: xinye 发布时间: 2009-05-03

你的也不错，可以分享下你的制作思路和手法。

作者: moonjeep 发布时间: 2009-05-03

我那太简单了``
随便画个不规则形状``
锐化蒙板
摇动
缩放模糊等等```

作者: xinye 发布时间: 2009-05-03

为什么我找不到斜切呢? 只有倾斜 .. 还有``转换点阵图,是不是就是在矩形状态下,选择取消组合?

作者: tandongs 发布时间: 2009-05-04

楼主你每次发的咋都这么极品列

顶

作者: wwwnetok 发布时间: 2009-05-04

不错～又上了一课～谢谢

作者: myfzq 发布时间: 2009-05-04

学习了

作者: keywing 发布时间: 2009-05-04

我不会画那个光线- -、，这个正方形我调得不好！

作者: avangle 发布时间: 2009-05-04

交作业

作者: tandongs 发布时间: 2009-05-05

LZ 强悍

作者: 23610511 发布时间: 2009-05-05

这帖要顶。

作者: lsx1990 发布时间: 2009-05-05

不错，学写了！

作者: fg352l 发布时间: 2009-05-06

学习了！！！支持

作者: hhsq88 发布时间: 2009-05-06

能否再讲的详细些。。。

作者: yanglin840304 发布时间: 2009-05-07

我在条形吗就卡住了。。

作者: yanglin840304 发布时间: 2009-05-07

我也来交个作业,呵呵,多谢楼主的分享

作者: kaos 发布时间: 2009-05-07

楼上做得也不错，不过感觉白色亮光部分大一点效果更好

作者: qianmeng 发布时间: 2009-05-07

引用:

原帖由 yanglin840304 于 2009-5-6 21:08 发表
我在条形吗就卡住了。。

参见六楼的“后记”：

引用:

②矩形的尺寸设置必须为偶数，不然折叠渐变会拉不出条形码形状。

作者: moonjeep 发布时间: 2009-05-07

图片融合得不好，请指点，谢谢！！！

作者: todayming 发布时间: 2009-05-07

我做的！~~~~

作者: zerock 发布时间: 2009-05-08

好帅，学习了

作者: Torix 发布时间: 2009-05-11

真是厉害了。！！！！

作者: sq4537 发布时间: 2009-05-17

This is really awesome tutorial . Plz some one give me English version o it if possible?

作者: zoe20 发布时间: 2009-05-17

历害.一定顶上.

作者: beays 发布时间: 2009-05-24

效果很好看呢~~~我去开fw看看
好好学习学习

作者: wei8 发布时间: 2009-05-25

生平第一次用到克隆和打散键…………惭愧惭愧

作者: 8axis 发布时间: 2009-05-25

现在把渐变色改为由黑到白，并转为点阵图。
-----------

我是新新手, 初学者, 请问教程中, 怎么转为点阵图??? 点阵图我理解就是位图

作者: kupe 发布时间: 2009-05-26

点阵图的确是位图。
这里特别强调是因为Fireworks是集矢量和位图编辑于一身的软件。
在Fireworks中将矢量或应用了滤镜的图片用Modify修改-->Flatten Selection平面化所选（快捷键Ctrl+Alt+Shift+Z）来转成单纯的位图。
转为点阵图通常是为了渐变物件变形或与其他物件遮罩时不至于丧失原有效果，但是平面化所选之后也同时失去了多重编辑的灵活性。

作者: moonjeep 发布时间: 2009-05-27

厉害啊

作者: niu3 发布时间: 2009-05-28

这个看起来有点山寨的感觉了~~

作者: martin0728 发布时间: 2009-05-31

以前做效果只用photoshop,没想到fireworks功能这么强大?开眼界了

作者: wcg8904 发布时间: 2009-06-04

我拉成水平了啊，但LZ这个条形码效果老是出不来哦。汗

作者: chair158 发布时间: 2009-06-04

引用:

原帖由 chair158 于 2009-6-4 04:22 发表
我拉成水平了啊，但LZ这个条形码效果老是出不来哦。汗

条形码问题见24楼，已经解释过了。

作者: moonjeep 发布时间: 2009-06-04

请问下LZ，那个正片叠底属性究竟在哪里啊？我用了 fireworks 8 和 CS3版本，
可就是找不到啊，

作者: chair158 发布时间: 2009-06-05

我用的是英文版的FW。正片叠底在英文版里是Multiply，我也不清楚FW中文版里的确切叫法。
哪位用中文版FW的朋友，好心贴张中文版FW图层混合模式列表的截图给这位同学看看吧。

作者: moonjeep 发布时间: 2009-06-10

JEEP太牛了！

作者: zq888 发布时间: 2009-06-10

应该加精华　＝Ｄ　谢谢楼主

作者: poring 发布时间: 2009-06-13

收藏～以后有用～

作者: lanceyu523 发布时间: 2009-06-14

我也没找到，我用的是变暗

[ 本帖最后由 ainidavyzhu 于 2009-6-14 15:53 编辑 ]

作者: ainidavyzhu 发布时间: 2009-06-14

很有冲击力啊

作者: lucknox 发布时间: 2009-06-15

楼主说的正片叠低在FW里面叫色彩增值

作者: wowan 发布时间: 2009-06-15

Hi This step is a wee bit confusing can u explain it plz. Thanks in advance

因为这个旋转补间的最上层是重合的，所以可以把最上层的元件删除。
Select/选择-->Select All/全选，或者直接快捷键Ctrl+A，把所有补间的元件都选起来。
Modify/修改-->Symbol/元件-->Break Apart/打散，或者使用快捷键Ctrl+Shift+B。
把蒲公英变成每一分支都可以单独移动的点阵图。

作者: zoe20 发布时间: 2009-06-15

Because the top symbol of the rotating tween instances is a duplicate, therefore you may delete the top symbol.
Apply Select-->Select All, or keyboard shortcut Ctrl+A to select all of the symbols.
then Modify-->Symbol-->Break Apart, or keyboard shortcut Ctrl+Shift+B to break them as individual symbols, in order to make each bitmap ramus of the "dandelion" movable.
Got it?

作者: moonjeep 发布时间: 2009-06-16

我没权限上传图片

总感觉自己做出来的效果缺少了点什么。

作者: Ivandream 发布时间: 2009-06-19

引用:

原帖由 moonjeep 于 2009-6-16 04:01 发表
Because the top symbol of the rotating tween instances is a duplicate, therefore you may delete the top symbol.
Apply Select-->Select All, or keyboard shortcut Ctrl+A to select all of the symbols.
t ...

Am still in confusion.This is a wonderful tutorial . Am enclosing my the screenshot can u explain please? This is where i got struck.

[ 本帖最后由 zoe20 于 2009-6-19 12:11 编辑 ]

作者: zoe20 发布时间: 2009-06-19

What makes you feel confused? I can't tell from your screenshot.
Just delete the top symbol and move the others to proper place.
Go to next step, adjust the position of each bitmap ramus, in order to have them look like "burst", not a "dandelion" anymore.

作者: moonjeep 发布时间: 2009-06-19

条形码就难倒我了~~搞不懂

作者: hack2u 发布时间: 2009-06-28

交作业。不知楼主怎么将方块笔触调成中正的，我怎么也调不好。

作者: fademary 发布时间: 2009-06-30

hack2u：条形码参见24楼。
fademary：方块笔触参见附图。

作者: moonjeep 发布时间: 2009-07-01

英盲~~~~我使的是中文的.

作者: beays 发布时间: 2009-07-01

我也是这么设置的，可就是不行。方块都是歪的，奇怪。

作者: fademary 发布时间: 2009-07-01

难道是RP问题?

作者: fademary 发布时间: 2009-07-01

引用:

原帖由 fademary 于 2009-7-1 05:05 发表
难道是RP问题?

手动把角度数值从0改成90，180，270或360试试。

作者: moonjeep 发布时间: 2009-07-01

引用:

原帖由 moonjeep 于 2009-7-1 20:55 发表

手动把角度数值从0改成90，180，270或360试试。

找到症结了!
没仔细看原文，自作聪明的看到是方形的就以为是方块笔触。把源文件下下来打开研究才发现笔触是Dot，那就是点笔触(没看清原文说的DOT/点,我原来以为DOT有方块的意思,寒自己一个)。楼主没用过中文版，所以在55#也应着我说方块笔触，让我更执迷不悟了，呵呵。点笔触调成0\90的倍数都是中正的，但是用方形笔触是无论怎么样也调不出来的。

作者: fademary 发布时间: 2009-07-02

【教程】Fireworks层层激发彩光魅力

引用:

引用:

引用:

引用:

引用:

引用:

热门阅读

热门下载