Lampwork Etc.

Lampwork Etc. (
-   The Dark Room (
-   -   Creating an Animated Gif Avatar Using Adobe Image Ready (

SuzFromOz 2006-02-25 9:18pm

Creating an Animated Gif Avatar Using Adobe Image Ready
Creating an Animated Gif Avatar Using Adobe Image Ready

Note: I have created this tutorial using Adobe Photoshop CS2. I believe the same tools are available in CS and 7, although the commands may be located in slightly different locations.

Step 1:

Open your selected images in Adobe Photoshop. Try and select images that will fit roughly into a square.

Step 2:

Make all your images the same size, and a square.
How complicated this step is depends on your original images.
You may be able to crop the image to a square shape or you may need to make a new file that is a square.

• Select all
• Edit-Copy
• File- New
• Make the new file a square the same size as one
side of your original image
• Edit- Paste
• Now you may need to fill the edges with copies of your background, using the clone tool and/or the healing brush (but that is another tutorial! :D )

Step 3:

Make all your images the same size. They should now all be squares, so just change the size until they match. For quality, you should always make an image smaller, never larger, so pick a size smaller than all of the images.
• Image- Image Size
• Change measurement to your new size (e.g. 12cm)

Step 4: Merge into one image.

• Create a new file, make it the same size you just made all the others (eg 12cm x 12cm)
• One by one, with each image, Select- Select All, then use the move tool (top right of tool bar) to drag the image onto the new file. Each image will automatically be put on a new layer.

So, you should end up with a file that has as many layers as you have images, plus the background. You can now close all the originals images, as we no longer need them.

Step 5:

Prepare to edit in Image Ready.

Go to File- Edit in Image Ready. If you have a different version, there may be a button at the bottom of the toolbar to do this.

Your screen will now look something like this:

Step 6:

If you do not have the animation window open, go to Window, and select ‘Animation’. We are now going to make each layer of the photoshop image a slide in your animation.
• Click on the eye symbol next to each layer EXCEPT the one you want to make the first slide. This will make each layer invisible.
• Click the ‘duplicates Current Frame’ button in the animation window (see below )

• You will see a second animation frame appear. Now turn off the ‘eye’ on that layer, and click the eye on the next layer. Click the new frame button again. Do this repeatedly until you have one frame of each image.

Step 7:

Select each animation frame (just ctrl click on each frame) and change the time (under the image) to the length of time you want. The default is 0 sec, so you need to slow it down.

Click the play symbol in the animation window to preview your gif. Adjust time until you are happy with the interval (remember to select all images when you change the time).

Step 8:

Now we have to resize the gif so it fits on LE. The limit for an avatar is 80x80 pixels or 19.5 kb, whichever is smaller.

Go to Image Size, and make the image 80x80 pixels.

Step 9:

Go to File- Save Optimised As, and save your gif. Then see how big the file is. If it is still over 19.5 kb (this will depend how many layers you have and how large the image is), make your image smaller, and re-save.

AZ Joolz 2006-02-27 8:32am

Wow have really simplified this so it is easy to understand! Thanks for taking the time to do we'll see lots of animation before too long.

shawnette 2006-02-27 11:16pm

Thank you Suz! You're so AWESOME!!!! I knew there was a reason I love you so much! :D :kiss:

SuzFromOz 2006-03-05 3:11am

Thanks Lisa and Nette - happy to help!

Vicki B. 2006-03-05 10:55am

Thanks Suz!!! I maintain a site for our son and have always wondered how these were created - the tutorial will kickstart me!

Rose Leslie 2006-03-05 9:43pm

You are amazing. I would never have done it with an email at all. So now I can try with this help. Thank you for the Avatar and all that goes with it in this tut.

Vicki B. 2006-03-06 10:17am

Hi again,
I used your terrific tutorial fooling with some flower photos yesterday and everything worked beautifully except it's hard to get small enough .jpegs and use, say 6 of them and still be under 20kb. I don't think I'm missing some other trick, but it looks like the final file size is the added sizes of the .jpegs used plus a little. Has that been everyone's experience? The length of time for each did not seem to be a factor.

SuzFromOz 2006-03-10 8:26am

I found to get mine to fit here on LE, I had to make the individual photos about 2.5cm, really small. But the avatar is so small to view, it doesnt seem to effect the quality too much. And make sure you use the 'save optimised' feature for the smallest file. The '4' is the smallest file size, but also lowest quality.

hummingbird3172 2006-03-16 11:27am

LOL, I swear to God I was just thinking about this last night, and wondering how it was done! Thank you!!!!

dogsrlove 2006-03-22 8:24pm

Your good karma rating just went up! Thank you! You've made it look like even I can do it!


flamemoth 2006-03-23 3:40pm

Too fun :D..I wondered how you all did that! Thanks for going to the trouble Suz.

SuzFromOz 2006-03-25 3:07am

you are welcome!! deborah, your avatar looks great - well done!

All times are GMT -7. The time now is 8:43am.

Powered by vBulletin® Version 3.7.5
Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.