Howdy! QR Codes. If you’ve seen them before you prob­a­bly remem­ber them as those square black and white ant like thin­gies. Dis­pel this impres­sion! It doesn’t have to be this way. Fol­low me after the jump to find out.

Friends, Design­ers, Artists lend me your ears. We can make QR Codes pretty! Pretty and Func­tional. You see I was inspired to write this post after read­ing this arti­cle on Mash­able and thought to myself. Wow it is pos­si­ble. So I began my jour­ney into cre­at­ing an awe­some QR Code for my website.

Here is my Designer QR Code:

Try scan­ning the above. :) I could have done a lot more but I chose to keep it sim­ple for now. It scans quite fast with the soft­ware I cur­rently use on my phone though I will check in a few oth­ers 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 gen­er­ate your own QR Code Image using this won­der­fully use­ful web­site.

Graph­ics Edit­ing Soft­ware - I use Adobe Pho­to­shop CS5 Extended. The tech­niques to be dis­cussed would most likely work with other ver­sions and graph­ics editors(such as GIMP).

An Idea - I don’t have to tell you the impor­tance of this one. :) If you don’t have one yet just stare at the image and use your imag­i­na­tion. Think of what you want the user to asso­ciate the image with. Be it a trop­i­cal par­adise or your brand name.

Step 1) Gen­er­ate Your QR Code

Go to this web­site and gen­er­ate your QR Code. Type the URL or Text you want to encode. Be sure to select 30% in the QR Code Error Cor­rec­tion Level so we can make more changes to the image while retain­ing read­abil­ity. Choose what size you want your code to be. Select the file for­mat your most com­fort­able work­ing with(I chose PNG) then click Gen­er­ate 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 orig­i­nal QR Code:

Remem­ber I told you to choose 30% Error Cor­rec­tion? Now you have to care­fully pick apart the image and find the 30% you wish to edit. I chose to divide the image like this and took out the mid­dle part in favor of my brand­ing. Use the Guides fea­ture in your Graph­ics Soft­ware to accom­plish what I have done below.

Step 3) Go Crazy (But not too crazy) with it.

Work your Design Magic! It’s time for that awe­some clicky thing you do with the mouse. Whatever you decide to just make sure it still works. Which brings us to:

Step 4) Test!

Remem­ber to test your code in a num­ber of read­ers. No use in a pretty QR Code that can’t be read. It’s a trial and error thing. If you want you cal­cu­late exactly what parts you need and don’t need. If you have the math acu­men and time for that I say go for it.

Step 5) Deploy! They grow up so fast…

I will be incor­po­rat­ing the above design into my future campaigns. :)

Final Words

I hope you had fun fol­low­ing this tuto­r­ial as I had fun writ­ing it. Remem­ber that this is not the only way to do this. As long as the QRCode gets read in a rea­son­able amount of time you can do any­thing you want with it.

Good Day and God Bless!

-Leo Aljiro