Monday, March 3, 2014

Get Creative - Personalize Your Blog's Social Media Icons


You may have noticed a few changes around my blog of late.  The truth is, I have gotten a little obsessed with stylizing - blog stylizing, that is.  After I started this blog, one of the first things I did was buy a pre-made Blogger template from Etsy.  I thought it made my blog look more professional, and let's face it, I did not have the skills to build something like that on my own.  However, I quickly learned that buying a blog template is a slippery slope… before you know it, you are being nickel and dimed for things like adding a social media icon, or almost any other change you'd like to make.

Still, I couldn't get enough of how cute some people make their blogs!  The matching icons, the creative fonts…oh my goodness!  I knew I had some learning to do, and the first thing I figured out was how to create your own social media icons.  (You can see my handiwork on the far right).  ;)  This way, you have complete control over your blog's appearance, and you can make your own social media icons to match whatever else you have going on!

INSTRUCTIONS FOR CREATING YOUR OWN SOCIAL MEDIA ICONS:

1.  Download vector images of the social media icons you want.  There are plenty of sites that have these for free, but I used Icons DB, and it worked like a charm!  Not only are there multiple icons to choose from for each social media platform, but you can choose what size you need, and even the color down to the HEX code.  You can also get some more stylized icons if you prefer.

Icons DB lets you choose from multiple icons for the same social media platform, such as Pinterest.  I will be using purple icons for this tutorial.
2.  Use Pic Monkey to turn your newly downloaded icons into something customized for your blog.  You can use pretty much any picture editing program for this, but Pic Monkey makes things easy, especially for beginners.  Select the "Design" option from Pic Monkey's website.  On the left hand menu, click on the butterfly icon to search through the available overlays.



I am going to choose a star overlay for this tutorial, so I went to the "Stars" overlay menu.  Choose your preferred shape, and then you can play with the size and the color until you get something you like.  I chose a star shape.

3.  Now, go back to the left-hand menu, and choose "your own" at the top of the Overlays menu.  We are now going to load the fun social media vectors you downloaded a moment ago!  Play with the size of your social media icon so it will fit over the star (or whatever shape you chose) overlay you just created.

Doesn't that look cute?  :)  Now, assuming you have more than one social media icon you'd like to make, select the original overlay you first created, right click (or on a mac control+click) and select "duplicate overlay."  A second overlay of your chosen shape will appear - move this so it is next to your first one, or the desired distance away.

4.  Now, go back to the "choose your own" overlay option to pick the next social media vector you had downloaded.  Follow the previous steps to make sure the size and placement matches your first icon.

5.  Once you have all of the icons you'd like in a row (or however you would like them arranged), it's time to make sure the image is sized properly for your blog.  First, crop the image as tightly as you can using Pic Monkey's "crop" tool.  Next, resize the image using Pic Monkeys "resize" tool.  For the purposes of this tutorial, I resized my image to be 150 pixels x 75 pixels for 2 icons, but you should resize according to your blog needs.  Now save your image!

6.  Now we need to make the images clickable, so your followers can click on the Pinterest icon and be taken to your Pinterest page!  To do this, there is an awesome (and free!) image mapping service via Image-Maps.com.  Go to their website, load up your image and click "start mapping".

7.  Right click on your first icon and click "Create rect" - size the rectangle so it is over your entire first icon.  Next, fill in the social media URL that this icon should link to along with a Title and ID (the title is what will show up when the mouse hovers over this image.)  Click Save, and repeat for your remaining images.

8.  Your image should now be mapped and clickable!  Right click on your image again, and this time choose "get code".  Click on the "HTML" tab to get your HTML code for this new, clickable image!  The code will be at the very bottom of the screen - copy this code.

9.  The following is what you would do in Blogger, but you can now use your code with whatever blog hosting service you use.  In blogger, and open up your layout settings to add a new gadget to your homepage.  You should choose the HTML/Javascript widget.  Paste your code into the widget, and make sure you've placed the widget wherever you want your icons to appear.  And…DONE!
These are finished and clickable - try them out!  (And please follow me on Pinterest and Google+!  :)
Follow Me on Pinterest Follow Me on Google + Image Map
NOTE - UPDATE as of November 2014:  Unfortunately, Image-Maps is no longer a free service, and my logo's will no longer show up here…!  However, never fear.  This video will show you how to load your own images onto your Blogger blog, without using a 3rd party hosting service:  https://www.youtube.com/watch?v=H4hI5WmqpBw.  This is also possible via a Wordpress widget!  

There you have it!  Hopefully this inspires you to get creative with your blog template.  I am starting to take steps toward personalizing my blog template (although I am still using my purchased Etsy Theme as the main backbone), and will try and share ideas as I go along, if there are any other beginners out there like myself.  :)  

12 comments:

  1. These look great! The first 6 months or so that I was blogging I did everything myself, but let's face it, while crafty, I am not an artistic lady and can't draw to save my life! I ended up enlisting a graphic designer friend to help me and am glad I did. Your blog is looking great and it's awesome you're learning how to make your own page elements!

    XOXO
    Becca | Ladyface Blog

    ReplyDelete
    Replies
    1. Good to know - I love the quirky look and feel of your blog, Becca! One day maybe I'll try actually hire someone as well. We'll see!

      Delete
  2. I am definitely going to give this a try! It's so much more fun to be able to put your own little touch to these kind of things. :)

    Dash of Blue

    ReplyDelete
  3. I'm going to try this today! My social media buttons look so sloppy right now. Thanks for a thorough tutorial!

    ReplyDelete
    Replies
    1. I noticed you use the official Pinterest and Bloglovin follow me buttons - I actually kind of liked how they looked together! I considered doing that! I'll have to check back to see what you end up with, Heidi!

      Delete
    2. They are nice icons, they just take up so much space! Thank you for the suggestion of using Icons DB! I ended up making an html table instead of image mapping so that the icon image would be hosted on my own blog :-).

      Delete
  4. Oh, I've been looking for a tutorial like this for such a long time (since June to be exact) but never found one, or maybe just didn't search enough. I really want to make my own icons, but I'm already afraid of the time I'm going to need, because I'm not very quickly pleased :) Maybe I have to plan this for the weekend! Aaah, I'm so excited! Thank you very much for sharing this, Allison!
    I hope you're having a wonderful week!

    Sofie x
    Little green Sofie

    ReplyDelete
    Replies
    1. Oh YAY! I just personalized my social media icons! Your guide was so easy to follow! I'm not completely satisfied with the end result yet, but I'm just so happy that it worked! Would love you to come and see it (and if you do, please let me know what you think) Thank you very very much, Allison! x

      Delete
    2. Oh nice job Sofie! I just took a look at your website and they look great! :)

      Delete
    3. Allison, I used this tutorial for my second (Dutch) foodblog. Thank you so much, it's such an easy tutorial to follow :) (If you're curious about my second blog, you can take a look HERE, but it's in Dutch, my native language).
      Thank you very very much! x

      Delete