打开完成的图标：Activity_icons2.png在第二部分的文件夹来显示最后的成果
译 / www.loadskill.com Donger
现在我们有了我们网页的基本构思，我们可以把它输出成带有层的Photoshop文件。Fireworks可以将每个遮照物体输出为每个图标的遮照层，因此在Photoshop中进行设计工作可以使用相同的遮照，并且保证图标一样大小。
在本地输出带有层的Photoshop文件
- 从菜单中选择File/Export
- 在对话框中，在下拉菜单中选择Photoshop PSD格式
- 输出的名字为"Layout.psd"
矢量编辑
- 打开Demo_04.png或者继续工作在你的演示文件中。我们将在活动图标下面的主要白色区域创建三个带有软边斜角的按钮
- 在菜单中选择File/Import
- 定位Icons.png
- 在主要的白色区域的活动的位图图标下面单击放置icons.png文件
译 / www.loadskill.com Donger
现在,我们将创建倾斜的按钮在图标后面
- 选择长方形工具
- 拖出长方形
- 在Info面板中，尺寸设置为70W㗴0h
- 在Object面板中，设置圆角为30
- 在Fill面板，选择linear模式
- 在Fill面板中，单击edit按钮来编辑渐变色
- 单击左面的颜色方块选择米色#CCCC99
- 单击右边的方块，并且选择高亮的兽皮颜色#cc9966
- 在渐变编辑器外面单击来关掉它
- 在Fill面板，改变填充的Edge，把Hard改成Anti-aliased
- 现在，让我们调整渐变色以便我们可以从上到下，在矩形按钮上垂直地渐变
- 在矩形物体上，拖动渐变填充线上的黑色小园点，将它拖到靠近物体顶端
- 拖动渐变填充线上的黑色矩形小方框，将它移动到物体的底端。确保连接这两个小点的线是完全垂直的
- 在Effects panel面板中，选择Bevel&Emboss/Inner Bevel
- 在下拉菜单中把"Flat"改成"Smooth"
- 在Bevel窗口外单击关掉这个窗口
- 当按钮还是被选择时，按住Option键（Mac）或者按住Alt键（PC），单击按钮向下拖来进行复制
- 再次进行复制，这样你就有了三个按钮，三个图标各有一个
- 放置每个按钮在图标的上面，并且按钮的左边缘和文字块的左边缘对齐
- 按住Shift选个全部的按钮，并选择Modify/Arrange/Send to Back
译 / www.loadskill.com Donger
优化图象
- 在这段中，我们将在网页中切割图片进行优化。在上面有文字的罗盘图象需要进行选择性的JPEG优化。文本区域应该用于其它部分不同的设置保存
- 打开Optimize面板，什么都不选择，设置全部缺省的页面输出设置为Gif，Web Adaptive 128种颜色
开启背景层并且用指针工具，选择这个Compass 图象
如果您对本文有任何疑问或者建议，请到讨论区发表您的意见:
>>
论坛入口 <<
上一篇：Fireworks4极速教程 下一篇：Fireworks4遮罩全接触
【文章评论】
【收藏本文】
【推荐好友】
【打印本文】
【我要投稿】 【论坛讨论】
