For PSP V56Home   >   Tutorials   >   PSP V7 Effects   >
Using Opacity for Backgrounds
E-mail this tutorial to a friendEmail to Friend

Using Opacity for Backgrounds
Created by: Kawliga

 
Download this tutorial fileDownload Attachment
To follow this tutorial, you'll need to download the attached file on the left and unzip the image to your hard drive.
 
The most important thing you have to decide first is the purpose of the web page where your background is going. Will it be an entrance page or an information & products page? Or maybe you want an exciting and visually stimulating page? Once you have made that decision, it's time to pick your background.

When choosing your background, you must take into account the tiling effect it will have on your web page.

What is tiling? If you choose a pattern or image background with the width being less than the screen resolution, you will have the tiling effect as the background repeats itself. And the smaller the image, the more it repeats. How many times have you found what you thought would be a great looking background only to find it looked terrible on a web page? The standard and most often used viewing size of a web page is 640x480, followed by 800x600, but nowadays there are screens that have a resolution of 1024x800. So, we have to be extra careful when choosing backgrounds, and of their tiling effect. But there is tiling, and then there is tiling! Some images can look okay repeated as long as the background seams/edges have been welded; i.e. made seamless.

One thing that we also have to take into consideration when making backgrounds is the readability of text. How often have you gone into a web page and have to squint and decipher what it is people are trying to say, when they either have a very busy background, or they have a bad color combination of their background and text.

What can we do to fix this? Opacity, turn the busy images into borders, change color of lettering, etc. In this tutorial we will look at a number of ways to lighten images.

 
First, let's try Gamma Correction. A gamma correction value adjusts for the non-linearity of phosphor excitation. An image is stored in computer memory as a series of numbers. Depending on the image’s format, a pixel's values can be described in a variety of ways. All these formats have at least one thing in common: a higher number means a brighter color value. This rule has two corollaries: (1) the highest combination of values possible for a pixel produces pure white; and (2) the lowest combination of values possible for a pixel produces pure black.

It would follow logically that a value half-way up any scale would have a lightness exactly between black and white.

 
Let's try some Gamma Correction! Open "opacity.jpg" from your download.
 
Go to Colors || Adjust || Gamma Correction. Set Gamma Correction at 2.20 and make sure "Link" is checked.

This will be the image you get. To illustrate how this image would work as a background I've put some text on it. As you can see, it is still too bright for our purposes, meaning we have to find a better Gamma Correction.

 
Undo the previous Gamma Correction (Ctrl+Z).
 
Let's try a different setting: Go to Colors || Adjust || Gamma Correction, set Gamma Correction at 3.40.

As you can see, it is still too bright for our purposes, meaning we have to find a better Gamma Correction.

 
This is the background image with a Gamma Correction of 4.40.

This is getting more like it.

 
This is the background image with a combined Gamma Correction. First I did a Gamma Correction of 2.20, and then another one of 5.

You can read the text on this one quite well.

 
Another way we can change the image to enhance readability is by changing the Brightness/Contrast levels.

With your original background tile, go to Colors || Adjust || Brightness/Contrast. These are some of the settings that have been achieved:

 
This was created by setting Brightness at 128 and Contrast at 0%.

It is still a little too busy, but is getting close to the effect we want.

 
This one was created by setting Brightness at 128 and Contrast at 50%.

You'll notice that changing the contrast has taken out the superfluous colors. It is still too bright though.

 
This one was created by setting Brightness at 128 and Contrast at
-50%.

The text is now easy to read because the colors have become paler.

 
Of course these examples are only rough ones, and you will be able to get the right combination to create the image of your desire.

We will go through one more way of enhancing the readibility for a busy image.

 
Open the background image from your download or another one of your choice.
 
If it is not yet activated, activate the Layer Palette by typing "L".
 
Make a new layer by pressing the "Add New Layer" button on the Layer palette.
 
Click on your Floodfill tool in the tool palette:
Blend mode = Normal
Match mode = None
Tolerance = n/a
Opacity = 100
Sample merged = unchecked
 
Set your foreground style to Solid Color (click on the arrow in the foreground style box and choose the icon on the left) and your foreground texture to None (click on the arrow in the foreground texture box and choose the icon on the right). Then click into your foreground style box and set your foreground color to white.
 
Click into the image to fill the new layer with white.

Now adjust the opacity of the white layer to suit your needs.

To create this background, the opacity was set at 80.