Painting the Web

The Creative Art of Thumbnails

Most photo thumbnails are miniature versions of the parent photo, meant to be small enough to provide a low-bandwidth, space-friendly version of the picture that also piques enough interest for the user to click through to the larger image. Any of the applications that generate galleries (covered later in this chapter) create thumbnails just like this. For the most part, the result is satisfactory.

Still, for those times when you're embedding a photo into a web page or manually creating your own specialized gallery page, you might want to branch out and try something new.

Adding Drop Shadows

Rather than just create a plain, flat thumbnail, you might consider adding a shadow behind the image, to make the image pop out of the page. Most photo editors provide either plug-ins, specialized routines, or layer effects to create a shadow effect.

Photoshop provides layer styles that can create a beveled look, drop shadow, or other effect directed on the layer edges. It's quite simple to use, too. The first step is to convert your background image to a layer, if you haven't already done so. Double-clicking on the background in the Layers window and accepting the default name will do the trick. The next step is to increase the canvas size to make room for the drop shadow, the term for these shadows. The dialog to adjust the canvas can be accessed through the Image menu. The last step is to open the Layer Style dialog and select Drop Shadow or another effect.

In the Drop Shadow option window (Figure 4-3), adjust the angle representing the light source and the offset value (how much the shadow is "pushed" horizontally or vertically), as well as shadow color, opacity, and width. If your thumbnail is small, you'll want to keep your shadow small. In addition, if you plan on displaying several thumbnails in one web page, make sure the settings are the same for each for consistency.

Figure 4-3. Photoshop's Drop Shadow option

Once finished, you could save the image as a PNG, which would preserve the transparency of the shadow. The problem with this is that IE 6.x does not respect alpha channels, and the image is going to look quite bad in this browser. If you have IE 6.x users (and 21% of my sites' viewers are still using IE 6.0), you'll probably want to flatten the image and then save it as a JPEG.

Figure 4-4. Thumbnail created in Photoshop using the Drop Shadow Layer Style

To recap the steps:

1. Convert the background to a layer.

2. Resize the canvas to allow for drop shadow.

3. Pick the Drop Shadow option from the Layer Styles.

4. Adjust the shadow.

5. Flatten the photo to save as JPEG.

Instead of layer modification, GIMP provides a Script-Fu process, shown in Figure 4-5, to generate a drop shadow on an image. You also don't need to provide canvas space; the tool automatically sizes the canvas.

Figure 4-5. GIMP Script-Fu Drop Shadow process

GIMP's drop shadow process differs from Photoshop's in that there is no light source angle. Instead, you provide an X and Y offset value. Positive values put the shadow to the right, and negative values to the left.

Other applications either have built-in drop shadow support or can emulate it using well-published steps. Just search on the name of your tool and "drop shadow." You can also create your own drop shadow.

To create a home-baked drop shadow in a tool that supports layers (and we're all using tools that support layers), increase the size of the underlying canvas in order to have enough room for the shadow. Next, create a second transparent layer and add a rectangle the same size as the thumbnail. Fill it with the same color as your shadow, usually black.

Move the rectangle so that it matches the shadow location. A good place to start is 8 pixels below the thumbnail and 8 pixels to the right. Then, using the appropriate filter or effects setting in your editor, add a Gaussian Blur to the shape. Start with a blur setting of 15 and experiment from there until satisfied. Once you're finished, you have a shadow as good, or better, than the packaged products. Figure 4-6 shows the bird thumbnail with a shadow created by Script-Fu and a shadow created using the steps I just outlined.

Figure 4-6. Comparison of an automatically generated shadow and one created manually

To recap these steps:

1. Increase the size of the underlying canvas to hold the shadow.

2. Add a new transparent layer.

3. Create a rectangle the same size as the thumbnail.

4. Fill this rectangle with the color of the shadow (usually black).

5. Offset the shadow by moving it down or up or to the right or left, depending on where you want to place the shadow effect.

6. Apply a Gaussian Blur to the shadow layer.

7. Switch layer locations so the shadow is under the thumbnail.

Cut-Out Thumbnails

Rather than the typical rectangle, you might want to consider variations on the shape by using a cut-out thumbnail. In this type of thumbnail, rather than use the whole photo, you use a piece of it. The number of shapes you can use to create the cut-out are as varied as the leaves in the forest, but I'll look at two: ovals and slices.

Oval thumbnails seem to work nicely with the right subject. They don't work whenever the photo corners are important, because corners can't be captured with an oval. They are good, though, for a surprising number of subjects, including industrial photos, critter pictures, people, and flowers.

An oval thumbnail is simple to create—just cut out the shape. Unlike the rectangles, though, I've found that ovals work better with something to define a three-dimensional effect. A shadow works, but a bevel can work better. Another approach is a smooth, flat bubble effect, especially with industrial photos.

Figure 4-7 shows several thumbnails of birds, each cut into an oval and each given a beveled edge and drop shadow. With Photoshop, this is simple: just convert the background to a layer, select the oval (using fixed size to ensure the oval is the same for each thumbnail), invert the selection, and delete the background. Once the oval is cut out, then access Layer → Style, and select Drop Shadow, and Bevel and Emboss. This gives the images a nice three-dimensional feel without obscuring the image.

Figure 4-7. Set of thumbnails cut into ovals and styled

To recap the steps:

1. Convert the image background to a layer.

2. Using an elliptical selection (set to a fixed size to ensure that the oval is the same for all pictures), drag the selection using your keyboard, or mouse over the photo until positioned correctly.

3. Invert the selection, using Select → Inverse.

4. Delete the selection using the Delete key, or Edit → Cut.

5. Access Layer → Blending Options and select both Drop Shadow and Bevel and Emboss.

6. Adjust the settings for both until the thumbnail is styled as you like, and then duplicate the steps and style settings for all other grouped thumbnails.

7. Trim the excess background using Image → Trim and accept the defaults.

8. Save as PNG to preserve transparency, or flatten for JPEGs, setting the background color to the same color as your web page.

Once the thumbnails are cut, they can be embedded into a web page using the same technique given for a rectangle thumbnail. The rectangle enclosing the oval is no different than a rectangle enclosing a regular thumbnail. Later in this chapter, I'll demonstrate how these can be added to a web page for a manual gallery page. Figure 4-8 shows an example of a layout with the thumbnails to the left and the opened image to the right.

Figure 4-8. Oval thumbnails and displayed photo

Figure 4-8 demonstrates another aspect of thumbnail cutouts: what part of the original photo to capture in the thumbnail?

In the bottom row of the thumbnails, all the way to the left, is an odd-looking bird head with feathered tufts coming out. This bird actually isn't the primary bird in this photo, as shown in Figure 4-9. However, the fluffed head is eye catching, as well as curiosity inspiring—a better choice than the "real" subject of the photo.

Figure 4-9. Choosing a photo component to center in the cutout for a thumbnail

The best choice for a cutout thumbnail isn't always the main subject, or even the photo's center. A thumbnail should not only represent the original photo; it should form a creative statement in itself, and should also make the person want to click through on the image.

A cutout thumbnail is especially helpful if your photo doesn't make a good thumbnail by itself because the detail gets lost in the smaller size. Rather than shrink the entire photo, just cut out a portion that makes a good representation and use that. You can even use rectangles rather than ovals. But then, you can use triangles, polygons, puzzle piece or garden tool outlines, and so on.

Another thumbnail type is a slice—taking a stripe, either vertically or horizontally, from the photo. The slice can be any width and taken from any part of the photo. This type of thumbnail is easier to lay out in the page because they're usually aligned either in one column or one row, depending on the orientation of the images. The thumbnails also work best if the thumbnail is identifiable from the slice, and if the thumbnails in a group complement one another. Figure 4-10 shows five thumbnails, all from floral photos, each given a 90-degree (straight up and down) drop shadow.

Figure 4-10. Slice thumbnails from five floral photos