|
|
Making Transparent GIF and PNG files with
Paint Shop Pro 9
Making a transparent graphic is always one of the first things someone wants to do when they start up paint shop pro. So many have asked that I figured you needed a tutorial on it. See the tutorial for PspX if you are working with that version. This tutorial specifically goes through the steps for making a GIF file but they are almost identical to make a PNG file. Try GIF first and then try PNG and see what suits your needs. If you can do one file type then you can do the other.
1) Click File > New. Set the options as follows:
Image Dimensions:
Width: 200 pixels
Height: 75
Units: Pixels
Resolution: 72, pixels/inch
Image Characteristics:
Raster Background: checked
Color depth: 16 million (24 bit)
Color: Transparent > Checked (this is what makes your graphic transparent so it is VERY important)
Click OK to accept the options. Your graphic will be a box that has a checked white/gray checked background which means there is no color or information on that layer and it is transparent.
You MUST preserve this layer as it is the background and transparent. If you fill it with color, you can't go back and unfill it so your best bet is to immediately create another layer and start your work there.
We are going to have a graphic of text on a transparent background. We are going to add a new vector layer. Most times you would add a new raster layer but not this time.
2) Click Layers > New Vector Layer > OK.
3) Click the text icon (hint: capital A). You can also tap the letter T on the keyboard. Upper or lower case... it doesn't matter. T brings up text tool and options.
Set the text tool options as follows:
Create as: Vector
Font: Verdana (you can use a different one)
Size: 28
Stroke: 0.0
Font Style: Bold
Alignment: Center
Anti-alias: Sharp
Everything else can be left as is.
The materials palette is set as follows:
4) Foreground: transparent (click the international no icon which is a circle with a line through it located below the foreground color box)
Background: #70916f
Here is a snap shot of my screen. Be forewarned that it is a big shot so you can read the options and I was too lazy to resize it ;)
Screen Shot 1
5) Click the text tool in the middle of the graphic to get the text entry box. Type in Maegg or another word of your choice . Click Apply.
We need to align the text in the box. Click Objects > Align > Center in Canvas.
The last and very important step is to export your file as a GIF. Doing a save as .gif isn't enough and you really need to export the file to get all the options correct for your graphic and background.
Click File > Export > GIF Optimizer
Set the options as follows:
Transparancy Tab:
Areas that math this color: checked, set color box to white and tolerance to 0
Partial Transparency Tab:
Use full transparency for pixels below: checked; opacity set to 1
No, use existing image color at 100% opacity: checked
Colors Tab:
Use 256 colors, dithering set to 0
Color selection method: Optimized Octree
Format Tab:
Non-Interlaced: checked
Click OK and then SAVE.
Here is our finished ode to Maegg Graphic
Please feel free to export the same file over and over while changing the tab options and seeing the result. Instead of using white as the transparent color to match, I could have used the exact color of the web page. I was too lazy to look it up and picked something close.
PNG and GIF are both formats that support transparency. You can follow almost the exact steps except click PNG Optimizer and set the options instead of GIF optimizer and options. PNG is a better format to use at is has more options and it is supported by all browsers. You can sometimes get a much better transparency than GIF offers using PNG. Try it!
|
|