JWg PSP7 Tutorials:
Optimising Graphics
Part 1: Animations
It seems that a lot of people dont know how to save their graphics in PSP and Animation Shop, so that they achieve the best quality and smallest file size possible. This is known as "optimising" and once you have learned to do this, you will produce much better looking images, whilst also keeping the file size down. Why does the file size matter anyway? Well, your browser has to load all the images on a webpage so that you can see them. So, if there are quite a few large graphics on a page, it will take forever for the page to appear if you are using a dialup modem, or the page will simply time out, and some of the images will not load, leaving you with that lovely red X instead of the image. Many folk in the UK, (and some in the US as well), are still using dial up modems as there is no other choice where they live, so it is always a good idea to keep your images small and quick to load, when designing your webpages, and making graphics.
Preparation
Before you think about saving, make sure you have cropped your finished graphic fully. Extra space around the image wastes file size, particularly if your graphic has a transparent background. (Many people dont realise that transparency takes up more file size than a solid background!)
In the first screenshot you can see all the wasted space around the image. Use Ctrl+A to select all your frames, and then click on the crop tool, on your tool bar.
Starting at the top right hand corner of your image, draw a little box around it, as close as you can.
If you get it wrong, you can resize the box by putting your cursor on the side you want to move, and when you get a two headed arrow, position the side where you want it to go, (a four headed arrow will move the entire box).
Then just click on the crop button, and your image is cropped for you.
The next (and probably most obvious) thing to do, is to resize your images so that they are not physically huge, before you try to optimise them. In Animation Shop, go to Animation: Resize Animation: Either put the pixel size if you know the exact dimensions you wish to resize to, or choose a percentage of the original graphic to reduce to. (In PSP, go to Image: Resize). I usually choose bicubic resample for resize type , as you often get away without having to resharpen your resized image. Make sure the "keep aspect ratio" box is checked. If you do feel that your graphic needs resharpening, here is how to do it. If it is an animation, you need to take the frames into PSP individually, and sharpen them one at a time. Click on Frame 1 and holding down the shift key, hit X on your keyboard. This takes that frame into PSP. Then go to Effects: Sharpen:Unsharp Mask:
You can play around with the numbers in this box, if your images dont look very good with the above settings. This is just a guideline and a starting point for you. When you have sharpened that frame to your satisfaction, click on the X in the top right corner to close it. You will be asked if you want to update back to Animation Shop before closing. Say yes, and the sharpened frame is returned to Ani Shop, for you. Click on Frame 2, and repeat the procedure for each separate frame of your animation. The procedure is exactly the same for an image made in PSP itself, except that you do not have to export any frames, and will only have to sharpen the image once.
Saving and Optimising
OK, we now have our resized and sharpened animation, and so we are ready to save it: The first thing to do however, is to make a change to the canvas colour box. Go to Animation:Animation Properties: and check that the Canvas Color tab is open. The default is black, but it tends to leave an ugly black outline around your transparent gifs, so it is better if you alter it straightaway. Most pale shades will be suitable to use.
DON'T FORGET TO RECHECK TRANSPARENT BEFORE CLOSING!!
Click on your finished animation, go to the File menu and scroll down until you come to a group of wizards.
Click on Optimization Wizard.
Make sure you Create a new animation, rather than replacing the original, as this allows you to optimise several times at different settings before saving your final graphic. Check the boxes as shown above and click Next:
On the next screen, move the slider right down to the bottom:
This is where you can experiment with the image quality slider. Begin with the slider set at the bottom, and work through the wizard. If your final result looks good, great, just save your animation and away you go. But if it has fallen apart, move the slider up one level at a time, and go through the wizard again.
Click on Customize: The settings in the Colors box will change depending on where you have set the slider for image quality, so dont worry too much about those at this stage. On the Optimizations tab, put a check in the 2nd 3rd and 4th boxes. (Leave the first and last unchecked).
Use these settings for Partial Transparency:
You can use any pale colour in the "Yes, blend with this colour" box. You may wish to use white if you are likely to be using your graphics on pages with white backgrounds; and you can pick a dark colour too, if that is the colour of the background you will be putting the image on, (a forum or webpage for instance). We have now learned that the color in this box is generally more important than the one in the canvas color box, so do make sure this is changed to the colour you want! (If you use a dark colour and put your image on a light background, you will get a nasty black outline around your animation, which does rather spoil the effect). You can also experiment with the number in the convert pixels box, increasing it gradually, (up to 70 if necessary) if the finished result doesnt look that good, or you get a bit of "fuzz" around your image.. Trial and error is often the key phrase here!
Continue to the end of the Wizard until you get to this screen:
The arrow points to the number you should be looking for. If this is ok, then just click Finish, and then view your animation to check that it is ok before saving it.
If your image has fallen apart and lost it's quality, dont save that copy, (that is why we create a new animation rather than replacing the original!) go back to your original, and use the wizard again with the slider set one step up as in screenshot12. Keep going until you get to the very top if you have to. You can usually slice quite a few kbs off an image though, by lowering the slider without any noticable loss of quality, so it is worth experimenting with the different settings! If your image is still too large after optimising as hard as it will go, you will either have to reduce the size drastically, think of a different sort of animation using fewer frames, or another image effect.
More Information
For help on saving and optimising images in PSP, go to part 2 PSP Graphics .... An excellent set of tutorials on file saving, compression etc can also be found here and here. Well worth bookmarking for future reference!
©jewelswebgraphics.com 2001-2006