Transcript
DEFINITION Judging by the name, we might assume that pixel art is a ny art that's made up of pixels. But not every digital image is pixel art. Pixel art is a very specific sub-category of digital art. It isn't what it's made of so much as how it's made. Why not all digital art is pixel art
Pixel art is set apart from other digital art forms by its focus f ocus on control and precision. The artist has to be in control of the image at the level of the single pixel, and every pixel should be purposefully placed. placed. When pixel art is done purposefully, offsetting just a few pixels can have a dramatic effect on the image:
The features of this parrot change drastically, but only a few pixels are different.
Other digital art forms use many man y tools you won't find in pixel art. The reason pixel artists don't use these tools is because they place pixels in a manner that the artist can't predict. Any tool that places pixels automatically, is generally frowned upon in pixel art.
An automatic automatic tool has been been used to blur the edges edges of this grey blob
You'll often hear people complaining "This " This isn't pixel art, it has too many colors !" This isn't because there's some unwritten rule in pixel art that says "It's only pixel art if it has [X] number of colors", you're allowed to use as m any colors as you want. The main reason that people complain about color count is that a high amount of colors can indicate the use of dirty tools. People also menti on high color counts because larger palettes are more difficult to control, but we'll get to that later. Why it's not just about the tools
It's not the program that determines whether or not it's pixel art, it's how it is made. If you can create the image image without zooming in, in, chances are it isn't pixel pixel art. While the most common misconceptions about pixel art are due to too loose of an interpretation of the medium, there are some who have too strict a definition of what makes pixel art. Every pixel does not literally need to be placed by hand You aren't expected to behave like a robot, fill ing in large areas with thousands of single-clicks of the pencil tool. The bucket tool is fine. The line tool is fine. What's important is that the artist has control of the image at the level of the single pixel , not that you create the image one pixel at a time.
FI LE FORMA FORMAT TS Always save your pixel art as a GIF or PNG. Never save it as a JPEG. JPEG. Both GIF and PNG files use lossless compression. GIF files support animation, but limit you to 256 colors and no partial transparency. The PNG format was desi gned to replace GIF, and supports as many colors as you can put on a canvas, as well as alpha transparency. JPEGs are terrible for pixel art, art , because a JPEG's compression wreaks havoc on the content of the file. It's not usually noticeable in things like photographs, but it can devastate the quality of your pixel art.
SI ZE & SCA SC A L E When it comes to pixel art, tiles are incredibly useful. It can be for a game, or even just for a specific style! But not only are tiles useful, they help with scale.
SCA SC A L E I S TH E M OST I MP MPOR ORTA TA NT TH I N G .
The reason why scale is important, is because it helps us make sure what we're drawing isn't ridiculously unrealistic! Though saying this, if you're purposely drawing unrealistic things, then scale is up to you! But for the most part, you want to pick a canvas size that will fit everything you'll need in a piece. As for tile sizes, refer to this image:
Almost all tiles I have ever drawn are 16x16, due to the fact that it's easy to express enough detail without using a large space. “Doing more with less” never rings more true than when pixeling: even very large sprites rarely exceed 200x200 pixels. You may want to pick a sub-scale ~ telling yourself that you must only draw sprites that are a multiple of 8, or 4. This ensures that what you're drawing is cohesive! Another thing that might be good to watch for is to keep your dimensions/colors/anything to a power of 2 (2, 4, 8, 16, etc.) if you plan on using it for video-games (some technical stuff here) When you’re learning, it’s better to minimize the size of the sprites (and color count too). Even if it increases the trouble of conveying what you want to, it reduces pretty much every other possible trouble that may come with bigger pixel art If you're drawing a sprite sheet, a good canvas size is 16x the size of your tiles:
8x8 12x12 16x16 24x24 32x32
--> --> --> --> -->
128x128 canvas 192x192 canvas 256x256 canvas 384x384 canvas 512x512 canvas
HUE , SATURATI ON AND LUMI NE SCENCE Hue refers to the identity of a color. Whether a color is defined as blue, red, orange, etc. depends on its hue:
In the above picture, hue is represented along the x -axis.
Just as you can change how bright or dark a color appears b y surrounding it with lighter or darker pixels, the perceived hue of a color depends on its environment. In this picture the green in the trees is actually not green at all, but the same neutral grey as the picture beside it. Because the background is so purple (which is the opposite of green), the grey looks greener than it actually is:
Saturation is the intensity of a color. The lower the saturation of a color, the closer it gets to grey:
The most common problem new artists encounter is regards to saturation is using colors with too high of a saturation. When this happens, the colors start to burn the eyes. Because the colors in pixel art are made up of light, instead of pigment as in paint , the potential for colors being too bright or irritating is much higher.
Luminescence (also known as brightness or value) is how dark or light a color is. The higher the luminescence, the closer the color gets to white. If the luminescence is 0, then the color is black. Here's a palette arranged as a luminescence scale:
low luminescence (darker colors) on the left, high luminescence (brighter colors) on the right
In a given palette, you want a wide range of values . If you only have colors in the same range of luminescence, then you won't be able to create good contrast - a full range of values allows you to use highlights, mid-tones, and shadows. The difference between the brightness of two colors is known as contrast . A common problem newer artists have is not using enough contrast. Here's an example (bad and good contrast,
respectively):
There are very little changes to the sprite itself, but the updated colors make a huge difference. It pops, it looks like it has real depth to it. It’s the colors – the contrast, more precisely – that bring a sprite to life. To make this clear, look at how the same yellow is used in different situations:
In the first two, there is a buffer color between the yellow and red/green, which makes everything seem the same whole. In the third, there are no buffer colors between the yellow in the hair and the skin or the hat, which makes e ach element stand out and rightly so: the hair, skin and hat aren’t supposed to look like a whole, they need the depth The value of a color is a set number, but colors can appear lighter or darker depending on their background. So you won't always use your brightest color for every highlight. A color that makes a good highlight on one object might be too bright to use on another Luminescence is especially relevant to pixel art: The brightness of a pixel or line determines how thick it appears:
Color Ramps A color ramp is a group of colors that can be used together, arranged according to luminosity. A palette can consist of a single ramp of many different ramps. Here's a palette:
And here's that same palette, arranged according to its color ramps (of which there are two):
It isn’t necessary that you actually cr eate a model like the one above. What is important is that you understand your color relationships – shown by the color ramps. Notice how each color flows into the next, then to next and so on. This makes for a unified palette It isn't necessary that a color be restricted to a single ramp. Often, ramps will share colors. Frequently, the darkest or lightest color will belong to most or all of the palette's ramps, as in the example above, in which both ramps share the same darkest and lightest shades. It’s also possible for mid-tones to work in multiple ramps. In these cases, the versatile color takes the place of two or more separate colors, aiding in palette conservation. In
the case of multi-ramp shadows and highlights, the extremes i n luminescence allow the color to be flexible (because they approach black or white). Since mid-tones are not afforded this advantage, they are often more neutral colors, meaning the y are closer to brown or grey. Here is a palette that uses one shade of grey to bridge the gaps in several ramps:
You also have to be careful about having colors in a ramp that don't fit. If a color doesn't belong in the ramp, then it has the potential of punching through the image, which is a priority issue in which the color, rather than work as part of the image, seems separate from it, and looks almost like it is sitting on top of the image. This is usually due to the saturation being too high, or because the hue clashes with the neighboring hues, and thus creates eyeburn .
Eyeburn created by a color with high saturation and by green clashing with purple. The hue should logically follow its neighbors in the ramp.
Hue shifting Hue-shifting refers to having a transition of hues in a color ramp. A color ramp without hue-shifting is known as a straight ramp. In straight ramps, only luminescence changes, while in hue-shifted ramps both hue and luminescence will (usually) change.
The first color ramp is a straight green ramp. The second image is a green ramp with hue-shifting applied. When using hue shifting, bend your highlights toward a certain color (usually yellow, like in the example above), and move the darker colors toward a second color (usually purple or blue, like above). Hue-shifting is used beca use straight ramps are usually boring and don't reflect the variet y of hues we see in reality, and hue shifting can add subtle color contrast within a ramp.
LI NES & CURVES TECHNI QUE S Let’s start with the basics: lineart. Everyone has different methods of drawing their lines. A lot of people do it with a tablet. Some people draw a sketch on paper, then import it into their computer and pixel over it. I've alwa ys done everything with a mouse. Experiment to find what works best for you. When it comes to drawing lines, it is important to keep mathematics in mind! A perfect line, on a computer, is either a 90° angle or a 45° angle. A computer can't display a line crisper than that. Other good lines are generally made with 2x1 or 3x1 smaller lines of pixels
So as you can see, the lines go 1 across, 2 up, 1 across, 2 up. Simple! This keeps things clean, so try to avoid messy random lines. For curves, use increasingly small lines of pixels as you round the edge, such as "1, 1, 1, 2, 3, 5, 8, 5, 3, 2, 1, 1, 1”
Jaggies: Jaggies occur when a pixel or group of pixels are out of place, interrupting the flow of a line. Jaggies can also occur when a line lacks anti-aliasing. Jaggies get their name from the jagged lines that they create. More broadly, jaggies are the result of any bad pixel technique, but they are most often discussed in refer ence to line work, so that is the context in which they will be discussed here. Often times the problem is just that a segment of the line is too short or too long, and it creates an awkward jump. Using a
more uniform length of pixels to smooth the transition is the solution here.
ANTI -ALI ASI NG(AA) Anti-aliasing is the method of making jagged edges look smooth. You may be familiar with anti-aliasing already, because a lot of programs and tools do this automatically. When we're talking about pixel art, however, anti-aliasing means manual anti-aliasing. Manual AA means smoothing the jagged areas by hand-placing pixels of a different color, usually in a range between the line and the background, to ease the transition.
without AA
with AA added
An AA technique worth checking out is in-line AA: it applies AA on the outline itself. The curves use brighter shades than the rest of the lines and the edges are also brighter than the center of a line. This may not be as good as actual AA, but has its usefulness (though it might look like bad selective outlining) Unless your line is perfectly horizontal, perfectly vertical, or at 45 degrees, the edges of your line segments are naturally going to be a little jagged.
This is because the square nature of the pixel and the grid pattern we're restricted to makes angled lines and curves difficult to portray. AA is the correct counter-measure in these situations.
When antialiasing between two colors, you also have to take in hue and saturation shifting, but the concept is the same. Try to get colors that are partway between the
line/object and background. It can take a lot more playing around when doing two colors of a similar saturation and value.
You cannot antialias the outline of a sprite. Transparency in pixel art is usually a single background color, marked as transparent in your respective image editor. That being said, anything antialiased to a transparent background color will only look right on that one color.
See how ugly that is? It'll only look right on the maroon background it was designed for. So don't even try to AA outside of a sprite. You can apply your antialiasing skills to some of the lines inside the sprite, but often it's not worth it A good way to practice AA is to use curved fonts. Take one without AA and apply it, one with automatic AA and reduce it, apply AA to a rotated/mirrored font, etc.
Bad AA: Too much AA (over-anti-aliasing)- You only want to use as much AA as is necessary to smooth the edge. If you use too much, the edges can look blurry, and you lose the crispness of the line. Usually you won’t use more than half the length of the original line for antialiasing colors
Too little AA- In general, the fewer AA pixels you use, the better, but here the artist went overboard: the use of a single pixel has only succeeded in blunting the jagged edge a bit. He could have made a much smoother transition by using longer lines of pixels to show a more gradual transition:
AA banding- When segments of AA line up with the lines they're buffering, AA banding occurs. For a better understanding of AA banding, be sure to read the section on banding.
Banding: Banding, most simply, is when pixels line up. When neighbor pixels end at the same x or y coordinate on the underlying grid, the grid immediately becomes more evident, the pixels are exposed, and the apparent resolution becomes less fine. Here are several instances of banding, all of which occur because the pixels have lined up. These names aren't common lingo, but will work for the purposes of this tutorial:
Hugging: Here an opaque field of color has been outlined by a row of pixels. It's fine to use outlines, but make sure the outline and the shape it contains don't line up and reveal the grid.
Fat pixels:
Fat pixels can occur alone in small squares, together as fat lines, or multiplied as large bands (staircase banding).
Skip-one banding:
Even if there is a negative space between two bands, the mind will fill in the gap and banding will remain.
45 degree banding:
Though the rows of pixels lining up are only 1 pixel thick, banding is still present.
Dithering: Dithering consists of different patterns of pixels. It's typically used to ease the transition between two colors, without adding any new colors to the palette: where an automatic gradient would use hundreds of colors, you might get the same effect with less than five. It's also used for creating texture. In the days of CRT monitors, dithering was especially useful as the screen would actually blur the dithered area and obscure the pattern. Now that crisp LCD monitors are the norm, the patterns are no longer as easy to hide, meaning dithering is not as versatile as it once was. Even so, dithering still has its uses. The most common form of dithering you'll see is a 50/50 dither, also known as a 50% dither or a checkerboard pattern.
As shown in the example above, you can create various other patterns to further buffer between a full color and a 50% dithering pattern. These patterns are often easier to spot than a 50% dither though, so be careful!
Stylized dithering is another technique, and is characterized by the addition of small shapes in the pattern.
Dithering in general adds texture, but stylized dithering is where you can control better the texture given. Whereas some don’t use dithering or use it just for gradients, others really like it for textures exactly because of stylized dithering
Speaking of textures, some efficient techniques for illustrating surface properties:
1. Dull surface with a diffused light spot. Skin and clothing. 2. Polished surface with a sharp light spot. Plastics and hi-tech equipment. 3. Metallic surface made up of a bright but softer spot at top and rim light on the underside. Machinery and jewelery. 4. Pitted rough surface with a very diffused light spot broken up by simple dents. Rocks and damaged surfaces. 5. Transparent glass using an offset sharp light spot, a pixel line right around the object and a gradient getting darker from top to bottom. Glassware and gems. Interlaced dithering allows for two dither regions to hug each other. It is called interlaced dithering because the two dithers weave together at the borders. This type of dithering allows you to blend dithers together to form gradients.
Random dithering is a less-common form of dithering, and isn't generally advised, as it adds a lot of single-pixel noise to the image. While it has some usage in very small doses, random dithering is something you'll often want to avoid.
As useful as dithering is, it's often misused by inexperienced artists.
Bad dithering:
There are several common ways dithering is misused. The most common mistake is simply using too much dithering. If dithering is covering half your sprite, it'd probably just be better if you added a new color to the palette. Dithering should ideally be used to taper the ends and edges of an opaque field of pixels. When too much dithering is used, the dithered area turns into a field itself:
At this point dithering is no longer serving as a buffer between colors, but creating unwanted texture. Creating texture can be a useful aspect of dithering, but only when used co rrectly. If you're trying to buffer and are instead adding texture, then dithering isn't working out.
So how much dithering should you use? Well, it depends on how big your palette is really- or more precisely, the contrast between the two colo rs you're trying to dither with. The lower the
contrast is between the two (in hue or in value), the less harsh the dithering will be:
Pillow-shading: Shading by surrounding a central area with increasingly darker bands. Pillow-shading is bad because it pays no attention to the light source, and conforms to the shape of the area rather than the form it represents of how light affects it. Pillow shading is often, but not always, combined with banding and usually happens due to not deciding on a light source. The way to fix pillow-shading is simply to pay attention to the direction light is coming from:
The reason pillow-shading is wrong is not because the light source is frontal (from the viewer's direction). You don't have to place the light source in the corner. The reason pillow-shading is incorrect is because it follows flat shapes rather than focuses on how the three-dimensional forms are lit. So, it is possible to use a frontal light source, so long as you pay attention to the forms:
Noise: Much of the time, independent pixels (pixels that do not belong to a pixel cluster) are unable to convey sufficient information by themselves, and their inclusion usually only creates noise. Noise is any sort of information that does not contribute to the piece and serves only to interrupt the area it inhabits and distract the viewer. In pixel art, noise is often composed of independent pixels. For the purposes of this tutorial, single-pixel noise will be what I’m referring to when I use the term “noise”. The reason one must be careful when using a 25% dither (or any dithering, really) is because of the noise all the independent pixels create. Single pixels expose the underlying grid by revealing the resolution of the image. Remember, in the wild, pixels travel in packs. It’s the nature of a pixel to long for a place in a pixel cluster. For this reason, independent pixels should only be used for very specific and purposeful reasons. Justifiable instances of independent pixels include:
Use as specular highlights Independent details call a lot of attention to themselves, but sometimes this is precisely what you want. For bright specular highlights, single pixels will often work just fine. For an example, see the white pixel used on the monster's nose below.
Portraying small but essential details
Usually this will only matter for details on very small images, like the eyes on a small sprite, or the beak of a tiny bird. Or stars, or little bubbles.
PALETTE Now, the juicy stuff! There are a countless number of palettes. COUNTLESS! " So which one do I choose?! " First, you might notice most palettes use few colors, a low color count. This isn’t just tradition: less colors means they repeat in the piece, adding cohesion, and it’s much easier to manage a few colors than hundreds. Palettes like Arne's 16 Palette, the magnificent DawnBringer32 Palette, and the legendary PICO-8 Palette are really good to work with! Notice how they don’t have any colors very similar to each other. However, even if the artists who created them are more experienced than me, I found the palettes lacked direction towards material use.
" Material use?"
Well I mean the colors are organized and formed around the idea that they work together, to allow you as the artist to paint with materials. And with that, here is the first of my two palettes. ENDESGA~16 (EDG16):
Hex (left to right colors on top bar): #e4a672 #b86f50 #743f39 #3f2832 #9e2835 #e53b44 #fb922b #ffe762 #63c64d #327345 #193d3f #4f6781 #afbfd2 #ffffff #2ce8f4 #0484d1
In a lot of cases, using the PICO-8, DB32, or ARNE16 would be far more versatile! But I've found for me, when developing NYKRA, that putting the colors into "materials", you can easily structure different objects. Now, you might eventually want/need to make your own palette. A common method is just deciding the colors the piece needs and then going as far as you can with those. Colors are added according to necessity: details to color, advanced shading, etc.
PAI NTI NG & CRE ATI NG OKAY! So, in this part, I will show you the 6 basic ste ps to drawing a sprite. Have a look, and I'll explain below:
KE Y THI NGS: - Give the light a pleasing direction: most used are top-right and top-left - Use shadows and highlights to show depth: a rule of thumb is a medium amount of mid-tones, a lot of shadows and less highlights than shadows, but that depends on what you want - Don’t use too many shades: at most two for dark (dark and very dark) and two for light (light and very light) on top of the foundation colors - Even if the above example doesn’t follow it, a good way to color is to lay the main colors, then go for the darkest shade (unlit parts), then dark shade (indirectly lit parts, also used as transition from dark to light, specially on curved surfaces), then light/lightest shades (directly lit parts). Highlights come last to avoid making them too big
- About pure black and pure white: using them is generally discouraged, but pure white can be used for very bright/highly reflective surfaces and pure black for outlining sprites so it stands out from surroundings. One exception for each color - Watch the colors: a single sprite probably won’t go over 32 colors (or even 10, according to some) total when complete - Be consistent with form. Don't do tiny 1x1 pixel details on one thing, then none on another! - In this particular case was used a 2x2 pixel brush, making the art a little more chunky and easier on the eyes - Remember that the EDG Palettes are built for materials! - Make sure your sprite is visible in dark, light, warm and cool backgrounds - Try to keep shapes clean.
1. Here we start with our basically random "blob", which we will craft in to the leaves. 2. This is our first stage of lighting for the leaves. I like to go from the top-left down 45-ish degrees, but you can go from any direction. But you'll find top-left or t op-right work best. 3. This is the second and final stage of lighting for the leaves. Think of volume, and play around with how much highlight there is. The Rule of Thumb is generally that there is a medium amount of mids, a lot of dark, and even more highlights. But this is up to you! 4. The basic shape of the trunk is put in. 5. The lighting of the trunk is put in. Now, remember that the leaves have DEPTH . And depth is incredibly important to make your art POP! So there is a shadow coming from the leaves. 6. Last layer of lighting done, and some extra detai ls.
EDG32
Hex: #be4a2f #d77643 #ead4aa #e4a672 #b86f50 #733e39 #3e2731 #a22633 #e43b44 #f77622 #feae34 #fee761 #63c74d #3e8948 #265c42 #193c3e #124e89 #0099db # 2ce8f5 #ffffff #c0cbdc #8b9bb4 #5a6988 #3a4466 #262b44 #ff0044 #181425 #68 386c #b55088 #f6757a #e8b796 #c28569
CHARACTE R DE SI GN & TE CHNIQUE S
I start off with the tile size (32x32), and then decide to make the character slightly taller. I then block out COMPLETELY RANDOM shapes (kind of like starting with a silhouette and adding details later, but more random). Yup, I didn't pre draw this guy! This is to prove that you don't always need to have a speci fic guideline. Draw some blobs, turn them alive! When it comes to turning the blob in to a character design, it take a lot of "hm, does it look good?" For this guy, I originally drew the green blob, which I figured could be turned into a head! After that, some lighting and edits are made. And once I decide "This guy is gonna be a lizard-dragon warrior", I finalized his design. Put some time aside, and try drawing a character! Maybe even redraw them a few times. This guy uses the EDG32 palette, and as you can see, it's really easy to block out colors and lighting! If instead you sketch previously (which is much easier for l arge sprites, whereas smaller ones may be done better one pixel at a time), zoom in and give your sketch a good look over. Try to not have any lines more than 1 pixel in thickness, unless you're intentionally going for a thick outline, and focus on defining the “big pieces” as details are added later . You can make adjustments throughout the whole process, so don't worry if you don't spot everything on your first cleanup.
Also keep in mind there are many ways to sketch. Some draw a silhouette first (said to be better because it makes you think more in 3D), some draw the outline, and some prefer a more traditional approach with stick figures and basic geometry
To Outline, Or Not To Outline... YOU CHOOSE! One thing to avoid though, is just purely outlining the sprite, rather than taking form into account. Refer to this:
As you can see, the character looks fine without an outline! But suddenly looks rather terrible when a solid outline is PUT around the charact er. The third image is taking material and depth in to account - which is the way to go! And the last image is using darker colors according to the light source (outline is a few shades darker than the colors surrounding it – this is selective outline/selout) to give even more depth, which can look really amazing when done right!!
OUTLI NE COLOUR, and the magical " I NK " Since the EDG16 and EDG32 palettes are high in saturation, it would be a sin to use pure black as an outline. One of the colours in both palettes is what I call "Ink". This colour binds all of the
colours in the palettes, and makes the outlines softer. DO NOT USE PURE BLACK, PLEASE!
The difference isn't huge, but when you have a darker background, it really makes it nicer!
PALETTE SHI F TING & R OCKS Here I'll show you how I go about drawing rocks:
RE ME MB E R: SI MPLI CI TY I S K E Y! Try not to use all 6 of those colours for one rock. Keep it soft and clean! Rocks are relatively easy to construct. You mostl y have to remember that stone is formed by layers and chunks. So draw a good ol' blob, and construct the forms! Also, as you can see, you can easily shift the palette! Metals like aluminium are brighter, and maybe basalt or steel could be the darker ones! Easy!
WE APONS, I TEMS, & TOOL D E SI GN By popular request, I'll tell you about some basics for it em design! One major thing to remember when drawing items, is that it's best to not be too precise. Using a graphics tablet can help with this, but if you don't have one, try to give the items life. Compare the 3 usual designs on the left, to the ones on the right!
Try to avoid being too simplistic! Most items are inside a small tile size, so make the most of it by including small DETAILS! A vine holding the head of the Pickaxe? Why not! Make sure to explore options and designs, because each item is there to show a part of the game. Every pixel counts! If you're drawing a pickaxe, make it look like it's been used. Give the sword some leather, or make the bread half eaten! When I draw items, I try to make sure that they pull your eyes in - so use more than 2 materials if possible!
