I love QR codes as with the ever increasing numbers of smartphones and tablet devices being used, they provide a great way to connect directly from print design to a website via scanning the code. However, with the project I have just completed for the Aberystwyth University Hiking Club featuring a specific colour scheme, a ‘traditional’ QR code would not suit. Therefore in this quick tutorial, I shall show how I edit QR codes to suit my needs, which involves removing the white background, and changing the black to another colour.
While there are many websites dedicated to QR code generation, some do not produce high quality versions, never mind allowing for high-quality editing. With the last project, I came across goQR.me, a great site which produces free QR codes for personal and commercial use, at sizes up to 1000 x 1000 pixels, which can then be downloaded.
Editing QR codes – Step by Step:
1. Open the QR code in Photoshop.
2. Normally I would double-click on the layer in the Layers Palette where it says ‘Background’ to convert it into a layer. However, it says ‘Index’ and the process I just described doesn’t work…
This means the file is ‘indexed’, and so to overcome it, first you must change the image mode of the file, by going to Image > Mode, and changing it to either RGB (web use) or CMYK (print use) depending on your requirements.
It will then convert ‘Index’ to ‘Background’ so we can continue on to double-clicking and entering a layer name.
3. Now we need to select either all of the black or all of the white. It doesn’t matter which, here I will select all the black. There are many selection methods that can be used, such as the Magic Wand, but that would only allow you to select one section at a time, which would take forever, so instead I am selecting by Color Range. To access this, go to Select > Color Range.
In the resulting dialog box, we need Sampled Colors to be selected in the top drop-down box. This allows me to click once on a black area, and it will select all of the pixels that are the same colour value as I just clicked on, so in this case, all of the black pixels. Click OK, and you will see a selection appear around parts of the image.
4. With the selection active, to remove the white areas, we need to add a Layer Mask which can be done by clicking on the Layer Mask button at the bottom of the Layers Palette.
We now have a transparent background, which means it can take on any background colour when it is dropped into the target file.
5. To change the black into the colour I need for my client’s colour scheme, I added a Color Overlay from the Layer Style dialog box. This can be accessed by double-clicking on the layer in the Layers Palette and ticking the relevant box on the left side.
Clicking on the colour box brings up the Color Picker dialog box where any colour can be selected. The specific code I have used here is 5d3587.
6. The final step is to save it as a PNG file, as PNG files can feature contain transparent elements. If we saved this as a JPG file, it would fill the transparent elements with white.
To save in this format, I went to File > Save for Web & Devices, which bought up a dialog box, where I changed the preset from JPG to PNG-24. I made sure to choose the highest quality option, and clicked Save.
And that’s it! An edited QR code ready to be placed into your file. Of course, don’t forget when you edit the QR code to make sure the new colour has enough of a contrast against the background you plan to place it on, so the barcode scanner apps on your smartphone or tablet can read it.
Hope the tutorial was useful! Please let me know if it was, or if there’s anything missing from this tutorial you hoped to see.