Software: Ulead PhotoImpact 12
Author: MaryLou White
Home Page: Wishing Well Tutorials

Title: Animated Signature
Skill Level: Beginner

Additional Files:
Download Writing Tools

Description: This tutorial will teach you how to create an animated signature with a transparent background. It's not nearly as difficult as it may look. Follow each step carefully and you'll be amazed at the results. These types of images work nicely on a web page and in stationary as sig files.

WORK MODE
PhotoImpact 12 has several preset work modes. For this tutorial, we will be using the Full Edit mode so all of the tools in PhotoImpact will be available to you.

As you work, use your mouse to drag this along with with you to mark your place.

LET'S GET STARTED

Download the Writing Tools file and unzip. Open the pens.ufo file in PhotoImpact. You will find feathers and inkwell, pens and inkwell, a fountain pen, ballpoints, crayons, pencils and paint palettes. All objects are in .ufo format. Some are grouped so you can ungroup and change colors if you wish (not covered in this tutorial). Select the instrument of your choice and drag it to the workspace. Feel free to resize or set a different angle for the tool. Close the writing tools.

SETTING THE IMAGE SIZE

  1. Open a new image 400x300. Click on the Text tool, select a font, color, and size from the text tool attributes. This tutorial uses Brush Script MT, Size 50.

    Type your name in the center of new image window.

  2. Place your writing tool at the right side of your name. This will set the necessary width. Here are some samples to use as a guideline:

  3. To determine the height needed for your animation, Right-click and duplicate your writing tool. Move the duplicate to the highest point in your name (see below).

    Use the Crop Tool and crop your image as shown above. Delete the duplicate writing instrument.

MAKING THE FRAMES

Animation is created from a series of images called frames. These frames are used in Ulead's Gif Animator to create your final image. The more frames you make, the larger your animation file will be. The number of frames depends on the length of the name. Before you start, you might want to make a folder to store the images so you can find them easily when you start the animation process.
  1. On the tool bar menu, click View and make sure Show Base Image is unchecked. This will make your background transparent. It should look similar to this:

  2. Click on the text (your name) to select it. Right-click and select Convert Object Type - From Text/Path to Image. Your image must be in this format to use it with the Object Paint Eraser Tool. Save this image as a .ufo file and call it last-frame.ufo but do not close.

  3. Press CTRL-D to duplicate the last frame. On the duplicate, delete your name so only the writing tool remains. Save this image as first-frame.ufo and close the file.

    From this point on, all of the remaining frames will be created in the same manner.

  4. Using the Pick tool, Click on the writing tool to select it.
  5. Move your writing tool to the last letter in your name.
  6. Press the Space bar to deselect the writing tool.
  7. Click on the Object Paint Eraser tool.

  8. Erase any portion of your name that is on the RIGHT side of your writing tool. Save as frame-1.ufo.
  9. Click on the writing tool and move it to the left to another part of the name and erase all text on the right. To give your animation a fluid look, position the writing tool on the top of the letter in one frame and on the bottom in another. Repeat from step eight until all of the letters have been erased. Save each frame with the next sequential number. Study the examples below:

    This name has 12 frames total. The illustrations show you the first few and the last two only. The more frames you have, the smoother your animation will be.

    Look on the top of your last frame where it will show you the image size. Write this down as you will need it in the next step.

THE ANIMATION

Now comes the fun part. You get to see the efforts of all your hard work. Animation is easy but be sure to follow each step carefully. To access the Gif Animator program, click on Window on the menu bar. The last option is "Switch". Clicking the Switch which will pop out a window showing the animation program.

Note: If the Switch is not available in your version, use your Windows Start button to bring up all programs and find the Ulead Gif Animator.

  1. Open Ulead's Gif Animator 5. On the menu, select the Animation Wizard.

  2. The next screen will ask you for the image size. Type in the width and height. Click the Next button.

  3. Click the ADD IMAGE button and navigate to the folder where you saved your frames.

  4. Click on first-frame.ufo then click OPEN. Repeat for each frame. Add your frames starting with the HIGHEST numbers FIRST going down to the lowest number. Add last-frame.ufo as your final frame. The frames need to be added in reverse sequence so the last one saved (the beginning of the name) will be the first one seen in the animation. If you make a mistake and get them out of sequence, just drag the name where it belongs in the Wizard window.

    When all of the frames have been selected, click the Next button.

  5. On the next screen, leave the delay at 25. - click Next - click Finish. All of your frames will be loaded in the Frames area on the bottom of the animator screen. Note that your images still have their transparent background.

    Just for fun, click on the bottom of each frame, starting with the first one and watch what happens in the preview box above. You can see your name being "written" as you click.

ADJUSTING THE SPEED

The speed of an animation can make a big difference in how it displays. You will want some frames to display longer than others. This is where we will fine-tune the animation.

  1. Right-click on the first frame. On the pop-up menu, select Frame Properties (the last item on the list). Change the Delay to 150. Repeat for the last frame.

  2. Click on the Preview tab on the top of the display area and watch your animation in action. Click on the Edit tab when you're through admiring your work. To make more adjustments to the speed, switch back and forth between Preview and Edit until you have the animation exactly the way you want it.

SAVING YOUR ANIMATION

  1. Click on the Optimize tab at the top of the screen. You will see two views of your image. Look on the right side just above the image. It will tell you the compressed size in bytes. This is the file size. You can decrease this by doing some compression.

  2. Click on the Preset tab on the upper left corner. On the drop-down menu, select Line Art 32. Check the file size. It should be much smaller now. Preview your animation to make sure it still looks okay. Try a lower compression, Line Art 16. Again, test by using the Preview button. Work with your image until you get a good quality with a small file size.

  3. When you are happy with your image, Click File\Save As\GIF file and give your animation a name. It will automatically save with a transparent background.
    That's it - enjoy!

TIPS FOR INTERESTING ANIMATIONS

  1. When using a writing tool like a pen or even pencil, start out with it laying down like it's laying on a table by rotating it to the right. Then in next frame, stand it up to your writing angle.

  2. If using the painter palette, you can change the colors of the paints. They are objects that can be painted over. Make one the same color as your name. Move the brush to that color before you start (see the sample one on top of page). To make it even more realistic, color the tip of the brush with your color. Add a paint drop at the beginning of the name.

  3. Here's one more neat trick. You can reload your name in the animator program, delete whatever writing tool you used in each frame, then replace it with a new one by using the Add Image button at the top of the animator page. This way you don't have to re-do the name part each time!

  4. Since the frames were saved as .ufo files and the contents of each frame are objects, you can move them around in each frame if you want to reposition your writing tool. You can also re-load your animation at a later date if you want to make more adjustments to the frame speed.


You're invited to join the PIRC Fourm! This is an active PhotoImpact Forum where you'll find a wonderful group of warm, friendly, talented, and knowledgeable people who are ready and willing to share their expertise with you. There are creative activities for all levels of PhotoImpact users. This forum is 100% free and everyone is welcome.

Copyright© MaryLou White.
This document may not be translated, duplicated, redistributed or otherwise appropriated without permission.