Look Ma ... No Pixels: Production Graphics with Wendy Peck at webreference.com

Look Ma ... No Pixels: Paths in Raster Programs

Paint Shop Pro Node Edit.

Photoshop Direct Selection tool.

We're going to take a break from the menu series this time and head into one that I have been promising for a long time. Paths often sit as the mystery tool even for those who reach high levels of expertise with Photoshop and Paint Shop Pro.

Paths can be confusing to beginners, but also to those who have worked with vectors in illustration programs like CorelDraw, Illustrator or Freehand. Raster and illustration programs work with vector curves in similar ways, but the method and application differs just enough to feel foreign.

It's time to clear away the fog and focus on the vector tools in both Photoshop and Paint Shop Pro. We will take a look at what vector tools can do, how you work with them, but most important, when to use this feature.

Paths can be exported from Photoshop and opened in Illustrator. This, however, is the only capability that raster programs have to save in vector format. It is best to think of vectors in raster programs only for design help, not creating vector files.

It is best to clear up any vector and raster confusion first. An earlier tutorial, Graphic Underworld: Looking Behind the Pretty Pictures, gives a basic tour through vector and raster formats. If you do not understand the difference, start there. However, if do understand how vector and raster formats differ, you have to make another leap to understand vector capability within raster programs. I think this is where most confusion occurs, so we will spend a bit of time here.

Vector programs, like CorelDraw, Illustrator and Freehand work fully in vector format. When the working file is saved, it is vector. In order to turn it into a raster format, like GIF, you must export the file or object.

Raster programs save to raster format. Although both Photoshop and Paint Shop Pro will maintain vector objects within their native formats, you cannot save in full vector format to be opened in vector application. You can work with vector elements between Photoshop and an illustration program, but these are simplistic capabilities. It will be much less confusing if we work from the assumption that raster programs save only to raster format. (We will look at exporting paths from Photoshop for vector use later in this tutorial.)

Resolution is the reason it is important to understand that raster programs cannot truly create vector documents. Vector formats are resolution independent, meaning you can prepare a vector image for the Web, and use the same file to be prepare the art for a high quality magazine, which requires much higher resolution. You cannot do that with a raster image if you have prepared the original at 72 dpi for the Web. Again I refer you to Graphic Underworld: Looking Behind the Pretty Pictures if you are little lost.

So ... while we are going to talk about using vector tools within Photoshop and Paint Shop Pro, please remember that we are ultimately creating raster documents.

About Curves
When you use the drawing tools in a raster program, you are painting pixels. When you use the Pen or Shapes tool in Photoshop, or the Preset Shapes tool and Node Edit window in Paint Shop Pro, you are not working with pixels at all. You are working with lines. We will soon separate the two programs in our discussion, since they are very different, but the basis of the curve function is essentially the same.

You cannot work with vectors without becoming comfortable with Bezier curves. Bezier curves are divided into sections between control points. Control handles located at the control points determine the shape of the curve in each section, and work much like an elastic band. Forgive me the steady motion on the image at the left, but this is one action that is so much easier to show than to put into words. As you move the control handles, the shape of the curve section changes, which is the most wonderful and the most confusing part of bezier curves.

Two types of bezier segments: The top sample is a line, and the lower sample is a curve.

Bezier sections come in two varieties: lines and curves. Lines do not have control handles, because only the end points can be moved. Obviously, if the line could curve, it would not be a line. Curves are the most versatile bezier section type.

The control points in bezier curves can also be set to different types. In illustration programs you can set the points to allow the curves on each side of the control point to act independently, or symmetrically or to act independently but maintain a smooth transition over the control point.

The sample images at the left provide an illustration of various bezier control point types. Note how the symmetric sample maintains a gentle curve on either side of the control point. The smooth sample allows the curve to vary dramatically on either side of the control point, but keeps the transition across the control point very smooth. In the cusp example, anything goes. The curves on either side of the control point are completely independent. Curves that join to lines must have a cusp control point.

Don't worry too much about this point right now, since we will talk about control points when we move to specific software instructions. Photoshop and Paint Shop Pro handle this feature in a completely different way. However, I wanted you to know all the variables that bezier curves offer as background.

Now that you know how bezier curves work, we can move to specific path discussions for Photoshop. Next time we will focus on paths in Paint Shop Pro.

Wendy Peck is a working Web designer and writer living in NW Ontario, Canada. https://wpeck.com

Next page

Look Ma ... No Pixels: Tutorial Index

Paths in Raster Programs
Creating Simple Paths in Photoshop
Working with Paths and Nodes
Creating and Editing Curves
Selections, Importing and Exporting