Kevin Flynn: Hey! Hold it right there!
Bit: Yes.
Kevin Flynn: What do you mean, “yes”?
Bit: Yes.
Kevin Flynn: Is that all you can say?
Bit: No.
Kevin Flynn: Know anything else?
Bit: Yes.
Kevin Flynn: Positive and negative, huh. You’re a bit, aren’t you?
Bit: Yes.
Kevin Flynn: Well, where’s your program? Isn’t he going to miss you?
Bit: No.
Kevin Flynn: I’M your program?
Bit: Yes.
Kevin Flynn: Another mouth to feed.
Bit: Yesyesyesyes!“Tron”,1982
Despite their existence since 1994, Quick Response Codes (QR codes) did not go viral until around 2010. Not only fascinated by its numerous advantages, but its ability to stretch creativity as well, I flirted with the idea of replacing my previous Gravatar with a customized QR code for a couple of days and eventually materialized this thought via the following steps:
You will first need to select a design idea. Not sure about which one? You are in luck: there are several existing ones that could inspire you, notably the ones developed by the graphic artists at Custom QR Code Designs, QR Code Designer., or Louis Vuitton. Feel free to use your favorite photo editing tool, as long as it supports layers (I personally recommend GIMP 2).
Whether from your computer or mobile device, you will need to install a QR code reader in order to frequently scan test the image for quality purposes. Keep in mind that the Reed-Solomon error correction code written into the QR code encoder allows up to 30% deterioration of a QR code possible. Keep in mind that they are many risks associated with QR codes. In other words, beware of scanning just about any QR code out there, just as you wouldn’t download and run executable files attached to emails.
You will need a plain QR code to serve as raw image or base for our customization process. From plain text to URLs, there exists several websites that will allow you to create a simple QR code. Most of them can be found by using the search keyword “QR code generator“.
- Sample Raw QR Code
The QR code format can vaguely be described as a combination of horizontal and a vertical rows of “calibration”, having main components:
- Version information
- Format information
- Data and error correction keys
- Required patterns (position, alignment, timing)
- Quiet zone
Here is a simplified version of the QR Code Structure:
- Simplified QR Code Structure
Whether your goal is to customize your QR code with your own design features, logo, or brand identity, you will need to resize the image(s) to be embedded so that they can fit within the QR code, without interfering with any of the aforementioned QR code components. You could also coderize your mock up if necessary, as did Duncan Robertson.
- Sample Image to Embed
As you have probably guessed thus far, all you have to do at this point is:
- Import the raw QR code using your photo editing tool
- Add a layer of custom design on top of this image
- Embed the image into the QR code without interfering with its structure
- Repeat the two previous steps based on the number of images to embed
Furthermore, try to visually integrate your custom design elements into the code rather than simply stacking them on top, as suggested by David Cummings.
- Color the modified image as needed
- Scan the new QR code after each major modification to make sure that it is still readable
Sample Customized QR Code (work in progress)