Welcome!

Think Labs is an ongoing effort by Seven2 to provide research and educational opportunities in the web development and mobile field. To see what we’ve been cookin’ up, check out our blog postings.

Created by
Seven2 Login

Categories
Tags
Team Think Labs | Pixel Art Tips
2856
single,single-post,postid-2856,single-format-standard,ajax_fade,page_not_loaded,,,wpb-js-composer js-comp-ver-4.2.3,vc_responsive
pixelart

Pixel Art Tips

Pixel Art is a great way to give you game or design a fun retro look. I figured I’d share a few tips to avoid issues later and make sure you get the best look out of your design.


Lets get started!

Image Interpolation

By default Photoshop uses Bicubic Image Interpolation to help smooth out edges, it basically gives you that nice, smooth, antialiasing look. However when dealing with pixel art, it doesn’t help you preserve nice hard edges, and can make your design look muddy. Especially if you are drawing your art pixel by pixel. The other problem is if you resize your image it will apply more of this antialiasing to you image data.The best move is for you to change your Image Interpolation to Nearest Neighbor. This will preserve hard edges, making everything look nice and crisp. Before you even START designing you’ll totally want to change this option.

This can be found under Photoshop Preferences > General

 

Pixel Perfect Scaling (Start Small)

Another thing you want to keep in mind before starting is figuring out what dimensions and resolution you final product needs to be at. If you need to support multiple resolutions, I honestly wouldn’t even recommend undertaking a pixel based art style, unless you fully understand how to approach it. If things need resizing later on, photoshop can really jack things up for you if you’re not careful.

Say you want each ‘pixel’ square in your design to be 4×4 px, but you decide that scale is to small later on, and resize your image to be 20% bigger. Arbitrary scale will make your ‘pixel’ squares uneven, some may be 5×6 px, or 6×5, ect. Which can make you’re pretty squares look weird. Bummer!

As you can see the top example has uneven pixels.

If you do need to resize, is only size in increments of double or half the size. This insures Photoshop does it’s scaling correctly. I know this can make things bigger than wanted usually… Even if your math is correct on something that normally would be correct, like 150% of scale, photoshop doesn’t look at it correctly and will mess everything up for you. My best advice, START SMALL! It’s easiest to scale up from 1×1 px. Then if you want each ‘pixel’ square to be 4×4, just resize by 400%. Just get a sense of what you final scale will need to be before hand.

 

Use The Pencil Tool

Yup, nice hard edges. Using the brush tool has antialiasing, which will give you fuzzy edges. And at 1px will just turn out slightly opaque. That was easy. Shift + B son. Learn it.

 

Get Some Inspiration (Obviously)

Google is your friend sometimes. Looking other art isn’t cheating. Find examples of pixel art designs you like, or are shooting for. The best way to master something is to study it. Pixel Art is a special craft. Do to the limitations of it, getting something to look how you want can be challenging. You might want your characters to look like they do in Chrono Trigger, so… you might want to look at some Chrono Tigger art for reference. Some major ones for me where Zelda: Link To The Past, Chrono Trigger, and Metal Slug, with a Blade Runner and Cyberpunk style twist.

 

 Keep Animation In Mind (Use Layers)

Here is the fun part of pixel art, keyframe animation. Make it easy on yourself and design you characters and animated objects in layers. Pretty much like you would for vector based Flash animations. This will make your keyframe animation a lot faster. Because you won’t have to fill in missing data when your character moves.

 

Image Interpolation (Again?)

Yes. When exporting pngs of your sprites there is yet another option here, but it’s called “Quality,” you’ll want to be sure to switch this to Nearest Neighbor as well.

 

There you have it. Hopefully this can help you avoid running into any problems later on, and keep the visual fidelity of your pixel art looking it’s best.