Create Web Graphics with Paint Shop Pro

Lesson 3a: Tubes

Assignment 1: Web site

Here is a nice site for picture tubes:

http://www.northnet.com.au/~robrow/index.html

Assignment 2: Web Graphics from Tubes

I used the Water Drops tube to create a few graphics that are a theme for this site. I used a small drop as a bullet for the section heads, and a couple of larger drops to create a vertical bar that frames the page title. I prefer this to making a large graphic that contains the page title as text, because placing important text in a graphic hides the information structure of the page, making it more likely that important information will not be indexed properly. And of course, doing it my way results in smaller graphics and quicker download times. The images were placed on a canvas with transparent background, then exported as transparent GIFs.

Assignment 3: More Fun with Tubes!

Here I used the Desk Drawer Tube, which I will use to illustrate an interesting experiment in Web Optimization. After creating the image using a transparent background, a step of 11 to get a dense packing, and painting across the image with my mouse button down, I got an interesting, but very large, image. I first cropped it since it didn't need to be so large, but the file size was still around 20K. Here is that image in JPEG format:

Desk drawer contents File size = 20K
Compression = 1

I then checked, and realized the compression was set to 1, which essentially means no compression at all, maximum quality. So I then took the same image, and compressed it to 20.

Desk drawer contents #2 File size = 7K
Compression = 20

Here the file is one-third the size, but you need to look very closely to see the difference. If I were creating a Web graphic, version #2 is the clear winner. But let's see what happens at some other settings.

Desk drawer contents #3 File size = 5K
Compression = 40

At the setting of 40 it is easier to see the loss of quality. I notice it particularly in the paper clips, which seem less "solid" at this quality. This is still acceptable, though, for many applications, in my opinion. The question is whether you need to cut 2K off of the image so strongly that you can accept some minor loss. If I am already over 25K for the page, I probably take the image loss to speed the download.

Desk drawer contents #4 File size = 4K
Compression = 60

Desk drawer contents #5 File size = 3K
Compression = 80

Desk drawer conrtents #6 File size = 619
Compression = 99

Looking at the last three, you could conceivably go as high as 60 on the compression scale. That image is not, in my opinion, that much different from the previous compression =40 image. But somewhere around the middle of the scale (40-60) is the practical limit for most images with "photographic" quality. But the biggest gains in file size came from very modest, and to my eye hard to detect, losses in quality. You should never save a JPEG image for Web use without experimenting with the compression setting.

Next page: Layers!