In this post we’ll see how easy and fast it is to insert a thematic QR code in a photo with an aesthetic approach so as not to spoil the image. We will also manage to put this artistic QR code into perspective and place it as a realistic texture.
We’ll do our best to take full advantage of the potential of our online QR code generator and show this process in a few simple and illustrated steps.
1. Load a Background Image
At start and after launching the online generator, you land on the default view with a QR code centered over a white background.
The first step is to load a background image on which to apply the QR code. For this we use the button ‘Ground Image’ to select an image in jpg or png format on his workstation.
In our case we’ll use an image from MaxPixel with public domain CCO license.
2. Define the Appearance of the QR Code
Once the context image is loaded, the ‘Dots & Targets’ folding zone allows you to define the graphic characteristics of the QR code.
Click on each colored circle to define the tint of any dark and light element of the QR code.
In this area we can also choose a pattern for the dots (here a silhouette of a sailboat) among the 200 models proposed and another pattern for the targets from the thirty models available. We thus obtain a general appearance of the QR code but there are still other graphic aspects to manage!
We can later return to these tools to adjust the shapes and colors.
If we want to treat each element of the QR code separately, we have to switch the interface mode to:
- ‘Padawan’: to define separately points and targets
- ‘Jedi’: to define independently the light dots, dark dots, big targets and small target.
In the present case we chose not to display the light dots (opacity lowered to the minimum in the color picker to reach full transparency) and apply a some randomness on the dark dots.
3. Remove the QR Code Background
As we want to place the QR code on the white frame, we have to remove its background pattern. The paint canvas will then act as a background for the QR code.
This is possible within the ‘Background’ folding block, clicking on the colored disk to access the color picker. We simply choose to lower the color opacity to the minimum, which amounts to a transparent background (as we did in the previous step for the light dots).
We take the opportunity to change the background shape to a squared form. This will allow to have the graphic control handles as close as possible to the QR code. This will be useful in step 5.
4. Scale the Preview
We now need to correctly place the QR code on the canvas and the first step will be to set up a general view of the graphic composition.
The ‘Scale’ folding zone allows an adjustment of the display with a slider that can be moved until a satisfactory view is obtained.
5. Put the QR Code into Perspective
Then you have to use the ‘Geometry’ folding block to adjust the 3D positioning of the QR code.
Note that you need to use a web browser that supports 3D functions, which is only the case of Firefox at the time of writing this post. Also, iOS and iPadOS operating systems do not support 3D functions either, regardless of the browser. Please refer to our FAQ for detailed and up-to-date information. Accordingly, the ‘Geometry’ widget might then be deactivated depending of your browser.
The ‘Perspective’ button gives access to a pop-up window in which you can adjust the 3D positioning with each of the 4 handles (see highlighted). The surface plane of the QR code is visualized by a semi-transparent red surface which helps to better visualize the perspective effect.
Hint: make sure to align the edges of this surface with some perspective orthogonal lines in the background image. In the present case we use the edges of the canvas.
Once you validate these settings, you can later fine tune things displacing and/or scaling the QR code in the graphics preview editor. Scaling preserves the perspective effect.
6. What if I Want a Logo Too?
No problem, just use the ‘Logo’ button which displays a pop-up window with all the necessary tools. This works without problems even if a 3D deformation is applied on the QR code.
A popup windows will appear with a set of buttons allows choosing among predefined patterns (‘Logos’ or ‘Patterns’) as well as to open a selection window to upload an image of your choice.
In our case we chose an Insta logo, but the colors don’t match with the initial choices. Fortunately it’s possible to rework the colors. The ‘Tools’ button gives access to advanced logo editing features.
In our case we will:
- deactivate the image (i.e. the colors of the logo)
- assign a foreground color. By default, it’s the color of the dark dots of the QR code, but it’s possible to adjust it with the color picker tool and even with the eye dropper tool to retrieve an existing color of the graphic composition
- define an edge line around the logo to detach it from the QR code content. By default, the line is white and quite thin, but it is possible to modify these parameters by opening the ‘Edge’ folding zone
- validate once you obtained the desired appearance for the logo. Note there’s a preview of the logo next to the ‘Apply’ button.
It’s always possible to move, rotate and enlarge/decrease the logo interactively in the pop-up window. More info on our online manual.
Everything can’t be done when branding a QR code with a logo. Check our other posts on how and where to add a logo to a QR code and things to avoid.
Now you can return to the main window and see the whole graphic composition and check if the QR code is readable.
You can do this in the webapp using the ‘Check QR Code’ button in the middle of the appbar or performing a scan with a smartphone directly on the screen.
We designed a QR code correctly integrated in a photo and assigned it a theme with the patterns of the dots (sailing boats), the targets (loosely like racing buoys) and the logo (Insta).
We could imagine using this composition to bring people who scan it to an Insta post about a sailboat race. This is an example like any other, the possibilities are endless.
Detailed view of the QR code put into 3D perspective on the canvas:
Want to go straight to the point? Just click on this link to open a similar ready-made composition directly in the online editor.
Use a Firefox web browser on a desktop or laptop to obtain the same 3D effect. Check our FAQ Support section for detailed compatibility information.