SCENIC-ROUTE: PAINT SHOP PRO: TUTORIAL, on Screens/Masks

Web browsers do not yet widely support transparency in images. It might be that, for effect, a web page artist would prefer that a logo allow some of the background to show through. And there is a way. It's not elegant. It's not that flexible. And, frankly, it works better the higher the screen resolution you can muster. But - here it is, specifically in Paint Shop Pro version 7.

If you look closely, you can sort of make out the background showing through the center of the star. It can be more evident or pronounced with a more solid graphic, or if the star were less bright and colorful, perhaps - since this is a dark background trying to peek through. You see the graininess, the screen effect (as in silk screening, or screen door), even on a 1024 or higher display. If it's an effect that's desirable, for artistic reasons, that's one thing. If a smooth semi-transparency is desired, you can see the limitations of this method. The thin border, here, was used because a screen, as you could imagine cutting the mesh for a screen door at a bias, won't give a smooth edge, but a rough, jagged one.

The star, with the solid thin border, is easy to produce. Get the image you want, your logo, or just some test clipping of an image, as here, or whatever. Let's take that fortune cookie section:

First, let's make the image a little smaller, so that more of the cookies can be seen:
- Image, Resize:
  - check: Percent of Original
  - Height and Width: 80
  - check: Maintain Aspect Ratio
  - Resize Type: Smart Size
- Effect, Sharpen, Unsharp Mask:
  - Radius: .90 (decimal .9, not 90)
  - Strength: 40
  - Clipping: 0
Selections button (or mode)
In Tool Options:
- Selection Type: Star 2
- Feather: 0
- check: Anti-Alias
Draw a selection something like this:
Copy (Ctrl-C):
Now create a new image for this. (You could just Paste at this point - Ctrl-V. However, it might not be clear what the background color is, and you'd also have to reselect the star outline in order to continue.) So - brand new solid background image:
- File, New:
  - Height and Width: 220 Pixels (the image is around 250 wide, now, and the selection is smaller than that)
  - Resolution: 72, though could move it ways up if you wanted
  - Background Color: Black
  - Resolution: 16M colors (24 bit)
Now Paste into the new image - Ctrl-E, and try to put it right in the middle.
Selections, Modify, Contract by 4 (or 5, 6, whatever you prefer):
Selections, Modify, Feather by 2
Press the Flood Fill button
In Tool Options:
- Blend Mode: Normal
- Match Mode: None
- Opacity: 100
Now set the stroke style to black and the stroke bump to Dither 50 pct (it's one of the actual textures)
Flood the star, inside the marquee
Knowing that the background is solid black, and that the 'dither' screen has solid black lines, save as transparent .gif with black as the transparency:
- File, Export, GIF Optimizer:
  - Transparency tab:
    - check: Areas that match this color
    - Picks up background color. If not black, make it black.
    - Tolerance: 20 (as a round number)
  - Colors tab:
    - Colors: 256
    - Dithering: 100 (but prob. doesn't matter much, in this example)
    - Method: Optimized Median Cut (though Octree would also be fine)

Of course, the edge on this is set up only for dark backgrounds. You'd have to modify things, above, for white, or for a light color, to place on a light background.

This was a quick method, depending on knowing the same color was good for the background and the screen. Next is a more flexible method for doing this, using layers, and trying different screens.