A QR code (or ‘Quick Response Code’) is a machine-readable optical label in the form of a matrix bar-code.
Smart-phones easily recognize and read such 2 dimentional bar-codes. QR codes may contain many different kind of data: raw text but also internet address, GPS position, phone call, sms message, email and even geographic position on earth!
Some of these formatted contents may trigger events on smart-phones, like activating your web browser with a predefined internet address or pre-filling an email for you.
1.1 QR Code Elements
QR codes usually consists of black squares distributed on a squared grid.
But it’s also possible to look at it in a new perspective!
These severe-looking squares can take many different patterns and colors in order to be more discreet and visually more pleasant.
To achieve this, lets separate the various elements that make up a QR code.
First, as we move on from a black and white square world to a more graphic and colorful one, we will now talk about dark and light elements, targets and points.
Think of it as a safe quiet zone around and beneath the QR code, of uniform color. This is required to help the QR code decoding.
Your background may take different forms. Also, depending of the image you place your QR code on, you may decide to have a more or less visible background – or even a totally transparent one.
Targets are sets of concentric strips alternately dark and light. Those strips are usually squared but can adopt many different patterns.
Why target? Because they’re used as finder elements, as well as they help to define the position, orientation and alignment of the matrix bar-code. Broadly speaking, they do not contain data but are safeguards to locate and read the QR code data.
QR codes always have 3 big targets and one (or more, depending on the quantity of data) small target. Targets have 3 concentric stripes: dark-light-dark. Big targets may show an additional light strip as they are located near the edge and QR codes need a light quite zone for optimal decoding. We need some minimal contrast to have the target pattern recognized.
Targets can take many different forms, like:
With the dots, you’re at the heart of the QR codes’ content! The positions of the dots will determine the technical parameters as well as the encoded content of your QR code.
Dark dots usually represent the data. Light dots help recognize dark dots, especially in case the background image is also dark or there are dark spots. We need some minimal contrast to have the dots pattern recognized.
Dots can also take many different forms! Some examples:
A QR code can host an extra-layer for you to add a logo or a small image over it.
A logo image can overlap a small portion of a QR code. Don’t make it too large as the QR code won’t be readable anymore. Also, a logo image must never hide a QR code target element! Check our blog on how to add a logo to a QR code and what to avoid.
This is the upper part of the QRcodeLab online QR code generator GUI (graphical user interface)!
Here you’ll find, from left to right:
- access to a management panel on the left part of the screen dedicated to user access and data, as well as the account subscriptions.
- a valid replica of your QR code at size 1:1 (i.e. at the scale of 1 dot for 1 screen pixel). Click on it to display details about your QR code!
- a button to check if the QR code is readable.
- access to a tools panel on the right part of the screen to edit QR codes.
2.1 QR Code Replica
A click on the QR code replica will display detailed information about your QR code type and content.
Please note the QR code content is locked in demo mode.
2.2 QR Code Check Button
This button widget performs a readability check of your QR code with the current parameters and scaling. An emoticon will display the result, positive (green) or negative (red).
Depending on the size of your image and QR code, this check can take a while! (progress bar widget while working, stop button to interrupt the check process).
3 Left Panel
This sliding panel gives access to a set tools related to the user and related subscriptions.
Appearance may change depending if you’re logged in or not.
- Upper part of the panel (in blue): will display a pop-up with detailed information about your subscription. In demo mode downloads are unlimited.
- Login: self explaining, use this interface to log into your QRcodeLab online QR code generator account (if you have one)! Otherwise, just read below.
- Sign Up: easily create your QRcodeLab account! You willl receive an email, just read and follow the instructions! Check your spam box if you don’t receive any email. Being a registered user will unlock the QR code content edit tool.
- Reset Password: manage your credential if you lost your password. You’ll receive an email in minutes with a link.
- My subscriptions: gives you access to the various QRcodeLab online QR code generator paid plans you may sign up for. This option is accessible to registered users. The QR code content is editable only with a valid subscription plan! See details below.
- Image History: this is where to recover the last images you did. Works only for your current user session. We store the images you choose to download in the browser cache memory. This memory is deleted when you logout or if you quit your browser.
- Config: tools to save your work on your computer device with a QR code configuration file. You can also load such a configuration file. This feature is unlocked for registered users, even with no valid subscription plan.
- Exit / Logout & quit: use this menu to logout and quit the QRcodeLab online QR code generator.
- Request Support: anything going wrong ? Use this link to get in touch with our support team, we’ll react asap!
3.1 My Subscriptions
Once you registered and validated your account, you’ll have access to this interface through the left panel with the option entry ‘My subscriptions’.
It’s related to the different QRcodeLab online QR code generator subscription plans you can choose from:
- Subscription Plan: montly plan.
- Quantity Plan: just buy more QR codes. No expiry date, they will remain valid forever!
Without a valid subscription plan you can test and download your image compositions as much as you want but the image size is limited and, most of all, you can not edit the QR code content.
3.1.1 Subscription Plan
You can choose between several plans with different image resolutions, from 1024 up to 4096 pixels. The are the maximum image size you can process with your plan! All plans are bundled with a 10 QR code credit.
Your active plan is displayed in green. Feel free to downgrade or upgrade your plan whenever you wish. A downgrade will apply at the end of the billing period while an upgrade applies immediately, its price being prorated according to the end of the current billing period.
You’re free to cancel any paid plan anytime by switching to ‘Demo Plan’. In such a case the cancel effect is immediate.
When running on a registered demo plan you’re still able to edit the content of your QR code and download your image compositions but a watermark will display alongside. There’s no time limit for a demo plan. Upgrade to a paid plan to recover all the features.
3.1.2 Quantity Plan
In case you end with no more QR codes left, you can subscribe to a Quantity Plan.
Simply choose how much QR codes you want and click on the ‘Proceed’ button to checkout.
This is not a recurring plan and the quantities you buy will remain valid until they are all consumed.
Price is per QR code, at a decreasing rate with a minimum quantity of 5 units.
- receiving a copy of your data, and
- deleting your account.
3.2.1 Send Me My Data
Click on this link if you wish to receive a copy of your QRcodeLab online QR code generator data.
You’ll shortly receive an email with a readable extract of our databases in reference to you.
3.2.2 Delete My Account
Click on this link if you wish to delete your QRcodeLab online QR code generator account and thus terminate any kind of relation with. Don’t forget to confirm in the pop-up window.
It won’t be the same without you!
Your account will be immediately deleted along and any paid plan also immediately disabled ; all your personal data will be wiped out within 24hours. No recovery possible!
Miss us already? So do we! In any case you’ll be able to reopen an account with the same email once the delete procedure has been completed.
4 Viewing Area
This zone displays the chosen background image along with the QR code displayed over it.
In case the image is larger than your screen, you can scroll vertically and horizontally to display the proper part of your image. The maximum size of your image depends of your subscription plan!
How to scroll:
- use the scroll bars on the right and lower side of the image display zone, if displayed
- use your mouse wheel for vertical scrolling, or shift-key +scroll for horizontal scrolling
- drag the image with your mouse or pointer.
Click over the QR code to select it. You can also drag the QR code to any location over the background image. Use the QR code handles to scale or rotate it.
5 Right Panel (Tools Panel)
You now getting at the heart of our app! All the tools are located in this panel.
We’ll make a top-down description.
5.1 Interaction Modes
The Qrcodelab online QR code generator provides three user levels for a better working experience and spare your time:
- ‘Dobby’ (simpler interface, basic controls),
- ‘Padawan’ (intermediate level), or
- ‘Jedi’ (full control on all settings).
Switch from one mode to another to accelerate your design process.
First, use the Dobby mode to define your settings globally. Then dive more into details with the Padawan mode and finish, if needed, with the Jedi mode!
These interaction levels affect the scope of the tools in the tools panel.
5.2 QR Content
This drop-down widget will let you define the content of your QR code. Depending on the length of your data, the QR code appearance and size may change.
Our QRcodeLab online QR code generator allows you to define many kind of content:
- Text: raw text, write down whatever you want!
- URL: this is an internet address. Not only a website address but also the trailing path and even the tracking code (if you plan to monitor a publishing campaign). Depending on the device on which your code will be read, this may trigger an event that will open a web browser with the url you defined.
- SMS: this stands for ‘short message service’. You’ll be able to define a destination phone number and a short text message. Depending on the device on which your code will be read, this may trigger an event that will open a messaging app with your predefined data.
- Call: use this option to drive someone to initiate call. Depending on the device on which your code will be read, this may trigger an event that will open the telephone app, pre-dialing the phone number you defined.
- Email: here you can prepare an email with the target email address, a subject line and a text message. Depending on the device on which your code will be read, this may trigger an event that will open an email application with the predefined email.
- Geographic: specify a geographical position with latitude, longitude and altitude! Depending on the device on which your code will be read, this may trigger an event that will open a map application spotting your predefined location.
- Google Maps: specify a Google Maps location. Use the provided link and follow instructions to get the link location and then paste it in the URL field.
- Wifi: encode a wifi name, authentication method and credential into a QR code!
- Google Play Store: link to a android app. Use the provided link to search for the desired app and then copy/paste the app link in the URL field.
- Apple Play Store: link to an IOS app.
QR code contents are editable only if you’re authenticated and have a valid subscription plan!
5.3 Basic Mode - Dobby
This user mode is the simplest way to define your QR code design!
All elements are defined in a single folding area.
5.3.1 Dots & Targets
- Two color widgets to define the dark and light colors of both the QR code dots and the targets.
- A drop-down menu to set the outline of both the dark and light dots.
- And another drop-down menu to set the aspect of all the targets, whether big or small.
- A slider widget to specify to add some blurring effect to all QR code elements.
5.4 Intermediate Mode - Padawan
This is the QRcodeLab online QR code generator intermediate interaction mode. The set-up of dots and targets are performed in separate folding zones with more parameters for a more precise control of your QR code design.
All the widgets in this section apply globally to both dark and light dots.
- Two color widgets to define the dark and light colors of the dots.
- A drop-down menu to set the outline of the dots.
A set of 4 slider widgets to apply some effects to the dots, both dark and light:
- randomize rotation,
- blurring, to smooth the dots edges.
All the widgets in this section apply both to big and small targets.
- Two color widgets to define the dark and light colors of the targets.
- A drop-down menu to set the aspect of the targets. Some form substitutions may apply for a subset of small targets.
- Two sliders to rotate the targets, big and small.
- A slider widget to apply a blurring effect on the targets edges.
5.5 Full Control Mode - Jedi
This is the full control interaction mode. The set-up of dark dots, light dots, big targets and small targets are performed in separate folding areas with all available parameters!
5.5.1 Dark Dots
The widgets in this section apply exclusively to dark dots.
- A color widget to define the color of the dots.
- A drop-down menu to set the outline of the dots.
- A toggle button to flip the dot (horizontal symmetry).
A set of 4 slider widgets to apply some effects to the dots:
- randomize rotation,
- blurring, to smooth only the dark dots edges.
5.5.2 Light Dots
Same widgets as in previous section but applies to light dots!
5.5.3 Big Targets
All the widgets in this section apply globally to the three big targets.
- Two color widgets to define the dark and light colors of the targets.
- A drop-down menu to set the aspect of the targets.
- Three sliders to rotate individually each of the big targets.
- A slider widget to apply a blurring effect on the big targets edges.
5.5.4 Small Targets
Same widgets as in previous section but applies to small targets!
This section is about geometric transformations applied to the QR codes.
Use these tools to improve integration of QR codes in your images.
The ‘Reset’ button will cancel any existing geometric deformation.
Shear effect with two sliders for vertical and horizontal values (in degree of angle). This is immediately applied to the QR code.
Note that high shear values may compromise the QR code decoding!
Perspective: the ‘Open’ button will unlock a pop-up window dedicated to 3D transformation. You’ll notice four handles that allow to simulate a perspective effect. As a convenience, a light red square is displayed to get a better idea of the perspective transformation.
You can select and move each handle with your mouse or fine tune the position with the keyboard arrows (Ctrl+arrow will amplify the displacement). You can also move the QR code the same way, once selected.
Choose the proper option in the NavBar to validate the transformation or not (‘Close’ / ‘Done’). The ‘Reset’ button will reverse the QR code to its initial size and position.
You can fine tune the graphical integration of your QR code on a perspective surface in your images by adjusting the QR code background color opacity level, even to full transparency.
Big perspective deformations may compromise the QR code decoding!
This widget may be deactivated depending of your browser.
Check our FAQ for more details.
Use this accordion to set the QR code background characteristics.
- A color widget to define the background color.
- A drop-down menu to define the background form.
- A slider widget to play with the blurring level of the background edges.
Use the slider widget in this accordion to preview a scaled down version of your image.
You’ll be able to get an overview of your work. But, most importantly, in the case where the final representation of your work will be smaller than the one displayed on the screen, it may be useful to check the readability of a scaled down version of your QR code!
5.9 Logo Tools
Click on this button to access a pop-up window where you’ll be able to choose, upload and edit a logo image over your QR code.
TIP: click directly on the QR code logo image in the viewing area to directly access the logo pop-up window!
Our QR code generator can manage an extra-layer for you to add a logo or small image over it. An image in such layer can overlap a small portion of the QR code.
Don’t make it too large! The QR code won’t be readable anymore. Note also that a logo image must never hide a QR code target element!
Use the collapsible cross button to upload a graphic element. It can be either a graphic pattern (those of the qr dots), or a useful logo, or any image of your choice (jpg, png or svg format).
Once a logo item has been uploaded, a ‘Tools’ button is unlocked giving access to several submenus, depending on the king of item (raster image or svg vector image).
Each sub-menu matches a visual characteristic of the logo image.
A switch allows to enable/disable each characteristic:
- ‘Image’: the uploaded image itself. You can adjust it’s opacity channel.
- ‘Foreground Tint’: define a color over the logo image. Doesn’t apply to transparent areas in images.
- ‘Inner Tint’: in case of a predefined pattern or logo image, define a color for the inner areas of the logo image.
- ‘Edge’: tools to set the color and thickness of an edge border around the logo image. Doesn’t apply to transparent areas.
- ‘Background’: tools to set the characteristics of a background image for the logo, such as color, geometric form, size, rotation and blur effect.
For additional needs the bottom bar allows several actions through the following buttons:
- ‘Reset’: reverse the logo composition to its initial size and position
- ‘Center’: center the composition to the middle of the qr :code. Any rotation is also cancelled.
- ‘Delete’: will delete the current logo composition.
5.10 Ground Image
Click on this button to select and upload a background image. Choose between solid colors, useful standard backgrounds (‘Gallery’) or upload your own document (format jpg or png).
If you replace an existing image, the QR code parameters will be kept except for its position and the 3D effects applied.
Self explaining: restore all the QR code parameters to default values, place, size and rotation in the current image!
6 Bottom Bar
The links in this lower part of the QRcodeLab online QR code generator user interface are of general purpose and not linked to the user or the QR code itself.
6.1 Request Support
Any question or something going wrong with our online QR code generator? Click on our ‘Request Support’ link to get in touch with us!
6.2 Download Image
Use this button to retrieve your current image composition. A small sticker displays the remaining QR code credit balance.
You’ll be warned on two points:
- if the decoding of the your QR code fails to pass the decoding test. You can still download it, but at your own risks.
- this will consume a credit in (one of) your subscriptions. Monthly QR code credits are allocated first.
6.3 Previous Images
Recover the last downloaded images. Works only within the current user session as locally stored data using the browser cache are deleted at logout.