studio-6-logo-vectorization

Vectorizing a logo from low-resolution raster images can be a painstaking affair. Here’s a look at the step-by-step hand conversion of Studio 6 – simultaneously one of the most secretive, and infamous, fake logos of all time.

So You Think You Know LogosWas watching the documentary “Our Man in Tehran,” last weekend. You may not be aware of this version, but you probably know the fictionalized Hollywood movie Argo – directed by and starring Ben Affleck – that won an slew of Oscars back in 2013. Both tell the story of the 1979 Iran hostage crisis, and how the CIA hatched an elaborate plot to get six of the embassy staffers out of the country using a fake movie and a fake movie production company as a ruse. The movie company was called Studio 6 (it was so convincing that rumor has it that Steven Spielberg submitted a script to the pseudo film house.) Anyhoo, the documentary featured some still images of the material produced by the CIA to bolster their Hollywood bonafides – movie scripts, posters, trade magazines and yes, even a Studio 6 logo. I figured that would be a great addition to our So You Think You Know Logos series, and went about trying to assemble the images off the internet. Trouble is, there aren’t any big ones to use as a lead. Sure, I could find images of stationery.
studio 6 letterheadsThere were even leather portfolios.
studio 6 attache case miscBut not a pristine logo in sight. That wasn’t really an issue – I’d just create a vector version from a smaller but fairly clean image, right? Not so fast there either. All the versions of the logo were pixelated as all get out, and thanks to photography angles, distorted all to hell.
studio 6 business cardsCreating a decent version was going to be a little bit of a challenge, and figured it would be a good feature to show folks how this sort of stuff is done. And here we are.

Our source file.

Crappy bitmap jpg of logoSure, there are online vector tracing websites. A bit hit and miss to begin with, and they require a really decent bitmap for the chance of a hit. Illustrator has a live trace feature too, but without a fairly pristine image to work with, it tends to go home to mama half way through, and whatever files it does create are point-happy and shape redundant. Alas, we’re just going to have to vectorize this puppy by hand and because the image is so bad, use a lot of guess work and assumptions to lead us.

What we know. What we can assume.

studio-6-logo-vectorization-step-1Because the logo we’re working with is pulled from a photograph of a business card, there is perspective distortion built in. We’re going to have to work around that. There are some things we can assume even though we can’t actually see them. The 6 icon is made up of film so those bits and pieces should all be the same width. Film also features sprocket holes and we know they’re square and equidistant. We can also assume that the spacing between, above and below the film strips is equal too. We can start by laying down some rough guides based on those assumptions (2.) While we’re not entirely sure about the angle of the 6 icon corners, we can assume they’re the same, so we can add guides for those too (3.)

Filling in basic details and grid work.

studio-6-logo-vectorization-step-2By approximating where the film sprocket holes are, we can start dropping them into position. Using align by height, we can also make sure they’re uniform in their distribution (4.) We can use spacer squares to make sure that film artwork we’re going to create will be equally spaced, regardless of how it looks on the original image we’re working from (5.)

Cloning similar shapes.

studio-6-logo-vectorization-step-3As we’ve already figured out that the angles and widths are uniform throughout the icon, by creating one film strip (6) then cloning and rotating it, we can start to build the film icon as it (probably) should look like. We’ll use the squares to adjust for uniform spacing between the bits and pieces (7.)

Ignoring our guides.

studio-6-logo-vectorization-step-4At this point we’re assembling the film strips based on their relationships to each other, not by the roughed-in guides we laid down at the beginning of this exercise (8.) By using one ‘master’ version of the film and its clones, we can start trimming back the strips to their correct position (9.)

Finishing up.

studio-6-logo-vectorization-step-5We have all the bits and pieces and just need to align right, left, top and bottom to make sure everything is accurately placed. Once we place the crossbar film (11,) we’re about 90% finished the icon. It’ll still need a little bit of tweaking for finalization, but you can see we’re very very close now (12.)

The typography.

font bitmapVectorizing typography is a little trickier. There are a couple of scenarios, from best to worst they are 1) The logo uses an off-the-shelf font and we can simply swap it out, 2) The logo uses a modified off-the-shelf font that we can reverse engineer or 3) The logo uses a font that we don’t recognize or is so badly represented impossible to tell. The later applies to this logo (some of you may recognize the font – I sure as hell don’t.) We can use What The Font to try and identify it automatically –
what the font identifyingNo match. Not really surprising. We know that this logo was designed back in 1980/81 and either used Compugraphic typsetting, Letraset sheet lettering or was done by hand using ruling pen and Brainbridge board or rubylith overlay. Worse, it looks like the font on our business card was also embossed when printed, making our sample so poor that it’s next to impossible to identify or gauge with any certainty. Vectorizing this font will involve a lot of guess work.

The typography

studio-6-logo-vectorization-step-6Once again, we can assume some things to help us move along. The clearest letter is ‘O’ so we’ll use that as a guide for aspect ratio and corner curves. The ‘D’ looks like the ‘O’ with an ascender. The ‘U’ looks like both letters with the top crossbar cut out. So we’ll do exactly that (12.) We’ll apply the same methodology to the remaining letters, ‘S’, one of the more difficult and ‘T’, the worst in our sample. Still not happy with the T, but it matches the original image, uses the same widths, angles and curves as the other letters, so it’s the best we’re going to get (13.)

A few final tweaks.

studio-6-logo-vectorization-tweaksWhile the spacing between the film strips is equal and accurate, it still has distortion built in from the bottom up (13,) so we’ll need to tighten everything up according to how the original looks. This will change the corner angles slightly too, so we’ll have to adjust, but as long as they’re uniform everything should fall into place nicely. We can also align some of the sprocket holes across the 6 icon to tidy things up. The font seems too fat (caused in the original image by swelling of the embossing?) so we’ll dial that back a little too and center the entire shooting match (14.)

The final result.

studio-6-logo-fixed-vectorNot too bad, considering what we had to work with. Still not happy with the T, but it is what it is (besides, this vectorization is for a silly blog post, not hanging in the Louvre.) We don’t know the original color of the logo – eye-dropping off the original image is pointless as this might have been a white business card to begin with, illustrating how far the color might have shifted. The logo probably started off as a red, or an orange but we have no way of knowing for sure. Doesn’t really matter anyway, because now we have a pristine vector version of the Studio 6 logo, we can make it whatever color we feel like:
studio-6-logo-variationsIs this perfect? Probably not. Is it very close? You betcha. And as far as I know, it’s the cleanest version on the Internet as of hitting the publish button on this post. What does the CIA think of this little bit of tinkering with their logo? No idea, but if stories in the news about NSA surveillance and web traffic monitoring are half-true, they already know about it.

Some random trivia.

• Studio 6 got its name from the six people the CIA planned to help escape from the Canadian ambassador’s house, where they had been holed up since the US Embassy takeover.

• The fake move name Argo comes from an old knock-knock joke: “Knock-knock.” “Who’s there?” “Argo.” “Argo who?” “Arrr-go-f**k yourself.”

• As part of the plot, the CIA obtained a script, advertised the film, printed business cards, and rented and staffed a Hollywood office in case anyone in Iran checked up on the story.

• The office they rented had recently been vacated by Michael Douglas. He had just completed filming of The China Syndrome.

• It’s been rumored for years that the set-up was so convincing that Studio 6 received scripts for proposed upcoming films. Among them, Steven Spielberg‘s upcoming fantasy blockbuster, E.T. the Extra-Terrestrial.