T Sign Kerning
Tuesday, May 6th, 2008
Is it just me or does this sign have some really bad kerning around that first ‘O’?
Gallery of Doodles in Lightbox 2
Friday, April 4th, 2008
NerdStarGamer now has a new Gallery page that features my doodles:
All of the images have been set up as a list of thumbnails which use Lightbox 2 to display large versions.
I spent a little extra time to set up Lightbox on this blog without using a plugin. I’ve been on a steady crusade to get rid of most of my plugins for quite some time. Setting up Lightbox in WordPress was fairly straightforward.
After downloading the Lightbox 2 files, I created a new directory in my template directory called lightbox and dropped all of the lightbox files into it. I then put a function call into the header.php file right before the line that reads <?php wp_head(); ?>.
<head profile="http://gmpg.org/xfn/11">
...some other tags...
<?php AKM_include_lightbox(); ?>
<?php wp_head(); ?>
</head>
The AKM_includ_lightbox(); function is just a short little function that I wrote and put in the functions.php file of my template. Here is the function:
function AKM_include_lightbox() {
$lbDir = get_bloginfo('template_directory') . "/lightbox";
// Echo out some file path variables for images used lightbox JS
$output = '<script type="text/javascript">' . "\n";
$output .= "\t" . 'var tplDir = "' . $lbDir . '";' . "\n";
$output .= '</script>' . "\n";
// Echo links to js and css for lightbox
$output .= '<script type="text/javascript" src="' . $lbDir . '/js/prototype.js"></script>' . "\n";
$output .= '<script type="text/javascript" src="' . $lbDir . '/js/scriptaculous.js?load=effects,builder"></script>' . "\n";
$output .= '<script type="text/javascript" src="' . $lbDir . '/js/lightbox.js"></script>' . "\n";
$output .= '<link rel="stylesheet" href="' . $lbDir . '/css/lightbox.css" type="text/css" media="screen" />' . "\n";
echo $output;
}
This first line of the function sets up a variable that includes the path to the Lightbox files inside my template directory. This is necessary because the lightbox.js file needs to reference the images included in the Lightbox folder. Without this part, the previous, next and close images will not show up because the link will be going to your WordPress uploads directory.
That second chunk of text in the function echos out a small bit of JavaScript into your header that simply declares the variable tplDir and sets it to the path to your LightBox installation. The last chunk of text inserts all of the necessary Lightbox JavaScript and CSS links into your header. I could have written all of this directly into the header.php file, of course, however I felt that my file was getting a bit messy and that this approach was much more clear.
We also need to make a small edit to the lightbox.js file which is going to use that tplDir variable we set. Find the line in the beginning of the file like this (around line 49):
fileLoadingImage: 'images/loading.gif',
fileBottomNavCloseImage: 'images/closelabel.gif',
Simply change those two lines to this:
fileLoadingImage: tplDir+'/images/loading.gif',
fileBottomNavCloseImage: tplDir+'/images/closelabel.gif',
That completes the Lightbox 2 setup in WordPress without using a plugin. Now all you have to do is add the rel="lightbox" tag to any link you want to use Lightbox. For example, if you have a thumbnail image that links to a larger image like this:
<a href="images/full-size-image.jpg"><img src="images/thumbnail" /></a>
To add the Lightbox effect, just add in the attribute like this:
<a rel="lightbox" href="images/full-size-image.jpg"><img src="images/thumbnail" /></a>
Be sure to check out the Lightbox 2 page for more information on what you can do with it.
The Superest
Friday, April 4th, 2008
The Superest is a very funny running blog of illustrations of superest heros. Each superest hero plays off of the last in a very clever way:
The Superest is a continually running game of My Team, Your Team. The rules are simple: Player 1 draws a character with a power. Player 2 then draws a character whose power cancels the power of that previous character. Repeat.
The design of the site itself is is quite elegant and simple. Most of the display type on the site is done in a very nice typeface:
Start from the beginning get the the feeling for the way the superest heros flow one after another.
MassArt Logo Redesign
Tuesday, March 25th, 2008
I happen to work right next to MassArt and often find myself waiting for the bus in front of the college. A week or two ago, I noticed a sign sporting the new MassArt logo:
I literally, with watery eyes, gazed at the way the ‘A’ crops the ‘S’, and thought to myself: “It’s beautiful.” I then immediately chastised myself for having such an emotional reaction to a piece of typography and resumed continued reading my Howard Zinn book.
Brand New has an excellent review of new branding and logo in MassTerful Identity. The article also features a lot of excellent photographs of signage and marketing material. Also, it appears as though a complete overhaul of the MassArt website is in the works (thank God). I can’t wait to see what they do with the new one.
Score one for KJ’s alma mater!
New Animal Planet Logo
Tuesday, February 5th, 2008
I was pleased to see a review today in Brand New about the new Animal Planet logo.
Just as the author of the critique mentions, I was watching the Puppy Bowl last sunday and noticed the new logo. Every time I saw it, it gave me a little jolt. Not really in a good way either. I kept thinking to myself “What is that?”
Perhaps it was really just the two Bloody Mary’s that caused me to find the look of the logo so jarring. I dunno. That M is really bad though. It just looks like a mess. No matter how many times I look at the logo, I have to actually think to realize the word is ‘animal’ and not ‘ani al’ or ‘ani3al.’ I bet my old Typography professor would have a fit over this one.
