21游戏网
您的当前位置:首页绘制矢量图形

绘制矢量图形

来源:21游戏网




Forpersonal use only in
studyand research; not for

commercial use

螁蚄

蚄袇3.1 矢量图与位图

虿羇

蒈袂.矢量图形

膂薇矢量图形使用称为矢量的线条和曲线(包括颜色和位置信息)描述图像。编辑矢量图形时,修改的是描述其形状的线条和曲线的属性。矢量图形与分辨率无关,因此在对图形进行移动、调整大小、更改形状或更改颜色等操作时,不会改变其外观品质。

芇螄.位图图形

薃袂位图图形由排列成网格的称为象素的点组成。图像由网格中每个象素的位置和颜色值决定。编辑位图图形时,修改的是象素,位图图形与分辨率有关,放大位图图形会使图像的边缘呈锯齿状.



芀节

羄莈Fireworks可以创建和编辑矢量图与位图。

莅膄3.2 绘制矢量路径

螈螁

薁肈

薆羇

羂芃 矢量路径的绘制主要包括:直线、曲线、自由路径。

虿膀.绘制直线



莃袈操作步骤:

1.

2.

3.

4. 芇蚅单击工具箱中的线条工具

5.

6.

7.

8. 薃蚅在“属性”面板中设置笔触属性

9.

10.

11.

12. 羅薀在线条的起始位置按下鼠标左键不放,拖至直线终点处,松开鼠标左键,在

画布上画出直线。

羃蕿提示:拖动鼠标的同时按住 Shift键时可以画出水平、垂直或与水平、垂直方向成

45度角的直线。

肈螆.用钢笔工具创建路径

膀螃操作步骤:



1.

2.
3.

4. 袇芃单击工具箱中的“钢笔”工具

5.

6.
7.

8. 薁荿在“属性”面板中设置笔触属性和填充属性9.

10.
11.

12. 薆袇单击画布上的不同位置,可以画出由线段组成的直线路径。13.

14.
15.

16. 羂袂如果鼠标单击后不松开,而是拖动鼠标,这样画出来的路径就是曲线路径, 通过调整曲线的两条控制线可以设定曲线的弯曲度。
17.

18.
19.

20. 莅蚃中止绘制开放路径:在结束点双击鼠标;中止绘制封闭路径:将鼠标移至起 始点上,鼠标指针变为一个小圆圈,单击起始点。

莃肀修改路径上的点操作步骤:

1.

2.
3.

4. 莈蚅点击路径节点选定工具,选择矢量图形

5.

6.
7.

8. 蒀芄改变节点执行以下操作:

?
?
?



? 膇膂把角点变为曲线点:选择路径上的一个点,拖曳直到出现点手柄,角点变为 曲线点
?
?
?

? 袁螀把曲线点变为角点:将鼠标移至节点,鼠标变为,点击节点,曲线点变为

角点

羆蚆3.增加/删除路径上的点,执行以下操作:

?
?
?

? 节莃增加节点:将鼠标移至路径,鼠标变为点击鼠标左键

?
?
?

? 罿薁删除节点:将鼠标移至节点,鼠标变为点击鼠标左键

蚂薀.绘制自由变形矢量路径

螇螈操作步骤:

1.

2.



3.

4. 肃螅从“钢笔”工具弹出菜单中,选择“矢量路径”工具

5.

6.

7.

8. 蒆羁在“属性”面板中设置笔触属性
9.

10.

11.

12. 芀芁拖动以进行绘制。若要将路径为水平或垂直线,在拖动时按住Shift键。13.

14.

15.

16. 芅薅释放鼠标按钮以结束路径。若要闭合路径,将指针返回到路径起始点,然后释 放鼠标按钮。

蚁袃练习3-1
1) 在画布上画出直线,画出水平、垂直或与水平、垂直方向成45度角的直线。2)用钢笔工具创建开放路径、闭合路径、直线与曲线路径。

3) 用钢笔工具编辑路径上的点,把角点变为曲线点;把曲线点变为角点;增加与删除路径上的点。

4)用矢量路径工具绘制自由矢量路径。

芈莀

肂螇3.3 绘制矢量形状

肇薆

蒃羂

袆衿



薀薇使用形状工具可以绘制矩形、椭圆、多边形、星形以及其它特定的几何形状。形

状工具又被分为“基本形状”和“特定形状”。(见右图)

薅蚈. 绘制矩形

羁莄 操作步骤:

1.

2.

3.

4. 蚈薃单击工具箱中的“矩形”工具

5.

6.

7.

8. 莁芈在“属性”面板中设置笔触属性和填充属性;

9.

10.

11.

12. 蒆蒅在画布上要绘制矩形的位置的左上角按下鼠标左键,拖动鼠标直至所需要的

大小。

13.

14.

15.

16. 螂蒂松开鼠标,矩形绘制完成。

膅羂 提示: 按住 shift键并拖动鼠标则绘制正方形;按Alt键并拖动鼠标绘制的矩

形以鼠标起始点为中心点;按住shift+Alt键则绘制以鼠标起始点为中心点的正方形。



膃羈.绘制椭圆形

芈薆操作步骤:

1.

2.

3.

4. 芀袅点击工具箱中的“矩形”工具,在该工具按钮上按下鼠标左键不放,在弹出 的菜单中选择椭圆工具。
5.

6.

7.

8. 羇莂在“属性”面板中设置笔触属性和填充属性;9.

10.

11.

12. 蚁蝿在画布上要绘制椭圆的位置的左上角按下鼠标左键,拖动鼠标直至所需要的 大小。
13.

14.

15.

16. 螆薈松开鼠标,椭圆图形绘制完成。

膂羃提示: 按住 shift键并拖动鼠标则绘制圆形;按Alt键并拖动鼠标绘制的椭圆形以鼠标起始点为中心点;按住shift+Alt键则绘制以鼠标起始点为中心点的圆形。



薅螁.绘制多边形

薃葿使用"多边形"工具可以绘制出从三角形到具有360条边的任意正多边形。操作步

骤:

1.

2.

3.

4. 薈莅点击工具箱中的“矩形”工具,在该工具按钮上按下鼠标左键不放,在弹出

的菜单中选择多边形工具;

5.

6.

7.

8. 蚀莆打开“属性”面板;

莆芀



肀艿3.在“属性”面板中,执行下列操作之一来指定多边形的边数:

?

?

?

? 肅蒆使用“边”弹出滑块选择325个边。

?

?

?

? 蒁蒄在“边”文本框中输入一个从3360的数字。

膈蚀4.在画布上要绘制多边形的位置按下鼠标左键,拖动鼠标直至所需要的大小,松开

鼠标。

袂羀 提示:若要将多边形的方向为 45度增量,在绘制时按住Shift键。

袇蒈.绘制星形

芃薂使用"多边形"工具可以绘制出从三角形到具有360条边的星形。操作步骤:

1.

2.



3.

4. 蚆莃点击工具箱中的“矩形”工具,在该工具按钮上按下鼠标左键不放,在弹出 的菜单中选择多边形工具;
5.

6.

7.

8. 莀螀打开“属性”面板,从"形状"弹出菜单中选择"星形"9.

10.

11.

12. 蒅芅""文本框中输入星形顶点的数目。
13.

14.

15.

16. 螁羅选择"自动"或在"角度"文本框中输入一个值。接近0的值产生的角长而细; 接近100的值产生的角短而粗。
17.

18.

19.

20. 蒈螂在画布上要绘制星形的位置按下鼠标左键,拖动鼠标直至所需要的大小,松开 鼠标。

膂蒀提示:若要将星形方向为按 45度的增量变化,在拖动时按住Shift键。

芇莇.绘制特定形状

薃肃操作步骤:



1.

2.

3.

4. 羅节点击工具箱中的“矩形”工具,在该工具按钮上按下鼠标左键不放,在弹出 的菜单中选择需要的自动形状工具
5.

6.

7.

8. 羃羇在画布上拖动鼠标绘制形状或在画布上单击鼠标左键以按形状的默认大小放 置形状。
9.

10.

11.

12. 肈莈将鼠标移至的“自动形状”上菱形的控制点,拖动控制点可以改变形状的某 个特定变形属性。

膀蒅 提示:大多数“自动形状”控制点都带有工具提示,描述它们会如何影响自动形状。将指针移到一个控制点上可看到描述该控制点控制的属性的工具提示

袇蚁练习3-2
1)绘制矩形、正方形
2)绘制椭圆形、圆形
3)绘制多边形
4)绘制星形
5)绘制圆角矩形、箭头等特定形状。


蚇薆膅3.4 绘制自动形状

羂薄

莅肁

莃蒇




莈芇使用Fireworks的“自动形状”面板可以绘制一些智能形状。操作步骤:

1.

2.

3.

4. 蒀蚂选择窗口→自动形状,显示自动形状面板 5.

6.

7.

8. 膇蒀将一个自动形状图形从自动形状面板中拖到画布。9.

10.

11.

12. 袁膈拖动控制点来编辑自动形状。

羆莈练习3-3
1) 绘制自动形状“时钟”
2) 绘制自动形状“框”

罿罿3.5应用笔触

蚂羈

螇肅

肃膃

蒆蚃 笔触又称为描边。在 Fireworks中用户可根据需要选择与设置各种笔触。笔触可以应用到矢量路径、矢量图形或文本上。通过设置笔触属性,可以使下一个绘制的矢量对象具有新的笔触属性;也可以在绘制完对象或路径后对其应用笔触属性。



薅芆

芀虿设置笔触方法:

1.

薀莇

2.

笔触设置选项

3.

芅膇在画布上选择一个矢量图形或在工具

4.

箱中点击矢量图形按钮;
5.

6.

7.

8. 蚁蒅在属性面板上点击“笔触种类”框打
开菜单选择需要的笔触类型 ;
9.

10.

11.

12.

芈肂推动笔尖大小右边的滑块或直接输入

数值设置笔触粗细;

13.

14.

羁羀

15.

肂荿点击笔触颜色框,打开颜色样版(见右

16.

下方图),

采用以下方法之一选择颜色:

· 用颜色吸管在颜色预览窗或屏幕上

选择一种颜色

· 直接输入的网页色数值(例:#738EA7)

· 点击取消笔触按钮,取消笔触

· 点击自定义颜色按钮打开调色板设

置自选颜色

17.

18.

19.

20. 肇羄选择笔触应用到路径上的位置;
· 路径内——是指将笔触填充在路径
之内
· 居中于路径——将笔触填充在路径
之上
· 路径外——将笔触填充在路径之外
21.





22.

23.

24. 蒃蚄要想改变笔触边缘的柔化效果,可以
推动“笔触边缘”滑杆。向上推动可以
增加路径边缘的柔化程度。

25.

26.

27.

28. 袆蒁点击笔触纹理框打开菜单可以选择需
要的笔触纹理;向上推动滑杆可以增加
笔触纹理的强度。

蚈聿练习3-4
1) 设置笔触的种类、笔尖大小
2) 设置笔触颜色:在颜色预览窗中选择一种颜色;打开调色板设置自选颜色。

3)将笔触边缘柔化
4) 对笔触设置纹理
5) 取消笔触

蒆芅3.6 应用填充

螂节

膅薈

膃袈

芈肂 Fireworks内置了4种标准填充方式:单色填充、抖动填充(Web仿色填充)、图案填充和渐变填充。可以改变填充的各种属性,包括颜色,边缘,纹理和透明度。

芀蒁. 单色填充

羇羇

蚁薈


螆膄 单色填充是使用单一颜色对矢量路径、图形或文本进行填充。操作步骤:

1.

2.

3.

4. 膂螃选择要填充的对象
5.

6.

7.

8. 薅蚁在填充面板的类别下拉列表中选择“实心”
9.

10.

11.

12. 薃肅点击填充颜色框,打开颜色样版,采用以下方法之一选择颜色: ·用颜色吸管在颜色预览窗或屏幕上选择一种颜色
·点击自定义颜色按钮打开调色板设置自选的颜色
·直接输入的网页色数值
13.

14.

15.

16. 薈膅选择边缘种类:实边、消除锯齿或羽化(如设置羽化还要设定羽化的程度)17.

18.

19.

20. 蚀袁若需要在填充上添加纹理,在纹理下拉列表中选择需要的纹理,并设定纹理 强度

莆肀.抖动填充

肀螅 为了保证颜色在各种类型的浏览器上都能正确显示,Fireworks提供了Web仿色填充,即混合两种Web可靠颜色来模拟一种非可靠的Web颜色。操作步骤:

1.

2.

3.

4. 肅羂选择要填充的对象
5.

6.

7.

8. 蒁肀在填充面板的类别下拉列表中选择“网页抖动”9.

10.

11.

12. 膈葿点击填充颜色框,打开颜色样版
13.

14.

15.

16. 袂薅选择源颜色框,在颜色预览窗上选择一种颜色
17.

18.

19.

20. 袇肄选择第一或第二仿色颜色框,在颜色预览窗上选择一种颜色21.

22.

23.

24. 芃莂如果要使用颜色透明,勾选“透明”选项

蚆罿练习3-5
1) 设置填充为实心,用颜色吸管从屏幕上其他图形上吸取颜色
2) 选择边缘种类:实边、消除锯齿、羽化
3) 在填充上添加内置纹理与自设纹理
4) 设置抖动填充,混合两种Web可靠颜色来模拟一种非可靠的Web颜色



莀芆. 渐变填充

蒅膅

螁蒀

蒈莈渐变填充是使用两种或两种以上的颜色按照一定的组合规律来填充对象。

膂肆设置渐变填充

羃羂 操作步骤:

1.

2.

3.

4. 荿袃选择要填充的对象

5.

6.

7.

8. 螁螈在填充面板的类别中的“渐变填充”下拉列表中选择一种要使用渐变填充方

9.

10.

11.

12. 蝿螇如果要编辑渐变色,单击“填充颜色”按钮,打开“编辑渐变”窗口



?
?
?
? 螄羄添加颜色样本:单击渐变色阶下面的区域
?
罿
??
? 袆羁添加不透明样本:单击渐变色阶上方的区域
?
?
?
? 薃蒁删除渐变中的颜色:将样本块从"编辑渐变"弹出窗口中拖走
?
?
?
? 芇薇设置或更改颜色样本的颜色:单击颜色样本,从弹出窗口中选择一种颜色?
?
?
? 莂肅设置或更改不透明样本的透明度:拖动透明度百分比滑块,0表示完全透明, 100表示完全不透明。

?
?
?
? 蚈肀使用预置渐变色方案:打开预置下拉菜单选择
?
?
?
? 肁袀调整填充颜色之间的过渡:用鼠标将颜色样本块向左或向右拖动。

聿芇变形和扭曲填充

膄袃对渐变填充移动、旋转、倾斜和更改。操作方法:



1.

2.

3.

4. 芆蒂点击工具箱中的,选择具有图案填充或渐变填充的对象,该对象上或其附

近会出现一组手柄。
5.

6.

7.

8. 袃莀拖动这些手柄调整对象的填充。

?
?
?
? 蚇羈在对象内移动填充:拖动圆形手柄,或使用"渐变"工具单击填充内的一个新 位置
?
?
?
? 蚂袄旋转填充:拖动连接手柄的直线
?
?
?
? 肇薀调整填充宽度和倾斜度:拖动一个方形手柄

蚄蝿练习3-6
1) 设置填充为渐变填充,选择圆锥形,对渐变填充进行移动、倾斜并调整填充宽度。2)设置填充为放射性渐变,添加或删除颜色样本。

蒈螈. 图案填充

蒃羅

衿羃



节膈图案填充是使用图案位图重复拼接来填充对象。操作步骤:

1.

2.

3.

4. 羆蒈选择要填充的对象
5.

6.

7.

8. 羁螃在填充面板的类别下拉列表中选择“图案填充”9.

10.

11.

12. 莇肁在填充图案下拉列表中选择要使用的图案名称13.

14.

15.

16. 肄蚈如果要选择外部图案进行填充,从"图案名称"弹出菜单中选择"其它",定位 到要用作新图案的位图文件,然后单击"打开"。新图案即按字母顺序添加到" 案名称"列表

螈羅

螃螄练习3-7
1) 设置填充为图案填充,从内置图案中选择一种图案
2) 选择外部图案作为图案填充,调整填充图案的宽度与高度

腿腿本章要点




薂肇· 绘制矢量路径

芆螅1)绘制直线

2)用钢笔工具绘制矢量路径
3)用笔刷绘制自由矢量路径


莁袅·绘制矢量形状

蚆薂使用形状工具绘制矩形、椭圆、多边形、星形以及其它特定的几何形状


莃螁·绘制自动形状

肇蒆打开Fireworks 的“自动形状”面板可以绘制图框、时钟等智能形状

使用属性面板上的笔触选项可以设置矢量图形的

膂蚃·应用笔触

笔触颜色、笔尖粗细、笔触种类、笔触边缘、笔触纹理

1)单色填充
·应用填充 2)抖动填充
3)图案填充
4)渐变填充

.

.

.



.

.

.

.



仅供个人用于学习、研究;不得用于商业用途。

Forpersonal use only in study and research; not for commercial use.

Nurfür den pers?nlichen für Studien, Forschung, zu kommerziellenZwecken verwendet werden.

Pourl 'étude et la recherche uniquement à des fins personnelles; pas àdes fins commerciales.

толькодля людей, которые используются дляобучения, исследований и не должныиспользоваться в коммерческих целях.

以下无正文

Forpersonal use only in study and

research;not for commercial use

显示全文