Creating Creative QR Codes

QR codes are so hot right now, and clients are going gaga for them. They want them on their brochures, flyers, business cards, etc. Some even want them on their websites, but we bitch slap educate them and move on. 

If you’ve been living under a rock, QR stands for ‘Quick Response’. QR codes can be scanned by smartphones and can contain links, vCards, text, etc. They can even initiate phone calls and text messages. They’re basically a great way for people on the move to grab a chunk of information quickly, saving them the hassle of typing a URL or contact into their phone.

There are loads of examples of beautiful and creative QR codes out there, including some great creative QR code business cards. These are all great, but I’m a mere mortal, not some QR code designing genius. How easy will it be for me to create some funky QR codes?

The answer it seems, is really quite easy! Start off by generating a QR code, there are many online services available that do this for free. I’m using the QR Code Platform by Good Survey, mainly because it looks dead good, but also because it’s got a lot of advanced customisation features for creating codes with images in.

I’m just encoding a URL, so I enter that and then click ‘Show advanced options’. Here I’m going to change the Version (density) to 5, which gives me more pixels to play with. I’m also changing the error correction to H, which should give me a larger area to plop my picture in. The last thing I do is check the ‘Add Logo image box’.

After you press ‘Continue’ you’ll see your QR code, you can then browse for an image to stick in it. I’m using this as a placeholder, so that I can create the actual image I want in Photoshop. If you use a transparent PNG then the QR code will fit around the image nicely. You can shift the position of the image around, and you’ll see at the top of the QR code can be read or not.

Once I’ve saved off the QR code that’s been generated, I take it into Photoshop. I take out the placeholder image I added and add my own in. I want a pixelated style, but you can stick whatever you like in there!

So this is my first attempt at a custom QR code, it’s a pixelated version of a logo. I could have just stuck the real logo in there, but I was trying to replicate the style of the BBC QR code.

Top Tip: Obviously if you’re using your QR codes on screen you’ll want them nice and crisp. So when you save for web, make sure you change the ‘Quality’ setting from ‘Bicubic’ to ‘Nearest Neighbour’. You might have to do a quick calculation to get everything looking square.

Just for fun, here’s a slightly more elaborate example, with a Chunk monster in there! Again, it’s pixelated but you can put anything of any shape in a QR code. As long as there’s enough code to be scanned then you’re fine.

I’m no designer, so these aren’t works of art, but they do show that practically anyone can spice up their QR codes with no trouble at all!


  1. Just a shame they require Silverlight to insert the image, hasn’t Microsoft dropped it?

  2. Darren (Author)

    I never even noticed! Apparently they have/are in favour of HTML5, doesn’t stop developers from using it though!

Leave a Comment to Conradr