QR Codes and their proper usage.

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.

Adobe Software Training in Chicago

Adobe recently released Creative Suite 6 (containing Photoshop CS6, Illustrator CS6, Indesign CS6, Dreamweaver CS6, and Acrobat X) earlier this month. After downloading and installing it became apparent that there is a significant difference between this version and the previous versions of CS5 and CS 5.5. One of my clients was asking about the learning curve and where to go learn the new version since she didn't have the money to pick up the software, install it, and learn it on her own free time, and learning the software on the job was out of the question since her company would not spring for the new version. My suggestion was to take a look at training courses with a company that offers hands-on training in a classroom environment using the software, then get the company she works for to pay for the Adobe Creative Cloud subscription to make it more cost effective for her to get access to all of the Adobe products including Premiere and After Effects.

The next day, my friend and colleague from Columbia College Chicago,  Michael Riordan, mentioned his new training center Digital Design Lab in Oak Park, Illinois, just outside the city of Chicago that specializes in teaching Adobe Creative Suite applications. With Mike's expertise and years of experience in Adobe Photoshop, Illustrator, Indesign, and Quark XPress in agencies throughout Chicago, he has a skillset that would help anyone in the industry to learn what they need to stay current on the most recent applications from Adobe.

If you're in the Chicago area and are looking for courses to learn Adobe software, visit the Digital Design Lab website and check out their services today.