<< . .

. 33
( : 41)

. . >>

float over a
Web page™s

TEAM LinG - Live, Informative, Non-cost and Genuine !
276 Part IV: Taking It to the Street

Creating GIF files
GIF files are the most widely used graphics files on the Web. They offer cer-
tain popular features, such as transparency (as shown in Figure 15-1), but are
also limited to 256 colors. If you™re displaying simple text or cartoony images,
though, they™re also much smaller than JPEG files; used properly, they save
lots of downloading time. To export a GIF file from your image, follow these

1. Choose File➪Export➪GIF Optimizer.
The GIF Optimizer dialog box (the optimizer) appears and contains five
tabs of settings that we cover throughout the next few sections. The
optimizer has before and after preview windows (left and right, respec-
tively) that show what effect your choices have. Click the magnifier with
the + to zoom in or the one with the “ to zoom out.
2. Click the OK button.
The familiar Save As dialog box appears.
3. Choose a filename and folder for the file and click OK.

You can (and should) make image files smaller so that they™re downloaded
faster; see the section “Reducing download time,” later in this chapter.

Creating transparent areas
To prepare an image to have transparent portions on the Web, first save your
image as a Paint Shop Pro file. Then choose any one of the following alterna-
tive approaches to mark a transparent area ” whichever approach seems

Color: If all the pixels in the area you want to become transparent are
roughly the same color (a white background, for example), you don™t
need to do much more in preparation. Just make sure that your chosen
color does not appear in any pixels where you don™t want transparency,
such as the whites of people™s eyes. If the color does appear elsewhere,
try one of the two following approaches instead.
Selection: Select either the object that you want to be visible (opaque)
or the background that you want to be transparent. You have to make
the selection before you begin to export.
Transparency: If the object (your logo, for example) that you want to be
visible (opaque) isn™t already on its own layer or layers, select it and pro-
mote it to a layer. On the Layer palette, turn off the visibility of the back-
ground layer and any other unwanted layers, and the transparent portions
of the logo layer are apparent (display a checkerboard pattern).

TEAM LinG - Live, Informative, Non-cost and Genuine !
Chapter 15: Creating Web-Friendly Images

To have the edges of a selected area blend gradually into the Web page™s
background, contract the selection by a certain number of pixels (4, for
example). Then, feather the selection by that same number of pixels. (Refer
to Chapter 3 for help with contracting and feathering a selection.)

A tab in the GIF Optimizer dialog box lets you translate your chosen area into a
transparency. In the GIF Optimizer dialog box, click the first tab, Transparency.
This tab asks “What areas of the image would you like to be transparent?” Your
choices are shown in this list:

None: Choose this option if you want no transparent areas whatsoever.
Existing image or layer transparency: Choose this option if your image
already has transparent areas (appearing as a gray checkerboard pat-
tern) that you want to remain transparent on the Web page. This is the
Transparency approach, as described in the preceding bulleted list.
Inside the current selection: Use this option if, using the Paint Shop Pro
selection tools, you have selected the area (the background, for exam-
ple) that you want to become transparent (the Selection approach in the
preceding bulleted list). If you have selected instead the area that is to
remain opaque, choose Outside the Current Selection.
Areas that match this color: Choose this option (the Color approach in
the preceding bulleted list) if the areas you want transparent are all the
same color. If the color that is already displayed in the adjoining color
swatch is not the one you want to make transparent, move the cursor
outside the dialog box, over the image, and click any area of your
chosen color. The result appears in the right preview window. Increase
the Tolerance value to make a wider range of similar colors transparent
or decrease it to narrow the range of colors made transparent.

Choosing image fade-in
As GIF images are downloaded, they build gradually onscreen. You can
choose whether they build from top to bottom or fade in from fuzzy to
increasingly detailed. For small images that are downloaded quickly, the
choice doesn™t matter much. To choose a method, click the Format tab.

On the Format tab, choose Non-Interlaced if you want the image to build from
top to bottom. Choose Interlaced if you want the image to fade in. Leave the
option labeled What version do you want the file to be? set to Version 89a
unless someone specifically requests a file of Version 87a.

Reducing download time
For GIF files, you can reduce download time in two ways: Reduce the physical
size of the image, and reduce the number of colors in it. (We tell you how
to resize in Chapter 2.) Removing unused colors saves time, which makes
sense ” why send 256 colors across the Internet when you can send only 40?

TEAM LinG - Live, Informative, Non-cost and Genuine !
278 Part IV: Taking It to the Street

Opening and using transparent GIF files
If you open a transparent GIF file in Paint Shop click the option Set the Transparency Value to
Pro, you may be surprised at what you see: Palette Entry and then click your chosen color
Areas that appear transparent in a Web in the image window. To turn off transparency,
browser are filled in with a color. That result choose the No Transparency option. Click OK
occurs because GIF transparency is a special when you™re done.
trick used mainly in Web browsers. Paint Shop
Be careful when you™re choosing a color. It may
Pro shows the reality behind the trick.
be used in places where you™re not expecting
GIF files achieve transparency by designating it ” white, for example, may appear in some-
as transparent a particular color on the palette. one™s eyes, giving a spooky result when the
Web browsers pay attention to that designation whites of that person™s eyes become transpar-
and show the underlying Web page background ent! Likewise, you may find that the area you
where that color occurs. Paint Shop Pro, how- want transparent is composed of more than one
ever, shows the color itself ” unless you tell it color, which leaves an unseemly halo of not-
otherwise. quite-your-selected color around everything
else in the image. To fix it, you have to select the
To tell Paint Shop Pro to show the transparency,
area and tell Paint Shop Pro to make it trans-
choose Image➪Palette➪View Palette Trans-
parent; refer to Chapter 3 for an example of this
parency. Repeat this command to return to
halo problem and how to select it properly.
viewing the color.
Remember that GIF files are palette-type files,
If you want another color on the file™s palette to
so many Paint Shop Pro features don™t work
be displayed as transparent, choose Image➪
unless you convert the file to 16.7 million colors
Palette➪Set Palette Transparency. In the Set
first. (Press Ctrl+Shift+0.)
Palette Transparency dialog box that appears,

To reduce colors, select the Colors tab of the GIF Optimizer. You have several

How many colors do you want? The lower the number of colors, the
quicker the file is downloaded. Take out too many colors and the image
may start to look grainy or choppy. Experiment with this value, by set-
ting it as low as you can until you find something acceptable in the pre-
view window.
How much dithering do you want? It sounds like if you set this option
high, Paint Shop Pro would just waste your time, saying “Oh, I don™t
know ” what do you want?” In reality, though, if you have removed a
bunch of colors, this setting controls how much Paint Shop Pro attempts
to simulate those removed colors by filling them in with the colors it
does have. That helps to make a low-color image look smoother, but at
high values it may add weird moir© patterns or make it look spotty.
Again, experiment to find the right value for you.

TEAM LinG - Live, Informative, Non-cost and Genuine !
Chapter 15: Creating Web-Friendly Images

What method of color selection do you want to use? You need to be
concerned with only two options:
• Existing Palette: Uses the colors in the original image, although
they may not look right on other computers.
• Standard/Web-safe: Ensures that the image looks the same on all
computers, although it may not look quite like what you originally

When you™re done selecting all these options, you can select the Download
Times tab to see a chart of how quickly your image is loaded at various
speeds. People with modems are generally running at 56 Kbps; unless you
know for a fact that the people who will view these images have something
other than a modem, assume that they use a modem. (High-speed connections
are increasingly common these days, but at least 40 percent of all Internet
users are still stuck with dial-up.)

Using the GIF Wizard
Alternatively, you can choose to click the Use Wizard button at the bottom of
the GIF Optimizer dialog box. The GIF wizard asks you five questions dealing
with palettes, backgrounds, and quality, all of which we detail in the preced-
ing section.

Creating JPEG files
JPEG files tend to be smaller than GIF files for many kinds of images, so
they™re downloaded faster. The main trade-off is that JPEG files are lossy.
They lose some detail in your original image, and the clean lines of text can
look fuzzy. You can choose how much detail to trade off for a reduction in
file size, however.

The second trade-off is that JPEG files can introduce artifacts: blurs, spots,
and rectangular blocks that weren™t present in the original image. Again, how-
ever, you can choose how many artifacts you™re willing to live with to get a
smaller file.

To export to JPEG, follow these steps:

1. Choose File➪Export➪JPEG Optimizer.
The JPEG Optimizer dialog box appears. It has three tabs. It also has
before-and-after preview windows (left and right, respectively) that
show the effect of your choices. To zoom in or out, click the magnifier
icons. Click the magnifier with the + to zoom in or the one with the “ to
zoom out. To view different parts of your image, drag in a window.

TEAM LinG - Live, Informative, Non-cost and Genuine !
280 Part IV: Taking It to the Street

2. Click the Quality tab to trade off file size for quality.
Adjust the Set Compression Value To value box to a value from 1 to 99.
Higher values make the file smaller, but give it lower quality. You can see
changes in the file size under the right preview window, in the line that
says Compressed bytes. As you can see in Figure 15-2, you can save lots
of time with comparatively little loss in image quality.
A menu offers Chroma Subsampling options. This deep juju tells Paint
Shop Pro when to average the color information for any given block of
pixels, and the best subsampling approach is a subject of debate among
graphics professionals. To make things simple, we just say that you
should go with the default value (unless you feel like experimenting).
A check box on the quality tag also asks you whether you want to save
EXIF data into the JPEG. Whether you even have EXIF data depends on
what camera the image was taken with, as we explain in Chapter 5. If you
leave this box unchecked and save the image, the camera settings and
artist information aren™t saved with the new image.
To see estimates of how fast your file is downloaded, depending on the
viewer™s Internet connection speed, click the Download Times tab. A
table there gives estimated download times for various connection
speeds. Unless you have specific knowledge that the people who will
view this image have anything faster than a modem, always assume that
they™re running at 56 Kbps.

Figure 15-2:
The original
image of
lovely wife,
Gini, took
2 1/2 min-
utes to
at modem
speed; after
sion, it can
be seen in
3 seconds,
and she
as cute
as ever!

TEAM LinG - Live, Informative, Non-cost and Genuine !
Chapter 15: Creating Web-Friendly Images

If you can™t get your image to download fast enough, don™t forget that
resizing, as shown in Chapter 2, saves lots of time. Do people really need
to see a poster-size picture of your baby?
3. Click the Format tab to control how the image fades in.
JPEG files normally assemble themselves from top to bottom as they™re
downloaded to a Web browser. If you would rather have your image fade
in from blurry to detailed, choose Progressive on this tab. Otherwise,
leave the choice set to Standard.
4. Click the OK button.
The familiar Save As dialog box appears.
5. Choose a filename and folder for the file and click OK.

Using the JPEG Wizard
Interestingly enough, the JPEG Wizard is available at the bottom of the
JPEG Optimizer, but it involves clicking more times than the regular JPEG
Optimizer. Our advice is to skip the wizard and just use the optimizer, which
allows you to see your download time in one click, as opposed to three.

Doing Common Webbish Tricks
Unless you™re Spider-Man, creating Web pages is a complex business. But
Paint Shop Pro can make some aspects of Web design much easier! This sec-
tion describes two tricks that Paint Shop Pro can help you with.

Creating buttons
Paint Shop Pro offers an effect that™s great for creating graphical buttons for
Web pages. The buttonize effect makes any image (or selected part of an
image) look like a raised button by shading around the edges.

Choose Effects➪3D Effects➪Buttonize. The Buttonize adjustment dialog box
that appears offers two styles of button. Click the Solid radio button for a
button that has flat sides (and then choose your color in the palette box),
or choose Transparent Edge for a button with rounded sides. The Buttonize
dialog box also offers three adjustments:

Height and Width: These controls adjust the vertical and horizontal
dimensions, respectively, of the top surface of the button.

TEAM LinG - Live, Informative, Non-cost and Genuine !
282 Part IV: Taking It to the Street

Opacity: Increasing opacity makes the edges of the button darker and
obscures the underlying image more.

The right preview window in the Buttonize dialog box shows the result of
your choices.

Matching image colors to HTML colors
You may want to match colors used in your image to colors used in the text
of your Web page ” or vice versa. Text colors are often given in cryptic,
geekish codes called hexadecimal in the HTML code used to write Web pages.
They™re written like this: #FFC0FA. These codes always begin with a # symbol,
followed by six characters ” digits or the letters A through F.

If you™re creating a Web page and want to match the text color to a color
in your image, the Materials box can help. (Press F6 to display it if it™s not
already visible.) Click the Dropper tool on the Tools toolbar and then click
your chosen color on the image. The Foreground and Stroke Properties box
inside the Materials box changes to match that color; click that box. Select
the Color tab in the Material Properties dialog box that appears. Use the
HTML code shown at the bottom of the dialog box in your Web page author-
ing software to set the color of your text.

If you™re creating an image and want to match a color in your image to a text
color, the solution is similar: Click the Material box to bring up the Materials
palette. In the HTML code value box on the Color tab, enter the HTML code
you obtained from your Web page authoring tool. Click OK and your chosen
color swatch now matches the HTML document™s text color.

TEAM LinG - Live, Informative, Non-cost and Genuine !
Part V
The Part of Tens

TEAM LinG - Live, Informative, Non-cost and Genuine !
In this part . . .
P erplexed? Annoyed? Both? Hey, join the club. But
we Dummies authors have long been channeling the
spirit of David Letterman, and in that spirit we offer The
Part of Tens: the ten top things that perplex and annoy us,
and some solutions. Among them are ten things that we
are annoyed about because they™re too advanced to
include in a Dummies book.

TEAM LinG - Live, Informative, Non-cost and Genuine !
Chapter 16
Ten Perplexing Problems
In This Chapter
Fixing a tool that doesn™t seem to work
Stopping those annoying Paint Shop Pro questions
Finding a missing toolbar
Seeing images in their real size
Figuring out why colors come out wrong
Avoiding creating new text when editing old text
Fixing broken brushes
Making the Magic Wand tool work better
Getting tools to work your way
Getting Paint Shop Pro to open your images

I n real life, your paint brush doesn™t suddenly start painting in plaid, your
canvas doesn™t double in size, and (unless you have kids) your tools don™t
suddenly become unavailable. In software, however, all the laws of nature are
repealed and then reformulated by people whose idea of a good time is to
make your brush paint in plaid: software engineers.

When the bright colors you see before you are the result of a migraine and
not paint, this chapter is a good place to start. Take a deep breath, get a
chocolate chip cookie, and repeat, “I am smart, software is stupid. I am
smart, software is stupid.” Then read on.

TEAM LinG - Live, Informative, Non-cost and Genuine !
286 Part V: The Part of Tens

<< . .

. 33
( : 41)

. . >>