Thursday, July 26, 2012

Tutorial: Make your own social media icons

Well I think I read every web page out there trying to make my own social media icons to look cohesive and not red ( sorry pinterest) After many yelling at my computer screen sessions and head scratching, I finally got it. First, if you really don't want to make them but still want a matching set, you can purchase them on sites like etsy from graphic designers and install them. Skip down to the end of the post where there are instructions for installing into your sidebar.

I currently don't have any fancy photo programs ( working on that soon) but for now I used Picasa and GIMP. Both of these programs can be downloaded for free on the internet.

If you want the background of your icons to be a picture or specific background you start with Picasa. Import the picture into Picasa, "fix" to your liking with the different tools. Export the picture (file, export) and change the pixels to a lower number. I used 500 because this image was going to be so small.

Here is what I started with: a closeup of old barn board

Open GIMP and select File and then new.
The program will now ask for your image size, I selected 150x40 pixels in a landscape view (tree icon going horizontal). A new box will pop up and you are on your way.
In the window that popped up  you will now select file and open. (choose your picture) [you could also use a solid colour background at this point with the fill button(can dumping paint) in the toolbox and skip the next few steps]

 your picture will pop up in a new window, we are now going to scale your background down so it will fit in your icon space and not look blurry. pick layer and then scale layer.

 you will enter in your largest pixel from your previous selection, in this case 150 and hit tab which will have GIMP fix your background size itself. Choose scale and you will see your image shrink.

you now want to have your image move into your icons box space. click on the top of your picture box; push ctrl x, click the box where the icon will end up and then ctrl v. your picture will remove itself from one box and fit itself into the other. this creates a "layer" which should pop up in the toolbox.

Time to add text to your icon or the icons from each site if you have them. In the toolbox push the capitol A. You can now choose your font, size, colour etc. Your text may not be exactly centered as you enter it but you can slide the box around until it looks right to you.


 You are now ready to save your image and then install.

 when you go to save, you will have to choose your file extension ie. jpeg

and then export it and then hit save again.

Install your icon on your blog.
This part took me a while because all the websites said you need to host your image and get the direct link, like all people should know how to do this. Photobucket is a website that is free to use and gives your newly made icon a link. Sign up and upload your image to an album.
The next part cannot be explained by me any better than this YouTube video I found can so here you go:

You're done! I think mine turned out snazzy and match my style.

I hope this helps and makes sense. Good Luck and throwing your computer into a lake or pool cannot be undone so.......


No comments :

Post a Comment

Leave me a note. I'd love to hear from you.
Unless you're being less than friendly, then play like the rabbit and say nothing!