In one of the lessons we used a blockout of a Western Saloon which we put into Photoshop and then started to draw over, this is because it’s another way of creating ideas generation and concept art as it allows us to copy over something which has already been made which can help us add more detail into the art. After we got the outline done we started to add in some colour so we could see how it would look with some varied colours.
We did an Isometric Art tutorial in which we got an image off of google drive and then downloaded and added in to Photoshop. For this exercise we started off by creating our own layout of the picture and then started to add in some of the lines that would make up the entire picture. After we got some of the lines in we started to add colour so it would look more like the picture, I didn’t do that yet as I was going to try and create the whole image first and then add colour as I felt that would’ve looked better.
I created this Cactus image by using a moodboard that I made on Pinterest as a reference. I found a lot of pictures depicting various Cacti so that I would be able to use all these images together to create some unique Cacti of my own. This is just the first rough sketch I did and I will be creating even more to show that there can be various types instead of just tall and I will also be adding in colour instead of shading them in as I feel it will make them look better.
In this image I have created a safe/vault door which I made by using reference images off of a moodboard that I made. By using a moodboard filled with images it allows me to use multiple images and create a unique safe/vault door design that is my own. This is the first design I made but I am creating more with different colours and different designs so that I can show a mix of ideas that will then be used to create my final design.
This is rough sketch of a bank where I found the image on another one of my moodboards. Since I am making a bank for my final design I thought I should create a couple of sketches to show that I have thought about the different ways that it could look, and when I start getting further into the design process I will be using different colours and different shades of colours to make it look better and more unique.
In this set of images we can see the development process of my drawing of a cactus. I started off with the basic outline of a plant pot and also the cactus shape while using a Pinterest moodboard as a reference for the cactus shape. From this I then chose a couple of colours that I thought would work well for the cactus and managed to find a couple of greens which I thought looked really good and then proceeded to colour it in, after I did the main colour I got a darker green and added some lines to try and split the colour up a little bit to make it look different. I then started to colour in the plant pot, I decided to go for a brown/orange colour as I wanted it to look a bit like a clay pot as this would look good, after finding this colour I coloured it in and then started to work on the extra details that I wanted to add. Finally I decided to add cracks to the plant pot and also add spikes to the cactus, I wanted to add cracks to the plant pot to make it seem old but also give it a unique design and I added spikes to make it look more like a cactus, the grey circles on the cactus are also depicting spikes hence why they are there.
This set of images show another cactus that I designed and sketched, I wanted to create a second cactus sketch as I wanted a variation of cactus types and not just 1. To create this cactus I started off by drawing the outline for the plant pot and the cactus, to make it look better I was also using a Pinterest moodboard for reference images for the cactus shape. I then chose a green colour which I though would work well with a cactus and then started colouring it in. After colouring the cactus in I decided I wanted to try and add some shading/highlighting to it so I got a lighter shade of the green I was using and a darker shade of it and tried to make it look like light was coming in from the top left. After adding the shading and highlighting I then added some streaks across the cactus, I did this by turning the opacity down on that layer which made the colour seem darker than it was, also by doing this I felt I gave the cactus a more natural look. Following this I then started to colour in the plant pot, I wanted to make it look good so I went for the more common type of colour which was a light brown/orange. Finally I started to add more detail to the cactus and also the plant pot, I decided to add cracks to the plant pot, this is because it makes the plant pot look more aged and also gives it a unique look. I then also started adding spikes to the cactus, I did this by using a grey and drawing the lines on, I also added some grey dots on to the main body of the cactus to make it seem as if there were spikes there.
In the set of images below we can see the process of how I created a cactus in Pixel Art, I started with a plant pot and then worked my way towards a cactus with added detail. After creating the plant pot I then went on to outline the cactus and then focused on colouring the pot. To colour the pot in a unique way I first created a colour palette in which I found a few colours which I felt would work nicely to create a unique design. Following this I then added the colour to the pot and made a weird design which looked good. After making this design it was time to colour in the cactus, for this I created another colour palette which used green colours of different shades so I could create a really good looking cactus. I started off by using the mid green colour for the entire cactus and then added the lighter and darker colours to it to show how the light would cast on to it. Finally after adding the shading colours I added some extra detail, to do this I got a grey colour and added some dots to make it seem like there would be spikes there.
In this set of images we can see another cactus that I decided to create, with this cactus I decided to make it short and round as it shows that I thought about more than 1 idea of a cactus and also that they come in different shapes and sizes.
In the images below we can see the process of how I started to create my bank in an Isometric grid, to start with I created the grid which would be used for the design of the bank I was going to create. Following this I then started to layout the bank with some of the essential items needed for it, I created the bank sign at the top of the building, I added a door on the right hand side and a window next to it and then on the other side I added the cashier desk.
In this next set of images I have started to add more detail and colour to the design to make it look better. I started off by colouring in the window, the door and the cashier desk along with the left hand side of the building. I did it this way so I can get a rough idea of how the building will look with a bit of colour added to it. I also decided to colour in the bank sign and add colour to the letters to make it look better. After colouring in the left hand side of the building I used the same colour to finish off the right hand side and also the top and then I got a darker colour and tried to give the wood a texture to make it look even better. After texturing the wood I then made another layer and made a moneybag, I turned the opacity down to make it look better and I feel this has worked really well with the design. I don’t like the bank sign very much so I am going to change the background colour and also the colour of the letters as I feel this will make it better.
In this set of images I have used my other Isometric design and made it better by using straight lines to make it look cleaner and I feel that this version looks much better than before. I have also changed the way I made the sign as the last one looked terrible and didn’t really suit the design. With my current sign I made a rectangle box and got the same colour as the sign background and then made the name and applied a different font to it to give it a Wild West feel. I also choose appropriate colours that would also work with the time and also what the building is, since it is a bank I chose a darker yellow that is nearing gold because I feel that represents money and i’m making a bank. I have also decided to try and improve the texturing on this design, I did this by selecting the same colour, making it a little bit brighter and then lowering the opacity down to 50%, this way the colour doesn’t show up as brightly and can still be seen but looks more like a texture on the wood, I feel this works well and makes the design look better.
In this series of images we can see the development process of creating a moneybag which I could use for my final product. I started off by creating a rough shape for the moneybag which was a circle but also included the handle at the top instead of making a full circle and then adding it in which would’ve worked as well. After this I then added the little rope to the top of the bag which would ensure it would stay shut, I felt like this was a good idea and feel it works well with the design. Following this I then started to add colour to the design as I wanted to see how it would look coloured in, I started by selecting a light cream colour as I felt this would be a good colour to use, I coloured a small part of the bag to see and then altered the colour and opacity a bit so it would look better, I then fully coloured in the bag and then filled in the rope and added some details to make it seem more like a rope. Finally I added the dollar sign onto the front of the bag and then used a light green colour to finish it off, for this part I could’ve used either a green or gold colour as both would’ve looked good as each of those colours can represent money.
In this set of images we can see the process of how I created a sketch of the inside of a bank and how I added colour to it. I used a reference from on of my Pinterest moodboards to help me with the design and then changed it to make it to make it my own. I started off by creating a rough outline using a light grey colour and then slowly using my drawing tablet to draw the lines on, I drew the lines slowly as I didn’t want to mess up my lines a lot but I did make a few so it would make the next part easier. The second picture is where I went over the rough outline this time using a black to make it more prominent and easier to see when I went to add colour to the design. Finally I started adding colour to the design, I was using a light brown for the majority of the design as it is mostly wood and I thought it looked good, I also got a dark brown to add some texture to certain parts of the design for example the bottom left box and at the top above the teller sign, I then got a gold colour and added some bars going across vertically and horizontally to make the design look even better, finally I added the teller sign as I felt it looked good on the reference image and I wanted to use it on mine.
In this series of images I designed the outside of a bank and was using a reference image off of Pinterest. I started off by creating the outline and adding all of the items that I wanted to feature in the scene. I sketched out the rough outline of the building and then added a cactus to the right hand side and a moneybag on the bottom left of the bank under the window, I then added a bank sign as well so people know what it is. I then went over the design in black to make it look better and also to show that it was going into the next designing phase. From this I got rid of the moneybag and bank sign for now as if I had gone over them in the black it would’ve made the design look really messy and I didn’t want that to happen so I removed them. After I had done this I then went onto the colouring stage where I got a dark brown and started to colour in the majority of the design I then got a light brown and finished off the main part of the building as I had to colour the slats in. I then got a green colour and coloured in the bars on the window and the outside edge of the door, I then got a darker colour green and coloured in the cactus while also adding a lighter and darker shade of the green onto it to show where the light would be coming from. Also I got a grey colour and added some spikes to it so people know exactly what it is. I then got a yellow and added this to where it needed to go which was the door, part of the bar on the window and also some smaller slats at the top of the building. Finally to finish it off I made a text box and wrote the word bank on it, I then changed the colour to a gold colour and also changed the spacing so it looked better, I feel this worked well and the design overall looks good.
Final Design Layouts
Layout #1
In this collection of images I have included the layout design that I made in Unreal as well as the rough outline and the final outline of the layout design that I might use for my final idea. To make the layout design I started off by creating a larger floor platform and then adding the walls in by creating rectangles them and adjusting them to how I wanted them to look. I then got a subtracting block and added it in the wall to make the window and then also to the next wall to make it look like double doors. I then got a box and made it more rectangular which I then used for the desk and then got another subtracting block which made the middle of the desk for the main counter. I then got a sphere and added a clock behind the desk as I wanted to give the design more character. Finally I got another box and made it a rectangle which made the safe and then got another sphere which I adjusted the tessellation on to make it less round and made it seem as if the moneybag had items inside of it.
The second image is after I took a screenshot of the level design from Unreal, I then placed the image into Photoshop and turned the opacity for that layer down, this was so I could see the rough outline better as it wouldn’t clash with the level design. I started off by creating the outside lines of the level design so I had the main shapes of the design and then started to work on the inside of the design. I then drew the outline around the cactus and made it look a bit more round so it took on the form of a cactus. Following this I then drew the outline around the safe and the moneybag and made sure the moneybag looked a bit more round just to make it seem more realistic and also to give the design more character. Finally I outline the desk and clock, I made the desk overlap the clock as to start with I had placed the clock too low down, in the final design I could move the clock higher so it doesn’t need to be overlapped or I can leave it like this as it still looks good.
The final image is of the final outline that I made, I turned the opacity down on the rough outline, this way I would clearly be able to see the new lines I was making. I outlined the walls and floor first and then outline the window and cactus, this was relatively easy and it also made the design look a lot better. I then outlined the safe and the moneybag, I also tried to make the moneybag a bit more rounder in this iteration of my design as I wanted it to look good. I then outlines the desk and the clock and kept the desk overlapping the clock as I feel this works well.
These 2 images are the finished product of my first design idea, in the first image I have added a multitude of colours to the design and tried to make it look good by giving every item a different shade or a different colour entirely as this will make it unique. I started off by getting a dark brown and painting the walls, this was just to make it easier as it was going to provide some guidelines for the rest of my design. I then coloured in the floor and the doors, I used the same colour for these as I felt it was a nice shade of brown and would give the image more character. After this I then coloured in the cactus and gave it a nice blue background so it looks like the sky behind it. I also decided to get a dark brown and give the window a border and then get a lighter shade and go in between the cactus and the window to make the design look nicer. Following on from this I coloured in the desk with a nice light shade of brown that I felt would help brighten up the design and overall improve the look of the design. I also got a darker shade of this brown and went around the edges so it looked like the outline of the desk, I did this as I wanted to make the desk look really good as it was a pivotal part of the design. Finally I got on to colouring in the safe and the moneybag, these were two of my most important assets so it was crucial that these were coloured in correctly and to esnure that they looked good.
After I had coloured in the design I then made a new layer that I was going to be using for the texturing of the design. To start with I lowered the opacity of the layer down to about 30% as this was low enough to be able to see the difference in the colours of the texture and the wood. I then started using long and short strokes and changing the angle that they went in at so I could try and get some realistic textures going on, I feel that this worked well for parts of the design but not all of it purely because I forgot to make it look like the walls and floor were planks of wood instead of one big design. Looking back on the texturing of this design it isn’t great but that’s because I forgot to add the lines of the planks of wood that would be on the floor and on the walls so when I make my final product I will ensure that these are added to make sure my texturing is imporved.
Layout #2
In the images above we can see the initial process of the creation of my second design, I started off by transferring my level from UE4 into Photoshop. After transferring the image into Photoshop I then created a new layer and this would serve as my rough outline layer. I started off by turning the opacity down on the layer with the image as this would make it easier to be able to get the outline right. I then started to outline the walls and floor as this was the basis for my design and would make outlining the rest of the level a lot easier. Following this I then went over the desk and safe to ensure that there were visible as they were quite hidden without the outline. I then went over each moneybag and changed their geometry a bit as I wanted them to be a bit more round as this looked better to me, then I outlined the clock and the cactus as these were two of the smaller assets of the designs and then to finish off the rough outline I went over the barrel and added some size to it in the middle to make it more barrel like.
After the rough outline I then went on to do the full outline and I started off by turning the opacity down on my rough outline layer as this would make it easier to go over and make it correct. I then went over the walls and floor as I wanted to get these done first, I then focused on the desk and safe as I wanted to make these two assets show first seeing as they are the most important ones and they are also the biggest assets in the design. Following this I then went over the moneybags and clock as these were the round designs and I felt it was easier to get them all done at the same time. I then went over the cactus and barrel as these were the last two assets for me to go over.
Here is the images of my finished design, the first one is the coloured version and the second image is with textures on it. For the colouring process I started off by getting a nice looking shade of brown and then went over the left and back walls, I then got a lighter shaden of the same brown colour and went over the right hand side wall, this is becuase we are saying the outside of it and I wanted it to seem as if it’s being hit by sunlight as this adds character to the design and makes it look a lot better as well. I then got a darker brown and went over the outlines of the desk so I would be able to make the colouring in process a bit easier, I then got a lighter shade and fully coloured in the desk, I continued to use this brown later on as I coloured in the safe and then used the brown to add the dial and the handle on the door. I used a very light yellow colour for the moneybags as it was a close colour to beige and looked good so I continued to use it for all of the moneybags, I then made this colour a bit darker and used it to colour in the clock. Following this I then got a bright yellow/gold colour and added the hands to the clock and a little rope around the neck of the moneysbags to give them some more colour and also make them brighter, I also added the dollar signs as this point as I wanted the moneybags to look good and I feel by adding these small details it worked well. Finally I had to colour in the cactus, I got a blue and added the sky and then got a nice bright green and coloured in the cactus, I then got a grey and added some spikes as I felt this was a good idea.
After the colouring process I then decided to add some textures to the design to try and make it look even better. To do this I created a new layer and then lowered the opacity of that layer down to about 30% as this would make the colours show up better. For the walls I selected the colour I used for them then made it a bit brighter as this was the best way for me to create the textures. I used long and short strokes and went in multiple directions as I wanted to make the wood look realistic. After looking back at this approach I feel I could have done it better, this would have been done at the beginning as trying to texture the wood as a giant block isn’t a smart idea, I should have made them all planks and then textured the design.
Final Idea
For my final idea I am going to be using layout number 1 this is because I like the look of it and feel it is the best design I created however I am going to incorporate a couple of the object from layout number 2 into, this would be the barrel as I feel like this was a good asset to add and I will also be adding more moneybags as I feel these a re a nice little addition to the level design. I will be creating another design in UE4 which will show the final layout, I will then create a couple of more designs with some more textures and then use one of them for the final idea.
Stewarts' Games Development Blog 