A Perfect Illustration Style

We’ve been redesigning our site. What can I say. New year.

As the work has progressed, we’ve honed in on what resonates with us and what doesn’t. (We’ve done quick redesigns of our site a half dozen times over the past 9 years… but this time we are creating something that will last.)

The goal: timelessness. The advent of retina-quality graphics have reminded us that computer-based design can be beautiful. Not the kind of pseudo-beauty that you allow for, provided that the viewer’s imagination can “smooth out the pixels” or “compensate for the jaggies” or such. You really can make a website that holds up to standards higher than print.

This is Real Art.


Because the best way we’ve found to show what makes our designs unique involves a great of illustration, I wanted to move in a more intelligent direction. A workflow is needed that lets me make a custom illustration for every type of popular browsing device, along with various other illustrations to bring the design to life, in a simple and repeatable fashion. Showing the generic image of a pile of devices? Just not acceptable.

Ew. No thank you.

If we’re going to seriously hold ourselves to a “better than print” standard, the fussy attitude is required. There are no excuses for buying stock art here. This is it.

I’ve never been completely satisfied with the quality of things I draw and scan in. I’m not that great on paper, and the process seems too slow to be feasible. Also, it should be noted that I use a graphics tablet. That helps. Were I using a mouse, a scanner would be a necessity.

I want something that has simple lines, but is also able to perfectly crop screen shots. We’ll have to show a lot of websites living inside these illustrations, so that has to work. They need sharp edges.

illustration1
It’s nice, but the lines are thin and scrawny.

Drawing with a 3 pixel, 100% smooth brush in Photoshop seems pretty good. I turn off pressure-sensitivity, as I want the strokes fairly even. Yet in the end, I find that the result looks too soft for my taste, and anyway it’s not a vector. I want something that can scale to displays that have no visible pixels, so this doesn’t seem to be the right way to do it.

illustration2
At least it has a good crop on the screen shot. Interesting.

So I’ve got a layer with the ugly devices, and we’re tracing on a blank layer above that. I then take that newly-drawn layer into Illustrator, to let it auto-trace my lines…

After a little tweaking, I love how this looks. The edges are tack sharp on this retina MacBook, and the flow looks even. Where lines intersect, there is a visually pleasing welling-up of ink. It really has a nice look to it.

illustration3
Yes, please. Just look at that character.

But we have to then export these all back to Photoshop, since the web is still pretty much pixel-based. The decision has to be made as to when we place the screen shots. I do so in Illustrator, since it seems like it will have the best result. And it does, but that requires now that we use both Photoshop and Illustrator just to prepare one screenshot for the site.

illustration4
No we’re not building a retro-bowling-alley app.

It’s worth it. These images have a timeless illustrative feeling, and they’re very pleasing to the eye. I’m honestly not sure how much of a difference a retina display would make, but probably a pretty big one.

If you play around with the process a little, you can get all sorts of interesting qualities to the images.

illustration5
The lines are wavy, but they’ll do.

If that’s the process it takes, so be it.

What we’re building here is something we want to repurpose for things we can’t even foresee. Perhaps we suddenly wish to make a giant print ad with an illustration of this character. Maybe it’s part of our branding. It would be great to be able to throw together whatever was needed from these vectors for anything we were building.

illustration6
Our show will be up all of February!

We’re pretty excited to tell you more. Stay tuned over the coming weeks, as we share more details about our process as we get ready to launch our redesign.

Raymond Brigleb

Creative Director, dreamer, partner, father, musician, photographer. Has been known to ride the rails. Pulls one heck of a shot.