How to Draw Pixel Art in Paint

Larn pixel art by making this cool game graphic symbol!

This is a guest post past Glauber Kotaki, an experienced 2D game artist bachelor for hire.

Pixel Art is really popular in games these days, and for some keen reasons:

1. Looks. Pixel art looks awesome! There's something to be said nigh making the nearly well-nigh each pixel in a sprite.
2. Nostalgia. Pixel art brings back a keen nostalgic feeling for gamers who grew up playing Nintendo, Super Nintendo, or Genesis (like myself!)
3. Ease of learning. Pixel art is one of the easiest types of digital fine art to learn, especially if you are a more of a programmer type than an creative person ;]

So wanna endeavour your manus at some pixel art? Follow forth with me and I'll prove you how to brand a unproblematic simply absurd game character y'all tin can apply or tweak in your ain games!

And as a bonus, afterward I show you lot how to make the character, Ray will dive in and show y'all how to integrate it into an iPhone game!

To follow along with this tutorial, you will need Adobe Photoshop. If you do not have Photoshop, you lot can download a free trial from Adobe.

Read on to start pushing some pixels!

What Is Pixel Fine art?

Before we get started, let'due south exist really articulate virtually what pixel art is – it's not as obvious as y'all might think. It'due south besides a matter of some debate and style, but bear with this definition for the sake of this tutorial :]

The easiest way to define pixel fine art is by proverb what is non pixel art: that is, annihilation that generates pixels is non pixel art. Here are some examples:

Slope

Gradients: Choosing two colors and calculating the ones between them in a infinite interval. Looks cool simply not pixel art!

Blur

Blur tools: Identifying the pixels and replicating/editing them to make a new version of the previous image. Once again not pixel art.

Anti-alias

Anti-alias tool (basically, generating new pixels in unlike colors to something look 'smoother'). You should avert them for now.

Some would say that fifty-fifty automatically generated colors are non pixel art too, implying that layer blending effects (mixing pixels between two layers in a preset algorithm) are not immune. But since most hardware nowadays tin can deal with millions of colors, this can ignored – all the same, using fewer colors is a skillful practise of pixel art.

Other tools such equally the line tool or the paint bucket tool also automatically generates pixels, only since you lot can configure them to non anti-allonym their edges, giving you lot control over every pixel they fill, are considered 'pixel fine art friendly'.

So in the end, pixel art is all well-nigh taking great care about the placement of each pixel in a sprite, about oft manually and with a limited palette of colors. Let'south try it out!

Getting Started

Before you outset making your showtime pixel art asset, you should be aware that pixel art is not easily resizable. If you lot endeavor to scale information technology downwards, it volition look like a mess. If you endeavour to calibration information technology up, it can look OK equally long as you use a multiple of two (only of course will be more pixelated).

To avert this problem, you should first put some idea into exactly how big you desire your game character/enemy/game chemical element to be before you get started. This should be based on the screen size of the device yous're targeting, and how large y'all want the "pixels" to look.

For example, permit'due south say you want the game to look double-sized on an iPhone 3GS ("I really want to requite a retro, pixel expect to my game!"), which resolution is 480×320 pixels. So your working resolution will be half of that size, or 240×160 pixels.

Open a new canvass on Photoshop (File > New…) and ready this aforementioned size and then y'all can wait at it and choose the size for your grapheme.

There: 32x32 pixels!

I chose 32×32 pixels not just because information technology seems adept plenty for this resolution, but 32×32 pixels is also a power of 2, which can likewise exist handy for game engines (tile sizes are often a power of two, textures are padded to a ability of two, etc.)

Tip: Even if the game engine you are using accepts any prototype size, information technology's a good do to apply even number image dimensions anyway. This style, if the epitome ever needs to be scaled, the dimensions volition exist divided more cleanly resulting in a better await.

Making Your Showtime Grapheme

Pixel art is well known, on its best form, for its sharp and piece of cake-to-read graphics: you can identify the graphic symbol face, optics, pilus, body parts with only a few pixels. However, the developer size is much more than complicated: the smaller your character is, the more difficult it is to make everything fit.

To brand things more than practical, cull what's going to exist the smallest, readable affair on the character. I always choose the eyes, considering they are (magically) ane of the best ways to give life to a character.

In Photoshop, choose the Pencil tool. If you can't discover it, merely press and hold the Castor Tool and scroll down to Pencil Tool (information technology should be the second one). You will just need to resize it to castor size 1 (yous can click on the tool options bar and alter its size or just hold the '[' key).

You volition eventually need the Erase tool too, so click on it (or hit 'E') and alter its settings to "Manner: Pencil" (and then information technology does not anti-alias as a brush).

And start pixeling! Draw 2 eyebrows and an heart on the prototype, kinda like this:

Yay! I'm pixelling!

Y'all could already starting time with the lineart (drawing as you ordinarily would, making the lines and shaping the character), but a more applied way to do so is to first make its silhouette. The proficient thing is that yous don't need to exist perfect on this phase, just try to take the sizes of things (head, torso, arms, legs) and the character'due south initial pose.

Go ahead and depict something like this with a gray color:

Doesn't need to be perfect at this stage

Notice that I besides left some bare space. You don't really need to fill the whole sail, y'all'll need more infinite for future unlike frames, and it's very useful to continue the same canvas size for all of them.

One time you terminate the silhouette, it's time to begin the lineart. Now you should exist more careful with pixel placement, so don't bother making the apparel, armors or any details still. If y'all need information technology, you tin can add a new Layer so y'all never lose your original silhouette.

If you feel that the pencil tool is a bit too slow to draw, y'all tin can always employ the Line tool to makes things fast – simply think to prepare some pixels since information technology's non as verbal as the Pencil. You'll need to configure it though, as shown beneath:

Choose the Line tool by pressing and belongings the Rectangle tool, and scroll down to Line.

Go to the tool settings bar and select the third icon ("Fill pixels"), modify the Weight to i (if it isn't already) and uncheck "Anti-alias" (your nemesis!). Information technology should look like this:

Tip: Notice that I didn't fabricated the lesser outline for the feet. Information technology's not really necessarily since anxiety are not such an essential part to distinguish equally the legs are AND you lot save a row of pixels in your canvas.

Applying Color and Shading

Now you're ready to start colouring it. Don't bother choosing the right colors now, it's very like shooting fish in a barrel to change them later on, just make sure that everything has its ain color. For now, you tin can use the default colors from the Swatch tab (Window > Swatches).

Go alee and colour your hero kinda like this (just feel complimentary to be creative and utilize your own colors!)

Good color contrast makes a better readibility of your asset!

Notice that I all the same didn't brand any outline for clothes or pilus. Always remember: save as many pixels as you can!

Oh, and don't waste matter time by carefully placing each colour pixel. To speed things upward, depict the lines for each color and use the Paint bucket tool to fill the spaces. You lot'll need to configure this tool too. Select information technology on the tool bar (or simply press 'G') and change the Tolerance to 0 and uncheck anti-alias.

Tip: If you lot ever need to utilize the Magic Wand tool (a very useful tool that select all pixels with the same color), apply the same settings equally the Pigment bucket – no tolerance or anti-alias.

The adjacent stride will require you some basic light and shading knowledge. If you don't know too much about it, here's a quick guide for information technology, and a more complete i here. If you don't feel like learning this correct at present, you can skip this step and get toward to "Spicing up your palette" – shading, after all, is a matter of style, choose what you feel right for your game and capability.

Or, y'all tin can just make your shading similar to my example below!

Use the same light source for the whole asset

Endeavour to requite equally much shape as you lot desire/can, this is usually where the asset begins to wait richer. For instance, you can at present see a nose, eyes frowning, hair volume, depthness and folds on his pants. You can also add together a few light spots to it, information technology will expect even better:

Continue the aforementioned light source from the shading

Spicing Upward Your Pallete

A lot of people employ the default palette colors, merely since so many people use those colors they wait the same across many games.

Photoshop has a great range of colors on its standard pallete, but don't rely too much on it. Information technology's best to make your own colors by clicking the main palette at the bottom of the tool bar.

Then, in the Color Picker window, browse through the right-side bar to choose a colour and in the chief area to choose its brightness (more than white or more black) and saturation (more than vivid or duller).

Once you lot choose it, click OK and reconfigure the Paint Bucket tool. Don't panic, yous will just uncheck the "Contiguous" box, so when you paint the new color, every pixel with the same colour in the layer will be painted too.

This is another reason why information technology's important to keep the colour count low, and to ever use the aforementioned colour when dealing with the same chemical element (shirt, hair, helmet, armor and so). Merely don't forget to use a unlike color for other areas, otherwise information technology's going to be recolored likewise!

Uncheck the "Contiguous" box to paint all pixels from the aforementioned color

Change the colors every bit much every bit you want and get some sexy colors on your character! Y'all tin even recolor the outline, but make certain it will blend correctly with the background.

Finally, make a background color test: brand a new layer underneath your graphic symbol, and fill information technology with various colors. It'due south really important to make sure your grapheme will exist visible on calorie-free, night, warm and absurd backgrounds.

Tips on Editing Pixels in Photoshop

As y'all could run across, I turned off the anti-alias on all of the tools I've used so far. Don't forget to turn it off on others tools every bit well, such every bit the Elliptical marquee and Lasso tool.

Information technology could come out handy to resize a picayune bit some parts or fifty-fifty rotate them to breathing farther frames similar running cycles. To do so, use whatever marquee tool (hit 'M') to select an area, correct-click it and choose 'Free Transform', or only hit Ctrl+T. You'll be ble to resize and rotate it freely.

However, Photoshop automatically anti-alias everything edited using the Free Transform function. Before confirming your edit, go to Edit > Preferences > Full general (Ctrl+K), and alter the "Image Interpolation" to "Nearest Neighbour". In a nutshell, it calculates the new position and size very roughly, applying no new colors or transparency, preserving the colors you chose.

Integrating Pixel Art into an iPhone Game

Howdy everyone, information technology's Ray here, and I'm jumping into this tutorial at this point to show you lot how you can integrate the pixel art you just made into an iPhone game using the Cocos2D game framework.

If you are new to Cocos2D or iPhone evolution in general, y'all might want to start with one of the many other Cocos2D and iPhone tutorials on this site first. Once you have Xcode and Cocos2D installed and understand the nuts, read on! :]

Create a new project with the iOS\cocos2d v2.x\cocos2d iOS template, proper noun information technology PixelArt, and select iPhone for the device family.

Drag the final pixel art character you created into your project.

Then open HelloWorldLayer.g and replace the init method with the following:

-(id) init {     if( (self=[super init])) {          CCSprite * hero = [CCSprite spriteWithFile:@"sprite_final.png"];         hero.position = ccp(96, 96);         hero.flipX = YES;         [self addChild:hero];      }     return self; }        

We position the sprite to the left side of the screen and flip him and then he's looking to the right.

Compile and run, and you'll come across your sprite every bit expected on the screen:

However, remember equally we discussed earlier in this tutorial, we wanted to scale up the art artificially big so the private pixels are really visible to give an extra-blocky cool pixel art feel.

And so add this extra line within the init method:

hero.scale = 2.0;        

Easy, right? Compile and run and… wait a minute, our sprite is blurry!

This is because by default Cocos2D anti-aliases fine art when information technology scales it. For pixel fine art nosotros don't want that – we want to preserve the difficult edges.

Luckily, this is quite easy to fix! Only add this extra line:

[hero.texture setAliasTexParameters];        

This configures Cocos2D to scale the image without anti-aliasing, then it still looks "pixel-like." Compile and run and w00t – it works!

Notice the reward of using pixel art – we were able to use a smaller image size than what is actually displayed to the screen, saving a lot of texture retentiveness. And we don't even need to provide carve up images for the retina display, as we want that blocky wait!

That'due south it for me – dorsum to Glauber, who volition wrap it up!

Where To Go From Here?

I hope you all enjoyed this tutorial and learned a fleck more than nearly pixel art!

Earlier we go, here are some final tips:

• E'er think to avoid using anti-alias, gradients or also many colors for your assets. This is for your own good, unless you lot actually know what yous're doing.
• If you REALLY want to emulate a retro fashion, look for art from old consoles with limitations, such every bit 8-bit or 16-bit consoles.
• In that location are PLENTY of styles in pixel art aside from the 'retro' ones. As hardware avant-garde, avails could use more or only different (sexier!) colors. This led to more variation and even new artists who didn't know how to use older hardware making pixel art. Newer consoles like Game Boy Advance, Nintendo DS, Playstation ane and some mobile phones take games with these styles, then look into those!
• Some styles don't utilize dark outlines; others don't even utilise light or shadow variation. Information technology depends on the manner! Knowing how to shade the art is skilful, which is why we went through it in this tutorial, but keep in listen the style you are going for.
• If you experience confident, you tin search more detailed tutorials for these terms: isometric, dithering, anti-alias (aye, there is a way to make it without automated tools), celout and subpixel animation.

Pixel Art seems like shooting fish in a barrel to nail as information technology is easy to get started, but it's actually very enervating and takes some time to get the hang of it and make adept pixel fine art.

The best style to accelerate your skills is to practice, practice, exercise – and get some feedback from fellow pixel artists!

I highly recommend posting your work in pixel art forums to have other artists give you communication – a great way to improve your technique! Start pocket-sized, practice a lot and get feedback, and y'all can create awesome game-set pixel art!

If you have whatsoever questions about pixel art, please join the forum discussion beneath – and I hope to see some bang-up pixel art from you guys in the hereafter! :]

This is a invitee post by Glauber Kotaki, an experienced 2D game creative person bachelor for hire.

raywenderlich.com Weekly

The raywenderlich.com newsletter is the easiest way to stay upwardly-to-date on everything you demand to know equally a mobile developer.

Get a weekly digest of our tutorials and courses, and receive a free in-depth email course as a bonus!

pritchardsibacted.blogspot.com

Source: https://www.raywenderlich.com/2888-introduction-to-pixel-art-for-games

Share this post