Learn Professional Pixel Art Animation For Games

Learning the basics of Photoshop for creating pixel art Preview 06:41

This lecture is very important even if you are familiar with Photoshop. There are some setting and tools that must be changed in order to create pixel artwork. This lecture will also go over the basic tools we will be using through out the course to create our game artwork.

Making your workflow faster with hotkeys! Preview 02:01

In this lecture you will learn all the hotkeys for the tools we have gone over. Hot keys are keys on your key board that will bring up tools quickly when pressed. Hot keys are very important for making your work flow faster.

A simplified way to look at layers and what you can do with them Preview 06:08

Many people find layers in Photoshop to be the most difficult and confusing part about using Photoshop. In this lecture I'm going to teach you a simple concept that will help you better understand layers. You'll also learn about layer types and how to keep your layers organized. 

Shapes in your artwork Preview 09:57

Shapes are one of the most important components of any type of graphic design including pixel art. In this lecture we are going to have a look at some characters that we can brake down into their simple shapes. Then at the end of the lecture we are going to create a simple pixel silhouette of a dog. 

Value and contrast Preview 08:15

Value is also one of the most important components of any type of graphic design. Opposite values create contrast in your game artwork which is vital. In this lecture we are going to go over some examples of good value contrast. Then you'll do your own exercise using values to create a sphere in pixel art.  

Learning color theory Preview 07:58

Colors are a major part of creating pixel artwork. Color can tell you viewer how to feel and also where to look. Color is also very important in creating contrast. In this lecture we are going to go over the color wheel, how to choose complimentary colors, warm, and cool light.

Finding inspiration and reference for your pixel art game Preview 02:22

All great artists were inspired and influenced by others art. In most cases they actually copied others great artists to become masters. In this lecture you are going to learn how to find inspiration and reference for your pixel art.

Pixel game art creation quiz

Test your knowledge of Photoshop basics and pixel art creation with this quick quiz. 

Building a wood crate from scratch! Preview 07:08

You are now going to get to build your first piece of pixel art in this course. This lecture is going to teach you how to make a simple but realistically rendered wood wooden crate. This project will allow you to exercise your pixel art knowledge you learned in the previous section.

Adding texture and outline to your crate Preview 05:05

Now that you've built your basic crate we can go ahead and make some adjustments to it. We can change colors, add texture, and give it an outline. Sometimes it takes a few layers in Photoshop to get to a final product.

Creating a diamond asset Preview 06:37

In this lecture you are going to create a red diamond. You will be challenged with creating an object that reflects and reflects light. By the end of this lecture you will be ready to animate your diamond for game play.

Animating your diamond Preview 07:08

Now that you've created your diamond asset we can animate it. First we are going to create a second frame of the diamond that will create the illusion of rotation. Then you will animate a sparkle that will make your diamond appear that it gleams as it rotates. 

Setting up your animation Preview 04:36

In this lecture you're going to learn how to set up your animation frames so they will play as an animation. You will be using Photoshop's animation timeline tool. By the end of this lecture you will be able to see your diamond animation in action!

Putting your animation into a sprite sheet Preview 08:22

Now that you've created your animation you need to put it into a sprite sheet. An animation sprite sheet will allow you to place your animation into a pixel video game. In this lecture you will brake your animation up into individual frames and place them into a grid system to create your sprite sheet.

Pixel art prop creation quiz

Take this quick quiz to test your knowledge of this section.

Section 3 conclusion Preview 01:06

You've made it to the end of this section. In this section you created a wood wooden crate where you learned how to add texture and create warm and cool highlights and shadows. Then you created a diamond that you animated to rotate and sparkle.

Designing and creating your character Preview 10:25

Now that you've learned all the basics of creating pixel art you are going to create a pixel character for a video game. In this lecture you will learn how to draw out the shape of your character, fill the outline in with color, and then add shadows and highlights.

Animating your characters run cycle Preview 14:42

Once you have created your character you are now ready to animate them. In this lecture you are going to learn how to create the run cycle. The run cycle is made up of 4 different frames that create the illusion of a running character. 

Setting up your animation in Photoshop for playback Preview 03:03

In this lecture you will learn how to set up an animation in Photoshop. The reason why we set up a playback animation is so that we can see how our animation runs. This is where you want to change any frames that ruin the flow of your animation.

Animating your characters jump cycle. Preview 07:40

Now you can move on to creating your jump cycle animation. The jump cycle is made up of 2 frames, the couch pose and the jump pose. By the end of this lecture you will animate your character jumping and set up an animation playback of it in Photoshop.

Animating your characters hover cycle Preview 04:00

The last animation cycle to create for your character is the hover cycle or idle cycle. This animation will play when your character is standing in one spot idly. Once you have completed the hover cycle you can move on to putting all of your animation frames into a sprite sheet.

Adding a glow effect to your flame Preview 01:25

In this lecture i'm going to show you how you can add a cool glowing effect to your flame. 

Putting your character animation frames into a sprite sheet Preview 07:24

Now that you have all of your characters animation frames complete you are ready to put them into a sprite sheet. In this lecture you will learn what to do to prep you frames for a sprite sheet. Once the frames are prepped you will drop each frame into the sprite sheet one at a time then save it out as a .png.

Section 4 conclusion Preview 01:02

You made it through the 4th section of the course, congratulations! In this section you learned how to design a character from scratch. You also learned how to animate three different animation cycles. Your assignment for this section it to design your own character and share it to the Q&A section of the course. 

Creating a brick pattern for your game background Preview 12:13

When creating pixel art game backgrounds you will have to duplicate patterns such as bricks and grass. In this lecture you will learn how to create a brick pattern that will automatically duplicate your pattern for you. This can save you hours of work.

Learn how to make your foreground, mid-ground, and background look amazing! Preview 02:59

Before continuing with our background I want to go over the concept of foreground, mid-ground, and background. In this lecture you will learn how to separate them out in your artwork and why it's important. Many great artists use these concepts in there own artwork.

Adding your sky and mountain range Preview 02:24

In this lecture you are going to add a sky and mountain range to your background. It's important to create some contracts between your foreground and background. This can be done by de-saturating your background and lightening its values.

Creating a grass pattern for your game background Preview 09:18

In this lecture you are going to learn how to create a grass pattern that will be able to stretch across any length. This technique is very useful and will save you loads of time. Once you have created your pattern you are going to apply it to your background.

Building mid-ground mountains Preview 11:47

Now that you have created a fore ground and a background you are going to add a mid-ground. This is going to create more depth in your background. When you are creating your own background you can ad as many mid-grounds as you would like.

Learn how to create pixel art trees! Preview 06:55

You are now going to add some trees to the tops of your rocky mountains so they don't look so bald. Once you've create you silhouette shape for your trees your going to add a double highlight to them. You are also going to create some cast shadows to your mountains. 

Animation waterfalls Preview 10:20

In this section you are going to add some water falls to your mountains. You are also going to animate the water falls to appear like they are flowing. The technique for doing this is actually very quick and simple.

Saving your background out as different documents for parallaxing effecst Preview 04:29

Now that your background is done you're going to save it out in separate sections. Your background will be broken up into three separate documents. The foreground, mid-ground, and background. This is so you can create a parallaxing effect in your game, which is an effect that adds depth you your image. 

Pixel art background quiz

Take this short quiz to test your knowledge of this section.

Section 5 conclusion Preview 01:03

This is the end of this section. In this section you learned how to create custom patterns in Photoshop that can be applied to your background. You also learned the differences between foreground, mid-ground, and background. Lastly you learned how to ad animation to your background. You assignment for this section is to create you own background and custom pattern, then post it to the Q&A section of the course. I look forward to seeing your artwork.

Building your map tiles Preview 08:06

You are now going to build your very own game map out of pixel art. Photoshop offers very useful tools for creating game maps. In this lecture you are going to set up the basic shapes and colors for your map tiles.

Adding grass texture to your land tiles Preview 07:35

Now that you have your colors and shapes laid out for your map tiles you are going to create some grass texture for them. You are going to use the same pattern technique you used to create your brick pattern in the previous course. You're also going to learn how to make a quick and easy cast shadow with out having to draw it. 

Creating rock text and adding shorelines to your map tiles Preview 05:28

In this lecture you are going to add a rock texture to the edges of your land tiles. Then you're going to learn how to create a water shoreline to the edges of you land just by adding a light blue outline to them. 

Placing your map tiles Preview 08:01

Now that you have completed all of your basic land tiles for your map it's time to beguine placing them into your map document. In this lecture you are going to design out the water and land mass in background. This will be done by first sketching out your map layout then coping your tiles over and placing them in their correct position.

Building a rock in the water asset Preview 04:26

Many art forms involve layer detail on until you have a final polished product. This is how you will be creating creating your map. You will build won asset at a time then add them to your map. In this lecture you are going to create a rock in the water asset.

Building a bridge asset Preview 06:06

In this lecture you are going to build your second asset. The second asset is a wooden bridge that you can use to connect your islands and bodies of land. You will also learn how you can manipulate one asset to a different viewing angle.

Building a mini island asset Preview 06:10

Now you are going to build a mini island that can be floated out in your body of water. You are also going to learn how to convert you island into a pedestal that can be used on top of your grass. Remember that the more you can reuse assets the quicker your workflow will be.

Building a brick house asset Preview 14:44

In this lecture you are going to build a brick house asset from scratch. It's important to remember when creating your map assets that you take into account the perspective that they are in. Once you have created the front view of your house you are going to build a side view of it.

Building a tree asset Preview 09:15

In this lecture you are going to build a tree asset from scratch. It's important to remember when creating your map  assets that you take into account the angle they are being viewed from. The tree will be designed from a top down perspective allowing you to see the top of the leaves and all of its roots.

Section 6 conclusion Preview 01:17

That's the end of this section. In this section you learned how to create an entire detailed pixel map from scratch. You built individual sprites that you were able to drag over into you map document and start constructing your map one asset at a time. I hope yo enjoyed this section and thank you for being such a great student!

Course conclusion Preview 00:20

Congratulations! You made it to the end of the course. Thanks for joining me and being such a great student. I look forward to seeing your pixel art work in the Q&A section of the course. If you have any questions about pixel art, video game art, or any other types of digital ask them in the Q&A section of the course.