In today's tutorial I'm going to show you how to create a user interface for a smart phone quiz game in Adobe Illustrator CS6. I'll be creating a UI similar to a public house chalk board and creating a wood pattern with the Pattern Tool to add a wooden frame. This tutorial is the first part of a Tuts+ cross over, where you can find out how to construct the game over on Mobiletuts+.
Assignment Specifications
Before I began creating the UI, I needed to know what elements were required from the game designer in order to create what they were looking for. I was on a tight deadline so I used previous communications and concept images to help.
The first concept image was created by the game designer, who stated they wanted a background image, buttons, area for a banner/header, area for a question and variations of how the text could look when answering the questions right/wrong.
I was then given a mock up by another designer who had previously agreed on a chalk board theme for the quiz and it was approved by the game designer.
Step 1
So enough chatter, let's get on with it, we have a deadline to make! As I haven't been given specific dimensions for the UI, I've went for a 600 x 800 pixel, RGB, Aligned to Pixel Grid, New Document. Being as it's vector, it will be easy to modify the dimensions later on when the client gets back to me. Until then, let's work on our design and get the bulk of the work out of the way.
Step 2
With the information we've been given, let's draw a mock up with a series of black stroke, white fill shapes created with the Rectangle Tool (M). I know I want a wooden frame, a background, area for the header image and questions. There's also the possibility the designer may wish to have a pop-up and a launch icon. I've decided to go in the direction of a public house style chalk board instead of a school style one. The difference is that public house version will be a bit grittier and more traditional looking.
Step 3
I'm going to start with the most static items first which chances are won't be altered during the game. Areas such as text and buttons will alter but the frame, header and background won't. So I'm going to start with the wooden frame. Draw a long Rectangle (M) with a medium brown fill and then go to Object > Pattern > Make to open the Pattern Options dialogue box. I've not modified the Width and Height of the pattern as I'm going to be drawing directly on top of the area already defined.
Step 4
We're aiming for an organic looking wood pattern with varied thicknesses in the grain. One of my favorite tools for this is the Blob Brush Tool (Shift + B) with a graphics tablet. Start by drawing a knot in the wood by drawing a swirl, then extend the swirl over the area of the pattern. This overlapping end will then appear at the bottom of your pattern area.
Use this end to then curve around your original knot. I've then altered the Tile Type to Brick by Column so the knot is offset to each other.
Step 5
With a similar method of overlapping the grain beyond the pattern boundary, draw further lines in the same color. Add a line which overlaps into the side of the pattern boundary so it links in the other tiles horizontally.
Once you're happy, add a lighter color for further detailing. When you're finished with your pattern, click on Done and it will save it automatically to your Swatches panel.
Step 6
Draw a 600 x 800 Rectangle (M) across the artboard. If you've got Smart Guides enabled (Ctrl + U), you'll find everything in the tutorial easier to create as elements effectively snap into place. As we're not wanting to go beyond the artboard, give the rectangle a 45pt Stroke Weight which is set to Align Stroke to Inside.
While selected, go to Object > Expand to convert the stroke to a filled shape.
Step 7
Using the Line Segment Tool (\), draw diagonal lines across the corners of the frame at 45 degree angles. Select All (Ctrl + A) of the components and use Pathfinder > Divide to split the shape into four.
Step 8
Apply your wooden pattern to the frame. When I've applied it, it's been too large to pick up all the details. To rectify this, I've reduced the scale of only the pattern by going to Object > Transform > Scale and only ticking Transform Pattern. This will decrease the scale of the pattern, not the object.
Step 9
I'm going to work in the Appearance panel now to give a subtle border to the shapes of the frame. Using the dark and light colors in the wooden pattern, I've added two fills below the wooden pattern fill. The first is the dark, the second is the lighter and this is Offset Path by -2pt. I've then set the pattern fill to an Offset Path of -4pt.
The reason I've done this is if you were to apply a stroke to the shapes as is, the shape corners may produce points in the stroke which protrude out of the area of the frame. I'm wanting this to all be contained within the artboard if you remember, so rather than fiddling with mitres and adjusting the angles of the corners, I've opted to create a "fake" stroke by using Offset Paths. It's a handy tip if you're working with those stubborn corners which don't play fair or if you want to apply a "fake" gradient to a stroke without having Adobe Illustrator CS6.
Step 10
I bet you were thinking I was going to leave the top and bottom sections of the frame with the same pattern orientation right? Well as you can scale the pattern without altering the shape, you can also rotate a pattern without rotating the shape. Select the shapes you wish to alter the fill of and go to Object > Transform > Rotate. I've entered in a 90 degree angle and then only ticked Transform Patterns.
Step 11
Back in the Appearance panel, select your side frames and Duplicate Item on the pattern fill. This will maintain the Offset Path values. Then fill with a brown transparent linear gradient. Do the same for the top and bottom of the frame and just alter the angle of the gradient to 90 degrees.
In the Graphic Styles panel, while the top and bottom frame shapes are selected, add the New Graphic Style. Then apply this to the shape which will be used for the header/banner of the UI. Alter the gradient fill then to a radial gradient.
Step 12
I'm going to create the chalk board background now using the Appearance panel and a 100% vector version of an inner glow. You can find out how to do this by checking out the following video tutorial.
Step 13
In the Brushes panel, click onto the drill down menu and go to Open Brush Library > Artistic > Artistic_ChalkCharcoalPencil and use the Chalk brush to draw white strokes across the board set to Blending Mode Screen, Opacity 5%. Once done, Group them together (Ctrl + G).
Step 14
Duplicate the chalk board background and use this with the Chalk strokes group to create a Clipping Mask (Ctrl + 7).
Step 15
I'm going to use a Freeware font for the question and answers on the board. Use the Type Tool (T) to add your text. I've used "Film Cryptic" at font size 48pt.
Step 16
I've added other elements such as a box around the answers, a tick and a line across an answer using the Charcoal - Pencil Art Brush. For the bottom box, I've set the Opacity to 30%.
Step 17
Now to add a subtle drop shadow underneath the header/banner board. Use the Line Segment Tool (\) to draw a horizontal line across the bottom of the board and then duplicate it. Set the bottom stroke to Stroke Weight 18pt and Opacity 0% and the top to 1pt, 100%. Both strokes should use Profile: Width Profile 1 and have a black stroke color.
Step 18
Select both strokes and create a Blend (Ctrl + Alt + B). Then go to Object > Blend > Blend Options and change the Spacing to Specified Steps and value to 10. Click on OK once done. Then change the Blending Mode of the blend to Multiply and move it into place.
Duplicate it and place it underneath the top of the header/banner board.
Step 19
I'm going to add some small rivets to the sides of the board which connect to the frame. This is again using the Appearance panel with the settings below within an even circle using the Ellipse Tool (L).
Step 20
Add an indent into the rivet by drawing a diagonal line across the bolt and setting it to Blending Mode Multiply. Group together the rivet and indent (Ctrl + G) and then duplicate it three times and move into place. To make sure everything is parallel and aligned, use the Align panel.
Step 21
Our game designer has gotten in touch! Oh noes, we have the wrong dimensions for our game and it's not of the same ratio. The dimensions we've been given are 480 x 800 pixels. This isn't a big deal because we're working in vector and it's easy to fix. First thing to do is change our Artboard size to the new dimension and then draw a guide rectangle with the Rectangle Tool (M) of 480 x 800.
Step 22
Duplicate the sides of the frame and make a Compound Path of them (Ctrl + 8). Then use this shape to Pathfinder > Divide from the top and bottom frame and delete the excess shapes.
Move your side elements into place, allowing Smart Guides (Ctrl + U) to help you.
Step 23
For the header board, add the Appearance panel attributes to the Graphic Styles panel and then apply them to a new shape. The chalk board background can be resized using the Free Transform Tool (E) but remember to also change the Clipping Mask group with the Chalk strokes in. I've reduced the font size accordingly to compensate for the new width. This change in dimension took me the whole of 5 minutes, including double checking the preview to make sure I have the correct dimensions.
Step 24
Let's continue with the header/banner. I'm going to play on the public house style and add a brass plate to the design. Draw a Rectangle (M) with it's corners meeting the centers of the rivets. Then draw an even circle (L) on one of the centers of the rivets and duplicate/place for the other rivets. Use Pathfinder > Minus Front to then create the shape of your brass plate.
Step 25
Apply the Graphic Style for the bolts to the plate and then Add New Fill and use a linear gradient with a variety of greys in. It really doesn't matter where you place the sliders for this gradient, as long as you're showing contrast of highlights and shade in the gradient.
I've then modified the attributes to add a brass/golden tone through out.
Step 26
I wasn't happy with the rivet colors, so I went ahead and altered the colors of the rivets using the same colors as the brass plate. Now they match better.
Step 27
Finally, I'm going to add the header/banner text. The game designer wants the title "Android Game" in the banner title, so I'm going to add a quick engraved effect to the text... and this is so easy to do. First add your text, I've used the "Engravers MT" and set it to Blending Mode Multiply. Give it the same brass color as you've used in the plate. Duplicate the text and using your arrow keys on your keyboard, nudge the text two places down and two places right. Then change the Blending Mode to Screen.
Conclusion
You've now created your public house style chalk board UI for a smart phone game! It's now over to Mobiletuts+ for the second part of this tutorial on how to create the actual game. You'll be able to download the graphics required in order to create the game yourself over there. Have fun!
