Learn 2D Game Environments Graphic Design For Beginners | Saif Eddine Touzi | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Learn 2D Game Environments Graphic Design For Beginners

teacher avatar Saif Eddine Touzi, Indie Game Developer & Illustrator

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

7 Lessons (1h 7m)
    • 1. Intro

      0:46
    • 2. Photoshop Basics

      9:43
    • 3. Background

      20:35
    • 4. Grounds

      7:04
    • 5. Buildings

      14:15
    • 6. Simple Assets

      11:42
    • 7. What's Next ?

      2:46
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

77

Students

1

Project

About This Class

Learn how you can create Digital 2D Game Art Environments quickly in Photoshop!

Meet Your Teacher

Teacher Profile Image

Saif Eddine Touzi

Indie Game Developer & Illustrator

Teacher

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Intro: In this course, you will learn how to make 2D game environments using only your mouse and any art software you want. For me, I will be using Photoshop for this course. But if you don't know how to use it, there is no problem. We will cover the basics first, then we will start making our environment. We will start by making the background the right way and the best way for your game. Then we will move to make some buildings and assets. And finally, I will share with you some tips and tricks to make your environment alive like this. So let's get started. 2. Photoshop Basics: So here is Photoshop. Let's make a new canvas by going to File New. And let's make one hundred, nine hundred and twenty pixels by 1080 pixels. As you can see here. You can make the background as you want. Any color. For me, I will put two gray because I don't like the white color. It hurts my eyes. Anyway. This is the layer section here in the right bottom. And if we click the Plus button here, it will add it for us. Our first layer, as you can see here. If you want to delete it to just delete, click yes or deleted with the delete key. Now, if you want to show the kind of window here, go to Window and click Color. This is all the tools that we're going to need, but we're not going to use them all. The first one is the Move tool. And as you can see here, if you hover over it, it will show you the name and the hot key on the keyboard. Please remember all the hotkeys so it can make your work faster and easier. We don't have anything here to move. So let's go to the second tool, which is the rectangular marquee tool with the letter M. And if you click, you can make any selection you want. If you want to make it perfect selection, just hold the Shift key. If you want to deselect it, click Control D. And if you keep tapping on it or just hit to the right-click, you can see more options. There is the Elliptical Marquee Tool to make a circle. And if you want to make a perfect circle and just click hold the Shift key, Control D to de-select it. But we're going to use only the first two. The third option, which is the Lasso tool that you're going to find the right here. You can make a selection as any shape you want. Control D to deselect it. But the most common one we're going to use the second one, the polygon lasso tool. As you can see, one click, double-click. And when you finish, you can see the small circle. Click it and make a selection. Now, let's go back to the rectangular marquee tool. Let's make a selection. Let's choose any color. And here you can find the Paint Bucket tool, which is the letter G. Let's paint it. And as you can see here. Click Control D to de-select it. Let's move it by clicking the V key, which is the move tool. You can move it as you like. Right-click on the paint bucket tool, you can find the gradient tool. Let's, for example, make a darker color. To use the gradient tool, adjust, hold, and then release. And as you can see, the the gradient get outside our square. We don't want that. So let's click Control Z to go back. And if you want to select a shape, just hold the Control key and click the shape. As you can see, it made a selection for it. Let's now use the gradient tool. And as you can see here, it means for us is this gradient. Let's click Control D to deselect it. And now the final tool is the rounded rectangle tool, which is the letter u. You can choose the rectangle. Let's make a rectangle, for example, as you can see. And hit enter. And it made this electron. You can choose the options. Let's make another one. As you can see. Let's make a new layer. Let's put it above them. Let's make a circle. Hold Shift. Let's choose, for example, an orange color. Click the letter G, and it choose the gradient. We don't own the gate and we want the paint bucket. So let's paint it like that. Click Control D. And if you want to duplicate a layer, you can click Control J. Let's go back. Click Control Z, or just click the V, which is the Move tool, and hold the Alt key and move it a little bit. It made another copy of it. We'll make our work faster and easier. Let's go here and choose the rectangular marquee tool. For example. Let's go back to our green square. If, for example you want to delete something, just make a selection and hit Delete. Or of course you can use the lasso tool, which is the letter L. Just make some details and click Control D to deselect it. Please remember the steps because we're going to work a lot with them to make our buildings in their details. Let's go back to our circle. And let's add some effects. Go to the Effects here below. We can make an inner shadow. For example. Let's choose another color, Let's choose a color. We can make it a little bit brighter or a little bit darker. To make this inner shadow. As you can see here, we can move, we can change the opacity as we want. Also the distance, the size. Let's hit cancel off. We can make Inner Glow. Let's choose the color. We can make it brighter. Hit, Okay. Let's make some opacity and size. Also, you can make some outer glow. Let's choose the color. Maybe a brighter one. Okay? Let's increase the opacity, maybe the size. Just experiment and hit, Okay. Also there is here the opacity. If you want to change the opacity. Also the mill. Thanks for watching this lecture and now let's get started making our environment. 3. Background: In this first lecture, we're going to learn how to make the background for your games. So let's go to File New. And let's make a Canvas with 700,680 pixels by 2189 pixels. And the reason why we're going to make a big canvas like this. It's because that's it to 16 by 9 canvases. So the player can run basically twice the width of your screen. And we want, of course, the background to be bigger than our cameras. Again, we don't want to make 1920 pixels by 1080 pixels because the background will fit perfectly. The camera of your game, it will look ugly and small. So as I said, we want the background to be bigger than your game's camera. So let's hit Create and please download the color palettes for them from the resources below. Let's shrink it a little bit by clicking Control T. Drag it to the left. And let's make a new layer. Click, I, do choose the first color. And then we're going to click the letter G. And it's the paint bucket. Let's color our first background. Let's add a new layer. Let's zoom in a little bit. Just click Control plus or hit the letter Z. Click the lesser tool, which is the letter M, and drag and release. And this is the shape of our building. Let's click I to choose the second color. Click J, and paint the first building. Let's click Control D to deselect it. And I think it's a small little bit, so let's make it bigger. Click Control T and resize it a little bit. Now the idea is to make many different buildings just going to duplicate them. Glick is the V key, which is the move tool. Let's move the first building to the right. And the way we're going to duplicate the layer is by clicking Control J. But There is another way, so let's click Control Z to go back. And the second way is by holding the Alt and drag it a little bit to the left. And as you can see, he made a copy of our layer. And now let's repeat the same process over and over again to make different buildings, as you can see here. And now let's select them all by clicking the Alt key. And right-click and click merge together. Now let's add some details to our first buildings background. Just by selecting the rectangular marquee tool, which is the letter M. And hit Delete. And as you can see, we made a little detail. So let's make some difference details to all the buildings. Just just click and hold and delete. Also, we can use the lesser tool to make some beautiful details. Just very simple, small, simple details to all the buildings. This is gonna be the forest background from our game, ischemia, so we're not going to see too much of it. Let's decrease the opacity a little bit. Also the fill. And now let's copy our first background and make it a mask for our buildings. Just hold the Alt key and you can see a little black arrow that pops out. Let's decrease the opacity a little bit. And as you can see, this layer above our buildings make it look like it's invisible or see-through. This can allow it. There is a little bit of fog effect, which is very nice. Let's make a new layer. Let's choose the pink color and right-click on the Paint Bucket Tool so we can bring the gradient tool, hold and release. Let's decrease the opacity a little bit. And as you can see, it's basically some neon effect. Because as we said before, we're going to make a futuristic city. Let's add a new layer. And now let's make the second buildings layer. The same process. Click the rectangular marquee tool, which is the letter M, hold and release. To make our first building shape, choose the third color by clicking the letter I, which is the either eye dropper tool. Right-click to get the paint bucket and paint in our first building. Click Control D to deselect it. Now let's make some Windows. Click em and make e Square Selection, little square selection. Let's choose the white color. Click G, and then paint it, Control D to deselect it. Now let's add some outer glow effects. Go to the Effects below. Click outer glow. And as you can see, this window pop out. Let's choose the white color. Click, Okay? And there is some settings you can mess around. Choose your settings and then click Okay. And as you can see, this is a little bit of effect. Go to filter blur and then Gaussian Blur. Let's make it 2.9 for example, hit. Okay, and now let's go back to blur, motion blur. Let's make it seven. And now we're going to duplicate this little window to make more windows. Of course, you can increase or decrease the size of it by clicking Control D. Also, you can decrease the opacity a little bit. And finally click them all by holding the Shift key and click merge together. And as you can see, this is our first building. Let's repeat the same process and duplicate it to make more buildings. Let's add some inner shadow by going to the effects below. Let's choose our color and then choose a little bit lighter color. Click Okay. Make some changes in the options, as you can see here. And there is a little bit of inner shadow as you can see, and the buildings hit. Okay. And now let's make some details. Click M, which is the rectangular marquee tool. Make some selections and then hit Delete. Of course, you can make add some details by not deleting this election, but painting it with the paint bucket tool. Now let's repeat the same process. We gate the first background layer above our buildings. As you can see here. Also duplicate the neon background. This decrease the fill a little bit. Let's also decrease the opacity of our buildings. And there is a rule of thumb that you need to remember for qualia or to the background art. Things get darker and bigger. The closer the camera they get, and brighter and smaller the farther you get. Now let's add a new layer. Make a selection with the rectangular marquee tool. Choose the color WK to the buildings. Again. Make some details. Of course you can have as many layers as you want, but we don't want to slow down the user's machine. Now, let's make some windows, make a new layer. Click M to make a selection, and then choose the pink color. Go to the Paint Bucket Tool, right-click and choose the gradient color and hold and release, make some painting. And now let's add some outer glow effect to our window. You can choose a brighter color. Adjust the settings a little bit. And then click Okay, Let's give it some blurred go to filter blur, motion blur. And let's make it five. Now let's duplicate it by holding the Alt key. Also, you can make different shapes of windows, just make a selection and delete in the middle of it. Also, you can make a window with different color, like the blue. Now let's add some shadow to our buildings. She was maybe a brighter color than our buildings color. Hit Okay. Adjust the settings a little bit and then hit Okay. Let's make a copy of our neon pink background. Make it above our buildings. Adjust the opacity Intervale a little bit. And now let's merge our backgrounds. The first four backgrounds, then the second, then the third three backgrounds. And as you can see here, we have three different buildings. And now let's export them. Go to File, Export Layers to files. Then choose the last one, PNG 24. Make sure to hit the visible layers only. Choose a name, maybe layer, or background. For each layer. Browse where you want to save it and then hit run. You have to export them all separately because you want to make a parallax effect for your game. Thanks for watching this lecture, and I will see you in the next one. 4. Grounds: In this first lecture, we're going to learn to make two different types of foreground. So let's make 1020 pixels by 1080 pixels. Please download the color palettes and the texture from the resources below. Let's add a new layer. Click the M, which is the rectangular marquee tool, make e square selection. It chooses the first blue color, then click G and paint it. Click Control D to deselect it. And then Let's make the texture above our first ground. As you can see, the texture is a little bit bigger, so let's shrink it by clicking Control T. Then hold the Shift key and shrink it a little bit. Hold Alt and then make a duplicate of this texture. Click them all, and then merge together. I found this texture from your website to use any texture that you don't have the rights for it. Just a cartoon you texture. And by one, let's make it a mask for our building by just holding the Alt key. Now let's choose the overlay. Let's decrease the opacity and fill a little bit. Now let's make a new layer. Click em, make a rectangular selection. Click to choose the eyedropper tool and choose the same color. Then click G and painted. Click Control D to de-select it. Click V, and then click them all. Choose the middle option to make them in the middle perfectly. Now let's make some small details. Choose the lesser tool, which is the letter L. Make a small selection, then delete. Let's click them all and click Control J to duplicate them because we want to use them to make our buildings in the next lecture. Now let's go back and click our ground. Click em, make a small selection, and then hit Delete. Make sure to disable the other layers. So you can see those are just a small details that makes our ground beautiful. Now, let's click them all by holding the Shift key, right-click and click Merge Layers. Let's rename it by double-clicking it. Name it to groundwork, for example. And as you can see, you can Move it located in your game. Let's disable this layer. Let's make another layer to make some stairs. Just click the lesser tool, which is the letter L. Hold Shift. And then click. Let's choose the first color and painted lips. No WK to the texture layer. And make it above our stems. Hold Alt and make it a mask. And as you can see, we created two different types of grounds that you can use in your game. 5. Buildings: In this lecture, we're going to learn how to make a simple building for your game. So let's disable the stairs layer that we created last time. And let's enable the three layers that we copied in the previous lecture. Let's select the first layer, the building by clicking the Control key, and then choose a v Gradient tool. Choose the color black, end, drag and drop, right and left also. To make this nice shadows. Control D to deselect it, Let's enable the first layer. Let's make a new layer. And now we're going to create a pipe, as you can see here. So click em to choose the rectangular marquee tool, make a selection, rectangle selection, as you can see. Choose the yellow color. Choose the paint bucket tool. Painted control D to deselect it. Go to the Effects in edit some inner glow. As you can see here. You can adjust the settings a little bit, but we're going to, we're not going to make that. Let's hit Okay. Let's make a new layer. Choose the rectangular marquee tool, make it smaller. Rectangle, selection. Choose the darker yellow color, click G, and paint it. Let's add some inner glow also. Choose the same color. You can adjust the settings a little bit. Hit Okay? And now hold the Alt key to make a copy. Let's click them all by holding the Shift key, right-click and merge layers. Now again it is simple pipe added a new layer, and now let's make a door. But before that let's make some lights. Choose the lesser tool. Make a selection, paint it with the blue color. And now let's duplicate it. By holding the Alt key. Let's flip it. Click Control T, then right-click and flip horizontal. Let's disable the building so we can see it. Let's merge those together. Let's add a new layer. Zoom in a little bit by clicking Control plus or the is-it key. Choose the Lasso tool, which is the letter L. And let's make the selection. Hold the Shift key. And then close this election. Let's choose a darker color. Click Z to paint it, Control D to deselect it. And now let's duplicate it by clicking the Alt key or Control T, right-click and then flip horizontal. Let's now merge them together and zoom out a little bit. By clicking Control minus. Let's choose a darker color and choose the gradient. Make a selection by hitting the control key. And now choose the rounded rectangle tool. Let's choose a brighter pink color. Click and hold to make the shape of our light. And then hit Enter. Let's add some outer glow. Let's add some inner glow to our light holder, or I don't know, it's gold. Let's choose a brighter color then each color hit Okay? And let's add it also some outer glow. Choose the color. Let's make also a brighter color. And then hit Okay. Let's click our pink light color in. Duplicate it by holding the Alt key. Click Control T, and decrease it a little bit. Click V, click them both, and then hit V, which is the Move tool, and choose the middle option to make them in the center. Let's make a new layer. Choose the pink color. Choose the rectangular marquee tool, which is the letter M, make a selection in paint into the paint bucket tool, which is the letter G. That's going to be our door. Let's make all the light layers in the same group. Click Control G. And now let's move the door below it. Let's choose a darker color. Let's choose the rectangular, the rounded rectangle tool. Make a selection. The first selection. In the second selection. Hit Enter. Choose the Lasso Tool, and make a smaller rectangular selection. And hit Delete. Let's add it some effect. Let's choose the pink color. Make it little bit brighter. It okay? Let's enable the building layer. Let's select all the doors layer and merge them together. Control T. And let's decrease the size of the door little bit. Make it in the middle by clicking them and then click the Move tool and choose the middle option. Let's add a new layer. Choose the rectangular marquee tool. Make a rectangular selection. Choose the brighter blue color. Chooses the paint bucket tool and paint it. Control D to de-select it. Choose v, which is the Move tool, hold Alt and then move, move it to the left. Let's make the pipe above them. Let's click our building layer. Let's choose the gradient tool shows the black color, and let's add some more shadows. Of course we have to select it by clicking the Control key. Hold and then release to make this small awesome shadows. Now, if you are not going to use maybe it to delights in your engine, like the unity. To delight. Follow me with me. Let's add it in new layer. Choose the Lasso Tool and make that light reflection. But if you're going to use a 2D light like the Unity engine for example. Don't follow with me this step because there is an awesome light system in that engine. Let's choose the pink color in the Gradient Tool, end, All the release. And as you can see, this is our building. Of course, you can make some more details. You can make different shapes, not just a simple square building. Let's now merge them together. Name it building one for example. And thanks for watching. I will see you in the next lecture. 6. Simple Assets: In this lecture, we're going to make some simple assets to our city. So let's make a new layer. Choose the rectangular marquee tool. Make a selection. Let's choose the blue color. Pick the paint bucket tool and paint it, Control D to de-select it. Now let's make another selection. Just perfect rectangular selection. And hit Delete. Let's add a new layer. Make another rectangular selection. Make sure it's perfect. Painted. Let's duplicate it by holding the Alt key and move it a little bit down. Let's merge all the layers together. Choose the Lasso Tool, make some selections in the hit Delete. Just to make some small details. This is our first rationing asset that you can put it above your ground. Let's move to our second asset. Make a new layer. Make your rectangles more selection and painted. Let's move it a little bit down with the move tool. This is replicated by holding the Alt key. Let's make a new layer. Make a selection, and paint it, Control D to de-select it. And this is going to be our light. Let's merge them together. Added a new layer. Choose the Lasso tool. Make a selection like this. Paint it. Now let's add a new layer with the marquee tool. Make this rectangular selection and paint it. Let's click Control T to rotate it a little bit. Let's add a new layer. Now right-click on the market tool and choose the circle selection. Let's make this circle selection. Choose the pink color by holding the icky and make it a little bit brighter and painted. Click V to move it a little bit. Let's make it below our rectangular selection. Control T to rotate it. Let's merge them together. Let's duplicate them by clicking Control J or by holding the Alt key and move it to the left if you want. Let's make a new layer. Choose the Lasso Tool and make a selection like this, which is the light that we're going to make sure that the gradient tool. And now let's make this light effect. But before that, let's click Control Z twice. Let's make this light bubble shine. Go to the Effects in choose Outer Glow. Let's choose a brighter pink color. Hit. Okay? And now let's add a new layer, make a selection. And holding the released by the gradient tool. Decrease the opacity in till. Now let's merge them together. Duplicate this light, control T and click, Flip Horizontal. Choose the move tool, which is the letter V. And move it a little bit to the left. Let's merge them all together. And this is our light set. Let's go to the third asset. Choose the rounded rectangular tool, and choose the blue color. Now select the rounded rectangular tool. Choose the option. Making a selection. Go to the Options and choose this option. And there you go. Control key. And the rotated like 45 degrees. Let's zoom in a little bit. Make a new layer. Let's choose the rectangular marquee tool. Right-click and choose the first one. And now let's make this smaller rectangle selection. Choose the paint bucket tool and paint it. Make them in the middle. Hold Alt and move it a little bit down. Let's merge the three layers together. And now hold Alt and duplicate this layer. Of course, you can move it with the arrow keys. Most delays together and repeat the same process, WK to the Alt key. Now let's add a new layer. Choose the marquee tool. Make this rectangular selection and painted. Let's choose the circle selection tool. Make a new layer, hold Shift to make a perfect circle and paint it. Click them both, click the Move tool and choose the middle option. Now let's merge them together. Hold Alt and make. You can merge them altogether. Now, let's choose the rectangular tool. Make a small selection just to delete those edges. A delete in the tub and ended up just like that. And there you go. This is our third asset that you can use in your city. Thanks for watching, and I will see you in the next lecture. 7. What's Next ?: Congratulations on finishing the course. I hope that you learned a lot from all this techniques. Now, if you export all your art and import them all together to your game engine, for example, is the Unity game engine. You can build an environment like this. Now, what can you do to make your environment alive? First is the parallax effect. If you remember in the first lecture, the background lecture. In the end of it, I showed you how to export all your layers separately because we want to make that Parallax effect. Just import all the backgrounds here. And all backgrounds has to have distance between each other. For example, the first background as then in the z position, the second one is seven. The third or the fourth can have five. And every background have this parallax layer script. Also the main camera has her own script. You can learn all this from YouTube, of course. Let me show you what is the parallax effect. As you can see, every background is moving with her own speed to make your environment live like this. Now, the second option that you can make is to add some weather effects. Also you can add it some do delights. Instead of this 2D light effect that we created. In Photoshop, I recommend using to delights instead. Finally, some post-processing. It may be you will have something like this. Now this is my own game that I am working on. This is basically the same environment, but has more details in polish to it. If you want to follow my game development journey, you can subscribe to my YouTube channel. Link will be in the resources. Tomorrow I will post my first deadlock to my game. I hope you like it. And good luck with your games.