JWG PSP7 Tutorials:
Optimising Graphics
Part 2: PSP Graphics
This tutorial will show you how to Save and Optimise your images as Transparent Gifs or JPEGs in PSP 7
Drop Shadow
I am adding this extra note on Drop Shadow, as I have received quite a few queries on this subject recently.
You have to be very careful using Drop Shadow on your text or images, if you want to save them as transparent gifs.
A very pronounced shadow will not save properly on a transparent graphic either in PSP, or Animation Shop.
There are ways around this, however:
Use a small shadow with these settings or similar: Vertical 1: Horizontal 1: Opacity: 100 Blur: 2.5
You can play around with these a bit too, as opacity of 70 and Blur of 3.7 is also quite effective,
and Vertical and Horizontal can be 0 and 1 or both 0 etc....
OR: Dont use drop shadow at all, and add an inner bevel instead. This can also give a more 3D effect to your text.
When optimizing your graphic, take into account the background you are likely to want to use it on, and use that colour
or something very close to it, as the one in the "blend with background colour" box. (see shot 34)
This applies to both PSP and Animation Shop.
The above example used a drop shadow at the settings above, and was optimized in the gif optimizer in PSP using #E4EFFE as the background colour to blend with. (If it had been made specifically to go on this page, I would have used #EEEEEE which is the colour of this background). It still works quite well though, so I think you get the idea....
Transparent Gifs
Create your image on a transparent background.
If you have used several layers; when you merge them, use "Merge Visible", NOT "Merge All (Flatten)", as that will give you a white background!
Don't forget to crop your image to get rid of a lot of wasted space around it, as extra transparency increases the file size.
Use the crop tool, and draw a little box around your image, as close as you can get.
Then click on the crop tool box as indicated: or you can double click on the image if you prefer, or even go to Image: Crop They all perform the same function!
Now go to File: and scroll down to Export: Click on Gif Optimizer:
This is the first screen that will appear:
There are two methods of saving gifs using the optimiser. One is using the wizard, and the other is adjusting the settings by hand. I am going to show you how to use both methods, and then you will be able to make your own adjustments, as necessary.
Using the Wizard
Look down at the bottom left hand corner of the dialog box and you will see this:
Click on it, and the Optimizer Wizard appears. Just follow the Wizard step by step. You will see this on the first screen:
Make sure you have this box checked. Click Next to move on to each stage.
When you are asked for the colour of your background, put your cursor in the little box as shown: (The colour already there will depend on the last background colour you were using) The cursor turns into a dropper, and the colour box will appear. This is where you select the colour that your image will be going onto. If it is for Message Boards, it is probably safest to choose white: but if it is going onto a web page, try and find the nearest colour to your background image or fill colour, and choose that instead.
(If you know the hex code of the color you want, just type that into the box). In the next screen, you will be asked if you want the best colours, or Web-safe. The choice is yours, but I always go for the best colours, to try and obtain a better finish.
Now you come to the next screen. You can start with Better image quality, but it is best to play around with this a bit, to see how small a file size you can get away with, while still keeping up your image quality. If the file size is too large at best quality, move the slider down until the file size reduces but the quality is still acceptable. *A modicum of alchemy is involved here!!*
You can then proceed to the end of the wizard, and you will get a preview of your optimized image.
Click finish if it looks ok, but if not, go back and change some of your settings until you are happy with the final product, or proceed to Method 2. The wizard will save a copy of your image wherever you specify, and then you can close the original. (Choose no when asked if you want to save it).
Manual Adjustments
Alternatively, you can change settings in the Gif Optimizer manually if you wish. This can often give you a better result than the Wizard: These are the settings I usually use, but all can be adjusted if required. I use the optimiser for all my gifs in PSP now, not just transparent ones, as you do obtain better results than if you just hit save.
The "blend with background color" box is where you can put the hex code of your page or message board background if you know it, or just choose white, if not.
The only way to really get a smaller file size with a gif, is to reduce the colours from 256 downwards. Play around with this, and see what you can do. Generally, it is pretty difficult to reduce the size of transparent gifs much, particularly if your image has a drop shadow or uses gradients, but it is always worth a try, and you may have more success with non transparent gifs.
When you are happy with your settings, just hit OK, and the Optimizer will ask you where you want to save a copy of your graphic. You can close the original, tube it, or save it as a psp file for future use, if you wish.
Exporting JPEGs
When you are saving images as jpegs, you want to optimise them as much as you can without sacrificing image quality. This is where the JPEG Optimizer comes in. Go to File: Export, and click on JPEG Optimizer.
On the first screen you will see two images. One is of your uncompressed graphic (on the left) and the one on the right is what it will look like if saved at the compression values you have chosen.
You can instantly see if the image quality has been retained, and if the file size is acceptable to you. (Remember, our goal is to produce quality graphics at the smallest file size possible, to speed up webpage loading times). A bit further down the screen, you will see a number in a box.
Now in the above example the compression value has been set to 20, and the image has not lost any quality. So what happens if we try to optimise further by typing a higher number in the box?
If you look closely at the two images, you will see that we have saved about 8kbs in file size, but that the image has begun to break up quite a lot. Now with this particular image we have had to optimise very hard to show a clear deterioration in quality, as it is a fairly simple graphic (a tube on a background pattern), but some of your framed pictures and tutorial results will have much more detail, and will probably need to be saved at a lower compression value to preserve quality. My advice would be: start at about 20 in the box and go up or down depending on what your image looks like in the preview window. I find I rarely have to go down much below 10 to save my images, but if you are using gradients (which although lovely, do NOT optimise well!) you may have to come right down to 1 (the best quality you can get). In that case, I would make sure that the graphic isnt too large dimensionally (pixel height by width) otherwise you will quickly find the file size creeps up into the hundreds of kbs!!
Personally I would suggest that you DONT use the Wizard in the JPEG Optimizer, as it has rather crude settings on the slider, and you have much more control over the settings if you do it by hand as shown above.
More Information
For my tutorial on saving and optimising animations, go to part 1 Animations
An excellent set of tutorials on file saving, compression etc can also be found at Graphic Buds here and here. Well worth bookmarking for future reference. New! Visit Moon's Designs for Patti's easy to follow tutorial on saving transparent gifs in PSP 8
©jewelswebgraphics.com 2001-2006