Skip to: Navigation | Content | Sidebar | Footer


Weblog Entry

Curve Precision

November 30, 2005

Word of the day: bezier. As in, the curve. Er, even more specifically: the vector path-shaping tool built into software like Illustrator and Freehand.

Though I still swear by Photoshop for site mockups and graphics work, I’m not exactly uncomfortable in Illustrator either. I’ve been spending more time in it lately, thanks to some work that demands it. (Yes, Fireworks is good too, if you’re okay with the UI. I tried, but I’m not.) What I’m finding most interesting is the shaping of curves, and how your eye can pick up even the most minor of differences and imperfections.

For the uninitiated, the curves that make up a vector shape are controlled by individual points, which each have a pair of handles. Moving the points and adjusting the length or angle of the handles affects how the curve is rendered. The practical reason for this is that when you use your mouse to modify a point, you are actually modifying a complex mathematical equation that describes the shape of the curve. Because it’s an equation, and not a set of individual pixels, you can scale vector images as small or as large as you’d like without losing detail.

So, the issue here is that you can fudge imperfections with pixels when you’re dealing with the web, but if you’re designing a logo or graphic that must scale up gracefully, you need to be sure you’re building it properly. That means spending a lot of time zoomed in to 3200% or more.

Illustrator’s bezier curves allow precise adjustments, albeit in a roundabout sort of way. A stock install of Illustrator allows for sloppy placement of points and curves, but for numeric precision you need to start relying on the grid. Hit View > Show Grid to turn it on, and then View > Snap to Grid to get your points and handles conforming to it. You may as well spend the time learning the keyboard shortcuts, because you’ll want to switch back and forth quite often.

I’m going to use a customized letterform as an example, but this applies equally for illustrations and other imagery.

Example of distorted paths in R letterform

Here’s a shape that needs some work. Notice how trouble area 1 is sharper than it should be, and trouble area 2 is causing the curve it describes to round upwards. The result is that the curve around the top right shoulder of the R is thinner than the vertically opposed curve, which not be an issue at a smaller size, but could be quite noticeable when printed a few inches high.

Aligned to the grid

First thing’s first, we should align the letterform to the grid; notice how the top left corner now sits flush on the major grid line. To adjust trouble area 1, I also selected the far right point. The bottom handle appears to be lining up flush with the bottom of the middle horizontal stroke, so it would seem that if I were to adjust the top handle to snap to the top stroke, the geometry would even out. And so it does:

Selected point

Now if I zoom in, I can see that trouble area 2 isn’t that far off, it’s just not flush with the grid.

Zoomed trouble area 2

A quick snap downward, and we’ve got it.

Animation of downward adjustment

Okay, so, I kind of cheated with this example and created a geometric letter (based on Avenir) that nicely aligns its major strokes to the grid. That’s going to be the exception by far, rather than the rule. In most cases it won’t be easy to snap major points to the grid without distorting the shape of the letter or illustration when adjusting. In those cases, you have to work on a more localized basis and align points against each other, rather than against the entire letterform.

And you may have noticed the optical difference in thickness between the horizontal stroke and the curved stroke. Having a consistent thickness across the entire curve is really tough, and not something I’d care to often attempt. It makes me appreciate a little more the amount of work that type designers face when creating a new font.


November 30, 14h

To each his own, I suppose. I’m the opposite, know Fireworks like the back of my hand, but have trouble with the interfaces in Adobe products. Nice writeup, by the way. It’s definitely applicable, no matter what vector program is being used.

November 30, 15h

The real magic is what a difference it makes :)

Nick Toye says:
November 30, 15h

Precision is perfection.

November 30, 16h

I’d never think of doing that to tell you the truth, too small of a detail. Although after reading this, I bet I’ll be doing this with the next logo I make.

5
jordan says:
November 30, 16h

When I work in Illustrator, I set up guides for nearly everything I do and always work at 200% or higher (usually closer to 1600%). I’m an absolute perfectionist when working on things for graphic production.

December 01, 01h

I agree with you Nick that “Precision is perfection” great example do you have any others you can show besides this one like a photo image?

7
Bertje says:
December 01, 08h

Precision might be perfection but ‘geometrical’ precision does not need to be. When I first started out I did this same geomatrical alignment to grids with a mathematical precision. Because I agreed with the assumption that precision is perfection. But what is mathematical perfect is not always right to the eye. It is o so true that your eye can pick up even the most minor of differences and imperfections. But think about kerning and why we have fractional widths and system layout in Photoshop (and other programs).

So if the point of the article is that the details do matter, I agree. If the point is we should align things properly, preferable to a grid, I don’t.

8
DaveMo says:
December 01, 12h

Back in the day when I used Freehand, Illustrator and Fontographer a lot, I used this same sort of technique.

Here’s another cool tip for keeping your stroke or element widths the same for whatever you’re working on (this technique is like, nearly 20 years old…):
Create a circle element with a diameter equal to the width you’ll be needing to replicate. Then use the circle element as “gauge” to keep your horizontal, vertical, diagonal and curve widths consistant.

Of course nit-picking typographers will point out that even “single stroke” letterforms will have very subtle differences in stroke width in their curves and diagonal elements.

Another thing they’ll point out is that when creating larger size letterforms that may be used for printing, when you have a areas where acute angles meet - say the crotches of letters like K,M,N,V,W,X or Z - You’ll need to create what’s called an “ink trap”. This is a little extra sharp point of negative space that cuts into the letterform. This is to allow for ink spread during printing and keeps that angle looking crisp and sharp after printing. Sometimes you’ll see them at the corners of some right angles as well.

I also believe, that you might find the opposite applied where sharp points need to be maintained, so that a letterform’s corner might actually have a little extra pointyness to it, but I’m not entirely sure of that one. (Been a while since I dabbled seriously in typography.)

December 01, 18h

Most excellent covering of this topic. It definitely brings to light some more complex concepts in a simple way. Well written, bravo, pip pip, and all that rot.

See, I almost never bother to go into that kind of detail. I’ve worked on some incredibly precise graphics, but honestly have only had to bother with something like this maybe once or twice.

A web designers best friend are the blur and stroke tools. Hehe…

10
Mr Bezier says:
December 02, 08h

“the vector path-shaping tool built into software like Illustrator and Freehand.”

Photoshop has the ‘Bezier’ build in too but far more less-advanced than the forementioned Illustrator.

December 04, 08h

At first time I didn’t give any attention to this. Than I try it at own.. So now i think that insight on curves and vector shaping is very useful thing.
Thanks!

Nick Toye says:
December 04, 16h

Maybe it is the tools that are not perfect then, is it me but does photoshop not even recognise pixels when you snap with a marquee.

December 06, 11h

It’s not just you - they don’t snap with a marquee.

An excellent bezier lesson - it’s worth combining it with circles @ 1600% zoom to get the best of both worlds.

At least we’re not trying to design fonts in photoshop!

kvnmcwebn says:
December 07, 13h

for the part about getting consitent width around a curve.

You could try working with strokes sometime and then using Object> path> outline stroke.

December 15, 11h

I’ve seen many designs and illustrations that don’t have anything aligned that should be. Many times designers don’t know how to use guides or the grid.

My preference often times is using Smart Guides in Illustrator (Ctrl-U to toggle). The let me align points at right angles to eachother very easily. Some times the smart guides get in the way so the hotkey becomes a must.

16
Eric Hayes says:
December 16, 19h

Ok, I tried it. At first I thought, “bah! grids just get in the way.” I must say they definately help in a couple areas. Beside getting curves precise, I think they’re helpful in getting letters kerned just right. Even if things don’t line up exactly on the grid, the grid still gives a reference to judge space between things. IMHO.