News Archive for ‘Game Making UI’
So I had the beginning of my UI drawn here for my game. We can see it has a bit of a cartoony feel at the moment due to being made in Flash. Now this is good for a lot of games but this time I wanted to give it a more professional feel because the player will be interacting with the UI a lot in this game. The interesting thing about UI is your designs goals are opposite to other art goals. Normally you want art to stand out and catch your eye. However good UI is designed to blend in and feel like it belongs on the screen without you even noticing it.
To start off with I used a Bevel filter in the middle to make it look like it indented. Along with a black outline around the main box it starts to stand out. I also added in little faded alpha boxes for where the spells will be. Now this gives a good start but lets try brush it up a bit.
Alright I have upgraded it a bit here now by simply darkening the backdrop, this gives it a more UI feel straight away, I also added lighted gradiants up the top. Making the top brighter than the bottom naturally makes something look more 3D which is what we want here.
Something was still feeling off about it. So I decided to change the colour to a more lighter blue from the grey and ahhh bingo, it now looks like it belongs on the screen! it also feels more natural to the eye. I then changed the font and colour of the Mage and Skill Points text boxes which instantly gave it a more appealing look. Another small change is I moved the drop shadows on our boxes in by only 3 pixels. It's a small difference, but the trick to using filters is to use them in tiny amounts in very subtle ways to just turn a normal box into a spiffy UI type box.
And Voila! it now looks much less cartoony and more professional. I may even make small changes to it later.
Heres a look at the early gun shop UI I have made for my latest game. I wanted it to be nice and slick with a dark feel, to try and get away from the usual cartoon style I do for this game since it's more serious. As you can see it's quite simple but came out very nice. Remember when doing UI, the simple it is the better. You want people to be able to navigate around it intuitively. I also decided to make the guns tinted white which really added to the aesthetics. There will be a few more changes to this later like adding more tabs, but at the moment it works well on the red backdrop we have.
Gone for a new type of design style to show the cutscene in Eggys Big Adventure. I always like to mix it up and try new things, this one I quite like. I put all the comic style pictures into frames and the screen scrolls through them as they float in a 3D space. Kind of like viewing an art gallery. The end result came out quite good and unique looking. Quite happy about it.
Heres the new menu drawn up for Eggy's Death Chamber. I quite like it. My favourite is the evil Eggy with his hat and moustache! Mwaha. He's gonna mock you all game. It's amazing what styled fonts can do to a simple screen to really brighten it up. REMEMBER always use custom fonts in menus. They really make it stand out and theres lots to find online.