Hour 10. Creating Images for Use on the Web

Believe me, you don’t have to be an artist by trade to put high-impact graphics on your web pages (although it does help). You don’t need to spend hundreds or thousands of dollars on software packages, either, just to manipulate digital photographs or other source graphics you might want to use. The topics in this hour help you get started with creating images you can use in your website.

Although the sample figures in this hour use a popular and free graphics program for Windows, Mac, and Linux users (GNU Image Manipulation Program, or GIMP), you can apply the knowledge you learn in this hour to any major Windows or Macintosh graphics application—although the menus and options will look different, of course.

After you learn to create the graphics themselves, you’ll be ready to include them in your website using HTML, CSS, or both.

If you already have software you think might be good for creating web graphics, try using it to do everything described in these next sections. If your software can’t handle some of the tasks covered here, it probably isn’t a good tool for web graphics. In that case, download and install GIMP from www.gimp.org. This fully functional graphics program is completely free and can definitely perform the actions shown in this chapter.

If GIMP doesn’t suit you, consider downloading the evaluation version of Adobe Photoshop or Corel DRAW. For photo manipulation only, you have many free options, all with helpful features. Google’s Picasa, available free at http://picasa.google.com/, is one such option. Pixlr (pixlr.com) is another good option. Both of these programs are suited for editing images rather than creating them from scratch, and Picasa is also oriented toward organizing your digital photograph collection. These types of programs won’t necessarily help you design a banner or button image for your site, but they can help you work with some supplementary images, and they are powerful enough that they’re worth checking out.

The resolution of an image is the number of individual dots, or pixels, that make up an image (typically 72 dots per inch, or 72dpi). Large, high-resolution images generally take longer to transfer and display than small, low-resolution images. Image dimensions are usually specified as the width times the height of the image, expressed in pixels; a 300×200 image, for example, is 300 pixels wide and 200 pixels high.

You might be surprised to find that resolution isn’t the most significant factor in determining an image file’s storage size (and transfer time). This is because images used on web pages are always stored and transferred in compressed form. Image compression is the mathematical manipulation that images are put through to squeeze out repetitive patterns. The mathematics of image compression is complex, but the basic idea is that repeating patterns or large areas of the same color can be squeezed out when the image is stored on a disk. This makes the image file much smaller and allows it to be transferred faster over the Internet. The web browser then restores the original appearance of the image when the image is displayed.

In the sections that follow, you learn how to create graphics with big visual impact but small file sizes. The techniques you use to accomplish this depend on the contents and purpose of each image. There are as many uses for web graphics as there are web pages, but four types of graphics are by far the most common:

Photos of people, products, and places

Graphical banners and logos

Buttons or icons to indicate actions and provide links

Background textures for container elements

After you transfer the digital image files to your computer, you can use your graphics program to crop, resize, color-correct, and compress to get them ready for use in your website.

---

Try It Yourself: Cropping in GIMP

The GIMP toolbox offers quick access to the crop tool and its possible attributes. Find an image file—either a digital image you have taken with your camera and stored on your hard drive, or an image you found online. After opening the image in GIMP, perform the following steps to crop it in GIMP:

1. In the GIMP toolbox, click the Crop tool (see Figure 10.1). Depending on the tool you select, you might have additional attributes you can select. For example, Figure 10.1 shows the attributes for the cropping tool (such as the aspect ratio, position, size, and so on).

FIGURE 10.1 Select the Crop tool from the toolbox.

2. In the image you want to crop, draw a box around the selection by clicking the upper-left corner of the portion of the image you want to keep and holding the left mouse button while you drag down to the lower-right corner. See Figure 10.2.

FIGURE 10.2 Select the area of the image that you want to display.

3. Click one of the corners of the selection to apply the cropping.

Your graphics program will likely have a different method than the one shown, but the concept is the same: select the area to keep and then crop out the rest.

---

Even after your image has been cropped, it might be larger than it needs to be for a web page. Depending on the design of a specific web page, you might want to limit large images to no more than 800×600 pixels (if it is shown on a page by itself, such as an item catalog) or even 640×480 pixels or smaller. When shown alongside text, images tend to be in the range of 250 to 350 pixels for width, so there’s just enough room for the text as well. In some cases, you might want to also provide a thumbnail version of the image that links to a larger version; then you’ll probably stick closer to 100 pixels in the larger dimension for the thumbnail.

FIGURE 10.3 Use the Scale Image dialog box to change the size of an image.

You’ll almost always want to resize using the existing aspect ratio, meaning that when you enter the width you’d like the image to be, the height is calculated automatically (and vice versa), to keep the image from squishing out of shape. In GIMP, the aspect ratio is locked by default, as indicated by the chain link displayed next to the Width and Height options shown in Figure 10.3. Clicking once on the chain unlocks it, enabling you to specify pixel widths and heights of your own choosing—squished or not.

In most, if not all, graphics programs, you can also resize the image based on percentages instead of providing specific pixel dimensions. For example, if my image started out as 1815×1721 and I didn’t want to do the math to determine the values necessary to show it as half that width, I could simply select Percent (in this instance, from the drop-down next to the pixel display in Figure 10.3) and change the default setting (100) to 50. The image width would then become 908 pixels wide by 861 high—and no math was necessary on my part.

Most of these options are pretty intuitive. If you want the image to be brighter, adjust the brightness. If you want more red in your image, adjust the color balance. In GIMP, the Colors menu gives you access to numerous tools. As with the Scale Image dialog box described in the previous section, each tool displays a dialog box in the foreground of your workspace. As you adjust the colors, the image reflects those changes. This preview function is a feature included in most image-editing software.

Figure 10.4 shows the Adjust Hue/Lightness/Saturation tool, one of the many tools provided on the Colors menu. As shown in the figure, you can achieve many color-related changes by using various sliders in dialog boxes to adjust the values you are working with. The Preview feature enables you to see what you are doing as you are doing it. The Reset Color button returns the image to its original state without any changes applied.

FIGURE 10.4 The Adjust Hue/Lightness/Saturation tool is one of many slider-based color-modification tools available in GIMP.

Because of the numerous tools available to you, and the preview function available with each tool, a little playful experimentation is the best way to find out what each tool does.

Figure 10.5 shows the Export Image as JPEG dialog box you’ll see when you export a JPEG in GIMP. You can see here that you can control the compression ratio for saving JPEG files by adjusting the Quality slider between 1 (low quality, small file size) and 100 (high quality, large file size).

FIGURE 10.5 GIMP enables you to reduce file size while still retaining image quality by saving in the JPEG format.

You might want to experiment a bit to see how various JPEG compression levels affect the quality of your images, but 85 percent quality (or 15 percent compression) is generally a good compromise between file size (and, therefore, download speed) and quality for most photographic images.

The first decision you need to make when you produce a banner or button is how big it should be. Most people accessing the web now have a computer with a screen that is at least 1024×768 pixels in resolution, if not considerably larger. For example, my screen is currently set at 1440×900 pixels; 1366×768 is another popular resolution. It’s a nice touch to plan your graphics so that they always fit within smaller screens (1024×768), with room to spare for scrollbars and margins. These days, though, you won’t run into much trouble if you’re designing for the desktop and nudge that minimal width up by a few pixels.

Assuming that you target a minimum resolution of 1024×768 pixels, full-size banners and title graphics should be no more than 900 pixels wide, which is the generally available viewable width of the page after you’ve accounted for scrollbars, toolbars, and other parts of the browser window. Within a page, normal photos and other images should be from 100 to 300 pixels in each dimension, and smaller buttons and icons should be 20 to 100 pixels tall and wide. Over the years, some generally acceptable sizes have been used for banner graphics and other advertisement-size images; you can see these sizes in use if you look at the banner ads available for affiliate and partner programs, such as the Amazon Affiliate program (see https://affiliate-program.amazon.com/). Common sizes include 120×600, 234×60, and 300×250, to name a new.

To create a new image in GIMP, go to File and choose New. The Create a New Image dialog box displays (see Figure 10.6). If you aren’t sure how big the image needs to be, just accept the default size of a 640×480. Or you can choose one of the other predetermined sizes in the Template drop-down, such as Web Banner Common 468×60 or Web Banner Huge 728×90. Those two settings are conservative, yet perfectly acceptable, interpretations of “common” and “huge” for banners. From this dialog box, you can also enter your own width and height for the new image.

FIGURE 10.6 You must decide on the size of an image before you start working on it.

For the image’s background color, you should usually choose white to match the background that most web browsers use for web pages (although as you learned in the previous hour, that color can be changed). When you know that you’ll be creating a page with a background other than white, you can choose a different background color for your image. Or you might want to create an image with no background at all, in which case you select Transparency as the background color. When the final, web-ready image includes a transparent background, the web page (and its background color) behind the image is allowed to show through. In GIMP, select the background color for your new image by opening the Advanced Options in the Create a New Image dialog box.

After you enter the width and height of the image in pixels and click OK, you are faced with a blank canvas—an intimidating sight if you’re as art-phobic as most of us! However, so many image-creation tutorials (not to mention entire books) are available to lead you through the process that I’m comfortable leaving you to your own creative devices. This section is all about introducing you to the things you want to keep in mind when creating graphics for use in your sites. This section does not necessarily teach you exactly how to do it, because being comfortable with the tool you choose is the first step to mastering them.

You’ll be glad to know that there is a special file format for images with a limited number of colors, the Graphics Interchange Format (GIF). When you save or export an image as a GIF, you might be prompted to flatten layers or reduce the number of colors by converting to an indexed image because those are requirements for GIFs; check your software’s help file regarding layers and indexed colors for a full understanding of what you might need to do.

Remember, the GIF image format is designed for images that contain areas of solid colors, such as web page titles and other illustrated graphics; the GIF format is not ideal for photographs (use JPG or PNG files instead).

PNG (pronounced “ping”) is a useful file format that is supported in all major web browsers. Whereas the GIF image format enables you to specify a single transparent color, which means that the background of the web page will show through those areas of an image, the PNG format takes things a step further by enabling you to specify varying degrees of transparency.

You might have seen websites that use background colors or images in their container elements, but also have images present in the foreground that allow the background to show through parts of the foreground graphics. In these cases, the images in the foreground have portions that are transparent so that the images themselves—which are always on a rectangular canvas—do not show the areas of the canvas where the design does not occur. You often want to use these types of partially transparent images to make graphics look good over any background color or background image you have in place.

To make part of an image transparent, the image must be saved in the GIF or PNG file format. As mentioned previously in this lesson, most graphics programs that support the GIF format enable you to specify one color to be transparent, whereas PNG images allow for a range of transparency. Largely because of this transparency range, the PNG format is superior to GIF. All the latest web browsers already support PNG images.

The process of creating a transparent image depends on the type of image you are creating (GIF or PNG) and the graphics software you are using to create it. For instructions, look in your graphics program’s help files or type “transparent images with [your program here]” into your search engine.

Think about the websites you frequent every day, and consider the fact that few use tiled, heavily patterned backgrounds on their entire pages. If you restrict your browsing to websites for companies, products, sports teams, or other sites in which information (primarily text) is privileged, the number of sites with tiled, heavily patterned backgrounds decreases even further. The web affords everyone the right of individuality in design, but if you are creating a site for your business, you might want to avoid using a highly patterned background with contrasting colored text.

If you do use a tiled background image for your entire site, remember that tiled images look best when you can’t tell they’re tiled images. In other words, you know you have a good image when the top edge of a background tile matches seamlessly with the bottom edge, and the left edge matches with the right.

Figures 10.7 and 10.8 show background tiles in use, both with seamless background, but with varying degrees of effectiveness.

FIGURE 10.7 This is an example of a seamless background image in which you can tell the background is tiled because you can see six identical shapes.

FIGURE 10.8 This is also an example of a seamless background image, but you can’t tell that it’s tiled.

In Hour 11, “Using Images in Your Website,” you learn how to place background images within your container elements. Despite my warnings so far in this section, background images can be powerful weapons in your design arsenal—just not when heavily patterned. You can find some great (and freely available) examples of background images—often referred to as textures—at the Subtle Patterns website, http://subtlepatterns.com/. I haven’t shown an example of a good subtle tiled background because, for it to be an element of good design, it would likely be so subtle that it wouldn’t be visible in a printed book.

The first step in creating a GIF animation is to create a series of images to be displayed one after the other—or a series of layers, depending on your particular software program. Each of these images is called a frame. Just like how movies or cartoons are put together, the images that you see on the movie or television screen and the images in animated graphics are made up of many individual frames that have slight differences in their appearance. When you have your graphical frames in mind, the process of tying them together is relatively simple—the planning stage is the most difficult. Take some time to sketch out the frames in storyboard fashion, especially if you plan to have more than just a few frames. When you know how your frames are going to fit together, use the Gickr service mentioned earlier in this section, or read the documentation for your graphics software to learn its particular process for pulling it all together.

A. This is a difficult question to answer—and that’s coming from someone who worked for a very long time for a web development and design agency. For individuals and small businesses, an agency isn’t always the best solution. Hiring a graphic designer takes time and money. Additionally, many graphics artists do not produce work suitable for the web—they are specifically print-based artists, and the print world is quite different than the online world. Furthermore, hiring a graphics designer to create a website might not play to the strengths of that particular graphics designer. In other words, the designer might be good at designing the graphical elements of a website, but he or she might not be a good content architect or might not excel at working with HTML and CSS. If your site is simply a personal site, a completely outsourced professional design might not be where you want to spend your money. But if your site is intended to promote a business, a product, a school, or anything else in which your image is integral to your success, it’s worth your while (and money) to consult with a web design professional at some point.

Q. I’ve produced graphics for printing on paper. Are web page graphics any different?

A. Yes. In fact, many of the rules for print graphics are reversed on the web. Web page graphics have to be low resolution, whereas print graphics should be as high resolution as possible. White washes out black on computer screens, whereas black bleeds into white on paper. Also, someone might stop a web page from loading when only half the graphics have been downloaded, which isn’t a consideration when looking at images in print. Try to avoid falling into old habits if you’ve done a lot of print graphics design.

2. What are some issues to watch out for when selecting a tiling background image?

3. If you have a square image of a blue flower on a transparent background, and the background color of the containing element is gray, will your flower image appear on the page as a square or some other shape?

2. You need to make sure that the tile “seams” aren’t visible when it repeats, that the pattern is not too overwhelming, and that the colors in the tile do not contrast with any other images or colors used on the page.

3. It will appear as the shape of the flower because the image has a transparent background. The gray background of the containing element will show through.

Using your graphics software program of choice, create a few simple animated graphics for placement on your website. Even if you put together only a few frames, you’ll have the opportunity to practice putting frames together to achieve the best frame rate for display.