Dae pessoal, esse tutorial é bem especial, pois desde que vi este site pela primeira vez fiquei impressionado com o uso de cores, as formas e a vida própria que parece ter. Estou falando do site do jogo The Beatles Rockband, é simplemente incrível e pensando nisso resolvi recriar ele no Fireworks, mas o nosso próprio, vamos chamar de Abduzeetles Rockband!

Vamos utilizar alguns comandos bem interessantes nesse tutorial, e é bacana sempre testar outros valores, outras cores, outras formas, sempre tentando explorar todo o potemncial de cada comando. Espero que se divirtam com o tutorial e caso ainda não conheçam o site original, visitem: beatlesrockband.com.

1 - Novo Documento

Abra um documento de 1440x1260 pixels, use a cor #293965 como background.

The Abduzeetles Rockband Website in Fireworks

2- Black Elispes

Vamos começar criando o background colorido. Para isso desenhe uma elipse preta como da figura 1. Então aplique o comando Command > Creative > Twist and Fade, use os valores como na figura, mas tente bricar com eles para ver as inúmeras possibilidades que esse comando permite.

The Abduzeetles Rockband Website in Fireworks

3- Trocando Cores das Elipses

Após criado o Twist, precisamos alterar as cores das elipses para termos o efeito que queremos. Aplique tons de cinza alterando de #000000 até #CCCCCC, como na figura. Temos ainda alguns detalhes, em todas as elipses, aplique Inner Shadow de 0 - 30% - 10, e nas duas últimas elpises aplique um pouco de opacidade.

The Abduzeetles Rockband Website in Fireworks

4- Começando as Cores

Posicione esse elemento que temos até agora no topo da área de trabalho. Depois crie uma nova elipse, e aplique um gradiente com as cores como na imagem. Aqui você pode brincar com as mais variadas cores se desejar. Feito isto escale e mova esta nova elipse para ficar exatamente em cima das nossas demais elipses.

The Abduzeetles Rockband Website in Fireworks

5- Overlay

Agora simplesmente aplique um Overlay nesta elipse colorida e uma opacidade de 60%, então duplique esta elipse para deixarmos com ainda mais constraste.

The Abduzeetles Rockband Website in Fireworks

6- Área de conteúdo

Para esta área de conteúdo, iremos utilizar 3 retângulos. O primeiro terá cor #999999, opacidade de 66% e Drop Shadow. O segundo deve ser igual ao primeiro, simplesmente duplique e diminua um pouco a altura e largura. O terceiro terá cor #F5F5F5 e uma textura Vein, repare na figura.

The Abduzeetles Rockband Website in Fireworks

7- Criando as formas coloridas

Os elementos coloridos do header será criados com a ferramenta Pen. Faça um elemento como na figura 1. Aplique textura, cor, Drop Shadow como na Figura 2. E então replique este elemento, ajuste os tamanhos e cores como na Figura 3.

The Abduzeetles Rockband Website in Fireworks

8- Posicionando as formas coloridas

Agrupe estas formas recém criadas. Crie outras como fizemos na figura 1 e então posicione atrás do fundo do conteúdo.

The Abduzeetles Rockband Website in Fireworks

9- Estrelas

Vamos dar um pouco mais de vida para esse background agora. Para isso simplemente crie diversas estrelas e círculos, com cores e opacidades diferentes. Uma dica é aplicar Glow em alguns deles para da um efeito legal.

The Abduzeetles Rockband Website in Fireworks

10- Nuvens

Para as nuvens é simples, faremos elas com círculos e elipses. Crie as formas que desejar com esses elementos, então vá em Modify > Combine Paths > Union. Depois aplique uma borda branca de 10px, começe a brincar com gradientes, texturas e Drop Shadows.

The Abduzeetles Rockband Website in Fireworks

11- Posiconano as Nuvens

Crie uns 3 modelos de nuvens diferentes, posicione elas no header por trás do fundo do conteúdo e também no footer. Crie um elemento como o da figura para o footer também, para utilzar algum texto.

The Abduzeetles Rockband Website in Fireworks

12- Elementos de Conteúdo

Agora para finalizar vamos aplicar os elementos de dentro do conteúdo. Use como fizemos, uma imagem principal, alguns conteúdos de apoio, menu principal e secundário, e claro, o logo, que aqui é no nosso Abduzeetles Rockband!

The Abduzeetles Rockband Website in Fireworks

Resultado Final

The Abduzeetles Rockband Website in Fireworks

About the author of this post

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

Also, you can take a look on my personal website.