Site hosted by Angelfire.com: Build your free website today!

Animated Names


This tutorial is done using Ulead PhotoImpact 10. You can achieve this using other photo programs but your tools may look differently or be in a different location.

Here are a couple links to get PhotoImpact should you wish to try it:
Here is Uleads PhotoImpact page--> http://www.ulead.com/pi/
This one is for PhotoImpact 12, I use 10, but 12 is similar--> http://ulead-photoimpact.en.softonic.com/

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.

ADDITIONAL FILES YOU WILL NEED
Click link to download files

This one is for ULEAD PHOTOIMPACT (.ufo file) pens.zip
This one is for PhotoShop (.psd) pens2.zip



Let's Get Started!


SETTING UP THE BASICS
Download the Writing Tools file and unzip. Open the pens.ufo file in PhotoImpact. You will find feathers,ink bottles, pens, crayons, pencils, paint palettes, etc. 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 you like and type your name in the text window. The size and color is up to you. This tutorial uses Brush Script MT, Size 50.

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


3. To determine the height, 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 the 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\Base Image. 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. You will be using the eraser tool later and only graphics in image format can be erased. Save this image as a .psd file and call it last-frame.psd but do not close it.

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 1.psd 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 Eraser tool

8. Erase any portion of your name that is on the RIGHT side of your writing tool. Save as 2.psd. 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 seven 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.

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.

You can use the animation wizard and add each frame and adjust speed later but I will show you the way I prefer to do it.

1. Open Ulead's Gif Animator 5.
2. Click the open button or go to file-->open.
3. Find your first frame of your name and click open.
4. Next add as many frames as you made images for. You can either add them all now and then insert images, or add and then insert one image, add, insert image, etc. I find its faster to just click add frame till I have all my frames and then just insert on each one. Your screen will look like this:

5. Click your next frame and either click the insert button or simply press the Insert key on your keyboard (usually located directly to the right of your backspace key). I prefer to just click the insert key.
6. Repeat step 5 until all frames are filled.
7. Setting the timing- On the first frame right click and select properties set the DELAY to 75, and REMOVAL METHOD to "To background"
8. On frames 2 till the next to last frame set the delay to 25 and removal form to "to background". On the last frame do the same as the first frame.
9. 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. I personally find that selecting Line Art 256 or "Current compression settings" (option above line art 256) will keep it looking nice while reducing the white the halo that can surround the writing tool.

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!

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 .psd 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.


Email
Home