Fonte: abduzeedo.com
A imagem original é esta aqui. Vamos então reconstruir essa imagem e ver como se faz alguns destes efeitos no Fireworks.
PASSO 1
Vamos começar abrindo um novo documento de 1280x1024px. Use como cor de fundo a cor #01245C. Já de início vamos usar as linhas guias para delimitar a área central do conteúdo. Deixei todas a 160px das bordas (esquerda, direita e topo), ficando a área central como 960px.
PASSO 2
Crie um retângulo de 960x850px (ele deve ir até a parte de baixo da página). Aplique um Gradiente Linear de #FFFFFF para #01245C.
PASSO 3
Agora vamos começar a criar o fundo de luz do site. Escolha a Pen tool (P) e faça um shape como o demonstrado na figura. Use Gradiente Radial da cor #FFFFFF para #85CFF2 e com 65% de transparência nessa cor como mostra a figura. Depois disso aplique um Feather de 100% e a textura Swish com 20%. Feito tudo isso agora aplicamos um Color Dodge e deixamos todo esse shape com alpha de 60%.
PASSO 4
Para essa luz ficar com a cor que queremos vamos precisar criar mais 2 shapes. Para o próximo copie este que criamos por primeiro e modifique um pouco os pontos deixando a forma toda um pouco menor para criar efeitos diferentes em todos os locias. Neste shape vamos mudar a textura Swish para 2% e trocar ao invés de Color Dodge, usar Overlay.
PASSO 5
O terceiro shape da luz então vamos criar um novo, um pouco menor q o último. Apliquei a cor #FFFFFF, Feather 100%, Texture 0%, Color Dodge e transparência deste shape de 40%.
PASSO 6
Vamos criar agora a sombra. Ela também será um shape irregular. Faça o formato como mostra a figura, use a cor #01245C e um Feather de 22%.
PASSO 7
Veja como deve ficar a ordem dos layers e o efeito até agora.
PASSO 8
Agora vamos criar a área do topo direito. Para fazer o efeito de blend vamos usar outro comando no fireworks. Antes crie uma linha como na figura e vá em Commands > Creative > Twist and Fade. Brinque um pouco com os valores para tentar achar o melhor resultado, aqui usamos os que sao mostrados na figura.
PASSO 9
Agora copie esse resultdo algumas vezes, coloque uma transparência baixa, de uns 8% e posicione como na imagem. Aplique ainda alguns textos e outros elementos, aqui usamos algumas estrelas. Jogue tudo isto para baixo de todos os layers, assim as linhsa irao brilhar mais por causa do Color Dodge dos outros shapes.
PASSO 10
Para a área do logo criamos um outro shape pra parecer que há uma luz especial saindo ali. Use a cor #FFFFFF e aplique um Feather de 40%. Além disso ainda usamos alguns elementos a mais, como uns circulos somente com contornos e alpha próximo de 5%.
PASSO 11
Agora falta somente a área central. Criamos um forma como mostrada na figura. Aplicamos um gradiente linear da cor #FFFFFF para a #336994. Vamos entao usar o retângulo de baixo como máscara para ele. Basta recortar o shape criado e colar dentro do retângulo (CTRL+SHIFT+V selecionando o retângulo.).
RESULTADO FINAL
Coloque agora alguns elementos por cima de tudo para personalizar seu background.
Veja em tamanho real
Download png
Edição feita por: helioth, 27/11/2008, 00:39.
