For the recent music video for hip dubstep-rock act Nero’s first chart hit, Me & You, James May – aka Smudgethis – created a fictional arcade game from the early 90s, featuring Nero’s two members. The game was a sideways-scrolling beat-em-up with 16-bit graphics, similar to Double Dragon, but far superior to the 8-bit games of retro classics like Super Mario Bros.
To create this style, characters should still be blocky, but more complex than older games – and while you’ll need to use a limited colour palette to achieve the look, remember that these games still had 65,536 colours to play with.
Here, James shows you how to create a character based on a photo, using a simple colour palette and the Pencil tool.
As well as an animation guide, you’ll also need a photo of a person. James has used a photo of a punk (18888111.jpg) from this month’s stock selection from Photos To Go.
Next month, James will show you how to take this character into After Effects, animate him and apply retro game effects.
Step 1 Open up the Animation Guide (16bit).psd and the 18888111.jpg (or a photo of your choosing) to use as a basis for the character. A full-length profile photo will work best and help with obtaining colour palettes and styling for your 16-bit figure. The animation guide has a number of poses across separate layers. Select the one that best fits the pose in your photo – as ours doesn’t have legs in shot, I’ve gone for the standard pose on Layer 1.
Step 2 Using the Rectangular Marquee tool (M), select the head from your photo and Copy (Cmd/Ctrl + C) and Paste it (Cmd/Ctrl + V) into the Animation Guide (16bit).psd.
Scale the image down to fit, proportionately. You will notice that as the PSD’s dimensions are very small, the image will instantly take on a pixel art look.
Step 3 Create a new layer and draw the outline with a one-pixel, black Pencil (B), using the supplied animation guide and photo as a basis. The supplied guide helps develop a range of characters from larger ‘boss’ figures or thinner female ones. It’s a rough guide for compositing
and animating my pixel art characters.
Step 4 Using the Eyedropper tool (I), sample the darkest area of skin tone on the photo and create a small square of colour. Do this three more times to create a four-tone palette of skin tone.
Create another layer below the outline layer and, using a one-pixel brush and your four-tone colour palette, shade the image (again, using the photo as your guide).
It’s best to keep all the different elements of your artwork, or different layers, as it makes it easy to reuse them on other figures. This is especially useful with ‘baddies’ as most 16-bit games used very similar figures. For example, one baddie might have a red shirt and a knife, while a later one is identical, apart from a blue shirt and a gun.
Step 5 Repeat this process for the other parts of the figure, shading the fabric according to the other elements within your source photo. Remember to continue sampling using the Eyedropper tool to create colour palettes first, as this ensures a consistent colour set that looks great and fits with the relatively limited colour palette of 16-bit games.
Step 6 Add details to enhance your character with shades, tattoos, an earring and suchlike. Have some fun here, and think about how you want your character to appear in a game environment. Perhaps, they could be wielding an axe or have a robotic arm?
Step 7 To animate your character, repeat the previous stages using the other five layers of the animation guide. This process can take some time to master and to create seamless results, but it is possible to take short cuts by reusing elements from previous frames. For example, in this six-frame sequence, the head remains unaltered.
Step 8 To check the animation sequence is ok, open up the Animation panel in Photoshop, and make sure only the first frame of animation is currently visible. You could add new frames and turn the layers on and off to make your animation, but the fastest way is to use the Make Frames From Layers command in the panel’s flyout menu (on its top right). The first frame is the blank background, so select this, and click on the panel’s trashcan icon (at the bottom) to delete it.
Tune in next month to find out how to take this character into After Effects to create a 16-bit game.
0 comments:
Post a Comment