Graphics on the Web 37PrinciplesWeb DesignGraphics on the WebWeb Design in a Nutshell, eMatter Editionrelative to my 600-pixel-wide banner. For more information on designing for stan-
dard monitor resolutions, see Chapter 2,Designing for a Variety of Displays.
Be Aware of Gamma
The brightness of a monitor is a function of its gamma setting. The standard
gamma setting varies from platform to platform, so when you are creating graphics
for web pages, bear in mind that some users may be seeing your images much
lighter or darker than they appear to you. This can seriously affect the colors
you’ve chosen—the logo you’ve created in a lovely forest green on your Mac may
look pitch black when you view it on a PC.
In general, images created on a Macintosh will look darker when viewed on a PC
or Unix terminal. Images created on a PC will generally look washed out when
seen on a Mac. This phenomenon is another thing to keep in the back of your
mind when you are designing and producing web graphics.
Adjusting gamma with Adobe Photoshop
For the Mac. Adobe Photoshop comes with a Gamma control panel that affects the
gamma setting for the whole monitor. To use it:
- Choose AppleÝControl PanelsÝGamma to open the Gamma control panel.
(If it is not there, drag it from the PhotoshopÝGoodiesÝCalibration folder
into the System FolderÝ Control Panels folder.). - Turn the panel on using the switch in the lower-left corner.
- Select 2.2 from the Target Gamma choices. You should see the effect of the
gamma change immediately. Close the Gamma control panel.
For Windows.For Windows, Photoshop offers gamma control only within the
Photoshop window (it does not affect the monitor globally, as on the Macintosh).
To use it:
- Choose FileÝ Color SettingsÝ Monitor Setup
- Type a gamma value of 2.2 in the Monitor Setup dialog box. Click OK.
- You can preview the effects of the gamma setting by clicking Preview in the
Calibrate dialog box.
Previewing and adjusting gamma with Adobe ImageReady
ImageReady (a web graphics optimization tool from Adobe) has a function that
allows you to preview how your graphic will appear with the gamma setting of an
alternate operating system. It also allows you to adjust the gamma value (bright-
ness) of the image to make the image look acceptable for both platforms.
To preview the image, choose ViewÝWindows Gamma/Mac Gamma. The image
brightness will adjust to simulate the gamma setting of the specified platform.
Choosing it again restores the image to its previous gamma value.
To automatically adjust the gamma in ImageReady: