How to create sprites in Photoshop?

[Dizon]

Hey guys. Do you guys know any tutorials on the web on how to create sprites using Photoshop, as well as on how to animate them?

Thanks a lot.

[Amber Alexander]

Check out this site: http://www.wayofthepixel.net/pixelation/index.php

[Qitsune]

There are a few easy steps:
1) Pick a game engine, or at least a rendering engine.
2) Learn how this engine handles sprites
3) Learn principles of animation
4) Learn an animation software, hopefully one that will allow you to export files compatible with your engine.
5)Make animations
6)Export animations in compatible format
7) Fiddle some more with the files if necessary (for exemple, if your animation software exports individual bmp's you might need to assemble them in a strip in Photoshop)
8 )Integrate into software you are developping.

[LuckyDevil]

use square brush with 100 hardness and desired pixel width . make your file with the desired width & Height.

in photoshop open up your animation window. ( window > animation)
in that animation window switch to frame mode if not already there (square frame icon on the lower right)

create the number of frames desired and separate your sprites in seperate folders for each frame that way you can turn on and off desired art for each frame (easiest cleanest way i have found)

thats pretty much it. then it depends on your art skills and animation skills, quite simple really, just like animating on real paper.

[Dizon]

Thanks guys! Do you have tips on creating 32x32 sprites? I'm doing something like the early Final Fantasy ones but in isometric. I sketched something out, but I find it hard to make a pixelized version of it. Plus my sketch gets all messed up once I resize to 32x32 so it's hard to use as a guide.

[tarc]

Hi, Maybe you know this but the pencil tool does not produces anti-aliasing when drawing at the pixel level.

Marc

[nauvice]

Deviant art is actually a great search engine for excellent tutorials (especially for what you'd expect from dA, sprites, animuu or anything fanart)

Here, how to make pixel art:

http://pickspy.deviantart.com/art/Pixel-Tutorial-Eng-69561436

How to animate it:

http://elitesniper177.deviantart.com/art/Sprite-Animation-tut-50587477

Other varying sprite tutorials:

http://browse.deviantart.com/#order=9&q=pixel+tutorial

[Hookswords]

There was a weekly sprite competition here about a year ago. You might do a search to see if there are links and tips to help you. I can almost guarantee that there are. Way of the pixel is a good start.

here is another link I had in the archives.
http://gas13.ru/v3/tutorials/sywtbapa_making_fighting_game_sprite.php

[LuckyDevil]

use a 1 px square pencil brush. sketch out your dude roughly in the small size. create new layer and paint out your guy following your sketch. use 2 -3 tone levels ( shadow, mid tone, highlight) and what helps me usually is creating an isometric tile in a layer so i sorta know the angle I'm supposed to be drawing at. Don't use opacity that will only mess you up.

Oh and when animating, anything you do to the layer on the first frame will move all other frames so careful with that.

[Prometheus|ANJ]

One thing which really helps when doing art in general, faces and pixel art in particular, is to create a New Window (under Arrange) and set it at a different zoom. When doing pixel art I set the window I'm not working in to 200%, and the work window to much more.

I turn on the Grid if I'm working with tiles.

Pencil tool is good, yeah. Sometimes if I work with a big palette (256) I just paint big, scale down and clean up the pixels. Sometimes I set the pencil tool to 60% opacity if I want to paint and blend at a pixel level.

It's a pity PS doesn't have some of Deluxe Paint's features. I know there are some new similar programs, but I prefer working in PS.

[Dizon]

Thanks a lot guys. Lots of good info.

This is my sketch. As I've mentioned above, I'm having a hard time translating it into 32x32 sprite. I think I need to simplify it even further...What do you think?

[nauvice]

lookin good, its roughness could be why it doesnt skew at 32x32 so well, try making a linework of it first

[LuckyDevil]

if you shrink that to 32x32 it will be too blurry to translate. So just use it as reference and not a tracing device. redraw an outline of him as close as you can to what you want to achieve in the 32x32 square.

the guy has enough detail i think and he's looking good. Keep at it.

[Dizon]

lookin good, its roughness could be why it doesnt skew at 32x32 so well, try making a linework of it first

What I noticed is that even one block of pixel is just too big for the little details I have there. Maybe I should approach it like the old Final Fantasy sprites. It's surprisingly hard to really simplify it! And I thought my sketch was simple enough.

[FightingSeraph]

Here's a tip: Make a 32*32 size canvas and draw a cube. Now, take that design and work it within that cube's boundaries. I don't know if this technique works for you, but try it anyway.

[nauvice]

yeah actually you dont even need to do anything more, I resized it to 32x32 on photoshop (hope you dont mind, I was just curious) and it seems ready. well first I centered it, and removed the excess space before resizing, so that at least in height the little guy is literally 32px

I think what's going to be hard to illustrate is the chin cap and eyebrows

[LuckyDevil]

825279

here this is sorta what you want to aim for.

keep the most important features big. aka (face, colors, weapons hands and feet.)

all it is really a quick sketch based on your dude. took me just a few secs but you should start with something like this at the beginning and refine from there always looking at it from 100% to make sure all the important features stand out.

[Slash]

when working that small a line sketch like the one you show isn't gonna help you much. Getting the big shapes to read is essential, and it will probably scale down better that way.

i did a super quick paintover to illustrate my point. There is one step i skipped which is sizing down in steps and clean up every resize to make the resulting shrinkage read clearer.

825302

825305

[LuckyDevil]

hmm never looked at it that way sweet, i'm working on a game as a side project and your way seems really simple thanks will give it a try.

[Hookswords]

What I noticed is that even one block of pixel is just too big for the little details I have there. Maybe I should approach it like the old Final Fantasy sprites. It's surprisingly hard to really simplify it! And I thought my sketch was simple enough.

Maybe a different method? By your sketch I assume you mean the original Final Fantasy and not something a little further down the road. In any case here's link to show a more fully rendered image being shrunken down creating a Street Fighter 2 kind of sprite

http://www.conceptart.org/forums/showthread.php?t=131729&highlight=sprite+animation+weekly

Here's a serach link for the other S.A.W. challenges.

http://www.conceptart.org/forums/search.php?searchid=8416924

It would be kind of cool to get a weekly sprite challenge going again if anyone is interested.

[Dizon]

BIG thanks to all of yah's!!! I was finally able to create one and animate it even.

[LuckyDevil]

haha thats awesome, don't be afraid to hide his feet completely or put the arms further out to push the animation to show that he's walking.

good job though he looks sweet.

[SMalier]

Hey, I posted in another place and was directed here.

Is photoshop my best option for creating sprites?
Is it necessary to do a "concept drawing" to reference from?
Also, I was told PNG images are fine, are they really?

I've been asked to volunteer as an artist for a FF-type video game using XNA. I am supposed to have a meeting with the team this week and start on concepts, so what's the best approach for me considering I'm a total noob? Sorry if I'm hi-jacking the thread a bit; I am on topic however! :D

[nauvice]

Dizon that looks ace!

Hey, I posted in another place and was directed here.

Is photoshop my best option for creating sprites?
Is it necessary to do a "concept drawing" to reference from?
Also, I was told PNG images are fine, are they really?

-If you dont have photoshop, you can use MS Paint
-not necessarily
-yes

[Qitsune]

http://www.thefreedictionary.com/spritesprite [spraɪt]
n
1. (Myth & Legend / Classical Myth & Legend) (in folklore) a nimble elflike creature, esp one associated with water
2. a small dainty person
3. (Group Games / Games, other than specified) an icon in a computer game which can be manoeuvred around the screen by means of a joystick, etc.
[from Old French esprit, from Latin spīritus spirit1]

You can make small pixel art animations anyway you want, but that is not a sprite. A sprite is something that moves in an interactive application such as a game. So the formating of the sprite is entirely dependent on the engine the game runs on. For exemple, some games will need all animations of a single character on the same sheet. Some will need one strip per action. Some will need them all on the same line. Some use animated gifs or proprietary formats.
Same goes for transparency, sometimes an engine will use the first upper left pixel as the transparency color, sometimes it's a specific position on the color index, sometimes they use a separate alpha channel in a tga file, sometimes they use a fixed color (eg 255,0,255) or a png file with transparency, or a grayscale bmp as a mask. This is the kind of question you should be asking your programmer about as we don't know how he's going to code the tools for the game.

There are tools specific for pixel animations such as Graphics Gale or Pro Motion (I use Pro Motion at work, I wrote about it on my blog and how I lost work with it, but it didn't happen again!) Photoshop CAN do pixel art, but it's not an animation tool and animating with it is far from optimal. Switching frames around and doing alterations is a major pain the the butt and quickly becomes confusing. Flash is not bad but will not result in clean pixel art, it is however appropriate for hi res games, XNA typically doesn't require ultra small sprites like, say, Iphone or DS games.

[nauvice]

learn something new everyday :D

[Dizon]

http://www.thefreedictionary.com/sprite

You can make small pixel art animations anyway you want, but that is not a sprite. A sprite is something that moves in an interactive application such as a game. So the formating of the sprite is entirely dependent on the engine the game runs on. For exemple, some games will need all animations of a single character on the same sheet. Some will need one strip per action. Some will need them all on the same line. Some use animated gifs or proprietary formats.
Same goes for transparency, sometimes an engine will use the first upper left pixel as the transparency color, sometimes it's a specific position on the color index, sometimes they use a separate alpha channel in a tga file, sometimes they use a fixed color (eg 255,0,255) or a png file with transparency, or a grayscale bmp as a mask. This is the kind of question you should be asking your programmer about as we don't know how he's going to code the tools for the game.

There are tools specific for pixel animations such as Graphics Gale or Pro Motion (I use Pro Motion at work, I wrote about it on my blog and how I lost work with it, but it didn't happen again!) Photoshop CAN do pixel art, but it's not an animation tool and animating with it is far from optimal. Switching frames around and doing alterations is a major pain the the butt and quickly becomes confusing. Flash is not bad but will not result in clean pixel art, it is however appropriate for hi res games, XNA typically doesn't require ultra small sprites like, say, Iphone or DS games.

I heard about the 2 programs you mentioned, but in my case I used PS to animate my gif. It was a pain in the butt in some parts though. For instance, I was using the lasso tool to move parts around but then some of the colors changed completely for some reason. I had to color pick from my original gif to have it match completely. I don't know why that happened, but I was just using the pencil and eraser( in pencil mode) all the time.

[DeadlyFreeze]

I was using the lasso tool to move parts around but then some of the colors changed completely for some reason. .

You probably just need to uncheck the anti-alias on the lasso, other wise you will end up feathering your selection and messing with the opacity/color.

[carlosranna]

Yep! And when you use it in game you will not have a crispy edge...

[Qitsune]

The advantage of Graphics Gale and Pro Motion is they are really cheap. This is why I didn't mention something like TV paint, it's all kinds of awesome but super expensive. It's also overkill for what you do. I personally prefer to have the possibility of onion skins and layers when animating, even if it's theoritically possible to animate in MSPaint, it's a bit like mowing the lawn with nail clippers.