Skip to: Navigation | Content | Sidebar | Footer


Full Archives

Curve Precision

November 30

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.

Permalink › | 16 comments

5Q

November 23

New today: 5 Questions, in which I square off with Dave Kellam for a set of 5 questions completely unrelated to anything I do around these parts. Previous rounds include interesting people like Michael Heilemann, Khoi Vinh, and Naz Hamid... but the real star of Kellam's 5Q series has to be the unique design work he puts into each interview, which incorporates elements from the respective interviewee's corpus of public work.

Permalink › | no comments

CS2

November 16

I made the decision a while ago that I'd be skipping the upgrade to Adobe's CS2 suite. It just didn't look like it had enough new to entice me. Or at least, enough to justify the price tag.

But the little things that don't make it into the initial marketing push are adding up. Case in point, Smart Objects:

...now you can place a photo in Photoshop and make it a "Smart Object", just select the layer of the photo and go to the "Layer menu" and choose "group into New Smart Object".

When you do this it is linked to the embedded high-resolution original. So now when you resize it's still crystal clear even if you scale it a dozen times.

On one hand, it's great to have that ability in Photoshop, and I'd be using it all the time. On the other hand, it's about time. Illustrator and InDesign have done it for ages, with the "Place" command. It's more an obvious catch-up feature than anything new, which is indicative of my overall problem with this recent upgrade: it feels more like a functionality service pack than a must-have set of new features.

I think I'll continue holding off for CS3, which ought to be around a year from now given a roughly 18 month release cycle. By then, with the new features it offers, we might be approaching something resembling a must-have upgrade.

Permalink › | 42 comments

Push Firefox, Make Cash

November 11

Good news: Google will now pay you $1 every time you successfully refer someone to download and install Firefox (a version pre-loaded with the Google toolbar, of course). US-only for now, it seems.

Firefox has seen an amazing adoption rate, but it has been slowing down. This is a huge boost. Combine the cries of frustrated web designers and developers over the past few years, the plethora of anti-IE sites by designers for end users, the reach of people building web sites who are thoroughly and utterly sick of supporting IE6, and the lure of cash. Any bets on how many percentage points Firefox is about to jump?

Somehow this flew under my radar last week, but I don't see many people talking about it. It seems pretty important. Google has the pockets for this (scamming aside), and given the past year or so of rumbling in their direction from Microsoft, the motivation as well.

Permalink › | 46 comments

Pizza and Passats

November 10

A few things I've enjoyed this week:

Pizza Flyers: The Height of Good Graphic Design?
An objective look at what constitutes design in the world of pizza flyers. Great points, but there are always exceptions. A western Canadian pizza chain, Panago, tried the counterpoint in the late 90's: modernist, sparsely filled masterpieces of flyers. You know what? They're still at it, years later.
The new Passat
A series of tiny, self-contained films about the '120 not-so standard features'. Clever, and sometimes goofy, visual puns.
A List Apart issue 205
You've seen it no doubt, but man, has ALA seen a renaissance of quality lately or what?
Ambigrams
Visual problem solving taken to a whole new level. (via)
RoundCube and TurboDbAdmin
Great free web-based GUIs that leave SquirrelMail and PHPMyAdmin in the dust.
Learning from the Web
Adam Bosworth of Google explains some of the lessons his company (and others) have learned from the web.

Permalink › | 15 comments

IE7 Conditional Comments

November 3

In mid October, the IE Blog urged developers to stop using CSS hacks to workaround IE's problems, and start relying on Microsoft's proprietary conditional comments. I was mostly fine with the new syntax, and it seemed practical enough considering that IE7 is looking to address most of the reasons you'd hack in the first place.

But in the comments it became clear that some of you have discovered non-trivial problems in working with conditional comments—for instance, they don't work in a one-PC, multiple-IE testing environment, and XSL doesn't peacefully co-exist with them. So when I heard certain WaSP members would be meeting with the IE team, I compiled a few direct questions for them to pose. Without further commentary of my own, here are replies from Chris Wilson and Brian Goldfarb of Microsoft, as transcribed by Molly Holzschlag.

How do you propose we test sites relying on conditional comments across multiple versions of IE on a single PC? The current method we have of installing multiple versions of IE does not work with conditional comments.

Chris Wilson replies:

"This is a tough one. Best way of testing IE with multiple installs is using Virtual PC. There is a way on Windows itself, but IE installs its components into system directories. You can cheat the system - add the DLLs in a separate directory named .local rather than going to the windows system. However, this is not actually replacing all of IE, it doesn't maintain a separate set of registry info, and you might end up pulling that information from the new install.

With VPC, you install multiple versions of Windows installs as you have disk space. It's basically best way to do testing on one machine, have a massive machine run VPC with multiple windows installs . . . Need a lot of disk space, and may find some oddities because it's running as a separate virtual machine.

I've done it, used it, but am not an expert."

Why not implement conditional comments in CSS syntax, so we can move our filtering into external files and keep our markup clean?

Chris replies:

"I think it would be great if we provided a mechanism like conditional comments inside CSS. We've [Microsoft] thought about it, we're not going to do it in IE7 because we want to do it in a sane, rational way. You'll want conditional comments to be backward and forward compatible. Tough to design that into CSS so that it will actually work."

How do you propose we use XSL to transform documents that use conditional comments?

Molly says that Chris would like more background about this. So a few solid examples/test cases where the conflict is clearly outlined would be handy right about now. A further question from Chris:

"Not sure what the input is in the initial comments. Are you concerned with input or output? And what are you trying to use the comments to switch?"

Unrelated, but prompted by this discussion: why did it take years and someone outside of Microsoft to discover that it's possible to install multiple versions of IE? Can you confirm we will be able to continue using this method in IE7 and onwards?

Chris responds:

"It didn't take someone outside of MS to discover it. We knew about it a long time, we'd used it in development. We don't do that much anymore. Two big reasons we do not publicize this as a good idea First, unless you copy ALL the DLLs that IE uses, you don't necessarily know which version you're really going to. It kinda works, and if really all you want to do is load some HTML and see how it works, it'll work. If you use JavaScript or networking libraries, timing could get weird and so on.

The other reason is because we get in a lot of trouble in the support side if we tell people to do this - your computer breaks, the Web doesn't work, you call up your computer manufacturer, spend an hour on the phone with them before you tell them about the multiple installs, the tech's don't know what you're talking about, and it causes a customer service nightmare.

You have to know what you're doing, and back it out after testing. We are not to my knowledge disabling anything that would change this for IE7 currently, but can't guarantee it'll work on Vista."

Brian Goldfarb went onto say that they got really strong feedback that they shouldn't push people to do this because of the customer service problems. It's an unsupported process: "Non-supported scenario. This causes damage to support scenarios." It is therefore a practical business decision.

Big thanks to Chris and Brian for their answers, and to Molly for posing them.

(FYI: although I'm still a member of WaSP, consider me more as an Advisory Committee member these days. I'm not currently working with any of the various task forces, including the Microsoft TF.)

Permalink › | 54 comments

Million Bucks

November 2

I'm fascinated with the Million Dollar Home Page. This guy got the idea to sell pixels for a dollar each, in blocks of a hundred, to get him through college. The advertisers get an ad spot for 5 years, and "a piece of internet history." Silly and gimmicky, but that's exactly why it worked, and to date he has pulled in an unbelievable half million dollars.

But, geez, the quality of advertisers sure does say a lot about the type of company that buys into high exposure, flash-in-the-pan marketing like this. Online casinos and pharmacies, marketing courses, and various bottom-rung web hosts and domain registrars: in other words, classic popup window and spam fodder. There must be a connection between the perceived value of running an ad on a site like this and the quality of the products being hawked.

Though you could probably learn quite a bit about effective web advertising by studying the various ads to see what techniques grab your attention, considering they're all static images fighting only each other for eyeballs.

Permalink › | 27 comments

CSS Reboot

November 1

Happy November, it's CSS Reboot day. With over 300 participants, there's a whole lot of fresh pixel goodness to look through. (Some of the sites seem a bit slow, likely due to the traffic.)

As with any project of this sort, people of all different backgrounds and skill levels have contributed. There are a few token efforts, and some feel strangely inspired by others, but overall the bar has been set rather high for this round.

Some of the cream of the crop:

Personal Development
Trevor Delamorandiere's business site. Nice colours, inspired portfolio.
Lucid Crew
A design team from the southern States, rocking the grunge look and the Scriptaculous library. (Check the portfolio)
Cafe Lisa
I liked the last version, and I love the new look. Although you can put me down as undecided whether the fixed frame works or not, it's good to experiment and a personal site like this is the ideal place for it.
Vivified
Bastiaan Terhorst's portfolio site. The grid layout and inventive blog format are complemented by strong photographs and a distinct visual style. Great work, probably my favourite of the bunch.
e-Velocity
Great colour scheme from this design and development studio from Ontario.
Ribic.org
There's just something about Slovenian designer Mitja Ribic's personal site. Strange layout, odd animated GIF annotation, but it all kind of works. I think.

And plenty more I didn't have time to go through. Great effort, all.

Permalink › | 17 comments