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 responses

  1. Hi Michael, have a look at http://blog.qr4.nl, it is in English and makes multiple vector format QR codes in colour.

  2. Thank you, this is absolutely perfect!

  3. Great tutorial, thanks!

  4. Glad you liked it!

  5. Carmen Glovsky Avatar
    Carmen Glovsky

    Mike–This is just what I needed. Thanks so much!

  6. Thank you for the tutorial. This has been a great help!

  7. Thank you sir. Works great!

  8. Thank you Carmen, Sy and Brian for the nice comments! I have since found a much simpler/quicker solution at http://keremerkan.net/qr-code-and-2d-code-generator/ which automates all of these steps =)

  9. Christina Avatar
    Christina

    Just upgraded my Illustrator from CS4 to CS5.1 and they rewrote all the math on the tracing options. To my horror, the preset tracing options I set for QR codes rendered garbage. I am SO glad you posted this online. The only thing I’d add is if your final render is still not quite squared, tweak it with Path > Simplify a bit. THANK YOU!!

  10. Awesome! =) Glad you got it tweaked for your use. CS5.1 is so nice. Love all the added features in PS and AE.

  11. …or you can just get the plug-in for Illustrator

  12. yep, that would work, too. if you know of any free ones, please share!

  13. Thanks so much Michael. this was a fantastic tutorial. really easy to read and follow. I feel like I’m a bit of an expert myself now (not!!). Very reliant on specialists like you to help me sort these things out.

    many many thanks,

    elizabeth

  14. You’re welcome, and I hope you have a happy Valentine’s day today! Thank you for your kind words =)

  15. Hi Mike, thanks for the tutorial! I’d like to rotate my QR code, but no matter how I try, it ends up having jagged edges. Would you be able to tell me how I can get a slightly tilted QR code with smooth edges? Thank you so much!

  16. Hey Ella – Go ahead and try this QR code generator http://keremerkan.net/qr-code-and-2d-code-generator/, using the EPS output type, and see if you can tilt it then without those rough edges. If you need help using that generator, just reply again and I’ll post a quick tute =)

  17. Thank you! It worked. I appreciate your instructions!

  18. Mike, is it possible to do this in adobe photoshop CS5?

  19. Hey Marni – No, unfortunately this only works with AI. Photoshop’s really just for editing pictures. It has a few vector capabilities but nothing like AI. I suppose you could redraw the whole QR code in PS using the vector squares tool, but that might take you a while.

  20. Thank you for that, The info you have given is useful. I need a HR QR code for putting in a brochure.

  21. Your welcome!

  22. Hi,

    another alternative I found is an Applescript application that do this operation right in illustrator just in one click: it’s called “QRCode4AICSx” google it or search it on Adobe Exchange (original source code was written by Kazuhiko Arase http://www.d-project.com/index.html)

    Cheers, Eric

  23. oooOOOooo… nifty =) Thanks for the comment!

  24. thanks, helpful tutorial

  25. Glad it was of good use =)

  26. Ok, kids, here is the real tutorial for you:

    1. Right-click-and-save OR PrintScreen
    2. Open the file in Photoshop, crop the QR code, and save as *.psd file (default Photoshop format)
    3. Open that *.psd file with Adobe Illustrator – and you get the vector QR code. DONE!

  27. Yes, Marni, of course. From my previous comment:

    1. Right-click-and-save OR PrintScreen the QR code
    2. Open/insert it in Photoshop, crop the QR code, and save as *.psd file (default Photoshop format)
    3. Open that *.psd file with Adobe Illustrator – and you get the vector QR code. DONE! 🙂

  28. Michael, Photoshop is a professiobal tool for graphic designers, you can create brochures, flyers, various images/forms/shapes from scratch. It is WAY more than “just for editing pictures”. 😉

  29. @Stahlratte – Haven’t used your method before, but I like it =) The drawbacks that I see with this are that 1) you can’t customize the actual QR Code itself like I described in my tutorial above, and 2) you don’t get transparency either, so you’re always stuck with this B&W version. It’s not bad for most use-cases, but I can see several instances where you would want to get a bit more creative than this =)

  30. I also mention an even quicker method up in a comment by using this link – http://keremerkan.net/qr-code-and-2d-code-generator/ which completely bypasses launching any Adobe product =)

  31. Ok, this I can’t agree on with you. Although I have used PS several times in the past for smaller posters/personal projects, there is no way that any professional print designer would use Photoshop to create, oh I don’t know, a billboard poster or anything larger than 16″x20″ poster… that filesize would be INSANE! Every designer I’ve worked with uses AI by default, because you’re using vectors (ie. scalable method) *just in case* the material needs to be reproduced on a larger scale. This is not easy to do in PS. In a lot of cases, you’d have to edit all your various images/forms/shapes so they wouldn’t come out blurry.

  32. Super guide thanks!

  33. Amazing, ERIC; I tried it; it works well; Thanks for sharing!!!

Leave a Reply

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