2d Bitmap art for video games

---- DOWNLOAD THE RESOURCES FOR REFERENCE ----
This lecture focuses on the basics of using Photoshop and working with the interface and tools.

Once you start getting bigger and bigger files, its good to keep them as organized as possible. This lecture shows simple techniques to keep your layers organized.

Photoshop comes with a set of basic shape tools, that allow you to create the primitive shapes. This lecture shows how to use them

When a shape gets more complex or is a mix of shapes, then you need to start playing around with combining simple shapes.

Sometimes the Photoshop tools won't be enough to create more organic shapes. If you aren't confident enough about drawing, this lecture gives you a simple gradual approach on creating hand drawn shapes

Still in the subject of using selections, this lecture shows how selections can be really useful when used to help shading. You can try as well, just download the axe image from the resources

|||| DOWNLOAD THE RESOURCES ||||
This exercises focuses on using your skills of creating selections to try and replicate the shapes presented

Materials react differently to light and shadow. This lecture is a live video of some pieces with different materials, where I explain how they react to light and how light interacts with each piece.

Understanding how light works on a surface is the first step to successfully shade an object. This lecture shows a bit of the thought process behind putting down a shadow and a highlight

Chrome is one of the hardest things to shade. But it can be faked very simple. This lecture shows 3 simple techniques to fake a chrome reflection on a cylinder

Cubes are easy to shade because the surfaces are flat. Being flat means the color stays flat as well. But if you material is translucent, like plastic or wax, some color might bleed through. This lecture explores that and shows you how it can be done.

To try out our knowledge about materials, we are going to have a go at creating a gold button with a glass core. To do this, we first start with a basic shape

To make it easy to work, we take a separate layer with just part of the button rim and shade it separatly. While doing this, we make decisions on the position of the light, and color of the gold.

Taking the decisions we made on the previous lecture, we no act on the inner rim of the button, which is inverted in volume, so all that we did we have to rethink for this part of the shape.

Finally we add the glass core by creating and shading a basic shape. We then take a photo and convert it into a reflection image for the glass

With just a button we can start to create other interface elements. In this lecture I show you how you can create a dialog box and a title bar using the button we created earlier

|||| Download the resources ||||
This exercises takes what you learned and lets you apply it to shading. Make sure you pick a light source and shade the object accordingly. Remember to make the wood different from the metal so don't make the wood clear coated so it won't be reflective. make it dull and rough. try and get your metal reflective as steel or silver would be, but not too polished.

This lecture focuses on bringing a set of techniques into on single image, and making something that feels real, but is completely hand made. Special attention is given to the use of light, bounced light and reflections, and also the use of Layer Masks

If you want to create something from the real world, and have to do it from scratch, you should use reference.
In this case we use a blueprint of a pool table to act as an overall guide for creating the shapes we'll need later

Using a similar technique to the table cloth, we'll create the cushions for the sides of the table. To help speed things up we'll use duplicates.

This lecture focuses on creating a wood texture from scratch using photoshop filters, and then puting that texture to use, creating the wood frames of the pool table.

With the cloth and wood created, we need to make the holes. We'll also create a texture from scratch which we can extended and use to give some texture to the hole shape.

To complete the table, we'll have to add some final details, such as side marks and lines on the cloth. Details like these help give a sense of credibility to the artwork

As an exercise, try and match your image to the one I provide as reference. You should be able to get it done with what your learned in this section.
Remember to increase the canvas size to hold more image, and remember to use drop shadows on the pool balls.
Create a copy of the pool cue to use as a shadow, after you darken it. Change the color of the cloth just by playing around with the hue and saturation.

Creating textures from scratch isn't always possible just with filters. Sometimes you need something a bit more organic. Using custom brushes, we'll create a grass texture that can be used in tiles.

To add a bit of flare and detail to our background, we'll create a leaf custom brush that we can scatter around the image to add visual interest.

With a scene taking shape, we want to have some dialog windows to hold our information. This lecture teaches you how to make a paper texture that you can use for your game over screen

Moving forward towards the end of the section, we have start using some illustration techniques to create a place to hold the score as we play. We start with a sketch to get the shape and scale, and then we shade the piece to make it look like wood.

Tokens are meant to be the main element the player interacts with. They should be bold, bright and shiny. This lecture teaches you how to make one with all of those caracteristics, but also teaches you how to quickly convert it into different versions

|||| Download the reference ||||
Use the reference as a guide to create a custom brush which will scatter flowers around the grass background.

Make sure to activate "Apply per tip" so that each flowers you draw comes out with a different color without you needing to let go of the mouse button or pen

Creating a character can be very intimidating. I've broken the process in easy steps so even if you don't feel confident enough to hand draw a character, you can still follow along. We start the project with the head, which is the hardest part to get right. But if you follow along with the structure I use to draw, you'll get always get better results

=== You can download the line drawing from the previous lecture ===
the hardest part, which is building the volume for the head, is done. Shading it will not be easier because the line art acts as a guide to place the color and shades.

This lecture focuses on creating the torso and dealing with two colors on the same piece.

The arm is a delicate piece because of how it rotates on the shoulder socket. Its important to understand the limits of the arm so that when we create the line art we know where our outlines are going to be

Hands can be closed in a fist, open or can be holding objects. This lecture I show you how to draw a fist and a hand that is holding a gun

To get a feel for how the upper body of the character is coming along, we want to create the arm on the far side of the character. we can reuse the arm, but we have to make a specific hand

To connect the legs to the torso we first need to create the pelvis .That's what we are going to be doing in this lecture

To wrap the character up, we'll create the lower part of the legs and the shoes. This will complete the character and give you an idea of what you can do to it with animations.

In this lecture I show you the usual process I use to animate a character in unity, after I created the image with all the body parts

|||| Download resources ||||
This exercise lets you try and create a character from scratch using a zombie drawing. Just remember to keep the body parts on separate layers

The most important step for the success of a design is really the design phase. Skipping this for a lazy design will cripple the image and it will be very hard for the shading to make it look good. Always spend as much time as you can refining a design.

=== Download the Design from the resources of this lecture. ===
With a clean design, its also important to do a color sketch, which will provide a look and feel for the finished piece.

Again starting with the most important and probably hardest bit, we'll shade the ribbon that holds the name of the card.

This lecture shows you how to shade a piece of paper with some details on the edges. It dives a bit into illustration and hand shading, but its not overwelming.

Using a process that is slightly different from the ribbon, we'll shade the banner and add the chrome spheres on bar that holds the banner in place.

Using layers styles and a bit of hand painting, we'll shade in the frame for the card illustration.

Just before the final touches we want to create the frame of the card it self. Using layer styles we'll create the volume for the frame. Afterwards, with a bit of trickery, we'll give it some extra detail

To finish the card, we'll add some details, such as a name for the card and some orbs to represent mana cost, attack power, life and rarity of the card.

|||| Download the resources ||||

Attached you'll find a Photoshop file with a card pre-configured. Use your learned skills to detail it more.
If you are NOT using Photoshop, you can use the JPG provided as a reference for recreating the layers for each element of the card.

The first thing when dealing with isometric perspective is to understand how it works. Since we can't get an isometric grid to help, we can use a workaround to actually get some grid snapping to help create the base linework for the building

Creating textures from scratch in photoshop can be much faster than actually gathering good photo textures. Unless you require something very specific, most of the time these simple textures will be sufficient. In this lecture we learn how to create and transform textures to fit them to the isometric world

We know how to place textures on the horizontal plane, but we now have to place them on the vertical sides of the building. Using a different approach we can get them lined up to create the box that will be the building

Adding doors and windows will make the building look like a real building. Using some selection tricks and shading, we can make them look cut out of the walls and sunken in.

To make the building come more alive, we add color to the walls and a sign. We keep the sign in the same shading using some layer trickery and we add text to it.

Using some vector shapes rastered to pixel we create a cardboard shape. With some selections and adjustments we can make it look like a box. Using a selection and some duplicating techniques we create a rusty barrel as well.

With a few selections and coloring tricks we can create the gas pumps area and some gas pumps as well, finishing up the elements of the gas station

To finally finish off the building, we create a sand texture from our cement texture and use that as a way to add dirt and sand to our building. As a fun addition, I draw a rusty destroyed car so you can see how I would go about doing a decorative element like that

|||| Download the resources ||||

Using one of the two images provided, turn the line sketch into a fully shaded and textured building. Try and give it a military look as its supposed to be an Ammo and Supplies depot. Feel free to reuse the textures created in this section.