|
Optimise Animations To Blend With Backgrounds - Beginners
Animation Shop 3.1
Optimised for a web page with a black background
Optimised for a web page with a white/cream background
 
Click A Banner To Read More!
Click A Banner To Read More!
Click A Banner To Read More!
Click This Text Link To Read My PaintShop Pro X4 (& Ultimate’s) Workspace Tutorial
This tutorial demonstrates how to optimise animations so they seamlessly blend with the website, or e-mail, they are to be displayed on. This is important when animating irregular images that have transparent backgrounds; if they are not optimised correctly, their edges will appear ragged and unsightly. To demonstrate the point, I am utilising a completed animation from one of my tutorials.
Read About The 12 Basic Animation Principles Here
Note
A transparent background is indicated by Paint Shop Pro’s chessboard background.
1/
After you have opened, or copied and pasted your animation frames onto Animation Shop’s workspace - as explained here - it is time to optimise the animation so it blends with the background you will be displaying it over.
2/
From the top menu, choose File then choose Optimisation Wizard, and in the subsequent dialogue box, mark the following settings, then click Next.
3/
In the subsequent dialogue box, move the Better Image Quality slider to your preference - then activate the Customise tab.
Note
Positioning the slider three quarter of the way up, from the bottom - is usually adequate.
4/
In the subsequent dialogue box, click the following Colours tab, and in the Colours dialogue box, mark the following settings. (Do Not click ok).
5/
Then click the Optimisations tab - and in the Optimisations dialogue box, mark the following settings. (Do Not click ok).
6/
Activate the Partial Transparency tab, and set the following settings into its dialogue box, then click OK.
Note
I have optimised my animation to blend with a light, or White background, by left-clicking the following Yes, blend with this colour swatch. Clicking the swatch opens a Colour Picker dialogue box, and this is where you left-click to sample the colour that matches the background you will be displaying the animation on, the closest. You can only choose Solid Colours, therefore, if your background is not a solid colour, pick a colour that matches it as close as possible.
Colour Picker Dialogue
7/
After sampling your colour, click OK to close the Colour dialogue box, then click Next.
8/
Animation Shop will then optimise your animation - after the process is complete, click
Next.
9/
After viewing the following Original and Optimised preview windows, click Next.
10/
You will then be shown details regarding your animation; and you can now click Finish.
11/
Your animation has been optimised and is ready to utilise.
Final Points
Depending on the dominant colour of your website - or e-mail background, set the Yes, blend with this colour to that (solid) colour. For example, if your website - or e-mail background - is black, change the colour to solid black - equally, if it is yellow, you would change the colour to yellow.
If the colours are not similar, your animation will look unsightly against a different coloured background - as illustrated below.
|
Note
The Yes, blend with this colour setting surrounds (or strokes) your image with a thin coating of your chosen colour, helping it to blend seamlessly with e-mails and website backgrounds of the same - or a similar colour.
Final Summery
This type of optimisation is for irregular shaped images that have transparent backgrounds - such as triangles and circles - or for text with transparent backgrounds. If you have an image that is a rectangle/square - or text with a solid background, this optimisation process will not be necessary.
Tip
Experiment with all settings until you are familiar with the optimisation process.
Wendi E M Scarth Top of Page
|
