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.

Game Center Style in Fireworks

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.

Game Center Style in Fireworks

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.

Game Center Style in Fireworks

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.

Game Center Style in Fireworks

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.

Game Center Style in Fireworks

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.

Game Center Style in Fireworks

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.

Game Center Style in Fireworks

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

Game Center Style in Fireworks

Passo 9

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

Game Center Style in Fireworks

Resultado Final

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

Game Center Style in Fireworks

Game Center Style in Fireworks

Download do Arquivo Fireworks

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

About the author of this post

I'm an architect and designer from Porto Alegre, Brazil. I've been working with design since he got my degree in architecture, a bit odd isnt it? I'm a fan of Fireworks, CSS among other skills. Besides that I'm co-founder of ZEE.