Contrast Reduction

When background images are used on pages containing text, it is more common to use something with muted colors. We will make the background you just borrowed from the PhotoShop patterns more usable by adjusting the contrast a bit.

So, get back to PhotoShop so that we can change the "patternbg" file a bit.

There is a "Brightness/Contrast" adjustment mechanism built into PhotoShop. For producing appropriate background, however, I find it easier to proceed by adjusting layer opacities. So, we first need to make some layers.

• Choose "All" from the "Select" menu to select the entire contents of the patternbg image.

• Choose "Copy" and then "Paste" from the "Edit" menu. This should create a new layer in your image containing a second copy of the background pattern. You won't be able to tell this by looking at the image, but if you look in the "Layers" palette you should see two layers. One named "Background", the other named "Layer 1".

At this point, both layers are identical. What we want to do is make the background layer solid white and then adjust the opacity of "Layer 1" to let some of the white background show through the pattern.

• Select the background layer for editing by clicking once on its name in the Layers palette.

• Select "All" from the "Select" menu.

• Select "Cut" from the "Edit" menu.

To see if you have succeeded in making the background white, you can click on the "eye" icon at the left end of the Layers palette "Layer 1" entry. This should leave only the white background visible. Once you have verified that the background is white, click the "eye" again to redisplay the pattern.

Now, we can adjust the opacity of the pattern.

• Click on the name "Layer 1" in the Layers palette to select the pattern layer for editing.

• Near the top of the Layers palette there is a box labeled "opacity". To the right of the number in this box there is a little arrow. Depress the mouse while pointing at the arrow until a slider appears.

• Use the slider to reduce the opacity of the layer from 100% to between 10 and 20. As you do this, the background should become considerably lighter.

Once the pattern looks light enough, you should save the image as "pattern.gif" and reload your HTML page to see the improvement. Since you have several layers in your image now, you will not be allowed to immediately save it in GIF format. You could flatten the image, but this would make it difficult to come back and readjust the contrast if necessary after viewing your page. So, it would be better to instead:

• Select the "Gif89a export" item from the "Export" sub-menu of the "file" menu.

• Click "OK" in the first dialog box that appears.

• Use the second dialog box to make sure the file is saved in your "lab6" folder with the name "patternbg.jpeg".

• Click "Save" and confirm that you want to replace the older "patternbg.jpeg" file when asked.

Now, get back to Navigator and reload the page to see if the text is more readable. If it is still not good enough, you will get to find out why we used the "export" mechanism rather than flattening and saving the image. You can go back to PhotoShop, readjust the opacity of the pattern layer and export the image again.