Creating sprites in Photoshop

I received a couple of emails asking about the process of creating the sprites for the Invaders game.
I have to say there is nothing particularly extravagant in my approach but it may be useful for folks to learn of my prefered approach.

Photoshop resizing method

I use Photoshop (CS3). As an artist first and foremost it’s a tool of my trade.
Before I begin I set the method of scaling to nearest neighbour in the program’s properties. I do this because I much prefer the jaggy edged art of old to everything being anti-aliased. For a retro game I want a retro feel !
The impact that this has is that everytime I manually resize elements of an image the program doesn’t force anti-aliased edges to the sprite.
The flip side is that there is some inevitable tidying up to be done on each animation frame.

By default I think Photoshop sets it’s resizing method to Bicubic.

The next thing I do is specify a colour palette for the game. This is partly a legacy thing in that everything I used to produce at Creations / Acclaim required a strict palette. It also helps to define a visual style for the game and ensures that I don’t run riot with every colour of the rainbow. You quickly learn which colours work best alongside one another. Whereas in the past I used to force the contrast of each colour up to compensate for the TV or GBA screen, with a PC monitor I can pretty much use whatever colour I like. It’s certainly a luxury compared to the “old” days.
Before I started work on this game I played a LOT of Mame and inparticular looked at how the sprites in Do Don Pachi, Galaga and Esp RaDe were constructed. Very different artistic styles in each game but some (perhaps) surprising use of the darker colours alongside bright reds and pinks.

New window in Photoshop

New window in Photoshop

I draw using a single pixel pencil and pick colours using either the colour swatch or by holding down Alt and left click within the image. I also always find it useful to maximise the image to pretty much fit the Photoshop window and then launch a separate window at normal size so that I can see the “real” effects of my pixelling.

The next step is I guess to actually draw some sprites.
For the most part I draw inspiration from cartoon. For IFM I am targetting 50’s B movies and pretty much ripped Tim Burton’s little green men off from Mars Attacks!
I always draw half a sprite and then flip it. Symmetry in art is important to me. For a pack of aliens I wanted to see a uniform pack of critters rippling around the screen in time. To draw the “half” alien I simply mask off half the document window with the Marquee (M) tool.

Drawing the sprite

Drawing the sprite

When the sprite is completed in it’s symmetrical state I transform the Layer (Edit > Transform > Rotate), tidy up the stray pixels and save it out for the web using Shift + Ctrl + Alt + S.

It really is as easy as that. Above all it’s a huge amount of fun.
I generally make a point of ensuring that there is enough game code in place to just sit back and enjoy creating the artwork.

Post a comment or leave a trackback: Trackback URL.


  • Mike  On September 23, 2008 at 2:38 pm

    Invaders from mars is allot fun! Thanks for blogging about the development process. I’ve been eying javascript for a game related project and your posts have given me some insight. I’ll be watching your progress :)

  • Andrew Wooldridge  On September 23, 2008 at 9:08 pm

    I want to feature your game on my blog, but I’m having trouble getting it to work in FF3.. I get this error:

    setting a property that has only a getter
    [Break on this error] console = new obj(‘div’,’oConsole’,canv…as,-1,0,0,”,0,0,0,0,0,0,0,0,0,0,0,0,0);
    base.js (line 512)

  • markw1970  On September 24, 2008 at 9:39 am

    To help anyone that might be Googling the error that Andrew found it appears to be resolved by turning off Disable Cache in the Firefox Web Developer.
    Thanks to Andrew for actually finding the resolution.

  • randygland  On April 13, 2009 at 3:58 pm

    very useful, thank u!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: