Designer QR Codes + How To Make Your Own

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

Filed under: Graphic DesignTagged with: ,

15 Comments

  1. Thanks for the help, I wish there was another way to work this rather than guess and check method though.

    • There is another way but I’m not sure how to do it. I heard you can use math to calculate and figure out exactly the parts needs to stay and which ones you can delete safely. I hope someone codes this up. 🙂

    • Hmmm… I’ll take a look. I tried with a few QR Code readers and they work fine. I don’t have an Android Device though. Will check with a few more. It is important to test in a significant number of devices when you are integrating this as part of your campaign.
      Thanks! 🙂

  2. Just used this method to design mine…. gr8. Need to test on other readers though.

    • I tried this on my blackberry and it works great 😉

    • Looking good! It read properly with my iPhone. Congrats!

    • Nice! My Droid 2 read it eventually, but it took about 3 tries.

  3. This is brilliant. I just created mine using your info. I’ll definitely be using this in the future. Thanks so much!

  4. Awesome! I did it step by step and it totally worked. Here is my design for a show I host. I used Photoshop.

    • Hi Marcus. Thanks for commenting! 🙂 Reads good on my droid. Congrats!

  5. Hey Leo & Marcus, I tried but I’m not very gd at Photshop and couldn’t get the clean dimensional cutout looks you guys show. Can you help and tell me how to do that?

  6. Great tutorial! How long do the QR codes last from Raco Industries?


Add a Comment

Your email address will not be published. Required fields are marked *

Comment *
Name *
Email *
Website