2D Game Art Tutorial (Stylized Landscape in 20 Minutes!)

how's it going guys my name is Thomas brush in the creator of a game called pin stripe and also a game called once upon a coma both of those games are gonna be on pretty much every platform you can think of so if you want to check out those games and the links in the description feel free to do so also please support me on patreon if you can find it in you or just write a really nice comment anything helps with this channel guys thank you so much for supporting me and always being nice in the comments okay so I've been making games for about 10 years 10 to 12 years and believe it or not I spend most of my time in Photoshop most of my time is doing 2d art or 2d landscapes and I want to show you guys how I do that how I make a really beautiful looking piece of artwork really fast don't forget that time is money as an indie game developer so I want to show you guys how you can make 2d art really quick and make it pop before we get started guys I want to thank a cret music geek rap music is a really cool website where you guys could make royalty-free music in like 30 seconds and you can create a custom song that is great for your mobile game or your Nintendo game or whatever game you're making and you could do it in like 30 seconds so all you got to do is jump onto a crap music comm and let's go ahead and just choose adventure dark acoustic [Music] I think all we need to do is just click download if we've got a song ready to go for our illustration so if that sounds like something that you guys are interested in please use the promo code in the link in the description and it's a great way to say thank you to incorrect because guys they're supporting me they're supporting this channel and honestly they're supporting you guys because they're helping me make content for you all right let's jump into Photoshop alright so the first thing that we're gonna do is we're going to create a 4k document some of you don't really know what 4k is well congratulations I don't either I don't have it memorized so we're gonna type in 4k resolution 3840 by 2160 and it's only gonna get bigger guys and that's what she said that's what she said all right so we've got a blank canvas here just like bob ross i like to start with a clean gradient in the background let's do a sunset let's do a really cozy orange and purple sunset kind of like what we've got going on over here let's copy this image paste it on in there and what we're gonna do is we're gonna scale it up and we're gonna blur it give it a nice Gaussian blur so that's basically all we want to do for our gradient here so now that we have a simple color set here what we can do is actually go into our gradient tool open up the gradient tool we're gonna create a new gradient let's just select this green and red one here and edit it so we're just gonna start with this color here and we're gonna copy that color using the eyedropper tool and we're gonna go to the darkest color as well at the top here and now we have our gradient now you'll notice there's some variations of color especially a very intense teal here so we're gonna make sure we have that in there as well so let's create a new color and also be sure that the opacity guys is set to 100% now we should be able to drag our gradient up and it looks basically the same so guys let's go ahead and create just some mountains in the background so we're gonna do is we're just gonna create some simple polygons in the background just like this alright and so what we're gonna do is we're actually gonna take a solid color using the paint bucket tool we're gonna press I and grab our eyedropper tool and we're just gonna get a color that's very similar to this maybe that right there that's very close to it and what we're gonna do is we're gonna actually go a little bit darker so now that it's filled we could actually just darken it a little bit yep just like that and what I like to do guys is actually duplicate the sky and put it on top holding alt so you can apply it to the top of this layer and then bring the opacity down very subtly so that it almost looks like it's it's invisible or see-through this can allow it to look like there's a little bit of fog so once that's done we're just gonna create a new layer and we're gonna come forward so guys here's a rule of thumb to remember with all of your 2d background art things get darker and more saturated and that means more vibrant in color the closer to the camera they get they also get bigger as well so we're gonna slowly make things bigger more saturated and also a little bit darker as they come towards the camera so let's make our way from the background towards the camera and I like to make sure all my lines are sort of variants and so they're not you know perfectly parallel to the lines behind them so something like that is good and we're gonna take this color here we're gonna fill it in and then again we're gonna do what we did last time bring our lightness down just a tad that's a little too much because we're gonna have about five layers of mountains and we're gonna increase the saturation just attach and finally duplicate that sky again put it on over top and just a little bit see how it's got a little bit of gradient in it now all right let's do the same thing over and over again all right so we have a general layout here of about four mountains and they just slowly get darker as they get closer to the camera and you can know if you've done a good job or not if you zoom out and if it looks like a photograph if you blur your eyes and it kind of looks like a photograph it means you did the right sort of mathematical calculations with your colors and sort of followed the rule of bringing things slowly towards the foreground now let's finish up our background and then we'll actually come to the foreground so what I want to do with the background is add a little bit of mist to each layer of mountains so I'm going to apply using alt I don't know what this is called you hold all and then click on the layer and it actually sort of masks to the layer that you're working on so I'm actually going to change my selection tool to a lasso tool and I'm just going to create some quick mist here and then we're gonna use the gradient tool now if you select white here and then go to your gradients here at the very beginning of your gradients here there's a swatch that's automatically going to be created and that's just a simple white - invisible zero opacity gradient so let's select that one and just drag up and then what we can do is do a simple motion blur okay we're gonna do a motion blur add zero degrees here and increase the distance of it to be pretty aggressive and then we're gonna blur it just a tad just like that see how it looks misty and it almost looks like it's stretching across the mountain so we can bring that down here just like that and then we could do the same for every other mountain as well so let's just make sure that we could see some details of mists behind this mountain here so we're gonna do a motion blur and hopefully our settings have saved here yep and a Gaussian blur make sure you're thinking about the numbers you're using every time you do effects and colors and in sizing because you want to make sure that everything looks pretty consistent one of the biggest tells that you're an amateur 2d artist is sizing and colors are all very random and pretty much anyone who plays a game can can tell and maybe but maybe it's just subconscious but they can tell when an amateur has done it so make sure you're following consistency when it comes to colors and sizing all right and we'll do the same for this layer here and we're gonna do a motion blur it's a little bit too much you want to be able to still see the details so we can vary our numbers just a tad here looking good so far let's make sure we save it as things get further away from the camera they do get smaller but they also lose detail because you want to simulate a camera slowly losing focus and also just really quick guys a lot of you might be wondering Thomas why do things get darker as they get closer to the camera you can pretty much follow this rule across the board simply because the way the world works you're slowly looking through more and more and more atmosphere and fog as you're looking into the distance so things are slowly gonna fade to blue or fade to white or whatever you want the color to be and in the evening it'll be orange and at night it'll be a navy blue or dark navy blue something like that simply because you're looking through atmosphere and as things get further and further away from the camera they eventually just disappear into the mist so let's go ahead and add motion blur to this really quick and that looks awesome now one of my favorite things to do is clouds so now that we've got the general color palette here we can actually go ahead and do our clouds and I know it seems a little bit backwards but I like to do my clouds after I've done the mountains because it gives me an idea of what the weather pattern is actually going to look like the way that I like to do clouds is actually like to use circles and so we're gonna take that and we're going to use alt shift and we're just going to duplicate and the way the clouds typically work is they're pretty big in the center and they slowly dissipate into nothing as you get further away the way the clouds work they are flat at the bottom right so you can especially see this in games like Wind Waker they did a really good job of making the clouds look really stylistic by following like real world cloud patterns but just making a minimalistic so we're gonna go ahead and cut this to there cut that one here cut that there and then do one right there as well now one of my favorite things to do is in the background have a slight subtle layer of clouds behind the mountains so we've got these happy clouds here right and then we're gonna go ahead and copy these clouds and all we're gonna do is bring the opacity down to about 13% right and we let's go ahead and give it an overlay and overlay is gonna cause it to look a little bit more vibrant so that looks good and what we're gonna do is bring those up and we could probably go ahead and just use our paint tool here increase the hardness and decrease the size and just fill in these gaps here just like that and what we're gonna do is duplicate this and create another layer transform and flip horizontally and now some pretty cool layers of our clouds why this doesn't look perfect is we need to follow the same rules that we've set previously again it's all about consistency with your 2d art so the fog is blurry but the clouds are not and that's causing things to look a little strange so we're gonna do is we're actually gonna blur the clouds so let's do a little bit of a motion blur for the clouds and same is true for these as well and sometimes guys it's gonna feel like you're guessing and checking you don't really know exactly what you want it to look like that's okay you're just goofing around having fun these clouds are definitely stylistic they look cool but I think overall they might not be what you want them to be it's motion blur 'm and honestly guys I feel like we should just get rid of them I think the clouds overall look kind of cool but I think that they're not really working for the mood and so something you're gonna learn while you're doing 2d art is it's okay to backtrack so this is an especially important rule that you set for yourself which is don't get attached to something just because you spent a lot of time on it but because we made those clouds we actually have this cool texture that we've created in the background makes things look a lot more vibrant and interesting and almost painted so now we're gonna add a little bit of shadows and shading to our clouds now the way that I like to do things I don't really use the paintbrush ever I actually like to go ahead and use the selection tool to select certain areas that I feel like would be dark areas so what I like to do for this is if I'm looking for a shadowed area I've learned my eyes and I look for where my brain is telling me shadows are going so I put one here now I get the paintbrush tool bring down the hardness and then I'm just gonna fill in black areas so remember guys shadows below clouds are gonna start at the top really dark and slowly fade to zero so something like that like that good I like that and then we're gonna do an overlay just like that see that slowly creating some shade in shadows and we're gonna do a motion blur here there we go that looks awesome and then bring down the opacity now we're gonna do highlights for the clouds so we're going to go ahead and take our tool and again I'm gonna blur my eyes looking for highlights there's a highlight there so this is our highlights are gonna be and we're gonna take a simple white paint brush and we're gonna do the same rule right except it's going upward so we start pretty bright down towards the bottom gets fainter as it goes up light and shadows highlights and lowlights I typically do overlay effects there we go and then we're gonna motion blur it now we have highlights and lowlights in the clouds pretty cool now to achieve this similar effect with low lights and highlights we could actually just jump into the mountains here and guys let's go ahead and merge all the layers that we can now what we're gonna do is we're actually gonna start adding in some inner shadows it's a effect you can use in Photoshop to make things slowly blend into the background a little bit more so we can go ahead and take the farthest mountains back here and we're gonna do an inner shadow we're gonna select the color behind the mountain so that looks good to me we're gonna do a pretty big size make it look fluffy and make the angle 90 degrees and now it looks like the Sun is blooming it's it's bleeding over the mountains and guys we're gonna just copy this effect to the next layer and we're gonna use the color of the mountain behind it make sure you select the actual color of the mountain not the bloomed blurry version of the mountain so right there it looks good it perfect so if we zoom out you got to make sure that it looks pretty much how you think a photograph would look I think it's pretty good I don't I don't mind it let's go ahead and start adding in the actual foreground the area where the player is going to run now this guy's this is the most important part of your artwork the thing is is you want to make sure that your foreground is very unique to the background so whether it's choosing a really dark color or a color that's completely opposite so in this case we might choose an orange or a yellow or what you want to do is add some highlights to your foreground to ensure that things look a little bit different so that the player stands out and they don't get lost in the background we're just gonna go ahead and create a mountain that you can walk on now the truth is guys you can do this in Photoshop but you can also do this in unity so background elements you definitely want to do in Photoshop foreground elements you can actually use polygon tools so that you don't have to create all different foreground elements inside of Photoshop you can do it inside of unity whatever your method is just make sure your character stands out from the background but what I'm gonna do is I'm gonna go ahead and create a very dark sort of cliff face that's actually behind the player and then put a regular colored bit of ground in front of that so that the character actually stands out and I'll show you what I mean in just a second here so we're gonna take this color and then we're gonna make it pretty dark so we're gonna have these dark boulders and they're gonna sort of make their way down we're gonna fill those boulders in and now what I can do is I can actually take this color here and I could create let's let's make some grass you can actually use the lasso tool and create some grass here so see how there's some contrast between where the players walking and also what's behind the player so that's what the use of these boulders are and these boulders look kind of crappy so let's add a little bit of detail to them because right now they look they look like word art or clipart or something so you can see here we have these hard edges and then we've got a nice contrast with this smooth grass here so the cool thing about our grass is what we can do to add some depth is actually take the boulders and on top of the grass we're gonna flip the boulders we're gonna duplicate those boulders and then flip them and place them on top of our grass skew them just a tad like this see that and then we can skew them to the left really hard hard skew and then line them up there we go just about like that and they decrease the opacity you see we did there guys we created some shadow and what that allows us to do is it gives us a feeling of purpose and placement for the player so now we have our shadows and again because we're using blurring in a lot of other areas we can go ahead and do a motion blur and follow the same angle as the actual shadow and so now we have a sort of shadow on our grass and then guys what we're gonna do is add in a little bit of lighting here to our boulders as well so it looks like our light is coming from the top right down what we can do is just add in some shafts of sunlight on the boulders looking at where these objects are and where the boulders are guessing where they would be and then creating lighting around those those guesses let's go ahead and grab some light we're gonna do is just sort of fade out these images here and then finally guys let's add a little bit of layers to these boulders so let's add one more layer of boulders so there's a little boulder field and you'll notice there's more detail on the background elements that's not good let's go ahead and blur it and then let's add an inner shadow just like we did with all the previous elements so if it was like a graveyard we could add tombstones and crosses or churches in the background but in this case I'm just trying to show you how coloring works the last thing I want to do or one of the last things I want to do is create foreground and this is like a true foreground element ease our big boulders in the foreground so it gives things a little bit more depth right I don't really like using true black to pink lately honest with you so let's go ahead and fill in with a color that's not necessarily a true black final thing we want to discuss is our character model we're just gonna create a very simple character here's the thing about your character model he really needs to stand out from everything else so I'm gonna create a glowing little white character kind of like Fez we're not gonna get too complicated here and let's just copy this rectangle here and create an arm so there's our buddy let's do it an outer glow to make him look trendy right so what I would do is create a shadow I don't know how the developers would program this but I would put it in there anyway so there's a shadow of our little character finally what we're gonna do is create game title amazing adventure right don't forget the most important part of your games illustration post-processing effects like bloom and glow can really help your game go a long way also don't forget a little bit of vignette can also go a long way sort of pulse in the vignette here I like to colorize and do a bit of a grading so we're going from green to we could do a teal right in our math section of our hue and saturation we can actually take the black and then pulse upward look at all these cool effects you can do that looks pretty sweet actually and this is how I typically come up with a style or a design for my game and then I sort of used those rules in this color palette across the board let's go ahead and add a really cool moon we're gonna take that white tier and we're going to decrease size for our moon and put an outer glow on it right cuz it's a moon rotate a little bit so because it's kind of interfering with those mountains we can do is actually convert this entire thing to a smart object because we want all those effects to be masked as well pretty cool pretty cool man I'm just tempted to keep going and going and going and going we could add stars you know we could add a lot of cool different things I love doing this go to pixels comm paper texture and there's a paper texture here I love to just slap on my images and just wait it's gonna make you feel amazing here we go here we go and then we can do overlay we've got ourselves a moody adventure game now this was really simple and really easy to do it's not because I'm a genius it's because I've practiced really really hard but if you guys want to keep learning about how to make games and especially do illustrations or if you want to see more of these kinds of videos please hit subscribe hit the like button and leave a comment guys if you really want to sport with this channel if you really are a super Thomas brush fan I'm just kidding but if you really do want to support me head on over to patreon and that would really mean a lot if you support financially helps me making games thanks guys you later [Music]

Channel: Thomas Brush

Views: 313,667

Keywords: thomas, brush, unity, unity3d, asset, assets, model, texture, models, textures, beginner, easy, how, to, howto, learn, course, series, tutorial, tutorials, game, development, develop, games, programming, coding, basic, basics, C#, 2D, 2d game, sprite, tiles, sprite based, tile based, make, make a game, how to make, getting started, start, level, design, level design, platformer, side scroller, top-down, sidescroller, video game, introduction, intro, photoshop, illustration

Id: aOLVIp0Y41o

Length: 20min 47sec (1247 seconds)

Published: Mon Sep 09 2019