I was making some social media icons to use in my sidebars as I wanted to add a couple that I couldn’t find through a Google search, and then it dawned on me that you guys might like to know how I went about putting them together because there’s a fairly simple way that doesn’t require the use of Photoshop or Gimp or any of those programmes.
Firstly, you might be asking, “Why do I need fancy icons?” Well, maybe you don’t, and that’s perfectly okay, but the benefit to having a matching set of icons to link to the different ways to follow yourself and your blog is pretty much a cosmetic thing. Having a pile of text links and so on littering the sidebar can be a bit messy. If you don’t care, cool. But if you’d like to tidy them up a little bit, declutter your blog and keep these things all together, then read on.
The Jaedia’s Menagerie Social Media Icon Set
First of all, here is the set of icons I’ve put together. There are two for Scree’s thingy, and another two for Google plus, because I couldn’t decide which I preferred of the two styles. You are welcome to use these yourself, changing colours or styles if you fancy it, so long as they’re not for commercial use, of course.
Making Your Own Icons
It is really quite simple to make your own icons. I actually followed this guide, though it is a tiny bit outdated now so I had to adapt a few things.
So first thing’s first, head on over to picmonkey. There is no need to subscribe or anything, just hover over the icons at the top, and you want design and then custom. I went for 128×128 size because it’s nice and easy to see what your buttons look like at that size, and it’s also fairly easy to resize things as fits your blog when you input them (as you can see, the same buttons I listed above which are quite large are very small in my sidebar) but that’s entirely up to you and what kind of buttons you want to create. You might decide to create banners (like I did on my book blog). That’s the beauty of creating your own buttons. Total creative freedom.
Next you’re going to want the silhouettes (and here is yet another guide on using picmonkey for this purpose which explains silhouettes) to actually add the social media logos to your buttons. This post lists a few “icon finder” websites, and all you’re looking for is a silhouette vector, this will be a solid logo with a transparent background for purposes I will talk about in a moment. There are a few decent ones listed here, as an example, though I recommend searching the websites for the logo you want, i.e. RSS, Twitter, Steam, and choosing the icon that you like the most for your purposes. I do recommend you choose something with a solid colour and transparent background and then save the icon in .png format to a folder you’ll be able to find it in later.
And as for the Scree and Newbie Blogger Initiative icons, here are some .pngs I put together to use as silhouettes which you’re of course welcome to use. Sadly, I couldn’t find (or be bothered to put together) icons or silhouettes that looked okay with this set for feedly, Raptr, Bloglovin, My Anime List, AniList, or libsyn (I may fix this at a later point and update this guide with them..maybe) but that’s not entirely the end of the world. NB: I missed a couple of pixels around the Scree cross, just go at them with the eraser on your icons.
The Creative Bit.. Ish!
So now you’ve got picmonkey open and you’ve got the logos you want to use, you have all these options staring at you. What do you do?
Step 1: Turn on the transparency. This just enables you to create your icons in all sorts of funky shapes without worrying about the white corners behind. That is unless you want a solid square, then skip this step.
You can also see in the image above how to change the colour of your “canvas”, so if you are going for a solid square, this is where you choose the colour if you want to change it.
Step 2: Choose your shape (again, if you’re opting for a solid square, skip this step) by choosing the butterfly icon, which is the overlays option, to the left and having a little browse through the options presented to you. Hint: If there’s a little crown on the section, it’s a premium feature. Once you’ve chosen a shape, you can resize to your heart’s content and then add your silhouette to the canvas. I’ve taken a few screenshots of the next steps to create your icon.
If you want to add effects and fiddle around, check out the other sections such as effects, frames, textures, text, but these are the basics.
Step 3: Then all you need to do is insert them into your sidebar as image links anywhere you like. Just create a new widget and go nuts.
I use the following code for mine:
<p align=”center”><a href=”link to social media” target=”_blank”><img src=”icon image url” title=”social media name” border=”0″ width=”29″></a> <a href=”link to social media” target=”_blank”><img src=”icon image url” title=”social media title” border=”0″ width=”29″></a></p>
You would obviously change your links, image urls, social media names and (optionally, though it can be removed if original icon size is fine, just remove the italicised bit) widths, then add any extras you might need. And that’s all there is to creating linkable social media icons that look a little bit easier on the eye.
You can also use “customize” in the appearance tab if you’re a WordPress user. Select the sidebar widgets you wish to edit/add to, pop the above code in and fiddle with it until you’re happy with the appearance then you can save and enjoy a slightly decluttered and/or snazzier-looking blog. If you have any questions at all, no matter how silly you might think they sound, you’re very welcome to ask me.
Bonus: Just incase anybody wants their RSS icon to be a pink beard… You are welcome, internet.