PIXEL ART

PIXEL ART There are some things you should consider when working with pixels. I'm starting off rather gloomy, but don't worry! It's all uphill from here. Investment of Time and Effort Working on pixel art is a time-consuming and often difficult process. The more time you spend working on, and then refining a piece, the better it will look. This can often take hours, though the rewards are well worth it. If you are not prepared to invest the time on your work, then it will look shit, regardless of how many tutorials you read. Basic Art Skills Basic art skills - knowledge of colour, texture, perspective, form and anatomy, as well as a fair bit of experience of looking at things, transfer just as well into this digital medium as they do into others. Any inability to produce a sprite you are happy with may be due to a defiency in this area. If you can't draw a person on paper - or at least tell good art apart from bad, you may well struggle with pixels. If this is the case, then brushing up on your basic art skills is a must. Nothing Ever Works First Time The first few iterations of your lineart or shaded image may often look terrible. Don't be disheartened - even the most seemingly hideous mistakes can be edited into something decent. I quite often find myself working by the process of refinement. Once the latest version of your piece is complete, sit back and take a good look at it before fixing it. This 'tweaking' usually breaks down into a simple, 3 step cycles: 1 - What is wrong with it? 2 - How can I fix it? (Often defined by 1) 3 - Fixing it. Check out this painful progression. What was I thinking when I started it? Nethertheless, I think I saved it.

The Use of References Often, you can make up for a lack of knowledge of your subject by working from relevant photos or other images. These can be found from a variety of sources, the most immediate being via a search engine on the internet. You can also find new and interesting colours from photographs and other people's pixel art. Remember that direct plagiarism, including the editing of other people's work, is distinctly uncool.

Once you have a firm concept of what you want to draw in your mind, the formation of a piece of pixel art invariably begins with its outline. BLACK is the colour traditionally used for lineart. You might like to try experimenting with other colours. For smaller game sprites, this lineart is often most easily produced using the single-pixel-width, free draw tool (with

help from line and other shape tools), often placing down a single pixel at a time. For larger backgrounds, sprites or set-pieces, you may find it easier to scan hand-drawn art, or use a tablet. In the case of backgrounds, it is often easier to build them up piece by piece, layer than layer, rather than as one combined piece. Breaking down the problem simplifies things, and editing object position is much simpler.

At first glance these outlines appear harsh and jagged, due to the square nature of pixels and their dark colour. Don't worry about this - things will get better later. For game sprites, I find it preferable to build them bulky, firmly packed and purposeful. Don't do any pose by halves exaggerate movements and don't let characters stand around limply. Keep your sprites interesting and energetic. Remember, it will rarely look right first time round! Figure out where your lineart is flawed, and fix it until you are happy with it. Take your time to get it right at this stage - mistakes will be harder to correct once you have started shading.

It is strongly advised that you edit every line down to a single pixel thickness, like so :

This is a boring chore at times, but it does improve the appearance of your sprite. Failure to put in this effort shows in the reduced quality of the final piece.

COLOR AND RGB VALUES Once you are happy with your lineart, you need to decide how best to colour it. Good selection of colours not only takes your art closer to looking like a real object, but can add personality and mood to it. Conversely inappropriate use of or mixing of colour is instantly noticeable and most distracting. RGB VALUES Computers use a combination of three different colours to create a single pixel: Red, Green and Blue (RGB) Inside a computer, each of these three colours is given a value from 0 to 255, where 0 means 'none' and 255 means 'a lot of' These colours can be mixed in varying amounts to generate different single colours on a pixel, like paint. However some of the colours generated are not what you would expect from mixing paints. 255 , 0 , 0 gives a very bright red. 1 , 1 , 1 gives black. 255 , 255 , 255 gives pure white. 140 , 140 , 140 gives a medium grey. NOTE - 0 , 0 , 0 is often reserved for a special case - transparency Preset palettes may come with some nice colours, but an understanding of how to create new colours, and find new shades of existing ones with RGB values is helpful. Many modern art packages have windows like that shown below on the left, allowing you to pick colours from a vertiable rainbow. Graphics Gale which I recommended earlier also lets you load your own custom palettes, but creating new ones requires double clicking on a colour before selecting from this range, or manual use of the RGB sliders. The sliders may initially seem cumbersome and confusing, but you quickly get used to them and as they reside in the same window, they actually end up faster to use. Use of them can give you a good understanding of colour via RGB values.

For art in general, I find it preferable to use 'softer', pastel colours and avoid strong, neon colours (ones with a very high value in one or two RGB values, and a very low value in the others ) They have their place, but they are very garish and I would advise against using them often.

Here are a few examples of colours that I personally think work well, and colours I don’t:

As mentioned at the top, use of colour can be very important in creating mood. Light, pastel tones - close to grey (almost equal RGB values) create a soft, carefree atmosphere. Dark colours, with low RGB values create an oppressive, brooding atmosphere. Using a restricted palette with variations on a single colour can produce some interesting results. A Grey palette is often used for flashback scenes. Brown palettes look like parchment or old photos. A blue palette can be used to evoke everything from an ocean vibe to deep sadness.

Finding the right colour(s) for your piece isn't always easy. Some experimentation may be required, so don't be afraid to use those RGB sliders. It took a few false starts to find a suitably vibrant, non-clashing set of colours for this superhero:

The initial colours I chose for this column failed to fit with the mood of the scene they were to be inserted into. The top is too dark and gloomy, the blue on the bottom too obtrusive. Some edits used a lighter yellowy-grey for the top (all RGB values increased), and a cooler glacial blue for the bottom (all RGB values increased. Red value then raised even higher, closer to the Blue value) Photographs and other people's pixel art can be a great source of colour inspiration if you find yourself stuck for ideas.

SHADING All objects have presence in three dimensions. Their form becomes powerfully defined under a light source. Planes facing towards the source are illuminated. Planes facing away are starved of light and remain dim. On a two-dimensional computer screen, it is the job of this shading to convey a sense of form and depth. Now that we have shape from our lineart, and the foundations of colour, we can variate that colour to really bring our piece to life. Establishing Light Sources In order to begin shading an object, it is important to first establish where light falling upon it is coming from. For outdoor settings, or indoor areas with consistent overhead lighting, it helps to pick a constant direction for light to fall from. Some people like their light to fall from the upper left corner of their image - I prefer the upper right and will use this for the rest of this tutorial. This common kind of light all strikes your object at the same angle.

Areas with one or more light sources illuminating shapes all around them are a special case and requires a little more work and attention. Good use of alternate light sources helps create mood and atmosphere in a scene. It is a rather obvious point, but important to note that in these cases, light noticeably decreases in intensity the further from the source you are.

The Shading With our light source firmly established, we can finally shade our object, starting with the simple example of a sphere. But first, an example of what not to do:

This called 'pillow shading', a great evil spoken of by pixel artists in hushed tones. It is the work of the devil, and appears to assume a single point light source hanging directly between us and our object. Do not, under any circumstances, shade a shape this - it looks rubbish. This sort of radial tone gradient is suitable only for a surface lit by a very close light source - like the burning torches above.

As stated above, however, our light falls uniformly from the top-right corner of our image. Bearing this in mind, I like to start shading an area with two new tones - one darker than the base tone (lower RGB values) and one brighter (higher RGB values) The lighter tone should be applied to surfaces facing towards the light source The darker tone should be applied to surfaces facing away from the light source

Our sphere immediately gains form and depth. We can enhance this effect by adding even more tones, above and below our two new ones.

A this point you may find your object appears to light or too dark and need to correct the tones you are using. This is not uncommon. These principles apply even more simply to a flat-sided shape.

A sphere is a rather boring and sterile object though. The same principles can be applying to a more interesting, less uniform object like this fat little creature:

Note how planes facing towards the light source are brightened, and those facing away dimmed. A good understanding of the three dimensional form of your piece is vital for shading; so that you can identify the amount of light these surfaces receive and shade appropriately. In this example I have used a darker base colour and worked more toward the lighter end of the spectrum. The darker shadows are still there, but the overall effect is the lightening of the flesh to a tone I felt was more appropriate.

In some cases (faces, smooth machinery) detailed, careful shading is necessary. In others - don't worry about it too much. I find that messy shading often improves the texture of a surface. As the flat-sided shape above showed, the distance between different shades is by no means constant. For more cuboid shapes, the top and bottom surfaces are best implied by a narrow area of shading. Observe the example of this slab of rock.

Note again that on natural surfaces like this, rough shading can help. Varying the colour as well as the brightness of new shades can also produce some interesting results (increasing or decreasing one or more of the RGB values more than the others). You will need to do this for non-white lighting as well.

SOFTENING OUTLINES Now that your sprite is almost looking like the finished product, one problem may remain - those dark, monotone outlines that we started with. In some parts they are fine, but in others, especially areas where colours are primarily pale, they appear harsh and inappropriate. The obvious solution is to lighten them up a bit. I'll split this down into three sections: SOFTENING OUTLINES In most cases the most appropriate action is to replace the black outline with a colour somewhat closer to its surrounding shades. Light is an important consideration here. Lines under direct light should be lightened more. Lines in shadow should be lightened less, if at all. Take the extreme case of this mummy - before and after its outlines have been lightened.

If you want to do this really seriously, you might also want to gradiate lightened lines, using even more shades between their lightest tone and the original black. This ball example shows the basic principle:

BRIGHTENING OUTLINES Sometimes the shade you want to replace the lineart with is lighter than line 'and' its surrounding shades. I find this useful along the non-outline edges of a shape where edges meet.

This simple box example says it better :

REMOVING OUTLINES In some cases the sprite will look better if certain outlines are removed entirely, and replaced by an adjacent colour. This includes instances such as edges between flesh and clothes, and colours painted on a surface. Take this example of a shirt sleeve hanging on an arm - before and after.

ANTI – ALIASING Anti-aliasing is the process of 'smoothing out' the colours of an image - in its simplest form, taking two pixels and moving the RGB values of each closer to the other. The 'Blur' tool of many more comprehensive art programs performs this function, although it is a very blunt instrument. A more refined approach is required with pixel art, where the aim is to reduce the 'jaggedness' of the lines where two shades meet. NOTE - Anti-aliasing is not a holy grail of pixel art. You may not even need it. There are many situations however, where smoothing out jagged edges with a pixel gradient improves the appearance of a sprite.

METHOD 1

This method first lightens the colour of the line, then shade away from each 'step' in shades, getting gradually closer to the background colour. This method is most useful for shading towards the outlines of sprites, though it need not use as many shades as this example. NOTE - Do not anti-alias outside the outline of a sprite (ie - in the transparent bit) unless you anticipate placing it against an unvaried background.

METHOD 2

This is an alternate, slightly different method. The RGB value of the line remains unchanged, but smoothing of tone is focused more at the 'joints' or 'steps' of the edge. I prefer this for drawing lines on a surface - tattoos or paint lines for example.

DISPLAYING PIXEL ART At some point in time you may want to save your art into an external file for distribution or display on a web-page. Some file formats are suitable, others are not. What not to use: .BMP - 16 million possible colours for each pixel. Extremely inefficient for pixel-art storage. .JPG - Lossy compression will smudge your nice crisp art in a variety of horrible ways. What you should use: .GIF - Saves images with up to 256 different colours. Small file size allows fast loading. Loss of image quality only occurs when you exceed 256 colours, though it is unlikely you will reach this point unless you are saving a composite of many sprites. .PNG - Similar to gif, except that it will allow you to save images with more than 256 colours without image loss. Technically better, but not well supported by Internet Explorer (boo, hiss).

By far the most commonly used format for pixel art is .GIF. As well as having been well established, it also supports transparency (usually RGB value 0,0,0) and animation. This makes it exceedingly useful for displaying game sprites.

Lighting theory Introduction: Lighting theory. It sounds very technical and scary... and it may seem like a boring subject. But, it's actually not that hard and it will help your shading tremendously. And, it doesn't only apply to making bases, it also applies to dolls (or drawing and painting, for that matter)! A common mistake: First off, I'll show you how NOT to do it. This is what some people do when they shade: they trace the outline with a one-pixel thick line of shading. After that, they pick a lighter color and repeat the process several times. Let's apply this technique to a ball and see how it looks.

Now, be totally honest. Does this really look like a ball to you? It's not very realistic, is it? There are several glaring errors with this ball: -The light source is weird

A ball would never be lit this way, unless there's a tiny spotlight pointed straight at the middle of the ball. But what if you applied this to a whole doll? It would look like every section of the doll has it's own tiny spotlight. Now that would be weird, right? -The highlight shape is wrong A ball is perfectly round, obviously. So, any highlight on it would also have a round shape. But with this shading method, you don't have any control over the shape of the highlight. On this ball, the highlight ended up squarish. It's unrealistic, but it's also just plain ugly.

-The shading isn't smooth With pixel art, you are going to have jagged outlines. There's no escaping this. But, if you follow the outline exactly with your shading, you're going to transfer the same jaggedness throughout your whole shading! This creates the optical illusion of lines running through your shading. If you look closely, you can see dark lines forming a cross shape on this ball. Also, you can see lighter lines forming a star shape on it.

But, how can we do this better? The answer is... lighting theory! The rules of lighting: On the right I pixelled a new ball with lighting theory applied to it. It looks better, no? I used less colors than on the first ball and there are bigger areas of the same color... still, it looks smoother and more realistic.

Here's how it works: - Any surface that faces the light will be lit, provided there is no other object blocking the light. - Any surface that faces away from the light will be in shadow. - Any surface that faces the light directly will get the brightest highlight. Now that sounded rather technical, so I'll further explain with a picture. .

We can apply the same rules to different shapes. Here are some examples, all lit from the same direction as the ball in the previous example.

It's a good idea to practice shading these shapes. It might be easier just to do it on paper, with a pencil. They don't have to be pretty, as long as they get the point across. What would they look like if the light came from a different direction? If you have trouble visualizing this, find some objects around the house, take them to a dark room and shine a flashlight on them. Reflected light: Now that we know how these basic shapes are lit, here's a slightly more advanced trick. When light hits a surface, it doesn't only light it. The light also bounces back. So, it could happen that light bounces off into areas that normally would be in shadow. When we apply this to our basic shapes, you can see a thin highlight glinting off the surface on the shadowy side.

This is a technique you don't HAVE to use, but it adds realism... especially for shiny surfaces. Complex objects: So far, we've been only been shading very basic shapes. Still, it's very important that you learn how to shade these objects from all angles and under different lighting conditions. Now you may think: "I don't want to shade these boring shapes, I want to shade dolls and bases!" However... even if a shape is really complex, we can break it down into basic shapes! So, if we know the basics, we can apply it to anything we want.

As an example, here's the sketch from the previous chapters, broken down into basic shapes. Ofcourse we could break it down even further, but that's beside the point. Also, if we break a body down like this, it kinda starts to look like a drawing mannequin. So if you still have trouble picturing where the lights and darks should go, using a drawing mannequin and a flashlight could actually be very helpful.

Now you're all set to start converting your pencil sketch into a pixel masterpiece!

ISOMETRIC PIXELART

Isometry In mathematics, an isometry is a distance-preserving isomorphism between metric spaces. An isometric projection is one method of visually representing a three dimensional object in two dimensions, and is generally used for visualizing engineering drawings in pseudo-3D. Got all that? That's a very technical definition, and for the purposes of pixel art, we don't care about any of that other than to say it looks really cool when done correctly. Isometric Pixel Art While isometric projections have their use in visualizing engineering drawings, isometric pixel art is a style of digital art that originated from limited video game display capabilities, but truly found its voice with the underground art scene, as many art forms tend to. This art style is strongly typefied by old games like Q-Bert or Zaxxon, some of the first massmarket games to use this perspective. While most isometric pixel art is cartoonish in nature, some artists can achieve impressive near-photorealistic effects in their art. Ideas/Research A good way to start any new art piece is to do some initial research about any ideas you have about what you are going to draw. Write down anything that comes into your head during the day and when you are ready to create a new piece, simply select an idea from the list. This can allow you to jump right into a piece, rather than sitting there with a blank canvas, trying to think of what to draw. Once you've got your idea, it's sometimes still good to research it before sketching it out. This can be a good way to get examples of hidden details in a scene, building elements, or be introduced to new concepts. For example, if you are creating a building with deco elements, you might want to look for references like the Chrysler building, and other significant deco structures.

The Basic Isometric Line The most important element you need to know about in isometric art is how the basic line works. What truly makes an isometric image is the scale and orientation of the linework. Without touching too much theory behind isometric perspective, here is how to draw a basic isometric straight line:

Figure 1.1 When viewed normally, the line appears straight and clean. When we zoom in closer, the structure of the line becomes clear. All simple isometric lines such as this particular example have a simple rule you should always follow for clean results. See Figure 1.2 below, which explains how the simple rule works and how to achieve this with every one of your lines.

Figure 1.2 The 2:1 rule takes the basic concept of every 1 pixel you draw in either an up or down direction, you have to move 2 pixels across. So if you were looking at this line from a birds' eye view, it would appear straight up and down, or vertical. In an isometric drawing, the perspective of this line is skewed to 26.565° (which is unimportant for our purposes). True isometric projections use lines at 30°, but fitting pixel art properly within pixel boundaries demands the angle be off slightly in favor of aesthetics. The next example is 30° and looks inconsistent and nasty, which is why perpendicular lines are at a 2:1 pixel slope.

Figure 1.3 There are exceptions to our perpendicular line rule, but they are mostly special cases, and you will learn later when they are most useful.

Figure 1.4 The Isometric Grid An isometric plane can be divided up into a series of squares that have been joined together to form a larger square. The below image shows us how a normal 2D grid is turned into an isometric grid. The normal grid has simply been moved around, as if it were in a 3D space, so that the view has changed to an isometric view of the plane. Note that the lines do not converge, as in a normal perspective drawing. In isometric drawings, there is no "horizon," so there is no vanishing point, and consequently no "true" 3D perspective.

Figure 1.5 In order for each separate smaller grid square to fit in to place, the lines joining both top and bottom need to be exactly the same on each square. In isometric art, there are two types of common "building blocks" used in isometric construction, named Type A and B blocks. See Figure 1.6 for an example of each type of block.

Figure 1.6 In most cases, the isometric grid uses the Type B block in order to tile effectively, without any glitches or uneven lines. The left and right sides of the Type B grid block must be two pixels high in order to join and tile effectively. You can see in the example below what I mean.

Figure 1.7 Creating Your First Isometric Cube To start any drawing, we first need an outline. The simplest way to draw an outline for an isometric shape is to think if it in two dimensions, skewed into a three dimensional perspective. Draw one side of the cube using the 2:1 linesdiscussed earlier.

One-half a cube When you select the shape for duplication, you will want to include the middle line so the resulting pasted shape will be easier to line up.

Use the selection tool Next, copy your selection by using the top menu (Edit > Copy), or press Ctrl+C. In Microsoft Paint, copied bitmaps will automatically mask out any color that is the same as your currently selected background color. This is very useful for us in pixel art, as we simply need to select the canvas color as our background color. When we paste our copied selection, the canvas color will automatically be transparent.

Transparency mask Now we will paste our selection using the top menu (Edit > Paste), or pressing Ctrl+V. Once you have pasted your selection, you will see a box surrounding it. Do not click outside of this box, or you will commit your pasted data to the canvas and need to undo it and start over. When your cursor moves over the selection, it should change to a move cursor.

Pasted selection on canvas We now need to mirror our selection so it forms the opposite side of our cube. Using the menu at the top, select Image > Flip/Rotate, or use the keyboard shortcut Ctrl+R. You should see the following window:

Figure 2.2 We only want to flip the selection horizontally, so we make sure that the horizontal option is selected. Click the "Ok" button to return to your canvas. Move the selection so the middle line overlaps the middle line of the already-drawn side. That's it; you've now hopefully just completed your first outline for a basic isometric cube. It should look something similar to the following image:

Cube outline Once the outline is complete, it's time to color the cube. In this guide, we will use a nice green. To create a sense of three dimensions, different shades of the same color are used to create the illusion of a light source. The light source is simply where the main light would be shining from, with appropriate shadows, light, and darkness. In this example, our light will be shining from the upper top left of our canvas as shown below. The direction of the light source is always up to the artist, but in most pixel art, the light is usually from the top left. The light source in this image image is only drawn for clarity.

Figure 2.4 Now we select our green color. We could use the green included on the default Windows palette, but aside from being nuclear-waste-green, it's not very aesthetically pleasing and a bit over-the-top. We will dull it down a bit, but not enough to give it a faded appearance, but again that option is entirely up to the artist. Double-click the light green color swatch from the palette at the bottom of the screen to open the custom color selection window. This window contains a series of boxes, each containing the default colours. Click on the "Define custom colours" button at the bottom of this window. The window will expand to show a large color selection box consisting of the full RGB palette.

Select colors

Custom colors The easiest way to use this color selection palette is not to just click inside the pretty box, but approach it in a more systematic way. First, we will move the crosshair to the approximate middle of the palette, which gives us a green that is not fully saturated (note how the colors get more grey toward the bottom). To shift the hue a bit more to yellow, for example, you'd simply move along the box left or right, which adjusts the currently selected hue. At the top of the box are fully saturated colors (full-brightness rainbow), and at the bottom is flat grey. Moving your crosshairs up and down will adjust between full color and grey. Once you have chosen a hue, you can adjust the brightness (how white or black it is) with the vertical slider to the right.

Figure 2.7 Using the paint bucket tool, click within the right-hand side of the cube. The white color should fill the white part within the lines with our color we just created. As this is the darkest side of the cube (remember our light source), it needs to be a bit darker than the other sides. The opposite (left) side needs to be lighter than the right, so we repeat the colour process, but this time leaving the hue alone. We can simply adjust the brightness slider until it is slightly brighter than the color we used before. Once you have shifted the color, fill the other side of the cube. Repeat this process on the top of the cube, making the colour even lighter than the left-hand colour. You should end up with something similar to below:

It's 3D! Other Objects (Shapes) You could go off now and create the biggest pixel city in the world. It's probably going to be boring, though, because there's nothing interesting about a bunch of plain cubes with sharp edges. The first non-cuboid shape we'll try is the pyramid. There are normal pyramids that resemble the tombs in Egypt, and pyramids that are a long block-cap with triangular ends. Below is an example of the former. The sides are a straight 45°

angle. We can, of course, change this angle to make the pyramid smaller, as you can see in the second example. You should be able to recreate something similar using the same techniques you used to create theisometric cube.

Pyramids Now let's make a cylinder, which are surprisingly easy to make. Since a cylinder is merely two circles joined by a middle section, we can make this with the greatest of ease. To create a circle in the isometric view, we first make an isometric square, and make sure our circle fits within those boundaries. The shading is simply a gradient of colors going from dark to light. This shading technique gives the illusion of depth as the 2D object is transformed using shadows and highlights.

Figure 3.0 If you think that spheres are the easiest shapes in isometric pixel art, you're half right. They are the easiest shape to draw isometrically, since a sphere viewed from any angle is just a circle. The problem occurs when you need to color a sphere. Without shading, a sphere is just a circle. Like the cylinder, the sphere must be shaded in a gradation of color from dark to light. The more colors used, the smoother the transition will appear to be. An alternative to using lots and lots of color is to dither adjacent colors. In the example below, you can see the effects of dithering on shading. If you've ever viewed professional pixel art very closely, you will see numerous examples of dithering.

Figure 3.1 Combining Shapes Now that you've got a solid base in some solid shapes (see what I did there?), you can start flexing your creativity. How about making a building with a pyramid top? Or maybe a cubed building with a dome roof? All of these are simple to make and also give IPA the complexity it needs to keep people interested. All you need to do is make each shape separately, making sure that each piece is in proportion. Then using the select tool in Paintbrush move the shapes over and around each other until they look right and you are happy with the result. As a quick example of combining shapes, this example creates a cube which has sloped sides and a sphere resting on top. First, create outlines for each of the shapes. The red lines are used as guides to ensure each shape is in the correct proportion to the others. Below is an example of each of the shapes I will need for my little structure.

Figure 3.2

http://www.pixelbath.com/isometric-pixel-art/

Figure 3.3