Algum tempo atrás Fabio escreveu um tutorial ensinando como criar uma imagem inspirada no trabalho de Andy Gilmore. Eu gostei muito desta técnica e decidi que seria legal fazer algo parecido no Fireworks também.

Neste tutorial eu irei mostrar como criar um efeito bacana para banners, e nós iremos usar esta técnica para o design do banner do Abduzeedo Job Board. Nós lançamos Abduzeedo Job Board alguns dias atráse agora começamos a promover. A idéia deste banner é exatamente essa: demonstrar porque você deve postar em nosso Job Board e também o novo preço. Espero que você goste do tutorial. E fique a vontade para enviar sugestões para outros.

Passo 1

Primeiro abra um novo arquivo com a dimensão de 480 x 180px e preencha com #000 de background.

Abduzeedo Job Board banner in Fireworks

Passo 2 - Criando a primeira elipse

Agora nós iremos criar os elementos principais do tutorial, uma elipse. Crie uma simples elipse, e aplique um Linear Gradient da cor #003734 para #000. Note que nós temos uma borda de 2px com algum estilo. A cor é #098191, o tipo é Graphite, possui Grain Texture de 15%. Nós ainda vamos aplica um Noise Filter com valor 2.

Abduzeedo Job Board banner in Fireworks

Passo 3 - Grupo de Elipse

Nós já criamos a primeira elipse, agora vamos desenhar as outras. Nós iremos simplesmente duplicar e trcar as cores e sombras de cada uma. Veja na lista abaixo como cada uma deverá ser:
Elipse 1- Gradient: #125A5F to #000 - Border: #33CCCC - Shadow: 28, 100%, 35 Elipse 2- Gradient: #025F4E to #000 - Border: #33CCCC - Shadow: 27, 100%, 32 Elipse 3- Gradient: #2C5777 to #000 - Border: #0099FF - Shadow: 26, 100%, 32 Elipse 4- Solid #000 - Feather: 85 - Shadow: 30, 100%, 30

Abduzeedo Job Board banner in Fireworks

Passo 4 - Começando os efeitos

Estamos quase lá! Agora você deve agrupar as 5 elipses. Apenas duplique este grupo e no layer de cima aplique um Color Dodge. Veja na imagem como os layers estão até este passo.

Abduzeedo Job Board banner in Fireworks

Passo 5 - Espelhando

Neste passo você precisará selecionar um dos grupos, dulique, e vá em Modify > Transform > Flip Horizontal. Depois aplique Color Dodge para este novo grupo. Agora para a última parte, duplique o grupo que você recém espelhou e troque o filtro para Screen. Olhe na imagem e repare em todos os grupos e seus respectivos filtros.

Abduzeedo Job Board banner in Fireworks

Passo 6 - Adicionar elementos

Ok, matamos essa!O efeito foi criado. Agora insira alguns elementos, seu logo, algum texto, etc.

Abduzeedo Job Board banner in Fireworks

Resultado Final

O efeito é bem simples, não é? E com ele podemos criar imagens muito legais. Escolha a fonte certa e preste ateção para posicionar os textos relacionando com os outros elementos, isto é a chave para você criar belos layouts.
Agora mostre pra nós os seus experimentos!

Abduzeedo Job Board banner in 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.