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.

Game Center Style in Fireworks

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.

Game Center Style in Fireworks

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.

Game Center Style in Fireworks

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.

Game Center Style in Fireworks

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.

Game Center Style in Fireworks

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.

Game Center Style in Fireworks

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.

Game Center Style in Fireworks

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%.

Game Center Style in Fireworks

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!

Game Center Style in Fireworks

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!

Game Center Style in Fireworks

Game Center Style in Fireworks

Download the Fireworks File

Click here to download the Fireworks file used for this tutorial

fabiano's picture
Fabiano Meneghetti

I’m a UX / Web designer and manage business and projects at Zee. Also I love to spend some hours on our main projects Openjobs and as a writer and contributor here on Abduzeedo..

Sponsored Ads


Rawz is our user generated site where anyone can share their work or work with the Abduzeedo community. You can also share what inspires you, always crediting and linking the source properly. In addition to that, the best images get selected and published on the Daily Inspiration series here on Abduzeedo.

Submit image

Designed by Brazilians proudly hosted by (mt) Media Temple