Example of a Google mega CSS sprites image

Brian Lawlor — Sun, 15 May 2011 18:58:51 +0000

Familiar with CSS sprites? Hey, there are mere-mortal, just-a-guy-doing-a-job sprites, and then there are sprites. Check out this single Google mega ( or better said, “meta”?) sprites image used at its new Music Beta site.

A modest example of a CSS3 box-shadow

Brian Lawlor — Wed, 08 Dec 2010 22:36:26 +0000

As part of the ongoing rebuild, I am still thrashing out how best to deal with WordPress image uploads and image display issues. One of my initial image tests is below, a before-&-after archival photo of my great grandmother. (Faithful readers met my great grandfather in an earlier post.) The photo on the left is the scan of the original albumen print, circa 1900. The photo on the right is the restored version, with the scratches and tears repaired and, quite obviously, tonal values of the underexposure corrected.

The restored photo on the right demonstrates how the CSS3 box-shadow property works, a modest effect that can be uniformly applied to images sitewide with a simple selector declaration.

(The great photo restoration was done by Drew Klausner of PixlFixl.)

How to create a transparent favicon

Brian Lawlor — Sun, 27 May 2007 19:15:49 +0000

Like pretty much everything else in the shared knowledge database we call the Web, you can do a quick Google search and find useful and practical instructions on how to create a favicon. Allow me to elaborate and illustrate somewhat so you can see all the steps in more specific detail and how to do it using Photoshop Elements 5.0, the image editor all we working joes and janes are more likely to have at hand. To illustrate the basics, I’ll show you how I made the current Webdogs 2.0 favicon (you know, that cute little “{2}” thingee that appears to the left of the web address) using three character elements with a transparent background. Here’s how to do it:

1. To make a favicon you need to be able to create an image in the ICO format. Unfortunately, Photoshop Elements does not natively save or export images in the ICO format, so you need to install a plugin to fill the gap. You’re covered, mate: Download the free Telegraphics Windows Icon (ICO) file format plugin.

2. Unzip the plugin file and copy the ICOFormat.8bi file into your Plug-Ins > File Formats directory:

3. Now you’re ready to create the favicon image and save it in the ICO format. Open Photoshop Elements in the Editor view. Create a new image set at 32 x 32 pixels and name the file “favicon”:

(Yes, you could start with a 16 x 16 pixel image, but as Jennifer Apple’s tutorial aptly observes, using the larger 32 x 32 (or even larger 64 x 64 pixel) canvas gives you a much easier workspace to deal with for creating your design. But it’s your call.)

4. The initial blank image is your background layer. I’ll get back to that in step 8, below. But for now, create the second layer by selecting the Text tool to make it active and adjust the settings for the typeface, font style, font size, anti-aliasing and text color you want. In this example, I set the typeface as Georgia (love it!), font style as regular, the font size to 8 point and turned on anti-aliasing (something you almost always want to do with web typography):

To match the color of the Webdogs 2.0 logo, the text color is set to the HEX (hexadecimal) color value of #D82000 or RGB values 216,32,0:

5. Now the fun stuff starts. With the Text tool active, type the first character in the Webdogs 2.0 favicon, a left/opening curly bracket. Then use the Move tool to reposition the text character so it lines up properly. Since space is tight in this image design, I want to make the most of the image canvas so I positioned the left edge of the curly bracket one pixel past the left edge of the image:

6. Follow the same drill to create the right/closing curly bracket:

7. Ditto, to insert the number “2″. To make it fit the design better, I used a smaller 7 point character for the number. Also, in the second image below, you can see why I nudged the brackets one pixel past the left and right edges of the image, to open up the middle of the image canvas to make more room for the number character:

8. Time to deal with the transparency thing, people. Remember that first background layer? In the layer palette on the right, make the background layer transparent by clicking on the “eye” icon (no pun intended). Now the image displays in the Editor with a checkered background, telling you that the image’s background is now transparent:

9. Now resize the image down to 16 x 16 pixels with “Resample image” set to “Bicubic Sharper”:

10. You’re almost done. Now select File > Save As to save the image in the ICO (Windows ICO) format as “favicon.ico”.

You now have a favicon with a transparent background. Jennifer Apple’s tutorial explains in detail where to upload your favicon and how to tweak the HTML code so it all works properly.

One final note: You could keep the original 32 x 32 pixel proportion in your favicon image and it will still work, since current Firefox and Internet Explorer browsers will automatically resize it for you. But the favicon will invariably render better if you control the resizing down to 16 x 16 pixels, rather than leave the resizing to the whims of the browser.

Hey, get your favicon, uh … on!?! Well, you know what I mean.

Webdogs 3.0 » imagery

Example of a Google mega CSS sprites image

Other posts of possible interest...

A modest example of a CSS3 box-shadow

Other posts of possible interest...

How we get staff photos

Other posts of possible interest...

How to create a transparent favicon

Other posts of possible interest...