Pixel art is very popular in the latest generation of independent video games. This allows the artist to create a large number of characters without having to spend countless hours modeling objects in 3D or drawing complex subjects by hand. If you want to become a pixel artist, the first step is to create a sprite, that is a two-dimensional figure to be placed in relation to a background. Once you have practiced, you can begin to animate them and therefore to propose your skills to any employers.
Steps
Part 1 of 7: Equip yourself with the necessary tools
Step 1. Download good image creation and editing programs
Although you can do pixel art with Paint as well, you would find it difficult. Some of the most popular pixel art programs are:
- Photoshop
- Paint.net
- GIMP
- Pixen
Step 2. Get a graphics tablet
If you want to draw by hand or don't like using the mouse to draw on the screen at all, you can use a tablet and a stylus. Wacom is one of the most famous manufacturers of graphics tablets.
Step 3. Make the grid visible on the image editing program
You can set the grid view in whichever program you choose: this will allow you to clearly see where each pixel will go. Usually, it can be activated from the "View" drop-down menu located on the bar at the top of the screen.
Probably, you will need to configure the grid so that each square represents one pixel. The way to do this varies from program to program. For example, in GIMP, you can change its settings from the Image menu (then select "Surface Size", then "Configure Grid …")
Step 4. Choose a pencil the size of one pixel
Select the Pencil tool in the image editing program; in the Pencil options, choose a stroke with the thickness of a single pixel: this will allow you to draw the pixels one by one.
Part 2 of 7: Learning the Basics
Step 1. Create a new image
Since you will be working at the pixel level, the image size does not need to be large. The entire screen, in the original Super Mario Bros. video game, was only 256 x 224 pixels. Mario himself is only 12 x 16 pixels!
Step 2. Zoom in
Since you will be working on individual pixels, you will have to zoom in a lot so that you can see the grid and where each of them is placed. You may need to zoom in up to 800% to see them clearly in the grid.
Step 3. Practice drawing a straight line
It might seem like a simple concept, but if the line is even one pixel lower than the others, you will notice. Practice drawing straight lines with your mouse or stylus so you don't have to constantly switch to the Line tool.
Step 4. Practice drawing curved lines
The curves should look like regular breaks in a line of pixels. For example, a good curve should start with a six-pixel segment, followed by a three-pixel segment, followed by a two-pixel segment, followed by a one-pixel segment. The segments then continue in a mirrored way to draw the other end of the curve. A bad curve would start with a three-pixel segment, followed by a one-pixel segment, followed by a three-pixel one, or any other progression of odd numbers.
Step 5. Use the Eraser tool to correct errors
As with the Pencil, you can set the Eraser to erase one pixel at a time. If the eraser is too large, it will be difficult to erase the pixels precisely.
Part 3 of 7: Outline Your First Sprite
Step 1. Determine the use you will make of the sprite
Will it be animated or static? You can add more details in a static sprite, while you may want to keep an animated sprite simpler as you will need to redraw parts of it for animation. If the sprite is to be used in combination with others, you will have to maintain a graphic style that unites them all.
Step 2. Find out about any restrictions
If you are creating the sprite for a project, find out if there are any size or color limitations. This will be even more important as you start working on larger projects with many different sprites.
Most modern operating systems have no limitations on sprite size or color complexity. If you are developing a game for a specific older system, you may face more limitations
Step 3. Draw a sketch
Try sketching the basic idea of the sprite on a sheet of paper. This will allow you to see what its appearance will look like and to retouch its pose or other features. If you have a tablet, you can use this sketch as a basis for the next review.
Add details to the sketch. Enter all the features you want to include so you can get an idea of what the sprite will look like when finished
Step 4. Trace the outline with the image editing program
You can either use the outline you sketched as a reference or trace one with your fingertip. You can also click to draw the outline with the mouse, or arrange each pixel individually - the choice is yours.
When creating your first sprite, use solid black as the outline color. This will make it easier to distinguish it. Later, you can manually change the color of the outline
Step 5. Clean up the outline
Zoom in and start erasing excess pixels and retouching lines. The outline should only be one pixel thick. Use the Pencil tool to insert pixels and help you correct mistakes.
Focus on the bigger details as you create the outline - you can come back later to retouch the less important ones
Part 4 of 7: Color your Sprite
Step 1. Review the basics of color theory
Look at the color wheel to help you decide which colors you should use. Colors far away from each other on the wheel will be very different, while those immediately close to each other will look good when placed next to each other.
Choose a color set that gives your sprite a distinctive look, without being too confusing. Avoid pastel colors if possible, unless the whole project uses that style
Step 2. Use only a few colors
The more you add, the more your sprite will distract the viewer. Take a look at some of the most famous sprites and you'll find that they often only have a few colors.
- Mario - The classic Mario sprite uses only three colors, all of which are closely related.
- Sonic - Sonic has more detail than the original Mario, however it only consists of four colors with varying shades.
- Ryu - One of the classic fighting game sprites, Ryu, has large areas filled with simple colors, with light shadows to define the figure. Ryu has five basic colors with various shades.
Step 3. Apply the colors
Use the Fill tool to apply your chosen colors to the sprite. Right now, you are simply placing the basic colors, so don't worry if the figure will come out "flat". The Fill tool will spread the color you selected over all the pixels that have the same color as the one you clicked, until it touches the edges of the image.
Part 5 of 7: Putting the Shading
Step 1. Determine the "light source"
Establishing the angle at which the light hits the sprite will help you decide where to apply the shading to achieve a more realistic and believable effect. While there is no real need for a light source, knowing the direction the light is coming from is very important.
It may be easier to shade when the light source is coming from a point very far from the sprite and from above, rather than the immediate left or right of it
Step 2. Apply the shading using a slightly darker shade than the base color
If the light source is coming from above, the shadow should be seen on the "bottom" sides of the sprite. Shade any area that is not touched by direct light. Simply add a few layers of pixels to the top or bottom of the outlines to add shadows.
- You can decrease the "brightness" value of your base color and slightly increase the "hue" parameter to get a good shadow color.
- Never use gradients. They would look very fake and unprofessional. To mimic gradients you can use "dithering" (see below).
Step 3. Add soft shadows
Choose an intermediate shade between the dark shade of the shade and the base color. Use this shade to add another layer of shadow in between the darker and the original color. This will give the transition effect from the shaded to the lighted parts.
Step 4. Insert points of light
These are the points on the sprite that are most affected by the light. You can add some by using a shade that is slightly lighter than the base color. Use highlights only sporadically, as they can be distracting.
Part 6 of 7: Using Advanced Techniques
Step 1. Try dithering
This is an effect that allows the artist to represent a transition in tonality. It allows you to create a gradient-like effect using only a few colors and alternating the position of the pixels to create the transitions. The quantity and positioning of two pixels of different colors in a path can deceive the eye and make it perceive different shades.
Beginners tend to overuse dithering, so try to avoid using it outside of a few rare occasions
Step 2. Practice anti-aliasing
Pixel art is defined by the pixels that are most noticeable, but sometimes you can mix the lines to make everything appear a little softer. The technique that allows you to do this is anti-aliasing.
- Add intermediate colors along the curves of a line. Insert an intermediate color layer around the contour of the curve you want to soften. If it still looks edgy, add another layer of lighter shading.
- If you want your sprite to stand out clearly against any background color, don't use anti-aliasing along the outer edge of the outline.
Step 3. Draw the contours selectively
This means coloring the outline similar to the colors used for the fill. This will give the sprite a slightly less "cartoonish" look, as the outline will look a little more natural. Try drawing a selective outline for the bare skin parts and a traditional one for those covered by clothing.
- Use a darker hue than the base color of the section you are drawing a selective outline for. Use the light source to change the shading as you draw the outline, to give the sprite an even more natural look. This could be especially helpful for skin and muscle tones.
- The traditional outline is best suited if you need your sprite to stand out and stand out against an overcrowded background.
Part 7 of 7: Adding the Finishing Touches
Step 1. Give the sprite a good overall look
Take a step back and see what the sprite looks like at this point. Determine if something appears to be wrong, then proceed with correcting these inaccuracies or errors.
Step 2. Add details
After you are done coloring and shading, you can add details such as inscriptions, eyes, additional features and anything else that could take the sprite to a higher level of quality. Ultimately, attention to detail is what separates an amateur artist from a professional pixel artist.
Step 3. Animate your sprite
If you followed the steps above, you will now have a single static sprite. This is a fine work of art, but if you want to create video game sprites, they will probably need to be animated. This implies that each frame of the animation must have its own sprite with slight changes compared to the one that precedes it. The set of all sprites used in the animation is called the "sprite sheet".
- Read a good guide for details on how to animate a "sprite sheet" in GIMP.
- Creating unique and attractive animations for sprites is one of the ways in which experienced pixel artists distinguish themselves from amateurs. A good animation can infuse the sprite with great vitality.
Step 4. Create a portfolio
If you want to make your pixel art skills known within the world of video game development, you will need to have a solid portfolio to show to potential employers. Include several of your best sprites and even some animations if you have them. Enter a variety of subjects, including characters, scenery, props, and more.
