Tutorial: Usando referências de design gráfico para criar um header no fireworks
Temos publicado nos últimos dias diversas referências de design gráfico com trabalhos sensacionais de vários artistas. Muitos destes designers abusam do uso de luzes, linhas brilhantes, movimentos e cores que nos deixam intrigados.
Alguns sites já estão usando esta estilo de efeitos, inclusive esta versão do Abduzeedo, mas hoje vamos usar o Fireworks para criar o header de um webiste, e mostrar como usar estas referências para inspiração na hora de desenvolver uma interface para web.
REFERÊNCIAS
Com uma breve pesquisa nas nossas últimas inspirações citadas aqui no blog, temos 5 imagens que serão fundamentais como referência para nosso design. São imagens que usam elementos que iremos utilizar também em nosso layout: linhas iluminadas, cores, luzes, pontos de estrelas no céu e elementos que simulem estar em movimento.
Por ordem seguem quem são os artistas de cada imagem: 1 - James White, 2 - Paul-Willock, 3 e 4 - Chuck-Anderson, 5 - Tony-Ariawan.
PASSO 1
Primeiro de tudo, abra um arquivo de 1200px de largura, com fundo #000. Vamos agora baixar esta imagem que encontramos no www.sxc.hu. Posicione ela dentro da área de trabalho e redimensione para ficar parecido como que deixamos.
PASSO 2
Vamos então adicionar um retângulo por cima da imagem com um gradiente colorido. Usamos um padrão que é o Spectrum, escolhemos ainda a opção Overlay para dar na imagem. Tudo que formos fazer agora de elementos estarão por baixo do layer deste gradiente, para todos ficarem no mesmo padrão de cores.
PASSO 3
Agora vamos criar os elementos de cma da imagem, como se fossem as luzes vindas do céu. Para isso crie um retângulo de 360 x 95px. Aplique um Feather de 100% e uma textura de Line Diagonal com 22%. Após isso vamos aplicar um gradiente neste retângulo. Use o Silver, e depois gire o retângulo 45º, para ficar como na figura.
PASSO 4
Posicione o retângulo na parte de cima da nossa imagem. Duplique este layer para conseguirmos aumentar a luz. Depois copie um dos retângulos para o lado e diminua um pouco para dar um efeito de uma luz um pouco menos intensa que está entrando.
PASSO 5
Para criarmos os pontos de estrela no céu vamos usar a ferramenta Brush (B). Selecione ela, na opção de strokes escolha WaterColor > Thin, depois vá em Stroke Options..., ali selecione os valores conforme as figuras, desta forma vamos criar um brush com pontos aleatórios. Feito isto, escolha a cor #FFF e começe a fazer algumas estrelas no céu, vá aumentando e diminuindo a espessura do seu brush para fazer pontos de tamanhos diferentes.
PASSO 6
Nosso próximo passo é criar as linhas ao longo da imagem. Vamos usar aqui a ferramenta Vector Path Tool (P), com ela vamos fazer linhas tipo brush, depois só editamos um pouco os nós. Faça um teste com algumas linhas e depois aplique na imagem. Se precisa use algumas máscaras no final das linhas para dar sensação de fade. Dica: faça movimentos rápidos no momento de fazer as linhas, elas ficarão com menos nós e mais suaves.
PASSO 7
Faça alguns ajustes agora de acabamento da imagem, adicionando alguns elementos de luz, uns fades nas extremidades da imagem e posicione seu logotipo para dar a impressão certa de um fantástico header para website.
RESULTADO FINAL
Aqui está nosso header pronto. Podemos agora ficar brincando com as cores do gradiente principal. com as imagens de baixo, com outras linhas, enfim, vai da criatividade e talvez do tema do site de cada um!
