Adding photos to logos

Adding images or photographs to logos isn’t high on our recommended list, but here’s basic some tips if you still choose to do so.

Any professional designer who turns out great logos with anything resembling consistency will tell you that vector based artwork is the only way to go. And they’d be bang on the money. Without a The Logo Factor designer editionproperly formatted set of vector versions of a logo, we’re going to be seriously limited in what we can, and can’t do, with it. So what if you want to add some artwork that’s cribbed from a pixel based image, a photograph let’s say, into our logo? We need to convert that bitmap image into a vector based version. At the shop we tend to hand trace everything – that’s still the preferred method of pixel to vector conversion – but there’s also some automated methods that can suffice. Yes, it’s true that the vector-capability boundaries between Illustrator and Photoshop have blurred a little over the years (yes, you can create vector based in Photoshop, but it’s still a little hinky.) Years ago, when it came to quick and dirty (often very dirty) vector conversion, we used a handy little utility called Streamline around the shop. Originally manufactured by Adobe, most of Streamline’s vector conversion properties have been bundled into Illustrator CS and renamed Live Trace but it’s nothing like its predecessor. And a whole bunch of designers are now live-tracing images to their hearts content, adding vector based versions of photographs to their logo creations. We still don’t recommend it. There may been some copyright issues if you didn’t take the photograph and it can often lead to overly complex logos and the resultant reproduction issues. Having said that, perhaps it’s time we took a look at auto tracing and it’s application for illustrative logo design.

Auto-tracing. A little hit & miss.

The main drawback about auto-tracing software is that they tend to create ‘choppy’ graphics, produce far more control points than are needed to construct the graphic and always have issues when it comes to overlaying one vector polygon over another. Most auto tracing programs tend to leave little ‘gaps’ between the objects when they attempt to butt shapes together like a jig-saw puzzle, rather than overlaying one on top of another as a series of layers. I have always preferred manual hand tracing, especially when the desired result is smooth, accurate and one or two point curves. While auto tracing is supposed to be a time saver, cleaning up an auto-traced image to acceptable standards can take more time that hand-tracing from the get go.
auto-tracing-steve-face

Tracing photographs for use in logos.

If you want a quick-and-dirty solution and want to quickly churn out a vector version of a photograph, or want to create a posterized effect that uses choppiness and rough edges to complete the desired result? There’s some pretty decent solutions. We’ve been experimenting with an online vector tracing site, Vector Magic, that allows you to upload .JPGs, .PNGs, and other pixel based images, and quickly convert them to pretty decent vector formats. The results are as good as any commercial desktop application, and in some cases even better. Our first test involved a photograph of some toothy-grinned kid from Ireland (relax, it’s me) that I wanted to use as my personal logo on Twitter & Facebook. The original wasn’t very (it was cropped out of a photo booth image of me and my father from over thirty years ago.) I let Vector Magic chunk away and ended up with the image as shown below:
Vectorizing a photograph
That’s much better than expected. Decent details and vector shape integrity aplenty (the subject matter notwithstanding I guess.) Vector Magic is an improvement over earlier tracing software as it overlays shapes and polygons on top of each other, which alleviates some of our concern about editing and printing problems. If I wanted to design a posterized version of my smiling visage, and needed in in vector format yesterday, this auto traced image is pretty well production ready. Is this suitable for use in a logo? Maybe. If you’re into a construction-paper cut-out Southpark vibe to your logo. Like so..
Adding face to a logoOtherwise, traced photography images generally don’t have enough fidelity to cut it as a logo, despite what Adobe claims about their Live Trace feature in Illustrator. On the other hand, as a nifty bit of collateral design (think Shepard Fairey‘s ‘Hope‘ illustration for Barack Obama) we’re pretty damn close. And that’s right out of the box.

Auto tracing logos into vector based versions?

Over the years, you’d be amazed how many of our clients have ‘lost’ all their logo assets, ending up with one file, usually a pixel based bitmap logo that they nabbed from their website or some old Powerpoint presentation slides. Or how many first-time clients have FAXed their logos into the studio, expecting to turn it into a pristine print-ready image for use on their business card design or letterhead. Most of the time, we need to repair their logo, hand-tracing the image in illustrator, adding new font artwork and converting the logo into four color CMYK or spot color artwork. It’s a time-consuming affair (billed under our logo repair services) so I thought I’d give Vector Magic a shot. If nothing else, it might allow us to avoid logo repair altogether, and at the risk of ticking off the accountants, pass the savings on to the client. As most of the instances that this ‘lost logo’ issue has cropped up are ‘worst case scenarios’, I though we give Vector Magic a workout, using a highly illustrative logo we created for radio personality Steve Dahl a few years back. If any logos was going to give Vector Magic kittens, it would be this one.

photo-logo-for-tracing

Amazingly, Vector Magic did a quite decent job on the character portion of the logo. Very decent. The detail held up very well and the software seemed to be able to ‘guess’ what point went where without too much trouble. This is especially impressive since, at 300PX x 269PX at 72 dpi, the image was fairly small, and low resolution, to begin with.auto-tracing-dahl-faceWhile the artwork probably isn’t of a high enough quality for a full color logo print job or anything, it’s still a decent effort if you’re looking to enlarge a bitmap photograph or convert some simple graphics to incorporate into your design work.

Font conversion

Like most auto tracing software, Vector Magic can handle photographs quite well, but tends to have a major problem when it comes to converting images that contain any typography. It’s an uphill battle too, as the human eye is much more forgiving when it comes to abstract shapes and textures than it is when it comes to recognizing words and fonts. Our brains tend to fill in missing details (where it thinks they go) so that even a low integrity image will appear to the mind as it’s supposed to (think of the “is it a vase or two people talking?” optical illusion.) Font recognition doesn’t work that way at all – your brain needs to recognize, then read the words. Any broken, jagged or malformed lettering is going to look bad. Here’s how Vector Magic dealt with the typography in our test logo.auto-tracing-typography Not terribly well to be honest. Though, and to be fair, this was a problem with Streamline and remains a problem with the Live Trace addition to Illustrator. To be even fairer, Vector Magic seems to handle font recognition better than it predecessors. As nice as that is, it doesn’t matter when it comes down to production time. A photograph or logo image that features lettering is still going to require a large amount of hand editing once the tracing software has stopped doing its thing. And that equates to money. Either yours. Or your client’s.

Practical applications for the designer.

So, is auto tracing of photographs for inclusion into logos worth while? Maybe. If it’s for a quick and dirty turnaround, first stage comp, or to preview a simple logo design idea, yes. If you want to use the photograph for a final logo presentation, hand tracing is still the way to go. In fact, you might even save yourself some time as the effort you’ll spend tweaking points and bézier curves would be better spent starting the design from scratch. However, if you’re after a quick posterization effect (like my toothy visage above) or some illustration backgrounds torn from your fave photo, auto tracing may the way to go.

Tracing photos for use in a logo. Some basic tips.

When playing around with auto tracing software, here’s a couple of things we discovered. The bigger the original image, the better the traced output. That only makes sense as the software has more pixels to ‘guess’ what the shape is supposed to be and where to drop the control points. High contrast photographs tend to trace a lot better than images with less. I also found that by ‘sharpening’ the images in Fireworks (you can do the same thing in Photoshop) the results improved dramatically.

This was originally published in the older version of our Designer Lounge but due to some housecleaning and moving things around, we’ve republished it here to get it out of the way. It’s still a pretty solid piece that nobody found in its old spot, so we’re golden.