Now that we know which assets that we need to give to

the development team, we'll go ahead and get started with creating the graphics.

We'll start with our scene and the HUD elements.

At this point, I like to switch from pen and paper to Adobe Photoshop.

Earlier, we drew our scene on paper, at a scale that matches a non-retina iPhone.

Which is 480 by 320 pixels in dimension.

But we want our game to also work on a retina iPhone.

The resolution for an iPhone 4 is 960 by

640 pixels which is double the 3rd generation iPhone.

The resolution for an iPhone 5 is just a little wider at 1136 by 640 pixels.

I like to work from the lowest resolution that

the game will appear on, and then scale up.

Since our final graphics will be created in Adobe Illustrator, we wont have to

worry about losing quality when scaling because

Illustrator is vector based and infinitely scalable.

Let's open up Photoshop.

So what I'm going to do is set our document up to be 568 by 320 pixels.

You probably notice, that's exactly half of an iPhone 5.

I'm doing this because the older iPhone height is half of the iPhone 5,

so we're cutting everything in half and

we'll plan on our developer centering our scene.

Knowing that some of it will be getting cut off on older models

of iPhones, and all of it showing on an iPhone 5 or above.

If we were to start drawing now, our image would

be very pixellated because we are at such a low resolution.

What I like to do is scale my image up by 400% so that I can draw in

higher detail, and then later remember to scale it

back down to 100% when making my final assets.

So I'll go up to image, image size, and then switch pixels to

percent, and change the width and height to 400%, and hit OK.

One last thing we need to do before we start drawing, is to set

up our grid so we can closely determine what size our final assets will be.

I usually use a grid of 16 by 16 pixels when designing for iPhones

or iPads, or Apple products in general,

because their heights are usually divisible by 16.

So let's go up to Photoshop > Preferences.

Guides, Grids & Slices, and since we've scaled up our image to 400%,

we're gonna need a grid line every 64 pixels because 16 at 400% is 64.

We'll just keep the subdivisions at one.

Now we're ready to start drawing.

Let's create a new folder in our layers pattern called scene.

We create a new layer in that folder called base scene.

For this step, we're going to be drawing the ground

in blue, just like we did on our sketch pad.

Just like in our sketch, we'll draw a straight line,

two grid squares up from the bottom of our document.

Let's first turn our grid on.

Go up to view, show, grid.

Now we'll draw our ground.

Let's choose a bright blue color.

And we'll just draw our line at the bottom.

[BLANK_AUDIO].

We'll add some details like the crater and rocks.

I'm using a drawing tablet to draw our scene.

You can use whatever you're comfortable with.

[BLANK_AUDIO].

Remember, our cat character will be here in

the middle of our ground, so we don't really

want to draw anything here, because it will most

likely get covered up or just be visually distracting.

So that's the base for the ground.

Let's draw some cool stuff for the background, since

we're in space that'll mean other planets and stars.

Start with a small planet to the upper left of our scene.

We'll draw a circle here to the left, about two by

two squares with a circular spiral pattern to give it some character.

[BLANK_AUDIO].

And another planet over here on the right about twice as big.

Let's make it four by four squares and add a

ring like Saturn's ring with some dusty debris floating about.

Little details like this will really help the game feel polished later on.

Next, we'll sketch the HUD, let's create a new folder

called HUD and a new layer inside called Base HUD.

We know we want the cat's head up here on the left next to some health bars.

This will help the user realize that's Space Cat's health.

The problem is, we don't know what Space Cat's head

looks like yet, so we'll just draw a circle for now.

And, honestly, that's probably good enough.

Let's make this circle two by two squares, keeping in mind that

this means it will be 32 by 32 pixels at our lowest resolution.

For the health bars, I want them to be as tall as one square but half the width.

You can draw straight lines with the brush tool by holding down Shift.

I'm just gonna copy and paste this square so

I don't have to redraw it three more times.

Then I'll nudge it into place with our arrow keys on our keyboard.

Then we can just nudge them all up with our arrow keys.

[BLANK_AUDIO].

So that's pretty much the base sketches.

Let's create a new layer inside of our scene

folder for our outline, and let's call it outline scene.

Like before on our sketch pad, we're going to outline it now with a black brush.

I want the ground to look sort of rocky, so I'm going to loosely trace around it

with my brush and make it sort of wavy and uneven like the surface of a planet.

Next, I'll move on to the crater,

and then outline the rocks.

Now, we'll move on to the planet in the background.

We'll trace our little planet in it's spiral pattern.

Now, the bigger planet and it's dusty debris ring.

I'm not going to worry about drawing any

stars, because that would take forever to do manually.

We hae a trick to create many stars in Adobe Illustrator that

we'll walk through later when creating the final assets of our scene.

Let's move on to the HUD.

Create a new layer in the HUD folder called outline HUD.

Let's trace the circle for that cat's head, which we'll replace in a later step.

[BLANK_AUDIO].

And now the health bars.

[BLANK_AUDIO].

Let's hide the base layers in each folder because now we're going

to add some shading and the base will just get in the way.

Create a new layer in the scene folder called shading scene.

This layer would be the same color as the last black.

But we'd lower its opacity to 30%.

To en-depth to a scene its important to add shadows.

We'll assume there's a light source off to the right of our scene.

So first, we'll shade the ground, and the objects

on top of it, like the crater and the rocks.

When creating shadows, you have to be sort of creative.

If our imaginary light source, is up to the top right of our document,

then all of our shadows will be cast to the left of our objects.

Try to mimic the real world, as closely as possible.

Now let's move on to adding some shadows and details to the background objects.

[BLANK_AUDIO].

Don't be afraid to erase.

[BLANK_AUDIO].

And last, we'll shade the hud/ elements.

So, create a new layer in the hud folder called shading hud.

[BLANK_AUDIO].

Just shade the hud elements like we've shaded

the rest, but ignore the cat's head for now.

And now we're all set up for creating the final assets for our scene.

Next, we'll be designing our characters.