fireworks教程(fireworks教程)

这篇教程教三联的FIREWORKS爱好者们用fireworks打造精致图标，教程这种介绍图标的细节修饰。制作难度中等，转发过来和三联的朋友们一起学习。

使用Fireworks(以下简称FW)进行图标设计主要要留意两点：

一是FW专注于web设计，不适合创造一些过于复杂的PS效果，请期待FW CS5的PS滤镜;

二是FW的编辑方式类似于AI，如果您习惯于工作在PS类的像素着色环境下，请华丽的飘过。

接下来进入正题，我们拿一个比较标准的图标来临摹做说明，这样可以方便您理解。

下图是国内知名的eico design所创作的一套图标，我们要临摹的对象就是图中被框住的信封图标。事先说明一下，因为教程的主题，我们会对这个图标加入一些细节，因此我们的最终临摹结果会与原图不太一样。

步骤01

把需要临摹的图标剪下来作为参考，锁定图层。我这里FW的路径面板是从Fireworks CS4中提取的，不过对接下来的操作都无影响，因为我使用的全是CS3包含的功能。

步骤02

用Rounded Rectangle工具画出一个和样图相仿的圆角矩形，使用四个圆角控制点调节好圆角的半径，然后按下Ctrl+Shift+G把图形打散。

随后把第一个圆角矩形复制一份，用白色箭头工具往四个方向移动一像素，制作出如图所示的两个圆角矩形(注意用白箭头处理好圆角处的八个节点，它们是要对齐的)。

我们不能用Stroke去给矩形加外边框，因为虚边会把你给搞死。如果你用Rounded Rectangle工具画出来的圆角矩形已经出现了非Stroke虚边，那就把节点打散后，用黑色箭头工具选中那个Path，点击路径面板的Round Points to Pixels把路径的所有节点归位到像素交点(也可以用白色箭头工具选中某个节点单独进行归位)。

步骤03

把大的圆角矩形复制一份放到最顶层，用白色箭头配合Shift+方向键得到一个倒三角，随即复制一份，上面的倒三角用Linear填充渐变;下面的倒三角实心填充褐色，并设置1px羽化。

步骤04

用白色箭头选中途中所示那些节点，然后用键盘的方向键往下挪两个像素，这样使信封看起来长一点(因为这里单个图标不受整体风格约束)。

步骤05

把之前画的渐变填充倒三角作垂直翻转，复制一份摆放好，它们的位置关系如下图所示。两个倒三角上下相隔1px多一点。可以用白色箭头工具选择深褐色倒三角上方的四个节点，以鼠标拖动的方式配合辅助线挪动把节点往上挪0.3~0.5个像素，这样可以让深褐色的先显得不那么虚(再一次重申，尽早打消用 Stroke作边线的念头，这里不是photoshop)。

步骤06

留意样图的图标上方有一道高光，而且不是常见的单像素放射高光(大约为两个像素的高光处上面的1px高光要亮于下面的1px)，因此可以考虑用Ellipse这种椭圆形的放射性填充达到这种效果。

我们选中并复制最底的圆角矩形两次，移动位置后得到两个上下相隔2px的圆角矩形，用两个矩形路径相减的方法得到一个新的路径，对其进行Ellipse填充(白色0-100透明度)，最后把这个高光路径的叠加方式设置为Overlay。

步骤07

底部加个1px高光。

步骤08

现在的结果如下图，先歇一会儿，喝口茶，接下来我们进行细节的添加。

步骤09

暂时把背景改成白色，我们可以看到之前一个倒三角因为使用了羽化，有一些像素从信封两边溢出了一点。

这里有两种方法可以对这些像素进行处理，一是Flatten为Bitmap，二是保留路径的前提下做遮罩，我偏向于后者，因为这样保留了路径，以后如有需要可以进行再编辑，操作如下图所示：

步骤10

我们回到深色背景，有没有感觉到信封的两边显得有点平?我们用一个Bars或者Radial填充来加点效果上去。

步骤11

接下来为信封的上下三角形加单像素高光，因为之前已经反复讲过路径相减(Punch Path，您可以在Modify _ Combine Paths菜单下找到它)的操作，这里不再作说明，

步骤12

同理给下面的三角形加高光。

步骤13

因为背景是比较深的颜色，我们可以考虑加个发光。这里我们不去用FW的投影或发光滤镜，还是用Path，为什么?因为比较好控制，个人喜好吧。我们可以做一个比信封底层的圆角矩形上下左右多1px的新圆角矩形，不羽化，透明度30。

步骤14

再在加一道1px高光在下面。

步骤15

至此图标基本完成，下面进入润色阶段。我们把所有图层全选“复制”一份，然后迅速按下Ctrl+Alt +Shift+Z把图层平面化为位图，然后设置叠加方式为Overlay，透明度60，这样就会发现图标的饱和度、对比度被提高了，这是我个人比较喜欢的快速润色的方法，但并非任何时候都适用，某些时候你必须手动用FW自带的滤镜去调曲线、对比度、饱和度等参数。

Finish

最终效果(其实信封下方的三角我也用路径加了Path作为投影，写完了才发现，我就不再折腾了)

操作步骤如下：

1）打开动画操作面板

（一般当你打开你所要修改的动画文档时自动会跳出的，或者你可以选择窗口/动画，即可打开动画面板）

2）进行“删除选中的帧”的操作（删除你所指的38帧）

动画面板最下的<垃圾桶>图示

3）然后你可以选中37帧，在进行“新建一个帧”的命令（第38帧），垃圾桶左边的按钮。

或者你也可以选中37帧，进行复制当前帧操作（就有了个和37帧一模一样的38帧，然后删除里面的画面即可.

4)在空白的画面中插入你所要换的

选择文件/置入，会跳入置入面板，打开选取（浏览），跳出放置的文件面板，选择你所要放入的即可。

在置入面板中有位置设置，即你置入所想要放置的位置和像素。

5）最后保存的时候，千万不要选择保存或者另存为（这样将保存为PSD格式，仅仅是个文件），要选择导出，这样你可以保存为你所要的动画格式。

我是做这行的，希望你能明白我上面的解释，并且对你有帮助哦～～～

但是建议你以后别用ImageReady去制作动画，一般常用的多媒体软件（多媒体平台）有Director，Authorware，Flash等等，但是Director功能性要比其它两个强一些，这三个软件在动画制作方面相对专业一些。

photoshop里的ImageReady只能制作简单的动态小图，一般用于网页图形制作方面，最下面给你些简单的介绍！

Adobe ImageReady介绍

ImageReady是一个专为制作网页图形而设计的新产品：。Adobe声称它提供了网页图形制作的集成环境，设计人员不需要再为了制作某个图形而在不同的软件中切换。

刚打开ImageReady，会发现它的界面和Photoshop很象，工具栏的图标也基本雷同，不过数量少些。我们还看到了一个History面板，这可是Photoshop 5才有的东东。

在ImageReady中可对某个图形进行实时优化压缩，即可以同时在原图和优化后的图像之间进行切换，实时地观察优化后的效果。ImageReady支持JPG，GIF，PNG-8以及PNG-24的优化，通过Optimize面板可对优化的参数进行调节，还提供了褪边选项，以便在网页中图像和背景能自然溶合。在ImageReady中甚至还可以在PNG图像边缘定义一些透明像素，它能和网页的背色和背景图像混和，不过这一功能还有待于浏览器的支持。另外，用户还可测试图像在不同速率中的下载时间，预览图像在浏览器中的效果，以及在MAC及WINDOWS系统中的效果。

ImageReady虽然是个图像编缉软件，但它也可产生HTML代码，对图像的改动会生成相应的代码，这时只要用Edit>CopyHTMLCode，然后便可将代码贴进你的网页编辑器中去了。ImageReady也可制作客户端的Map，利用层也可方便地制作GIF动画。

在图像编辑方面，ImageReady同Photoshop类似，但功能稍弱。它有一个魔术橡皮擦工具，可直接在GIF图像及PNG-8图像中产生透明区域。同样的，ImageReady也有自动化处理和批处理功能---通过Action面板来实现，不过可惜的是，它和Photoshop的Action文件并不兼容。但在其它方面，它和Photoshop保持了较高的兼容性，如它支持Photoshop的Filter，Brush文件等等。由于有了History面板，在ImageReady中还可以享受Photoshop5先进的多重Undo和Redo功能。

综合来看，ImageReady是个很有特色的产品，对网页设计者来说是个不错的选择。