• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Web Design Techniques > Optimizing Photoshop

Optimizing Photoshop

Photoshop has come a long way: For years it was the image editing program of choice for print designers, but over the years it has also become the primary tool for many multimedia and Web designers. Because of its “print” history, not all the default settings in Photoshop are optimal for Web designers. In this chapter you will learn how to optimize Photoshop for your work. One day Photoshop might allow us to save different preference settings so all preferences can be changed with the click of a mouse button, but for now we have to do it manually.

Optimizing The Color Picker

You are probably familiar with Photoshop’s Color Picker, which you can access by clicking on the colors in the toolbox. This Color Picker shows you color values of several color models at once. Choosing colors from the Web—safe Color palette used to be tedious because you had to enter the numerical RGB values, but then in Photoshop 5.5 Adobe introduced a little enhancement that makes it easier to select only Web—safe colors: the Only Web Colors option will limit the color spectrum to the 216 colors of the Websafe Color palette. Still, if you want to work with an alternative color picker, you can select Apple or Windows (depending on which platform you work in) in the Preferences (Edit > Preferences > General).

The Adobe Color Picker now features an option that makes the selection of Web-safe colors much easier.

If you want to work with a different color picker, you can switch to Apple (or Windows) in the Preferences dialog box.

You can select Pantone Colors via the Custom Color Picker.

It’s very useful to know that you can change the perspective from which you look at the color spectrum—just click on one of the radio buttons next to the value fields and the spectrum in the Color Picker will change accordingly. And if you ever need to match a color on your Web site with the spot color of a company logo on printed material, for example, click the Custom button in the Color Picker.

The Adobe Color Picker lets you look at the colors in the spectrum from different perspectives. In the examples above, you always see the color red, but each time with a different option: in the top row (upper-left corner) the Color Picker shows red with respect to Hue. But it can also show the color red to Saturation (upper middle) and Brightness (upper right). In the middle row you see the color as slices of the color cube. The slider next to the Color Picker field represents the edge of the color cube. Last but not least, the bottom row shows red in the LAB color model. The ability to change the angle on the color spectrum is very helpful when you are trying to pick color combinations.

Using The Right Interpolation Mode

When you scale images in Photoshop, the pixels and their colors are adjusted using one of three methods: Bicubic, Bilinear, or Nearest Neighbor.

Photoshop defaults to the Bicubic method because it usually gives you the best result when resizing an image. In this method, Photoshop analyzes the values of adjacent pixels and calculates the middle value between them (when sampling down) or creates additional intermediate colors (when sampling up).

However, the Bicubic creation of colors may create a problem if you want to work with GIFs or colors from the Web-safe Color palette. Imagine, for example, that you have created an illustration using only colors from the Web-safe Color palette, but when you resize you get a lot of non-Web-safe colors at the edges that will ultimately dither on monitors with 256 colors. Moreover, these additional colors may have a dire impact on how well the image compresses. Therefore, use Bicubic only for photos that are to be saved as JPEG images. Any illustration that you plan to publish as a GIF is better resized using the Nearest Neighbor color adjustment. If you resize using the Resize command, you can select the method in the dialog box, but if you use the Layer Scale command, Photoshop automatically uses the default method set in Preferences.

There are several interpolation methods in Photoshop. Although Bicubic is the default setting, it is better to use Nearest Neighbor when creating GIF images.

The Bilinear method works similarly to the Bicubic method, but according to the Photoshop manual, it uses a simpler algorithm and is therefore less accurate. Nonetheless, my experience has been that the Bilinear method is better for images with strong contrasts. The side effect of the Bicubic method is a blurrier picture, as you can see in the example with the character “T,” where it creates something of an aura, while the Bilinear method creates a blend. The bottom line is that if you resize a graphic that you later want to save as GIF, use the Nearest Neighbor interpolation method so that you end up with fewer additional colors in your image. While this may seem like a minor point, it is much better to do it right in the beginning than to try to fix it later when you index the image.

The Info Palette

The Info palette shows the color value of a pixel at a specific position of the cursor, updating the position and the value as you move the cursor with the mouse. Open the Info palette from the Window menu, then click and hold on the cross icon in the bottom-left corner, and select Pixel from the pop-up menu. The two eyedropper icons in the upper part of the palette allow you to display two different color modes (RGB and CMYK, for example).You can select the settings for these the same way as you did the units—click on the icon to display the pop-up menu with your choices. Make sure that you select the Web Color mode for at least one of the displays; this shows the hexadecimal values (HTML) of a color and also—if the image is indexed—its position within the color lookup table (CLUT; more info on this in the Optimizing and GIF chapters).

Photoshop’s Interpolation Methods

The original 2-by-2 pixel image (left) was enlarged by 1000 percent using Photoshop’s-three interpolation methods. The effect can be seen in the three images below: with Bicubic and Bilinear scaling, Photoshop introduces additional colors to smooth out the appearance of your image. Only with Nearest Neighbor does the enlarged result look like the original.

In general, Bicubic gives you the best results—but not necessarily in every case. The top two images here compare Bilinear (on the left) and Bicubic (on the right).You can clearly see that the blurring effect is much stronger in the image scaled with Bicubic, but Bicubic also produces halo effects in images with sharp contrasts. And while Bilinear (bottom left) creates a blend between only two colors, the Bicubic method (bottom right) generates even more colors. My advice: If you are scaling up an image by a fairly large percentage, you are better off using Bilinear for all images where two solid colors are adjacent, as in this example. If you are scaling up by a smaller percentage, you probably won’t even notice the difference between the two methods.

Rulers In Pixels

The most important unit in Web and multimedia design is the pixel, so it makes sense to set the preference unit for Units & Rulers to pixels. If the ruler is not visible in your document, select View > Show Ruler to make it appear.

Guides And Grids

Using guides and grids makes it much easier to slice up an image. Slicing is a common technique for exporting pieces of an image and putting them back together in a table using an HTML authoring tool. Depending on the color of your image, you might want to adjust the color of the guides and grids to make them more visible. You can do this in File > Preferences > Guides & Grid.

Loading the Web-Safe Color Palette

You want to use as many Web-safe colors as possible in your illustration, because you don’t want colors to dither on monitors that display only 256 colors. Instead of typing in the color values by hand, it is easier to work with color swatches.

You can open the Web-safe color swatches via Window > Color Swatches, and then use the palette menu to replace the standard swatches (Replace Swatches). In the dialog box that appears, navigate to the Presets folder in the Color Swatches folder (most of the available color swatches are already listed in this menu and you can select them directly).

To select a color from the Swatches palette, click on it. Saving a color is as simple as clicking on an empty field; the tool switches momentarily to the Paint Bucket and fills the swatch with the current foreground color that is selected in the toolbox.

Using Web—safe colors is much easier if you load them into the Swatches palette using the Load Swatches command. You can append or replace the current color swatches with several versions of the Web-safe Color palette.One is called Spectrum (seen here on the left). Since the colors in the Swatches palette always adjust to the width of the palette, you may have to experiment with the width of the palette.For example, in order to see the Spectrum palette as you can see it here, the width is adjusted to 16 swatches.On the right the Web-safe Colors Swatches palette is set to a width of 36 swatches; on the right (top) it is set to 18 swatches.While both widths give you an idea of how the colors relate to each other, the bottom example is clearly more intuitive: every 6-by-6 pixel block represents a slice of the Web-safe color cube.


As you probably know, the brightness of a monitor is measured on a Gamma scale. If you have worked in desktop publishing before, this would have been of little concern to you. After all, the end product is paper, and all that matters is the right calibration of the monitor with respect to that. With Web design this is different; the medium is the monitor, and since Macs and PCs use different Gammas, the image you optimized for one platform may look too bright or too dark on the other. The differences in Gamma between the two platforms is roughly 10 percent (the Macintosh Gamma is 1.8 and the Windows Gamma is 2.2). As a rule of thumb, if you work on a Macintosh make your images a little brighter with Image > Adjustments > Brightness/Contrast than you normally would; on a PC make them a little darker.

If you want to have more precise control, you can simulate how your images will look under a different Gamma. Both ImageReady and Photoshop can emulate the Gamma of Macintosh and Windows systems. In Photoshop, use View > Proof Setup to switch between Windows and Macintosh RGB. In ImageReady, use View > Preview and choose between Standard Macintosh Color and Standard Windows Color. An alternative is to set the Gamma to 2.0 so that your images look fine on both platforms. To set the Gamma on a Macintosh, use the Adobe Gamma Control Panel and enter 2.0 as your custom desired Gamma value. You can always set the value back by selecting Macintosh Default or Windows Default. On a Windows computer, start Adobe Gamma, located in the Control Panels folder. This will start the Gamma Wizard utility, which will take you through the process of calibrating your monitor.

If you work on a Macintosh, make your images a bit brighter (around 10 percent) to make them look good in Windows.

Adobe has its own Gamma Control Panel: this panel guides you step by step through the calibration process. If you want to optimize your images for the Web, you need to preview them with a Macintosh and a Windows Gamma, but instead of switching the Gamma in the control panel, I suggest that you use a custom Gamma value (2.0).

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint