In this tutorial I’m going to show you how to create a custom designed QR code for use online from which you can go on to experiment and create your own masterpiece.
Now, I’m sure you’ve seen those black and white digitised squares in magazines, newspapers, shop windows and websites and wondered what the hell they are. Chances are, if you’re reading this post you’ll probably know what they are and you’ll also know that they are an extremely helpful marketing tool.
I’m talking about Quick Response codes or how they are normally referred to as, QR codes. These are clever little bar codes which allow you to use your smartphone camera to scan them and direct you to a specific website, Facebook page, map and much more.
I highly recommend taking a look on Wikipedia for a much more detailed run down.
For this tutorial you will need:
– Basic / Intermediate knowledge of Photoshop
– A smartphone with a QR reader
– A hi-res logo
If you follow the steps below your shouldn’t have any problems. So, lets get started with creating your first customised QR code.
Step 1: Generate your QR code
Find a suitable QR code generator website to generate your QR image. I’ve used Kaywa’s QR-Code generator. We are going encode a URL into a QR image, so input a website address in the required field – in this instance I’ve used my own. Set the size to XL as this will enable us to get the most out of the image quality and then click Generate!
After a few seconds your image will be generated (see image above) and will be shown on the left side of the screen. Drag this image to your desktop or right-click on the image and select Save Image As to save it to your desktop. This is what we’ll be using to create our custom design.
Step 2: Edit the QR image
Fire up Adobe Photoshop and open the QR image we saved to our desktop. Go to the top toolbar and select Image > Mode > RGB Color. Press Ctrl+A (PC) / Cmd+A (Mac) to select the image then press Ctrl-C (PC) / Cmd-C (Mac) to copy and then Ctrl+V (PC) / Cmd+V (Mac) to paste another layer on top of our current one. Select the background layer in the Layers Palette and press the Delete key to remove it.
Lets rename our layer for easy identification. Click on the QR image layer and rename it to ‘QR code’.
Here we’re going to use the Magic Wand tool to remove the white blocks of space. Select the Magic Wand from the tools menu and click on the white area in your image – you’ll probably need to hold down Shift to select smaller pockets of white.
Once you’ve done that press the Delete key to remove the white space.
Step 3: This is where the fun starts
Ok, so you’ve got this far, thats good. We’re now at the creative part of the tutorial. So lets add a background to our QR image. Do this by going to the top toolbar and select Layer > New Layer and press Enter. Rename the new layer to ‘BG’ or ‘Background’. Next, use the Paint Bucket tool and fill the layer with white. Now drag the BG layer in the Layers Palette below our QR code.
Double click on our BG layer and add some layer styles to it. we’re going to add a Gradient, Inner Shadow and Bevel and Emboss texture to it.
Add the gradient. I’ve used a slightly gold colour for mine. The hex values are #ad883d to #e4cc88 to #ad883d
Next, add an inner shadow. Try not to go over board on the size of the shadow, the important thing is to give the QR image depth.
Add the Bevel and Emboss.
Finally add the texture.
NOTE: Try not to choose colours which are too dark as some QR readers aren’t able to read the code. Its important to get a good balance, so some trial and error is involved.
Next, select our QR code in the Layers Palette. Add some inner shadow, outer glow and colour overlay as per the screenshots below:
Add the Inner Shadow.
Next, add some Outer Glow.
Finally add a Colour Overlay of #5b4423 and click Ok.
Step 4: Adding your branding
Ok, its time to open your logo file. If you haven’t already done so, convert your logo to a Smart Object. If you’ve never used these before, click here to read more about them.
Drag your logo on to your QR document and move it to the top of the Layers Palette. This stage requires a bit of tweaking so lets create three copies of your logo so we can place them around our code.
Now, get your smartphone and load up your QR reader. Hold the phone up to the screen, select one of the logo duplicates you created and move the logo around the QR image. You’ll notice that on some sections your code won’t be readable, so obviously don’t put your logos there.
Once you’ve found a suitable section to place your logo do the same with the other two. Have a look at my finished version below.
Step 5: Testing
Once you’ve finished creating your custom QR code. The most important part is to test it with at least 4 different smart phones. Most notbly the iPhone, Window Phone 7, Blackberry and Android.
I’ve used 4 of the most popular QR scanners for each of these devices which I’ve listed below:
iPhone: QR Reader for iPhone
Window Phone 7 (Mango update): This has an in built QR scanner.
Blackberry: QR Scanner Pro – Free
Android: QR Droid
If all of the scanners read your custom code correctly you are on to a winner and have just successfully created your first customised QR code. Now, go and experiment and create your own masterpiece!
Comments