Results 1 to 10 of 10

Thread: Egghead's Animated Sig Tutorial

  1. #1
    Precision Processor Super Moderator egghead's Avatar
    Join Date
    May 2002
    Location
    In Your Monitor
    Posts
    3,212

    Egghead's Animated Sig Tutorial

    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 and at the top you will see images tab.



    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=spo...&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?imgur...lr%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/phacon.gif

    I love those

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

    searching google for spooky i found
    coats-big-spooky.jpg



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

    Located here,
    http://images.google.ca/imgres?imgur...lr%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)
    Last edited by egghead; October 28th, 2005 at 07:15 AM.
    ------------------------------------------------------------



  2. #2
    Precision Processor Super Moderator egghead's Avatar
    Join Date
    May 2002
    Location
    In Your Monitor
    Posts
    3,212
    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://imageshack.us/?x=my6&myref=ht...s/newreply.php

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

    Here is the main screen.


    http://imageshack.us/?x=my6&myref=ht...s/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

    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/3...olpanel8ug.jpg

    Object manager
    [/URL]
    http://img457.imageshack.us/img457/3...ager3cu.th.jpg

    Frame panel
    [/URL]
    http://img457.imageshack.us/img457/5...memanel2re.jpg

    Next step adding the images...................................
    Last edited by Reverend; October 28th, 2005 at 18:44 PM.

  3. #3
    Precision Processor Super Moderator egghead's Avatar
    Join Date
    May 2002
    Location
    In Your Monitor
    Posts
    3,212
    Adding the images:

    From the top menu select file/add image.

    http://imageshack.us/?x=my6&myref=ht...s/newreply.php

    Choose gostghoul.gif


    http://imageshack.us/?x=my6&myref=ht...s/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/5...stframe5fx.jpg


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


    http://img481.imageshack.us/img481/5...condpic4lv.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://imageshack.us/?x=my6&myref=ht...s/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/1...heimage7fo.jpg


    Feel free to place the other monster how you like.

    Now at the bottom choose the second frame.


    http://img464.imageshack.us/img464/8...ndframe5qj.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/2...animate9wf.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


    Next we will be adding the background.
    Last edited by egghead; October 28th, 2005 at 22:09 PM.

  4. #4
    Precision Processor Super Moderator egghead's Avatar
    Join Date
    May 2002
    Location
    In Your Monitor
    Posts
    3,212
    Now let's add the background picture the animation.

    Highlight frame one again and open the coats-big-spooky.jpg



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



    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.



    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.



    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.



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



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



    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/7...swindow0ft.jpg

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


    http://img476.imageshack.us/img476/7...torial27od.gif

    Next we add text and we will save optimize and save it for the web
    Last edited by egghead; October 28th, 2005 at 22:11 PM.

  5. #5
    Precision Processor Super Moderator egghead's Avatar
    Join Date
    May 2002
    Location
    In Your Monitor
    Posts
    3,212
    Now lets add text.


    http://img477.imageshack.us/img477/7...ingtool9ag.jpg

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



    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.



    Press the save as button to save without compression.



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

    Select the comress by size button.



    In the box type 79 and press ok/



    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/6...pressed8wd.gif

    Compressed, 80k

    http://img399.imageshack.us/img399/3...pressed2da.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
    Egghead
    Last edited by egghead; October 28th, 2005 at 22:14 PM.

  6. #6
    Precision Processor Super Moderator egghead's Avatar
    Join Date
    May 2002
    Location
    In Your Monitor
    Posts
    3,212

    New!

    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,

    Have fun with it!

    Egghead
    ------------------------------------------------------------



  7. #7
    Member jan's Avatar
    Join Date
    Jul 2003
    Location
    Florida,USA
    Posts
    80
    Nice one egghead.

  8. #8
    Banned
    Join Date
    Feb 2005
    Posts
    587
    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!

  9. #9
    Precision Processor Super Moderator egghead's Avatar
    Join Date
    May 2002
    Location
    In Your Monitor
    Posts
    3,212
    Quote Originally Posted by 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!
    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!
    ------------------------------------------------------------



  10. #10
    Banned
    Join Date
    Feb 2005
    Posts
    587
    it is! I'll make a new thread out of it

    http://www.techzonez.com/forums/show...720#post107720
    Last edited by lankan_man; November 2nd, 2005 at 17:59 PM.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •