Egghead's Animated Sig Tutorial

[egghead]

Hi everyone!

Welcome to Egghead's Animated sig Tutorial.

I will give you an idea on how I make animated sigs using gif animator. To start we need to think of what we want. Since halloween is fun we are going to use halloween as the theme.

So.... first thing we need to do is to find art or pictures.

Open up google (http://www.google.com) and at the top you will see images tab.
http://img384.imageshack.us/img384/3552/google8sy.th.jpg (http://img384.imageshack.us/my.php?image=google8sy.jpg)


Select that and type in "spooky". Now you will see lots of cool picture possibillities.

Heres a good one
http://images.google.ca/images?q=spooky&svnum=10&hl=en&lr=&start=20&sa=N

click on mask spooky melted flesh.jpg and you will find a webpage with many cool graphics
http://images.google.ca/imgres?imgurl=http://www.magicnevin.com/mask%2520spooky%2520melted%2520flesh.jpg&imgrefurl=http://www.magicnevin.com/graphics.htm&h=621&w=443&sz=294&tbnid=41P9LcssQPgJ:&tbnh=134&tbnw=95&hl=en&start=21&prev=/images%3Fq%3Dspooky%26start%3D20%26svnum%3D10%26hl%3Den%26lr%3D%26sa%3DN

I have decided that this website has so many that are good that i want to use them for our sig.

Here are the animations I will be using.

http://www.magicnevin.com/gostghoul.gif
http://www.magicnevin.com/gostghoul.gif

http://www.magicnevin.com/phacon.gif

http://www.magicnevin.com/phacon.gif

I love those :D

Now we also need a scene or scenery so back to google....

searching google for spooky (http://images.google.ca/images?hl=en&q=spooky&btnG=Google+Search&sa=N&tab=wi) i found coats-big-spooky.jpg

http://www.paisley.org.uk/images/coats-big-spooky.jpg

http://www.paisley.org.uk/images/coats-big-spooky.jpg

Located here,
http://images.google.ca/imgres?imgurl=http://www.paisley.org.uk/images/coats-big-spooky.jpg&imgrefurl=http://www.paisley.org.uk/special/index.php&h=292&w=440&sz=124&tbnid=6XW1z60UVFsJ:&tbnh=81&tbnw=123&hl=en&start=15&prev=/images%3Fq%3Dspooky%26svnum%3D10%26hl%3Den%26lr%3D%26sa%3DN

Now we have the elements we need.

Next up is to get Uleads Gif Animator
http://www.ulead.com/ga/runme.htm

The Power to Animate

Ulead® GIF Animator™ 5 is the industry's most robust and affordable tool to create animated GIFs. Easily create fast-loading animation for your Web site and PowerPoint presentations.
GIF Animator is perfect for:

* Microsoft® PowerPoint®: Add cool animation
* Macromedia® Flash™: Use in raster-based Flash projects
* Image Editors: Great integration with Ulead PhotoImpact®, Adobe Photoshop® and Jasc Paint Shop Pro™


Downoad the free trial
Ulead GIF Animator 5.0 (English Version) 10.3MB
http://www.ulead.com/ga/trial.htm

You will need to create an account to download and it is painless and your email address is not confirmed. Free trial works fully for 15 days.

(in progress brb)

[egghead]

The first step is to save the pics to the hard drive.

Right click on the picture and select "save as" and create a new directory to save the files:

http://img467.imageshack.us/img467/1278/01saveimagefromtheweb4sb.th.jpg (http://img467.imageshack.us/my.php?image=01saveimagefromtheweb4sb.jpg)
http://imageshack.us/?x=my6&myref=http://www.techzonez.com/forums/newreply.php

Now open gif animator from the start menu or the desktop shortcut.

Here is the main screen.

http://img417.imageshack.us/img417/3604/02theanimationwindow8av.th.jpg (http://img417.imageshack.us/my.php?image=02theanimationwindow8av.jpg)
http://imageshack.us/?x=my6&myref=http://www.techzonez.com/forums/newreply.php

Techzonez has a file size limit of 100x420 and 80kb.

We want to work with a canvas size as requested so in the menu select edit/canvas size

http://img479.imageshack.us/img479/5978/02resize3pp.jpg
http://img479.imageshack.us/img479/5978/02resize3pp.jpg

Uncheck the "keep aspect ratio" and input the dimensions 420width and 100hieght

We are all set with our canvas now!

There are 3 area we will be working with.

Tool panel
http://img478.imageshack.us/img478/3198/toolpanel8ug.jpg
http://img478.imageshack.us/img478/3198/toolpanel8ug.jpg

Object manager
http://img457.imageshack.us/img457/338/objectmanager3cu.th.jpg[/URL]
http://img457.imageshack.us/img457/338/objectmanager3cu.th.jpg

Frame panel
http://img457.imageshack.us/img457/541/framemanel2re.jpg[/URL]
http://img457.imageshack.us/img457/541/framemanel2re.jpg

Next step adding the images...................................

[egghead]

Adding the images:

From the top menu select file/add image.
http://img456.imageshack.us/img456/5915/addimage0dn.th.jpg (http://img456.imageshack.us/my.php?image=addimage0dn.jpg)
http://imageshack.us/?x=my6&myref=http://www.techzonez.com/forums/newreply.php

Choose gostghoul.gif

http://img481.imageshack.us/img481/5600/03addtheimage1bn.th.jpg (http://img481.imageshack.us/my.php?image=03addtheimage1bn.jpg)
http://imageshack.us/?x=my6&myref=http://www.techzonez.com/forums/newreply.php

*Note the four frames at the bottom These are the animation frames.


Now we can add the second animation file.

Make sure that you highlight the first frame by clicking on it before you add the second picture.
.
http://img481.imageshack.us/img481/5935/04choosefirstframe5fx.jpg
http://img481.imageshack.us/img481/5935/04choosefirstframe5fx.jpg


Now from the top menu select file/add the second image. Select phacon.gif

http://img481.imageshack.us/img481/516/05addthesecondpic4lv.th.jpg (http://img481.imageshack.us/my.php?image=05addthesecondpic4lv.jpg)
http://img481.imageshack.us/img481/516/05addthesecondpic4lv.jpg


You have now added the animated frames into gif animator. Great work!


You will notice that the images are bunched together. Hmm... We will need to fix this. This is part of creating your scene.

http://img464.imageshack.us/img464/3264/05addthesecondpic6fq.th.jpg (http://img464.imageshack.us/my.php?image=05addthesecondpic6fq.jpg)
http://imageshack.us/?x=my6&myref=http://www.techzonez.com/forums/newreply.php

We will now seperate them and place them to our liking. Click on frame one and select the phacon.gif monster. With the left button held you must drag the monster to the other side of the canvas.

http://img464.imageshack.us/img464/195/06dragtheimage7fo.jpg
http://img464.imageshack.us/img464/195/06dragtheimage7fo.jpg


Feel free to place the other monster how you like.

Now at the bottom choose the second frame.

http://img464.imageshack.us/img464/831/selectsecondframe5qj.jpg
http://img464.imageshack.us/img464/831/selectsecondframe5qj.jpg

Do the same with the rest of the frames.

Save your work!!!!!!!!!!!!!!!!!

---------------------------------------------------------------------

You have just created a simple animation.

it should look like this

http://img464.imageshack.us/img464/2259/1stanimate9wf.gif
http://img464.imageshack.us/img464/2259/1stanimate9wf.gif


To view your creation at the top of your picture you will see 3 small menu's. Select "preview"to view what you have just done.

http://img464.imageshack.us/img464/9010/preview6yf.jpg
http://img464.imageshack.us/img464/9010/preview6yf.jpg


Next we will be adding the background.

[egghead]

Now let's add the background picture the animation.

Highlight frame one again and open the coats-big-spooky.jpg
http://img421.imageshack.us/img421/4128/addbackground7rz.th.jpg (http://img421.imageshack.us/my.php?image=addbackground7rz.jpg)


It will be placed in the frame however we see that it has now covered over the animations :(

http://img469.imageshack.us/img469/3591/backgroundcovered0yk.th.jpg (http://img469.imageshack.us/my.php?image=backgroundcovered0yk.jpg)

No worries here.

Go to the Object manager window and you will see the image at the top. Drag the image section to the bottom of the stack.

http://img488.imageshack.us/img488/420/drag1lk.th.jpg (http://img488.imageshack.us/my.php?image=drag1lk.jpg)

Now everything above the object stack will be visible.

With the image highlighted in the object window you can now adjust the background picture to suite your needs. Simply hold the left mouse and drag the image as needed.

http://img473.imageshack.us/img473/7398/dragbackground2md.th.jpg (http://img473.imageshack.us/my.php?image=dragbackground2md.jpg)

Now select frame 2. Notice that there is no background image? Go back the object manager and select the background click the "show/hide object" button.

http://img488.imageshack.us/img488/5478/selecteye2gt.th.jpg (http://img488.imageshack.us/my.php?image=selecteye2gt.jpg)

Do this for all the frames and adjust as neccessary.

You did it!

Save your work!

Now we are going to add a blank frame so you get the idea of how easy it is to do this.

Right click on the frame panel and select "add frame".

http://img476.imageshack.us/img476/3428/addframe6vi.th.jpg (http://img476.imageshack.us/my.php?image=addframe6vi.jpg)

Now head over to the objects menu and "show" the ones you want to use and adjust as neccessary.

That's it!

Save your work!

You have just created an animation sig with a background.

Now you may have noticed that when you preview the sig it is very fast. To set the speed of a frame you simply right click on each frame and select "frame properties".

http://img476.imageshack.us/img476/9238/frameproperties5qr.th.jpg (http://img476.imageshack.us/my.php?image=frameproperties5qr.jpg)

In the delay attributes colun input your desired interval. zero no delay and 60+ waits longer to see the next frame (you get the idea?)

http://img476.imageshack.us/img476/7995/framepropertieswindow0ft.jpg
http://img476.imageshack.us/img476/7995/framepropertieswindow0ft.jpg

Save your work and select preview. It should look like this,

http://img476.imageshack.us/img476/7738/tutorial27od.gif
http://img476.imageshack.us/img476/7738/tutorial27od.gif

Next we add text and we will save optimize and save it for the web

[egghead]

Now lets add text.

http://img477.imageshack.us/img477/7241/typingtool9ag.jpg
http://img477.imageshack.us/img477/7241/typingtool9ag.jpg

Select the text tool and left click on the picture where you want to place text.

http://img477.imageshack.us/img477/1944/01textbox9qm.th.jpg (http://img477.imageshack.us/my.php?image=01textbox9qm.jpg)

In the text box choose your color, font and size and type in your text. Your text will now be in the picture. In all the frames you will need to select the "show" button to show your text for each frame.

save your work!

Now we can preview what we've done and decide if we like it.

We like it so lets save it and optimize it.

Select the optimize tab and we will now save the work.

http://img475.imageshack.us/img475/4553/04optimize9ei.jpg

Press the save as button to save without compression.

http://img461.imageshack.us/img461/1547/saveas4lm.th.jpg (http://img461.imageshack.us/my.php?image=saveas4lm.jpg)

We are now going to compress the file to work at techzonez.

Select the comress by size button.

http://img461.imageshack.us/img461/3496/compressbysize1jv.th.jpg (http://img461.imageshack.us/my.php?image=compressbysize1jv.jpg)

In the box type 79 and press ok/

http://img461.imageshack.us/img461/7933/compressbysizedialoge0bc.th.jpg (http://img461.imageshack.us/my.php?image=compressbysizedialoge0bc.jpg)

You will see a preview of your compressed image.
*Note - you can increase and decrease the quality before saving if neccessary.

Here are the before and after pictures.

Uncompressed, 122k
http://img461.imageshack.us/img461/636/tutorial3uncompressed8wd.gif
http://img461.imageshack.us/img461/636/tutorial3uncompressed8wd.gif

Compressed, 80k
http://img399.imageshack.us/img399/3988/tutorial3compressed2da.gif
http://img399.imageshack.us/img399/3988/tutorial3compressed2da.gif

There you go! hope this gives you an idea how to do this kinda stuff. It really is a lot of fun and I hope that it helps you. Let mer know if you like it and please lets see your work :)

If you want to display your pictures you can use imageshack to host your pictures and display them here using image tags


www.imageshack.us

Good luck :D
Egghead

[egghead]

Egghead's has created an easy to follow shockwave flash demo!

You can view the easy to follow 6 minute demonstration of the above tutorial here (http://www.angelfire.com/blues2/egghead/),

Have fun with it!

Egghead

[jan]

Nice one egghead. :thumbsup: :)

[lankan_man]

Seriously, I find it easier to make this animation with Flash MX, then exporting it as a .gif

But you explained it well, good job!

[egghead]

Seriously, I find it easier to make this animation with Flash MX, then exporting it as a .gif

But you explained it well, good job!

I should get into flash

can you post a simple tutorial so I can give it a shot?

I'm curious to see how it's done

flash is great!

[lankan_man]

it is! I'll make a new thread out of it :)

http://www.techzonez.com/forums/showthread.php?p=107720#post107720