Halloween Face Morph - Getting Started
The leaves are turning orange and falling off the trees as I am writing this. It's almost time for Halloween! Time to decorate our webpages, blogs and emails with pumpkins, ghosts and goblins. I tried to think of a Halloween graphic that would be quick and easy to create and thought, "What could be more appropriate than a spooky-looking face coming at you from out of the dark!" Using Paint Shop Pro, I created a 'Happy Halloween' greeting and combined it with a pumpkin face GIF.
Took both images into Animation Shop and came up with the animated Halloween Face Morph shown above. It's quite easy to create and all you need is a spooky face image, Paint Shop Pro (any version), Animation Shop (v.3), and a little imagination.
The zip file below contains the 'Happy Halloween' text and spooky face used in the above animation. Download file, unzip and save to your hard drive.
halloweenface.zip
The images in the files are not transparent and are intended for a black background? after all, it's Halloween! We can't have ghosts and goblins without having a black background now, can we? Well, LOL, I guess we could? but not for this one. Feel free to edit the images yourself if you prefer a different background.
If you would like to change the greeting to 'Trick or Treat' or something other than 'Happy Halloween', continue to steps 2 and 3. Otherwise, you can jump to step 4.
Halloween Face Morph - Changing the Greeting (optional)
If you would like the greeting to say 'Trick or Treat' or something other than the 'Happy Halloween' provided, create another image the same size as the face image, with a black background, and using similar colors for the text. Pick your text colors from the spooky face image using the Eye Dropper tool. When colors are limited to only those colors already existing in the spooky face, it helps keep file size smaller.
The morph effect used in this animation adds lots of frames, which can result in a large file size! One of the things we can do to keep file size to a minimum is to use as few colors as possible.
Note: The larger the file size, the longer it will take your animation to load on your webpage (rendering time). Animation files have a tendency to get very large. Therefore, when creating animations, we must constantly pay attention to how every change effects file size. Size of canvas, number of frames, number of colors? many factors can affect the rendering time. Nobody wants to wait a long time for an animated GIF to load.
Save your new image as either a GIF file or a PSP 7 compatible file. See note about file formats in next step.
Halloween Face Morph - Compatible File Formats
IMPORTANT: The new .pspimage format used by Paint Shop Pro starting with version 8, is not recognized by Animation Shop v.3. Therefore, when saving an image that is to be opened in Animation Shop, users of PSP 8 or newer must change the File Type to a format that is PSP 7 compatible (the old .psp format).
If you are using PSP version 8 or 8.01, select the Options button in the Save As dialog, then select the radio button to 'save as PSP 7 compatible'.
If you are using version 8.10 or newer, including PSP X, Animation Shop has been added as a 'File Type'. The Save As dialog box will give you the option to change the File Type to PSP Animation Shop.
Halloween Face Morph - Image Transition
Launch Animation Shop and open the Halloween face image.
From the text menu, select Animation > Insert Frames > From File. Where it says 'Placement of new frame? Insert before' change number to 1. Change Delay time to 100. The radio buttons should be on 'Centered' and 'Canvas color'.
Click the Add file button. Browse to the folder where the image for your Halloween greeting is stored, select it, and click OK.
Now, let's morph the text into the face. Select Frame 1. Use the arrow tool to select frames.
From text menu, select Effects > Insert Image Transition.
In the Image Transition dialog box, check ' Animation Frame' in the left column (Start with) and in the right column (End with).
In the Effect box, select Morph. The Morph transition will blend the starting frame with the ending frame.
If the Show Preview box is not checked, check it to preview the effect without leaving the dialog box.
I played around with changing the controls for 'Transition Length' and 'Frames per Second' and ended up with a Transition Length of 1.6 and Frames per Second of 10 for a total of 16 transition frames. Change these controls by dragging sliders til they read 1.6 sec and 10 fps.*
* There's no hard and fast rule about what setting to use here. But the longer or more detailed the transition is, the more frames the final animation will have. I originally used a setting that created 38 frames. That was just too many. Sometimes you need to sacrifice some detail to keep file size down!
Halloween Face Morph - Morph Dialog
Please note that any customizing changes you make in the Effects dialog box may be remembered by Animation Shop and may not be OK for whatever transition is selected the next time you use Animation Shop. This means that each time you select an effect, you also have to select the transition length and frames per second appropriate for that effect.
Next we'll customize the morph effect. Click the Customize button that is below the list of effects.
Ahhh? now we have a complicated looking screen you may not have seen before if you haven't played with morphing very much. But don't fear, it's as simple as pumpkin pie!
The first thing you'll notice is that there are 3 different window panes: 1 large, 2 small.
The larger pane displays your choice of either the starting frame, the ending frame or a sample transition frame. To change which frame is displayed in larger pane, select one of the radio buttons below it (Start, Morphed or End). The remaining 2 views will be shown in the smaller panes.
Halloween Face Morph - Customize Morph Transition
By default, the Start button is selected. This places the Start frame in the large pane and a sample morph transition is shown in the lower right pane. This transition view looks like an overlay of the Start and End frames and is meant to give you an idea how the transition will be affected by the different controls (points, fade, warp). If Autoproof is checked, the transition pane will be updated whenever you adjust a control point.
If Autoproof is not marked, you must click the Render button to update this pane's contents.
The guidelines you see in the Start and End frames (the lines that look like window mullions or tic-tac-toe) represent the Control Points. By default, there are 2 horizontal and 2 vertical lines creating 16 Control Points wherever the lines cross each other or meet the edge of the pane. You can increase the number of Control Points by selecting the Increase Points button.
Adding more Control Points will give the animation a smoother transition, but will also create a larger file size and a longer rendering time. Because the image we're working on today is fairly simple, we'll stick with the default setting.
If you have more than 4 guidelines showing, click the Decrease Points button to go back to the default setting before continuing.
Hover your pointer any place where 2 of the guidelines intersect. A square dot will appear to indicate an active Control Point. When a Control Point is selected in one frame, the dot also appears in the other frame. This is to help visually match control points from one frame to the other.
Edit the Control Points by dragging a Point to a new location. Selecting the Reset button will return Points to default setting.
You can also select OK at any time to preview the morphing effect in action and then return to this dialog by clicking Customize again and continue moving Control Points.
Where exactly to place the control points will be up to you, but you can refer to the above image as a guide. The transition we're trying for today is to create the effect of the text twisting and blurring into a cloud shape that frames a central 'hole' where the face can appear from 'no where'.
For the Start frame (the text message), edit the Control Points to create a twist by moving all the points in outer row toward the nearest corner (clockwise). Refer to the above image to see how the outer row of guidelines are all angled toward a corner.
For the End frame (the face), edit the Control Points to frame the spooky face by moving the inner row of Control Points outwards a bit to frame the face.
Select OK to exit morph transition and OK again to exit image transition dialog.
Your filmstrip should now have 20 frames total.
Preview your animation using one of these methods:
Hmm... What would go good here? Not wanting to add too much more to the file size than we already have, let's see if we can create a short 2-frame transition before the greeting repeats.
Note: If your animation plays only once and doesn't repeat, select Animation> Animation Properties. Select the Looping tab and check the box to 'repeat animation indefinitely'.
To insert a new transition after the last frame, first select the last frame, then select Effects> Insert Image Effect from the text menu.
Select Spiral from drop down list of effects. Click Customize button to see how we can customize this effect. There's not much to customize here, but you can check 'fill unused pixels with' your black background color. Click OK.
Look to see how many frames this Spiral effect adds. Let's lower this number to 2. Move the Effect length slider to 03 secs and Frames per second to 7 fps. By making those changes we only add 2 frames to filmstrip yet spiraling effect still looks fine. I think this will work well with our spooky face!
Click OK.
Preview your animation again.
Adding the spiral effect gave us a short transition for smooth, continuous looping of the animation. We're ready to save now, except for 1 thing - the greeting goes by too fast!
Display Time
To change frame 1 so the text greeting displays a little longer: Select Frame 1 with the Arrow tool and then select Animation> Frame Properties (or right-click anywhere inside filmstrip for popup menu, choose Frame Properties).
Change Display Time to 400 and click OK. Preview the animation again. If 400 seems too slow or fast for you, repeat step and try another number.
While we're at it, let's briefly pause the spooky face before it morphs back into the greeting. Select frame #18 (the full face by itself), change Display time to 30 following the same steps as above.
Crop
The goal in optimizing is getting the smallest possible file size (for fast loading) without losing a lot quality. The first step is cropping canvas size to the smallest possible dimensions. Select Crop tool. When it's selected, 3 buttons appear above the tool: Options/Crop/Clear.
Drag the crop selection around image in one of the frames. Crop will display in every frame. Adjust each side of the crop rectangle as needed. Glance at each frame to make sure the entire contents of each frame is enclosed within the crop rectangle. The selection I started with in frame 1 was made larger after looking at subsequent frames. After it looks OK to you, click the Crop button and your image will be reduced to a smaller canvas size.
Now SAVE. Animation Shop will automatically present the Optimization Wizard, but first you'll get the SAVE AS dialog box asking for a file name. GIF is the default file format. Select the folder where you want to save your image, give the file a name and SAVE.
Next the Optimizer dialog box will pop up.
Move the slider on left to the top for 'better image quality'. Select the Customize button to customize the optimization settings.
Under the Color tab, select Optimized Octree or Median Cut, whichever you prefer. I chose Octree. Make your choice and zoom in to compare image quality.
Under the Optimization tab, make sure 'write minimal frames' is checked; this also helps reduce file size!
Select Next, Next, Next. The last dialog will show you an estimated rendering time. If it seems too long to you, the file size will need to be reduced. You can go back and lower the image quality or start over and make the whole image a lot smaller. If the file size is acceptable, click Finish and you're done!
Happy Fall y'all .......Kate
The leaves are turning orange and falling off the trees as I am writing this. It's almost time for Halloween! Time to decorate our webpages, blogs and emails with pumpkins, ghosts and goblins. I tried to think of a Halloween graphic that would be quick and easy to create and thought, "What could be more appropriate than a spooky-looking face coming at you from out of the dark!" Using Paint Shop Pro, I created a 'Happy Halloween' greeting and combined it with a pumpkin face GIF.
Took both images into Animation Shop and came up with the animated Halloween Face Morph shown above. It's quite easy to create and all you need is a spooky face image, Paint Shop Pro (any version), Animation Shop (v.3), and a little imagination.
The zip file below contains the 'Happy Halloween' text and spooky face used in the above animation. Download file, unzip and save to your hard drive.
halloweenface.zip
The images in the files are not transparent and are intended for a black background? after all, it's Halloween! We can't have ghosts and goblins without having a black background now, can we? Well, LOL, I guess we could? but not for this one. Feel free to edit the images yourself if you prefer a different background.
If you would like to change the greeting to 'Trick or Treat' or something other than 'Happy Halloween', continue to steps 2 and 3. Otherwise, you can jump to step 4.
Halloween Face Morph - Changing the Greeting (optional)
If you would like the greeting to say 'Trick or Treat' or something other than the 'Happy Halloween' provided, create another image the same size as the face image, with a black background, and using similar colors for the text. Pick your text colors from the spooky face image using the Eye Dropper tool. When colors are limited to only those colors already existing in the spooky face, it helps keep file size smaller.
The morph effect used in this animation adds lots of frames, which can result in a large file size! One of the things we can do to keep file size to a minimum is to use as few colors as possible.
Note: The larger the file size, the longer it will take your animation to load on your webpage (rendering time). Animation files have a tendency to get very large. Therefore, when creating animations, we must constantly pay attention to how every change effects file size. Size of canvas, number of frames, number of colors? many factors can affect the rendering time. Nobody wants to wait a long time for an animated GIF to load.
Save your new image as either a GIF file or a PSP 7 compatible file. See note about file formats in next step.
Halloween Face Morph - Compatible File Formats
IMPORTANT: The new .pspimage format used by Paint Shop Pro starting with version 8, is not recognized by Animation Shop v.3. Therefore, when saving an image that is to be opened in Animation Shop, users of PSP 8 or newer must change the File Type to a format that is PSP 7 compatible (the old .psp format).
If you are using PSP version 8 or 8.01, select the Options button in the Save As dialog, then select the radio button to 'save as PSP 7 compatible'.
If you are using version 8.10 or newer, including PSP X, Animation Shop has been added as a 'File Type'. The Save As dialog box will give you the option to change the File Type to PSP Animation Shop.
Halloween Face Morph - Image Transition
Launch Animation Shop and open the Halloween face image.
From the text menu, select Animation > Insert Frames > From File. Where it says 'Placement of new frame? Insert before' change number to 1. Change Delay time to 100. The radio buttons should be on 'Centered' and 'Canvas color'.
Click the Add file button. Browse to the folder where the image for your Halloween greeting is stored, select it, and click OK.
Now, let's morph the text into the face. Select Frame 1. Use the arrow tool to select frames.
From text menu, select Effects > Insert Image Transition.
In the Image Transition dialog box, check ' Animation Frame' in the left column (Start with) and in the right column (End with).
In the Effect box, select Morph. The Morph transition will blend the starting frame with the ending frame.
If the Show Preview box is not checked, check it to preview the effect without leaving the dialog box.
I played around with changing the controls for 'Transition Length' and 'Frames per Second' and ended up with a Transition Length of 1.6 and Frames per Second of 10 for a total of 16 transition frames. Change these controls by dragging sliders til they read 1.6 sec and 10 fps.*
* There's no hard and fast rule about what setting to use here. But the longer or more detailed the transition is, the more frames the final animation will have. I originally used a setting that created 38 frames. That was just too many. Sometimes you need to sacrifice some detail to keep file size down!
Halloween Face Morph - Morph Dialog
Please note that any customizing changes you make in the Effects dialog box may be remembered by Animation Shop and may not be OK for whatever transition is selected the next time you use Animation Shop. This means that each time you select an effect, you also have to select the transition length and frames per second appropriate for that effect.
Next we'll customize the morph effect. Click the Customize button that is below the list of effects.
Ahhh? now we have a complicated looking screen you may not have seen before if you haven't played with morphing very much. But don't fear, it's as simple as pumpkin pie!
The first thing you'll notice is that there are 3 different window panes: 1 large, 2 small.
The larger pane displays your choice of either the starting frame, the ending frame or a sample transition frame. To change which frame is displayed in larger pane, select one of the radio buttons below it (Start, Morphed or End). The remaining 2 views will be shown in the smaller panes.
- If you have the Start button selected, the large pane will display the Start frame and the upper right pane will display the End frame.
- If you have the End button selected, the large pane will display the End frame and the upper right pane will display the Start frame.
- If you have Morphed selected, the large pane will display the transition and the smaller panes will display the Start and End frames.
Halloween Face Morph - Customize Morph Transition
By default, the Start button is selected. This places the Start frame in the large pane and a sample morph transition is shown in the lower right pane. This transition view looks like an overlay of the Start and End frames and is meant to give you an idea how the transition will be affected by the different controls (points, fade, warp). If Autoproof is checked, the transition pane will be updated whenever you adjust a control point.
If Autoproof is not marked, you must click the Render button to update this pane's contents.
The guidelines you see in the Start and End frames (the lines that look like window mullions or tic-tac-toe) represent the Control Points. By default, there are 2 horizontal and 2 vertical lines creating 16 Control Points wherever the lines cross each other or meet the edge of the pane. You can increase the number of Control Points by selecting the Increase Points button.
Adding more Control Points will give the animation a smoother transition, but will also create a larger file size and a longer rendering time. Because the image we're working on today is fairly simple, we'll stick with the default setting.
If you have more than 4 guidelines showing, click the Decrease Points button to go back to the default setting before continuing.
Hover your pointer any place where 2 of the guidelines intersect. A square dot will appear to indicate an active Control Point. When a Control Point is selected in one frame, the dot also appears in the other frame. This is to help visually match control points from one frame to the other.
Edit the Control Points by dragging a Point to a new location. Selecting the Reset button will return Points to default setting.
You can also select OK at any time to preview the morphing effect in action and then return to this dialog by clicking Customize again and continue moving Control Points.
Where exactly to place the control points will be up to you, but you can refer to the above image as a guide. The transition we're trying for today is to create the effect of the text twisting and blurring into a cloud shape that frames a central 'hole' where the face can appear from 'no where'.
For the Start frame (the text message), edit the Control Points to create a twist by moving all the points in outer row toward the nearest corner (clockwise). Refer to the above image to see how the outer row of guidelines are all angled toward a corner.
For the End frame (the face), edit the Control Points to frame the spooky face by moving the inner row of Control Points outwards a bit to frame the face.
Select OK to exit morph transition and OK again to exit image transition dialog.
Your filmstrip should now have 20 frames total.
Preview your animation using one of these methods:
- select filmstrip icon on the toolbar, or
- right click anywhere inside the filmstrip and select View Animation from popup menu, or
- select View> Animation from text menu, or
- select View> Preview in Web Browser from text menu.
Hmm... What would go good here? Not wanting to add too much more to the file size than we already have, let's see if we can create a short 2-frame transition before the greeting repeats.
Note: If your animation plays only once and doesn't repeat, select Animation> Animation Properties. Select the Looping tab and check the box to 'repeat animation indefinitely'.
To insert a new transition after the last frame, first select the last frame, then select Effects> Insert Image Effect from the text menu.
Select Spiral from drop down list of effects. Click Customize button to see how we can customize this effect. There's not much to customize here, but you can check 'fill unused pixels with' your black background color. Click OK.
Look to see how many frames this Spiral effect adds. Let's lower this number to 2. Move the Effect length slider to 03 secs and Frames per second to 7 fps. By making those changes we only add 2 frames to filmstrip yet spiraling effect still looks fine. I think this will work well with our spooky face!
Click OK.
Preview your animation again.
Adding the spiral effect gave us a short transition for smooth, continuous looping of the animation. We're ready to save now, except for 1 thing - the greeting goes by too fast!
Display Time
To change frame 1 so the text greeting displays a little longer: Select Frame 1 with the Arrow tool and then select Animation> Frame Properties (or right-click anywhere inside filmstrip for popup menu, choose Frame Properties).
Change Display Time to 400 and click OK. Preview the animation again. If 400 seems too slow or fast for you, repeat step and try another number.
While we're at it, let's briefly pause the spooky face before it morphs back into the greeting. Select frame #18 (the full face by itself), change Display time to 30 following the same steps as above.
Crop
The goal in optimizing is getting the smallest possible file size (for fast loading) without losing a lot quality. The first step is cropping canvas size to the smallest possible dimensions. Select Crop tool. When it's selected, 3 buttons appear above the tool: Options/Crop/Clear.
Drag the crop selection around image in one of the frames. Crop will display in every frame. Adjust each side of the crop rectangle as needed. Glance at each frame to make sure the entire contents of each frame is enclosed within the crop rectangle. The selection I started with in frame 1 was made larger after looking at subsequent frames. After it looks OK to you, click the Crop button and your image will be reduced to a smaller canvas size.
Now SAVE. Animation Shop will automatically present the Optimization Wizard, but first you'll get the SAVE AS dialog box asking for a file name. GIF is the default file format. Select the folder where you want to save your image, give the file a name and SAVE.
Next the Optimizer dialog box will pop up.
Move the slider on left to the top for 'better image quality'. Select the Customize button to customize the optimization settings.
Under the Color tab, select Optimized Octree or Median Cut, whichever you prefer. I chose Octree. Make your choice and zoom in to compare image quality.
Under the Optimization tab, make sure 'write minimal frames' is checked; this also helps reduce file size!
Select Next, Next, Next. The last dialog will show you an estimated rendering time. If it seems too long to you, the file size will need to be reduced. You can go back and lower the image quality or start over and make the whole image a lot smaller. If the file size is acceptable, click Finish and you're done!
Happy Fall y'all .......Kate