Design insights & tutorials.

How to make an animated GIF with 8-Bit Characters: Part 1: Design

Turquoise Flag-Tip

creating a retro video game animated GIF from scratch

Have you ever wanted to make a kick ass animation of 8-BIT characters tearing each other to shreds? Well now you can. In this tutorial, I will take you through the process of creating vectorized 8-bit characters for use in an animated GIF. I’ve also included the vector source files of the characters and objects so you can create your own animation. So start jamming to The Advantage and get started!

1. Set up your document in Illustrator

To begin, open Illustrator and create a new document. It doesn’t really matter what size, so the default 8.5 x 11 dimensions will be just fine (Since these are vectors, they can be resized later to suit your needs).

2. Turn on the Grid

Next, you want to make sure you turn on the grid in your document. You can do this by going to the VIEW menu and selecting the SHOW GRID option (or by pressing CTRL + “ for the shortcut). This grid will serve as a guide for all the pixels you will use to make your characters, backgrounds, items, etc. Also, I find it helpful to turn on the snap to grid option as well. This makes it easier to move the pixels around the grid, without having to spend time lining them up by hand. You can find this option in the VIEW menu under SNAP TO GRID (or by pressing SHIFT + CTRL + “ ).

creating a nintendo character

3. Use Squares to create your Character

Now your document is set up, you are ready to make some vector 8-bit characters. First, use the square tool to make a square the exact same size as the squares of the grid. Since you have the SNAP TO GRID option on, this should be fairly easy. This square will serve as a single “pixel” that you will copy to make all of the objects in your 8-bit environment.

creating a cool game character

4. Get Creative!

Next, you’ll have to decide how you want your characters to look. You can either sketch them out and scan them into your computer or just wing it. If you are going to sketch them out, make sure that you turn the opacity down on your sketch so you can still see the grid in Illustrator. For this tutorial, I am just going to wing it using characters from the Final Fantasy series as a guide.

At this point, you need a quick way to move the pixels around to create your character. I find it works best to work with one color at a time, and then go back and add detail later. The fastest way to do this is to select the pixel you want to use, and hold ALT while pressing the arrows in the direction that you want the pixel to go. This will copy your single “pixel” and move the copy in whatever direction you choose.

Start with using Squares on the Grid

5. Color your character

When you have your outline finished, it is time to fill in your character. I use the same technique as before, but I have found you also need to use the mouse to hand place pixels at times. When choosing colors, keep in mind that you need to use a limited palate like a real 8-bit game, if you are going for authenticity. If it helps, you can also keep a single pixel of each color next to your characters that you can copy or use for other elements in the 8-but world you are creating. Also, don’t forget to create a weapon for your character.

creating an 8-bit Nintendo character

6. Create more characters

After I finished my first character, I made some other characters of a similar style so that he has someone to fight.

more 8-bit characters

7. Create Your environment

Now, you need to create an environment for your characters to fight in. This can be a bit tricky, but just remember that most retro games had a block or unit of background that was usually repeated across the screen. In this background, I have created a couple of different trees and used darker shades of greens and browns to add depth. Then, I repeated them across the background using the HORIZONTAL DISTRIBUTE CENTER tool to keep them looking uniform. In the fore ground, I created a dirt road that the characters can be placed on. Also, when blocking out large areas of color in the background, it is much easier to create larger sections of color using the square tool.

create a cool retro gaming background

8. Create Some Objects

You may also want to create other elements that the characters can interact with in the environment. For this free vector sample pack, I have made a few different things that you can add into your animation like mushrooms and torches. And now you should be ready to bring your characters to life, through the power of an animated gif!

post links to your character designs

I’m curious to see what our readers come up with. I want to see some awesome 8-bit characters, monsters, bosses, objects, etc. I’ll even post my favorites in another post!

create an awesome 8-bit animated gif

Freebies!

Free 8-Bit vector elements

Part 2 – ANIMATION

In Part 2, I will take you through the process of animating your 8-bit characters using Photoshop CS3′s animation panel.

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.

  • smeegy

    great tut! :D
    keep it coming
    and by the way nice new design.

  • jaime.radar

    despite the numerous animated gifs i’ve made, i’m anxious to see what tips and shortcuts i pick up from the tutorial. no matter what i know, i always learn something new from gomedia posts!

  • smeegy

    great tut! :D
    keep it coming
    and by the way nice new design.

  • jaime.radar

    despite the numerous animated gifs i’ve made, i’m anxious to see what tips and shortcuts i pick up from the tutorial. no matter what i know, i always learn something new from gomedia posts!

  • Scott D

    NICE! I can’t wait for the PS version! Very good work. (I have bought a few vector packs from you guys since you keep churning out the best stuff.)

  • AndrU

    Daaaaaa… daaa amazing!, you just rock!.

    I love it!, GO! GO!.

    Cheerz, from Uruguay!.

  • AndrU

    Daaaaaa… daaa amazing!, you just rock!.

    I love it!, GO! GO!.

    Cheerz, from Uruguay!.

  • http://www.scottad.com scottAD

    NICE! I can’t wait for the PS version! Very good work. (I have bought a few vector packs from you guys since you keep churning out the best stuff.)

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

    Great tutorial! I have some experience with this technique in Illustrator replicating realistic images. Talk about time consuming!

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

    Great tutorial! I have some experience with this technique in Illustrator replicating realistic images. Talk about time consuming!

  • Pingback: How to make an animated GIF with 8-Bit Characters | WhiteSandsDigital.com

  • http://www.geoffmay.com Geoff May

    Man, this reminds me of my old NES. 8 bit shall never die!!

  • http://www.geoffmay.com Geoff May

    Man, this reminds me of my old NES. 8 bit shall never die!!

  • Marcos Cortes (Dominican Repub

    Great post keep em coming ,best wishes I’ll be waiting the second part.:)

  • Marcos Cortes (Dominican Republic)

    Great post keep em coming ,best wishes I’ll be waiting the second part.:)

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

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

  • Raja sekar

    good!!!!!!!!!!

  • Raja sekar

    good!!!!!!!!!!

  • pyro_hxc

    dude this is amazing….

    i love Gomedia <33

  • pyro_hxc

    dude this is amazing….

    i love Gomedia <33

  • http://www.pixelbath.com/ Michael Hoskins

    Great tips on doing it in Illustrator, but wouldn’t it be infinitely easier to use the pencil tool in Photoshop with the document zoomed in? That way, you’ve already rasterized your work.

    Though, if you needed vector art from raster art, your method would work very well for vectorizing.

  • http://www.pixelbath.com/ Michael Hoskins

    Great tips on doing it in Illustrator, but wouldn’t it be infinitely easier to use the pencil tool in Photoshop with the document zoomed in? That way, you’ve already rasterized your work.

    Though, if you needed vector art from raster art, your method would work very well for vectorizing.

  • Pingback: Vectips Monthly Roundup - July | Vectips

  • Pingback: Best of the Web - July - VECTORTUTS

  • lacid4

    this is so awesome!!!!

    now I can make bunch of new characters in my head!!!! from imagination to reality!!!

  • lacid4

    this is so awesome!!!!

    now I can make bunch of new characters in my head!!!! from imagination to reality!!!

  • http://php-learn-it.com Php Learn It

    Very cool design and intuitive tutorial. Haven’t thought of this but I could utilized it with a site I am musing about designing. Always good to stack up on what you may need in the future

  • http://php-learn-it.com Php Learn It

    Very cool design and intuitive tutorial. Haven’t thought of this but I could utilized it with a site I am musing about designing. Always good to stack up on what you may need in the future

  • Pingback: Tutorial para crear GIF animados con Photoshop | frogx.three

  • http://www.myspace.com/vannyzero hellvis

    is there a way to create a 8 bit image without adobe illustrator? for example using photoshop?

  • http://www.myspace.com/vannyzero hellvis

    is there a way to create a 8 bit image without adobe illustrator? for example using photoshop?

  • http://www.myspace.com/vannyzero hellvis

    please let me know!

  • http://www.myspace.com/vannyzero hellvis

    please let me know!

  • Pingback: Bookmarks for Febrero 17th from 00:29 to 23:52 | FACIL TUTORIALES

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

  • http://www.roomfurniturechina.com bedroom furniture

    i'm anxious to see what tips and shortcuts i pick up from the tutorial. no matter what i know, i always learn something new from gomedia posts!

  • shit face

    thats crap get a life wierdos

    • http://www.facebook.com/people/Hama-Nagisuma/1204440054 Hama Nagisuma

      for you its crap me just tell your just jelly? you got no talent and your the one that needs a life no wonder that name of yours suit you good job very good job indeed

    • http://www.facebook.com/people/Hama-Nagisuma/1204440054 Hama Nagisuma

      for you its crap me just tell your just jelly? you got no talent and your the one that needs a life no wonder that name of yours suit you good job very good job indeed

    • Josh Lagerwey

       Why’re you even reading this tutorial if you don’t like this kind of thing then?

  • Navneet

    Check this very good software to create simple animation :
    http://www.prashanthpai.com/blog/make-simple-gi

  • http://www.BadRadish.com/ BadRadish

    Seems so simple now, but yet we needed this to do it. Goes a lot faster than it sounds, too.

  • http://www.BadRadish.com/ BadRadish

    Seems so simple now, but yet we needed this to do it. Goes a lot faster than it sounds, too.

  • http://www.superchinawholesale.com/ handbags

    wouldn't it be infinitely easier to use the pencil tool in Photoshop with the document zoomed in? That way, you've already rasterized your work.

  • Jeremy

    I think that the best way to go about this is to do it in Photoshop. Then if you later want to make it into vectors, use Flash. If you import your PNG file into Flash and then Modify > Trace Bitmap > Min. Area: 1 pixel > Curve fit: Pixels > Corner Threshold: Many Corners this project could be much easier. Copying and pasting into Illustrator would be very easy.

    If you only have Illustrator to your disposal then this way makes sense, but seems very time consuming.

  • Matt

    Thanks for this nice work!
    dizi izle

  • John

    Great post!
    dizi izle

  • http://www.loveshoppingshoes.com JimmyChoosale

    I like this article

  • used forklifts for sale

    Not bad. I used the all process to create banners

  • http://twitter.com/Zeliroth Edgars Kleins

    8-bit imaging still owns 32-bit imaging. ;) Aweosme article, by the way. Realy useful, for me atleast.

  • http://www.adodis.com/Hosting-Companies-in-India.php Hosting companies in india

    It’s hard to find knowledgeable people on this topic, but you sound like you know what you’re talking about! Thank you for this article!

  • http://www.adodis.com/Free-Ecommerce-Software.php Free Ecommerce Software

    Awesome tutorial dude ! Such a wonderful explanation u have made..Cheers !!

  • Anonymous

    I am glad to found such useful post. I really increased my knowledge after read your post which will be beneficial for me.

  • Anonymous

     Please add more good information that would  help others in such good way.

  • technofist Sridhar

    nice article
    i like this one

  • technofist Sridhar

    its nice
    keep sharing

  • http://twitter.com/TAXME1 TAXME

    go to google and type sonicthegirlz in the search bar, this is all i have.

  • http://www.joomla-developers.com/ pavanraj

    Your article very easy to understand. Thanks for giving nice article to us.

    • Marissa Mele

      You are so very welcome! :)