《Adobe Fireworks CS6中文版经典教程》——1.2工具面板

本节书摘来自异步社区《Adobe Fireworks CS6中文版经典教程》一书中的第1 章,第1.2节,作者:【美】Adobe公司 更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.2工具面板

Adobe Fireworks CS6中文版经典教程
工具面板可使用户根据要处理或创建的图形对象快速找到合适的工具,如图1.5所示。


001d8b813bb413d5259985826918249f5f95e8d7

选择工具让用户能够选择、裁剪以及缩放或扭曲对象,主要的选择工具为指针工具(screenshot)。

位图工具用于编辑或新建位图对象。用户可使用多个位图选取工具(如魔术棒或选取框)来选取位图;用户可使用橡皮图章工具(也叫仿制工具)进行基本的照片编辑,还可对位图图像中的像素进行选择性地锐化、模糊、减淡、加深或涂抹;使用刷子工具或铅笔工具可绘制位图对象。唯一需要注意的是,不能使用位图工具来修改矢量对象。

矢量工具让用户能够创建或编辑矢量路径和形状。读者会在第一个练习中看到,在画布上绘制矢量形状非常容易。可使用钢笔工具创建自定义形状或路径。需要特别说明的是文本工具(screenshot),虽然有些用户没有认识到,但文本实际上是矢量,在Photoshop、Microsoft Word、Fireworks和众多其他应用程序中都是如此。当然,矢量工具不能用于编辑位图对象。

Web工具集不大,但包含两个非常重要的工具,它们是Fireworks的中流砥柱,让用户能够创建交互式文档以及优化用于Web的图形。用户可使用热点工具创建超链接等交互功能,还可再上一层楼,使用切片工具创建交互式视觉效果(如图像变换或Tap事件)。另外,使用切片工具还可针对Web优化特定的图形元素,确保不同文件格式、质量或尺寸的图形能优质结合。其他两个工具在画布上显示/ 隐藏Web组件。

颜色工具让用户能够指定笔触色和填充色。Fireworks根植于矢量领域,因此不像诸如Photoshop等位图编辑软件那样,它没有提供前景色和背景色等选项。用户可使用滴管工具在桌面的任何地方采集颜色,还可使用油漆桶和渐变工具填充位图选区。另外,用户可交换笔触色和填充色,还可将笔触色和填充色设置为默认值。

最后是视图工具。用户可在3种视图之间切换,即标准屏幕模式、带有菜单的全屏模式和全屏模式(菜单和面板都不可见)。视图工具集的底部是缩放工具和手形工具。另外,可按F键在3种视图模式之间切换。

此处建议用户花点时间到处查看一下,观察各种工具。

提示:
将光标放置于工具面板的任何一个工具图标上,都会提示工具名称及快捷键,如图1.6所示。


764294ef9f03e390bf36d79619c0697744b4b721

隐藏的工具

仔细查看工具面板中的图标,会发现多个图标的右下角有一个小三角形,这表明该图标后面隐藏了其他工具。要显示并选择隐藏的工具,可在图标上长按鼠标。

在矩形工具图标上按住鼠标时,将看到如图1.7所示所有Fireworks提供的常见矢量形状的列表。在该列表中,前3个形状为基本形状(矩形、椭圆和多边形);分隔线下面的形状是一类特殊的矢量,称为自动形状,它们由JavaScript控制,适合用于创建众多常见且复杂的矢量形状,而不要求用户有很高的绘图技巧。可以尝试在文档中绘制一个椭圆。


858b05efd1d61bd90322c28ee7eb125a0d4ac8df

什么是基本形状

“基本形状”的定义与众多3D建模应用程序中相同,即可用于派生其他形状的几何形状或表达式。换句话说,Fireworks基本形状工具能够让用户创建自己的形状。
绘制矢量形状
在任何Fireworks项目中,创建形状都是重要的组成部分。画布是可视工作区,延伸到画布外面的对象看起来像被裁剪掉,但图像信息并未丢失;只要将对象拖进画布,便可显示整个对象。

1.在工具面板的“矢量”部分选择矩形工具。

2.在工具面板中,单击“颜色”部分的填色框(它左边有一个小型油漆桶)以设置矩形的填充色。填充色指的是对象内部的颜色,如图1.8所示。

3.光标将变成吸管形状,单击并在弹出的拾色器中选择浅灰色(十六进制值为#BBBBBB),如图1.9所示。选择颜色后,拾色器将自动关闭,而选择的颜色将显示在颜色框中。


8c8770c1a157116cfaf4f4706fce3daf3109decd

4.将光标移到画布上,可以看到有一个小型灰色气泡,其中显示了x坐标和y坐标。这是工具提示功能在发挥作用,它以像素为单位准确地指出了光标的位置。

5.按住鼠标并往右下方向拖动至少100像素。工具提示将随鼠标一起移动,即时显示鼠标拖动所形成矩形的尺寸。

6.看到坐标显示大概100×100像素后,松开鼠标。

松开鼠标后,矩形仍处于选中状态(Fireworks画布上多数选定对象的周围都有蓝色边框,且每个角上都有小型控制框)。矩形是一个特殊的编组矢量对象,因此在选中矩形时,并不能看到蓝色边框。第2课将更详细地介绍对象编组。

保存文件
进一步做其他工作前,最好保存工作成果。

1.选择菜单“文件”>“保存”。

2.切换到文件夹Lesson01。

3.将文件名设置为webpage.fw.png。

4.单击“保存”按钮。

注意:
用户也可选择菜单“文件”>“另存为”进入完整的“另存为”对话框。Fireworks在“另存为”对话框上有更多文件格式供选,包括JPEG、GIF、拼合PNG及Photoshop PSD等。
调整矩形尺寸数值
用户可使用缩放工具或指针工具等多种方法调整对象的尺寸。要精确到像素,需对属性面板中的尺寸区域及坐标位置进行调整。

1.把光标置于属性面板的宽度栏上。

2.选中宽度数值,修改为180。

3.按Tab键,切换到高度栏,修改数值为400。

4.再次按Tab键,切换到X域,这个数值控制对象与画布左端的距离。

5.修改数值为20。

6.按Tab键,切换到Y域,设定数值为140,如图1.10所示。


6794f840a36d33ea741abeacc228b0dc7aa8ba93

调整矩形四角的圆度
矩形是一个特殊的矢量对象,所以用户只需一个操作,即可对矩形4个角的圆角半径进行对称性调整。现在就来试一试。

1.选中属性面板上的圆度域,将数值由0修改为20,如图1.11所示。


6c98f66b3d51d4fb7d04ed8361108ca4ae08f343

这样就使矩形边缘变成了四个圆角,快而简单。

创建及自定义矩形副本
1.确保矩形处于选中状态(可检查4个角是否有蓝色控制框)。若矩形未处于选中状态,使用指针工具(位于工具面板左上角)选中它。

2.使用快捷键Ctrl+Shift+D(Windows)或Command+Shift+D(Mac)。尽管看起来不明显,此时已为原矩形创建了一个副本。

3.此时副本不在活动状态,选择指针工具,向右平行拖曳矩形副本,此时矩形顶部会出现一条红色虚线。此线为智能辅助线,可帮助用户将相关联的对象互相对齐或与画布对齐。仔细观察,智能辅助线使矩形副本与原矩形顶部对齐。如果用户拖曳矩形副本至过高或过低,辅助线则消失。只要拖曳矩形副本在原矩形顶部3~5像素以下的范围内,副本就会对齐辅助线。

4.拖曳矩形副本,直到X域数值显示或接近220,如图1.12所示。这个数值不必精确,在前面的练习中已经讲解了使用属性面板来调整图形的位置及像素值。


7983e6dac4dd0558ab658ff238a4337df1afb859

5.如果拖曳矩形无法使其处于X为220像素的位置,也可设定属性面板的X域数值来调整。

6.在宽度栏里修改矩形副本宽度为720像素。

7.保存文件,可使用快捷键Ctrl+S(Windows)或Command+S(Mac)。

Fireworks PNG格式

与众多应用程序一样,Fireworks也有其本机格式——修改的PNG格式,让用户能够使用该程序的所有创造性选项。当用户添加效果、图层或页面时,Fireworks PNG文件将存储相应的信息,让用户能够随时打开并轻松编辑文件。

然而,这可能让新用户感到迷惑,因为还有一种标准的拼合PNG格式,该格式适用于众多图形应用程序。保存文件时,Fireworks在弹出菜单“另存为”的“保存类型”中使用 “Fireworks PNG”和“拼合PNG”来区分这两种版本。选择“保存”,Fireworks将默认保存为本机格式,而不给出保存格式的选项。

对于含可编辑对象的图像文件,Fireworks CS6在PNG文件扩展名前增加了.fw扩展名。用户保存编辑完的文件时可注意到这一点。.fw扩展名是可更改的,只在用户将包含可编辑元素的文件“保存”或“另存为”时出现。

尽管.fw扩展名在文件名中无足轻重,但在分辨可编辑的本机Fireworks PNG文件及拼合PNG文件时它大有用处。事实上,几年来已有不少Fireworks设计师使用.fw扩展名为其可编辑PNG文件做标志。

  • 0
    点赞
  • 1
    收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值