Design : Illustration : Advertising

Awesome Year-at-a-glance Calendar design

2014-01-23T19:40:00.000-08:00

It’s that time of year again. I’m considering an altogether different approach for a calendar with a non-traditional layout featuring vertical columns for the months. It’s not my idea, but it is quite ingenious. I have to give the credit to Caroline Jourdes for her creative and unique calendar design that allows you to see all of your notes for the month at a glance. The design is pretty cool and buying one of these is much more cost effective for me than taking the time to make my own and then print it.

Making a Calendar in Indesign

That being said, if you’re making a calendar for a client or your employer, designing a calendar in Indesign can be quite tedious if you don’t have the right tools. Painstakingly making a box for every day of the month out of a table, then adding the dates, making sure they’re correct, and triple checking to see if they line up with a real calendar can be a pain. I’ve seen people take the time and effort to create grids out of lines and adjust them accordingly in sort of a homemade matrix in an app like Adobe Illustrator. Unfortunately these rarely work out as expected. It always seems like a lot of overkill when you need to make edits and if you accidentally select a rule or a box unintentionally it can be disastrous if you aren't familiar with the program. It’s easy to critique until you have to make a calendar yourself.

Speaking of which, one of my clients had asked me to make a calendar with the full year on a single side. After thinking about this for about two seconds a quick Google search found the Javascript for Indesign called the Adobe Indesign Calendar Wizard. This awesome little plug-in takes a little getting used to, but I can attest that I’ve had success using it in Indesign from version CS4 (Adobe Creative Suite 4) all the way through CC (the Adobe Creative Cloud edition) on Macs and PCs both. Through trial and error it’s easy to figure out what will work and what won’t for the calendar layout in the plug-in. It's a one-shot deal though, so you have to remember your settings when you want to reproduce the same result (like next year perhaps). If all else fails take a screenshot before you make it happen.

The Adobe Indesign Calendar Wizard script creates a single month calendar quite effectively on a single page. While I’ve tried to create a calendar in an existing text box in a current document with the plug-in without success, in a pinch I was able to create a 12-page monthly calendar in one new Indesign document, export it as a single PDF, then import each page back into a larger file (24x36 poster). At a glance, hanging on the wall it looks okay as your standard run of the mill branded 12-month calendar, but it's not as cool as Caroline’s Calendar.

Styling the calendar

The Adobe Indesign Calendar Wizard plug-in even builds the paragraph, table, and character styles necessary to jazz up the design, so not much effort is involved in tweaking the layout if you're familiar with styles. During tweaks, if the styles change to the point the calendar doesn’t fit in the text box there is a handy script to resize the calendars included in the script set. Very cool indeed.

How I got into Graphic Design

2013-01-11T02:13:00.001-08:00

Frequently students presented with a research project of some sort ask me how I got started in the field of graphic design. They’ll also ask how I learned so much in the various fields I work in and how they can do the same. Short answer is most people who I’ve worked with have gone to school, asked questions, paid attention, and practiced.

That’s not what I did though… I did something else.

A little backstory

You’ll probably not hear a story similar to this. It is my own... it’s not recommended that anyone go down this path. One of the first things I remember drawing in Kindergarten was a dragon. I was always drawing dragons. I would get in trouble during church on the weekends for drawing dragons in the bulletins. “No drawing demons in church!”

When I was little my dad had a motorcycle with Snoopy painted on the side of it. He was always painting toy models. He had drawings of cars he had drawn. When I was about 4 (maybe 5) he sold his motorcycle (rather traded it I think) for a computer… an Interact. He labored one night working on a hangman game. I watched as he was using graph paper to plot pixels (sprites) to draw the artwork. When the game was done it had 6 or 8 words. I don’t remember which, but it was cool to see the little guy he had drawn on the screen. Very basic monochromatic graphics, but I was hooked.

The animator

Shortly thereafter we got a Commodore 64, and there were games for it, and it had color graphics. I had to help program the games from the back of magazines like Compute! and Compute’s Gazette. One day after school I was going through the books on the shelf and came across the manual for the computer. They showed how to make a sprite animation of a balloon. I sat down (I had my own floppy disk) and wrote out the program from the book to create the balloon and saved it. I altered the numbers and codes to change the colors of the balloon. Changed the speed and direction. It was pretty cool.

When I was in elementary school they had a “Gifted Summer School” where they had computer programming classes (unfortunately no art), but there we could use the computers to draw pictures with sprites (pixels). During regular school I was always in trouble for talking because I had finished my work, so drawing and reading helped me to stay out of trouble.

The hacker

From age 6 on I’ve been dabbling in computer programming… I guess the official term for someone who dabbles in computer programming for a living once they’re past 20 is a hacker. Around 11 or 12 I wanted to be a spy. I had a database program that I was using called Paradox that I had written my own tables and interface for because I had copied some of the ships from the Navy’s ARPANET site using a BBS. I was trying to catalog everything I could.

The digital artist

Around the same time we got CorelDraw on my dad’s computer. Before that I was using Gem Artline to draw on the computer. I would draw in CorelDraw everyday and save my files to my floppy before Dad got home.

The car designer

As I got older my interests moved from dragons to jets and fighter planes, then on to cars. I loved the car drawings for concept cars in the magazines. I dug all of the cutaways in Popular Science and Popular Mechanics. About the age of 13 or 14 I really wanted to be a car designer. I wrote to Nissan Design International and asked if they had a scholarship program. They brushed me off and said they were only interested in college students who had their two-year degree.

The engineer

In high school I was heavily interested in programming and robotics. We had CNC machines in one of the tech labs. We had a contest one week between two back-to-back robots to see who could move blocks the fastest. I unplugged the other guy’s robot with my robot, then moved all of my blocks. I designed my CO2 car in an application we had on the computer and used the CNC machine to cut the body out. When it ran it was 3 times as fast as the guy next to me. Some kids at the end of the track picked up the safety barrier and my car blow into 1000 pieces and the CO2 cartridge became a flying projectile. I was disqualified. The other kid went on to win the state championship.

A somewhat formal education

The other classes I took for fun were Photography, Commercial Art / Advertising, and Television production. In Photography we had to use chemicals to process our own film. In Commercial Art it was all by hand (pen and ink, markers, and airbrushes), but we were one of the first schools to actually have a Mac with Illustrator and Photoshop… so when I was done with my work in my other classes I would come back over to the commercial art lab and draw on the Mac or head to the TV lab and do editing or shoot footage. I had a couple of marketing classes by this time over the years (they didn’t even really equate to Marketing 101).

Over the summer when I was 16, I began working at a photo-lab (at Walmart) because I had photography experience with the chemicals. It wasn’t legal for me to be there (I was supposed to be 18 according to OSHA). This was all fine until I started pranking people and showing up late to work. I lost that job because I tore apart one of the film processors and modified some of the faulty pieces (it kept exposing the film because someone had bent the hinge). They were “afraid I would void the warranty” so I was let go. Come to find out later it’s because I had attracted attention to the fact that I was underage.

This left me looking for work.

A couple of my teachers had collaborated on getting me into a few schools. I wasn’t sure where I was going to go (nor did I really care). I ended up with a full scholarship to MIT through a robotics company (they’re out of business now). When I asked my girlfriend if she wanted to go, she said she had no interest in the cold North, so I didn’t go. I had a couple of partial scholarships for art schools that were way out of my price range, so I kept on working because none of the local schools had good art programs.

Desperate times call for…

I looked all over for a job, couldn’t find anything. One day on her way home from town my Mom noticed a magazine company that shared a space with a horse farm. She said because I had experience with the graphic design that I should try to get a job there as a graphic artist. So I went by, and they were nice enough to show me their cut and paste operation and their stat camera. I told them that I didn’t have any experience working in cut and paste. As I was leaving I asked the owner if he had any jobs for a computer programmer. He laughed and said “No, but you can paint my fences with oil.” I thought he was joking, so I went home.

When I came home my Dad asked me what happened with the job interview. I told him about the magazine, and then I told him when I asked if they had any computer programmer jobs the “crazy guy” told me I could paint his fences with oil. Dad got pretty angry and said “YOU NEED A JOB BOY. SO GO DO IT.” So I went back over to the horse farm, pride in hand, and told the man I would paint his fences. About a week went by before I was done.

After I was done I was looking for more money so I asked if he had any other jobs. He showed me a pile of horse manure and gave me a pitchfork. Told me I needed to get all of the manure in the pile into the back of a trailer. I didn’t know the first thing about shoveling shit and well, the wind was blowing, and somehow it ended up all over me. Another kid comes walking up and says “Why didn’t you give him a shovel?” The owner said “I wanted to see what would happen.” (I asked for a shovel and he said they only used the pitchforks because it broke it up better.) So after I shoveled all of the manure into the trailer the owner comes over and says “You know after all I think I do have a computer programmer job available.”

My first professional programming gig

For three months I wrote a state-of-the-art billing and sales tracking app in Paradox (Quickbooks meets Microsoft Project). When I was done with the project I came into the room where they were making the magazine. I told them it was probably a lot easier to make a magazine on the computer. The owner said “you can’t get halftones on a computer.” He showed me a printout from an inkjet. I told him that the programs they had weren’t suited for what they wanted to do, although I did show him that his laser printer would make halftones if we upgraded it. I started freelancing around the same time for a few other advertising clients.

So I went home, grabbed my whole desktop computer and brought it over to the magazine, set it up, and loaded CorelDraw. Then we brought their laser printer down from upstairs. When we printed one of the ad layouts I created we got really close to what he was calling a halftone. Within 2 months I had setup 3 workstations and upgraded two others in that back room and we were making a majority of the ads on the computer. They didn’t have room in the budget for me to be there fulltime so I had to find another job. My other part time job became a fulltime job. Then I had my freelance work on the side as well, so I had little time for the magazine company anymore.

The referral of a lifetime

After a couple of years I came back looking for work and the owner showed me their expanded operation. They had several computers and a network and were a 100% computerized operation. I asked if he had any work. I was about a month or two too late. He had to go The Flyer in Tampa, so he invited me along. While we were there they gave us a tour of the facility and showed us the presses, imagers, and plate-setters, and all of their graphic design stations. One of the guys who I had worked for at the USF Oracle was working there and asked if I was there for the job opening. So I inquired, the horse magazine owner recommended me on the spot, and before I knew it I was working on The Flyer's largest commercial accounts in tandem with their creative director in the creative services department.

I’ve read hundreds of volumes on the subjects of graphic design, commercial art, advertising, programming, video, animation, and photography since, but it's really difficult to apply unless you have the hands-on experience. As I would tell my students at Columbia College in Chicago, you have to practice whether you have a real job or not. I've also worked with hundreds of design, advertising, and illustration professionals over the years and picked their brains and studied their processes. Everyone has something to offer. The rest is history.

On thing though… every time I’m on deadline for some ad campaign late at night I tell myself, “It sure as hell beats shoveling horse shit.”

-Til later,

Chris

Changing a link in a sent e-mail campaign

2013-01-08T21:57:00.003-08:00

Recently I received an e-mail marketing piece from AIGA. About a day later I received another email from AIGA with a title of “Revised Registration: …” and it got me to thinking about why this doesn’t usually happen to me. What has happened is in this case AIGA, the sender, had to resend their e-mail to their entire list with a fixed link, the registration link no less. This not only is a bad thing because some people may unsubscribe if they think it’s spam, but this might also make an email server or filtering service false-positively mark a message as spam and never deliver it to the recipient in the first place.

This is a little technical, but I’ll try and write it out long-windedly in layman terms. Some of the terminologies I’ll use:

Server – The physical box that runs the programs

Webserver – The application on the physical box that handles requests from end users by serving webpages.

Webpage preprocessor – The application executed by a webserver that translates server-side code into a scripted language for the web browsers of the end users or visitors.

List – A list of email address in the mail server.

Sending Service (or list management service) – A contracted service that maintains and manages e-mail subscriber lists, unsubscribe lists, and sometimes user subscription preferences.

Spam – Unsolicited [commercial] e-mail

I receive occasional requests from my clients to edit an e-mail marketing piece once it has already been sent. Usually it’s a price change or some little tweak like a company name being split between lines in some obscure browser, but every once in a while it’s because of something else… a link going down, a website being moved, a photograph that needs to be changed. In regard to the text content, because of the way the internet works, the way e-mail browsers work, and high requirements for [the illusion of] internet security, it would be a “bad thing” if people were able to change things in your inbox once they were filtered by something like an antivirus application, an anti-spam firewall, or corporate e-mail server. If people could change a “trusted” link to something else once received, then they could circumvent the protections altogether. A lot of people will click on anything that looks remotely legitimate anyhow, so they would definitely click on a link they believed to be legitimate because their super expensive filtering system tells them it is safe. Because of this any content that has been sent as HTML or Text-Only cannot be altered in the client’s Inbox (legally and ethically).

NOTE: Mistakes always happen and this is why everyone should thoroughly proofread anything going to a huge list of e-mail recipients. Also rushing to send out an e-mail marketing piece (typically the case) is bad practice. If you can afford a little more time it might save 10% of a mailing list.

There are a couple of exceptions to this rule. You can alter where it goes ultimately if you control the links. This of course depends on the sending service you’re using and the type of system they have in place. It’s always best to use a sending service to handle e-mail marketing pieces because of the risks in regard to having your own email server ending up on a blocklist or anti-spam blacklist (Check back later). Most sending services (the great ones) allow you to provide your own HTML and text-only content. Some require that they make the code for you in their WYSIWYG interface. When you’re setting up the links for a “mailblast” or e-mail marketing piece there are a few things that you can do in order to make edits after the piece has been delivered. The tricks are all done on a web server. Now to do this, you’ll need to know what type of webserver (Apache or IIS) you’re using and possibly what language it’s running (PHP, ASP, Java, etc).

For most of my clients I setup something called a redirect (302 technically). A redirect tells a visiting browser that a page has moved, either temporarily or permanently. When you use a redirect link, not only can you change the link on the server side in regard to where the end user is being sent, but you can also do other things with information from the e-mail. You can now marry their IP address and session information to anything they do on your website. So if you were wondering if that project manager with enormous buying power working for one of the potential clients you’ve been targeting is actually reading your e-mails, now you’ll know, AND you can retroactively pair their IP address presently with your webserver logs or high-level statistics to see what they’ve been interested in and looking at. This is all provided you have the system in the place and the proper people to translate what you’re looking at.

The overall premise

So if we’re plugging a tradeshow promotion, then I’ll setup a link on the client’s website in a custom directory (eg. TRADESHOW_012013).

Some sending services allow you to set off-site links for the mailings in your HTML code and Text-only counterpart. So for the setup, you could for instance make the TRADESHOW_012013 that contains a redirect link with a target folder or alias that goes to a page in an “events” directory called “TRADESHOW-2013-January” when someone selects the link in their e-mail client.

So they would start with a link here:
http://www.somefakewebsite.com/TRADESHOW_012013/

And end up here:

http://www.somefakewebsite.com/events/TRADESHOW-2013-January/

The redirect can be created in the webserver configuration (not so good), the website’s configuration (a little better), or in the code (best) that is executed on the server if you’re using a server-side language.

Option 1.) Dynamic Code Handling – Best Option

If you were to do this with a server-side scripting language like PHP or ASP, the visitor would first (for a split second) visit the TRADESHOW_2013 directory (they might even see it in their address bar), then they would be instantly redirected to the appropriate folder. In order for this method to work properly, the sending service needs to allow you to set your links and they should not be altered in the end code that is presented to the client. This would give you the most control. This server-side dynamic coding approach allows your pages to load faster (overall) because you’re only doing this for certain links.

So what happens if the file original file is no longer available on the server?

Conversely, some sending services actually follow all redirects to reach an end target and only deliver the end user to the content they believe they’re receiving. They’ll rewrite the link in the email content that you provide with their own tracking scripts.(Eg. Although they’re not a sending service, Facebook does this with certain links, so when you paste a link, they actually follow all of the redirects so they can show you the content you’re seeking. This way they don’t have to worry about someone intercepting any of their traffic.) If this is the type of service that you typically use for sending your e-mail marketing campaigns, what will happen is when someone selects the link in their email, rather than seeing your TRADESHOW_012013 redirect folder, they will only see the end page. These are a little harder to control, but not impossible. The problem is you’ll need to make sure the end page doesn’t exist anymore, or qualify someone for a redirect (a little more difficult).

Option 2.) Webserver Scripting – Second-Best Option

This doesn’t need to be a physical file on an Apache webserver because you can perform the redirect in the .htaccess file with mod_rewrite [http://httpd.apache.org/docs/2.0/misc/rewriteguide.html]. In newer versions of IIS [http://technet.microsoft.com/en-us/library/cc732969%28v=ws.10%29.aspx] you can set up a web.config file to use redirects and rewrite maps.

NOTE: Remember because of the way the webserver needs to recognize the request it can take longer for a server to process every single page on the site if you make a list of qualifying redirects in the server configuration file. In short if you make 35 redirects, the site has to make sure that every page on the server isn’t one of the 35 redirects before it forwards people appropriately or serves a page.

One of the resources I use is at webconfs.com:

http://www.webconfs.com/how-to-redirect-a-webpage.php

NOTE: If you omit the lines in the redirect instructions that say “301” (permanent), you will by default create a 302 (temporary) redirect.

Changing Images

Just like changing links in an email, you can sometimes replace an image in a campaign that has been sent, depending on the sending service and the way they manipulate your code. If you are using a service like Vertical Response, you can upload images to a directory on their website and link to them directly. You can also upload the images to your own webserver and then link to those in the code. In my experience with Vertical Response you can successfully alter links and images in the emails once they’re sent. The higher-end email sending service I use is called Campaign Monitor, and they’re a little more tricky because even if you link to an image on a website they will actually pull the image into their archives and link to THAT instead of the original image. Campaign Monitor is all about end-user protections and anti-spam which is excellent, but sometimes when an image contains faulty information or something where no release was obtained it’s a little more of an issue to get it changes after the sending.

When you’re using a sending service that doesn’t alter the end image source links to replace an image all you need to do is to physically replace the source image on the destination server. The next time the email client opens the email they should reload the updated image. (Sometimes they don’t if they use caching).

Worst case scenario you can specify a redirect link in the site’s configuration file that tells the end user the destination for an alternate image.

Illustrator CS6 still not ready for prime time.

2012-12-10T13:06:00.001-08:00

I've been using all of the Adobe products since they came out (or before they were owned by Adobe), allowing me to be one of the fortunate few who has the ability to notice the changes with every new release. Some of the newer releases have created a few changes that actually aren't for the better at all. Since the future of everything related to marketing communications will ultimately involve some sort of digital medium I was shocked at some of the major oversight on Adobe's part in regard to the treatment of pixels in one of their popular illustration programs, Adobe Illustrator. Furthermore the Save for Web feature in Adobe Illustrator no longer has the option to save HTML files for you. It kind of makes me wonder who's driving the agendas at Adobe. If they're willing to sacrifice a few things to save their productivity but tank the productivity of the end users is it really worth supporting Adobe anymore at all? I would say no. Now is the time competition... step up!

Since I'm a long-time user of Adobe Illustrator I almost always use it to generate layouts for the web for websites, email marketing pieces, and sometimes for animations for the web. I was a little shocked when one of my agency clients sent me a file for an email marketing piece (we call them mail blasts) and I was unable to save the file for web with HTML after painstakingly creating all of the necessary slices. This is a huge setback. Not only did I have to save back to an older version of CS5 that I luckily still had installed, but I also had to make sure that my client didn't use any of the newer features in Illustrator like gradients as strokes that could crash the older version of the program. Luckily this time everything went okay.

The deeper I got into Illustrator trying to Save for the Web I noticed a few other issues that actually showed up in CS5. The pixel placement of the elements in the interface plays a huge part in how those pieces will render when they're saved for the internet. Since Illustrator is a Vector program, all of the lines, points, fills, and shading that your use in the document might be assigned a width in the program, but because they're all relative to the pasteboard might not line up with pixels on-screen. So one of the things I noticed is if you have your artwork start at some odd placement like 102.45 pixels, that .45 pixels actually gets split and you'll end up with either a transparent or slightly discolored pixel depending on the save type. This existed in CS5.

Older versions of the applications are much more robust with dealing with the internet files (web formats) in general. They have the ability to position items exactly and when saved out do not have issues with pixels and borders not lining up.

The newest version of Illustrator (at the time of this writing) CS6 has some other issues that it has been plagued with. One being the measurement system overall. If you play with the strokes and watch the positioning of the boxes you'll see what I mean. The strokes actually take size, similar to what you experience when working with strokes on the web. This means that rather than being just a stroke applied to the size of the box, it's actually altering the shape characteristics of the box itself.

A little test:

New Document Dialogue in Adobe Illustrator

Create a 120px x 120px new document. This creates an art board at 0,0. Be sure to turn on your ruler and set the ruler units to pixels. (Note: When you change the size on the New Document dialog box it will no longer say Web or Print because the size isn't stored as a profile.)

Draw a box inside with a 1-point/pixel black stroke that is 120 pixels wide by 120 pixels tall.

Note in the control palette that the width is 120px by 120px, but the x coordinate for the box isn't at 0,0 like intended or in old versions. It's actually at -.5px x -.5px meaning it's splitting the centered stroke (default for Illustrator) in half.

Example from the control palette.

Stroke Palette


Screenshot of final file.

If I select "align stroke to inside" in my stroke palette (left), now the box is off-centered visually in the interface. When the image of the box is exported with the save for web feature the box saved is offset just like the preview (right). This problem happens in the 32-bit and 64-bit versions of Adobe Illustrator for Windows. I've not tested these findings on a Mac but they are more than likely similar.

This brings up the issue though, if the future of everything we're doing from Web to Email to Mobile Devices to Television (movies as well) are all related to the pixel and Adobe didn't think this was a major issue getting this building block of everything under control, then what are we to do? A few of my clients have noticed this issue asked me what to do. They do not have access to the older versions of the software that I have. Furthermore with the nanny-state tactics that Adobe has been doing of late, there may be the possibility at some point in time that I can not use my older software (rightfully licensed) because of some other glitch in their system.

I've been becoming increasingly more and more frustrated with Adobe being on the bleeding edge myself and see no good alternative on the horizon. Since Adobe was allowed to purchase Macromedia, they've effectively created a monopoly on the industry.

Recently I was apprised of the information that although I paid for the Master Collection of the Adobe Creative Suite, I'm not allowed to have the most recent upgrades to the software because I'm not a member of their costly abomination to the modern licensing world, the Creative Cloud Subscription. I refused to be beheld to a company that can raise the price of the software that I'm using for a living while I'm using it simply so they can make a few extra bucks for their shareholders. Anyone considering the Creative Cloud, at the time of this writing even with the discount for already being an Adobe user, I can tell you that it is way more cost effective to only pay for the software outright and then upgrade when you need to, rather than paying for the cloud services. The drawback is that you do not receive the bleeding edge buggy features (which by my latest experiences) that might render your copy of the program you use for work useless.

Until later, -Chris

QR Codes and their proper usage.

2012-05-21T00:00:00.000-07:00

I’ve had a few clients recently ask about QR Codes and what they’re used for. Some already know, but in short, a QR code is a graphic barcode for printing that lets someone with a mobile device retrieve information from the decoded image. The important things in that statement are printing, barcode, and mobile, because your target market is people with phones, and they will have to have something to decode a barcode on their device, and they will more than likely need to take the image from something printed (unless it’s one of those mall tv ad spots).

With that being said, if your website is not mobile friendly (eg. large Flash intro page) do not bother placing a QR Code to that page because people with mobile devices will have mixed results. To create a QR Code you'll need to visit a website like the QR-Code Generator at Kaywa and enter the text or URL that you would like to use and select a size XL works best for print.

On the next screen you'll receive your code in the form of an RGB PNG. Save this file to your local machine. Next we'll want something we can scale infinitely, so that means vector format, and there are a couple of different ways to go about it. Open it in Adobe Photoshop (a raster editor). Once you've loaded the file, convert it to grayscale, then convert that to Bitmap with the following settings to increase the resolution without losing (or adding) information:

Now you should have a larger black and white version of the file. Save the file as a TIFF. Some people can stop here if they're only going to use the image on a business card, but if you want to keep going to create a vector scalable version of this raster file, read on.

Option 1 - Live Trace in Adobe Illustrator

Assuming you have Live trace available, open Adobe Illustrator and create a new artboard. Place the TIFF (File > Place...) so you can see the image on your screen in the newly created artboard. When the image is imported if you have the option for Live Trace, you will see either "Live Trace" or "Image Trace" in the control palette on the top of your screen. If not, skip this and go with Option 2. Once you select trace, you might receive an error or warning like the one below. If so, simply select OK.

The default settings in the old trace panel would give varied results. Also placing the PNG instead of the TIFF would also give varied results depending on the complexity of the URL you're using. To clean up the image a bit, select the "Trace Options" or "Tracing Options Dialog" button to the right of the presets. For this I try to make the artwork as clean as possible using the preview. In CS6 I used the following results for my layout (left) and CS5 (right).

Tracing CS6

Tracing CS5

Next, select "Expand" from the control palette (this makes the paths editable) and save the image as an EPS.

Option 2 - Making Paths from a Selection
in Photoshop (Old Skool)

If you don't have a more recent version of Illustrator at your disposal (or Adobe Streamline) you can take a different approach. Open the Bitmap TIFF in Photoshop. Open your Channels Palette. This should show a "Bitmap" channel. Hold your Command Key (Apple Key) on a Mac or the Control Key on a PC and select the Bitmap layer with your mouse. This should make a marquee selection. This selection will be the white areas, so we'll need to invert the selection by going to Select > Inverse (or Invert). Now go into your paths palette and select the flyout in the upper right-hand corner. Next select "Make Work Path" and you will receive a prompt asking about the pixel tracing tolerance. Select 2 pixels. This will create a path for you. Double-click on the path to name it.

Now you can either use the selection tool (the black arrow) and select the path, then copy it to the clipboard and paste it into Illustrator, or select File > Export > Paths to Illustrator, then open the file you save. Either way you should have a file you can edit in Illustrator that can be scaled up infinitely.

Thanks for reading, and good luck.

Although these are cool, be sure to check out my other blog entry about the Dangers of QR Codes.