All language subtitles for 1.2 The Pixel Art Fundamentals

Hey, what's up guys Nelson here, and today

we're going to be talking about the pixel

art fundamentals.

There's a couple of key factors

and techniques that can help define

what your pixel art is

and I'm

going to try my best to explain how to get pixel art

as clear as possible.

All right.

Let's get started with the first one, readability.

So readability is essential to anything

you're making and even more so important in pixel art,

since you have a limited amount of pixels to work with

and every pixel really matters.

So in this example here

I drew three tasty burgers.

And each one is a little bit different.

Subtitled by
-♪ online-courses.club ♪-
We compress knowledge for you!
https://t.me/joinchat/ailxpXoW3JVjYzQ1

I want to ask you guys

which Burger out of the three looks the best you

which one reads as a burger.

They all certainly look like burgers,

but some of them

just feel like really off, the first Burger

the bun looks super compressed and the cheese

what's going on with

that, this overall looks like a really flat Burger

as for the second Burger.

This one looks like the Patty is like really small.

And there's a lot more bun than Patty ratio.

As for the third burger, here's a nice balance going on

with all the elements, the pattys nice and thick

the cheese comes out

a bun is nice and round.

It. Looks like really appealing. So in this example,

I just wanted to show you guys

just the difference of what a couple pixels can make

and it changes

our perception of what we're trying to convey.

I chose a burger for this example

because I think it'll be easier to grasp.

But this principle will

apply to anything that you're drawing in the future.

I always like to ask myself

does this look like the object.

I'm trying to draw?

and sometimes it's just a difference of 1-2 to pixels.

The key is to reduce the noise as much as possible

the better

remember and pixel art less is more.

I like to keep the pixels as clustered as possible.

I kind of imagined it the same as painting.

You noticed that every kind of color that I use.

I always keep it together with each other

except for the outlines.

Everything else is stuck together properly

and it looks a lot more reasonable than what I had

in the first two burgers.

Which brings me to my next Point

orphan pixels. Orphan pixels are stray

styles that are in your pixel art,

and they're usually one to two pixels big.

And they just contribute

to the overall noise of the pixel art.

So the only purpose that I found is

its useful for is that it serves as a nice highlight

to end off your drawing

and just give us sort of like an nice pop to it.

Alright that brings me to my next Point dithering.

The dithering technique

is using a pattern of pixels to blend two colors together.

It's more commonly used in retro pixel art games

because they had such a limited color palette.

So they really had to make do

with mixing two colors together

to get the one that they wanted.

It also creates a really cool pattern

and adds texture to your work.

But to be honest,

I often don't use dither that much

and it creates a lot of noise and the readability will

get kind of lost if you use too much.

So I only like to use it really sparingly,

but I still want to teach you guys

how to make a dithering brush

so you guys can use it anytime you want.

So we're going to click on file, new

and we're going to make a new canvas again.

Let's make our

canvas like 10 x 10 pixels wide, and have the resolution as 72

and afterwards just click create

So now your canvas is only 10x10 pixels wide,

so you're going to want to zoom in all the way.

So basically

the size of your canvas will be the size of your brush.

I'm going to go to brush settings to modify my brush.

I already have mine has a little window by itself,

but you can go to window at the top of your toolbar

and click, window and brush settings

Now this is where we do

all our modifications to the brush

to get the desired dither effect.

So right now

it's under the brush tip shape tab

and the only thing we're going to change

is the spacing, right now

It's around like 25.

but we're going to want to up it till

we see some sort of dither.

So let's increase the spacing to around 182

and you'll start to see the brush kind of change

that is like a little spacing in between each pixel

and that means that there is a 1 pixel spacing

in between

you can keep increasing the spacing

and it'll increase it incrementally

buy one pixel so you can get 2,3,4,5 spacing and so on.

I personally just use one spacing.

So every other thing is a pixel.

So today we're going to make a brush

with the one pixel spacing

So let's first start off by making a new layer

and that's where we'll be putting our brush

so you can hold down shift

and you can bake perfectly straight lines horizontally

or vertically

and that way

I don't have to free hand drawing this.

And that's also true for regular drying

holding shift down and making straight lines

it helps save a lot of time.

So after we finish making our pattern

we can hide the background layer by clicking the eye button,

and now your background layer is hidden.

So now the background is transparent

and when we go to make our brush,

it will only pick up the black pixels

that we put on. All right.

Let's go to edit and click Define brush preset.

Let's call it dither test 1

for now. Press enter and now you have your dither brush.

and keep in mind

that this brush only works with the pencil tool

if you switch back to the brush tool

it'll be super blurry and airbrushed again.

So let's give this brush a try shall we?

So right off the bat

you can stamp it

but once you hold and drag like a brush

then all the pattern will be lost.

It's all just pitch black.

I really quick way to fix

this is to go back to your brush settings.

Change the spacing of the brush that you just made.

I changed my spacing to around 107%

That's like the sweet spot

where you don't get any spacing

and you don't get any overlap.

So now when you hold

and drag your brush, there's no overlap

anymore and you can keep making the pattern over

and over.

Alright, let's move on to line steps now.

Lines are by far

the most important tool to convey pixel art.

They can divide shapes.

Describe volume and create texture as well.

Line steps are important in helping

you achieve the shape.

You're looking for starting with the first one

we can do a straight line.

Hold left click and hold shift

and then you can drag the line up or down

and now you have a perfectly straight line.

This is a really useful

shortcut that I like to use

and help save a lot of time

when I draw.

So if you want to get a line at a really

specific angle,

then these lines steps will really help you out.

You'll notice that I put 4,3,2,1 and that's

describing the height of the line step

each step in

the line has to be the same number for the line to stay

consistently straight

if it's 1 pixel off

the line won't look straight anymore.

So you can do these line

steps in a number of different ways.

For the 4 pixel lines that we can try doing it

step-by-step by counting each pixel.

So we do

1, 2, 3, 4 move on to the next step 1

2, 3, 4,

and continue that, another way to do

it is by clicking left

click with a pencil and then holding shift

and then clicking to the second point to

complete the line

Connecting lines

makes it super efficient

so you don't have to spend time counting one by one.

But you obviously have to do a better

clean up afterwards

whenever a draw and come up with ideas.

I usually just breathe on the line or

I use the line connection shortcut.

Sure, the lines look messy,

but you can always clean it up afterwards

and get it, right.

Those extra pixels that show up

whenever you draw a line

free hand

those are called jaggies.

And they make your lines thicker in some places

or the lines like a little bit crooked.

So you just want to go ahead

and fix that up to create a straight line.

The same kind of concept goes for Curves as well.

When you draw freehand

there's definitely going to be jaggies

Subtitled by
-♪ online-courses.club ♪-
We compress knowledge for you!
https://t.me/joinchat/ailxpXoW3JVjYzQ1

that are in your curves.

So you just want to go ahead and clean up that line

so you can get a nice curve going.

You can also get a good curve from using a circle

by using the pencil tool

and you can erase the insides and leave the outline

and that can be your curve as well.

It's a little bit of a roundabout process,

but it still gets the idea across.

In order to create a perfect curve.

You just have to follow the line steps.

The line steps for a basic curve are usually 3, 2, 1, 2, 3.

1 being the point that curves the most. Whenever

I do line steps or Curves and something feels off.

I usually do

a test by squinting. Squinting

can help identify the overall shape that you're drawing

and can eliminate some of the things that feel off about it

All right guys

so far our last lesson

we're going to be talking about angles

and the angles commonly used in pixel art.

Whenever it comes to drawing objects,

I find it easier to conceptualize it

as like a 3D thing

and a 3D object has an x, y, z face.

Let's talk about the front view

first. You can see the X and Z

faces X being the front face

and Z being the side face. In the front view,

it's also possible that

you can only see the X space. In this example,

I drew a cardboard box.

And it really helps

defining the Faces by having a light and Shadow.

So I typically have a light source from the left side.

So whenever it's shining the side face

is always in the shadow.

The front view is most commonly used in games

like Mario or metal slug.

Just any kind of side-scroller

shoot-'em-up games will have that kind of angle.

Let's talk about the top view next

The top view

is like halfway between a bird's-eye view

and the front view.

So you're looking at it from like a 45 degree angle.

You can see the X face and the Y face the front

and the top. Is really useful to create a grid

so you can scale everything in place.

Usually what level designers like to do

is that they scale 1 grid

tile to be the size of the player.

And then it'll make it

easier to scale everything else around it.

This is most commonly found in games like

hyper light Drifter or stardew Valley.

Let's talk about the isometric view now.

In the isometric view,

it's almost like a mix between the front view

and the top view.

So now you're able to see all the faces

x y and z The isometric view is really particular

because the line steps follow a very specific angle

the line steps are always two pixels

long and one pixel wide.

It's really useful to have an isometric grid on hand.

So, you know where to place things

and how to scale it properly.

You know what

let's make a quick isometric grid together.

So we're going to start a new canvas again,

and let's make it 400 by 225.

That's like around the screen resolution ratio.

So we're going to start a new layer

and then we're going to choose like a light gray.

You want to choose like a light color

Because you're going to draw stuff

on top of the isometric grid afterwards.

So I'm just going to start small and do a couple lines

steps and then keep copy

pasting it until I get the full line.

You can either copy paste

by pressing Ctrl C and Ctrl V. Or you can

drag the layer

and drag it to the new button

and then it will create a new one right on top.

Afterwards you're going to press Ctrl T to transform it

and then keep connecting it to your previous line

step. You're going to want to keep doing this

until you get one

consistent line

going from one side to the other.

Whenever I transform something.

I hold the shift key and you can move it a lot faster

compared to moving at pixel-by-pixel.

If you duplicated the line steps like me

you probably have a lot of layers.

Just make sure to merge it

by selecting all of your layers

and pressing right click

and then there will be an option to merge

all your layers

to one. Afterwards

you're going to want to duplicate the

line that you made. In order to keep it consistent

you're going to want to transform and then hold shift

and then go up to 2 times 1, 2.

Now each line is going to be part of that grade.

We're making

so we want each line to be two spaces apart

just like what we did before.

Now we have all our isometric lines for one side.

Let's merge them all together now.

Since a lot of the lines are outside the canvas

right now.

Let's use the rectangular Marquee tool to select it.

The selection can only be inside of the canvas.

So just click and drag, afterwards

copy it and press Ctrl shift V

and this will place it back in the exact same spot.

It was at before

Now that your lines are contained in the canvas

let's duplicate the layer. Transform it

and there's going to be an option up there

called width and height.

So it's at 100%

right now.

We're going to want to change the width in negative 100%

So what that basically does is flip tge

object you're transforming.

And now you have an isometric grid.

there's a couple of small touch-ups that I have to do,

but That's pretty

much the gist of how to make an isometric grid.

And that's pretty much it to pixel art fundamentals.

Thank you

so much for watching

and let me know

if you guys have any questions about it.

I know the fundamentals seem kind of boring at first,

but it's a really important foundation to learn

and my next video, we'll be gathering all that

we learned the past two lessons

and making pixel art together, see you in the next one!

and take care!