|
This week I have been working on the games GUI. Our game is based on the concept ‘Potato Pirates on the prohibition’ and our player avatar is a plane from the 1920’s. So I have drawn inspiration from the cockpits of various 1920’s biplane and gauges from 1920’s cars.
We already had a GUI, but the artstyle in that GUI did clash with the artstyle of the rest of the game, aswell as it clashed with itself since there were 2 artists working on that one. So, for us to get a more unified artstyle the GUI had to be reworked.
The GUI I’ve made consists of the following parts; background, compass, buttons, button plate, health-o-meter, and the potato-meter. In order for me to explain how I’ve made these I am going to go into closer detail of some of these.
Let’s start with the background. Behind each gauge, meter and/or button on the GUI there is a background. This background looks like deep dark mahogany wood. I chose the mahogany wood because this is what I saw in airplane cockpits at the time. So I started of looking for a nice clear photo of mahogany wood that I could use as a texture. When I found one I cut it and placed it down in its place, but that looked terrible. Having an actual photo inside a game that has a cartoony artsyle did not work. So I chose a brush in dark red, put opacity at 50% and painted it over as many times I needed to to make it fit with the artstyle. So there is an actual photo of mahogany wood lurking underneath a dark red layer with high, but not 100%, opacity. This creates a simple texture that is both detailed and subtle. I also used this trick on the metal plate beneath the buttons.
Now all of the components have a thin metal bar around them. This is of course true to what it actually looked like in 1920’s biplanes. I started of all of these in the same way, just drawing a gray line around it, holding down shift really helped with the straigh lines. When I had put down the line I selected the layer with the magic wand tool, created a new layer and and used a brigther gray brush on the top side of the metal bar and a darker on on the bottom of the bar. This simple way of lighting creates a huge amount of depth, the bars go from being gray and flat to a nice fake 3D.
I also want to mention the compass. The compass is nothing fancy, I’ve used the same highlight trick as the metal bars on the gold, but the gray pointers are special. In the middle of the compass there are 8 pointers pointing outwards, I used a picture as a reference on that one. But I had some trouble with them, because they are so small, I could not use the smallest brush on the smallest size to precisly paint these points. Every brush I used put down atleast 9 pixels of color even do I had it on the smallest size (1px). So I instead used the pen tool, because the pen can actually paint as small as one pixel. Using the pen in this painting really helped me with small details that have before been tedious to correct.
The final thing I want to talk about is the health-o-meter in the middle. It is round and goes from 100 to 0 and shows the players health. It was tricky making the text and the lines since it was round. I made the text by writing all the numbers in a textbox. I then used a warp text function in order to bend it, without it, it would have taken a long time getting the numbers right. I also had a difficult time aligning the lines that goes from the numbers towards the middle. What I used to make it easier was making out the center point of the circle and then shift-clicking from the center to the numbers. I then used a big round eraser and clicked on the center point, shortening the lines perfectly.
I am overall very pleased with the result. I have so far spent 10 hours on this one but I am going to continue after this. The picture included is only how it is going to look in game, the pointers and buttons are going to be seperate sprites so that we can move them about and animate them. I will also add indicators that the health-o-meter and potato-meter are what they are, maybe I will use text, maybe symbols. But it is needed, otherwise the player will not understand what is HP and what is ammo the first time playing.
 
About Sakarias Ståhl
2015 Graphics
|
