Tutorial: How to edit a QR code to use in a design.

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.

Screen Shot 2013-09-09 at 16.41.32

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…

Screen Shot 2013-09-09 at 16.44.49

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.

Screen Shot 2013-09-09 at 16.46.06

It will then convert ‘Index’ to ‘Background’ so we can continue on to double-clicking and entering a layer name.

Screen Shot 2013-09-09 at 16.46.23 Screen Shot 2013-09-09 at 16.46.33

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.

Screen Shot 2013-09-09 at 16.47.00

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.

Screen Shot 2013-09-09 at 16.47.10

Screen Shot 2013-09-09 at 16.47.15

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.

Screen Shot 2013-09-09 at 15.22.43

Screen Shot 2013-09-09 at 16.47.58

We now have a transparent background, which means it can take on any background colour when it is dropped into the target file.

Screen Shot 2013-09-09 at 17.16.05

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.

Screen Shot 2013-09-09 at 16.48.36

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.

Screen Shot 2013-09-09 at 16.49.36

Screen Shot 2013-09-09 at 17.19.36

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.

Screen Shot 2013-09-09 at 16.50.12

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.

Advertisements

One thought on “Tutorial: How to edit a QR code to use in a design.

Comments are closed.