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: https://blog.nielsen.com/nielsenwire/?p=31688).

How do I create a 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  https://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:

 

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: https://upload.wikimedia.org/wikipedia/commons/a/a5/QR_Code_Structure_Example_2.svg)

 

Distorting

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

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

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.