QR Codes For Print?
Sat, 2011-09-10 12:03 — steve.mcdonald
So there are many reasons to create and use QR Codes. If you don't know what a QR Code is, it is a goofy new kind of barcode that people are scanning with their cell phones to learn more about something ( a piece of realestate, a grocery product, a tv show or commercial, a magazine advert linking to the web site of a product, etc). And today, it seem that scanning a QR Code from a digital source like a tv screen or a monitor is completely possible, while most QR Codes are created for print. But here is the dilemma: most QR Code creation tools are built on the web and as a result end up delivering a picture in an unscaleable RGB format. This is fine when you are printing from a home printer. Once you need to add the QR Code to a real print piece, however, you run into all sorts of quirky problems:
- Most web-based image formats don't scale up very well. They are displayed on the web at 72 dots per pixel and you need it at arounf 200-300 dots per inch for print.
- The Color space for web images is all wrong for print. For example, all web images are displayed in the RGB color space (Red, Grean, Blue) and printers want the images created in the CMYK (Cyan, Magenta, Yellow, Key or blacK) where the blacks are true blacks( C=0%, M=0%, Y=0%, K=100%). Once you see the goofy seperations, you know you have a problem. Conversion is actually a little tricky.
A few weeks back I created an online QR Code generator. In reality, what I did was make use of an open-source library that generates QR Codes using client-side code only (HTML5 Canvas + JavaScript) and made it create QR Codes in real time. This is pretty neat because it can be attached to any old HTML(5) page and it will automagically read the URL of the current page and generate a related QR Code. But... at the end of the day we are still looking at an unscaleable 72dpp RGB QR Code image. If someone wants to take that QR Code and inject it into a print piece I need a workflow that converts the color space for true black as well as makes the QR Code scaleable to accomodate 300dpi.
Well, long story short, I figured it out. My QR Code generator now also creates the QR Code as a Scaleable Vector Graphic which can be saved out, brought into illustrator and converted in color space as well as dpi. How did I do this? Tweaked another Canvas to SVG client-side javascript library to work with my QR Code generator.
I am going to be publishing the mashup this week as it will continue to be open source.
Fhew! Time for a nap!
