How To Make Your Own NES Graphics

Hello, bored Photoshop artists. Ever wish you could draw an NES character, but hate how Photoshop anti-aliases everything and makes it look all fancy? Here's a long but fun way to make your own NES style graphics. It's really weird and has a lot of limitations, but it's ideal for icons and small projects. 

Special thanks to Brian Shaefer for submitting a better way to increase the size of your NES graphics!

You will need:

 - Photoshop 6.0 or higher & ImageReady
 - IconEdit32, which is a freeware icon editor you can download here.
 - A relatively experienced Photoshop brain.

After you've got everything installed, open up IconEdit32 and select the number 32 with the 16 color option next to it (see right picture), if something else was already highlighted, or more than one thing is highlighted after you select it, don't worry. Unless you're obsessive compulsive (in which case you can go to Images > Delete Image and delete anything that's not 32 x 32 with 16 colors) you're perfectly fine. As you can see, you've got 32 x 32 pixels to work with and 16 colors to choose from. If you're the artsy type of fellow you might have trouble not making a masterpiece, if you're not the artsy fellow and love to draw stick figures - this is cake. If the area is too small, you can select the 48 x 48 option and have a lot more area to work with. I found it overwhelming so I stuck with 32. In the right corner of the program you can see a preview of what your icon looks like, and if you mess up you can either erase your mistake or choose the transparent color from the palette below (it looks like every transparent pixel already placed on your blank sheet). This is only frame one of your NES graphic, when you're done, proceed to next step. 

Now that you've got frame one of your icon, let's put it into Photoshop. So here's what we do (and this is a long way to get results but as far as I know it's the only way): With your icon program open and the preview visible, hit Print Screen on your keyboard (located above Insert which is to the right of backspace) and open up Photoshop. Go ahead and hit 'Ok' since Photoshop automatically knows what you're doing. Crop the image around the preview of the icon (to the right of Marquee tool) then head into preferences by going to Edit > Preferences > General. In the drop-down box for interpolation, select "Nearest Neighbor" (Nearest neighbor is best for NES style graphics, because it skips the anti-aliasing altogether. It also provides faster results for your transformations). Finally, go to Image > Image Size and adjust your image to the size you want it (be sure "constrain proportions" is turned on).

Repeat step one for frame two of your icon. If your character is walking or performing an action, consider that the average NES sprite animation of a character walking is 2-3 frames; so there's no need to get insanely animated unless that's what you want. Paste the final copies of each frame into the same document on their own layers. Photoshop automatically pastes them like that, so you shouldn't have anything to worry about if you haven't the slightest clue what I'm saying (hey, I'm pretty sure you wouldn't have made it this far if you didn't)

                            

When you've got all your frames pasted into your Photoshop document, make sure that the bottom of each sprite is perfectly aligned with the others; this assures a smoother animation and leaves less room for jittery stuff. If you're lazy like me, you probably kept everything in the same spot and only moved the legs and arms. Hey! This is an NES graphic not Disney animation, who cares if it looks choppy? That's what makes it NES! When everything's aligned and what-not, hit the "Jump To ImageReady" button (at the very bottom of the tools menu) and wait for ImageReady to take its sweet time to load.

It's all downhill from here! Turn off all the layers except the one showing the first frame. In the Animation window (if it's not showing, go to Window > Show Animation) select 'Duplicate current frame' and hide all layers on the new frame except the second sprite of animation. Repeat steps until all frames are in sequence. Be sure 'looping' is turned on assuming you want it, and hit 'Play'. If the animation is too fast (which it most likely is), there's a drop down box under each frame for you to modify the frame's duration. .2 and .5 work best for me, but if they don't look right on yours, just insert a custom one in their 'Other...' option.

File > Save for Web! If you want to see what your icon looks like before saving it (which will most likely look exactly the same) you can hit the "Optimized" tab to see the final results. 

Tips:
 - As tempting as it is, don't blow up your icon using Photoshop's 'Transform' tool. It
    will anti-alias your image and rid it of that NES blocky look.
 - You can animate pre-cut (or custom cut) NES sprites with ImageReady and create
   your own NES AIM icons!
 - To clarify what each Interpolation method can be used for, Brian Shaefar wrote:
       # Nearest Neighbor (Jagged) for the fast but less precise method. This 
       method is recommended for use with illustrations containing non-anti-aliased 
       edges, to preserve hard edges and produce a smaller file. However, this 
       method can result in jagged effects, which become apparent when distorting 
       or scaling an image or performing multiple manipulations on a selection.
       # (Photoshop) Bilinear for a medium-quality method.
       # Bicubic (Smooth) for the slow but more precise method, resulting in the 
       smoothest tonal gradations.

Back To Articles