设计软件造型利器“贝赛尔曲线工具”详解-中国展示论坛

说到Photoshop、Firewoeks、CorelDraw这些设计软件里的“贝赛尔”工具，大家可能会有些陌生，其实就是我们常说的曲线（路径、钢笔）工具。曲线工具在造型和抠图中非常重要，但是很多朋友普遍感觉这个东西有些深奥，操控起来也不是那么方便。也许你看了这篇文章之后，要掌握它就不会觉得太难了。　　由于用计算机画图大部分时间是操作鼠标来掌握线条的路径（好的手写板实在价格不菲），与手绘的感觉和效果有很大的差别。即使是一位精明的画师能轻松绘出各种图形，拿到鼠标想随心所欲的画图也不是一件容易的事。这一点是计算机万万不能代替手工工作，所以到目前为止人们只能颇感无奈。使用贝塞尔工具画图很大程度上弥补了这一缺憾。
　　“贝赛尔曲线”是由法国数学家Pierre Bezier所发现，由此为计算机矢量图形学奠定了基础。它的主要意义在于无论是直线或曲线都能在数学上予以描述。
　　 “贝赛尔”工具在PhotoShop中叫“钢笔工具”；在CorelDraw中翻译成“贝赛尔工具”；而在Fireworks中叫“画笔”。它是用来“画线”造型的一种专业工具。当然还有很多工具也可以完成画线的工作，例如大家常用的Photoshop里的直线、喷枪、画笔工具（如图一），Fireworks里的直线、铅笔和笔刷工具（如图二），CorelDraw里的自由笔，手绘工具等等（如图三）。

- f3 Y  [3 M2 }
　　　

$ x2 `* r) p+ c5 F; P4 p 　
+ H0 a, @8 \& |* ?9 t
图一（Photoshop里的工具）　　　 图二（Fireworks里的工具）　　图三（CorelDraw里的工具）
2 g/ M8 ?% W- @' J& X
' A* [8 a& U% K+ U

2 y3 T# k- O. q: I1 n1 B, E　　用“贝塞尔”工具无论是画直线或是曲线，都非常简单，随手可得。其操作特点是通过用鼠标在面板上放置各个锚点，根据锚点的路径和描绘的先后顺序，产生直线或者是曲线的效果。我们都知道路径由一个或多个直线段或曲线段组成。锚点标记路径段的端点。在曲线段上，每个选中的锚点显示一条或两条方向线，方向线以方向点结束。方向线和方向点的位置确定曲线段的大小和形状。移动这些元素将改变路径中曲线的形状，可以看下图。路径可以是闭合的，没有起点或终点（如圆圈），也可以是开放的，有明显的端点（如波浪线）。 　　特别推荐： 　　[动画图解]Photoshop路径钢笔使用方法　　[视频演示]Photoshop路径工具组 　　Photoshop 路径手册
/ {. |. w% \5 t　　下面我们将从贝赛尔曲线工具的重要概念、基本造型方法、不同设计软件贝赛尔曲线工具造型特点、简单操作示例、设计实例几个方面来详细介绍贝赛尔曲线。　　一、贝赛尔曲线工具的重要概念　　关于“贝塞尔”工具，有两个重要的概念需要了解，那就是“平滑点”和“角点”。
# i: y5 a5 ]! {8 ]6 V* ]" X1 K　　“平滑点”是指临近的那条线段是平滑曲线，它位于线段中央。平滑曲线由称为平滑点的锚点连接，当移动平滑点的一条方向线时，将同时调整该点两侧的曲线段。　　　　　　　　　

　 　　　我们画上面这条曲线，来详细讲解平滑点。　　1.用鼠标在直线方向上点按两个锚点
5 }4 m( u5 Q$ y
9 Y' w0 K: ~7 ]。
3 L8 Q9 U% @% t6 |  D; d　　2.锚出第二个锚点的时候，鼠标按住不放，向下拖移该点，这时就会显示方向线，而曲线是向上方弯曲

。（曲线的变化是和方向线拖移的方向相反）。
$ L. [% m9 `1 r6 i/ o% S　　3.鼠标仍然按住不放，将方向线向上方拖移，曲线下弯
( G# ]; ?2 @5 ^1 h8 s
。
1 b. E0 y; Q  r7 h5 j9 z/ s: j1 e　　4.锚出第三个点，完成一条曲线。第二个锚点就是该曲线的平滑点

。
! {3 P( X2 J2 _; c( _　　5.调整平滑点可以改变曲线形状了

  v: s2 X# a) J7 w* _。
　　“角点”是指它临近的那条线段至少一边是直的，尖锐的曲线路径由角点连接，当移动角点的一条方向线时，只调整与方向线同侧的曲线段。　　　　　　　　　　
6 n; F# d/ ]. X6 {
　　　　角点的操作过程和平滑点一样，了解了它们的基本概念和操作，现在我们演示将平滑点转换为角点的过程。
　　这是选择的一个例子：
/ K/ J& ]3 W2 k" U/ s: d% V( |* Y; A
0 y+ u6 r3 F3 H/ G) J& v  t，鼠标选中平滑点变成一个箭头

，点按鼠标显示方向线，鼠标移到方向线的一头

，按住Alt键拖移方向线
( C, l/ ^7 W- l0 l4 R4 \
，鼠标选中方向线的另一头拖移

+ M8 ^  O0 k) c# i0 n: ^; S，平滑的锚点现在已经变成尖锐的锚点了

  I; V, }* l% \$ o4 U。
　　　另外，我们还要特别讲一下直线，直线也是曲线的一种。如果我们在一个水平面上用钢笔工具描制两个锚点，按两点一线的法则这就是直线，如果我们在此描多个锚点而设置贝赛尔曲线的曲率为零，这也是直线。曲线形状的由锚点延伸出来的隐藏的切线决定，我们可以看图，这是CroelDraw工具里贝塞尔曲线的使用法则。　　　　　　　
. m; Q! k+ p: k3 n! @
8 Q1 i8 z1 i% s　　切线的角度、长度不同，曲线的形状也不同。　　二、贝赛尔曲线工具的基本造型方法
, [2 c3 x8 a' t3 d3 Q0 U6 [" i/ i

/ n% q3 v0 I( o6 |　　使用不同的工具时，虽然它们的贝塞尔工具名称不相同，但都可以用来画出各种路径的图形。例如我们用各种设计软件同时创建一条“S”曲线，它们都是向曲线的隆起方向拖移第一个方向点，并向相反方向拖移第二个方向点。同时向一个方向拖移两个方向点将创建“S”曲线。　　　　　　再看下图。我们分别用Fireworks和Photoshop两种工具来画同样一个图形，通过观察它们的每一个操作步骤，更全面的了解其贝赛尔工具。
1 F7 N2 W# O, z$ K' |3 Y
! k. r" a( h( ]7 t$ u6 |
　　　
, L) y% }# W6 ?0 i+ P* {# }
5 D! h9 X6 ]" ?* d5 W/ O　Fireworks绘制的图形过程　　　　　Photoshop绘制的图形过程
2 ]( W( W; @% v  p
; _% L  d2 n/ r2 M* ^& e- h　　两种工具都是5步就完成画图，并且都有6个锚点，路径相同。所以绘制简单的图形，使用哪一种设计软件，都能达到同样的效果。不过既然是几种软件，那么总有它们相互区别的地方。

# w! u4 g- k2 t1234下一页
+ ?7 S0 h3 j% g

7 v9 w$ }  T1 j1 F
; F% F$ O$ v9 Y三、不同设计软件贝赛尔曲线工具造型特点

　　用Fireworks画笔，描制锚点的时候画笔工具在面板上呈蓝色矩形框，当前选中的锚点矩形框为蓝色实心，描过了的锚点呈蓝色空心。在前一个锚点绘制完成之后，拖移鼠标会显示一条蓝色的线条（橡皮带）描下一锚点，这样一个一个的，直到绘制完成。在绘制最后一个锚点时，如果我们的图形路径不是封闭的，那么在最后一个锚点处，需要双击鼠标结束工作。Fireworks里还有很多绘制曲线的辅助工具如：自由变换工具等，都能帮助我们绘制合意的图形。
　　用Photoshop的钢笔工具时，它的当前锚点使用黑色实心矩形框显示，没选中的锚点呈黑色空心框，而绘制两个临近的锚点它是点按操作，如果在选项栏里我们没用选择“橡皮带”，那么线段路径点按完成以后才显示。选中“像皮带”，其操作过程和Fireworks相同。若要结束开放的路径组件，请在“选项栏”里点按“

”，或按住Ctrl键在路径外点按。若要关闭路径组件，请将钢笔指针定位在第一个锚点上。如果放置的位置正确，笔尖旁将出现一个小圈，点按以关闭路径。Photoshop里面的钢笔工具有几类：钢笔工具，自由钢笔工具，添加锚点工具，删除锚点工具和转换点工具。其自身都有它特定的功能，较Fireworks的画笔工具功能强大得多，但其复杂程度也较高。
1 Z/ w. V& J$ e0 @5 D% U2 m　　用CorelDraw的贝赛尔工具也有它独特的功能和操作法则。例如画直线，选中要使用的工具时鼠标是

1 j5 V1 c3 U. y7 }5 w9 P，点按鼠标定出起始端点，然后移动鼠标指针到需要的位置。注意只是移动，不要按着任何鼠标键。点按一下，描出结束点，一条直线画成。选中状态下的线段路径起点处的锚点比结束端的锚点大，这和前两种工具是有所区别的。画封闭的曲线时，把最后一个节点定在起始节点上，指针变成

，点击一下就会成为封闭图形。CorelDraw按下“空格键”结束画线操作。第二种方法是按键盘“Esc”键强行停止当前操作。这样可以作出一个不封闭的图形。另外在CorelDraw软件里，贝赛尔工具在选项栏中有很多辅助功能可供选择产生各种线条效果，例如在“起始箭头选择器”有多种起始箭头的选择，也可以选择结束处的箭头，或是轮廓的样式。
　　总的来说，每个绘图软件各有其长短，因此不同工具中贝塞尔曲线工具的功能也各有千秋。三种软件之中Fireworks画笔功能相对弱一些，Photoshop钢笔工具功能比较全面，CorelDraw软件和前面两种软件的区别较大。毕竟它们在计算机图形设计技术中各自都有自身的专业目的，因此对各种工具的功能要求不同。Fireworks主要是用在网页图形设计方面，配合Dreamweaver软件使用。Photoshop则是专业的计算机图形设计软件，结合yl-011230-t-Ready设计各种静态、动态的图片。CorelDraw则是具有强大的排版功能，多用于广告设计。
　　下面我们用表格来归纳这三个软件的特点。这里将总结出三种软件各自不同的功能，有它们的相似之处，但是特别需要注意的是各种软件之间很细小的区别，初学者在这些方面比较容易混淆的。（红色字体表示软件之间相同之处）。
! f! {1 Y  `+ K0 U  S. ~


软件名称
Photoshop
5 ]; |) B* b6 m- h6 R7 E; bFireworks
CorelDraw

工具名称
  ?& K2 \6 k7 b* j% D1 Q钢笔
& N0 p5 d5 J9 H& q" K4 n2 P1 p画笔
贝赛尔工具
7 [5 I! n1 R9 T* L/ @+ o4 C, [
快捷键
! Q* B& P( L- j& F6 ~. GP
P
( e, r. I* F+ o# V9 eF5

2 j4 K5 O- `# R3 z, C& _3 Q功能
画直线、曲线，描绘图形的路径
画直线、曲线，描绘图形的路径
8 b/ V1 m  M' {& w* M: k+ A9 k画直线、曲线，描绘图形的路径

0 B# E3 s2 _+ `: Y4 i( s$ m* h% `& yShift键操作
  c+ v* V6 k9 W. n. v+ O7 W曲率按45度的角度变换
! g3 B8 Y( K+ v6 t% e! A. i曲率按45度的角度变换
, {$ G( L3 j$ A, p3 _" N, J进行多重选择
5 d1 p1 {# B2 m5 P4 g
* A1 ]* m/ i8 l+ iAlt键操作
7 @4 S$ e2 }) p) H# P5 w5 P按住描出角点，画直线，选中“橡皮带”可画曲线
* P  L7 `2 B$ K) e% \6 T8 o按住描出角点，可画直线和曲线
按住描出角点，只能画直线

工作时的状态
鼠标呈钢笔状态，锚点呈黑色矩形框
1 I, o& o3 l$ R7 g5 n6 `鼠标呈钢笔状态，锚点呈蓝色矩形框
鼠标呈十字状态，锚点呈黑色矩形框
- h2 R4 @8 j$ x8 Y; ^
橡皮带
/ P8 \3 t3 U: y+ F选中时有，可以不选
有
( L) C" h% ?# G8 ]无
( D2 e7 ]+ r- f- h, i* T. P1 P
1 J: g- a0 X- j1 I* D路径闭合状态
无选择
可选择自动闭合路径
* r1 d! Z( f- C: U可选择自动闭合路径
0 }' r5 A+ x0 i8 o
辅助工具
有
有
1 n7 P! b0 Q# ^4 n有
. M9 J) y6 h. L2 n: k' D5 k
增加锚点
- I( S1 u: [! P9 G4 y7 ~4 l4 P选择添加锚点工具或选项栏里选择“自动添加／删除”选中“钢笔”工具指向锚点单击鼠标增加
+ {" f" `. K! u选中“画笔”工具双击鼠标增加
选择“挑选工具”双击鼠标增加

删除锚点
+ [, ?4 B/ n% l! h+ l
选择删除锚点工具或在选项栏里选择“自动添加／删除”选中“钢笔”工具指向锚点单击鼠标删除
, {4 T1 Y# I4 b4 t
( J- o; V  n# r& L8 u1 X8 f% U选中“画笔”工具指向锚点双击鼠标删除
( j4 R% ^$ ^* U选择“挑选工具”指向锚点双击鼠标删除
4 x: w0 Z; |4 k
3 L! j; @  }2 b调节锚点
/ F+ V+ h8 H, u( @& f' ~选择“转换点工具”或者按住“Ctrl”+“移动工具”
/ L5 M* d& _6 }7 a- O% `) d3 h4 E选择“挑选工具”调节
选择“挑选工具”调节
: ~0 x0 m2 I+ e6 e
" \6 n% M, }7 j7 L退出
按住“Ctrl”键在路径外点按或在“选项栏”里选择“

”
双击鼠标
按下“空格键”或按“Esc”键
% `0 x& ~' ?" `5 X& n7 n　　基本的操作讲完了，现在我们来看简单的操作实例。
/ E& I- B0 T# y7 p4 ^9 b6 }& t7 F
1234下一页

3 y2 e8 Y8 h* L3 @7 q* r

四、贝赛尔曲线简单操作示例
' ?. q, Q- w, D& n
　　下面是用Fireworks画笔用法的实例。　　　　　
- `' y' t9 ?) p1 }
　　右图是文字按曲线路径排列的效果，这是画笔工具最广泛的运用。　　a.先在画板上描绘出一条曲线段。　　b.我们再写好“Fireworks”字样，结合Fireworks里图形的描边，阴影等等功能，制作出同样精美的文字效果。　　c.按键盘Ctrl+A，或选择菜单“编辑”－“选择全部”（Select All），或者点击鼠标右键“选择全部”（Select All），将字样和路径全部选中。　　d.在菜单栏里，“文字”（Text）选项下选择“文本适配路径”（Attch to Path）快捷键为 “Ctrl+Alt+Y”，就可以将文字结合到特殊的路径上，如上图。结合后的文字依旧可以通过Text Editor进行编辑，也可以使用不同的Align 方式定义不同的路径围绕效果。
( ?% U5 ~) ]: q　　在Photoshop和CorelDraw软件里也能制作这种文字效果，只是这两种工具有专门的文本样式插件，制作文本效果非常简便，一般设计师在用这两个软件处理文字时都用文本样式选择。那么在这里就不必过多的讲解这两个软件的文字制作了。
　　现在我们用Photoshop钢笔工具来绘制曲线。
3 {$ }$ N- X* `4 Q: |2 H( v　　1.将指针定位于曲线的起点，并按住鼠标按钮。此时会出现第一个锚点，同时指针将变为箭头。
" a. M6 u, Q; E- C　　2.向绘制曲线段的方向拖移指针。在此过程中，指针将引导其中一个方向点的移动。按住Shift键，将该工具限制为45度的倍数，并且完成对第一个方向点的定位后，释放鼠标按钮。方向线的长度和斜率确定曲线段的形状。以后可以调整方向线的一端或两端。　 　　　

: {0 k( p% q" @# K7 b$ q7 q3 p　　 （沿曲线方向拖移可设置第一个锚点。向相反方向拖移即完成曲线段）
  ~* H# x- ^/ S  r" l　　3.将指针定位于曲线段的终点，并向相反方向拖移可完成曲线段。
, ^: d6 L. b' _9 r3 K( T　　4.执行下列任一操作：
& S7 g- Z4 f! o0 s3 v　　a.若要绘制平滑曲线的下一段，请将指针定位于下一段的终点，并向曲线外拖移。　　　　　
' C; x4 k( u( `) l% T# L/ x% H# R
（向曲线外拖移以创建下一段）
　　b.若要急剧改变曲线的方向，请释放鼠标，然后按住Alt键沿曲线方向拖移方向点。松开Alt键以及鼠标按钮，将指针重新定位于曲线段的终点，并向相反方向拖移以完成曲线段。
1 I) S9 ~3 R+ {- T' p! J5 z% g8 J　　c.若要间断锚点的方向线，应按住Alt键拖移该线。　　　　
. [, U* j5 W/ w9 M& }
　　　（按住Alt键沿曲线方向拖移方向点。松开此键，并向相反方向拖移）
　　更复杂的图形也是用多段连续的贝赛尔曲线构成。用CorelDraw工具方法颇有雷同，这里我们不再具体的讲解了。
: ^$ n! v% I* t1234下一页



2 S9 `) Z! `3 g五、贝赛尔曲线工具的设计示例

- o& r7 C9 \; I7 P6 `. m　　下面我们用“贝赛尔”曲线工具来制作一个成形的实例，只有亲手制作才更能理解它的功能。
　　设计工具我们选择Fireworks。首先需要选择一幅图片，我选了这样一幅建筑图片。
4 p% G, J. v5 y　　　　


* ]2 S1 _3 L' E; ^( T　　我们的目的是在这幅图片的基础上进行构图，这些建筑物本来是具有相当现代的风格，而通过画笔工具的处理之后，它将变成为一幢幢卡通般的房子。这对于完全没有绘画基础的朋友来说，想画房子简直难上加难，但是现在有了画笔工具这一切来的轻松自如。
　　第一步：描摹。选择钢笔工具开始对这张图片描绘轮廓，为了便于我们描摹，最好是将图片的透明度降低一点。
/ `  |4 [6 J2 `1 m& W　　　


% c5 j4 Z' B: u! p8 o) K　　在绘制过程中因为整张图画面较为复杂，因此不要大幅度的弯转曲线，这样我们不好勾勒下一笔。对于轮廓的选择，你可以根据你希望的效果来定，并不一定要把原图中的每一个部分都勾出来，否则会非常花时间，也没有必要。我们勾图的时候，最好把显示比例放大一些，这样可以描出细微的线条。
　　　　
* l1 z, b: B6 E) v7 |
: G0 L) ?4 d8 X1 R6 t( [9 |
" q: w: G. Y( b0 i  U, k& x　　当你按照你的要求勾完轮廓之后，你可以将一些不完善的锚点调整一下，然后选中这些线条，在“Stroke”面板里“Pencil”工具下选择“1-Pixel Soft”使轮廓线条十分柔和，得到较好的勾勒效果。　　　　
# y5 M1 h% Y! Q$ M' {6 I/ V9 Z

　　第二步：成图。我们刚才勾勒出的所有线条都合并在一起了，然后将底图删掉。　　　

4 t2 v9 ^) i5 t, U4 W　　有了轮廓，这就是我们卡通房屋的“地基”。在“编辑”菜单下选择“全选”或是按Ctrl+A全选场景中元素。　　　　

5 D9 N' O" i$ a1 M　　再按下Ctrl+Shift+Alt+Z将它们转换成位图。
% {$ F  g2 O  \; b5 X

5 Q1 R" e$ D. n# L$ @
　　

Layer面板的全选状态　　　　Layer面板合并成位图状态
3 ?& X2 b- u  ]7 ^1 G4 O4 A# a( J
1 y' F  M2 E7 u$ ^0 U" ~　　第三步：填色。按照您自己的意愿填充些颜色就可以了。有一些比较细致的部分填充颜色不能完成，那么这一部分我们可以通过放大场景，利用笔刷工具来完成对有缺陷部位的填补。其间还有些不完美的地方，还可以用其它工具来帮忙。我所完成的最终的效果。　　　　
) i2 b( Q0 S( J! r1 [# r7 L7 G
: |2 {+ X/ B& R1 b- g* D! S+ d
5 e  q  z' x( G9 t
: C! V+ |( `4 ~$ w9 y　　怎么样？最终的成品是不是感觉有点神奇，你也许从来没有想过自己也能制作出这样一幅可爱的卡通图片，当然你并不是仅仅描摹建筑物，画卡通人物也很不错的。这只是一个简单的例子，通过使用“贝赛尔”画线线条，你完全能够自己随意的绘制图形。
, G* N( _$ Z+ y5 w3 a* x# ^7 n
　　对于刚刚开始学设计的朋友们来说，心里很迫切的想尽快掌握其各种技巧，设计出精美的作品来。此时，你可能会因为不了解“贝赛尔”工具，认为要掌握这个东西一定非常困难。但是对于那些已经是设计师的朋友来说，它所带来的方便不言而喻！“贝赛尔”在我们进行设计时用处之广泛，每一位设计师在使用各种图形软件的时候，都要频繁的用到它。本文结合了几种常用的绘图软件，详细的介绍了“贝赛尔”的基本使用方法，是初学者很快能上手。当然每一门技术都有它深奥不易完全掌握的地方，我们在学会它的基本使用功能之后，更多的是要不断的运用，发挥你自身的创造能力，在实践过程中总结出更多的技巧，将它巧妙的运用在你的设计作品里，为你成功的设计当好助手。1234