Monday, June 11, 2012

How to Make Social Media Icons in Picmonkey {Beautify Your Blog Series}


how to make social media icons

For this installment of my Beautify Your Blog series I am going to show you how to make your own social media icons. This is a great way to put all your follow buttons in one place that won’t take up much real estate on your blog.

My first attempt at adding social media buttons was spending forever Googling to find icons that someone else created. It worked but it wasn’t very pretty and didn’t go with any type of theme on my blog. After I made my new header and blog button I wanted to make some new cute icons that would match my new color scheme. I remade them for this post since I found an awesome new resource to make them look more professional. I’ll link up to all resources at the end of the post.

Start out by going to Picmonkey.com and choosing edit a photo.

making a blog button

Upload any picture off of your computer. Then click on the three molecules on the top left hand toolbar and pick crop. Enter 50 x 50 and hit Apply.

crop

Next click on the heart, star, bubble that is on the left hand toolbar and pick Geometric and the square. Enlarge the square until it covers the entire picture. Choose the color you want for your background. I typed in one of the colors that matches my blog theme in the Overlay box. Click combine (where the arrow is pointing) to merge your new background and prevent it from moving.

background

Now it’s time to pick a pretty design for your icon. Scan through the different overlay options. The one I choose was in Labels. I selected the overlay I wanted and expanded it to fit within my square. I changed the color to one that is in my blog theme. Hit combine when you are done and this will be the template you use to make all the other icons. Save this image to your computer so your don’t lose it.

design

Now we are going to add pictures for the social media you want to link too. The Blog Designer Network has free social icon silhouettes here. (Update: This site wasn’t working for me so I found another set of icons at Pixeden.) Go there, right click on the images you want and choose Save Picture As to save the image to your computer.

Then at the top of the Overlays click Your Own. Browse your computer and find one of the silhouettes you saved.

get your own

Resize your silhouette to fit on your icon. You can change the color from black to whatever you want. I choose white for mine.

social media

Repeat for all the other icons you want to make. There isn’t a sillhouette for blog lovin so I just picked a heart from the overlays.

Next all the pics to be uploaded to photobucket or another sharing site.

This is the basic code for the icon. I suggest pasting it into a word doc so you can edit it.
<a href=”YOUR SOCIAL URL HERE target=”_blank”><img src=”YOUR IMAGE DIRECT LINK HERE“ alt=”YOUR IMAGE TITLE HERE“ /></a>

Your social url is the link to your social media page, i.e. to your facebook page, your pinterest page etc. If you want to add the email icon you would use mailto: as your URL

Your image direct link is from photobucket, where the arrow is pointing. If you click in the direct link box it will automatically copy it.

photobucket

Your image title is what you want to display when you hover over your icon. You can make it something like “Like me on Facebook”.

Here is what my code looks like for my four icons:
(Update: I changed the link to my RSS feed to Feedburner thanks to Jeannie at Living Loving Crafting. I realized this is what most of us bloggers are using)

<a href="http://feeds.feedburner.com/ProjectsAroundTheHouse" target="_blank"><img src="http://i1259.photobucket.com/albums/ii558/cwilliams130/RSS2.jpg" alt=" Follow My RSS Feed" width="50px" border="0"/></a>

<a href="http://www.facebook.com/pages/Projects-Around-the-House/148811585224788" target="_blank"><img src="http://i1259.photobucket.com/albums/ii558/cwilliams130/facebook2.jpg" alt=" Like me on Facebook"width="50px" border="0"/></a>

<a href="http://pinterest.com/cwilliams130/"><img src="http://i1259.photobucket.com/albums/ii558/cwilliams130/pinterest2.jpg" width="50px" height="50px" alt="Follow Me on Pinterest" /></a>

<a href='http://www.bloglovin.com/en/blog/3480056/projects-around-the-house'><img src="http://i1259.photobucket.com/albums/ii558/cwilliams130/bloglovin.jpg" alt="Follow Me on Blog Lovin" /></a>
 
Now that you have your code figured out it’s time to add the icons to your blog.
I use blogger so that’s what I will show you. Go to Layout and click Add a Gadget.
 
making a blog button 10 

Choose HTML/Java Script

making a blog button 13

Enter Follow Me or something more original as the title and paste your code into the content box. Hit Save.

follow me

Admire your new social media icons on your blog!

blog icons

Resources:
Here is another great tutorial for making social media icons. This is where I found the link to the social media icon silhouettes.
Don’t want to make your own icons? Here is a roundup of 21 free social media icon sets.
Here are some more free social media icons.

Check out my previous posts:
How to make a blog button using Picmonkey
How to make a blog header in Picmonkey
How to customize your blogger background

Upcoming posts:
How to use Windows Livewriter
How to make a Facebook cover photo
How to make a blog header part II

I may be linking up to one of these fabulous parties.

LinkWithin

Related Posts Plugin for WordPress, Blogger...