Friday, April 5, 2013

How to make your own Clickable Social Media Icons (Using Image Maps and Photoshop)


This tutorial requires minimal geeky knowledge...

Basically you need to be familiar with knowing how to paste HTML in your website (if you know how to add a HTML widget on your side bar, you're all set. If not, then it's really easy to learn!) 

It also requires knowledge of the really basic basics of working with Photoshop..... and it might help if you know how to read. So yeah, it's pretty easy! :)
The following process uses some images I provided (free to download here) in a previous post.

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. :)


All of the "shapes" I use in this tutorial are available for free download here.



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.




19 comments :

  1. I have been banging my head against my desk for so long over this, thank you so much for sharing how to do it! xx

    ReplyDelete
    Replies
    1. So glad it helped Hayleigh! When I started my blog I seared forever before figuring out how to make them too! :P

      <3 Hannah

      Delete
  2. Thanks for sharing, very easy to follow!

    Question: do you know what this is all about?

    "Warning I can not host images on my server. Please move the image location to your server / image host. Images will be deleted in 2 days. You can use the Photobucket tab to host your image."

    Should I edit the code and upload the image on my blog? Do you do anything special like upload to Photobucket first?

    ReplyDelete
    Replies

    1. I am not entirely sure what that means... I think it's mainly that the codes aren't saved on the actual site, so you need to take the HTML and paste it into your blog (in the widget where you are adding it) because he wont save/host what you map out.

      That's all I do. If there is a crash in the JavaScript and the image map stops working, I always just remap it... So hold on to that image on your computer!

      Hope that helps!

      Delete
    2. It means your image isn't hosted on his site. You have to host it on your own or go to a site like photobucket.

      Delete
  3. This is so lovely! I wish that I could do it my brain just frazzles and I get so confused even though you have put it so helpfully and simply!

    ReplyDelete
    Replies
    1. Victoria, give it a try! It really isn't that difficult once you get the hang if it! :)

      Delete
    2. Woohoo I'm so glad I stuck at trying it I finally did it ^__^ will you be doing a tutorial on how you made your signature?:) thank you!

      Delete
  4. This is way cool! I am so glad I found it. I've only made two icons so far, and on one of them it worked and went to the link really well. But on the other one it didn't work so well... it just said "sorry, the page you were looking for on this blog does not exist," although I have visited the site I was linking to several times, and I am sure the site exists. Do you have any idea why it would be doing this?

    Thanks so much!

    ReplyDelete
  5. Amazing! I will be trying this soon! Thank you!

    ReplyDelete
  6. Ahh... Thank you! Been trying to figure this out for the longest time.

    ReplyDelete
  7. I just found you on Pinterest and LOVED this tutorial! Seriously I have been trying to figure this out for years to no avail and that just made my year so thank you a million times!

    ReplyDelete
  8. Hi Hannah, I'm not sure what I'm doing wrong, but I can't see the advanced toolbox to export the finished product. SOS :)

    ReplyDelete
    Replies
    1. Did you click "Get Your Code" ?

      It should show up. Could you give me more details about what part of the process you completed?

      <3 Hannah

      Delete
  9. PERFECT tutorial! So glad I came across this on Pinterest. Thank you! :)

    ReplyDelete