*Update: I have redesigned my social media icons recently and they can be found in the sidebar of my new site. This tutorial is one I had done with my old site which was on the blogger platform (blogspot) and now here with WordPress. I have had success with both.
I have been drooling over so many pages social media icons and wondering how did they do it? How can I do it? All the posts assured me that making your own icons is simple. I went to where I always go to look up this kind of stuff. Pinterest of course! I scoured many sites and tutorials but the one that really worked for me and I could follow the instructions without too much difficulty was the tutorial from Something Swanky Tutorial On Making Social Media Icons. In this post she offers free social media icon silhouettes and a tutorial of how to create your icons using PicMonkey.
Here is how to create your own social media icons. And if you look to the side of this blog post you will see my new Social Media Icons which I created.
Tutorial Creating Social Media Icons using PicMonkey
Go to PicMonkey and click on the design button and choose the custom option so you can make your icons as big or small as you would like. It is best though to be slightly smaller than the width of your side bar. So make sure you check the width before starting. There is nothing more frustrating then doing all the work and then having to start all over again. Who has time for that!
Then go to canvas colour and choose the colour you would like as the background.
In the next step you will choose the shape and size of your icons.
I got my transparent social media icons from
Something Swanky Tutorial On Making Social Media Icons. On her site you have to save each icon separately to your own computer so when in Pic Monkey you go to get your own overlays and pull up each social media icon separately from your own computer and place them each individually. Below I placed the Instagram icon.
Following the same idea I would go ahead and make an icon for each social media network you want to include. Then crop the image to the size of the bar you would like to be on your site.
I decided to add a cute border around my bar and add a background colour as well. Really the options are endless. It all depends on how creative you would like to be.
Save your image to your computer as a jpg file which will be the file you will use to create the image map. This is one I used. You can see it on the right of this blog post. Isn’t beautiful? Ok so this is half of the tutorial. Then next step is to create your image map so that way when someone thinks hey I would love to follow this person on Facebook or Pinterest your icons are there just waiting for them to click and transport them to your other pages with ease.
TUTORIAL ON HOW TO CREATE AN IMAGE MAP FOR YOUR SOCIAL MEDIA ICONS AND PLACE IT ON YOUR SITE.
The first thing you will have to do is place your jpg file that you saved from PicMonkey on a site that will host your image.
VERY IMPORTANT! Your image must have a url hosted by another site other than
www.image-maps.com. They will not host your image. One option is to place your image in an old blog post which is what I did. I placed it in my
Blogging Goals Post where learning how to do this was one of things I wanted to learn how to do this year.
Once your image has an url then your are set to go to
www.image-maps.com and start mapping your image.
I used rectangles to cover each social media icon. You could choose poly or circles as well.
Then you will have to type in the map url into the map url box.
Once you have clicked save a red box should appear around your icon. You can go ahead and repeat the same process for each of your icons.
It should look something like this once complete.
Then its time to get the code that you will place on your site.
I highlighted the code and copied it.
Then I went into my blogger layout and INSERT GADGET. I used the gadget that allows me to add third party html to my site. I added the code and clicked save. Ta Da! My social media bar with my social media icons is now on the right hand side.
I hope this post will be helpful for other bloggers who would like cool, beautiful social media icons and want to learn how to create them. I would like to thank Ashton author and owner of
Something Swanky without her tutorial I wouldn’t have figured out how to make my own. She also has lots, and lots of recipes that are drool worthy.
I am new at creating tutorials so if anything is unclear or needs further explanation please be patient with me I will gladly correct or give further instructions if I can. I am not a technical expert so please don’t attempt if you do not feel confident in working with any html code. I followed Ashton’s tutorial and it was pretty simple and I used as my reference because I don’t have oodles of technical background but I was able to do this myself.
Cheers,
Bonnie
Related
