Design insights & tutorials.

How to make an animated GIF with 8-Bit Characters: Part 2: Animation

Turquoise Flag-Tip

8-bit Blog Part 2 GIF

In the last post, I showed you how to make 8-bit characters in Adobe Illustrator. In this post, we will animate those characters in Adobe Photoshop using the Animation Window.

1. CREATE A NEW PHOTOSHOP DOCUMENT

To Begin, open up a new document in Photoshop and make the dimensions the size you want your final animated gif to be. This will be used for on screen viewing, so set the resolution at 72 pixels per inch.

Next, transfer your vector images into Photoshop. The easiest way to do this is to use the copy command in Illustrator and paste them into Photoshop as a smart object. You may need to resize them when you move them to Photoshop, but just remember to keep the “pixels” of the different objects the same size.

photoshop document settings

2. OPEN THE ANIMATIONS WINDOW

Now that you have all of your images in Photoshop, it’s time to animate! Open up the ANIMATION window which is located under the WINDOW menu. The animation window will serve as your timeline for your animation.

There are a couple of nice features here that should be noted.

  • Each box in this window serves as an individual frame of your animated gif.
  • On the bottom of each of these boxes is a drop down menu that allows you to control the duration of that particular frame.
  • Below the frames in the toolbar, are the add and the delete frame icons. They function in the same manner as the add and delete layer buttons on the layers palette.
  • There is also another helpful button, the TWEEN ANIMATION FRAMES button, that allows you to enter frames automatically as tweens for your animation so you don’t have to animate every individual frame. Instead you can just make two frames, one where the animation should start and one where it ends. Then, you select the last frame in the animation and you press the button that looks like little boxes going in a diagonal direction. This brings up a pop-up menu that allows you to enter as many frames as you would like to control the duration of the animation.
  • On the window there are also the typical video controls that will allow you to play through your animated gif.

animation window

3. BEGIN THE ANIMATION

For this tutorial, we will do a short animation of our characters fighting. To begin, make sure that all your characters are on different layers. The way the animation works is by turning on and off different layers in each frame to controll animation. So, begin with your character on one side of the screen. Then, add another frame in the animation window, and make sure it is selected, and move the character across the screen. If you click back and forth between the frames in the animation window, the character should jump from one part of the screen to the other.

moving your character

This is where that handy tween animation button comes into play. Select the frame with the character where you want him to end up, and press the tween button. In the pop-up box that appears, make sure that it says “tween with previous frame” in the drop down box. Then enter the number of frames that you want to insert in between your animation and press ok. Now you should see a lot more frames in your animation window. Press the play button to see the results.

tween dialogue box

4. BRING IT ON!!!

So great, you made a little guy move across the screen, now what?! Well, how about some good old violence? This may take some more pixel pushing in Illustrator, but what you need is to create the impression of a sword swinging motion.

The best way to do this is to have your character have two different poses. In one pose, have him stand with his sword up and in the other he should be standing with the sword in a downward slashing motion. When the two are animated together, it appears if your warrior is swinging his sword. Use the same technique to animate as you previously did, turning on and off layers in the different frames. Then all you have to do is move him towards the other character and swing away.

sword swinging animation

5. SAVE THAT MASTERPIECE

Finally, to save the animation out as a GIF, go to the FILE menu and click on the SAVE FOR WEB & DEVICES option. In the window that comes up, make sure gif is selected, and then click save and you are done. Choose a color preset like 128 colors or 32 colors depending on many you have. Remember, fewer colors mean smaller file sizes.

save for web as a GIF

6. GO NUTS!

Now go crazy with it, and add some effects and some projectiles and soon it will be mass hysteria! Then, you can show it off to your friends by putting your gif’s on your web page or use them as a AIM icon. Here is the final one I created…GOOD LUCK!

8-bit battle

If you want to, post your results in the User Showcase and show off your amazing animating skills.

Discussion

We want to hear what you have to say. Do you agree? Do you have a better way to approach the topic? Let the community know by joining the discussion.

  • brian

    baller status

  • brian

    baller status

  • http://www.colorburned.com Grant Friedman

    This is one of my favorite tutorials! I literally laughed out loud when I saw the animation. Great work guys! Thanks for sharing.

  • http://www.colorburned.com Grant Friedman

    This is one of my favorite tutorials! I literally laughed out loud when I saw the animation. Great work guys! Thanks for sharing.

  • http://nephilistic.com Kristof

    hehe, thanks for this great tutorial – it reminds me of the 2d beatemup “little fighter”. Loved it when I was younger, and it was easily customizable ’cause all those animation actually where such GIFs :D

  • http://nephilistic.com Kristof

    hehe, thanks for this great tutorial – it reminds me of the 2d beatemup “little fighter”. Loved it when I was younger, and it was easily customizable ’cause all those animation actually where such GIFs :D

  • Pingback: How to make an animated GIF with 8-Bit Characters: Part 1: Design | GoMediaZine

  • Pingback: Cómo hacer un gif animado de 8 bits (parte 2) | Tutoblog: weblog de tutoriales

  • ChequeredManiac

    I just saw the new Pixar film Wall.E (probably not that new for the states but Ireland is a little slow with movies)
    Anyway I was watching through the end of the credits and all this 8-bit stuff comes up and I was thinking to myself, I know the name for that.
    Looks like Retro is 8-bit at the mo.

    Great to see you’re on top of the trends!
    Means that I am too :)

  • ChequeredManiac

    I just saw the new Pixar film Wall.E (probably not that new for the states but Ireland is a little slow with movies)
    Anyway I was watching through the end of the credits and all this 8-bit stuff comes up and I was thinking to myself, I know the name for that.
    Looks like Retro is 8-bit at the mo.

    Great to see you’re on top of the trends!
    Means that I am too :)

  • Pingback: Jeff’s Weekly Review July 14-18 | GoMediaZine

  • luke_ale_rask

    nice tutorial!!

    i have sad memories with 8-bit, last year at the end of second semester i had school task(i am multimedia stud) to make a short animation for Christmas calender for kids. task seemed really shity to me. but i though it would me nice to make it in 8-bit graphics. so i tried to do it my self , but i didn’t came up with anything good, after that i search tutorials for this particular thing but i couldn’t find any.
    any way now i know how to make it i really enjoy 8-bits

  • luke_ale_rask

    nice tutorial!!

    i have sad memories with 8-bit, last year at the end of second semester i had school task(i am multimedia stud) to make a short animation for Christmas calender for kids. task seemed really shity to me. but i though it would me nice to make it in 8-bit graphics. so i tried to do it my self , but i didn’t came up with anything good, after that i search tutorials for this particular thing but i couldn’t find any.
    any way now i know how to make it i really enjoy 8-bits

  • Abhijit V. Chaore

    Nice tutorial….it explains the details of Gif Animation which if used creatively gives excellent output. Thanks for sharing.

  • Abhijit V. Chaore

    Nice tutorial….it explains the details of Gif Animation which if used creatively gives excellent output. Thanks for sharing.

  • Kevin

    Hi, my name is Kevin, I am a student at the Art Institute of Chicago, and we are putting on a show for my class. I am showing animations off the internet for my section, and I would like to use the Gifs on this page. Please let me know if I have your permission

  • Kevin

    Hi, my name is Kevin, I am a student at the Art Institute of Chicago, and we are putting on a show for my class. I am showing animations off the internet for my section, and I would like to use the Gifs on this page. Please let me know if I have your permission

  • http://www.psdeluxe.com quality reviews

    do you guys have a recommendation section, i’d like to suggest some stuff

  • http://www.psdeluxe.com quality reviews

    do you guys have a recommendation section, i’d like to suggest some stuff

  • Pingback: Jeff’s Weekly Review July 14-18 | GoMediaZine

  • http://www.adasport.com/ New sport

    I definitely like this blog post. I gotta say it is very interesting, I will follow your thoughts.
    Talk soon.

  • Dental Goods

    very good.. but i thought this website is owned by adam from go mediazine right ?

  • Matt

    Thanks for this nice work!
    dizi izle

  • Amber

    Once upon a time I used to do this with ClarisWorks paint and Quicktime. lol

  • http://www.drmustafaerarslan.org/ panax

     I am showing animations off the internet for my section 

  • http://www.drmustafaerarslan.org/ panax

     I am showing animations off the internet for my section

  • http://www.domain2host.in/ Domain Registration India

    Good article and very valuable information. Keep it up!