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.

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.

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

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.

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.

Passo 6 - Adicionar elementos

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

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!

About the author

I'm from Brazil, co-founder of Zee with Fabio. Nowadays I like to play with Fireworks, Photoshop and improve my skills in CSS. If you wanna request some posts, please feel free to contact me or follow on Twitter.

Sponsored Links: