Pixel Art For Video Games

Working with Photoshop Preview 09:47

---- DOWNLOAD THE RESOURCES FOR REFERENCE ----
before we can confortably work in photoshop, lets take some time to learn the basic tools and some tricks to feel more at ease with photoshop it self. You'll learn how to create, duplicate and move layers. And also how to copy parts of a layer onto a new one, or onto itself.

Configuring the tools for pixel art Preview 08:19

Using Photoshop for pixel art is perfectly fine, but give that its a very complex software with loads of features, we want to make sure that our tools are set specifically to work with pixel level illustrations

Creating lines Preview 05:10

Drawing a line isn't just a matter of creating pixels next to each other. there are optimal line directions and optimal placement of pixel, to suggest a specific shape. In pixel art, every single pixel counts.

Creating circles Preview 05:28

Since a circle is the smoothest shape you can draw, its also the most complicated one to replicate in pixel art, while still ensuring it doesn't look like something else. In this lecture, I'll guide you through the smallest sizes you can draw a circle in, and what are the best aproaches.

Creating Pixel art - Lineart

Drawing your first sprite - a Sword! Preview 05:41

With the fundamentals or line and shape drawing, its time to draw your first sprite: A Sword!
We will create a simple shape, and fill it in with simplistic and flat colors.

Exercise - trace over a book drawing Preview 32.2 kB

Use this photoshop file to practice tracing over a drawing. Use the layer above all the others, and with the pencil tool create a line as clean as you can, over what YOU think, are the most important features on the drawing.If you are not using photoshop, you can use the png version of the file that you can find in the resources.

Conclusion section 2 Preview 00:51

Shading in the real world Preview 02:03

Before we can shade in pixel art, we should look at some real life examples, and see how light affects different surfaces

Shading a sphere and a cube Preview 08:14

In Pixel Art, everything is 2D. But how can we make objects look three-dimensional? We have to use shading. When we shade an object, we give it a sense of volume. there are a few rules to this. This lecture explains them by using primitive solids as an example.

Shading a pyramid and a cylinder. Preview 05:14

After learning the most simple solids (Sphere and Cube) its time to have a go at another couple of simple volumes: A pyramid and a cylinder. These two new volumes follow the same rules, but have unique characteristics.

Creating an apple sprite - Shading Preview 08:40

With the skill of shading, we now have the power to move into a three-dimensional object: An Apple. We discuss the apple's unique shape, and how it affects the shading.

Creating an apple sprite - Outlines Preview 06:04

Outlines are one of the best ways to make objects stand out from the background. In this lecture we give a try to 3 types or outlining.

Creating an apple sprite - Texture Preview 03:25

While still using the colors from the shading, we can add a layer of texture buy changing how we shade the volume. If instead of smooth shapes we take the care to add some variation to our transitions, we can suggest texture.

Creating an apple sprite - Bounced Light Preview 04:17

Shading gives and object volume, and an outline makes it stand out. But how do we make and object seem to belong in a scene? We need to light it with additional light. In this lecture I should the use of bounced light, so help place an object on the scene

Shading

Revisiting the Sword sprite - Adding shading and outlines Preview 07:58

With all that we learned about shading, we can now go back into our sword sprite and add even more detail what what we had previously, turning it into a fully shaded sword.

EXERCISE - Shading a chalice Preview 1 page

Please use the file attached and shade it to make it look like a gold chalice with encrusted rubies.

Conclusion Section 3 Preview 01:26

Color Theory introduction Preview 03:34

This lecture introduces the student to the themes and topics that will be discussed

Color Harmony Preview 09:26

Color Harmony is a way to make sure you make good decisions when selecting colors for strong, bold designs that stand out.

Color Psychology Preview 08:18

Colors can have an emotion charge, or a psychological meaning. This lecture explains the psychology behind some of the most popular color choices

Using color harmonies in mockups Preview 08:37

Color Palettes Preview 10:10

When selecting colors, the color count restriction or overall tone of the scene should influence the palette. This lecture shows a way to create color palettes that actually fit together

Color in shading - Part 1 Preview 09:18

Shading uses value, but color is also an important factor. This part 1 video is spent setting up scene for us to experiment with color and shading

Color in shading - Part 2 Preview 05:25

After we've set the scene, now is the time to make some bold decisions in color, using what we learned

Colors in materials - Part 1 Preview 11:18

Materials not only have difference in shading, but also in the way they show color. In this lecture we will look at some classic examples

Colors in materials - Part 2 Preview 12:16

The basic concept of tiles Preview 09:56

Tiles are by far the most used technique for filling the screen with a world. From Platformers to RPGs, tiles have always been widely used . This lecture serves as an introduction to the concept behind tiles.

Creating the base tile Preview 09:29

With the concept sinking in, we can now go and make out base tile. This will be our main orientation, as it will provide size, style, color palette, volume and camera perspective.

Creating a simple background and adjusting colors Preview 06:38

With a bunch of things established, we can move a little more forward with the mockup, by adding a background. In this lecture I show a really quick and simple way to create a background scene that will serve as a backdrop for the mockup.

Conclusion Section 4 Preview 00:27

Aditional Tiles for variation Preview 10:47

The game world will be made with all these tiles, so it would be nice to have some variation. Taking some of the lessons learned in previous lectures we add variation and depth to out mockup by adding variation in the tiles

Decorative tiles Preview 08:37

Extra tiles will help solidify the game world, and make i more believable. This lecture shows how you can do it, and what problems you'll face, and, obviously, how to solve them!

Creating a pine tree Preview 08:31

Since the world right now is only made up with terrain, its time to add some additional elements for decoration and scale.

Reworking the background Preview 10:08

Its time to turn our attention to the background, and make sure that it also follows the rules of tiles.

Exercise - Building walls Preview 1 page

Imagine your side scrolling game is set in a metropolis. see how little tiles you need to make a big building.

Conclusion Section 5 Preview 00:51

Creating the head Preview 10:15

With out mockup now ready, we can start working on our character. There are a lot of considerations to take into account. We start by just creating the head, and with that we define the size, color, age, and sex of our character.

Creating the body Preview 07:06

While the head provides with the identity of the character, the body provides with an attitude. Pose and shape will help convey a personality for out game character.

Detailing the body Preview 05:22

Once we are happy with a body shape, we need to make it as interesting, easy to read and as recognizable as possible. For this we use shading techniques to help give a sense of depth and scale

Adding an outline Preview 04:38

Just like we did with the apple and sword, we will also now use the same outlinning technique to help our character stand out. But while doing this, we must understand that it will have consequences in out workflow in the future.

Conclusion Section 6 Preview 00:36

The tools and basics of animation Preview 07:53

Creating the base for animation Preview 07:53

Now is the time to take our character from a mockup into a living thing. We do this with animation. Its no the most simple thing, but it is a key aspect of suggesting that the character is alive and ready for action

Breathing life into the character with secondary animation Preview 05:20

Simple as it may be, we need to add more detail to out animation, for it to read well, and look more alive. In this lecture we go into the issue of secondary animation and how we can make something look more organic rather than stiff and robotic.

Animating a run cycle Preview 08:13

Running animation is one of the most important to learn and master. They convey weight, speed and agilty. But before you can do one on the go, we first should learn how to plot and plan a running animation.

Completing the run cycle Preview 04:16

With out animation planned out all we need now is to go in an fill the gaps. It takes time, but is so much faster once we have everything in place.

Animating an attack Preview 05:09

Idle and running so far were animations with continuous frame rate. Each frame was on the screen the same time as the others. In this attack animation we see how we can make a frame be faster or stay longer on the screen, to change the animation dynamics.

Exercise - Character Preview 1 page

This exercise was designed to let you not only practice your character drawing skills, but also develop the capacity to interpret a concept design, and try and translate that into pixel art.

Conclusion Section 7 Preview 01:34

Importing sprites into unity Preview 06:20

In this lecture you'll learn how to save one image with all your frames, and how you import that image into unity and configure it for use in a video game situation.

Recreating the animations in unity Preview 06:07

In this lecture we look into the animation panel in unity to rebuild our animations to work with unity.

Making it interactive with free scripts Preview 05:02

Now that we have all our animations we can turn the player into a movable character with a couple of free scripts and some layer fiddling around. Find the attached resources to get the scripts and character sprite or follow the instructions on the lecture.

What is topdown perspective Preview 05:50

Before creating terrain tiles, we need to understand what the "game camera" is meant to see and show to the player or user. So in this lecture we'll look at a 3d model and see how a topdown perspective is built.

Different types of techniques Preview 07:42

Even though its hard to find names to call these different techniques of creating and using terrain tiles, I've created a selection of the four I feel are the most important and most used in pixel art.

Creating Path Tiles - Setting up the pieces Preview 10:15

Creating tiles can be intimidating if you think about the amount of variations you have to make. So we start with the most straigh forward one: Path Tiles. We'll create a fundation for all the tile pieces we need.

Creating Path Tiles - Creating a usable pattern Preview 07:04

With the most basic pieces created, we now have enough material to create the next pieces with ease, by just reusing parts. We do this to create the base pattern for out tileset

Creating Path Tiles - Adding Shading to the tiles Preview 10:02

The main pattern is done, the road is very evident on the screen, but we can still add a little depth. We'll do that by creating a sense of relief on the road and grass

Creating Path Tiles - Trying out the tiles Preview 04:57

Now that it's complete, lets take it for a spin, and see how it behaves. We'll build road using the tiles we created.

Patch Tiles - Understanding the pattern Preview 08:21

In this lecture, we'll look at how complicated the patch tiles pattern can be. We'll see how its used, and find a solution for a much simpler pattern that will do the same job

PatchTiles - Creating a base grass tile Preview 09:39

Before we do our patch tile set we want to create some base tiles for use later on. We start by making a standard grass tile

Patch Tiles - Improving the grass tile Preview 11:36

After we got a base grass tile laid down, we want to improve on its look so that it breaks the grid effect and looks like grass

Patch Tiles - Creating the dirt tile Preview 07:01

To go with the grass tile, we'll create a dirt tile as well, that we'll later use to make all the transitions

Patch Tiles - Creating the pattern Preview 10:38

With our base tiles created we can go ahead and start putting a pattern together so that we can build our tile set

BlockTiles - The cliff side Preview 06:10

Elevation is one of the main features of the block tile technique, so lets take advantage of that. Since we already have a grass texture and a dirt texture, all we need now is a cliff side texture to use as an elevation indicator.

Block Tiles - Creating the transitions Preview 08:23

With the cliff tile created, we need not to make transitions from the grass tile to the edges of the cliff side. One those are made we can more effectively suggest height.

Block Tiles - adding a shadow Preview 07:07

To further increase the effect oh height the ideal is to add a shadow to the tile set. in this lecture we go about doing that and what tricks you can use to achieve that

Block Tiles - Trying out the pattern Preview 07:39

With the small pattern complete, we can take the tileset for a spinn and see how it looks like.

Exercise - River Pattern Preview 1 page

With a grass tile and a cliff/dirt tile, it is fairly easy to create now a river pattern to add to the world.

Introduction Preview 02:59

Short introduction to the section.

Design considerations Preview 07:33

In this first lecture we have a look at the considerations to have when designing a character for a top down perspective, especially if its going to be viewed in a small area. 

Basic Shapes Method Preview 09:10

In this size of characters, the line art process can clutter the sprite. So most of the time, its better to avoid tracing over a complex drawing and instead define solid shapes.
Solid shapes provide a quick understanding of the model and its parts.

Shading Principles Preview 10:23

This lecture focuses on explaining the shading method and the facial features.
Before we move on to shading the body, we get a notion of the reasons behind the type of shading methods.

Shading the body Preview 12:45

In this lecture we go ahead and create more colors to shade the body completely. We use techniques such as cast shadows and outlining to give form to what was only flat shapes.

Creating and shading the side view Preview 11:40

From the front view we create the side view and shade it using the same colors.

Creating and shading the back view Preview 06:19

Creating the back view for the character is a matter of editing the front view and make sure the elements of the body are kept in perspective.

Front view walk animation Preview 10:00

A simple 4 frame walk animation can be made just from moving the legs, but we add more detail to the whole body to really improve the animation

Side View walk animation Preview 12:27

The side view is the easiest to animate, as the feet are very visible to the game camera. Still, we must worry about the perspective they are in.

Complete animations demonstration Preview 03:45

After adding back a few details here and there, this lecture serves as a demonstration of what can be done with a few additions.

Alan Pauley - Chalice shading Preview 12:13

In this lecture, I take Alan's work and paint over it to explain my suggestions.

Jason Brennan - Fish and candle Preview 14:26

This lecture is an edit to the original artwork of Jason Brennan. He chose some very hard subjects to do in pixel art so the lecture is more about fixing what's done rather than showing a different aproach

Understanding isometric perspective Preview 09:01

Isometric perspective is based on keeping the same dimensions in all 3 axis. This has its advantages and disadvantages. In this lecture we look at some of the specifications when drawing images in isometric perspective.

Creating an isometric grid Preview 07:16

If you are going to create an isometric world, you need to get yourself an isometric grid. This will help you line everything up, making sure parts fit into each other and that you always have a good reference of where your lines should be. On the resources you'll find the base for the isometric tile, if you don't want to create a base tile yourself.

Construction lines for an isometric building Preview 07:46

In this lecture we start our isometric project: A tower with barracs. We first define the scale, position and shape of our building and place down some construction lines for what we will be creating afterwards.

Creating the line art and finishing up the line details Preview 10:20

With the construction lines laid out, it's now time to create a line drawing of all the details of the building

Drawing the constrution lines for the rest of the building Preview 12:42

With one part of the building created the next step is to add the rest of the building. The challenge here is drawing the roof for the Barracks as its a prism shape and we need to define its proportion and dimensions.

Shading the tower Preview 10:53

Flat colors are painted in, the line art is complete, we now move to shading the tower buy creating a set of 4 colors.

Adding a shadow and shading the Barracs Preview 10:13

to help place the tower and barracks on the ground we create a shadow and after that we wrap up by shading the barracks as well

Additional shapes in isometric view Preview 09:45

Creating boxes and prisms can be made simple if the isometric grid is well placed, but other shapes such as circles or cylinders can present a challenge. This lecture deals with cylindrical shapes.

Adding detail to the scene Preview 09:01

In this final lecture we deal with rendering a shape to suggest its orientation and tilt while adding detail to the scene along the way.

Exercise - Iso Cottage Preview 1 page

This exercise allows you to practice isometric drawing and planning. Start by looking at the concept and seeing how you can translate that into an isometric pixel art image.

Creating a base button graphic Preview 11:53

This lecture takes you through the first steps in creating a button with text. We choose a font, create a base palette and the button it self.

Creating the variations Preview 10:49

With a button base created we can go on a made the variations so that the player will have a clear feedback of how the button is reacting to his input. We change the normal button to create the Mouse over, Pressed, and Disabled versions.

Creating a dialog box with title bar Preview 10:09

This lecture is all about reuse of elements created. With the normal button, we can create a dialog box just by extending it.

Creating progress and level up bars Preview 08:56

Using graphics we already created as base, we will add a bar that we can stretch to fill in a progress bar, or a loading bar, or even a life bar.
With that created we can add small segment to create a level up bar, in which each segment represents a level

Creating a slider Preview 11:32

In this lecture we create a simple slider bar, and a more complicated slider button that is an hexagonal jewel.

EXERCISE - Inventory screen Preview 1 page

Gathering the skills you learned, create an inventory screen with slots for your items and a scroll bar complete with arrows on the top.