One of the top questions at my presentation last week on QR codes was how to make customized codes that incorporate company colors, logos, etc. The extremely artistic codes may require decoding software (to determine which parts of the image are essential), lots of trial and error, and someone who can, well, draw.
I cannot draw, and only have basic graphic editing software at the office, but I do have a good supply of trial and error, so I spent some time this morning seeing what I could produce with a simple QR code and Photoshop. Fortunately our logo is simple, geometric, and square-based, so we got some good results.
For the first attempt I simply layered the logo over the QR code and made it slightly transparent:
Anything over 66% transparency was too opaque for the code to scan, so the colors were a bit more washed out than I was comfortable with. Also, I had to make a lot of the lines thicker and heavier, losing some of the grace of our actual logo design. Interesting attempt, but not satisfactory.
Next I tried one of the most common approaches: creating a white space in the middle of the code, and inserting the logo:
I'm always impressed how much information can be removed from the center of the code without breaking it. It does count towards the 30% data loss limit, though, so this one is more vulnerable to damage.
Next came a fun attempt:
The corner targeting symbols are one of the essential parts of a QR code, so in general you should leave them alone. I could read the code with this level of modification, but removing the black box to just show the logo broke the code.
Finally, I pushed my Photoshop knowledge to the max (and asked for copious amounts of help) and built the color layers into the code itself:
This is where having a square logo really came in helpful. I really like this one; for the next revision I'll make the colors a more intense shade, so they show up better against the black, but this did basically what I was hoping to do.
Final analysis: the experiment was a success. With an outdated version of Photoshop, minimal artistic skill, and a little creativity (and a lot of trial and error), you can do a lot to put your company branding into a QR code.
I cannot draw, and only have basic graphic editing software at the office, but I do have a good supply of trial and error, so I spent some time this morning seeing what I could produce with a simple QR code and Photoshop. Fortunately our logo is simple, geometric, and square-based, so we got some good results.
For the first attempt I simply layered the logo over the QR code and made it slightly transparent:
Anything over 66% transparency was too opaque for the code to scan, so the colors were a bit more washed out than I was comfortable with. Also, I had to make a lot of the lines thicker and heavier, losing some of the grace of our actual logo design. Interesting attempt, but not satisfactory.
Next I tried one of the most common approaches: creating a white space in the middle of the code, and inserting the logo:
Next came a fun attempt:
The corner targeting symbols are one of the essential parts of a QR code, so in general you should leave them alone. I could read the code with this level of modification, but removing the black box to just show the logo broke the code.
Finally, I pushed my Photoshop knowledge to the max (and asked for copious amounts of help) and built the color layers into the code itself:
This is where having a square logo really came in helpful. I really like this one; for the next revision I'll make the colors a more intense shade, so they show up better against the black, but this did basically what I was hoping to do.
Final analysis: the experiment was a success. With an outdated version of Photoshop, minimal artistic skill, and a little creativity (and a lot of trial and error), you can do a lot to put your company branding into a QR code.