QR Codes for Large Type

A couple of weeks ago, I posted an article explaining how to have your own Large Type app for quick access from your phone’s home screen, even offline. Today, I’ll show you how to create QR code images to make it easier to connect with people on LinkedIn, Instagram, Telegram, or WhatsApp in just a few taps.

If you missed my first post on this, you can check it out here.

#Creating your own QR codes for Large Type Svelte

For this guide, I’ll be using Adobe Photoshop, but feel free to use any alternative that can work with .psd files.

Here’s what we’ll do on this guide:

• generate QR codes for your social networks.
• use the generated QR codes together with the Photoshop template file I’m providing.
• export the image with your QR code so that you can use it with the Large Type app from my previous article.

#Generating the QR codes

For generating the QR codes, we’ll use the website QR Code Monkey, so go ahead and open https://www.qrcode-monkey.com/ on a new tab in your browser.

On the Your URL field, you’ll need to enter the URL for the social network you want to link to. Each social network has it’s own URL pattern, here are the URL patterns for each of them:

• LinkedIn: https://www.linkedin.com/in/your_username?fromQR=1 (replace your_username with the username from your own LinkedIn profile)
• Instagram: https://instagram.com/your_username (replace your_username with the username from your own Instagram profile)
• Telegram: https://t.me/your_username (replace your_username with the username from your own Telegram profile)
• WhatsApp: https://wa.me/your_phone_number (replace your_phone_number with your own WhatsApp phone number). Important: make sure to enter the phone number with country code including the plus sign at the start, e.g.: +4915301006622.

For each social profile, you should create a different QR code using QR Code Monkey. On this example let’s make a QR code that links to my LinkedIn profile (do the same for your own profile).

Add the URL, click on “ADD LOGO IMAGE” and then select a logo image, I’ll pick the LinkedIn one in this case. Then, click on “Create QR Code” to generate the code, and then on “Download PNG” to download the generated QR code. Repeat the process for all social networks you want to have QR codes for.

NOTE: the Badge_Template.psd file I am providing here already have the logo images for LinkedIn, Instagram, Telegram and WhatsApp, but it is still a good idea to pick any logo when creating the QR code to make sure that we have that placeholder space in the middle, as that allow us to choose a different logo image to use on it later.

#Removing the background

Great, we have our QR codes! But to use them properly, first we should remove the white background. For that, head over to https://www.remove.bg/, upload the QR code file generated on the previous step, then click on “Download” to download the QR code without the white background:

Great! Now we’re ready to use the file we just downloaded with Photoshop to create your own “social profile badge” image!

#Creating your own Badge images

The next steps will be shown with Adobe Photoshop, but feel free to use any alternative such as GIMP or Krita.

Open the Badge_Template.psd file with Adobe Photoshop. This is what you should see:

Now, expand the QR-LinkedIn folder, select the qr-linkedin image, and drag the QR code that you generated on the previous step into Photophop’s window:

Now, resize it by dragging the edge of the QR code image while holding alt/option key (to keep it centered) so that it matches the size of the QR code that’s below it, the one from the template.

Now that you’ve resized your QR code image to match the size and position of the old one, select the layer of the old QR code and press delete/backspace to delete the layer:

Done! Now you should have your own badge image with a QR code that points to your own profile. You can check it by pointing your phone’s camera to it to confirm that it will open up your LinkedIn profile.

Now, do the same for the other social networks. You can close the LinkedIn folder and toggle the visibility off and toggle the visibility on for the next social network you want to work on:

Repeat these steps for each of your social profiles.

Before we export the image to be used with Large Type Svelte, let’s also change the avatar image.

For that, expand the Avatar folder in Photoshop, select the current avatar image, drag your desired image into Photoshop’s window and resize it so that it roughly matches the size of the existing avatar (similar to how we did with the QR code).

To make the new image fit the circle shape, right click the layer of your new image and then select “Create Clipping Mask” from the pop-up menu.

After this step it should look something like this:

Great! Now we’re ready to export the images. We’ll repeat this step for each of the social networks we want to have a “badge” for. Let’s export the image for LinkedInd first. Toggle visibility on for the QR-LinkedIn group, and keep it off for the other platforms (QR-Instagram, QR-Telegram and QR-WhatsApp).

When you’re ready to export, go to File > Export > Save For Web (Legacy), change the width to about 600px (we’re doing this so that the exported file isn’t too big), then click “Save”, give the new file a name and confirm:

For the other social networks, just repeat the process and export the images when done for each of them. Each folder on the PSD file has the appropriate logos for the networks (LinkedIn, Instagram, Telegram and WhatsApp), but feel free to change them around as well.

With all this done, you can have your QR codes easily accessible from your phone with Large Type Svelte. All you have to do now is put the images you just exported in the public folder of your own fork of the Large Type Svelte app as explained in my previous article (see section “Creating your own QR codes that point to your social profiles”)

#Thank you 💖

Phew! That was a lot. Now that I think of it, maybe I can find a way to somehow automate this process to make it easier… 🤔

If you think this was helpful, consider supporting me on Ko-fi 💖