Web graphic FAQs:

Frequently Asked Questions

Q: How can I create a thumbnail graphic for my Web page?

A: Rather than providing a large graphic on your Web page and slowing down the loading time, you can make a thumbnail graphic and link this to the full size graphic. This way users can get a look at a small rendition of your image and then can choose whether or not to look at the full size image. To create a thumbnail of a graphic, open your graphic in your graphic program and, before you start, for safety, save it under the name you'll use for your thumbnail using File, Save As. This way you'll avoid the embarrassment of losing your graphic by saving the thumbnail over the top of the original!

The parrot, when reduced by a factor of eight, still results in a useable thumbnail image which is one twelfth the file size of the original.

Now you'll need to resample or resize the graphic. If you're using Paint Shop Pro, then resizing will give you better results if you are using a simple, hard-edged image and when you are working with only a small range of colours (16 or less). If you're using a scanned photograph or an irregular or complex image, then try resampling instead. Size your graphic down keeping the aspect ratio constant (the relationship between the height and width) and experiment till you get a small size that is still functional. Remember you can use the Edit, Undo option to undo your last command if you don't like the results. You'll find Resample and Resize on the Paint Shop Pro, Image menu.

Once you've got your thumbnail image, save it and you can add it to your page using this tag so your users can click on the thumbnail to view the full size image:

<A HREF = "fullsize.jpg"><IMG SRC = "thumbnl.jpg"></a>

A: Image file size is related to a number of different things including the size of the picture in pixels, the number of colours in it, how much detail is in the graphic and the format you use to save it in.

If you're looking to reduce the file size of a graphic start by cropping it to remove any unwanted excess. Most photos and many clipart graphics can be reduced by careful cropping even if it only involves cropping the image background. Certainly most scanned photos can be reduced substantially by concentrating on the important parts of the image and removing the rest.

Many images can be reduced too by resizing or resampling to decrease their overall size. For instance a 400 x 400 pixel image may look just as effective on a Web page as a 300 x 300 image, but you'll find the difference in file size can be substantial.

Check the number of colours used in your image. In Paint Shop Pro this can be done using Colors, Count Colors Used. If you can reduce the number of colours in a GIF file, you'll decrease the final file size. For example, a GIF file saved with 256 colours will be larger than the same one which has been reduced to 16 colours and saved, even if each only contained 16 colours or less. You can reduce the number of colours in an image in Paint Shop Pro using Colors, Decrease Color Depth.

Choosing the right file format for an image can have a substantial effect on file size. GIF is best for line drawings and simple graphics and JPG is best for photos and complex images. Because the difference in file size can be enormous, if you're unsure, save a file in both formats and check out the file sizes of each; you'll soon get an idea which works best for each image type. You'll find that when you are saving in JPG format the Options allow you to choose between degrees of compression and quality. Often the difference between, say, 80% and 60% quality is hard to detect but the difference in file size is substantial.

The amount of detail in an image directly affects the file size. For example, the graphics in the figure are exactly the same physical size (341 x 326 pixels) but the more complex image on the right will save to a much larger file size than the one on the left. Saved as 256-colour GIF files, the graphic on the right takes up 5Kb while the one on the left takes up only 2Kb. Even if the image on the left is reduced to two colours (black and white), it will still be 4Kb in size.

A: Yes, using Paint Shop Pro v4 you can create custom buttons quickly and easily. Start a new picture and create your button text or use any existing graphic file (save it under a new name so you don't damage the original image. Crop any unwanted space from around the image or text and using Resample or Resize, size the button text or image to the size you want to use (75 to 100 pixels wide gives you a fairly large size button). Then, selecting the image, use Image, Special Effects, Buttonize to create a button from your graphic. Save your button.

A: A lot of the background images you find on the Internet suffer from having too much colour contrast and it's difficult to place text over them. To alter the image, open it in Paint Shop Pro and experiment with the Color, Adjust functions on a copy of the original. Try decreasing the Brightness and Contrast or use a Gamma Correction setting between 0 and 1 to start with. When you've got the image right, save and test it with your text.

Likewise, you may find a background texture you like but which is the wrong colour. If you use Color, Adjust, Hue/Saturation/Luminance and adjust the Hue between -100% and 100% you can alter the colours in the image up and down the spectrum. You can also do this using Color, Adjust, Red/Green/Blue which allows you to alter the levels of red, blue and green in the image.

A:Paint Shop Pro allows you to create seamless backgrounds for your Web pages from any graphic image. To do this, open an image in Paint Shop Pro and save a copy using a new name. Now select a portion of the image to use as the background and use Image, Special Effects, Create Seamless Pattern. You'll need to select a portion of the image away from the image edge as Paint Shop Pro uses some of the surrounding graphic to create the pattern. Experiment until you get the effect you are looking for. To find more information on this function, look up Special Effects in Help.

A: The Web is full of good graphic resources from copyright free backgrounds and icons to tutorials on creating animated GIFs. Here are some of my favourite places to visit:

• Wonderful animated GIF files from TinCup: http://www.tincup.com/
• Backgrounds/textures: http://www.primenet.com/~robhood/textures.html
• Graphics, Image & Wallpaper Archives: http://a2z.lycos.com/Internet/Web_Publishing_and_HTML/Graphics,
  _Image_and_Wallpaper_Archives/
• Gif animation tutorial: http://www.reiworld.com/royalef/gifanim.htm
• ClipArt: http://www.pixelsight.com:80/PS/clipart/clipart.html
• Index of Pictures and Rulers: http://stud1.tuwien.ac.at/~e8826423/Pictures/Rulers/
• And this book really deserves a place in the bookshelves of any one interested in using Paint Shop Pro to create Web graphics. It has a great chapter on filters and fixing scanned images and lots of invaluable information on graphic issues in general and Paint Shop Pro in particular. There's even a copy of Paint Shop Pro on the CD although, it is shareware, so if you continue to use it, you will need to register it: Creating your Own Web Graphics with Paint Shop Pro, by Andy Sharfan and Dick Oliver, Que.

by Helen Bradley