Menu

Tutorial: Pixel art with Photoshop & a few tips


I have never done pixel art before, but it was something I wanted to try out. So I started out to design a pixel character, which I wanted to try and animate. I liked the end result so much that I ended up making two more characters and a level mockup for a prototype game. The game is planned to be an example project included in the alpha version of HactEngine which is planned to be released on December 2014.

I used Photoshop CS 5.1 for the art and for testing the sprite animations. I use Photoshop daily and I found it to be quite a good program to do pixel art. You can also easily test your sprites and see how the animations work with Photoshop's built-in animation window.

I'm going to tell you the basics, so you can get started creating your own pixel art. The names or places of the settings might vary slightly depending on your version of Photoshop, but in my experience they will be in about the same place, so you should still be able to find them. I will go through basic things to get you set up and then a few things I found out to be handy.

Setting up

Setting up Photoshop for pixel art is really simple. First create a new document; the size is up to you and you can resize your art afterwards. Then go to "Edit" > "Preferences" > "Guides, Grid & slices".

Preferences

From the "Grid" section, set “Gridline Every” and “Subdivisions” to 1 and select "pixels" from the drop down menu, if it's not already selected. Then you can close the "Preferences" window.

You should use the pencil tool to draw your pixel art. You can also set up the eraser tool to pencil mode which might be handy. To change the eraser tool's mode, just select the eraser tool and change the mode to "Pencil" from the drop down menu in the upper bar (next to "Opacity").

It can be found here:

PencilEraser


Now you are ready to start doing your pixel art!

Then some tips!

I learned a lot by googling and testing things out, so I decided to list here a few things that you might find useful. 

Isometric pixel art

Isometric is a very popular camera angle for games, so you might need to know how to do isometric pixel art. With pixels it's amazingly easy. To achieve an isometric view you should draw your lines so that there is always two pixels accross and one up or down. This way the object you are drawing is automatically in isometric view!

Example of an isometric pixel cube:

IsometricCube

Resizing your pixel art

It might also be useful to change the document's resampling. By default, it's set to "Bicubic (smooth gradients)", which will make the pixel art blurry if resized. To avoid this effect and keep the pixels clean it should be changed to "Nearest Neighbour (preserve hard edges)".  It can be changed from "Image" > "Image size" > "Resample Image". 

ImageSizeWindow

Resizing an image will create new pixels and the program will calculate what colour they should be. In some cases resizing will slightly alter the original image, which happened to me once or twice. If it happens you can undo the transform and try again; this time, resize it slightly bigger or smaller than on the first time. While resizing you will see how it will look like.

     Resize
                

Sometimes Photoshop will still use the Bicubic resampling even if you change it from the "Image Size" window. If that happens you can also change it from "Edit" > "Preferences" > "General" > "Image Interpolation". You must remember to switch it back when necessary, since this will set it to be the default option.

Custom patterns and brushes

In Photoshop, you can create custom patterns and custom brushes with ease and save them for future use. The hard part is to create usable pattern so that the brush will actually be useful. These can also be used to create larger areas or textures you can use for your pixel art.

If you create a custom brush, it will appear at the bottom of your brush list. Just select it and you are good to go.

Patterns are really useful; not only in pixel art, but overall. You can use a custom pattern to easily make larger looping backgrounds, like a wall. 


Example of a 1x1 wall tile: 
wall1x1
Example of a 2x4 wall tile:
wall2x4
Make a new document and create an area for your wall, let's call this image a tile. The edges of the tile should be so that the top and bottom edge and the left and right edge should be the same. This way the tile can be tiled seamlessly. You can use the guides to see where the lines should be at the edges.

After you are done with the tile, you have to save it as a pattern so you can use it in Photoshop. You can save it as a pattern from "Edit">"Define Pattern", just give it a name and press "Ok", your pattern has been saved.

If you're making a game, it's always good to test if your textures or images are tiling properly. This one will be used on the walls, where there will be a lot of other objects in front of it, so the looping effect won't be too obvious.

Dithering

Dithering means mixing or blending colours which is useful if you are using a limited colour palette. By using dithering, you can create more shades of the colours you are using. Below, I have two examples.

Example of a non-dithered and a dithered ball:

Dithering

 

The left ball doesn't look too good; it would need more shades to have the proper "round" look. The ball on the right side looks a lot better, even though it uses the same amount of colours. If you want to achieve a really smooth end result, you should use more colours, rather than dithering. You should use dithering only if you have a limited colour palette or if it's a style choice. 

If you create a custom pattern for dithering, you can use it with the Paint Bucket tool. Select the Paint Bucket tool and select your pattern from the drop down menu in the settings. Just colour an area between the two colours and then paint it with the Paint Bucket tool and it will paint it with the selected pattern.

Example of the Paint Bucket tool with a two colour checker pattern :

DitheringPaintBucket

The result might not be perfect and it might need some polishing, but if you need to dither larger areas this will make it a lot faster. You can also make custom brushes with different patterns, which you can use to achieve better dithering results faster.


Conclusion

Pixel art was really fun to do. At first, it seemed hard and a bit odd since I have never done it before, but I think I did good. In this tutorial, I wrote a few tips that seemed useful to me, but there are way more to be learned in the wild world of the internet. So, search for more tutorials and try things out, it's the best way to learn.

I also ended up doing premilinary sprite sheets for the three characters I made and tested them with Photoshop's animation tools. I guess those are topics for future posts!

Feel free to comment and ask about stuff, or suggest a topic you would like to hear about!


Share this:
Category: Graphics   


comments powered by Disqus