Add an Image

Suppose that you want to add an image to your blog background. This is somewhat frowned upon in today's design environment, but you can add a background image to a specific part of your blog and not upset any design critics.

Let's take a specific section of your blogsay, the sidebar area that contains your blog roll or links (see Figure 13.6)and add an image to the background.

Figure 13.6. The sidebar of most blogs contains a blog roll.

The best way to customize a site's design is to add images that say something about you. Let's find an image, fix it, and then add it to the background of the blog site. Go outside and take a picture of something (an object) that could give your blog a little personality. Here's what the author found in his backyard (see Figure 13.7).

Figure 13.7. An image from the backyard about to be part of a blog.

Most images that become web graphics need a little editing. Let's isolate the flower in this image and prep it for the blog background. Follow these steps, which show you how to isolate an object in a photo:

Note

The following steps rely on Photoshop Elements, a low-cost, powerful imager available for Windows and Macintosh. Any editor that includes a lasso tool is fine, including (brace yourself) Microsoft Paint. Use Paint's free-form Select tool if you're using Windows and have no other editing software.

1.	Fire up your favorite image editor and open your image.
2.	Select the lasso tool. Photoshop Elements includes three tools: Lasso, Polygonal Lasso, and Magnetic Lasso. The Magnetic Lasso is highly recommended because it helps you isolate objects on a page.
3.	If the subject of your image contrasts heavily with its background, use the Magnetic Lasso (as shown in Figure 13.8). It can tell by tonal variation what you're trying to select. If your object has the same tone as the background use the regular lasso tool instead. Figure 13.8. Use a lasso tool to isolate the item that will appear on your blog.
4.	When the object is isolated, delete everything around it. You most likely will need to lasso and remove more background.
5.	Rotate the image if necessary. In addition, lighten the image if possible; it will be behind links and text, and should not make reading the text difficult.
6.	Finally, save your image in the GIF format so that it will be small in size (see Figure 13.9). You may need to save it as a TIF file after lightening and then reopen and save as a GIF. You can save as a JPG if the tiny 256-color palette of GIF files ruins the look of your image. Figure 13.9. The image with background removed.