This isn't a tutorial exactly but there are one or two things you might learn from this. Basically, I was frustrated with doing an effect in Photoshop that included rocks so I though that I'd try it in a vector program like Illustrator. It turned out that when I saved the work out as a GIF that it looked very cartoony and cel-like. So I decided to try it with a figure and this is the result....

Thanks go to Zweifuss for the sprite of Gill.

Firstly, I needed a sprite to work with so I picked Gill from Street Fighter 3.

I loaded it up in Illustrator and enlarged it to 200%. I then traced Gill with normal paths with a stroke width of 1. Because it was going to be shrunk, there was no need to be precise.

At this point, I could have exported it to Photoshop but I wanted to see how well Illustrator could handle the conversion to a GIF sprite. So what I did was create a filled shape underneath in grey. It wasn't easy because I had to take bunches of lines and make them into solid shape then unite them all together eventually. I wish there was a fill tool like in Flash because it would have made the job quicker.

Anyway, once that was done, I just put in some quick highlights. I wanted to put in some dark areas but that would have taken ages considering the way it was being done. I ended up just putting in a small dark area just to see how it would work.

It's important to note here that I was "colouring" in grey, so to speak, but this is because I don't have faith in how well Illustrator converts full colour. I thought that it would be better to colour later in Photoshop because I would have better control when it came to the final sprite.
Before saving out as a GIF, though, I create a box with no line and fill in a background layer and hid the sprite image so that I could have transparency when saving out.

I used the 'Save to web' option and made three versions with different transparency matte colours. The matte colours are VERY important nere because they can determine how smooth the outline of a sprite can look. I saved the GIFs out with only 6 colours.

This version uses a black colour matte. Note the hard edge.

This version uses a dark grey colour matte. Note that the edge is a tiny bit softer. This is more apparent later in the colour samples.

This version uses a white colour matte. As you can see, it's not pretty.

This version also uses a white colour matte but I cleaned up the lighter pixels. As you can see, it's better but there are areas where there are still unacceptable light pixels.

Once saved out I stuck them in Photoshop and gave them a little colouring just to see how they would look. These are the results.

This version uses a black colour matte. Now that it is coloured, the darker edge is more noticable.

 

This version uses a dark grey colour matte. As you can see when coloured, the edges look softer than the black matte version.

This version uses a white colour matte. As you can see, it's still not pretty even coloured.

This version also uses a white colour matte but I cleaned up the lighter pixels. Here, the lighter edge pixels are more noticable.
It's probably easier to see them next to each other to compare and without the purple background.

The differences are more clearer in the colour version, though.

Don't be tempted to use a white matte when exporting, though. Even though the white and white cleaned sprites may look good above, don't forget that mugen sprites are played at a larger size in reality and let's not forget the different coloured backgrounds which would give the light pixels away.

... and that's how the experiment turned out. There is alot of potential in Illustrator to create Mugen characters (IE graphics) but it can seem to be a slow process. The other problem is that you need to work in greyscale for better control when you make your palette from Photoshop.

The other things that I didn't try was to use a custom stroke when drawing. I think that if I had made an art brush with a tapering stroke that I would have gotten fading lines.

If I lightened the stroke colour to a dark grey instead of black, the sprite would have looked more natural, I think.

Anyway, I hope this has inspired you somehow. It may not be perfect and it may be a tedious road but using a vector program like Illustrator, Flash or Freehand can really improve the look of your character.

Good Luck

Revanto