Vista包装风格的光束制作（及Live导航条风格制作）

BearColin 楼主

注意：以下教程需要您的电脑上装有Fireworks 8或者更新的版本。


之前看到这个帖子里在讨论：
http://bbs.blueidea.com/thread-2694316-1-1.html
部分想法受到pigeonno1同学的启发：）
先看我做的效果：



30楼补发仿照Live导航条风格制作的源文件。


源文件见附件 - Feng4ever 补

[ 本帖最后由 BearColin 于 2007-6-28 13:14 编辑 ]

BearColin 楼主

首先，我们先制作那些彩色的弧线。

先新建一条绿色的弯曲路径，选择发光滤镜，设置如图。

[ 本帖最后由 BearColin 于 2007-6-28 13:13 编辑 ]

BearColin 楼主

接着，在这个路径上方新建一个白色矩形，选择放射状渐变填充，不要边框，如图。

BearColin 楼主

将这个新建的矩形剪切，快捷键是Ctrl+X，然后粘贴为刚才做的那条曲线的蒙板。




将蒙板设置为灰度外观。




这时，路径就有了首尾渐隐的效果。我们这时还可以调节手柄来调节渐变的细节。


[ 本帖最后由 BearColin 于 2006-12-3 00:27 编辑 ]

BearColin 楼主

下面这步是影响最终效果细节的操作。

将现在这个带有蒙板的图层复制一个放在该层上方，将图层混合模式设为“叠加”。再把下面那层的透明度进行适当的调节，我设为了50。



得到的结果看起来跟刚才没有太大的区别，别着急，往下看：）


[ 本帖最后由 BearColin 于 2006-12-3 00:26 编辑 ]

BearColin 楼主

我们按照前面的方法做一条蓝色的曲线光束。与之前那条绿的交叉。这时我把没有添加叠加图层的图放在旁边对比一下，你就能看出来区别了。有叠加图层的交叉部分更“亮”一些，这就是我们需要的细节。

BearColin 楼主

按照这个原理，我们可以再添加一些各种各样的的弧线、路径等，得到这样的效果。
至此，彩色弧线部分完工！

BearColin 楼主

然后我们来制作后面那些像透明纱幕一样的背景。
就是这里的制作方法我受到了pigeonno1同学的启发：）

虽然刚才做好的彩色弧线很漂亮，不过我们现在先把他们隐藏起来专心制作下面的部分：P
新建一个路径，白色填充，不要边框，如图。

[ 本帖最后由 BearColin 于 2006-12-2 23:34 编辑 ]

szedw

沙发。
虽然前面看的有这样的教程，不过还是要顶一下

BearColin 楼主

如图，先分成小步：
1 先对这个路径添加内侧阴影滤镜。
2 在滤镜设置里选中“去底色”选项。
3 得到这样的结果。



不过边缘太清晰了，我们需要让它更“虚”一点。于是我们把这个路径的边缘设成“羽化”效果，调整羽化大小，我这里设成了10。


[ 本帖最后由 BearColin 于 2006-12-3 00:25 编辑 ]

BearColin 楼主

我们发现这条“纱幕”从上到下都是贯通的比较死板，我们来给它加个渐隐效果。按照刚才给弧线添加蒙板的方法，我们给这个路径添加一个蒙板。这次蒙板使用上下线性渐变。

对了刚才忘记说明一点这里补充。添加了发光效果的路径，我们给它添加蒙板的时候需要先Ctrl+G把它和挂载的滤镜效果进行“组合”，或者干脆把它Ctrl+Shift+Alt+Z进行“平面化”（如果你之后不打算再修改它），否则添加蒙板之后，刚才挂载在弧线上的滤镜效果就会应用于蒙板上了。其他任何挂载过滤镜的图层我们给它添加蒙板的时候最好都先他它进行组合。不知道这算不算是FW的一个bug呢……

好了，我们先把这个羽化后的路径Ctrl+G组合，然后把刚才做的线性渐变填充的路径粘贴为它的蒙板。

BearColin 楼主

再新建一个三角形路径，白色填充不要边框，透明度设成30，可自行调整。



然后重复刚才的操作，羽化>>>组合>>>新建渐变填充路径>>>粘贴为蒙板


[ 本帖最后由 BearColin 于 2006-12-3 00:24 编辑 ]

BearColin 楼主

用这种方法完成背景的制作。

再把刚才的弧线显示出来，不错吧：）


[ 本帖最后由 BearColin 于 2006-12-3 00:23 编辑 ]

BearColin 楼主

再来加个标题。
新建一个矩形，这次加上边框。把边框的颜色设置得比填充亮度高一些。

设置矩形的图层混合模式为“叠加”。
再加上文字，大功告成！


[ 本帖最后由 BearColin 于 2006-12-3 00:22 编辑 ]

BearColin 楼主

几年了，头一次发教程，如果哪里有不足还请大家帮我指出。FW基本是我用来吃饭的家伙了（ps我不会用-__-），让我们一起来为建设FW板块贡献自己的力量！

源文件过大发不上来，下面是源文件地址：
http://www.box.net/public/f7qc6ixqx9

laijguo

个人感觉生硬了少少....

不知道你怎么认为呢..?

小寒

教程不错，步骤详细，值得鼓励
我有预感楼主再多出几个这样的教程，做斑竹就指日可待了

beautifulwork

真不错，很好！

kuaile007

厉害,赞一个.

190235282

我有预感楼主再多出几个这样的教程，做斑竹就指日可待了

BearColin 楼主

原帖由 laijguo 于 2006-12-3 00:50 发表
个人感觉生硬了少少....

不知道你怎么认为呢..?

嗯……可能是因为背景跟前面的线条分得比较明显吧。原vista包装上还有一些介于背景和线条之间的光束。

BearColin 楼主

呵呵，我可从来没想过当版主……
只不过来泡了几年了，从来都是在这里搜刮精华，总觉得该自己做点什么。
这里是个很好的学习交流的平台，我希望有更多人能像我一样在这里逐渐成长：）

shellwayhe

顶……

huadiefei

厉害

sunj

真的很棒。谢谢分享，正在练习，。
关于“叠加”还能介绍一下吗。

togoog

DDDDDDDDDDDDDDDDDDDDDDDD

slxvista

收藏了～～～

BearColin 楼主

原帖由 sunj 于 2006-12-4 09:53 发表
真的很棒。谢谢分享，正在练习，。
关于“叠加”还能介绍一下吗。

这个我主要是不断尝试然后选择最好的效果。
FW的帮助页面上有混合模式的介绍，不过关于叠加的原理部分是他给的另一个英文网站上的。上面有数学公式，但是我看不懂-__-
http://livedocs.macromedia.com/fireworks/8_cn/fwhelp/08_lay34.htm

其实各种混合模式多用用就能总结出大概是个什么效果了，理论很不直观。

boooooy

原帖由 laijguo 于 2006-12-3 00:50 发表
个人感觉生硬了少少....

不知道你怎么认为呢..?

这种人就是典型的挑毛病，楼主说的很清楚了，是Vista包装风格的光束制作，只是和大家分享这种做法，它倒在这挑什么生硬不生硬了。还抢着沙发发帖.....

BearColin 楼主

补做了个Live风格的导航条。
源文件：

弧线用到的特效就是内投影和混合模式：叠加。
左边图标用了放射和线性渐变填充以及内发光和投影。

[ 本帖最后由 feng4ever 于 2006-12-4 23:02 编辑 ]