Línguas

Top Navigation

Luzes de Neon no Fireworks

junho 12, 2008 from fabiano's blog

Após alguns testes para achar as luzes e as cores certas, cheguei em uma imagem legal para este tutorial. Vou mostrar aqui alguns simples passos para criar efeitos de neon no Fireworks. O processo é fácil, e para felicidade de todos vamos abusar de overlays, color dodges e bastante glows!

As imagens procuramos no sxc.hu, e já estão separadas no arquivo no final do tutorial (neon_files.zip), mas se desejar usar outras fique a vontade.

PASSO 1 - BACKGROUND

Para começar, abra um arquivo de 750 x 500px. Usamos como fundo a imagem "image1.jpg", que você pode baixar nos arquivos anexos no final do tutorial. Após importar a imagem, vamos escurecer um pouco ela, para isso faça um retângulo com Gradiente Radial com a cor #000 nas duas extremidades, no centro diminua a opacidade para 40%. Depois aplique o blend Overlay neste retângulo.

Luzes de neon no Fireworks

PASSO 2 - AJUSTE NO BACKGROUND

Agora vamos somente escurecer um pouco mais uns dos lados da imagem para dar um contraste melhor quando aparecerem os neons. Crie um shape no formato como está na figura na cor #000. Após isso aplique um Feather de 88 e o blend Overlay.

Luzes de neon no Fireworks

PASSO 3 - PLACA DE MADEIRA

Para começa a criar nossa placa onde estará o escrito Abduzeedo, pegue a imagem "image2.jpg" nos arquivos. Importe esta imagem e faça também um retângulo de 375 x 100px como mostra a figura 1. Vamos agora usar o retângulo como máscara, para isso, selecione a imagem da madeira, recorte (CTRL + X), selecione o retângulo e cole dentro (CTRL + SHIFT + V). Feito isto vamos aplicar uma pequena sombra nesse objeto com os valores como mostra a figura 3.

Luzes de neon no Fireworks

PASSO 4 - MOLDURA DA PLACA

O próximo passo será duplicar o layer anterior da placa. Feito isso, neste layer de cima, aplique um Inner Bevel com o tipo Ruffle, e os valores como na figura 1. Aplique agora o blend Overlay nesta madeira. Depois dubplique este layer para conseguirmos um contraste maior desta placa. Veja no final como ficariam nossos layers até agora.

Dica: Se desejar fazer outro tipo de moldura teste os diferentes tipos de bevel e com outros valores também.

Luzes de neon no Fireworks

PASSO 5 - LETREIRO

Neste passo vamos apenas escrever Abduzeedo na placa. Crie um texto com a cor #000. Aplique depois o blend Overlay e um Glow com #FFF de 100% conforme a figura 1 para conseguirmos criar um efeito já de alguma luz saindo de trás das letras.

Luzes de neon no Fireworks

PASSO 6 - LUZES NO LETREIRO

Para aumentarmos um pouco as luzes vamos criar uma "bola de luz" para colocarmos em alguns pontos da madeira. Para isso crie 2 elipses, uma com a cor #000 e outra #FFF. Depois aplique um Feather de 15 em cada uma. Alinhe elas pelos seus centros para ficarem exatamente sobrepostas. Feito isto, agrupe estas 2 elipses e aplique um Color Dodge no grupo.Você verá que isto já faz criar um efeito de luz. Agora só copie algumas vezes esse grupo e posicione em alguns pontos próximo ao texto. Na imagem 5 mostramos onde posicionamos os nossos.

Luzes de neon no Fireworks

PASSO 6 - PINK NEON

Para criar o efeito de Neon, vamos precisar sempre de 2 layers com textos iguais sobrepostos mas vamos aplicar efeitos diferentes em cada layer. Faça então o primeiro texto e já duplique este layer. O layer de cima vamos chamá-lo de Pink 1 e o de baixo Pink 2. Use os valores conforme mostramos nas figuras e veja se consegue este efeito.

As cores usadas em cada layer são as seguintes:

Pink 1: #FFF - Glow #FF33FF

Pink 2: #F5C4D9 - Glow #FF33FF

Luzes de neon no Fireworks

PASSO 7 - YELLOW NEON

Neste passo será o mesmo processo do Passo 6. Vamos ter 2 layers sobrepostos com o mesmo texto (Yellow 1 e Yellow 2). Cuide para sempre usar as cores, o blend correto e valores certos para cada Glow.

As cores usadas em cada layer são as seguintes:

Yellow 1: #FFF - Glow #FFFF00

Yellow 2: #FFFF33 - Glow #FFFF33

Luzes de neon no Fireworks

PASSO 8 - BLUE NEON

O último neon seguirá os mesmos passos. Veja as cores que estes layers devem ter:

Blue 1: #FFF - Glow #00CCFF

Blue 2: #FFF - Glow #0099FF

Veja também no final da figura como ficará a ordem destes layers de todos os neons.

Luzes de neon no Fireworks

RESULTADO FINAL

Finalizado tudo podemos trabalhar com cores diferentes de neons, outros tipos de backgrounds, etc. O que vale é brincar com as ferramentas e tentar chegar em um resultado onde as luzes fiquem suaves e ao mesmo tempo com contraste com o fundo.

Luzes de neon no Fireworks

Download Arquivos

Sobre o autor

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:

More articles about:

Comments and Reactions

Featured Tutorial

Mini-layout inspirado no 9rules design
Mini-layout inspirado no 9rules design
Nesse tutorial vamos mostrar em poucos passos como criar um efeito simples de header e com algumas texturas em vetor do próprio fireworks, tentar compor um pequeno layout buscando referência do 9rules.com. A parte 2 dele, faremos o HTML/CSS para mostrar como se comporta esse layout no browser! PASSO 1 - FUNDO DO HEADER

Try this Wallpaper

Wallpaper da Semana #118 by Abduzeedo
Wallpaper da Semana #118 by Abduzeedo
O wallpaper dessa semana é uma imagem que eu criei para um tutorial para a Digital Arts Magazine. A ideia da imagem foi brincar com patterns e displace, então o design combina um pattern com cubos 3D e uma imagem de uma mulher totalmente desconstruída usando a perspectiva dos cubos. O tutorial estará disponível em breve, mas fiquem ligados que vou postar o arquivo PSD para vocês darem uma olhada em como fiz a peça.

Book Suggestion

Sugestão de Livro - 50 Psychology Classics: Who We Are, How We Think, What We Do
Sugestão de Livro - 50 Psychology Classics: Who We Are, How We Think, What We Do
A sugestão de livro dessa semana é super interessante, especialmente para nós, designers, que precisamos alcançar audiências com nosso trabalho, sempre tentando entender suas necessidades. O livro se chama 50 Psychology Classics: Who We Are, How We Think, What We Do; Insight and Inspiration from 50 Key Books (disponível em inglês).