Murdoc's Game Art Tutorial (WIP)

[Xeno]

The following is an art tutorial aimed at creating game art. It is based off of Adobe Photoshop. If you don't have it I highly recommend it for it's performance and features. I hope these tutorials inspire those interested in creating their own.
 

Part 1: Pencil vs Brush

 

Selecting the medium you want is important. When doing game art, one can choose to use a Pencil for a pixel look, or a Brush for a more aliased look. Here I made some simple shapes, and demonstrate the difference between Pencil (left), and Brush (right). Most of these tutorials will be aimed at the first method, however the general concept remains the same.

 

Once you've decided which look you want to go for, it's time to decide on a color palette for your objects/sprites. That bit will come in the next tutorial called "The Importance of Hue". Stay tuned.

 

Part 2: The Importance of Hue

 

When selecting colors for your piece it's important to understand proper lighting, and the Cool to Warm scale of light. The following is a color wheel showing Cool to Warm hues:

 

A few key points to keep in mind are:

• Pick cooler colors for your shadows, and warmer colors for your highlights. That is because light is typically warmer. There are few exceptions and this technique is known as hue-shifting.
• Think about your environment. Is this for outdoors? What time of day? Naturally mid-day is warmer than near night-time. So then a night time piece would have cooler colors overall. Same with a foggy, or otherwise cloudy environment.
• Because black and white are so contrasting on the color spectrum they are rarely, if not used at all in good pixel art. Instead use dark shades of purple,blue,green with bright *colored highlights.

 

Once you have a general mid-tone color, you can easily work from there down to a shadow, and up to a highlight color. For more detailed pieces you would flow in either direction choosing colors in between the contrasted hues. Here is an example palette, utilizing hue shifting with 9 shades:

 

With these colors we will form a basic rock. But first we will have to explore Lighting and Shape.

Part 3: Lighting and Shape

Lighting and shape go hand in hand. In order to know where applicable shadows and light will go, the shape is key. Also important is where the light-source is located. In most game art that you see, the light source is generally the Sun or Moon, and coming from the direction of top-left of the screen or the very top shining down. Now depending on perspective, this will mean different things but the concept is generally the same. That is, the light is shining down on objects, not up. And shadows are nearer the bottom. In the case of top-down perspective, they're also in the back. 

In this example I did a rough sketch of a boulder using the aforementioned palette. As you can see the light is shining from the top-left, creating shadows in the bottom-right.

 

In this second example, I've given the boulder shape using the same light principle as before. Light is coming from the same spots on each detail. Shadows are behind, and below the light naturally. This shaping takes some practice, but with time it becomes easy to know where the light is and isn't, so to speak. Don't forget to work your shadows into the highlighted area, and subtle highlights into the darker areas. This will create consistency within the piece.

 

Naturally, the shape isn't that great because I've used a fairly large-sized pencil tool. Keep in mind that for smaller pieces, the scale of detail typically goes down. That is because this type of art, is more abstract than realism. This is debatable, but in the end the best thing to do is make things look realistic as possible without scattering too many colors around. Detail is pivotal on a small scale, like most games. And so you want to make sure each detail stands out well, even at a distance. 

 

With that said, now would be a good time to demonstrate how to add detail on a smaller scale. Here I go in and add minor crevices, cracks and other random deformities while bring out shapes that aren't full enough (in my opinion). How you do the shapes are up to you, but you should be able to make them out clearly. To make lines less jagged, anti-alias them by using hues that are close in brightness. Anti-aliasing will be discussed further in part 4.

 

 

A few techniques are helpful in this stage. Use shadows to create depth and crevices, and highlights to lift objects and create edges. As you can see in this piece I've used the strongest highlight for "edge lighting", where the edges of objects receive stronger light.

In Part 4 we will explore Form, Texture and Anti-aliasing.
 

[Kibbelz]

This thread has been cleaned up, please refrain from targeting other users maliciously. Remember, positive criticism is the way forward people! @Murdoc claims he will write further tutorials expanding on this thread in given time.

[Aesthetic]

Good work so far, it's good to see some tutorials like this going up for aspiring digital artists. As a recommendation I would also cover dithering, line art, and composition. c: Keep it up!  

[Xeno]

37 minutes ago, Azizele said:

Good work so far, it's good to see some tutorials like this going up for aspiring digital artists. As a recommendation I would also cover dithering, line art, and composition. c: Keep it up!  

 

Thanks I will definately add those. 

Added Part 2 and 3.

[mmasportscards]

Definitely will keep an eye out on this.

 

Learning

[Xeno]

Part 3 is finished. Stay tuned for part 4 where I discuss Form, Texture and Anti-aliasing.

 

[Xeno]

To Admins: Can I have this moved to Tutorials please? Thank you.

[Kibbelz]

Done