Bob's Special Page of Tips for Performers Click for ===>




Tips for Performers HOME

Tips For Web Graphics

If you are planning to put graphics on you web site you need to be aware of the pros and cons. One of the basic tools you WILL need is a graphics program. You do not need an expensive program but it will need to have some capabilities. An excellent program is PolyView from www.polybytes.com. This is a great and very inexpensive graphics viewer that has the capability to make the necessary adjustments to your pictures. I recommend it even if you have advanced graphic editing programs. It will not replace them.

This page will discuss the adjustments of the pictures using the controls found in PolyView.

PolyView has the capability to crop, resize (physical and file size), adjust brightness, contrast, gamma, color balance, color intensity, sharpness, rotate, flip, red eye, and a host of other special effects. It is easy to use and has good help files.

There are two types of files that are usable on the internet; JPG (jpeg) and GIF. Which is best to use varies with the graphic, mainly the amount of shading and details.

JPG files are best for photos. They can be compressed to a great degree. Compression is called "lossy" because it throws away some data in the process of compressing. Once thrown away it cannot be recovered. At the right is a jpg graphic and no, 50%, and full compression. As you can see the middle is very acceptable and smaller file size. The far right has gone too far but is much smaller. You will need to reach a balance between file size and acceptable clarity. PolyView allows you to adjust and preview this aspect. There is probably no reason to go above 95% (100% is no compression) and the first 5% offers considerable reduction.

GIF files are best for line drawings. These pictures have areas of single color and little to no shading. The compression is "lossless" so no data is lost. The compression is not as great as with jpg files. GIF files can also have transparency and animation which is not possible with jpg files.

There are a few other types png & jp2 that are not universally viewable.

Generally speaking keep the files as small as possible. The physical size (dimensions) also affects the file size and thus the loading time. Bigger files are slower to load. Choose carefully how big the picture is, PolyView can resize you picture as well as crop it.

Mostly I find 300 pixels wide is good for most pictures. For montages I use 800 pixels. For icons I generally use from 50 to 150 depending on how big I want it to appear.

Other adjustments can be used to make pictures look better. Higher contrast and bright colors make pictures look sharper. 

Sharpness control can make the picture sharper BUT it can get out of control rapidly. Use this very carefully.

Brightness and Contrast controls can adjust these for the best look.

Gamma is a control that affects the darker areas more than the lighter areas. It is good to open up shadows. At the right is a picture that has dark shadows. The second picture has had the shadows opened up with the gamma control. 

The Color Balance controls allow you to separately adjust Red, Blue, and Green. Blue will often take off the reddish of indoor pictures under incandescent lights. Red and Green often help the flesh tones. Green can be used to reduce the greenish tinge of florescent lights.

Color+ and Color- controls can be used to change the color intensity. Sometimes pictures will have very harsh colors. Using the Color- control can make these pictures look much better. Color+ can brighten up the colors on a muddy picture.

Automatic controls: Auto Level, Auto Contrast, and Auto Balance are very useful controls. I generally use these, usually Auto Level first and then others to tweak it up. If I don't like it the Undo can take it back. Often to dark pictures, a little Gamma adjustment and the Auto Lever will brighten up the picture. The Brighter command can further brighten the picture and maybe Contrast+ to improve the colors.

Auto Contrast: brings the darkest area to black and the lightest to white.

Auto Color Balance: tries to guess the correct color balance for an image by analyzing the image colors and attempting to remove any color cast that might be present.

Auto Level: does both.

There are other controls that you may find useful. All of the controls can be placed on the toolbar or used from the menu. I personally put the ones I like to use on the toolbar so they are available as I work.

If you are designing your web site to get customers, remember they do NOT all have high speed access. Design your Home Page to catch their attention, say what you are about, and to load reasonably fast. I recommend no large graphics, Flash, or other large size features. They are nice, BUT, "Loading" and "Please wait" really mean "Go back and try someone else". Also they just clicked to get to your site. Why ask then to "Click to enter". They just did! Remember dull graphics on you web page won't get you business...