Snapchat Blogger/Wordpress Widget Tutorial

June 15, 2016

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 2Crop 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!

line_characters_in_love-1


10 comments

  1. Snapchat is popular app these days, this app has introduced new terms: snaps, snapchatters, snapback, etc., if you want to check some Snapchat data, take quick look at website to find out information!

    ReplyDelete
  2. Download the best Free WordPress Themes for creating blogs and portfolio sites. You will find thousands of paid WordPress themes for free. We update our database daily.

    ReplyDelete
  3. The download will be a ZIP archive; it will most likely be around two megabytes in size. Remember, it doesn't install on your computer; it installs on your web host, and I'll explain next what a web host is, so for now all you want to do is download it.https://edkentmedia.com/website-design-toronto

    ReplyDelete
  4. Wow, great website article.Really many thanks! Awesome.Thanks so significantly for the content post.Much thanks again. Actually Cool.wow, amazing blog post.Really thanks! Fantastic.Really educational post. seo calgary

    ReplyDelete
  5. Customer service is the service that you provide your clients. Currently a customer or a client is someone who purchases a service or a product from your organization. Customer service is the very crucial part of a business and really basic. Just making someone feel client. Helping them solve any queries they worries or have, and only looking after their demands.https://servicecenterguru.com

    ReplyDelete
  6. Now if we go back to the Wordpress installation screen we can enter the database name, username and password we just created using phpMyAdmin. The database host should be localhost and we'll leave the table prefix as wp_.
    etikeÄŤiĹł spausdinimas

    ReplyDelete

Write a comment & tell me your thoughts!

FOLLOW ME ON INSTAGRAM

© FISHMEATDIE. Made by SoulMuse.