VROOM – Video game interfaces! – Task 5: Final Mock-Ups: Computerized Designs

We had to design and create a heads up display for a racing game. I have already done all that I need to on the sketch/development part of this coursework to create a speedometer and three logos for all the teams.

Speedometer Finalization: Computer designs

I had decided on doing the ‘all-in-one’ design as it looks very neat, professional and displays information well. I have also been keen of my other circular speedometer shape design as well. I will show now how I created the final speedometer step-by-step.

Final Speedometer 1 Ver 01

  • I first started with a circle and added a black-to-white gradient colour to it. To get the prongs equal distant apart, I did mathematics to get 41 white lines in an arc around the circle. Using the maths, I used the ‘polar grid tool’ and created a grid with 100 ‘radial dividers’. I deleted the 59 other lines that I weren’t using and used the surviving shape as guidelines to get even lines around my circle. I gave the lines varying lengths and thicknesses to leave with 11 main big lines to annotate with numbers. I created a base in the centre of the speedometer to act as a needle rest and gave it a red border.

Final Speedometer 1 Ver 02

  • I created a grey arc all the way round the speedometer using many shapes and minus-ing them with the ‘pathfinder’ tool leaving me with an almost accurate grey border around the dials. I didn’t like the round caps that were on all the lines of the dial so I turned them to having no cap on the end of the line. Last of all, I added some text (found in all car dials) to the circle. (RPM, x1,000)

Final Speedometer 1 Ver 03

  • I added 11 numbers from ‘0’ to ‘11’ to the 11 main white lines. I then added more text (MPH) to the circle, underneath the needle rest. This will be roughly where the current speed will be put. Next, I created a red little strip to the end of the dial to simulate to shift up, otherwise you will stall. I then tried to theme everything with a blue colour.

Final Speedometer 1 Ver 04

  • I added two boxes, one under the MPH text and another above the needle rest. The smaller one will show the current gear (and when to gear up/down) and the bigger box will be for the current speed. Also added a basic needle that displayed the revs.

Final Speedometer 1 Ver 05 Blue & Green

  • The final picture was an addition of a boost bar to the left of the current circle. It extended out of the main circle. The bar was given a blue trim (to add onto the colour scheme of the speedometer) and two red bars. The brighter one simulated the boost remaining while the darker one was simulating the depleted boost. I added a gear and the speed onto the speedometer to complete the look. I also took another picture to simulate the game mechanics of customisation. Going to a place to spend in-game money to change your boring old speedometer.

Final Speedometer 1 Ver 05 Blue & Green     Final Speedometer 1 Ver 05 Red & Orange

Logo Finalization: Computer designs

The logo designs were straightforward as I came up a neat backstory for each team at the start and stuck with it. I might have developed more logos for the UI, but this was adequate enough. I will show now how I created each of the logos for the different difficulty. Starting with the ‘easiest’ one first.

‘Easy Mode’ Logo

Easy Difficulty Logo Ver 1

  • I used the shape of a helmet as a guideline when drawing the thick ‘G’ like line that acts as the size of the helmet. Then I created a black helmet visor that acts as the straight line of the ‘G’. The circle around the logo is the size requirement to fit behind the speedometer.

Easy Difficulty Logo Ver 2

  • I added three small stripes on the left side and half of a dividing line just below the G-helmet.

Easy Difficulty Logo Ver 3

  • The rest of the dividing line was added as well an impression on the face of the helmet.

Easy Difficulty Logo Ver 4 (Final B&W)

  • I added a ‘flame decal’ to the helmet as it was looking too bare. I used the ‘pen tool’ to draw around it and adjusted with the ‘direct selection tool’ or the white cursor tool to re adjust any points that were off the guide that I was using. This is the final Black & White version that I could use behind the speedometer.

Easy Difficulty Logo Ver 5

  • I added some helmet colour to my design. The Trim at the top of the helmet goes from yellow-to-red. The main helmet goes from dark-blue-to-white. The decal has the same yellow-to-red gradient used in the helmet trim.

Easy Difficulty Logo Ver 6 (Final Colour)

  • I coloured the background around the helmet so it looks like an arcing gradient from dark-blue-to-white. The background gradient messed the helmet gradients up so I had to recolour the gradient to dark-blue-to-light-blue. The helmet trim was adjusted to so it wouldn’t mess the background colour up or leave a noticeable colour difference.

‘Medium Mode’ Logo

Meduim Difficulty Logo Ver 1

  • I didn’t want to go for a realistic looking tiger, (due to me not simply having the patience and the art skill to make it look good) so I instead made a cartoonish looking tiger instead. I added face features and ears to create a very unimpressed looking dog.

Meduim Difficulty Logo Ver 2

  • I coloured in the tiger’s face (with a gradient) and added eye shadow to its eyes. I introduced some lines to make it look more stripy but instead made it look like face paint.

Meduim Difficulty Logo Ver 3

  • I enlarged the tiger and added some face paint on the cheeks of the tiger. I coloured it accordingly and also coloured in the ears as well.

Meduim Difficulty Logo Ver 4 (Final Colour)

  • I brightened up the tiger face and added red lines to simulate danger. This is the final coloured logo design. I call it the rare-spotted DerpyTiger.

Meduim Difficulty Logo Ver 5 (Final B&W)

  • I made a special black and white design if a colour one looks off when put under the speedometer.

‘Hard Mode’ Logo

Hard Difficulty Logo Ver 1

  • I created the initial shape of the skull using a guideline, many shapes and the ‘pathfinder’ tool to merge all the lines into a solid skull shape.

Hard Difficulty Logo Ver 2

  • Added the bone line near your eyes. I also added the empty holes where the eye is supposed to be located.

Hard Difficulty Logo Ver 3

  • Added the jawline and the shape of the bone in your nose.

Hard Difficulty Logo Ver 4

  • I individually created and repositioned these teeth to make it look ascetically pleasing. To make the teeth, I made a circle with the ‘ellipse’ tool and used the ‘direct selection tool’ to curve it to create teeth that I was happy with.

Hard Difficulty Logo Ver 5

  • I repositioned the skull in the centre of the circle and created a machete that looks like it is driving right through the skull. I didn’t add blood droplets as it is unnecessary to the logo and would add gore that didn’t need to be there in the first place.

Hard Difficulty Logo Ver 6

  • On the opposite side of the machete, I created the barrel of a machinegun that is going through the skull.

Hard Difficulty Logo Ver 7 (Final B&W)

  • I added the rest of the machinegun, adding all the detail and impressions of the gun as well. This is the final black & white one to act as a backup.

Hard Difficulty Logo Ver 8 (Final Colour)

  • I coloured the skull, machete and machinegun in real life colours. I used some gradients that came built-in to simulate wood grain patterns. Also added gradients in the eye, nose and background of the work.

Speedometer & Logos.png


One thought on “VROOM – Video game interfaces! – Task 5: Final Mock-Ups: Computerized Designs

  1. Howdy! This blog post couldn’t be written any better!
    Going through this article reminds me of my previous roommate!
    He always kept preaching about this. I’ll forward this post
    to him. Fairly certain he’ll have a very good read. Many
    thanks for sharing! http://www.yahoo.net


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s