Pixel Art Class - Buildings & Architecture! [Part 1]

i'm using what would be a straight line making it imperfect to say hey there is a disturbance in this flat shape and it is in the shape of wood grains and that's all you really need to get that impression hey guys welcome to pretty much the first tutorial that i'm going to be producing that covers something that is directly for insignia my game and is something that i'm working on right now basically covering my process on how i approach architecture i had a brief for myself in the game that there was going to be a pub or a tavern or an inn in every chapter of the game so every major city has one of these places like a bar and in this second chapter a lot of the architecture is much more diverse it's more of an urban environment so things are more clustered in general and has sort of more character as a city so this originally started as i had built like a series of buildings and this one here i really like the shape of i came up with this idea that some of these buildings would have like second stories that were built after the fact and then like a little balcony just to give some diversity of shape and i wanted to run with that concept for the pub and i was thinking about the space considerations that i needed for the things that were going to be in the pub that's you know the barman and quest givers that are sitting down in the pub that kind of thing so i was playing around with the basic shape here in leonardo the sketching app that i use and i came to this point where i had like a lot of sort of horizontal space that i created and i still wanted that second story and i wanted to play with this idea of a balcony and uh eventually i came up with a design like this one and thought that it looked kind of like a shoe so this is called the shoe in it has a few basic things that i needed and then i used references to sort of pat out the rest of it so i had a lot of references that went into this most of them were irish pubs but also just the shape of a shoe that i wanted to sort of at least hint at with more than just the l shape of the building so one of those things this is all this is the ground level here so this is ground one of those is this heel that's here that steps down into the rest of the shoe you can't really see it but it's like this area here and then it comes down and it's like a gutter or like a skirting around the building it makes it look a little bit more like a shoe this basically right i also have this idea of like the flap over the boot and you could think of that as you know either the pitched roof here or this sort of like tent window structure coming off the side then for like the actual pub itself the decorations we're going to be going for something that's an irish pub i looked at a lot of these references for ideas about how to decorate it and how the entrance would look like flower boxes are very very common in the uk and ireland so that's something that you see a lot of here and was a clear reference for these buildings in general um so a lot of them have flower boxes and have that tutor style the next thing was um you know other sort of decorations you see out the front so barrels very common uh signs or like little little stands for menus and things like that uh i also had this idea that i wanted this is something that we have in australia i don't know if this is common anywhere else in the world but we have this um basically seller sort of set up where the delivery van that comes and brings the alcohol i mean i imagine this isn't australian so uh or maybe it is i can't really tell the the van that delivers the alcohol drops it off in the cellar rather than having to take it upstairs or bring it into the premises so i have this idea of there being like a little uh side window seller here so we're going to be focusing on the exterior today and maybe in another tutorial we can do the interior this is kind of the reference point for the architecture for a lot of the game uh i want to talk you very quickly through sort of what my references are and what i'm looking at as i said previously this is sort of like a tudor house or tudor architecture style what that means is a lot of timber a lot of stucco on the outside of the buildings we've got tiles on top having the second story be like overhanging the first story so here's an example of something that i've already created in this style recently uh this is a sort of redux of almonds house you can see i've still got the you know light sort of stucco exterior we've got those timber frames bordering the building we've got the windows built into the frame i have these rounded decorative sort of timber designs here to give it a bit more warmth and you can see that in general like this is quite caricatured it's quite small compared to what you would expect a lot of these measurements are a lot bigger than they would be to make it more sort of chibi so the thickness of this tile of this edge here is much thicker than what you'd expect tiles to be it makes it feel more like a toy house it makes sense that there would be a little bit of bowing maybe but i think having it be so much so dramatic here gives us a more homely feel it makes it feel more like it was made by someone who's not a robot which when you're producing pixel art is quite difficult to do because there's such a temptation to stay within the lines let's approach building this building what i want to do first is make sure that it will fit inside of the scope of everything else in the game so i'm going to now just draw like the basic shape for the building and i'm going to keep faith with this first story and then the second story i kind of want it to be a focal point when you're walking down the street i do want to stand out from the others so i'm going to break one of these lines to make it a little taller and a little more grandiose than the other buildings i think what i'll do is i want to emphasize the front door which is going to be something like here because i want you to really see that and that means i'm going to put the building on a little bit of an angle where it's it's facade is facing the camera a little bit more than the others and again as usual i'm using colors here that you know aren't fully representative of what i would be using but that's kind of on purpose right it's definitely on purpose because i haven't made that choice yet about what colors i'm using i'm just using some nice clear colors that will help me understand the shapes a bit better there were a few other things right we wanted this to be called the shoe in so at this point remember talking about silhouettes i really want to make sure that you can tell that this is a shoe or at least once you know that it's called the shoe in that you can understand oh yeah it does look like a shoe so that heel that i was talking about before and the step in the sole that is uh it's really important to get those right now because they are quite literally architectural elements i want to make sure that i am um keeping faith with that organic approach that i was referring to earlier and what that means is basically to avoid dead straight lines you can see here in this building the frame of the building is actually bowed outwards like this and remember we're playing with this idea of having to be sort of like a flap or something here some sort of a tent window so i'm just using like really deliberately quite large brush sizes here and being very very liberal with them i'm trying to not trap myself into the idea that i should be designing the exact dimensions yet because we're not there yet right we don't know if we like the overall shape and if i was to come in with a one pixel brush and start trying to figure this out i'm never gonna get there i'll be stuck here forever so you know make sure you're picking the tools for the job uh carefully that's right it's like a clay model exactly i'm using the shade tool here again just to really speed up this process i'm picking two colors i've got them here in the palette and i'm just going having some fun with it i knew i wanted it to be big but it's kind of still a little bit bigger than that so maybe i'll shrink this in bring this slightly down it's getting closer maybe we'll just bring this a little bit like this i'm trying to remember that i've got some perspective to demonstrate here as well and in the long run like we definitely will come in and make this like pixel perfect but for now we'll keep it keep it rough okay and i can see that i've gone a little bit wider here i think i'll go for that as well i'll keep it around so we can just stretch i'm using the marquee tool here to just grab what i want and keep in mind that we've got that little overhang here something that i do quite often is i'll go out of my way to show you things that you might not really see if it was correct perspective wise so an example would be i want to show you that there's like another side to this another little um sort of protection from the rain or from whatever it is as people exit this side of the building you may not really see that because this wall would be in the way but i still want to show you it just to give you some information right even if it's not architecturally correct it's another little bit of detail that makes for a better photo really that's how i think about it i recommend having your character from your game actually in the scene and on his own layer so that you can put them you know where you need them to be and uh actually look at the references and the sizes of things to get that right that way you'll stay sort of on model if that makes sense or on scale awning that's the name of what i'm talking about so this is one of those times where i'm sort of taking the liberties that i want with the design i mean we didn't see in the references any buildings that had like a staircase leading up but i think you know it gives it a little more character for it to have it so that's why i'm choosing to keep it and on a new layer i'm just going to block in where those flowers would be and how much space they would take out and i wonder if that's enough so not not too bad so far so right now all i'm really doing is like thinking about edges that you can see that's pretty much it i'm just thinking okay what are the edges and how can i make this look more like a structure right how can i just fill out where those edges would be to help really just define the shapes i mean that's all it is i'm just defining shapes it's not really a process of like feeling in the details as such unless those details are structural this was the first sprite i ever made of any kind of architecture and i'm proud of how it looks for like a first effort uh it took a long time to make this and it took much much longer than it did to make this because i didn't really know what i was doing and i i didn't know where to put my effort and energy it took a long time to get these details on the tiles perfect and you can see at every point all of these angles are very specific so we've got here a 45 degree angle and then you know one up by two across angle it's perfect all the way up and this obsession with like detail really made this take way longer than it needed to right if i needed to change any of these structural proportions suddenly all the details we need to be redrawn around that area and it's totally not worth doing it that way so instead if you just think about the structure first get that exactly where you want it and then worry about you know the rest of it later i think it will help you a lot more i wonder if we can use this as the window a bit of opportunity here to clean this design up so i've got the the heel step here and we've got this here if we move this across then it will serve as the break between the heel and the step a little bit better so let's do that design efficiency that's right okay let's approach some of these windows now i'm not sure there would really be a second window here but i kind of like the idea of there being something decorative or like ornamental on the building it's just a lot of space you know chimney and even even in the design of the chimney it's something that i want to sort of uh emphasize that i'm not going for straight lines i'm going for bowed lines there's a little bit of a trick that i use when i'm designing these kinds of lines the amount of pixels on each step increases as we go across it's also why this doesn't look straight right because it's like one one one one two two two three two three two three two three one one one it's sort of like all over the place i'm just gonna be mindful here of if i take this shape and paste it over here i only really have space for one window i can either make these windows a lot smaller but i quite like this so maybe i'll bring the flower box down to give us more space here to have a bigger window and maybe i'll just trim off the size of this roof a little bit actually i really like the size of this roof i like the oversized sort of toy box you know dollhouse uh look that we've got so instead what i'll do is take this window maybe like bring the shadow up a little and then i'm just gonna half this in width like that okay what else can we do i really want to think about the other side of the building i had this idea for there being some sort of a drain system here because the balcony is quite uh flat the rain is going to drop here it's not a pitched roof so the rain is not going to just automatically fall off the building instead you need some sort of drainage system so that's what this is and it kind of also looks like a shoelace so if i bring it it might even be better if i bring it closer to the the front of the shoe and maybe we even don't make it to the bottom of the street before we kink it out again so that it looks more like a like a hanging lace so i i really want to put as many flowers in here as i can i'm just going to go crazy with it i think they're i think they're really cute and i think they will give more life to the building so more flower boxes what i don't want to do though is forget that this is a pub for now a lot of those elements are just here at the shop front so like the the sign obviously you know maybe it will be like this it's like a little something like that it doesn't have to be perfect right now and that sign that we were talking about out the front i think these help a lot the sign immediately says oh this is some sort of establishment and the uh the board says oh they we sell you know something that has a menu associated with it okay looking good i'm really liking where this is going one thing that i'm not 100 on is the shape of these windows that i've drawn uh i'm definitely going to be bringing the the roof out but i think that the it looks a little bit eastern having to be the diamond shape at the top maybe once we bring this uh forward it will be not as bad i just realized this should be like way brighter it's getting there nothing too broken but this is getting a little confusing i think i might have to step away from the red soon so this is one of those things where i use the same color scheme all the way up until it stops making sense so for this i'm like trying really hard to make sure the distinction between the tones is clear but realistically these will be different materials anyway so me working that hard is not going to help me in the long run because this will probably be like orange and this will be like white so it's not it's not really important with that said let's add some color now you can do a bit of a trick i mean you could take everything that you want that's not the roof it might be better actually to go with contiguous and then grab all the things that i want to be roof colored yeah and then just grab those now we select inverse okay so now i can just go start with the lightest color let's just say that's the lightest and then down and then down and then down we might go a little brighter actually i think for the face of the building we can grab the whole thing set a really large brush and then paint it like that and then just see what we feel not too bad and then now we can go and replace the the roofs so let's start with the darkest color first and i'm doing this in a bit of a drastically different set of colors here for example i've accidentally lost the shade because these ended up being the same so maybe before we do that i will do this and then i'll come from the roof and go like this we can make these green for now let's work on those timber details i think before we do though i think i did want to make the bottom floor brick and then we'll make the top floor uh more stucco so let's do that and i'm going to use these really dark browns to make the brick in the previous um i actually use the skin tones maybe we could try the skin tones going from the darkest through to these colors oh i think that's where we want to be i think that's right here i've just got this flat and i've got it as like a you know the designs coming through here but i think instead i'm going to make a bit more of a design around the frame so i'm just going to take like the main color and then grab the nearest sort of like wood tone that i would use for this and then just do a replace so that i don't have to lose the um the actual shape of the building and i can use a quite thick brush to decide what i want the uh the width of those boards to be so i'm using the shade tool and i'm picking two colors that are on complete opposite ends of the spectrum here for the sake of yeah just adding in the detail that i want without losing the detail that's there that's all it is the way that i know what to do here is i grab the ink block tool and i go from this i look at the index that's just come up and i drag across and i just go back and forth i just remember that way like oh it's this and this i open up the shade tool and then i just um toggle between them so i'm actually going to use this as like a trimming around the building it could be interesting if we actually go all the way to the edge if you can simplify the lines that generally leads you with a stronger design we moved the window sill to the bottom here where the heel is we had two details we made them into one detail same sort of thing here i'm just reducing the amount of lines in the thing yeah i think this is right and it's actually the darker color now you know what we could do we could go like this it's quite unique and i might you know i might bring all of this up one tone and then replace this color with this color and then go one tone darker for this cool this is looking like really good i'm really happy with how this is shaping up and i'm just sort of flicking around finding details to add i mean there's so much to do here that i'm not really picky about like what order i do it in i'm sort of just jumping around when i'm bored of one area going to another area and just you know fixing that i did like the idea of having there be a sort of window thing going on here uh maybe i'll use some of these darker colors if the if the door is dark i might see some just more variety in the colors around this space cool so with uh these window boxes these flower boxes i'm just going to take two colors and just do a little bit of shading work i'm using the shade brush to really make this quite efficient and i'm just doing it to get a sense of like very early depth you know where is the light coming from where is that light then going to be obstructed when we start casting the shadows down so for example one thing we haven't really done here is like you know think about okay where is the shadow going to be here it might be like that maybe there will be shadow for all of these timber beams like this let's look again at the reference so that we don't forget where in these tudor buildings uh the timber starts so there is usually like it looks like a timber piece that runs along the bottom of the second story and one technique that i i do a lot of is just this kind of look at like a sort of specula just a little highlight that's gonna run you know along this very edge where it sort of catches the light it just gives it that extra something and i put the brightest color next to the darkest color right one mistake that a lot of people make is they might think well the sun is coming from up here right the lights coming down so the thing that's going to be most lit up is this well the answer is like no because what that does is it makes this now look like it is rounded right it looks like this is like a tube right where the light is hitting here and then there and then there this is like very similar to what we would call like pillow shading i really really avoid doing that because it makes it so much harder to think of it as a as an object with edges instead it looks way rounder so it's count it's kind of counter-intuitive but that's just the way that i do it that's the way that it is so instead you know i might do the shadow and then i'll put the highlight directly adjacent to the shadow like that that feels a lot sharper generally speaking i wouldn't line the whole thing with that highlight color i would just dot it around and it would be nice to just hint at some of these joins in the timber this is still really rough as you can see this is just like a totally iterative process you know it takes time to refine it and shade them correctly just for now quite simple and get some of this in here looking good and i just realized these these flower boxes could be a lot lower so let's bring the windows down to about there nice and just stretch this down nice now obviously this tutorial is designed to be general hopefully you'll be running into similar sort of scenarios that i'm showing here if i make this mistake or if i'm in this situation what did adam do when he was in the same situation so let's do some more work on these little flower boxes and i'm going to start working on the detail for the bricks next so one thing that i really want to emphasize is how i approach detail for all the architecture in my game it's something that i think as you will improve as a designer you will learn where the line between you know too much detail and not enough detail is and generally speaking i think at least for me when i was starting out uh it was more of a temptation to add detail than to take it away so if i look at this first house that i ever made you can see the detail on these tiles is very explicit right you can see where every single tile is you can count how many tiles there are you can see exactly the complete lines for all of these timber beams and it leaves nothing to the imagination and it leaves everything to the critical eye you can very clearly you know poke a stick at the things that you don't like about it like for example what happens to this scenario why is there like a quarter of a tile that's being chopped off here so instead what you can do is have fewer details that are more suggestive than they are uh you know exhaustive so like what i mean by that is you can see here that there's like mostly nothing and your brain feels in the rest given what i tell you it's an implication of detail that's right so a perfect example would be like you can see these timber frames around this i know that i wanted there to be like a kind of a grain right in the in the wood but i can't show you a grain with one pixel it's too big right it's just like way too much and it darkens the overall effect instead if you just start with some of these grains and then stop your brain will imagine you know that it sort of fades out fades off into the face of the wood or another really really good opportunity is that the points where light um is at the edge of something that's kind of where you see the texture of that thing the shadow actually gives you a lot more information about the depth of this than the mere colors of the things or the details on there it's the light that actually reveals the texture the same thing with this right it's the light that reveals the texture so if the light is changing conditions and there's like what would be a straight line you can use the imperfections in that straight line to imply the texture of whatever wall that is or shape or whatever it is so in this case i'm using what would be a straight line making it imperfect to say hey there is a disturbance in this flat shape and it is in the shape of wood grains and that's all you really need to get that impression so same story here and i wanted to explain this particularly for the bricks right bricks can be really really really repetitive and difficult to look at especially in a pixel sort of landscape here i've sort of taken away a lot of the continuity in all the bricks and your brain sort of fills in the rest so we're going to go for something hopefully more refined than that i'm going to take maybe the the space around the drain pipe and we'll start there and bricks you know are laid in such a way that every second brick is offset by half so all i want to show you is the bare minimum that you need to make that inference that oh you know there's a shape here and then there's a longer shape here and there's a seam between these shapes here and you can sort of fill in the rest with your brain and depending on like the integrity of like the bricks that you want that you're trying to portray you might not even allow like some of these shapes to be as you know perfect as they would be with a normal modern brick house you might stagger the heights of them so that some of these bricks are a little shorter than the others or a little bit wider and if you were to try to like close all of the lines it would be very difficult to have it looking good if you were to fully be explicit about like where every seam of every brick is so as well as shadows you know it's nice to add some highlights here and here and there as well to give the effect some bricks are actually sticking out away from the wall and this is something that i do you know kind of on a case-by-case basis i just i add highlights and if they look good i keep them if they don't look good i take them away another opportunity you have is actually on the very very edges of the building so what i would do is like cut in every so often and if you make it look like you're sort of staggering every second or even just every now and again have a piece that goes in or a piece that goes out now this looks way more like bricks and you would sort of give the eye a bit of a hand here by saying okay well this is sticking out and uh you know this is sticking out and maybe we've got a bit of a top foot brick here that we can see it's much more rigid looking now and you might even go in on some of these breaks if you want to get really explicit now that's bricks for sure you know if you didn't know it was bricks before now it's bricks and same on this side and again same here getting pretty close to the end of what i will record for this episode but i'll just sort of hint at what we'll be doing next so where i would take this once i'm at this point where i've sort of blocked in the shapes i've got some decent lighting on it all i've got some details at least like first pass details on some of the areas i will take a step back and i look at my original idea and i look at the references and i say does this meet the brief so far am i on the right track and if it doesn't meet the brief if i don't look at this and see pub what is it that's missing either from my original sketch or from the references that i would need to add to make it meet that brief and if the answer is well you know maybe none of the things that i think are in the references will definitely make it feel more like a pub then it's time to review this structure before we move forward just say okay is there anything about what's here that makes it look like something that's specifically not what my brief was so for example if this uh had let's just say we had added some sort of like wooden overhang and we put like a pig in like a pen by the side it's like you would probably go more towards like a stable or an or a farm house so if you have any details that like explicitly move away from the direction that you were trying to go for it's good to isolate those now so that you don't end up you know trying to add stuff to sway the mind away from something that's already there right everything that's there should contribute to the end result rather than fight with other details once i've got these signs more properly in and the sign at the front of the place i think that would be good also maybe posters on the wall here some detail on this wall that sells the work you know the idea of pub would help a lot i had those metal kegs in the original thing here which i think would help quite a lot maybe even some people standing out the front or some tables and chairs on the roof here immediately that would be way more of some sort of an establishment that is public and i think that's probably what this is missing at this stage i'm quite happy with where this is at and i'm really looking forward to continuing it in another video so this was part one of uh architecture and i will see you in the next one hey pal thanks for watching and thanks most especially to the patrons and twitch subs who support this channel and my gamedev project insignia to find out more click the links in the description below and if you like this video tell youtube by clicking the like button and then youtube will tell me and then i'll make more videos that's nice

Channel: AdamCYounis

Views: 101,931

Keywords: game development, pixel art, game dev, game, video game, indie games, stream, tutorial, buildings, architecture, house

Id: UgdNTlH54pQ

Length: 35min 54sec (2154 seconds)

Published: Mon Nov 23 2020

Reddit Comments

[u/nominolo]

He has a bunch of more (mostly tutorial) videos on his Youtube channel. Some of my personal favourites:

• Character Design & Poses
• Run Animation