Create Social Media Icons Using Ribbet, and Free Instagram/G+ Icon Silhouettes

Since I've joined Twitter and Stumble and completed my set of social media outlets (for now), I went ahead and updated my set of social media icons for the sidebar of the blog.  For my own icons, I used Gimp, which is a photo editing tool, probably similar to Photoshop Elements, but it's free, open source, and there's lots of tutorials on the internets.  However, this tutorial will teach you how to use Ribbet, an online tool whose premium features are free right now, since PicMonkey has started charging for some of their more advanced services.  This means you can sign up to Ribbet, and make your own social media icons with no special software needed!

This will be a bit of a long post, so bear with me, and if you have any questions, just ask!

Please do not redistribute or sell these images.

1.  First, you'll need a set of icon silhouettes.  I found transparent png images of social media icons at The Blog Designer Network, but since that set was missing the Instagram and Google + icons, I made my own for you to use.  You can just right-click all of the images and save to your computer.

2.  Go to Ribbet.com.  Register for their premium services, since it's free right now.  I assume they will start charging just as PicMonkey has, but I don't know when, and why not take advantage right now?  

3.  Once you've registered, start uploading your icon silhouettes.  You'll need to start with a blank white image, which you can just Save As here:

white blank image

4.  Pick the white image to edit.  In 'Basic Edits' -> 'Resize', alter the image to your desired dimensions.  Remember you can crop extra white space later if necessary.

5.  Go to 'Stickers' -> 'Geometric', and choose the shape you want for your icons.  I used circles for this example.  Adjust the size and color of your shapes.  Once you have one set up correctly, right click, choose 'Duplicate Circle' to generate the other bases for your icons.

6.  See that green 'Photo Basket' tab at the bottom left?  Expand that tab and you'll see the icon silhouettes you've previously uploaded.  Or you have the option of uploading photos at this point.  Drag the silhouette onto your shape.  Change the size of the overlay to fit inside your icon base, and change the color to white (the color is up to you of course, I chose white).

7.  Here you can see the RSS icon shrunk down to size and in white.  Continue adding the icon silhouettes as overlays to the other icon bases.

8.  I choose to zoom into my image so I can better center my overlays.  The zoom option is in the bottom right.  You can also adjust where the overlay sits in the base.  For example, some people place the facebook icon slightly off-center, and the G+ icon to cut off the bottom of the 'g'.

9.  You can mess around in here for ages, but when you're done, click the 'Save & Share' tab at the top, choose a file name, and save as a PNG file.

10.  Now that you have your image, you'll want to add an image map to it.  This enables different areas of the image to be linked to different sites.  Go to www.image-maps.com, upload your previously saved image, and click on 'Start Mapping Your Image'

11.  You'll be taken to an intermediate window that you can just click through.  On the right hand side, you'll be given the choice to using a rectangle mapping or a custom shape mapping.  Choose 'rectangle'.  This will open up a mapping box on your image.  Adjust and place the box over an icon, and enter in the link for that icon.  You can also enter in a title for that link.

Also, make sure to un-check the 'Show Text Links' box on the right hand side-bar.

12.  Keep adding mapping areas and adding links to each icon.  Once you are done (I only mapped one for this example), go to the side-bar and click on 'Get Your Code'.

13.  This image ended up a bit screwy on my screen, but you basically pick the 2nd tab, 'HTML Code'.  Copy the code.

14.  Enter the code to your website.  Remember to upload your own copy of the icon image and replace the image-map image code with your own uploaded image code in the HTML.  If you are on the Blogger platform, go to Layout -> Add a Gadget -> HTML/JavaScript.  Enter the copied code, save it and refresh your blog.

Notes:  As I mentioned before, I used Gimp to create my base image because it allows me to create my base image down to the pixel, and I'm a crazy perfectionist like that.  But obviously, you don't need Gimp to create your own set of social media icons!

 

Click here to see where I party!