In this video I'm gonna be showing you how to make pixel art backgrounds.
If you’ve seen my previous pixel art videos, you'll now be able to design and animate your
own character. Now all you need is a background. I created this happy little frog for a game
where it jumps from platform to platform. Let's make a background for it. Step one thumbnail
sketch. For this background, I'm going to do a friendly forest where the frog lives.
Starting with a small canvas size. I'll use black, white, and a mid-tone to explore different
compositions. Composition is how things are arranged in a scene. This video is really
good for learning the basics, so I definitely recommend checking that out. Let's have a
look at these four ideas that I've puked up.
That's kinda gross. Being able to go through ideas quickly will help you discover better
ones.
For the first one I like using these Lily pads as a context for the background. It is
the frogs home, and I do imagine he would live near or on a Lily pad, but the perspective
is all off and it won't fit the gameplay at all. Next. I tried a more gameplay matching
perspective on this one.
But all the lines lead off to the right where the player really shouldn't be looking or
even going so this one isn't it. Next.
I like the vertical trees in this one because they help aid the gameplay context of vertical
movement. But if most of the games action is going to be taking part in this area, I
need it to be less distracting. So sorry, no frog house.
Ooo I'm homeless.
Next.
So I simplified the main gameplay area in this one so it's less distracting. I also
made the design more symmetrical because this makes for more comfortable and familiar composition
as opposed to an asymmetrical one like this. I especially like how the river leads the
eye to the middle of the screen, which is where I want the player to focus.
So let's go with this one. Let's go with this one.
Step 2 value structure.
It's time to take this design a bit further. This time thinking about proper perspective.
[Rambling] This time thinking properly about the perspective
and value structure, Psst I have some short videos on value and perspective, so if you
need some help go and check those out.
To set up my perspective here, I first need to establish a horizon line. Because most
of the action is happening in this section and the player really needs to avoid this
section. I'll place the horizon line here with the vanishing point in the center to
help draw the focus in the middle. Drawing out straight lines from the vanishing point
gives me a helpful guide for creating backgrounds with depth and believability.
I got something in my eye. Help me oh.
What is it? Is it a bug?
Right, maybe the bright lights.
Lights are blinding my eye.
Value is how light or dark something is, to avoid having to think about color theory and
the value structure all at once. I usually work in value first before doing anything
with color. Definitely check out the video I made on values if you're getting a bit lost.
I want this to be a daytime scene, so I use a light value range in the top section of
the picker to rough out the tree lines background, midground, and foreground sections. I make
the foreground trees appear darker than the background trees to give a sense of depth.
As the trees recede into the background. We lose some clarity and they get lighter in
value because of the atmosphere in between.
This is called atmospheric or aerial perspective and can be seen in natural landscapes. I exaggerate
it here to really sell the depth of the image.
This is called atmospheric or aerial perspective.
If it's useful to think about how you can use value contrast to tell the player something.
If I take one really light value and one really dark value and put them together, they contrast
heavily against each other and it draws the viewer's eye to that area.
In contrast, heh in contrast. Haha ha.
If we put two similar values together. We don't get the same contrast because they're
more alike. This can be useful for adding detail without being distracting.
[dog barking]
So I added some light trees in the background and some dark bushes is in the foreground
at the bottom. The dark bushes against the light water is a high contrast area. Whereas
the higher range of values in the tree line is a lower contrast area. This is because
I don't want the main play area to be too overwhelming and I want the lower section
to be a warning for danger. Using contrast this nice.
Step 3 colour plan. It's time to add some color. This is a friendly forest so I want
the mood to be homely natural and somewhat warm. You can use predefined color palette,
color palettes, color palettes you can use predefined color palettes. You can use predefined
color palettes to experiment. There are some awesome ones to try out on Lospec.
But I'm going to create my own using some color theory. I'm going to use complementary
colors of red and green because to me those are obvious natural forest colors and I want
it to be obvious. I usually just pick from the color wheel, but if you're new to picking
colors, there's a cool website called Adobe color which can help you define a pallette
based on color harmonies. It's easy to explore colors by simply placing a new layer on top
of your value layer and putting it in color mode, this is a common mode in most digital
art software.
So on the value layer I select the value that I'm going to replace, making sure contiguous
is turned off to select all of the value and then I fill the area on the color layer above.
Easy Peasy. It might not look exactly how you want at first, but it's a great base to
start from.
I keep tweaking the values underneath and the colours on the colour layer to get something
I'm happy with.
Bom bom bom bom bom I like it.
So Step 4 clean up. This is the fun part where everything starts to come together. I'm still
making tweaks as I go. I removed one of the trees in the center to make that area even
lower contrast and therefore even less distracting. It helps to get some feedback or even take
a break and come back to it so you can more easily spot any issues with the piece. When
I'm cleaning things up, I really pay attention to each pixel placement and the overall shapes
in the scene. You may notice that things are mostly rounded circles, circle, circle, triangle,
circle. Kind of. This is because circles appear soft and friendly compared to sharp triangles,
which can symbolize danger, check out this shapes video I made If you want to learn more
about shape theory.
Akey element to this background is that it has no outlines. This is a stylistic choice,
but one that I think will help keep the player focused on the gameplay. So that is our friendly
forest background. To recap this process quickly with some key points.
I use thumbnail sketches to get ideas out quickly. Staying loose and thinking about
the overall composition and context. I use perspective and values to define the structure
of the background, aiming for depth and believability. I explore color ideas thinking about what
I want the mood of the background to be, I continue to refine and clean it up as I go,
thinking about how this style can be non intrusive to the gameplay.
Using this same process, I came up with some more backgrounds for the game.
Remember, these aren't set rules. You can use whatever process you want. This is just
the process which I find easiest to use when making backgrounds. I'd recommend learning
from multiple different sources and finding loads of different styles so you can come
up with your own unique process and style. There we have it. Thanks for watching this
video. I hope you enjoyed it. There are links in the descriptions for all of the social
media.
Make sure you join the discord too. There are so many people now joining, sharing their
work and hanging out and taking part in art challenges. So thanks for watching and I'll
see you in the next video.
Ah, right.
Let's go.
I’ll see you in the next video.