Learn Professional Pixel Art & Animation for Games

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 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 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.  

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.

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.

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

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.

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.

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. 

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.

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

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.

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. 

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.

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.

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.

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.

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. 

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.

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.

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.

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.

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.

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. 

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. 

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

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.

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.

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. 

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.

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.

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.

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.

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!

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.