Pixel Art Tutorial - Architecture

hey noah here i'm an architectural designer and an indie game developer working on an open world pixel art game called chef rpg i started drawing pixel art a year ago and i've been practicing almost every day my drawing style has grown quite a lot over this period and i finally feel like i've arrived and an aesthetic that i really like and feel comfortable enough to do a tutorial in the building i'm drawing will be the starting restaurant for my chef game in order to determine the aesthetic it's good to think about the story behind the building the building should say something about the world that it exists in especially if it's a building that's been there a long time i've determined that this restaurant was the first restaurant of a famous french chef who was your former teacher your teacher has since moved on to open more restaurants around the globe and this restaurant has remained closed for the past 20 years based on the story i can use traditional french style architecture a typical composition would be stone walls topped with metal roofs also because this restaurant has been sitting there for 20 years there should be some signs of nature taking over like some moss and plants creeping up the building i'm starting with a sketch to get a feel for the composition and building proportions for this restaurant i'm using what is called a mansard roof which is a type of roof you see on typical apartments in paris this kind of roof is normally used to create more space in your attic compared to a regular roof and they look great if you get the proportions right here we have an initial sketch because the roof geometry is fairly complicated i'm going to put the image straight into photoshop and trace the lines architecture is designed for humans so naturally we want to set the building to the scale of the human however if we're making a game the scale of the building is also constrained by your screen size as well as how far we want the player to travel to get to the next destination in the case of a game making buildings real life size may not be the best idea i did this in my design of the main town and a viewer pointed out that the buildings seem too big i also realized this when taking a walk through through the town and you can see the full building when walking by see here even if i stand next to the building like this the camera can't capture the whole building which defeats the purpose of drawing all that detail if the player can't even see it even though the buildings are scaled to human size you feel small when walking around this may be due to the fact that we are used to playing 2d games with shrunken down buildings for chef rpg i'm going to go for something in between the buildings will be moderately shrunken down so you can still see the whole building and the environment won't feel too big on the other hand they won't be so shrunken down that you lose the building details and that sense of immersion the style of pixelart i'm drawing involves using outlines like in illustrations personally i think this kind of pixlr is easier to draw because the outlines help make the elements of the drawing clear whereas if you're making pixel art without outlines you have to do a better job of controlling the color and shadows else your player character will blend into any background that's of a similar color it's important to understand the fundamentals if we want to draw this type of pixel art let's say we want to draw a cube in the top down view we start with the outline then we fill in the background color then we add the lighter color on the top face to give it some three dimensionality and finishing the drawing with any textures and details notice that the dark outline only exists in the outer boundary we typically want to avoid the outlines inside the drawing because it'll pop out too much and interfere with the visual hierarchy of the image if we do need to use lines inside the object they should be a lighter color than the profile line so here we have a general outline of the restaurant before we jump in with some details we should set a color palette having a color palette is important personally i think pixel art really shines when there's a limited color palette and it lets us control the atmosphere of the drawing a lot better there's plenty of websites that generate color palettes for you you can also grab palettes from movies you like like here if i search ghibli color palette you can get the palettes of spear to the way or house moving castle or my neighbor totoro a limited palette is a nice jumping off point but you can always add more colors as you go if you're drawing something more complicated you usually want to use more colors than a limited color palette like this but having this as a base is really great for maintaining consistent saturation and vibrance in the drawing regardless of the color you are using the first detail i'm going to start with is the stone walls starting simple i'm just going to draw in the stone pattern here we see that the stone block doesn't quite end at the right position at this point it's easy to widen the building a little bit to fit that block in if the block is cut off it'll look strange and will become super distracting later on next we color everything in to create a background it's always good to block out your major colors instead of painting pixel by pixel on a white background you just get a better feel for the drawing throughout the drawing process by having that extra information to draw stone walls we want to give the blocks some three-dimensionality just the single light line on the top like this gives it the sense that they are popping out of the wall a little bit when there's a lot of repetition going on like with a brick pattern it's good to add some randomness to it maybe only some bricks pop out like this another thing we can do is to throw in some different colors to give the stone a bit more personality mixing different colors works really well in pixel art because you start giving the drawing more vibrance and life as compared to having a solid color for each material the important thing is to stay inside the confines of your color palette for example in the palette i have here if the brick is red i know that a color close to it should work really well it does take some practice to get an eye for what kind of colors you can mix and match when starting out mixing colors close to each other is a safe way to go once you get more advanced you start to notice that you can mix complementary colors and other colors that you wouldn't normally expect to work i made the cluster of bricks at the base a different color which helps to frame the drawing and to highlight the idea that the building has a base typically the parts of the building near the ground will be dirtier and will be first to be overtaken by nature using a different color is a good way to emphasize that idea i decided to change the roof overhang over the door to an arc since i needed a bigger space to put the restaurant sign the triangle from before was just too small to fit the sign also a rounded entrance feels cozier and more inviting as compared to a sharper shape like a triangle if we zoom out we see that the stone grid still pops out a lot you can fix this by adding randomness to the lines for example we can completely erase the lines at certain points another method is to add a similar color like for the brick this time focusing on fading out the lines underneath the roof i'm adding a purple to define the shadow as well as to show that natural weathering of the building at the edge where two colors meet i sometimes like to use dithering which helps to blend the colors better dithering is also really good if you want to give the drawing a strong pixel art feeling because it's not a drawing technique you see in other drawing mediums dealering is really useful for blending colors creating shadows or trying to represent fine textures now that the stone wall is done we can move on to the windows this will be a fairly traditional window i'll start by drawing the primary frame like this i'm using green here because it's the complementary color to red it's always nice to use complementary colors with each other as they really help each other pop the color combinations they produce typically look really great as well i'm adding a darker outline here to give the frame a thickness and some depth you don't have to do this it really depends how thick you want the frame to be one thing i discovered about pixel art is that it's not really about trying to replicate our real world you're using colors and forms to express an idea depending on the style of pixlr you're making realism is often not that important a lot of times i'll choose a less realistic color if it can make the drawing more expressive here i'm using a bright yellow to express light but to also make the window frame stand out by combining vibrant contrasting colors now we take a blue color from the palette and fill in the window finally to give the windows a bit of a sheen we can use a lighter color and add some streaks on it like this you can apply streaks like this to any flat surface that you want to look reflective this technique can be used to create glass metal and even porcelain for the door i'm using the same process as the windows currently it looks a bit flat and a bit too clean we can add an extra brown shadow on the bottom here to give it a bit more wear and this is a place where dithering is really useful for blending colors so now it kind of looks like the paint is peeling and there's a bit of dirt on the door now let's move on to the roof before jumping in it's good to look at some photos of how a roof like this is composed drawing in architectural details things like ridges bolts and individual panels will really just make the drawing more convincing from this picture we can see that the roof is made up of many vertical panels separated by a thin metal ridge that stick out at the points where the roof slope changes there's a horizontal channel that catches the vertical panels so we will need to draw all of these ridges and metal panels now this is a pretty complicated roof if you're starting out with pixel art it's best not to draw something that has elements with a bunch of different angles it's probably best to start with a simple flat roof and work your way up from there following the same rules as before we draw a darker outline for these grooves since they are projecting out of the drawing right underneath i make a single line like this to show where the light is to give the ridge a sense of height we can add a darker line underneath notice here that i use two lines instead of one if i use only one line the line is disjointed and you end up creating banding this doesn't look good so you'll have to look out for this and avoid these situations in your drawing now that the line work is ready we can start jumping in with some details the metal panels usually don't cover the length of the whole roof and are typically broken down into smaller sections like this i noticed that adding a single pixel to represent the bolts adds a lot of richness to the drying they can also help reduce the feeling of flatness or emptiness when you're making a wall or a roof for these kind of little details the key is not to make it uniform only apply these details to some elements if you apply it to every panel the repetitive pattern will stand out a lot and draw a lot of attention away from other parts of the image just like the walls we can throw in some different colors into the roof to give it a sense of wear and tear and to break that feeling of uniformity metal roofs typically change color over time and they often look quite amazing when it happens we can add a darker blue color to the roof faces on the side since these sides catch less sun on the other hand the top faces should be brighter i notice here that if i use a light blue on the top face it gives that look of a reflective metal panel reflecting the sky which is pretty cool after mixing the colors a bit i think the green and blue look really good together right now the roof overhangs out over the walls but we currently don't get that feeling from the drawing to fix that we can add a black shadow over the areas that have an overhang and set it to semi-transparent to quickly create that shadow another option would be to manually recolor all of the stone but that process would take a lot longer especially if we're dealing with a lot of colors now that we put in the shadow it looks a lot better the shadow gives the drawing more contrast and it pops out a lot more by following the simple shading rule of lighter colors on top and darker colors on the side it's a pretty reliable way to make clear and clean drawings now obviously if your light source isn't coming from the sky you'll have to adjust the drawing to make sure all the lighter faces point towards the light source so i decided to adjust the roof color a bit more since it was looking a little faded i think this new color set looks a lot more vibrant compared to the old one it's just a simple matter of selecting all the colors of a certain value and painting over them with your new color now we can add some final touches to the roof like little bits of rust along the edges and adjusting some of the colors and shadows on the panels these little things really add a lot of richness to the drawing when they're all working together to finish off the building i'm adding a sign for the restaurant name and a chimney on the side i'm not going to go into too much detail here since the drawing method is pretty much the same i chose a bronze color for the chimney since i think it nicely rounds out the colors now we have red yellow green and blue all in one building if you look here on the sign i like to add a little sheen on the edge which is totally optional but i think it gives the drawing a bit more flair and emphasizes the light condition a bit more the last thing i want to add is that feeling of nature taking over to do this i imported a spring map background into the drawing so i can draw vegetation that will match the background color this will be where the restaurant is located in the game i don't want to go too crazy with the nature taking over but there should be some plans climbing up towards the windows and some moss on top of the roof to be honest i'm not even entirely sure how to draw this part but i'll use the same rules we used for drawing the rest of the building we can start with the background color to show where the plants reach i think it kind of works and it gives the climbing plants a bit of that stringy look since it's really flat we'll need to add both light and darker spots to give it some depth like before lighter on the top and darker on the base and the parts where the green touches the building i really think that the edges where the moss meets the building should be dark so it looks like the moss is casting a bit of a shadow i think adding the moss gives the restaurant that cozy and serene ghibli look so i'm pretty happy with the restaurant now obviously if you're just starting out with pixel art you shouldn't try to draw to this level of detail the most important thing is to create clean and crisp drawings for example start with this level of detail just the outline and then with the background colors and determine the faces that get more light and the faces that get less light try to master the basics before attempting anything more complicated once you can draw this version very cleanly you can start adding in some shading and dithering in the next drawing then in the next drawing you can start mixing different colors together to get a more organic look finally once you become comfortable with all of that you can start breaking some of the earlier rules and add your own artistic touch to the pixel art and begin developing your own style it's always important to understand and be able to apply the drawing rules first before you start to break them in the process of making this tutorial i ended up with a ghibli looking art style which is actually unplanned when i started drawing unless if i draw really detailed sketches in the beginning i usually don't know how the drawing will look in the end this is all to say that you don't need to get discouraged if you're midway through a drawing and it doesn't quite meet your expectations you can always tweak and adjust throughout the drawing process and sometimes the result could really surprise you the important thing is to finish the drawing that you start even if it doesn't work out you learn a lot by finishing a drawing and the next time you'll have gained all that extra experience anyways now i really like this style and since i just started the process of redrawing the main town i can incorporate this ghibli feeling into the rest of chef rpg without having to spend too much extra time my indie game chef rpg is an open world chef sim where you explore forage ingredients develop relationships and run your restaurants it's an open-ended game meaning you'll have the freedom to choose what you want to do every day what kind of foods you want to serve and how you want to grow your restaurant empire chef rpg will be coming to kickstarter this november so if you're interested in pre-ordering the game and help fund its development hit that notify me on launch button on the kickstarter page to get notified when it goes live a big thanks to everyone who has already signed up your interest in supporting the game really means a lot to me i also got a lot of great feedback from viewers in the last vlog and now i got a big list of improvements i'm gonna knock down over the course of development so i hope this video has been helpful let me know if you would like to see more tutorials like this i did get some requests in the past on drawing plants and trees though i think i need a bit more practice with vegetation before giving a tutorial for that the trees in my game are still not quite there yet and i'll need to redraw them at some point in the future i've also got an architectural design video coming up it's a really cool video that i've been planning for a few months so make sure to keep an eye out for that video if you're interested in seeing my architecture design process as always thanks for watching and see you next time

Channel: Pixel Architect

Views: 173,845

Keywords: Ghibli, Tutorial, Pixel Art, Architecture, Stardew Valley, IndieGame, Timelapse, Chill, Lofi, Spirited Away, Animal Crossing

Id: 8ri6Uo-fRBw

Length: 17min 14sec (1034 seconds)

Published: Sat Aug 14 2021