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.

Tutorial: Usando elementos do design gráfico para criar um header no fireworks

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.

Tutorial: Usando elementos do design gráfico para criar um header no fireworks


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.

Tutorial: Usando elementos do design gráfico para criar um header no fireworks


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.

Tutorial: Usando elementos do design gráfico para criar um header no fireworks


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.

Tutorial: Usando elementos do design gráfico para criar um header no fireworks


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.

Tutorial: Usando elementos do design gráfico para criar um header no fireworks


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.

Tutorial: Usando elementos do design gráfico para criar um header no fireworks


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.

Tutorial: Usando elementos do design gráfico para criar um header no fireworks


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!

Tutorial: Usando elementos do design gráfico para criar um header no fireworks

About the author of this post

Abduzeedo is a blog about design. There are all sorts of articles for those who want to look for inspiration. Also you will find very useful tutorials for the most used applications out there, with a special selection of Photoshop Tutorials and Illustrator Tutorials. Of course there are other softwares conteplated like Pixelmator, Fireworks, and web design tutorials.