Back to Top
The nuts and bolts for
Creative web development

Making friends with Bezier curves

If you've come to Fireworks from a bitmap graphics application, you may at first glance find vector graphics counter-intuitive.  One of the more confusing aspects of vector objects are Bézier curves. These allow you to create curved vector objects and are an essential tool in all vector work.  This article is about how to control Bézier curves in Fireworks, how to create the controlling handles for the curves, and how to switch between the different types of handle.  When you master these, you'll have complete control over creating vector shapes in Fireworks.

If you're familiar with Freehand or Illustrator, vector objects will be old friends, though you may wish to follow through this article as a guide to Fireworks-specific controls.

Overview

What are vector objects?

Vector objects are graphic elements defined by a path made up of points connected by line segments (curved or straight).  When you increase the magnification of a vector object, it retains its sharp outline, unlike a bitmap object, which starts to break up into pixels as the magnification increases.  Vector objects may be scaled up and down without losing detail.  They are geometric definitions rather than drawings.  The line segments of a vector object can have properties attached to them (color, stroke width, texture etc), and, if the path of the object is "closed" (that is, if the start of the path connects to the end, to close the loop), you can also fill the enclosed area with textures, color, gradients etc. Anything you can do with a bitmap element you can do with a vector, but quicker and more flexibly, and a great deal more besides.

A vital part of manipulating vector objects is the Bézier curve.  This is a mathematically generated curve that determines the shape of the line segment between two points on the vector path.  Like the French curves used by a draftsman, you can create complex smooth shapes very easily with Bézier curves.  The key to manipulating Bézier curves are the "Bézier handles", control handles that are attached to each point that defines the vector path.

If you use the Pen tool to draw to points to create a simple line segment, the segment defaults to a straight line.  If you activate the Bézier handles on one of the points on the line (see below), you can warp it into a host of different curved arcs.  But this is where confusion starts: creating a handle to control the curve seems at first to be an arbitrary and capricious process.  Bézier handles are weird until you get to know them – after that they become your best friends.

To help you understand how they work, we'll start by describing the various types of handles.  Then we'll show you simple ways to add, remove and change between the different sorts.  After that, it's playtime, and we'll let you loose to experiment on a few vector objects.  Once you've mastered these simple examples, Bézier curves will be one of the most useful things you'll know about Fireworks.

David Nicholls

David NichollsDavid lives in Canberra, Australia. He trained in Upper Atmospheric Physics, but spent longer than he cares to admit as a Science bureaucrat in the Australian Government. He has been building websites since 1997, professionally since 1999. He is the co-author with Linda Rathgeber of "Playing with Fire", contributed the accessibility chapter to Dreamweaver MX Magic, and other bits and pieces. He has academic publications in areas as diverse as astrophysics and fractal ferns. His interests include photography, restoring golf antiques, collecting old
78 records, fern ecology, and he's also a HiFi freak. He teaches astronomy at a local community college."

See All Postings From David Nicholls >>

Share this Article