简介Adobe Fireworks CS4 软件可以加速 Web 设计与开发, 是一款创建与优化 Web 图像和快速构建网站与 Web 界面原型的理想工具。Fireworks CS4
Adobe Firework CS4不仅具备编辑矢量图形与位图图像的灵活性, 还提供了一个预先构建资源的公用库, 并可与 Adobe Photoshop CS4、Adobe Illustrator CS4、Adobe Dreamweaver CS4 和 Adobe Flash CS4 软件省时集成。 在 Fireworks 中将设计迅速转变为模型, 或利用来自 Illustrator、Photoshop 和 Flash 的其它资源。 然后直接置入 Dreamweaver CS4 中轻松地进行开发与部署。
矢量编辑与位图编辑创建和编辑矢量图像与位图图像, 并导入和编辑本机 Photoshop 和 Illustrator 文件。
图像优化采用预览、跨平台灰度系统预览、选择性 JPEG 压缩和大量导出控件, 针对各种交付情况优化图像。
高效的 Photoshop 和 Illustrator 集成导入 Photoshop (PSD) 文件, 导入时可保持分层的图层、图层效果和混合模式。 将 Fireworks (PNG) 文件保存回 Photoshop (PSD) 格式。 导入 Illustrator (AI) 文件, 导入时可保持包括图层、组和颜色信息在内的图形完整性。
快速原型构建网站和各种 Internet 应用程序构建交互式布局原型。 将网站原型导出至 Adobe Dreamweaver, 将 RIA 原型导出至 Adobe Flex。
支持多页使用新的页面板在单个文档 (PNG 文件) 中创建多个页面, 并在多个页面之间共享图层。 每个页面都可以包含自己的切片、图层、帧、动画、画布设置, 因而可在原型中方便地模拟网站流程。
分层的图层组织方式采用与 Adobe Photoshop 类似的新分层图层结构来组织和管理原型, 使您能方便地组织 Web 图层和页面。
滤镜效果应用灯光效果、阴影效果、样式和混合模式 (包括源自 Photoshop 的 7 种新的混合模式), 增加文本和元件的深度和特性。
公用库公用库中包含 Web 应用程序、表单、界面和网站中经常用到的图形元件、文本元件和动画, 可以使用它迅速开始原型构建过程。
智能缩放通过 9 切片缩放智能地缩放矢量图像或位图图像中的按钮与图形元件。 将 9 切片缩放与新的自动形状库相结合, 以加速网站和应用程序的原型构建进度。
简化的 Dreamweaver 和 Flash 集成复制 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 里这个功能怎样。
快捷键:
工具
指针、选择后方对象 【V】,【0】
部分选定 【A】,【1】
选取框、椭圆选取框 【M】
套索、多边形套索 【L】
裁剪、导出区域 【C】
魔术棒 【W】
线条工具 【N】
钢笔工具 【P】
矩形、圆角矩形、椭圆、多边形 【U】
文本工具 【T】
铅笔、刷子 【B】
矢量路径、重绘路径 【P】
缩放、倾斜、扭曲 【Q】
自由变形、更改区域形状 【O】
滴管工具 【I】
油漆桶、渐变 【G】
橡皮擦工具 【E】
模糊、锐化、减淡、加深、涂抹 【R】
橡皮图章工具 【S】
刀子工具 【Y】
矩形热点、圆形热点、多边形热点 【J】
切片、多边形切片 【K】
手形工具 【H】
缩放工具 【Z】
隐藏/显示切片 【2】
设置默认笔触/填充色 【D】
交换笔触/填充色 【X】
切换屏幕模式 【F】
菜单命令
新建文件(N) 【Ctrl】+【N】
打开(O)... 【Ctrl】+【O】
关闭(C) 【Ctrl】+【W】
保存(S) 【Ctrl】+【S】
另存为(A)... 【Ctrl】+【Shift】+【S】
导入(I)... 【Ctrl】+【R】
导出(E)... 【Ctrl】+【Shift】+【R】
导出预览(R)... 【Ctrl】+【Shift】+【X】
在浏览器中预览 【F12】
在辅助浏览器中预览 【Ctrl】+【F12】,【Shift】+【F12】
打印(P)... 【Ctrl】+【P】
退出(X) 【Ctrl】+【Q】
撤消 【Ctrl】+【Z】
重做 【Ctrl】+Y,【Ctrl】+【Shift】+【Z】
插入新建按钮(B)... 【Ctrl】+【Shift】+【F8】
新建元件(Y)... 【Ctrl】+【F8】
热点(H) 【Ctrl】+【Shift】+【U】
切片(S) 【Alt】+【Shift】+【U】
查找和替换(F)... 【Ctrl】+【F】
剪切(T) 【Ctrl】+【X】
复制(C) 【Ctrl】+【C】
复制HTML代码(H)... 【Ctrl】+【Alt】+【C】
粘贴(P) 【Ctrl】+【V】
清除 【退格】,【DEL】
贴入内部(I) 【Ctrl】+【Shift】+【V】
粘贴属性(A) 【Ctrl】+【Alt】+【Shift】+【V】
重复(L) 【Ctrl】+【Alt】+【D】
克隆(N) 【Ctrl】+【Shift】+【D】
参数选择(F)... 【Ctrl】+【U】
放大(Z) 【Ctrl】+=,【Ctrl】+(小)+,【Ctrl】+【Shift】+【=】
缩小(O) 【Ctrl】+-,【Ctrl】+(小)【-】
缩放比率50% 【Ctrl】+5,【Ctrl】+(小)【5】
100% 【Ctrl】+1,【Ctrl】+(小)【1】
200% 【Ctrl】+2,【Ctrl】+(小)【2】
300% 【Ctrl】+3,【Ctrl】+(小)【3】
400% 【Ctrl】+4,【Ctrl】+(小)【4】
800% 【Ctrl】+8,【Ctrl】+(小)【8】
1600% 【Ctrl】+6,【Ctrl】+(小)【6】
选区符合窗口大小(S) 【Ctrl】+【Alt】+0,【Ctrl】+【Alt】+(小)【0】
文档符合窗口大小(F) 【Ctrl】+0,【Ctrl】+(小)【0】
完整显示(D) 【Ctrl】+【K】
隐藏所选(H) 【Ctrl】+【L】
显示全部(A) 【Ctrl】+【Shift】+【L】
标尺(R) 【Ctrl】+【Alt】+【R】
显示网格(G) 【Ctrl】+【Alt】+【G】
对齐网格(S) 【Ctrl】+【Alt】+【Shift】+【G】
显示引导线(U) 【Ctrl】+【;】
锁定引导线(L) 【Ctrl】+【Alt】+【;】
对齐引导线(S) 【Ctrl】+【Shift】+【;】
切片引导线(L) 【Ctrl】+【Alt】+【Shift】+【;】
隐藏边缘(E) 【F9】
隐藏面板(P) 【F4】,【Tab】
选择全部(S) 【Ctrl】+【A】
取消选择(D) 【Ctrl】+【D】
整体选择(E) 【Ctrl】+【→】
部分选定(U) 【Ctrl】+【←】
反选(V) 【Ctrl】+【Shift】+【I】
修剪画布(T) 【Ctrl】+【Alt】+【T】
符合画布(F) 【Ctrl】+【Alt】+【F】
选择动画(A)... 【Alt】+【Shift】+【F8】
转换为元件(C)... 【F8】
补间实例(T)... 【Ctrl】+【Alt】+【Shift】+【T】
平面化所选(F) 【Ctrl】+【Alt】+【Shift】+【Z】
向下合并(D) 【Ctrl】+【E】
任意变形(T) 【Ctrl】+【T】
数值变形(N)... 【Ctrl】+【Shift】+【T】
旋转90°顺时针 【Ctrl】+【Shift】+【9】
旋转90°逆时针 【Ctrl】+【Shift】+【7】
移到最前(F) 【Ctrl】+【Shift】+【↑】
向前移动(B) 【Ctrl】+【↑】
向后移动(S) 【Ctrl】+【↓】
移到最后(K) 【Ctrl】+【Shift】+【↓】
左对齐(L) 【Ctrl】+【Alt】+1,【Ctrl】+【Alt】+(小)【1】
垂直居中(V) 【Ctrl】+【Alt】+2,【Ctrl】+【Alt】+(小)【2】
右对齐(R) 【Ctrl】+【Alt】+3,【Ctrl】+【Alt】+(小)【3】
顶对齐(T) 【Ctrl】+【Alt】+4,【Ctrl】+【Alt】+(小)【4】
水平居中(H) 【Ctrl】+【Alt】+5,【Ctrl】+【Alt】+(小)【5】
底对齐(B) 【Ctrl】+【Alt】+6,【Ctrl】+【Alt】+(小)【6】
均分宽度(W) 【Ctrl】+【Alt】+7,【Ctrl】+【Alt】+(小)【7】
均分高度(D) 【Ctrl】+【Alt】+9,【Ctrl】+【Alt】+(小)【9】
合并路径(J) 【Ctrl】+【J】
拆分路径(S) 【Ctrl】+【Shift】+【J】
组合路径(G) 【Ctrl】+【G】
取消组合路径(U) 【Ctrl】+【Shift】+【G】
缩小字体(S) 【Ctrl】+【Shift】+【,】
增大字体(L) 【Ctrl】+【Shift】+【.】
粗体样式(B) 【Ctrl】+【B】
斜体样式(I) 【Ctrl】+【I】
左对齐(L) 【Ctrl】+【Alt】+【Shift】+【L】
水平居中(C) 【Ctrl】+【Alt】+【Shift】+【C】
右对齐(R) 【Ctrl】+【Alt】+【Shift】+【R】
两端对齐(J) 【Ctrl】+【Alt】+【Shift】+【J】
强制齐行(S) 【Ctrl】+【Alt】+【Shift】+【S】
附加到路径(P) 【Ctrl】+【Shift】+【Y】
转换为路径(C) 【Ctrl】+【Shift】+【P】
检查拼写(S)... 【Shift】+【F7】
重复插件 【Ctrl】+【Alt】+【Shift】+【X】
新建窗口(N) 【Ctrl】+【Alt】+【N】
显示隐藏”工具”(T) 【Ctrl】+【F2】
显示隐藏”属性”(P) 【Ctrl】+【F3】
显示隐藏”答案”(A) 【Alt】+【F1】
显示隐藏”优化”(O) 【F6】
显示隐藏”层”(L) 【F2】
显示隐藏”帧”(R) 【Shift】+【F2】
显示隐藏”历史记录”(H) 【Shift】+【F10】
显示隐藏”样式”(S) 【Shift】+【F11】
显示隐藏”库”(Y) 【F11】
显示隐藏”URL”(U) 【Alt】+【Shift】+【F10】
显示隐藏”颜色混合器”(M) 【Shift】+【F9】
显示隐藏”样本”(W) 【Ctrl】+【F9】
显示隐藏”信息”(I) 【Alt】+【Shift】+【F12】
显示隐藏”行为”(B) 【Shift】+【F3】
显示隐藏”查找和替换(F) 【Ctrl】+【F】
其它
下一帧 【PgDn】,【Ctrl】+【PgDn】
克隆并向上大幅推动 【Alt】+【Shift】+【↑】,【Ctrl】+【Alt】+【Shift】+【↑】
克隆并向上轻推 【Alt】+【↑】,【Ctrl】+【Alt】+【↑】
克隆并向下大幅推动 【Alt】+【Shift】+【↓】,【Ctrl】+【Alt】+【Shift】+【↓】
克隆并向下轻推 【Alt】+【↓】,【Ctrl】+【Alt】+【↓】
克隆并向右大幅推动 【Alt】+【Shift】+【→】,【Ctrl】+【Alt】+【Shift】+【→】
克隆并向右轻推 【Alt】+【→】,【Ctrl】+【Alt】+【→】
克隆并向左大幅推动 【Alt】+【Shift】+【←】,【Ctrl】+【Alt】+【Shift】+【←】
克隆并向左轻推 【Alt】+【←】,【Ctrl】+【Alt】+【←】
前一帧 【PgUP】,【Ctrl】+【PgUP】
向上大幅推动 【Shift】+【↑】
向上轻推 【↑】
向下大幅推动 【Shift】+【↓】
向下轻推 【↓】
向右大幅推动 【Shift】+【→】
向右轻推 【→】
向左大幅推动 【Shift】+【←】
向左轻推 【←】
播放动画 【Ctrl】+【Alt】+【P】
用所选填充象素 【Alt】+【退格】,【Alt】+【DEL】
粘贴于内部 【Ctrl】+【Shift】+【V】
编辑位图 【Ctrl】+【E】
退出位图模式 【Ctrl】+【Shift】+【E】
Fireworks中网页切片方法切片在制作网页的过程中占有很重要的地位,切片的成功与否直接决定日后网页制作的进度快慢和网站运行的速度,只有通过大量的练习才能体会切片的含义
一、 Fireworks中按钮的制作方法
二、 切片的作用:
1. 切片是将图片转换成可编辑网页的一座桥梁,通过切片才可以将普通图片变成Dreamweaver可以编辑的网页格式
2. 切片后的图像可以更快的在网络上传播
3. 切片后的图像也是网页中片的主要来源
三、 切片的方法:
1. 切片首先保证切出网页中需要多次修改的区域,例如文字区域
2. 切片图像的大小尽量保持在15K以内(便于网络传输)
3. 充分利用Dreamweaver中的自动拼贴功能减少垃圾切片
Fireworks的高级操作技巧汇总
技巧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】键快速填充颜色。
技巧13:按快捷键【Ctrl】+【F8】,可以创建一个新的元件。
技巧14:按住【Ctrl】键,单击【混色器】面板下方的颜色栏,可以快速切换到不同的颜色模式,
技巧15:在颜色弹窗口采集颜色时,按住【Shift】键可以确保获得的颜色为网络安全色,
技巧16:如果要给辅助线精确定位,可以在辅助线上双击鼠标左键,在弹出的【移动引导线】对话框中输入详细的坐标,
技巧17:在【层】面板中,选中蒙板图标并像移动图层那样按住蒙板图标将其移动到其他位置,这样可以删除蒙板,并且保留下了蒙板对象,
技巧18:使用【文本】工具单击已经创建的文本,待光标转换为文本光标时,按住键盘上的【Ctrl】加键盘的左右键可以用来改变字符间距,按住【Ctrl】加键盘的上下键可以用来改变文本的行距
Fireworks学习辅导教材美工神话——Fireworks网页元素与网页效果图设计
作者:刘涛编著
出 版 社:人民邮电出版社
出版时间: 2008-12-1 字数: 版次: 1 页数: 348 印刷时间: 开本: 16开 印次: 纸张: I S B N : 9787115189059 包装: 平装 本书主要以Fireworks网页效果图设计为主线,介绍网页效果图的设计流程和网页中各种页面元素的设计。书中按照网页的构成元素,如布局、色彩、LOGO、导航设计、通栏设计等进行分类讲解,以丰富的实例帮助读者快速掌握网页效果图的各类设计方法和技巧。
本书从实用的角度出发,将软件使用技能与设计艺术完美结合;从设计构思到作品完成,将经典案例的整个过程一一剖析给读者。学习完本书,读者从中不但可以深入了解Fireworks软件的精妙之处,更能够领悟到更多优秀的设计思想、设计理念和宝贵的设计经验。
本书附带的光盘中提供了Fireworks网页效果图源文件,以及丰富的创作素材,更多资源可以到www.go2here.net.cn下载。
本书适合网页设计、网站制作的相关人员阅读和使用,还可以作为大中专院校相关专业的教学辅导和参考用书,或者作为相关培训机构的教材。