Here is an example of a custom QR Code which you can scan with any camera app to get a link back to this website
In this article I’m going to show you how you can create these using a free tools.
- How Do QR Codes Work
- Generate QR Code Link
- Import QR Code To Inkscape
- Modifying QR Code Vectors & Limitations
- QR Code Marketing Examples
- [Video] Creating A Custom QR Code In Inkscape
How Do QR Codes Work
QR Codes are a visual representation of data. Much like the barcode you would find on supermarket products QR codes store data in blocks or bars. QR codes can be scanned from any direction using both Android and iPhone default camera applications.
Hold your phone over a qr code with the camera on and a link will pop up asking if you want to visit the page. There are also custom qr code scanner apps that can be used on both app store and google play.
Generate QR Code Link
The first step to creating a custom QR Code is to generate a QR Code image from a website link.
There are many online applications for generating QR Codes but I use a self hosted one which is basic and simple.
https://jamesbachini.com/resources/qrcode.php
Simply enter a URL into the text input and click generate. This will create a QR Code image which can be saved by right clicking and selecting “Save image as” from the menu.
The image will save as a .png format image which can then be edited using image editors.
Import QR Code To Inkscape
When customizing QR Codes I recommend converting them to vectors which allow for lossless scaling. For this I use an opensource (free) application called Inkscape.
Drag and drop the .png image we created in the last step into a new inkscape document.
Then select path > trace bitmap from the top menu. In the mode select brightness cutoff and leave the default setting in place.
Click OK then close the trace Bitmap tool. Click on the bitmap and drag the top layer away which will be the new vector. Then delete the underlying .png image.
We now have a vector image that we can scale and stretch as much as we want. In the next section we will be adding custom designs using the inkscape image editor to this raw QR Code vector.
Modifying QR Code Vectors & Limitations
QR Codes are often black and white but this isn’t a requirement and they can be any color. High contrast colors work best, especially if they might be used in low light conditions.
To change the color select the QR Code and then choose “Fill and stroke” from the right hand menu. This can be used to create a solid fill or a gradients.
Custom QR Codes don’t need the entire object to be readable. Up to 30% can be covered and the module is still readable.
There are some important areas that shouldn’t be covered highlighted below. The three corners which provide a locking mechanism and the small box with a point in the bottom right.
We can start getting creative by adding layers on top of the QR Code to add custom graphics.
One design tick I like to use is to use the simplify vector tool to reshape the design. Select the custom QR Code Vector and then press CTRL + SHIFT + L a few times.
It is also possible to add borders and additional data to the outside edge of the QR Code.
Filters can be used to manipulate the pattern. Experiment with the filters tab in the top menu of inkscape.
Lets look at how these techniques can be put together to create beautiful custom QR Codes for marketing.
QR Code Marketing Examples
Creating A Custom QR Code In Inkscape
Conclusion
Vector graphics software like Inkscape can be used to add life and creativity to boring old QR Codes. It’s possible to overlay graphics on top of the QR Code without breaking the data recognition.
Get creative and see what you can come up with.
If you are interested in online marketing then check out a free online course where you can learn digital marketing.
If you’ve enjoyed these resources could you help share this content on social media and send it to anyone who you think might benefit from it.
Thank you.
