Howdy! QR Codes. If you’ve seen them before you probably remember them as those square black and white ant like thingies. Dispel this impression! It doesn’t have to be this way. Follow me after the jump to find out.
Friends, Designers, Artists lend me your ears. We can make QR Codes pretty! Pretty and Functional. You see I was inspired to write this post after reading this article on Mashable and thought to myself. Wow it is possible. So I began my journey into creating an awesome QR Code for my website.
Here is my Designer QR Code:
Try scanning the above. :) I could have done a lot more but I chose to keep it simple for now. It scans quite fast with the software I currently use on my phone though I will check in a few others just to make sure.
Are you ready to get started on yours? Sure you are! Here we go! :)
Tools of the QR Code Trade
QR Code Image – You can generate your own QR Code Image using this wonderfully useful website.
Graphics Editing Software - I use Adobe Photoshop CS5 Extended. The techniques to be discussed would most likely work with other versions and graphics editors(such as GIMP).
An Idea - I don’t have to tell you the importance of this one. :) If you don’t have one yet just stare at the image and use your imagination. Think of what you want the user to associate the image with. Be it a tropical paradise or your brand name.
Step 1) Generate Your QR Code
Go to this website and generate your QR Code. Type the URL or Text you want to encode. Be sure to select 30% in the QR Code Error Correction Level so we can make more changes to the image while retaining readability. Choose what size you want your code to be. Select the file format your most comfortable working with(I chose PNG) then click Generate Bar code. Save the image(You may need to rename the file).
Step 2) Open the QR Code Image
Stare at it and decide what you want to do. Here is my original QR Code:
Remember I told you to choose 30% Error Correction? Now you have to carefully pick apart the image and find the 30% you wish to edit. I chose to divide the image like this and took out the middle part in favor of my branding. Use the Guides feature in your Graphics Software to accomplish what I have done below.
Step 3) Go Crazy (But not too crazy) with it.
Work your Design Magic! It’s time for that awesome clicky thing you do with the mouse. Whatever you decide to just make sure it still works. Which brings us to:
Step 4) Test!
Remember to test your code in a number of readers. No use in a pretty QR Code that can’t be read. It’s a trial and error thing. If you want you calculate exactly what parts you need and don’t need. If you have the math acumen and time for that I say go for it.
Step 5) Deploy! They grow up so fast…
I will be incorporating the above design into my future campaigns. :)
Final Words
I hope you had fun following this tutorial as I had fun writing it. Remember that this is not the only way to do this. As long as the QRCode gets read in a reasonable amount of time you can do anything you want with it.
Good Day and God Bless!
-Leo Aljiro
