For turning the letters into images, I used the Type tool in Photoshop (though you can use just about any image editor with a Type function). I sized the canvas to be a bit larger than a single letter, typed a letter, and cropped the image so there was no white space around it. I saved the letter as a gif and then repeated the process. By the end, I had an image for each letter of the alphabet—a.gif, b.gif, c.gif, and so on.

Thanx for making this excellent site!
I was just wondering how you turned the letters into images ?

Keep up the great work!

-mpare
www.paretech.com

$(document).ready(function(){
var ps = document.getElementsByTagName("P") ;
for ( var j = 0 ; j < ps.length ; j++ )
{
swap_first_letter( ps(j) );
}
});
function swap_first_letter( first_paragraph, first_letter )
{
if ( !first_paragraph ) return false;

var text = first_paragraph.firstChild.nodeValue;
if ( ! text ) return false ;

var first_letter = text.substr(0,1);

first_paragraph.firstChild.nodeValue = text.slice(1);

var jq = $('<img />') ;
jq.attr("src", ('alphabet/' + first_letter.toLowerCase() +
'.gif') ) ;
jq.attr('alt',first_letter) ;
jq.addClass('fancy-letter') ;
jq.prependTo( first_paragraph ) ;
}