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