Swiss Retro Ecommerce Web Elements set for Smashing Magazine, or: Trials, Tribulations and the Pixel Grid

Written by Tech

Posted from: South Carolina

I was just recently asked to design an ecommerce icon set for Smashing Magazine and after a several week long row with Photoshop during which I threatened to set its ruler states to “picas” and leave them that way forever, it’s finally done.

Doing design work for Smashing is terrifying in the way that asking Stephen Hawking to review your long division would be terrifying. You’d hand in your sad little equation, worn thin from your eraser, and pray only for the intelligence to understand all the myriad, cryptic ways in which he’s going to pity you.

Similarly, there are so many killer designers in the Smashing community that every time I go check out the work they’re showcasing I have to get out my drool vacuum just to keep the keyboard dry.

So I sat down to do the best icon set that has ever been created in the history of the entire universe and I ended up with a retro-bubblegum-Swiss-popart set with curled corners that I’m (obviously) rather hard-pressed to describe, and which couldn’t match my personality any less if it was wearing clown shoes and a Flat Earth Society t-shirt. “This set,” I think, “will represent my work to all the people I admire.” And I lay awake and imagine the comments section filling up with “Pfff, these don’t even have kerned laser-aligned ratio layers!”

When you have to Google the basis of someone’s derision before you can form a retort, you’ve already lost.

Anyway, while I’d love to show you the complete set, I don’t wanna steal Smashing’s thunder, so a small teaser will have to do:

No idea when it’s supposed to publish. You’ll probably know before I do.

The most amazing thing about creating an icon set is the carpal-inducing amount of zooming-in required to fiddle with the details. The smaller design gets, the more important the details become. Just in the last year or so, I learned about the dramatic difference in sharpness you get when snapping edges to a pixel grid. And creating an icon at, say, 24×24, every single miniscule pixel has to sit in perfect alignment, or it rebels in the way that chameleons rebel – by partially disappearing. You can see a mis-aligned right edge and top edge on this icon close-up:

Aligning to Pixel Grid and Anti-Aliasing in Photoshop CS5

And when the edge is correctly aligned:

For a dog’s age, I’d been under the impression that the minimum distance you can expand or contract any Photoshop shape is 1 pixel. Technically, this is so – but you can still free-transform the edge of a shape so that it stops between 1 pixel and another on the pixel grid. In order to deal with this, Photoshop doesn’t hard-cut the edges of the shape (by default, anyway) – it makes the offending edge semi-transparent, and therefore, a little blurry. This has something to do with Aliasing and Anti-Aliasing, I understand, and I also understand you can turn various knobs in Photoshop to make your edges edge and your aliases ali, but suffice to say I ended up manually edging all my work, in all five sizes.

The truth is that, to me, aligning to pixel grid is like shaving my legs every day, which is to say, if someone’s already zoomed so far up in my bidness that they’re stroking my calf stubble, chances are good that events will manage to move themselves forward, dull edges or no. And since many of my layout elements will be rendered as CSS, it usually doesn’t make much of a difference. With icons, though, it matters. It really does. Behold at actual size:

Other lessons learned: If you’re using wording on your icons, test your font at the smallest icon size before you begin design. Because certain fonts – and I’m not naming any names here – but certain fonts make “RSS” look like “ASS” at 32×32.