How to insert a logo or image into a QR code using Photoshop | IT&C Solutions

oskycar 2016-02-22

展开全文

This article describes different methods of changing a QR code in Photoshop that allow to insert a logo, image or text. The custom or branded QR code will be read correctly despite the modification.

The QR (Quick Response code, Denso Barcode, ISO/IEC18004) code represents a two-dimensional code bar, initially used by industry, but widely used today to encode and transmit short information, like URLs, phone numbers, contact information, business cards, meetings, GPS locations, email. The transmission is done visually and the receiver is a mobile device that has a camera and a code reader software.

QR codes were created in 1994 by a subsidiary of Toyota, Denso Wave , to be used by the carmaker in the management of various auto parts. QR Codes were use din the production for fast visual identification of components and for storing additional information.

Today, QR codes have become an effective tool used in transmitting information to mobile users, because its characteristics:

fast reading;
minimal hardware and software requirements for a QR code reader;
capacity to store various information (text, numeric, binary data)

made it an effective tool used in transmitting information to mobile users.

How do I choose the type of QR code ?

There are several types of QR codes classified by their number of rows and columns (it is a square matrix and its lines number is equal to columns number) called modules . There are 40 versions that contain from 21 to 177 modules. Each version has with 4 more modules than the previous.

Different versions of QR code

QR codes with a higher version have a larger storage capacity but also a higher density of points in the image, thus making them harder to be read by common devices.

Important !: Today, for mobile devices and smartphones, it used the version 6 QR code because it can can be read easily by most mobile applications and can store enough data.

Version	Modules (lines x columns)	Error correction level	Maximum number of digits	Maximum number of alphanumeric characters
1	21X21	L	41	25
		M	34	20
		Q	27	16
		H	17	10
2	25X25	L	77	47
		M	63	38
		Q	48	29
		H	34	20
6	41X41	L	322	195
		M	255	154
		Q	178	108
		H	139	84
40	177X177	L	7089	4296
		M	5596	3391
		Q	3993	2420
		H	3057	1852

* data for all QR versions is available on Denso Wave site.

QR codes contain information used to validate and correct stored data. This allows the QR code reader to extract all the data even if it hasn’t read all the code (it’s not visible or it has been modified). The solution is defined by the Reed Solomon error correction method which is used in the generation of the QR code. The method allows a reader to retrieve QR code data even if it has errors (between 7% and 30%)

correction level L – reading is correct even if the QR image contains up to 7% error;
correction level M – reading is correct even if the QR image contains up to 15% errors;
Q correction level – reading is correct even if the QR image contains up to 25% errors;
correction level H – reading is correct even if the QR image contains up to 30% errors;

Because the data used to validate and correct is also present in the QR code, a higher level of protection means less space for user data.

So, when choosing the QR code version take into account:

message size;
the correction of errors;
number of modules of code QR -> his ability;
reader specifications.

For marketing campaigns, advertising and business cards, the version 6 is more than enough. Also for the examples in this article I have used a QR code version 6.

How to generate QR codes

To generate QR codes can be used a number of generators that are available without cost on the Internet (a Google search provides other solutions):

Once generated, the QR code can be downloaded as a image in different formats (JPG, PNG, BMP, GIF).

For the examples in this article you can use any generator that allows to select the QR code version, and its error correction level.

What if the URL is too long

If a QR code is used to send an URL, it can happen that, for the chosen version of QR code and error correction level the number of characters in the address is bigger than the maximum number of alphanumeric characters allowed. Also, many characters in the URL generates a higher density of points in the QR code and it seems too noisy.

In this situation DO NOT change the website structure to shorten the URL and DO NOT buy another shorter domain.

The solution to this problem is to use one of the many Internet services that provides short aliases for that URL. Services are provided without cost and an example is . For example, for the URL

http://www./2011/08/08/tutorial-android-setting-the-development-environment/

the service generates an alias like: http:///9nRCj5 .

These services automatically redirect visitors to the original URL and also can provide various statistics.

If you don’t want to depend on a third party service you can implement your own redirection service.

Important !: Using a third party or your own service for shortening web addresses and other URLs is a good strategy for tracking the impact of QR codes because the code includes the URL alias and not the original. Thus, the redirection done by the service, indicate from where the promoted site is visited.

How do I read and test the generated QR code

You can use the QR code reader available on your smartphone or tablet.

For Nokia devices that don’t have a QR code reader software, it can be downloaded from the Nokia Scan and decode mobile codes page.

A client for the Android platform is provided by the zxing project and in the future it is expected to include it as a native application that will be automatically activated when the camera in on.

Another solution is to use a free Internet QR reader provided by different websites. The QR code is uploaded as an image and test it.

How to insert a logo or image into a QR code

Although QR codes represent a non-attractive simple black and white image, it can be modified to look like this:

Mashable.com examples of custom QR codes

or like this

Takashi Murakami QR Code for SET agency (only for Asia)

One of the first articles on this subject was written by Duncan Robertson of the BBC in which he describes how to generate the next QR code:

BBC QR code

Why QR codes can be modified and still work

Modifying a QR code and make it more attractive and interesting is possible because when it is generated it is used the Reed Solomon error correction method.

The four levels of error correction (L, M, Q, H), described earlier, allow the correct reading of the code even if 7%, 15%, 25% or 30% of the code image is missing or contains incorrect information. Based on this characteristic of the QR code, we can change up to 30% of its content to insert a logo, image or other information.

However there are areas of the QR code that can NOT be changed because it will affect the QR code structure of the QR code (version, format, positioning and alignment markers). QR code safe area, where you can insert a logo or image without destroying, it is the data area (the gray area in the next image).

QR Code Structure Example (from )

Important !: QR code changes are only allowed in the data area (gray area).

10 steps needed to insert a logo, image or text in a QR code

Important !

For a good result is important to TEST, TEST and TEST the QR code, after modifications, with your own phone or a QR code reader on the Internet.

Step 1. Generate a version 6 QR code with a H error correction level (maximum 30% errors) for a chosen URL. You can use a generator suggested in section How to generate QR codes or found on the Internet. The generator (I have used GoQR generator) should allow you to edit next parameters:

the URL address;
QR code version; select 6;
QR Code Error Correction Level: select H (up to 30%);
(optional) QR code image size: 250px X 250px;

Download the generated code (preferably in PNG format).

Step 2. Open Photoshop (in this example I used CS3 but any newer version is ok) and create a new document with these settings:

Photoshop document settings for the QR project

Height: 300px;
Width: 300px;
Color mode: RGB
Background contents: White

Step 3. Add the QR code image using File -> Place from Photoshop menu. The image is placed on a new layer and is a Smart Object. To identify this layer easily let’s name it QR (Double-click the layer name to start edit it).

If the image of the QR code doesn’t have the desired size (250px X 250px in this example) then resize it. Select the QR layer and choose Edit -> Transform –> Scale or Edit -> Free Transform (Ctrl + T) .

Step 4. To edit the QR code image, the Smart Object from the QR layer (if this is the image format after being added in Photoshop) is rasterized using Layer -> Rasterize -> Layer or Right-click on layer and chose Layer Rasterize;

Step 5. Remove the white background from the QR image (not the Background layer). We will do a selection of all the white pixels:

5.1. Select the QR layer;

5.2. Select all white pixels using Select -> Color Range. In the Color Range window use the color picker to select white pixels. Also set Fuzziness to zero:

Select QR code white background in Photoshop

5.3. Remove selection content with Delete and after that cancel the selection using Ctrl + D or Select -> Deselect. After that the QR layer contains only the code image. At this point, the Photoshop project contains two layers: a white background and the QR code.

Photoshop custom QR project layers

How to generate a QR code with round corners

Step 6. (optional) Apply a corner rounding effect on the QR code.

6.1. Select the QR layer content holding down Ctrl and Left-Click on the layer icon.

6.2. Open the Refine Edge window using Select -> Refine Edge and make the following adjustments:

Refine edge settings for rounded QR code

6.3. Having the QR layer selected, copy the adjusted selection (Edit-> Copy) in a new layer (Edit -> Paste and it automatically generates a new layer). Name the new layer QR Rounded and if you hide the initial QR layer then the image looks like this:

Modified QR code with round corners

Step 7. Apply a Gradient Overlay…, Pattern Overlay… or Color Overlay… on the Rounded QR layer or on QR (if you skip step 6).

Attention !: It is very important that the used effect will preserve the strong contrast between code image and the background. Otherwise the code can become unreadable. I will use a Gradient Overlay with the next settings:

Gradient Overlay settings for custom QR code

After step 7, the QR code becomes:

QR code with a gradient

What is the area that you can change

Because we use a QR code generated with a H error correction level (up to 30% errors) means that we can change some of the data and correction area (the gray area).

Warning !: You can change up to 30% of the code data (NOT 30% of the image) so that the code remains readable.

Step 8. (optional) In order not to waste time with changes that destroy the QR code you can define a safe work area to be used as reference. For the QR code generated with a size of 250 x 250 the safe area (for this example) can be a 100px X 100px square, a 200px X 50px rectangle or a 100px radius circle.