I’ve been asked to provide some promotional material for my handful of HTML5 games.
I don’t actually have anything like this so the challenge of creating them appeals. Especially since I’ve been spending a lot of time knee-deep in code of late. It’s nice to switch focus to the other side of my brain for a while.

As an arcade gaming nerd this also greatly appealed to my retro side.
I instantly recalled promotional advertising for games like Spy Hunter, Gauntlet, Galaxians and Pac-man. A quick bit of Googling returned the following and an excellent site called Roger’s Arcade Collection.

Galaxian Marquee

Pac-Man marquee

Spy Hunter Marquee
The marquees above are good but I’m not sure they’re going to work in today’s arcades. The market that I’m in is mobile gaming and it’s horribly competitive. The marquees that you see on the mobile web portals are really rather hit and miss. Some are stunning, most are dreadful. I set myself the goal of simply avoiding dreadful. I wanted to borrow from the simplicity of yesteryear and use a good range of colours but I didn’t necessarily feel the need to emulate the feel.

So I fired up Photoshop, dusted off the Wacom tablet and started sketching out some ideas. I love this phase. The blank canvas, the headful of ideas and a bunch of inspirational artwork. It doesn’t get much better.

Wizard Wars

So I started off with Wizard Wars (above). My first HTML5 game and something that I’ve always been rather proud of.
The game premise is quite simple – a wizard is forced in to warding off enchanted spirits whilst protecting his magical power stars. To help him a golden powerup falls in to the arena every once in a while. The evil wizard Zoltar meanwhile is after trying to steal all of the power stars for himself.

So I figured a cartoon wizard was in order and I thought of Milt Kahl’s awesome Merlin from the Disney film Sword in the Stone. The initial sketch you can see below.

Wizard cartoon sketch

I wanted to show the wizard battling something rather than just playing safe with two wizards standing off against one another. I figured it would be more fun to draw some kind of a ghost.
There are various stages that I went through to create the final image in Photoshop using Paths for the initial outlines and then some freehand pen work to complete the details.

Adding paths in Photoshop

Adding paths in Photoshop

For the most part this is a process of adding path points to the document using the Pen tool (P). Simply click the position on the document that you wish the path to appear. You’re not working in layers here.  ( To view your path panel click Window > Paths ) Simply click around the drawing and then re-click your initial path point to close the path.
From there it’s a case of holding down CTRL to click and highlight a path point, moving it if necessary and then holding down ALT to define your curves. Each path has its own set of handles that you can drag out to help you perform this bit. It’s incredibly powerful and easy / fun to use.

I’m really not much of a teacher of this sort of thing but I’ll show you a few more screenshots that I took as I assembled the finished piece.

Fill path in PhotoshopOnce I’d bent the path in to shape to form the Wizard’s main body I selected a suitable green and then used the Path Fill tool to fill in the solid colour.

path fill

Slowly building up the picture I repeat the process to add things like hat, face, beard and hands.

filling in the wizard image

By repositioning layers above and below each body part I can hide unwanted shapes. I also draw the eyes in a little more detail without using paths. The shape tool (U) in Photoshop is perfectly good at ellipses. One or two of those overlayed on to one another creates a perfectly good cartoon eye.

adding details
I’m now using freehand to define the extra shapes and lines. The Wizard’s arms and sleeves are better defined as well as picking out a couple of the fingers that overlap. Finally I flatten the layers and put a simple stroke around the entire layer.

photoshop stroke
From this point forward I build the rest of the image using similar techniques. The ghost is a large path filled in with a blueish / white and then blurred with the blur tool (R) around the edges. To add to the effect I apply some outer glow using the blending options on the layer ( Right click the layer and select Blending Options )

I then add the eyes and once again use the blur tool to fade the edges in keeping with the style of the ghost. I opted not to include a toothy mouth as per the sketch. I figured it just didn’t need it.

I’m almost there. From the outset I’d decided I didn’t want to overdo this but I did want to add enough to entice the player in. I almost wanted the player to think “hmm, so I get to player a wizard battling monsters..

wizard wars banner
The stars are important in the game and I figured should feature in here. They’re all sat on one layer with a simple orange / yellow gradient fill applied.
Finally I add some text, remove the sketch layer, add a small magical glowing orb to the Wizard’s hands and the image is complete.

Wizard wars promotional banner


Wizard Wars alternative banner

I had some real fun making this. It’s by no means glossy but I feel that it fits the purpose of promoting my game on a busy game portal.
The important thing for me is to have my games stand out from the crowd. I’ve done my best to use colour and composition to plant the seeds of intrigue in to the prospective player’s mind.
Whether it works of course, remains to be seen.

Here’s a few more:

GalactiansDanger RangerGalactians2


3 Responses

  1. Love it!! Great stuff, thanks for sharing it!

    I like Danger Ranger’s the most, although Wiz Wars one is next.

Leave a reply

Photo of Atari VCS console and pre-order information
Playstar graphic
Minecraft Global CD Key
%d bloggers like this: