Pretty CSS title images

Even though I am not a graphics designer, I find that I still end up doing quite a bit of graphics work. When you’re on a small web team, or maybe you are the web team, it’s helpful to know your way around Photoshop. One of the things I end up doing quite a bit is anti-aliased text against photo backgrounds for titles, headers, and such. Like so:

Róisín Murphy

The source looks like this:

<img src="/images/20051206-combined.jpg" width="200" height="32" alt="Róisín Murphy" />

Horrible color choice notwithstanding, this is a perfectly ordinary title image, right? We have a single 5KB image with an ALT attribute substituting for a header. What are the downsides to this?

  • Not very screen-reader accessible. Sure, you’ve got the ALT, but semantically it’s difficult to tell that the image is a heading. And what if it’s not supposed to be a heading but something else?
  • Line-art for letters does not combine all that well with photo-realistic backgrounds. This is especially evident for large images, as compressing them down to reasonable sizes will introduce artifacts that blur the thin letter strokes.

Instead of this approach, I do this:

Róisín Murphy

Looks the same, right? If you view the source, you see this:

<p style="height:32px;width:200px;background-image:url(/images/20051206-back.jpg);
overflow:hidden;"><strong style="display:block;padding-top:100px;line-height:100px;
background-image:url(/images/20051206-murphy.gif);">Róisín Murphy</strong></p>

In production pages, most of the styles wouldn’t be inlined and you’d just end up with something like this:

<h1><strong style="background-image:url(/images/20051206-murphy.gif);">Róisín Murphy</strong></h1>

If you pick that apart, you can see that we end up with two images composited together:

BackgroundRóisín Murphy

The background image is a 3KB JPEG and the title is a 5KB transparent GIF, each using the compression that makes the most sense for what they are. (Photos with JPEG, line art with GIF or PNG.) We haven’t saved much space by breaking these two specific images apart, but for larger images the space savings can be enormous.

Now on to the juicy part: how to easily create this effect in Photoshop.

  1. Start with an image that has your background and your text.
  2. Between the background and text layers, create a new layer and fill it with a solid color that is not used in the text layer.
  3. Duplicate your text layer and move the layer down so that you can merge it into the solid-color layer you just created. (Then, you know, do the merge.)
  4. Use the wand tool to select large areas of the solid color, then invert your selection. I normally also then select the top-left and bottom-right pixels. You’ll see why in a few steps.
  5. Hide the merged layer so that you see the background again, then Copy-Merged (Ctrl-Shift-C).
  6. Paste into a new window (Ctrl-V). If you selected the extra pixels then your new image will have the same dimensions as the old image.
  7. Remove the extra top-left and bottom-right pixels then save. You’re done!