Creation of pixel art graphics is not an easy job, it requires proper experience and, most importantly, time. It is not easy to create a complex pixel art scene quick, because you need to plan all the elements well and it is hard to automate the routine; a lot of components of the image must be developed pixel by pixel manually. Remember that only the artwork that was French polished (which needs more time) would be perceived by the audience as a professional one, any other attempts could look like pixel gimcrack.

So what should you do, when you need a pixel art assets for your game, but time is not an option? The answer is vector graphics. You are not misheard. The vector editor may help you to create pixel art scenes pretty quick, automating many routine procedures. The tool I’ve chosen is Adobe Illustrator, it is popular, it is powerful and in most case it is very handy.

There are several scenarios how Illustrator can be turn into the pixel art editor. Each one has its own advantages and disadvantages. Some of them are simple (moreover they can be called elementary ones), but some other ones require more patience. The general idea is clear: you draw vector shapes like you usually do in a vector editor, focusing mainly on drawing itself and having all the editing advantages. But then you turn (or stylize) the image into pixel art style.

Way 1. The anti-aliasing option turned off.

Simply uncheck the the specific checkbox in the Edit>Preference>General… menu or the same checkbox in the Save for web option panel. Voila! Now all the artwork you are working with has no anti-aliasing, so all graphic elements have hard edges.

The easiest one. It is very simple, but the result can be far away from the ideal. It is suitable for large geometric elements, but it is hard to control tiny elements, like outlines and so on. It is also very unpredictable, sometimes it is hard to imagine the final result. There can be some graphic artifacts.

Way 2. Rasterized layer.

Few people know that you can apply a raster effect from the Effect menu to a whole layer rather than an individual object. That means that an isolated zone with a specific properties can be created. For instance, a layer can operate without anti-aliasing, while other ones keep the anti-aliasing turned on. That may help to create interesting combinations. Moreover you can control the properties of the artwork, for example, the size of pixels. If you simply switch off the anti-aliasing in Adobe Illustrator you got the pixels that are equal to the standard screen pixels (1=1). But sometimes it is more comfortable to increase the size of decorative pixels of your artwork, for example 1 decorative pixel=2 screen pixels and so on.

To turn a layer into anti-aliasing free region you have to select by clicking at an image of a circle in the Layers panel. That means that the layers is now selected and considered as an integral object. Then choose Effects>Rasterize…. In the effect’s property panel find a section called Resolution and change it from the predefined one to a custom one. Write 72 (96) ppi for 1=1, 36 (48) ppi for 1 = 2 and so on.

You also can apply the Rasterize… effect to individual objects. It is very handy to turn on some texts into pixelated form in a case you have no proper pixel fonts.

The main disadvantage of such method is a problem with tiny elements. Also after export some images can be blurred a bit, it such particular case you have to play with the coordinates of the objects or canvases.

Way 3. Pixel art brush.

In many cases you need not a authentic pixel art for your game, but only a stylization. You have to give players some visual experience, which is similar to retro 8-bit game, but not equal to them, because your game is modern. The stylized pixel art has a mood of retro images, but intend more freedom in guideline interpretation, because there is no fixed grid of elements. The images have some hard edges, but they are decorative elements rather than truly pixels. Such approach helps to create illustrations with more complicated shapes and they look more creative. A good example of using of such style are animated credits in Pixar’s film Wall-e, where there is a short section with characters turned into 8-bit graphics. The images look like pixel art, but it is not authentic pixel art where all pixels are strictly aligned.

Such approach was used by me for game Flippy Rocket by Spooky House Studios, where the rocket was created by using stylization.

The design process is based on using special vector brushes, that imitate pixels. To create such a brush you only need to create a pixels, in other word, a square should be drawn. It must be gray and its dimension must be integer number. After that simply drag the shape into the Brushes panel. The brush will be automatically created, from the list choose New Scatter Brush. In the brush properties change spacing property if you want and choose Hue shift in the Colorization drop down menu, that will help you to change the color of the brush. Now if you create a shape and apply the brush to it, the shape will feature some hard edges. Remember that the color of the stroke should be equal to the color of the fill. You can now change the size of decorative pixels by simply changing the weight of the strokes.

Way 4. Vector pixel art.

Finally you can use Adobe Illustrator directly for created mosaic images from individual vector pixels. Draw a square of a specific dimensions (2×2 screen pixels, 4×4 screen pixels), color it, clone it to created second decorative pixels and so on. Since the process is very similar to work in a raster editor, but has some flexibilities: you can easily stretch elements by using sub-selection tool. Remember that View>Pixel preview mode must be activated for more accurate aligning of decorative pixels.

One of the most pleasant opportunities that may offer Adobe Illustrator is handy image tiling. You may create a fragment of a pixel texture and then turn it into a swatch, so it can be latter be used as a texture for vector fills. That is very suitable for such elements as images of buildings, walls, ground surfaces and so on.

# # # #

March 31, 2014