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.
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.
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:
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.
A quick snap downward, and we’ve got it.
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.