Menu

Fireworks 网页三剑客之一,网页作图软件

Fireworks是Adobe推出的一款网页作图软件,软件可以加速 Web 设计与开发, 是一款创建与优化 Web 图像和快速构建网站与 Web 界面原型的理想工具。Fireworks 不仅具备编辑矢量图形与位图图像的灵活性, 还提供了一个预先构建资源的公用库, 并可与 Adobe Photoshop、Adobe Illustrator、Adobe Dreamweaver和Adobe Flash软件省时集成。 在 Fireworks 中将设计迅速转变为模型, 或利用来自Illustrator、Photoshop和Flash的其它资源。 然后直接置入Dreamweaver中轻松地进行开发与部署。

简介

Fireworks是Macromedia公司发布的一款专为网络图形设计的图形编辑软件,它大大简化了网络图形设计的工作难度,无论是专业设计家还是业余爱好者,使用Fireworks都不仅可以轻松地制作出十分动感的GIF动画,还可以轻易地完成大图切割、动态按钮、动态翻转图等,因此,对于辅助网页编辑来说,Fireworks将是最大的功臣。借助于Macromedia Fireworks 8,您可以在直观、可定制的环境中创建和优化用于网页的图像并进行精确控制。Fireworks 业界领先的优化工具可帮助您在最佳图像品质和最小压缩大小之间达到平衡。它与 MacromediaDreamweaver和 MacromediaFlash共同构成的集成工作流程可以让您创建并优化图像,同时又能避免由于进行Roundtrip 编辑而丢失信息或浪费时间。利用可视化工具,无需学习代码即可创建具有专业品质的网页图形和动画,如变换图像和弹出菜单等。

2005年,Adobe用34亿美元收购macromedia公司,fireworks随之跟随至adobe。

2013年05月07日在宣布终结Creative Suite(CS)家族的同时,Adobe宣布迎来Creative Cloud(CC)全新系列应用和服务。MAX大会上,Adobe证实,Web设计、原型设计和移动应用程序设计工具Fireworks被毙掉了。

Adobe表示,他们已经决定,Fireworks不会包含在CC家族中,开发团队将专注于开发全新的工具来满足消费者的需求。这样做的主要原因是, Fireworks、Photoshop、Illustrator、Edge Reflow之间在功能上有较多重叠。

不过放心的是,Fireworks CS6今后仍然可以使用,也可以购买,不过和CS6套装以及其它组件一样,只能买到数字版。只是,Adobe不再为其开发新的功能,今后只是提供必要的安全更新和Bug修复。

Adobe将正式发布CC家族产品,包括:Photoshop CC、InDesign CC、Illustrator CC、Dreamweaver CC、Premiere Pro CC等,只是等不到Fireworks CC了。

创建编辑

创建和编辑矢量图像与位图图像,并导入和编辑本机Photoshop和Illustrator文件。

图像优化

采用预览、跨平台灰度系统预览、选择性JPEG压缩和大量导出控件,针对各种交互情况优化图像。

高效集成

导入 Photoshop (PSD) 文件,导入时可保持分层的图层、图层效果和混合模式。将 Fireworks (PNG) 文件保存回 Photoshop (PSD) 格式。导入 Illustrator (AI) 文件,导入时可保持包括图层、组和颜色信息在内的图形完整性。

原型构建

网站和各种 Internet应用程序构建交互式布局原型。将网站原型导出至 Adobe Dreamweaver,将 RIA 原型导出至 Adobe Flex。

支持多页

使用新的页面板在单个文档 (PNG 文件) 中创建多个页面,并在多个页面之间共享图层。每个页面都可以包含自己的切片、图层、帧、动画、画布设置,因而可在原型中方便地模拟网站流程。

组织方式

采用与 Adobe Photoshop 类似的新分层图层结构来组织和管理原型,使您能方便地组织 Web 图层和页面。

滤镜效果

应用灯光效果、阴影效果、样式和混合模式 (包括源自 Photoshop 的 7 种新的混合模式),增加文本和元件的深度和特性。

公用库存

公用库中包含 Web应用程序、表单、界面和网站中经常用到的图形元件、文本元件和动画,可以使用它迅速开始原型构建过程。

智能缩放

通过 9 切片缩放智能地缩放矢量图像或位图图像中的按钮与图形元件。将 9 切片缩放与新的自动形状库相结合,以加速网站和应用程序的原型构建进度。

简化集成

复制 Fireworks CS3 中的任意对象,并直接粘贴到 Dreamweaver CS3 中。创建可保存为 CSS 和 HTML(标准通用标记语言下的一个应用) 的弹出菜单。将 Fireworks (PNG) 文件直接导出至 Flash CS3,导出时可保持矢量、位图、动画和多状态不变,然后在 Flash CS3 中编辑文件。

必知功能

众所周知,在网页上的jpg图片如果过大,会严重影响页面的打开速度,Fireworks提供优化图片的功能,即缩小图片的KB,而且不影响画面的质量(除非放大了与原图对比)。由于很多人喜欢用photoshop制作jpg图片,所以它的容量会很大(因为它是适合处理印刷品,要求比较清晰),最终还是要用Fireworks来处理一下。

在优化面板里有“导出jpg较高品质”,导出默认的80品质(可以用“2幅”画面对比之前之后的大小)。我用的是以前的Fireworks 8.0版本操作,不知道Adobe Fireworks CS3 里这个功能怎样。

网页切法

切片在制作网页的过程中占有很重要的地位,切片的成功与否直接决定日后网页制作的进度快慢和网站运行的速度,只有通过大量的练习才能体会切片的含义

切片作用

  1.  切片是将图片转换成可编辑网页的一座桥梁,通过切片才可以将普通图片变成Dreamweaver可以编辑的网页格式
  2.  切片后的图像可以更快的在网络上传播
  3.  切片后的图像也是网页中片的主要来源

切片方法

  1. 切片首先保证切出网页中需要多次修改的区域,例如文字区域
  2. 切片图像的大小尽量保持在15K以内(便于网络传输)
  3. 充分利用Dreamweaver中的自动拼贴功能减少垃圾切片

操作技巧

  • 技巧1:使用键盘的方向键移动对象时,按住【Shift】键不放,每次可以移动10个像素。
  • 技巧2:使用【指针】工具移动对象时,按住【Shift】键不放,可以保证其水平或垂直移动。
  • 技巧3:按住【Alt】键不放拖拽某个对象,即可对其进行复制。但是自动形状不能用这个操作,因为自动形状是一种组合状态,可以使用复制粘贴命令复制。
  • 技巧4:对于所有的形状绘制工具而言,按住【Shift】键不放进行绘制,可以保证其宽高比始终为1:1。
  • 技巧5:使用基本形状工具绘制形状时,按住【空格】键不放,不要松开鼠标左键,可以移动矢量图形的位置。绘制选区的时候也是如此。
  • 技巧6:使用【矩形】工具绘制矩形时,按住键盘的上或下键不放,不要松开鼠标左键,可以增加或减少矩形的圆度。
  • 技巧7:需要选择组内对象时,并不需要取消组合,可以选择【部分选定】工具来选择组内对象,这对于多个组合对象的编辑来说非常方便。
  • 技巧8:使用【钢笔】工具绘制路径的过程中,按住【Alt】键不放,可以随时调整路径点的控制手柄。
  • 技巧9:使用【刷子】工具绘制图像时,按住【Shift】键不放,绘制出出一条水平或垂直线后,释放鼠标,但不要松开【Shift】键,继续绘制,fireworks会把所画前一条线的终点和后一条线的起点连接起来。
  • 技巧10:按住【Alt】键,单击【层】面板中的位图图层,可以根据位图的形状获得选区。
  • 技巧11:绘制多个选区时,按住【Shift】键表示增加选区;按住【Alt】键表示减选区;按住【Shift】+【Alt】键表示对选区进行交集运算。
  • 技巧12:在给选区填充颜色时,可以使用【Alt】+【Delete】键快速填充颜色,与photoshop里填充前景色的快捷键一样。
  • 技巧13:按快捷键【Ctrl】+【F8】,可以创建一个新的元件。
  • 技巧14:按住【Ctrl】键,单击【混色器】面板下方的颜色栏,可以快速切换到不同的颜色模式。
  • 技巧15:在颜色弹窗口采集颜色时,按住【Shift】键可以确保获得的颜色为网络安全色。
  • 技巧16:如果要给辅助线精确定位,可以在辅助线上双击鼠标左键,在弹出的【移动引导线】对话框中输入详细的坐标。
  • 技巧17:在【层】面板中,选中蒙板图标并像移动图层那样按住蒙板图标将其移动到其他位置,这样可以删除蒙板,并且保留下了蒙板对象。
  • 技巧18:使用【文本】工具单击已经创建的文本,待光标转换为文本光标时,按住键盘上的【Ctrl】加键盘的左右键可以用来改变字符间距,按住【Ctrl】加键盘的上下键可以用来改变文本的行距。学习辅导教材,网络上有很多文字图片类的和视频类的教程。另外看书本结合练习也是很好的选择!

羽化方法

用Fireworks对位图边缘进行羽化,这是在fireworks运用中常用到的功能,希望对大家学习fireworks有所帮助。

方法一

  • 一、导入位图
  • 二、用椭圆工具,在位图上画一个椭圆,填充色为黑色。并在其fill面板中,设置edge为feather,默认为10,不过我们可以设得比较大。
  • 三、用黑色箭头工具全选这二个物体。
  • 四、菜单modify中的mask命令,并在其后序菜单中选择group as mask.
  • 五、这样图片边缘羽化也就完成了。用mask做羽化有一个好处,就是当你选择这个图片时,边框是蓝色的时候,选中当中的蓝色标记,就能把改变图片的位置。呵呵,这样你就不需要担心选择的地方不正确了,只要确定好最终的图片大小 ,就能随意调节羽化图片的哪一部份。
  • 六、取消羽化。Modify菜单的最下面命令,ungroup,就能取消羽化,把图片还原成原先的位图和黑色的椭圆形。

方法二

  • 一、在文件中导入一张需要被羽化的位图(菜单 >  file > import)
  • 二、在工具栏中选择椭圆形选择工具或是矩形选择工具,在位图需要羽化的部位进行选择。
  • 三、菜单> modify > marquee >feather命令。
  • 四、在feather selection对话框中设置羽化的半径,这里我选了20个象素,点击OK
  • 五、用黑色箭头工具,把这个选择框拉到一边,相应的图片也跟着移到旁边。
  • 六、我们可以把不需要的图片删除,也可以把这个已经羽化完了的图片复制到别的文件中去。

本文固定连接:https://code.zuifengyun.com/2015/04/913.html,转载须征得作者授权。

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

¥ 打赏支持