next »

[Litho]

So I'm a graphic designer for a living, I use illustrator 8 hours plus a day, and was trying to figure out how I can bring that skill set over to making pixel art.

One of the games I'm working on needed an inventory screen, so I whipped one up in illustrator real quick.

Although this picture shows a finished product, I figured i'd discuss how I got here.

First thought was to just dump it into Photoshop.
So this is the 32 color mess it spit back out at me.

While this doesn't look bad small, You might notice a lot of the wood texture gets destroyed (and sometimes turned green), there are a bunch of stray yellow pixels around the tablecloth. It's no good, because one this gets blown up it'll be super obvious.This is because photoshop doesn't reduce colors based off appearance, it reduces them based off color value. Sometimes this means you have colors completely change as the difference between the values of 2 are just on the blue the result is you might get greens or purples instead.

The solution. break it up by color groups.

the tablecloth is reduced to  12 colors, just because I didn't want to mix the yellow to green. the table is 6 colors, and the paper is 8.

Now that I had pieces It was easy enough to take the table, put it back to RGB, and put in the other 2 objects, and then save it under indexed colors. the manual 26 colors looks much leaner than the photoshop provided 32.

[Litho]

Hey, let's animate some pixels in adobe suite. it does that? Yes? Sort of?

Lets start with a quick sketch and a rather limited pallette to make it easier for photoshop to handle a bunch of illustrator files.

Yes, I know that isn't how people walk. It;s in this pose so I could group the shapes for the legs, arms, torso and head together.
once you have things grouped, it's all about just rotating groups of objects at points so that they match up to fill out a bunch of keyframes.

from there, these were pasted onto a new illustrator file, this time measured by pixels. at this point you can size things to the size you want and export them to photoshop. the smaller you get, the thicker you want to use your outlines. at 64 px tall I found I was using a 1pt outline.

I tried running her at 32 pixels tall, but didn;t like that the face completely closed up, so I went back and resized it to...

64 tall. much better. I played with the contrast a little and did some color correction then reduced it to 32.

Make sure that you measure out your widest cell of animation and space he rest accordingly, then break the image via slices.


Here's the results of about 3.5 hours of work, including figuring out the process.

[jbarrios]

Great work!  I like your art style

[pyxelbit]

thats a interesting workflow and a really nice outcome for a 3,5 h animation. But i would say it needs some refining to be considered pixel art. 30 colors is a lot for such a simple character and a few pixels could be placed differently.

heres a good tutorial on what is considered pixel art: http://pixeljoint.com/forum/forum_posts.asp?TID=11299

[AJFay77]

That's a really interesting approach to pixel art, love the results too. Thanks for sharing