Make your own profile picture overlay

Profile pictures overlays are all the rage. So why not do one to promote something you truly believe in? In my case, that was the TEDx event I organize. We had the idea of giving away free tickets as a raffle, where people could enter by changing their profile pictures to show the most important details of our event.

I looked around, but could not find a decent web site that would allow us to have a profile picture overlay for free, with an easy process and no extra watermark. Sites like ProfileOverlays.com provide this service, but their offer for our purpose started at $250 for setup plus a monthly fee for hosting. Really, for a non-profit cause, and such a simple thing to do? Being a computer scientist, I could not let this opportunity pass us by. After just an hour of looking around and trying various frameworks, I found a simple solution. It relies on CamanJS, an image/canvas manipulation package for JavaScript.

You can copy this example to use it for your cause. You don’t even need to credit me, but since I’m a curious person, I would love for you to share how you used it! Feel free to use any of the contact methods available to tell me about it.

Working Example

In case you were wondering, an overlay does not make your picture look less goofy

Click here to get to a simple page showing a working example. Feel free to play around with it. Our overlay was created by our very talented graphics artist Sandra Heinzen, by the way.

As you can see, this is an extremely simple but effective example. It does not store any image on your server, and allows the user to simply save their new profile photo and set it on the social network of their choice themselves. No direct social integration, no filters, no bullshit. The upside: I would assume that even if you are not experienced with web programming, you can get this working in under 30 minutes.

How to set this up

Okay, I’m getting to it. First of all, clone the repository or download a package of it and unpack it. You will find the following files in the resulting folder:

caman.full.js
index.php
overlay.png
plain.png

Create your overlay & placeholder image

Get creative! Name the resulting file overlay.png and replace the one in that folder. We found that an image of 800x800 pixels size works best. The finished profile picture will have the same dimensions as this file. You can go with our example and create a frame with a completely transparent space for a picture, or you can go with an overlay that spans the whole photo. We will fine-tune the overall transparency of the image in a minute, for now you can leave the overlay opacity at a full 100%.

Next, create a placeholder image that will be shown before the user uploads a picture, and save it as plain.png. You can use any placeholder you like here, but it should have the same dimensions as your overlay. If you want to simply use your overlay image, keep in mind that if it contains completely transparent areas, you need to fill these with a solid colour for the script to work. Have a look at the file in the folder to see what I mean.

Get the webpage working

Finally, edit index.php to have the content you want. I put in some sample text and formatting. If you are using PHP includes, you can also simply include this file in one of the existing pages of your web site.

Let’s go!

Upload the folder to your web server and try your new overlay! Does it not look quite right? Don’t worry, we are going to fine-tune it in the next step.

The devil is in the details

Let’s take a look at the relevant parts of the script to see where we can tweak it. The following section is where the magic happens. I added comments inline to explain where you can change the settings.

… and there you go! Keep playing around until you like it, then promote the hell out of your new tool so that your [insert amazing cause/event here] becomes viral!

Going further

CamanJS supports complex image editing operations. You can experiment with cropping, settings, filters and much more! Check out their examples and documentation to see if you can handle it.

A couple of things to keep in mind

I like this tool because it’s simple, yet adaptable to different needs. You can customize it as much as you want to, but I suggest you keep the following things in mind:

• If you want your campaign to be successful, create an overlay that works with a wide range of pictures. People do crazy things on their photos — the face might not always be in the middle, the picture might be black and white or have a variety of filters on it. We tested the overlay with the profile pictures of all 20 team members to make sure that it could accommodate different picture styles.
• The resolution of your overlay should be at least 800x800 pixels, just to make sure it looks good even on high-resolution displays (yes, Retina rocks).
• The example provided works only with square pictures. If the uploaded photo is not square, it will be compressed in one dimension and it will look strange. I’m sure Caman also supports cropping, if you want to look into it (see below).
• If you want people to be able to set their profile picture directly, you need to work with a Facebook integration, which makes things considerably more complicated. For us, it was not important because we wanted people to set their picture on different social networks, so it was perfectly fine for them to just save it to their hard drive and set it by hand. Go for it if you dare, though, and let me know how it goes.
• If you are trying to open the HTML page locally on your browser, it will not work. The fix is simple: upload the whole directory contents to your web server to test.

That’s it! Have fun, and please do share how you used this. There are a bunch of contact methods here.

Check out other articles we wrote for TEDx organizers here!