What Dimensions Should I Use to Make Pixel Art

[Original article]

This is function 1 of a three-office series on how to do pixel art. In part ii, we create Carmine from the gameTransistor in a style inspired bySuper Time Forcefulness Ultra. In part three, nosotros create a vibrant scene in a style inspired byHyper Light Out-of-stater. Role ii and Function iii are currently in progress.

Pixel art is a lot of fun. I picked it upwardly just last week for Itch.io'south Loading Screen Jam, and it turned out to not be too difficult once I got the hang of it. In this tutorial I'm going to employ the image manipulation program GIMP, which is similar to Photoshop but free and open source. Office 1 of this serial will encompass the basics and showcase the key tools you lot need to achieve pixel perfect art.

Prototype Size

Nigh all monitors nowadays take an attribute ratio of 16:9 (width to elevation ratio), which means that for every 16 pixels in the width, there are 9 pixels in the superlative. The current standard resolution is 1080p (1080 pixels in the acme). To achieve a pixel perfect look, y'all need a resolution with a 16:9 aspect ratio that scales upwards to 1080p.

For case,Hyper Light Drifter has a resolution of 480x270 (270p with an aspect ration of 16:9). 270p is iv times smaller than 1080p. This is how it looks in-game:

Character sprites are treated differently and are generally of the size 16x16, 24x24, 32x32, and 64x64. For a size reference, the grapheme above is a 32x32 sprite.

Layers

Like most art programs, GIMP works in layers, which helps organize your cartoon into parts and allows you to edit each role without affecting the others. Information technology'due south good practice to have each nugget or very like assets in their own layer. If you're cartoon a scene for a town, for instance, each edifice and prop would be in its own layer. A character sprite could have one layer for the head, one for the clothes, and 1 for the weapons.

Pencil (N)

ThePencil is your master drawing tool because it colors each pixel without whatever anti-aliasing. ThePaintbrush, on the other paw, has anti-aliasing and will attempt to smoothen over the pixels wherever you draw. This results in "muddied" pixels. The post-obit GIF shows how they look (Pencil on the left,Paintbrush on the correct).

Remember to set the "Size" to one nether the Tool Options to draw a unmarried pixel. Hold "Shift" on the keyboard to describe a line.

Eraser (Shift + E)

TheEraseris the opposite of thePenciltool: it will remove the pixel on the current layer. Recall to put a check on the option "Hard border:" under the Tool Options; otherwise, it will enable anti-aliasing. The following GIF shows what happens when you have "Hard border:" unchecked (left) and checked (right).

Yous can also hold "Shift" on the keyboard to erase in a straight line. Set the "Size" to 1 under the Tool Options to erase one pixel at a time.

Select

TheSelecttool comes in many forms. Shown on the left side in the Toolbox window, there are iii options toRectangle Select (R),Ellipse Select (Eastward), andCostless Select (F). Shown on the right side in the menu is the pick to selectBy Colour (Shift + O).

You can select an surface area and restrict whatever edits you lot make to only that area in the current layer. For example, here I utilize theRectangle Select to color only the torso of her shirt.

And and so I use the selectBy Color selection to lighten up her hair color.

To deselect, right click on your option, hover over toSelect, and then click onNone.

Motion (M)

TheMove tool allows you to motion layers on a pixel past pixel basis. This is good when you desire to shift assets, such as the grapheme'due south caput or certain props in your scene. Recollect to have the "Layer" option chosen in the Tool Options.

The dotted line around the layer is called the Layer Boundary, which similar theOption tool prohibits any edits on the layer outside the boundary. When you move the layer, the Layer Boundary moves along with it. You can customize the Layer Boundary by right-clicking on the layer and choosing "Layer Boundary Size." Or, yous can automatically adjust the Layer Boundary to fit the sail by correct-clicking on the layer and choosing "Layer to Image Size."

The Move tool tin can also work in conjunction withCut & Paste andSelect to motility a option of a layer. In the post-obit GIF, I use theCostless Selecttool to cut the head and then paste information technology back into the current layer. When the selection is pasted, information technology is placed in a temporary layer called a Floating Pick, which you lot tin can move around and edit. Once you're done moving the Floating Selection into the desired position, you must right-click on the Floating Pick layer and choose "Anchor layer" to place it into the electric current layer.

You can also put the Floating Selection into its own layer by correct-clicking on the Floating Selection layer and choosing "To New Layer".

Saucepan Fill (Shift + B)

The good ol' fill tool from Microsoft pigment. Apply thePencil tool to draw an enclosed shape. With theBucket Fill up tool chosen, click anywhere inside the shape and it will automatically fill the area with the primary color.

Colour Picker (O)

TheColor Picker tool sets the primary color to the colour of the pixel that you click on. Because pixels are quite noticeable, it's expert to utilise the same colour and subtle variations of it as much as possible for a particular nugget; otherwise, you'll get a "dirty" mesh of colors that doesn't expect dainty.

Zoom In (+), Zoom Out (-)

Pixel fine art requires y'all to zoom in to depict in each pixel (i pixel off makes a huge difference!) but to zoom out to run into if your drawing looks skillful at a macro level. This is especially truthful when you're working on a large sail with a lot of detail.

In the post-obit image of Red from the gameTransistor, find how jagged her her legs and arms are when I'm zoomed in. It's unclear to me whether her pose looks skilful or not, but once I zoom out I go a better feel for the overall look of the picture.

Alloy (L)

The Blend tool applies a gradient over a layer or over a choice. GIMP provides a overnice list of pre-made gradients to choose from in the "Layers" window.

Traditional pixel art uses dithering to make a transition between two colors, but an example below fromHyper Light Drifter shows that applying a gradient can give a actually vibrant flavorto the scene.

Patterns

GIMP offers the capability to add patterns. I haven't used information technology personally but I imagine it can exist quite useful for assets that use a repeating texture, such equally the basis inSpelunky.

Last Words

In the next part ( will be published soon! ), I draw Red from the gameTransistor using a majority of the tools described here.

johnstondreautall.blogspot.com

Source: https://www.gamedeveloper.com/art/pixel-art-tutorial-part-1-basics-tools

Share this post