Formula 1 Sportswheel GUI Mock-ups & Adobe Illustrator Practise

I am now halfway through the development time period for my Formula 1 sportshweel re-design.

At this stage I am required to have started creating some basic mock-ups for my re-design. Below I have posted images showing each mock-up, and explained how the interface elements are positioned.

Mock-up 1 - as you can see, the track is positioned at the bottom of the screen. All other interface elements, the betting chips, the grand stand and the traffic light, are positioned above the track.

Mock-up 2 - this is the only design where the track is placed on the upper portion of the screen. I thought this would be something interesting to try in my design. I positioned the betting chips around the bottom left edge of the track.

Mock-up 3 - in this design I have positioned the track in the centre of the screen. I like this design since the various elements fill most of the screen-space which stops the game screen feeling empty. Visually I like the position of the betting chips, but the spread out nature, might make the game difficult to play.

Mock-up 4 - in this design I decided to try something different. I decided to move all of the interactive elements in my game, betting chips, traffic light play, reset and quit buttons, onto a single horizontal row. I think this will facilitate the making of bets, when players play the game.

Colour Scheme Grid - this is the colour scheme grid I created. I chose red, yellow and orange to be the predominant colours in my game. I feel that these colours complement each other well and lend the game a "warm" feeling.

 

Adobe Illustrator Practise

This Thursday Phil gave us a quick introduction to Adobe Illustrator. The interface of Illustrator is very similar to Photoshop, many of the same tools and options are in both programs.

The biggest difference between the software is Photoshop is a bitmap program, while Illustrator is vector based. Vector based images can be resized infinitely without 'pixelation' occurring and blurring the details of the image. Similarly lines don't become jagged when enlarged.

I spent the majority of Thursdays lesson having a play around with Illustrator since I had never used it before. Andre challenged me to draw a video game character, and eventually I decided to try and draw Nintendo's Kirby character, since design-wise he is fairly simplistic.

Needless to say, drawing Kirby proved to be much more challenging that I'd have imagined. I didn't realise how much effort went into even a simple character design such as Kirby before trying to draw him.

Eventually, with a little bit of help from both Andre and David, I was able to create the below image. Mainly I used the pen tool, combined with ellipses to form Kirby's body, feet and hands. I used the convert anchor point tool to move the various sections of the ellipse to create the shapes I wanted.

Kirby - This is my attempt at Kirby. I'm pretty proud of it. I might edit it sometime to add light and shadow to the image, this should make Kirby look much more 3D.

 

Kirby Reference Image - I based my attempt on this picture of Kirby.

It's not perfect but I think it's pretty good considering I'd never used Illustrator until earlier that day.

Overall it was a very enjoyable lesson. I learnt about the program while doing something that interested me, creating a video game character using various tools in the program. Thanks for reading. :)