The Abduzeetles Rockband Website em Fireworks
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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!
Resultado Final
