Snapchat Blogger/Wordpress Widget Tutorial

Hi guys! A few days ago I was viewing my favourite blogger Yutaki's snaps when I came across the one where he was showing off his blog's new Snapchat widget. I went to his blog to check it out, and found out it was basically a GIF. I did a quick search and found that there were absolutely no Snapchat widgets available. I was inspired to make my own Snapchat gif, so today I'll be sharing how I made it in 10 easy steps.

Here's the final product side by side with my reference (Yutaki's one):

 

Mine is ratchet in comparison, but I thought I'd still share how I did it anyways.

I created it using three online photo editing websites. I'm aware that this would all be easier to do on Photoshop, but I'm poor and my laptop is old af, so for everyone else with no access to Photoshop, this tutorial is for you!

STEP 1: Open your Snapchat and take a screenshot of your Snapcode.

STEP 2: Crop your Snapcode out of the screenshot in a 1:1 (Square) ratio.

I used a website called Picmonkey.com to do this. This site is basically my personal Photoshop and I use it for almost all my photo edits.

STEP 3: Make the corners of the Snapcode round.

I also used Picmonkey for this.

STEP 4: Make the Snapchat ghost transparent

What we're doing is creating a layer/template, and to do that we have to remove the white from the snapchat ghost.

To do this, I used a website called Lunapic. This is my go-to "transparent-inator"

To do this, go to this link: www.lunapic.com/editor/?action=transparent

After that, upload the file and just click on the white part.

Fun fact, did you know the Snapchat ghost's name is Ghostface Chillah?

STEP 5: Make a transparent canvas

Back to Picmonkey.com, open a blank canvas. 

My Snapcode was 641x641 pixels big, so I decided to create a longer canvas: 641x800 pixels.

STEP 6: Layer the transparent Snapcode on the transparent canvas.

Layer the Snapcode over the canvas with the Overlay function. Make sure the Snapcode is sticking at the or almost at the very top of the canvas.

STEP 7: Write your name and username

Snapchat recently changed their font and they're currently using Avenir. Unfortunately this font is unavailable for free download (if it isn't, do let me know), so instead I used Arial. I also used Picmonkey to do this.

The size of the name was 60 and the username 35. Remember to make the username bold.

If you want to add emojis, just download the emoji on Google and layer it on top as well.

STEP 8: Save template

Before applying the pictures, save the whole "template" so that when you want to make an updated version you only have to do steps 5, 6, 9 and 10.

STEP 9: Layer pictures

Apply another layer via Picmonkey's Overlay feature. Send it to back and align it behind the ghost.

You can make as many as you want, but keep in mind that the more pictures you make, the bigger you GIF file size will be.

STEP 10: Make the GIF

Go to gifmake.me and upload all your photos. Select how fast you want it go, save it and you're done!

And voila, your Snapchat GIF is done!

All that's left to do is add it to your blog. I'm not sure about Wordpress, but in Blogger all you have to do is:

1. Go to Layout

2. Add Gadget

3. Image

I hope you found this tutorial helpful! As always, thanks for reading!