How to Create a High Resolution Vector-based QR Code for Print Production

If you want high-resolution QR Codes for your print material, you’ll be out of luck (for now). Search for any QR Code generator and you’ll only be presented with a range of sizes from small to unusable. Just try to imagine how pixelated a QR code image that’s about the size of your palm on your monitor resized to fit on a large poster or banner. Not pretty. Unfortunately, since there aren’t any vector-based QR Code generators out there right now, we’ll have to do it the screenshot/live trace/live paint way, using Adobe Illustrator. So, off we go…

Step 1: Create your QR Code using an online QR Code Generator

Googling “qr code generator” yields several sites, so I’m just going to pick the first one by Kaywa (http://qrcode.kaywa.com/ … yes, they do say it’s for non-commercial use only, but *we’ll take that into consideration for the time being*). For this example, let’s do something simple like a web address to your landing page or website.

create a qr code

Step 2: Take a screenshot of your QR Code

Since you can’t “Save the image” like you can do most images online (you’ll find yourself saving a php file instead), you’ll have to use your favorite image editor to take a screenshot (Prnt Scrn button on your keyboard) of the generated image. I prefer Adobe Photoshop, since you’ll be able to this on top on the next step, which is…

Step 3: Crop your QR Code image

You don’t have to be incredibly precise to do this, but avoid cutting off any black parts. Once you’ve got it isolated, go ahead and save it as a GIF (2 colors).  The result should look something like this:

create qr code

Step 4: Import your GIF into Adobe Illustrator

First, create a new print document in Illustrator. Next, import the image into your new document. I typically do this by dragging and dropping the actual image file into the new document itself.

create new Illustrator file

Step 5: Create a Live Trace of your QR Code

Step 5 and Step 6 showcase my two most favorite capabilities in Illustrator. Creating a Live Trace is similar to the old school days of laying some semi-transparent paper over your favorite drawing and then tracing it. This is the same concept, but it’s a gazillion times quicker. Below the main menu bar in Illustrator, you’ll see a few buttons including one labeled Live Trace. Next to that button, there’s a little arrow button, which displays more options when pressed. Go ahead and press that little arrow button to display the options dialog for Live Trace.

Next, it’s important to change at least the Threshold, Resample and some Trace Settings in the Tracing Options box. Give the QR Code the lowest Threshold, since it’s just a Black and White image without feathered edges — while we’re at, you can start out with the Black and White mode. Increasing the value in Resample will trace it more accurate, so give it the highest level possible. In the second Trace Settings column, make sure to check Strokes and Fills. You can also play around with the stroke weight/length, area and angle and check the Preview box to see if you can get an even more accurate trace, but I’ve found the default values in the screenshot below to work fine.

Finally, be sure to select Outlines with Tracing from the Vector drop-down menu at the very bottom of the Tracing Options panel.

Live Trace for QR Code

 

Step 6: Colorize your isolated QR Code

After you’ve gone through the Live Trace step, you’ll want to fill in the QR Code with your desired color using Live Paint, which is the button located in the same area as Live Trace.

Live Paint Illustrator

 

Once you’ve clicked it, you should see several selected anchor points for your QR Code. While it’s still selected, you can use your swatches to change the color of the code to your heart’s content. The beauty of it is that the QR Code is isolated, meaning that it’s transparent. That also means you don’t have to stick to the boring black and white version. You can go as wild as dark green and pasty Pantone yellow, as long as you have a good contrast between the two colors (you’ll have to create a square box behind it with a solid color to achieve the different color combinations).

What you do from here out is up to you. You can drag’n’drop it into your InDesign file or Photoshop it from there. You can also save it as an eps file and hand it over to your printing company to add it to your new collateral. Above all, you can resize it to accommodate a billboard if you wanted to, since it’s a vector-based QR Code.

live paint

34 Comments

Leave a Reply

Your email address will not be published.