May 25, 2012

QR Codes with Style

We have all seen these new little bar codes invading all forms of printed and online marketing materials. QR (Quick Response) codes are a two dimensional bar code originally developed by Denso Wave (a subsidiary of Toyota) in 1994 to track vehicles during manufacturing. They can hold a relatively large amount of data and can be scanned at high speeds. In terms of practical marketing use, they have proven somewhat underwhelming in the United States, but I believe with a little style tweak via Adobe Photoshop, QR Codes can be a nice addition for re-enforcing your branding efforts. Keep in mind that 50.4% of the US population now has a QR Scanner in the form of a smartphone on them at all times (Source: http://blog.nielsen.com/nielsenwire/?p=31688).

How do I create a QR Code?Example QR Code

This is actually the really easy part. Create your QR Code by visiting one of the myriad QR Code generating websites online. I have a personal preference for  http://qrcode.littleidiot.be as they have a slick interface and offer a vector EPS as one of the output types. If you are creating a URL (hyperlink) QR Code it is highly recommended that you use a shortened link as the source. The least amount of data that you encode into a QR Code, the better. I have found that Bitly uses the best compression even over the Google URL Shortener (goo.gl) that has a built in QR Code Generator for their web apps.

How can I style my QR Code?

For all the following examples, I used a vector QR Code from the littlidiot link above which was imported into Adobe Photoshop as a shape layer and then stylized. All of the example QR codes work, and I invite you to try them out!

Inherently QR Codes are not the most exciting things to look at (black on white square boxes), but luckily they are very forgiving. First it is essential to understand how a QR code is “read” before starting to lay on the colors and filters:

 

QR Code Diagram

QR Code Diagram

As you can see, the four larger boxes are used to position and align the code, while the black, white, black, white pattern is used for timing on the x and y vertices. After the reader knows the position, then the version, format, and quiet space is decoded, and finally the actual data is read.

(Source: http://upload.wikimedia.org/wikipedia/commons/a/a5/QR_Code_Structure_Example_2.svg)

 

Distorting

QR Code distorting with color gradient overaly

QR Code distorting with color gradient overlay

Turns out that those position and alignment boxes do not need to be perfect squares in order to be read. In fact, the whole QR Code can be warped to a certain degree and still be read. In this example I used a Smart Filter in Photoshop with a 35% Spherize applied (Filter > Distort > Spherize) along with a light to dark red gradient overlay and a subtle drop shadow.

 

Cutouts

QR Code with cutout and background pattern

QR Code with cutout and background pattern

Another fun thing with QR Codes is that all the data sectors do not have to be seen in order to work. In this example I inserted old John boy. You can play around with your QR Code and logo (or other brand symbol) to find the exact spot and size that works with your QR code. This does take some trail and error to get correct, so make sure to test with multiple devices and scanner applications before going to print. This design also demonstrates that you can use patterned backgrounds and inner shadows with your QR Codes.

 

 Adding Dimension

QR Code with heavy bevel and emboss

QR Code with heavy bevel and emboss

Even heavy filters that visually distort the actual data can be used. Here I have applied a whole litany of filters including Bevel & Emboss, a pattern overlay, and a drop shadow. I have also added an irregular background with a metal gradient that adds more distraction. This QR Code can still be easily scanned and opens the door wide for other enhancements to make QR Codes part of your branding.

 

What DOES NOT work

QR Codes do not work with a dark background and light foreground

QR Codes do not work with a dark background and light foreground

At the time of writing, most QR Code Readers can only interpret “black on white” bar codes. That means that the foreground code must be darker than the background for the scanner to recognize and interpret the data. I would strongly suggest not reversing the colors as in this example unless you specifically state what operating system / device / and reader application will decode your QR code.

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>