If you’re like me, sometimes you just want something different, and the same old “Web 2.0″ social icons just don’t cut it. Or you have a handmade-type theme going on for your site, and you need some social links to match.

I’m writing this based on the assumption that you already have a basic design for your site, and you know how to translate that into a working webpage. I’ll go over the HTML and CSS required to produce your icon links, but that’s all I’m going to cover in this tutorial. Open up a PS template (I use some templates found at http://960.gs) with your background of choice–I’m using a grungy paper texture that I found here as my background, and an icon set that I posted on my blog awhile ago, here. Alternatively, draw your own.

Open up the icon file, and using the marquee tool, individually copy the icons you want onto your template. Don’t worry about getting the white borders the same size–those will disappear. The icons in my set will all fit in the same size proportional square.

Arrange the icons as you see fit. For the purpose of this basic tutorial, we will be arranging them in nice, neat rows. Apply the Multiply mode to each layer to blend the white areas into the background. If you’re getting a smudgy look where the white used to be (due to a scan that wasn’t very crisp), hit CMD+L and adjust your levels. A small nudge of the right slider to the left should do the trick.

Once you have the icons placed and looking the way you want them, it’s time to export. For something like icons, which should usually all fit in similarly-sized boxes, I like to use the slice tool. It will definitely make things easier later if all your images are the same size and proportion. Right click on your selected slices and set the dimensions under Slice Options. Also, be sure to note down the amount of space between your sliced images.

Select your slices and Save for Web & Devices, as a PNG or JPG (we’re dealing with square images, so no need to worry about transparency).

Also, if you haven’t done so already, export your background image. I like to also export one the same size with all my guides on it, just to make sure I’m keeping everything in the right place.

Now comes the fun part — fire up that text editor.

This tutorial assumes that you have some sort of page layout already in effect, because there are many way better tutorials/books out there on how to build a website.

Basically, now you’re just going to add these to your page the same way you add any other image, except you need to make sure they’re in the correct spot, or they’ll stick out against the background.

Start by listing out the icons. We’ll use CSS for the images.

<div id="right-sidebar">

<ul id="social">
<li class="facebook"><a href="http://facebook.com">facebook</a></li>
<li class="linkedin"><a href="http://linkedin.com">linkedin</a></li>
<li class="digg"><a href="http://digg.com">digg</a></li>
<li class="technorati"><a href="http://technorati.com">technorati</a></li>
<li class="twitter"><a href="http://twitter.com">twitter</a></li>
<li class="delicious"><a href="http://delicious.com">delicious</a></li>
<li class="flickr"><a href="http://flickr.com">flickr</a></li>
<li class="stumbleupon"><a href="http://stumbleupon.com">stumbleupon</a></li>
</ul>

</div><!-- Right-sidebar -->

Ugly, right? We’ll fix that using basic image replacement for these list items.

Oh, and I just put those red blocks there as placeholders. The pink gridlines are part of my background image. I’ll replace that one later, when I’m done lining stuff up. So what we’re going to do next is add our hand-drawn icons to the backgrounds of these links, using the normal background property. This is where defining classes for the list items comes into play.

#social li.facebook a {
background: transparent url('images/facebook.jpg') no-repeat;
}
#social li.linkedin a {
background: transparent url('images/linkedin.jpg') no-repeat;
}
#social li.digg a {
background: transparent url('images/digg.jpg') no-repeat;
}
#social li.technorati a {
background: transparent url('images/technorati.jpg') no-repeat;
}
#social li.twitter a {
background: transparent url('images/twitter.jpg') no-repeat;
}
#social li.delicious a {
background: transparent url('images/delicious.jpg') no-repeat;
}
#social li.flickr a {
background: transparent url('images/flickr.jpg') no-repeat;
}
#social li.stumbleupon a {
background: transparent url('images/stumbleupon.jpg') no-repeat;
}

Argh! Still ugly! No fear, we can fix the size, lose the bullets and get rid of the text without having to mess with each individual class. We’ll also float these items left, so they align horizontally instead of vertical.

#social li {
list-style: none;
float: left;
margin-left: 20px;
margin-bottom: 10px;
padding: 0 4px;
text-indent: -9999px;
}

#social li a {
display: block;
width: 32px;
height: 32px;
}

In case you’re wondering, list-style eliminates the bullets, float sets the items to align horizontally, and text-indent makes the link text go waaaay off to the left, but it stays in the markup. This is good because if your CSS is not working for whatever reason, you’ll still be able to see the links.

I defined the height and width of the anchor tag and set the display to block so it adheres to those dimensions. Here’s what it looks like using Firebug to check the margins/padding:

Now let’s swap out the body background image for the real one, so we can see if everything is lined up correctly.

Looks pretty darn good if I do say so myself! If your images don’t line up with your background image, make sure they’re arranged in exactly the same place as they are on the PSD. Depending on your background image, though, it may not even be noticeable if they are slightly out of place. Definitely test to make sure everything lines up in all browsers, or your IE6 users might think you’re a noob (we know they’re the noobs).

Now if you have a better way to do any of this, don’t hesitate to comment away! I’ve included the final source code, you can download it below. Enjoy!

Source Code Hand-Drawn Social Links

2 thoughts on “How to add hand-drawn icons to your site design

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>