Learn To Create 2D Game Environments For Beginners

1. Introduction: Are you ready to take your two D art skills to the next level? Um safe e2d and game artist with four years of experience, and I'm representing the ultimate guide to making your own two D game environment course that will teach you everything you need to make your own two D environments the simplest way using photoshop? Even if you are a complete beginner, I will be guiding you all the way on how to the environments are built from backgrounds, buildings, props, and also how to make your own level inside unity and added some beautiful effects to make your environment alive and gorgeous. So what are you waiting for? Let's jump in and get started. 2. Backgrounds: In this new series of videos, I will teach you how to make your own two D game environments the simplest way using photoshop. As you can see, this is our final look for our environment in photoshop, but eventually we will import it into unity and make it a lot better and alive using some post processing visual effects and particle system. The environment is built by many different layers. As you can see, we have the stairs here, we the light, we have the boxes and proxies, as you can see here. We have the buildings, so many different buildings, of course, the ground and the backgrounds. We have two types of them, so we will start by making our first lecture by making the backgrounds. Let's open a new file here. Let's go to a new, and let's choose a ten ATP canvas and let's hit Create. You can see this is our new canvass. We can move with our canvas by holding the space bar in our keyboard. So first of all, let's go and make a new layer, and let's make the color of our background. As you can see, this is the main palette that I used. As you know, if you want to create your own environment, you have to make your own color palette. I used this this blue and purp, and the pink reddish colors. And of course, you can use so many different colors, you don't have to follow my own colors, you can follow the same steps, but with your own colors. With this, I recommend you understand the color theory and you understand the color wheel and understand it very well. For me, I used this blue and purple colors, and for the background, I used this grayish blue color. So I I choose it with holding the eye, which is the eye dropper tool, can select this color, and as you can see, this is the main color. By the way, if you don't have this color window, you can go to windows, and as you can see, just choose color. For me, you can choose this color, of course, choose on your own. I will not put the color. You don't have to copy it. I want you to choose the color by yourself and your eye. I want you to understand the colors. As you can see, you can put it right here or right here as you want, like you want. For me, I used this color which is right here between this dark and lighter blue and in the gray section. I want you to follow me. Let's go to our Canvas and as we created E new layer, let's go to the As you can see here, the gradient tool, which the letter G. Let's hold it. Let's press it and let's hold it with the mouse, and you can click the shift key to make it in one direction. As you can see, this is how to create a gradient, but we don't want a gradient. We want a full color. Let's undo that by clicking Control Z, and let's put it here in the top of our Canvas. As you can see, this will create our color for the background. This is our background. Let's now let's make a new layer, and let's make our first buildings. For that, I will use the rectangle tool, which is the letter U. Let's choose it with the color that I will choose. This is the our color, let's go to the color, which is this main background, but we don't want the background. Let's make it a bit lighter, just like that. Let's hit, and now let's make our first rectangle, as you can see here. And let's understand together how these buildings are built. So it's basically just rectangles. Let's just copy it by holding the ult key and move it, and it will make a copy for you. Let's just release the button for our mouse. As you can see, this is the another rectangle, as you can see here. We can make it with many different shapes. Let's go and make the third one, and let's hold t again and make another one just like that. This is our first building. You can make it like that. Let's make another fifth one. Let's hold alt and put it in the side. Now, let's make this four, this fourth ones just together. We can you can select them by holding the bottom one and the top one and hold the shift key, and you will select them all. Right click and click, convert to smart object, which they are four rectangles together. Now let's hit the added layer mask tool. As you can see here, we can now delete from this layer. Let's click the letter L, which is the Polygon Lasso tool. You can right click it, and you will have the Lasso tool here. No, we want the second one. And now let's make some deletion for our buildings. We can, for example, delete this one, we can just click it like that and delete. We can also click Control D to deselect it, and we can make e selection just like that here with the rectangle mask tool with the letter, and I want to make e selection, for example, like that. Excuse me and delete it. Many different ideas you can make to make your own buildings as you can see here. You can make different type of deletions, as you can see. But you don't have to make so many details because this is the layer and the background that you won't see it very much. Let's click it now to select the layer, and let's make it a smart object again so we don't have any problems. This is the first layer of background. It is very simple. We can add as many details as you want. Now let's create another second one, so we can use two different background layers. Let's again click Alt to make another copy, and you can make many different ideas for the buildings, as you can see here. You can make, for example, five ones as you want. Just like that. Let's now make it all a smart object by holding the shift key again and make a smart object, and this is a building alone. Let's go again and make the massic tool. And we can, for example, again, delete this one right here. You can delete small one like that. We can make another one here. You can make a small one, for example, like that. Why not? You can make a small one here. You can make like that, and many different ideas as you like. We can delete this one. Also, you can make it also like that. As you can see, it is another different look, but not that complicated. And now we have two different buildings that we can use for our game. We can just, for example, make another different ones like that and make a big level just with only two different types. You don't have to make ten different layers. No, you just have to make two or three different layers just like that. Now let's delete it. Let's delete this. Now this is the first layer for our environment of buildings. Now let's make different one, make it a little bit bigger just like those. We have to make the same techniques, but first let's hide this two. Now let's make another layer and repeat the same process and make the rectangle a bit bigger. But now we have to make it a little bit whiter. For example, let's see, for example, this one. Now, this one, we want to not the same color. We want this new one to be a bit brighter. Let's double click here. And as you can see, this is the color, let's make it a bit brighter. Let's now hide this old one, and this is the new one, and let's repeat the same process. We can for example, make this one right there, and for example, just like that. Okay. Let's again do another fifth one here. But as you can see this fifth one, let's go and put it on the top, and now let's select the other four and make it a smart object, and let's delete again. For me, let's make something like that, delete, and we can make this small deletion and make it a bit nicer. So for me, I can make this also. You can make different ones. Let's make this new big cut here. Let's make the same detail cut here, and you can add it, for example, let's add it a new layer here, and let's go here and let's choose the same color as this one. Let's add a new one just like that. Why not? So, this is the first one. Let's select it both and convert to smart objects. So this is the first building. As you can see, you can add some different lights into it. Let me show you. So let's select this one, first of all, let's just choose the pink color, which is just right there between the pink and the red in the top one. And let's select our layer, and we can just make some, for example, some windows that have some lights or I don't know, as you can see, but we don't have to make it a bit that bright, we can select the opacity and make it a little bit on the 50% just like that. You can add it so many more You can add the sum here, sum here by holding the Alt key, and you can select it all and convert to a smart object as you can see here. Now, let's make our second building, hold the ld key again. As you can see, this is the second one. Of many different layers. Let's select them all and as you can see, this is our building. Let's go to the mask and Let's make a big deletion here, why not? Let's repeat the same process over here. We can add a small one here with the same color. Let's add a second one here by holding Alt. As you can see. You can make Let's move it a bit to the left by clicking the left arrows in your keyboard. Let's select this one also and move it. As you can see, just a small detail. Let's click the mask again here. Let's make some deletions. As you can see, Let's click again here and make this. Okay. Let's make something like that here. Let's make a small cut like that. Why not? As you can see, Many different ideas. We can, for example, put a rectangle here. Let's click just like that and make it here. Why not? Let's move it a little bit to the right. Let's select our mask tool again here and make this deletion. Okay Let's delete, like that. As you can see, it's another different building. Why not? Let's add some glowing windows. We can just choose our pink color again and make it like that, for example, and double click it, and let's go here to the outer glow and we can choose the color, like that. You can make it color dodge or normal, and you can make the spread a bit down and make it just like that. We can also control the range. We don't want to be glowing that much. We can click here and make the opacity a bit lighter. Now let's click and shift to make it just a bit of the down, and you can make another one here. Maybe two ones here, maybe one here, why not? We can make another one here, here, just like that. You can add as many windows as you want. It's your game. You can make it as prettier as you like. As you can see here, we have to many different layers. Let's select the top one and hold the shift key and select our layer and click, not here, but here. Covert to smart object, and as you can see, this is our second layer. So Let's put them together now let's undo the hiding of the other ones. As you can see, it will be something like that in our game. You can make them also a bit. You can control the opacity. You can control it here in the photoshop, but also you can control it in your game engine, whether it's unity good or unreal as you like. You can make it, for example, fade, just like that, and someones with more fade or more opacity. You can make it more fadih. You can have three layers. It's a smart move, why not? Let's make it to the 100%. As you can see, this is our building layers that we will use in this environment. You can make many different ideas as you like. You can add different details and cuts in the ts and make your buildings smaller or bigger as you want. This is the end of this first part, and now we will go and create the main ground. 3. Grounds: Now after we completed the main buildings for our background, We can move to making the main ground that the character can walk on. Let's go and add the new layer and let's make new rectangular tool. Let's make e rectangle just like that. So this is the main ground. But we want to change the color. So let's go here, and I will choose this color, which is the same. Yes. So it will be here. As you can see, you can choose it and make it with your own. And now let's add a new color on the top, which is the pink reddish one, double click on it. Let's add a new inner shadow, as you can see here. Mature, choose the blend mode to normal opacity of 100%, and the angle is 90, so it can be on the top and uncheck the use global light if you check it. We can make the distance to ten or more. I prefer maybe 15, something like that. And let's hit. So this is the main ground. I know it doesn't look like a ground. I make it very tall, so you can use it in your game, but in your game, it will be appear something like this. So if you have, for example, a taller taller for example, the ground, et cetera next to each other, it will not be cut it from the bottom from the bottom. It will be very tall. This is a added space just for safety. Let's delete this and let's make it here again. Now let's make it for first of all a smart object, so right click on it and convert to smart object. Let's add a new layer, and let's make a new rectangle tool with the pink, and let's make another line here, but a bit smaller, something like that. Now let's make it It belongs to the main ground. With clicking the new rectangle. Let's hold alt and by holding alt and move your mouse here. This new box will appear and you can click it, and it will be a child of the main ground. It will be something like that. You can move it as you want. It's just for making the ground more beautiful. Okay? Now we can add a new layer here and let's make it also a child again. Let's choose the rectangular Marky tool to make a selection, and let's make this selection, something like that. Let's choose a darker color from here. Let's choose something dark like that. Let's now go to the gradient tool we see the letter G, and let's make and gradient like that. We can hold the shift to make it with one line, as you can see here, and let's make something like that. We can now click Control D to deselect it, and as you can see, this is our main ground. We can now select them all by holding the shift key, as you can see here and convert it to smart object. In your game, you can just make it something like that. And you can add more of it just like that to make it normal ground. But in your game engine, you just need one ground as you can see here. And for example, annuity, you can make the type of this ground tiled, which is mean that if I click Control T here, it you will make it something like that when you change it and make it a full ground. You don't have to make and repeat with this process. This is a wrong process and it will take so much time. We need just one ground. But if you noticed, if I click Control T, make some changes. We have this empty space here, which is the for the selection, so let's delete it. Let's undo this, and let's enter our smart object here, and as you can see, this is the space of our selection. So let's go here to image. Trim here and make sure it transparent pixels and click. Just like that. And click Control S to save this object, and it will be saved here as well. If we can click Control T, it's just this ground without any empty space. We can close it. Now this is our first ground. We can double click on it and name it ground. And now I want to add some stairs. So let's make a new layer, and let's go here and make sure to choose the same color. Okay. Now let's make some stairs. We can make it something like that. We can make it the same size from here to here. So let's make it something like this. We can zoom in by clicking the Z key and zoom in. Okay? We can om it again. And it will be something like that. Now let's add it the same process. Let's go double click on it and add this inner shadow, so we can make it the same as you can see here. But now let's make it let's make it converted to smart object, and let me zoom again. Now let's make copies of it. We can hold the alt key as I taught you, and as you can see, we can move it just like that. For example, we can make it like that. And now let's hold Alt again and make sure it's as you can see here, we have the same mathematics, as you can see here to make it the same angle and position. And you can click Alt again and again to make the same copy of our ground. Okay? You don't have to make it so perfect, but try to make it the same. I noticed that it's not the same here like here. Let me change it a bit. It's not very perfect, but you can spend your time on it. Now let's select them all by holding the shift key, and let's make them a smart object as you can see here. Let me zoom in again. Now let's make a new layer, and let's make the ground, the rectangle tool. Let's make it the same here. But let's just make it taller. Okay. L et's move it behind our stairs, so we can see them, as you can see here. We can click Control T to make it a bit bigger just like that. Now let's make a cut of it, so this is the mask tool again. But let me make the opacity a down it like that, so we can cut from it. Let's click the LT, which is the polygon Lasso tool, and we can just make a selection like this. And let's delete this top one. Let's delete it. Control D to D select it. Let's click it again and make the opacity 100%. As you can see, This is the stairs, so we made it a bit taller, just same like the ground. Now let's click them both, select them both and convert it to smart object, as you can see here. We can now add the same shadow effect here. So let's add a new layer, hold Alt to make it a child, and let's click L, and let's make our selection here here, just like that. As you can see, and we are already selecting our main color if you didn't select it, just make sure it's right there. Let's just with the g, which is the gradient tool. Let's make some gradient just like that. We can make it a bit. More darker and just like this. You can make it as you like. Let's select them both and convert it to smart object, and it will be something like this. I know it's not very much the same. You can select this one and make it a bit to the down, so we can make this. Click Control S to select it. As you can see, it's almost the same. You can choose the normal here and make it, for example, multiple. It will be a bit darker. Let's see that. Control S to select it. As you can see, it's not very much the same, but we can make the opacity a bit down, and you can experiment with it to make it the same as this one. So this is our assets for now. We can just make them just like that. As I said, the ground, it will be something like this. We can select it in copy now to show how it will look something like this, in your game. Now we can add some final touch, which is some glow from the ground to the top. Just for now, let's select them both and I will be moving it a bit to the bottom. Just for me to see them, Let's clo this. Let's make a new layer. Let's select this color with the holding the letter I, which is the dropper tool and select the pink one. Okay. Now, let's make a selection by clicking the M key, which is the rectangular Market tool, and let's make a selection something like this. Now let's hold g, which is the gradient tool and the whole shift to make it one line, and it will be something like that. You can experiment with it to make it something beautiful. Now this is our layer. We can put it a bit behind them. As you can see, it will be something like this. It's very beautiful. You can, of course, decrease the opacity here in photoshop or in your game engine, and it will be something beautiful like this or like this. The player will move just like that, and he will see the buildings behind. Of course, you can make the buildings with decrease their opacity and make them a bit smaller. Of course, with many different settings as you like. Okay. This is the lecture of the main grounds. It's now completed, and let's move forward to the next one. 4. Buildings: Now let's make some buildings to put it on the main ground. Let's go and add a new layer here. Let's go to the rectangular tool again and let's make a shape something like that, okay? L et me delete this. So let me close this. This is, for example, building. We can just deactivate those. Let me deactivate this and this and this and this one. We can also deactivate this. For example, this is a simple building. We can control its shape by just clicking Control T, and we can control something like that. And doub click to save it. First of all, I will added some inner shadows in the right and left, so let me double click on it. Let me added some inner shadow, but not on the top, I will make it here on the right. Let me put it at zero. In the color, let me choose this one, but brighter one or more darker one as you like. I will choose some darker one like that, for example, let me make it make it a bit darker as you can see here. Let's click, and let me click the plus icon to make another one, but let me put it on the left. As you can see here. We can make it a bit larger, for example, at 20 here and also here at 20. Okay Let me click here. Now, let's add, for example, a simple door. Let me add a new layer. Again, with the rectangular tool, and let me make, for example, this door here. Let me double click here and change its color to more a brighter one. Maybe something like that. And click. So now, let me, for example, let me first of all, make it a child for this building. Let me make this building a smart object, as you can see here. Let me close this. Now I would like to add a small background here behind the door. I will select the main building and added a new layer, and it will be behind the door. Let me click here the rectangular tool, and let me make a simple selection just like that. As you can see, it will not go outside the building because it's a child of it. Let me double click on it, for example, let me choose this color or any other color. Okay Let me click Add, for example, in the top, a small shadow. Let me double click on it and select inner shadow here, but let me go and put it at 90 degree and choose the color, for example, this one. Or for example, a more brighter one, something like that. Click, here and here. Now let's select the door again. Let's make, for example, a stroke in the inside, as you can see here, and make the size a bit larger and select this dark color. Okay, and now let's hit. But as you can see, the shadow is also here in the bottom, but I don't like that. So I will just move the door, something like this. Okay? It will be not visible because it's a child of the building. Also, let me add some, So things on the door. Let me go here and let's choose the pink color, and I will go and make something rectangular like this. Also, I will make a selection. I will hold alt and shift to make a copy of it, and now let's click control T to make it a bit smaller. Maybe something like that. As you can see here, Let's select the three, the door in these two objects. Crick V, which is the move tool, and let's make them in the center just like that. Also, we can add another one here, for example, just like that, as you can see, you can move it a bit here. Now I can select the four of them and make it a smart object and hold out and make it go back as a child for the building. Also, we can add, for example, a sm accent here for the building, so I will go here and make a rectangular market tool here and make a, for example, a sample line, just like that, just zoom in with the mouse and move with the space bar, click Control T, and you can make it a bit just like that to fit in. This is the building. We can also add a small window, something like this. As you can see, also double click on it and make the same stroke inside, as you can see here, make it a bit smaller, for example, e ten like that, and click. We can also add some small rectangles here. We can make them something like that. Hold shift and make some copies of it, something like that. We can select the four of them again and click confer to smart objects. And make sure to add everything as a child to the building. Now let me add another layer as the main roof of the building, as you can see, something like that. Let me select all of them and click Control T to move them, for example, like this, and let me select this one, the roof again. Let me add another one, so let's click added a new layer and a new roof a bigger one. Something like that and make it. Just like this. This is our main building, Let's close this and let's select them all and click Convert to Smart Object. Let's double click on it. As you can see, we have empty rooms. Let's go here to the image, trim, and hit. As you can see. Now let's click Control as to save it. And this is our main building that we can export and add to the game. Let me close this And of course, we have to make so many types of buildings. This is just normal one. We can make e copy of this one but e splier version. So how we can do that. Let's select the building. Right click, and let's click here, new Smart Object via copy. And it will add another one here. Let me selected, as you can see. So this is another one. If you make any changes in this one, it will not affect this one because this is a new copy, and it will have their own smart object and changes. So let me double click on it just like that. For example, we can delete this window here, and we can delete this door, and for example, also this accent. And I I hit control S to save it, as you can see, this is the another building. Just a more simple one, as you can see here, and we have another one just like that. Okay. So let me deactivate this one and let's make another final version. Let's click here to a rectangular tool, and let me make something like that, for example. But let me, of course, choose this color. Again, and let's repeat the same process. Let's add a inner shadow from the right here. Let me select this color. And another one here, as you can see. Let me convert it to e smart object, and let's repeat the same process. Let me add another small door, something like that. Let's make it e child. And let's get the color from this door. Let me select this one and double click it and take the main color. Let's double click on it. Let's make a stroke with, for example, a bigger one, 13 or 12. Click Okay. Let's add it Another one. Let's make it like it's some of garage or something. Let me click the ctangular tool again here and select this one, as you can see here. Make it a child again, select the same color. Make a stroke, but make it, for example, bit bigger, and let's move it to the down so it does not appear, and we can add it, for example, me. This ones, as you can see here, but let me change the color, for example, something like that. Let me click to double click it to make a copy, and let's click Control T and shift to rotate it, something like this, and we can make it a bit smaller. As you can see, You can see it's not right here. And this one also. So Let's select them both and click, convert to smart object, and let's double click on them and make a small inner stroke here, just very small one. For example, like this. We can move it a bit to the right or something. We can make it a bit and make it a. We can add a something like this. Move it a bit to the down, as you can see here, and we can hold out and shift to make some copies of it. Okay? Something like that. We can also hold out again and make it here and click Control T and shift to rotate it and put it right here. Let's move it a bit like that. Hold and shift. As you can see, S. Something like this. Why not? Let's double click the properties here. Let's select them all by holding shift, convert smart object, and let's see them. It's this small objects, and we have this one. Let's select them both, click Covert smart object, and add it again with the old key as a child to the building. Now let's added some fancy pink color to this door and big garage door. Let's select this door. Add the new layer. Let's go here to the rectangular tool, and let's make something like this, for example, and Let me added this mask tool and click the L K, which is the Lasso tool and let me just make a simple cut and click L two deleted. As you can see, Let me added a new layer and add a small door hand just like that. Why not? It's now another look of another door, as you can see, we have two looks of doors. You can create as many doors as you like. We can now select the three objects together and click on the smart object to make the door alone. Let me also now select this garage door here at a new layer, and let me go here and make, for example, this one, Here, we can put it in the model by select them both with the shift key and make it in the middle. Now again, let me select this one, click the letter M, which is the select tool, as you can see here, let me make some cuts just like that. As you can see, why not? Now, let's select them both by holding the control T and converted to smart object. Close this properties, and let's add the roof again here. Select this color and let me make a simple roof like that. But first of all, let me select them all without the roof by holding the shift key and convert a smart object. Now let me select with the roof and put it here in the middle. Okay? So this is the garage, as you can see here. Now we can select them all, convert to smart object, enter it again, and as you can see, this is our garage. This is the simplest building, and of course, we have this another building here. So you can create as many buildings with many ideas as you like and to put it in your main level above the grounds, et cetera. Now let's move to add some props to make our environment alive and not very empty. 5. Props & Assets: Now after we made our buildings, let's move forward and added some props and small assets to make the environment not empty. First of all, let me deactivate these buildings, and let's make a new layer, and let's start by making e e light. Let's make, for example, something like this. But first of all, let me show some of the grounds. Okay, It will be something like that. We can zoom in by clicking the z key and clicking the mouse click Control K to resize it. Let's make a copy by holding Alt and let's make it a bit smaller and make it in the middle. Let's select them both and make it in the middle to it's looking fine for now. Let me add another layer, added another tall rectangle, as you can see here, something like this in the middle. And let's make another one. As you can see here. O's delete this for now, and let me create another one, something like that. For example, and put it in the middle, something like this. Okay let's create another layer. Let's make another small one, something like this. Let's click Control T, and let's hold shift and rotate it. E. Let me click Control and do this, click Control and make it something like this. Let's click Control T, and let's hold the shift key and make this angle. 15, as you can see here. Let me put it something like this. Let's add it another layer. Make another rectangle, Maybe something like that. As you can see here. Again, control shift and make it a 15 angle. You can make something like this. Why not? We can make it a bit smaller so we can select it and control the height and the width as you can see here. Let's add another layer. Click L, which is the lasso tool, and let's make selection, something like this, as you can see. This is our selection. Now let's hold the I K, which is the eye dropper tool. Choose the pink one. Let's click G, which is the gradient tool, and let's make e selection, something like that. Let's make something better. Click Control D, and this is our light, as you can see here. It's above our rectangle. Let's put it behind it, something like that. We can also as you can see, it's all the same size, so we can delete some of it. Let's click L. L et's make, for example, something like that, and click delete. This is the right part. Let's select them all. As you can see here. Let's de select this one. It's just this three parts. Let's click Convert Smart Objects, and let's make a copy of it by holding Alt and the shift key. As you can see here, to make the same horizontal. Let's click Control T, double click and click flip Aional, as you can see here. And let's make it something like this. We can now select them both, convert to smart objects, as you can see here, and we can now select all of them, and Let's select all of them, and let's put them all in the middle as you can see here. And let's convert them to a smart object. As you can see, this is our light that we can put over and over in our environment. Let's close this. Let's make now a small wooden box, something like that. Let's click the rectangular tool, and let's hole shift to make a perfect square, as you can see here. But let's double click here and choose this color. Now let's make a new layer. Click, which is to make a selection, something like that. Let's choose, for example, this darker color. Let's hit J to make a gradient with the shift key to make it something like that, click Control D. Now let's make it a child by holding the ult key, something like that, as you can see. Now, let's make a copy of it, so let's hold Alt and the shift key, and let's click Control T. Double right click and click Flip Vertical. Let's move it a bit to the top. As you can see here. Now let's make another copy. Hold Alt and make another copy, and now let's click Control T hold shift, and let's rotate it to 90 degrees, and let's make it a bit smaller, something like this. As you can see here. We can move it, something like that. Let's hold out and shift again, click Control T and right click and flip horizontal. Let's move it a bit to something like that. First of all, let's select this two selections. This is this one. Click convert to Smart object, and let's put it in the middle of the box. By selecting these two and selecting the main box, put it here in the middle, something like that. These two convert to smart object and select them all now and make it something like that. This is our box. Click Convert to Smart object, and this is just a simple box that you can destroy in the game and find some coins or health inside of it. You can make it also with the pink color and choose a pink darker color inside and make another version which is a pinkish box. Okay. Now, let's move to the third and final assets, which is a big fans. Let me put this box here. Let's select this and let's make a new layer, and let's make a perfect square again, but not that big. With these properties, let's select pll and now pill let's select the stroke. Choose this color, which is, I believe it will be this color. Be careful and the wide, we can put something, for example, in five, four, something like that. Let's zoom in and click control T, whole shift and make it at 45 degrees, and hit enter. This is just one square. Now let's hold Alt and shift. To make it something like this, and let's select them both and make it a smart object. Now, let's repeat the same process, the same process again and again. Excuse me. Let's hold it and click shift and t Let's repeat the same process, convert to a smart object. Now again, as you can see here and select them both and convert smart objects. You'll see why why I am doing this. Just one moment. Repeat the same process over and over. Okay? Something like this, and another final one, something like this. For example, this is our fans. As you can see here, it's just a small fans. Now let you can make it as bigger as you want, and you can then resize it to so he can have so many squares inside of it. Let's add a new layer, and let's make this one with this se color. Or we can choose a darker color. Why not? And Let's make something like this. As you can see here. Let's add another one and make it something like that. Okay. Let's select this two and convert to smart object. Now let's hold out in shift and make it something like that. Why not. Let's select them both, convert to smart objects. This is these 2 bars, and we have this fence. Let's select them both and make them to something to the left to the right, it will not be very good, let's put them again to the right. But the fence, let's move it a bit, something like that. So this is a defense. Let's select them both and convert to smart object. As you can see, this is our environment. We have so many buildings. We have the stairs, and we have now some props, and we have some background buildings that you can copy many times. And basically, we now have a environment with very simple shapes and colors that you can work with and make some small, beautiful games. 6. Foregrounds: Now for our last lecture on finishing the game environment art. The last thing is to create the foregrounds that it will be appear here, and it has some blur in it. It will make our environment more beautiful. Let's add new layer here, and let's make e big rectangle, something like that. Let's choose a darker color. So double click here, and let's, for example, choose a color like this. Now let's create another rectangle. Let's make it something like this. As you can see. Let's choose the same color here. Let's select them both by holding control and make them in the middle. But first, let me copy this one by holding alt because we will need it later. Let's move it a bit to the top. Now let's select these two by holding control and converting them to a smart object as you can see here. Now let's go here to Filter, Blur and Gagen blur, and you can put it, for example, 23. It will be blurred as you can see here. And click Okay, and now double click on it, right click and convert it to smart object again. This is our foreground. It will be something like this, for example, as you can see. It will make our environment more bigger, et cetera. Of course, we can make the others a bit smaller, so the foreground can appear again. We can make a lot of copy of this foreground in your game engine, for example, something like this, something like that, as you can see here. You can put between this foreground and this ground some fog or something. But for now, let's just keep one. Let's delete this, and let's select this and make another type. Of course, we have this one, and now let's make another type. Let's click here to the mask and choose the L key, which is the Lasso tool. Let's make a selection. Let's hold shift, as you can see here to make straight line, and we can make it like this. And we can delete it. As you can see. Also, let's choose the M key, which is the our selection, and we can make a small selection, something like that. Why not, as you can see here, Let's convert to a smart object and repeat the same process. Let's go to filter gage blur and convert it again to a smart object. As you can see, now we have two types of foregrounds that we can use over and over. This is just very simple art for the four grounds that we added, and it will make our environment more beautiful. 7. Exporting & Importing into Unity: Now, after we made our environment. Finally, we can export each layer alone, so we can import it into the game engine and build our environment. But first, let's convert every layer as a smart object, so we can export it alone. Let's go by starting with the main background. This is our background. Let's right click and convert it to a smart object, and double click to enter it, as you can see, this is our background. Let's go to file export and export as Make sure it's not PNG, it's GPG, and make the equality as high as possible and click export. As you can see here, let's go to, for example, our desktop and create a new folder, and let's give it a name as you want. I will name it as a main environment or something. And let's name it with the name of background, BG, just like that. Let's close this. We didn't make any changes, just click yes, why not? Now let's go to the first building a background layer as you can see here, but it has some empty as you can see here. We can crop it by clicking the C key, as you can see, which is the crop tool, and let's just move it a bit just like that and double click to save it. And let's choose the V Key. Let's go to file export again. For this time, we want to be PNG, so we can just close this and go to file again and hit quick export as PNG as you can see here. Okay. So we are already in our main environment folder. Let's just name it by BG Building one. And click Control S to save it. Again and again, we will make the same process, C to crop it, as you can see here, double click, and let's go to file export quick as PNG. Let's select it and replace this one by two. It's BG building two. Control S to save it. Let's go to the middle one now, let's it. So BG middle one, for example, Control S, and again and again. Now after we exported all the environment. Let's go to Unity. You can open your Unity Hub and go to a new project here. You can choose your Unity Editor version as you'd like. Let's go and choose universal two D. Because it has the universal rendered pipeline built into it. We will have the two D lights, and we can change and add all the effects we want. Built in with this version. You can give it a name and connect to the Cloud in diversion control as you want, but I will not do that. You can now click and create project. Let's wait to create this project. Now, after we opened Unity and made a new project, you can import the files here under the assets, as you can see. This is the main folder, the main environment, and it has all the layers that we exported, either PNG or GPG, as you can see here. Now let's go and make our environment. Let's start by putting first of all the BG, as you can see, this is the background, and make sure it's in the middle. Let's go to he to transform, right click and click reset. It will be in the middle. Let me go this. And by the way, if your Unity editor does not look like this, because I made it to look like this, I just changed the places of some windows, and this is the best layout. It's a professional ones, professional one, so you can use it like that if you like. So for me, I like it this way, so let's continue now. But first, let me go to the sorting layers and make the sorting layers. So add sorting layer. Let's click this one by writing BG, the background. Here the ground. Here, for example, some assets, and here for the four grounds. O BG is in the BG one. Now let's add this BG buildings, as you can see. It's not in the top, it's behind it, so let's go to the layers. We make it BG and add the order to number one. This is the first one here. And let me add the second one and repeat the same process and make it also in one. These are our main buildings, as you can see here. We can put them like that or we can choose one of them and go here to the draw mode and change it to tiled. You can choose the wreck tool, and now you can make this move. As you can see here. You can now make as long as you want for the main buildings. As you can see here. For me, I like it to be, for example, this way, and we have this one also, let's make it to tiled, and let's also make it, for example, something like that. You can make a lot of them down the road. For now, I will make it just like that. Why not. For now, let's move and add the middle backgrounds here. Let's go to BG and now let's choose the two number two in the order, and let's add this one and also this one. As you can see here. Let's move this one. Now let's add the ground, this is the ground. Let's put it here and choose ground. Let's put it like that, and let's go to draw moode tiled and repeat the same process. As you can see, our environment in art is correct, as you can see here, and this is the right way to make the environments. We can also add it, let's move it a bit to the down like that. As you can see, and we can add the buildings. For example, we have the house, go to the layers and go to the assets here. The house is a bit bigger. Let's put it, for example, 0.8 on the x and 0.8 in the y in the scale. As you can see here. We can also make added the fans. In the fans, let's go to assets, put it in the zero, but in the building, I want to put it in one so the fans can go behind it and for example, make it something like that. You can also make the fans tiled and make it larger as you like. Okay. L et's add also the garage, why not? We can put it here and make it in the assets. As you can see here, why not? Let's make the ground taller. This is the garage. Let's put it like that. Also in the camera, we should change the background of our camera. Let's go to the camera and change this blue with the color of our background. Let's go to here and choose this one. When the screen is big or small, all the background will be this color, and it will not be black or white or something. Or excuse me, this blue color. Now let's continue, and we can add this, for example, this light, put it in the assets as well, and let's put it with the number two because we wanted to be on top of all thing else, as you can see here, We can also make add the neon layer to make our environment more beautiful. Let's go and add it to the ground. Yes. We don't want to appear on top of the asset. Now we want it to be in the back. As you can see here, so this is just a small light, and it will be very beautiful. We can also make it tiled, and let's move it just like that. What else? We can also add the foreground. We can also, of course, add the stairs, the other building. Also, we can add the boxes. Why not? So the boxes, make it in the assets. Here. We can put it to two also, not. As you can see here, we can make it something like this. And let's finish by adding the main foreground. Let's go here and add it to the foreground, as you can see. But everything looks a bit bigger, so I will go to the main camera and make the size to, for example, six. Yes, this is a bit better, as you can see here, and let's choose the foreground again and make this something like that. We can also add the second one and choose the layer to foreground. We can make it something like this. Why not? We can duplicate this by clicking Control D and make it, for example, something like that. Can put this one and we can make another copy of this one. Added many foregrounds as you like. As you can see, this is our main environment. Let's change this backgrounds here. Let's put it like that, and this one also. L et's select them both by holding the control key, and let's go to the color and drag the opacity down, as you can see. We don't want to see much of them, something like that. We can also add our background here and make it also, for example, tile, why not something like this. We can also make this one tiled as well. Why not? And we can make them both a bit bigger. Let's put it, for example, 1.2, and 1.2. Let's put this one here a bit to the down, not the level for this two, just one on the top and one of the down. You can also add as many layers as you like. Of course, And now after we finished a small scene, as you can see here, you can, of course, make a big level as you want, make the ground more and added all the other elements and make if you want another elements and assets to make the environment more beautiful and bigger, 8. Adding Effects: For now, let's go to our main camera, and let's enable the post processing, as you can see here. Now let's click here. Right click, and let's go to the rendering or not. It's in the volume global volume, it enter, and let's add a new one, let's create new one. Now let's add override post processing, and let's start by adding, for example, the bloom, let's enable them all here. As you can see, we can add as much intensity as you want for our environment. For me, I will put it, for example two. You can also change the main color from the white here and make it a bit to the red or pinkish or something. I will choose this pink. For example, let's put it here. Why not? Now it's add other effects, like for example, the channel mixer. Let's enable them all and you can add it in the red green and blue as you can see here. Okay. As you want. For example, we can achieve this look, why not? It's a bit beautiful. Let's add another one, for example, this chromatic. We can add this effect like everything is the way it look like this. Why not? It's a bit beautiful. Let's also add some color adjustments. We can enable the post exposure here, and we can make it a bit brighter, or you can make it a bit darker as I like it. You can also add the contrast. I like the contrast. Also the U and shift, you can choose and for example for the colors. I don't want that, and you can also add some saturation here. But I don't want that as well. We can also add other effects, like, for example, we have color curves. Now, it's not my type. Let's remove it. Also we can add it For example, the vignette. I like the vignette a lot, and we can add some vignette, as you can see here, something like this. Yes, and add some smoothness. Yes. We can also add some white balance. Okay. We can add something like this in the temperature and in the tent, we can for example, make it look like this. Yes, why not? It's a bit beautiful or something like that. Okay. And we can also go to the global light two D and change the intensity. You can make it a bit brighter here or a bit darker. For me, I will just leave it as one, Excuse me. Let's go to the post processing here again. Let's add the intensity here, for example, to maybe three. Now, I will make it into five, five Much, Let's go for example into four, why not. Let's just keep it into three, and let me add some two d lights. Let's go to the right click. Let's go to the light. Let's go add some three form light. Let's choose, for example, e square. Let's zoom in. Let's hit enter, just to keep it in the name. Let's dit it. Let's for example, add the light for our light object. And we can make it like this. We can click it again to keep the changes. This is the light. As you can see, it's a bit different now, but we can change the look by going again, for example, we can go to the color here. We can put it something like this. As you can see, We can make it something like that. Also we can change the color of our post processing. Okay. If we change it all the way here, it will be a lot of lighting as you can see here, but it's not that bad. We can keep it just like that. Let's go here. Of course, we can change the intensity inside the light itself. The fall of of course the color as you like. Now let's add another one, let's click Control D, and let's move it here, let's flip it here in the x. Let's just add the minus one, make it minus one and make it something like that. We can select them both by holding the contro key and let's move them under the light. It will be their children. So this is our light. And, as you can see, this is our environment for now. It's very beautiful. Let's Let's disable the post processing, and as you can see, this is our old environment. It is very It does not have a life and it's very dead. And with this post processing, and of course, the two D lighting, it's much better now as the environment, and you can use it to make, for example, a platformer or e2d shooter or a puzzle game with some action or combat or something. I don't know. You can make any game you want. And of course, you have to now arrange everything and make the buildings under buildings parent and the backgrounds under Backgrounds parent. Don't keep all these layers. It's not organized. With that, our lecture is now ended, and as you can see, our environment is now looking much better and beautiful. 9. Conclusion: In this final lecture, I wanted to say congratulations on finishing the course. I hope you learned a lot from making this small two D environment and learned the basics of how complete environment built. It's by very much separate layers, and as you can see, buildings, props, assets, grounds, buildings, et cetera. I hope you liked the course as well. I hope you learned a lot. And as I said, you can't stop here. You have to complete complete to learn everything now by your own self. You can also check my other courses, and hopefully in the future, I will be making more courses. If you want me to make a better one for to the environments, a bigger one, professional one for much bigger games and much bigger assets, perhaps, Overall, an amazing environment for maybe a steam game or playstation game. You can send me a message. If I found so many people reaching out, I will eventually make this course with I believe the small price just to help everyone learn how amazing environment are built. So again, as I said before, you can also change the color palette for this environment. I chose the dark blue and the pinkish red because they work good together. You can also learn how color theory works and understand the color wheel. You can google it and understand the color and color theory. Of course, you can change the colors from another two ones that work amazingly together. For me, I am currently making my own steam game, and I chose another colors which are the purple and yellow. As you are seeing here. The game is much bigger and bigger and has a lot of other layers in the buildings, for example, I have four different big layers, and I have too many types of buildings and details and colors. As you can see, the environment is much bigger, and I have lots of visual effects that are going on in the environment while you move in the inside the environment. As you can see, lots of fogs, particle system visual effects, to the rain, different layers of rain, not just one layer of rain, different as you can see, enemies, obstacles, different also environments inside the city and inside the buildings, and et cetera. The game is much bigger and bigger, and if you want me to teach you how to make some good great environments like this and also much better. You can, as I said, direct misse me. Also, you can follow me on Twitter. Let me show you here. I have my small Twitter account at Safe T ZD Games. You can follow me here and follow my journey as I am building this steam game. Also, you can follow me on YouTube, on Safe Games. And I hope you learned a lot from this course. Also, as I mentioned, this is the final result of this course. When we added the past processing into the effects. You can also change the colors and the overall theme here inside the past processing and change the colors and exposures and temperatures in the tent, the contrast, saturations, et cetera, and make another different look and also added more assets and different details and colors. Why not? And you can make your own great environment. Why not? Et me move the camera a bit. It will have a beautiful environment like this. And also, maybe in the future, I will make a great professional course on how to make a bigger and more professional to the environment to help you along with your journey to make a beautiful and more amazing games. For now, thank you again for taking this course. I hope you enjoyed it and learned a lot. I know it's a small and basic course. I wanted to make it with a very affordable price, so everyone can learn and make their own environments with their own amazing games. Again, thank you and don't hesitate to reach out for any questions or any future proposals courses, for any different ideas, whether it's environments, props, assets, characters, visual effects, unity itself. You can ask me anything. And you can also check my previous courses, and hopefully in the future ones, also don't forget to follow me on Twitter at Safety ZED games, and on YouTube at Safe Games. And for now, I wish you all the best with your game art and game development journey.