Game Center Layout Style in Fireworks

This tutorial was inspired on the new Apple Game Center design. Besides to teach you guys how to make all the effects we will use the whole work spent on that to create a cool wallpaper. So check out the resolution of your computer and let's get started!

Step 1

Here I create a 1440x990 pixels canvas. After that we can start with a rectangle, fill with #34884B. Also check out the texture we need to apply.

Step 2

Now we will create other 2 rectangles. First one fill with #27693F and the last one with #286B3C. Check out the image of each effect and texture applied. Also check out the order of the layers until now.

Step 3

Let's start a red rectangle now. We will make some nodes to model this rectangle, so I have a tip, just ungroup the rectangle, you will convert it to a path. With the pen, create the nodes, and also delete some others as I show in the image below. After that use the Subselection Tool "A" to select some points and model the rectangle until you have a draw like the last on the image.

Step 4

Now we will apply a dirty style on this path using a texture. Just duplicate the path you've just created, place the texture bellow the path and use this path as a mask on the texture. Also apply an overlay 70% on this mask.

Step 5

Now we need to put some light onto this texture. Duplicate again the red path and create an ellipse with light pink color fill. Don't forget to apply a feather on this ellipse. Use this other path you've just duplicated to mask this ellipse.

Step 6

Here you will just create a new path inside the our draw. Duplicate again the red path, go to Modify > Alter Path> Inset Path, and use the values I showed on the image.

Step 7

The part of the top and the bottom of the badge we will draw using the pen tool and adjusting the nodes with the "A" tool. Also we will write something inside that. Here we have another tip, draw a curve line and select this line and the text. Then go to Text > Attach to Path. Maybe you will need to make some adjusts with the "A" tool until you have exactly the shape you want.

Step 8

To draw the bottom and top wood bars, we will use simple rectangles and use the Wood texture on Fireworks. You can adjust the saturation and color of this wood if you want, do it with filters. After that, draw a half height rectangle over the wood with alpha 16%.

Step 9

We're close to the end! Fill the layout with new elements, you can follow the PNG file if you need some inspiration!

Final Result

Also put some round rectangles the the both sides of the layout, like Game Center does, this way you can place your desktop icons over those!

Download the Fireworks File

Click here to download the Fireworks file used for this tutorial