People ask me all the time how I put my sidebar for my blog together, so I wanted to share the (super easy) process. I use these same techniques for everything from my blog menu to my “Hi!” snippet on my sidebar. Go ahead, check them out! 🙂
First, I want to show how I put the actual image together (the “icon buttons” and text on top)
You don’t have to have Photoshop to do this. You can use a similar process by using the free actions in PicMonkey. If building an image on Photoshop is a no brainier to you then just skip to part two.
I “shaded out” the “unnecessary” stuff so that every step would be straight forward. If any of these steps confuse you, don’t hesitate to ask. Photoshop is really easy to use once you get the feel of it. 🙂
It’s really important that you have the proper dimensions for your image. You don’t want it overlapping anything on your blog. If you’re using Blogger, here’s how you see the exact width of your sidebar: Go to Design->Template->Customize->Adjust Widths. It should give you the size of your sidebar down to the pixels.
Since the social media bar is more vertical than horizontal, I adjusted the height of my icon to make sure it would fit.
Now I can just click on the icon shape and adjust the width (I decided to make it less wide)
Since I wanted 4 or 5 social media options, I copied the icon I had just edited and pasted as needed.
Next, I used my text tool to write what each button was.
I advise saving as a png image as that is generally what is best for web use.
The rest of the steps for this process are done in my favorite free graphics tool: Image Maps.
See where it says, “paste your link here”??? Well, that;s where you’re supposed to paste your link. 🙂
And now you have an amazing, interactive, CLICKABLE(!!!) Social Media Bar!!!
Go ahead, try it out! It’s clickable! Now go out and impress everyone with your new digital graphics skills!
Oh yeah… a little secret, I made my signature with Photoshop and Image Maps too. Pretty cool, huh?
Thanks so much to Something Swanky for teaching me how to use image maps with her tutorial. If you don’t have photoshop, totally check out her tutorial to make social media icons using picmonkey.
ps) ever so often the images may crash (I’ve had it happen to me once or twice) so make sure to save the original, non-image mapped image in case you need to re-map it.