Dress Up for Halloween With Isometric Pixel Art in Adobe Photoshop

What You'll Be Creating

You've made a pixel art character, it looks pretty normal, and it's wearing regular clothes. But Halloween is approaching, and we should get in on the trick-or-treating action.
We'll take our character and a little kid character, and dress them up as Batman and Chucky, just because. We'll also be making a jack o'lantern to set the mood.
Please refer to the isometric pixel art character tutorial if you don't have a character yet.

1. Kid Character

In the previous tutorial we already made our character at almost the smallest size possible, but there's still some leeway to shrink it further and make a child version.

Step 1

Remember to keep an original copy of your characters, to save them all for any future use.
Now, with a copy of the original character, we can move/overlap some sections of it to shrink it down, or we can delete some sections of pixels and then bring the pieces back together, which would look like this:

Step 2

Now it's only missing some retouches to the shirt neck, the arm, and one of the legs. Notice them and apply them.

We've given a child to our character, and without much labor!

2. Child's Play

Let's turn the little kid into the murderous Chucky. You'll want to check some reference images.

Step 1

Here I've changed the pants color slightly and turned them into overalls. The straps and top lines of the overalls are a darker shade of the blue. And I added a red pixel on the chest for the "Good Guys" logo. It's a tiny detail, and shouldn't be high contrast.

Step 2

The shirt should be different. So we'll create a long sleeve with a more saturated red tone and dark alternating stripes.

All stripes will be of different colors, but it'll be better aesthetically if two different colors with the same level of brightness aren't in contact. So let's try to keep the darker colors alternating with the lighter ones.

Step 3

We'll change the colors of the stripes, but the cuffs and neck should stay red as in the original.

Step 4

The pants should also have striped cuffs, but because of how few pixels we've got there, let's just use the same red from the shirt with one or two pixels height.

Step 5

The body is done, so let's change the hair color to ginger and give the kid a receding hairline to get closer to Chucky's look.

Step 6

Let's go for the creepier look Chucky had in the later movies, so we'll add some wisps of hair to the back of the head and edit the hair highlights.

Step 7

And, of course, the facial scars, which could be the same color as it has on the neck but could also have a slightly redder hue.

Step 8

One final detail would be a kitchen knife, Chucky seems to have an affinity for them. We can imply that he's holding it with his unseen hand and just add a little blade on the side:

3. The Dark Knight

Now let's turn our grownup character into the caped crusader. Again, have a look at reference images. I've chosen to do the batsuit from The Dark Knight because that's just a great movie.
It's an armored and slightly complex suit; we won't be able to get all the detail in (sadly the bat symbol on the chest isn't really possible to convey at this resolution) but we will get a bunch of subtle details in.

Step 1

Let's start by making our character's clothes all black. We'll use four shades of grey for this; I'm using 50%, 35%, 20%, and 5%, which is the shade I use on outlines.

Step 2

For the suit's neck we'll keep the original shirt neck line with the darkest shade, but right above that we'll add a few pixels of the second darkest shade, and above that another line of pixels of the darkest shade. So we're keeping the neckline and the character's jawline, and the lighter pixels in between represent the plates of the suit that cover the neck.

Step 3

Now paint the whole head (except around the mouth, of course) with the second darkest shade of grey. The hole for the mouth could have a few different shapes. This is the shape I thought looked best, but you can try alternatives.

Step 4

The nose will be two vertical pixels of the lightest grey and the eyes will each be two horizontal pixels of the darkest grey. In relation to our character these features have shifted a pixel up but it's for the best because the dark grey separating the nose from the mouth hole heightens the contrast of these features.

Step 5

Now with the second lightest grey we'll do highlights that extend from the top of the head to the cheekbones, but without coming into contact with the nose or mouth hole.

Step 6

We'll add additional highlights, now with the lightest grey on the forehead for extra volume and detail; see how these new highlights help convey the menacing frown Batman always carries around.

Step 7

Now for the bat ears. Here in red are the new pixels they will occupy:

And on the right the finish they should have.
Now the cowl is complete. On to the body armor! We can drop the lightest shade of grey and use only the darkest three shades for most of the rest.

Step 8

Let's make the whole arm grey (second darkest shade) and make the innermost arm outline extend to the neck (should line up) to add a break on the suit, representing where the armor plates meet.

Step 9

Leave the shoulder highlight in place (should be the 35% shade) but remove any leftover highlight below the neck and add some highlights for the biceps (two pixels should do) and for the fist (one pixel).

Step 10

Finally for the arm let's add some darker shades as well; a couple of pixels (darkest grey shade) below the shoulder to show off the armor plates, and one pixel slightly below the bicep highlight to make that bicep pop out some more. Also we'll add one more right above the fist highlight to give a touch of volume to the forearm.
And, of course, don't forget about Batman's trademark gauntlet fins.

Step 11

Now on the chest we'll add a nice big highlight for the pectoral area of the suit. This is where the bat symbol goes, of course, but trying to add it would only mess with our careful shading, so it'll be best left out. Our Batman will still be recognizable enough.

Step 12

Right over the pants line let's add Batman's utility belt, which we'll do as a bronze kind of color, without standing out so much. Let's fill the area in between the belt and the pectoral highlight with the darkest shade and add a tiny hint to the six-pack abs these superhero suits always make sure to include.

It's only a four-pack in our case but I think that'll do. The torso is finished.

Step 13

Now on the legs the only highlights we'll have will be on the thighs, knee pads (should look like exclamation points) and the toes:

Step 14

Let's add more detail with the darkest grey shade: a pixel a bit below each knee pad, and a vertical line from the back of the knee to the bottom of the boot.

Step 15

We'll also add a few retouches to the underpants area… I don't mean to get graphic but Batman does wear groin armor. So to get those volumes I added some minimal dark shading to the top of the thighs and some lighter grey just below the middle of the belt.

So now our Batman's only missing one thing: the cape!

Step 16

Marked in red are the pixels we'll be adding, and to the right how we'll be coloring them.

I added an extra pixel to the boot heel because without that I think it's easier to confuse the cape with the heel. Notice there's a bit of lighter grey toward the bottom of the cape and how it sort of cuts into the shoulder, as if it comes out of the clavicle area.
And thus, Batman is complete!

4. Jack O'Lantern

Step 1

To make our jack o'lantern, we'll start the same way we did with our character: with the face. The eyes and mouth of jack o'lanterns are usually triangular and zig‑zaggy, so you could use little inverted Vs for the eyes and a zig-zag line for the mouth.

When the pumpkin is done these lines might be a little hard to read because of how the pixels are not solidly united, so we'll double them vertically (just select and alt-nudge one pixel down) to look like this:

You might want to keep both versions and see which you like most in the end.

Step 2

The edges of the pumpkin will be 15 px across by 13 px high, and the face should sit low on this square because of the top view we're using.

Step 3

Round the edges of the square and fill with an orange color.

We'll move the face away for a moment to give our pumpkin some texture: the vertical ridges pumpkins tend to have. The black line at the top is where the stem will go and where the ridge lines should ideally meet. Even though we can't properly convey the lines curving and meeting at such a small size, we can try:

But for the most part they'll simply be vertical lines.

Step 4

Now let's put the face back on and select an area at the top to increase brightness to convey lighting and the pumpkin's volume a little better. I used custom colors instead of simply increasing brightness; you might want to try yellower hues on the lighter colors and redder hues on the darker ones.

Step 5

For the stem, we should add a shade of green that doesn't stand out too much. It'll be a three-pixel line plus dark outlines around it.

Step 6

And to finish up the stem let's add a highlight to the tip and replace the black horizontal lines where the stem and rind meet with softer shades; darker than the stem and rind but not quite so black.

Step 7

Similarly, for the face we can use a color that's darker than the rind but not so black and that helps to get a smoother finish.

Step 8

As a final detail we'll be adding a shadow. We didn't need shadows before, but in the case of the jack o'lantern it makes sense, as it's a shape that's considerably wider than its footprint.
I like to use black at 20% opacity when it comes to shadows.
I mentioned in the original character tutorial not using black on the outlines for this reason; if you've been doing outlines black then the magic wand won't be able to separate the outlines from the shadows. This isn't a big deal but it can eventually be a nuisance.
So this is how our finished jack o'lantern would look, and the image on the right shows how it would look if we kept the first, lighter face.

I like both but the lighter face can be harder to read when zoomed out, and it's easier for the pumpkin texture to interfere with it. So I'm more likely to use the bolder one.

Who Are You Dressing As?

So now your costumed characters and spooky jack o'lantern are ready!
Did you make the house from the house tutorial? Because your characters would look more at home trick-or-treating with a house behind them:

I hope this was helpful!