Tutorial: Creating a Boss Sprite

11 years, 11 months ago 0
Posted in: 2D Graphics, Blog

In this post I hope to take you through the basic stages of putting together the pieces for a boss sprite. Obviously everyone is going to have their own preferred technique, but here’s what I found worked best for me once I’d made a few already and had the process refined to a point I was happy with.

Tools used:

• Pencil/paper
• Scanner
• Adobe Photoshop (or similar graphics program)

1. Drawing the design


First of all, I sketched the design of the sprite in it’s entirety, making sure to pick a ‘neutral’ pose and position, picturing how I wanted it to be presented on-screen. Therefore I chose the standard ‘head-on’ view as this would be what the player would be seeing, but needs may vary for different sprites and games, so this is the time to visualise what the sprite is going to look like and what it is going do.

2. Scanning the drawing

Once I had a fairly defined sketch of the sprite, I scanned it at 300dpi. It doesn’t need to be a highly defined drawing, as all we are going to do with it is draw over it in Photoshop or another graphics program.

At this stage I also found it helpful to have an image of the background that the sprite is going to appear on in-game behind the pencil sketch as another layer, in order to get a better feel for the colours to use. I set a space background as the background layer, then brought in my scanned pencil sketch as new layer, setting the layer type to Multiply for the background to show through.

If your background is dark, obviously the pencil sketch will not show up too well, as I found out rather quickly! To solve this problem, I removed the white from the image, only leaving my lines. This was done with Mac’s Remove White Filter, available from here: http://morepunkinstuff.tripod.com/filters/Mac/mac.html. I then inverted the colours of the sketch (Image > Adjustments > Invert), which left me with just the lines of my sketch in a nice chalky white that showed up perfectly on the black void of space.



3. Basic Shapes


From here I could draw the shapes that I needed, copying, pasting and mirroring wherever necessary. I used different layers for everything, which made it easy to reposition if I had to. I had to consider which parts were going to move, in this case the eyes and arms, so that these pieces could be constructed separately.


4. Shading and extra colour


This was the fun part! To darken the shadowy parts, I used the Burn tool, set to 25% Exposure and 0% Hardness, and Range using Highlights, using varying brush sizes as necessary to give a soft gradient to the shading. Since each piece was on a separate layer, I didn’t have to worry about going over any lines, as the Burn tool only darkens what is already there.

After that, the highlights were achieved by using the Dodge tool on the same settings, making them slightly sharper to give a glistening look.

The eyes were constructed using three layers each – the eyeball, the iris and pupil, and then shadows and highlight applied to each piece individually.

5. Saving


Of course, I was saving all the time! But the final file format cannot be a psd. As long as you have kept well organised with regard to layers and groups, you should have no problem here. I took each separate piece, copied it to preserve the original, and merged it before copying it to a new image with a transparent background. I then expanded the canvas so that the dimensions of the image were multiples of four to make it suitable for a game sprite. I repeated this process for the other pieces.

All in all, this guy took something in the region of 5 hours to complete. He’s one of my favourite sprites so far.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>