Estilo do Layout Game Center em Fireworks

Este tutorial foi inspirado no novo Apple Game Center design e também para mostrar para vocês como criar vários efeitos legais que vamos usar para criar um wallpaper bacana. Então confira a resolução do seu computador e vamos começar!

Passo 1

Abra o Fireworks e crie um 1440x990 pixels canvas. Depois disso faça um retângulo e o preencha com #34884B. Confira também a textura que vamos aplicar.

Passo 2

Agora vamos criar mais 2 retângulos. Preencha o primeiro com #27693F e o segundo com #286B3C. Confira a imagem dos efeitos e texturas aplicados. Confira também a order das layers até agora.

Passo 3

Agora vamos adicionar um retângulo vermelho. Vamos fazer alguns nodes para modelar o retângulo, então tenho uma dica, apenas 'ungroup' o retângulo, você vai convertê-lo em um path. Com a pen tool, crie os nodes e delete alguns como mostrado na imagem abaixo. Depois disso use a Subselection Tool "A" para selecionar alguns pontos e modelar o retângulo até que tenha uma linha na imagem.

Passo 4

Agora vamos aplicar uma textura nesse path. Apenas duplique o path que criamos, coloque a textura abaixo do path e o use para fazer mask na textura. Aplique também overlay 70% na mask.

Passo 5

Agora precisamos colocar luz nessa textura, Duplique novamente o path vermelho e crie uma elipse com luz usando a cor pink. Não esqueça de aplicar feather na elipse. Use o outro path criado para fazer mask da elipse.

Passo 6

Aqui você vai apenas criar um novo path dentro do seu desenho. Duplique novamente o path vermelho e vá até Modify > Alter Path> Inset Path. Use os valores mostrados na imagem.

Passo 7

Vamos desenhar a parte de cima e de baixo do emblema usando a pen tool e ajustando os nodes com a "A" tool. Também vamos escrever algo dentro do emblema. Vá até Text > Attach to Path. Talvez você precise fazer alguns ajustes com a "A" tool para chegar a forma que preferir.

Passo 8

Para desenhar as barras de madeira de cima e de baixo, vamos usar retângulos simples, preenchendo eles com textura de madeira. Você pode ajustar a saturação das cores da madeira se quiser, usando filtros. Depois disso, desenhe um retângulo com a metade da altura sobre a madeira com alpha 16%.

Passo 9

Estamos perto do final! Coloque alguns elementos no layout, você pode seguir o arquivo PNG se precisar de inspiração!

Resultado Final

Coloque alguns retângulos arredondados nas laterais do layout, como no Game Center, assim você pode posicionar seus ícones do desktop neles!

Download do Arquivo Fireworks

Clique aqui para fazer o download do arquivo Fireworks usado nesse tutorial