Tutorial: Usando referências de design gráfico para criar um cabeçalho no fireworks

Um Tutorial muito interessante do Fireworks

 

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

Fonte: Abduzeedo

Comentários

Bom dia gostaria de lhe parabenizar pelo otimo blog as informações são de primeira eu já estou te seguindo peço que me siga também segue o link do meu blog que é um espaço para compartilhamento de informações sobre design, arquivos, marketing em geral:
http://maisword.blogspot.com.br/
Muito obrigado!

Postagens mais visitadas deste blog

70 mais belos retratos femininos em CG

Criar Fumaça no Photoshop em 10 passos

Criando Efeito de Pontilhado em Foto