tutorial

10 Photoshop Masters

zee — Thu, 03 Jan 2008 04:58:41 -0600

Photoshop é hoje um aplicativo que nos proporciona uma qualidade de trabalho fantástica. Há pessoas que realmente sabem extrapolar essa ferramenta e produzir imagens simplesmente extraordinárias. E são exatamente essas pessoas, que têm inspirado Abduzeedo em seu trabalho, que listamos neste post.

1 - Adhemas Batista (Brazil) - http://www.adhemas.com/

2 - Bert Monroy (USA) - http://www.bertmonroy.com/

3 - Derel Lea (Canada) - http://www.dereklea.com/

4 - Eduardo Recife (Brazil) - http://www.eduardorecife.com/

5 - Ian Keltie (U.K) - http://www.iankeltie.com/

6 - Joan Charmant - http://www.joancharmant.com/

7 - Joshua M. Smith - http://www.hydro74.com/

8 - Justin M. Maller (Australia) - http://www.superlover.com.au/

9 - Nik Ainley (U.K) - http://www.shinybinary.com/

10 - Scott Hansen (USA) - http://www.iso50.com/

Contornos de luz no Fireworks

fabiano — Fri, 09 May 2008 10:50:41 -0500

Nosso desafio neste tutorial vai ser criar o mesmo efeito de luz, ou ao menos semelhante, no Fireworks ao criado no Photoshop no outro tutorial. Demorei um pouco para achar os efeitos certos. Fiquei testando difersas maneiras, e acredtio que esta seja a mais simples e que consigo deixar praticamente igual ao que fizemos no Photoshop.

PASSO 1

Abra um documento novo. Usamos como base esta imagem.

PASSO 2

Depois pegamos a imagem de "4 rapazes na Abbey Road", mas voce pode pegar a imagem que desejar para fazer os contornos.

PASSO 3

O que vamos fazer agora é o contorno deles. Use a ferramenta Pen (P). Pode usar a cor #FFF como stroke e sem preenchimento.

PASSO 4

Agora precisamos dar personalizar essse nosso contorno. Selecione todas as linhas que fez, vá no tipo de contorno, exolha a opção Stroke Options.... Use os valores que estão na imagem. Depois clique em Advanced. Irá abrir outra janela onde precisamos setar outros valores. Dê uma brincada para ver como vai sendo modificado na tela. Depois agrupe todos os desenhos

PASSO 5

Copie este grupo mais 3 vezes, de forma a ficarmos com 4 layers iguais. Nos dois de cima então vamos aplicar um Gaussian Blur com valor 2.0. Depois selecione os 4 layers e escolha o filtro Overlay

PASSO 6

A parte principal está pronta, vamos só fazer a faixa onde eles estão atravessando. Crie um retângulo (ele já irá pegar as mesmas características de contorno que tínhamos criado por último). Copie este retângulo algumas vezes para o lado e alinhe os espaçamentos. Depois agrupe todos os retângulos.

PASSO 7

Use a ferramenta Distort para deixar no angulo certo da rua, e ajuste o tamanho total do grupo até ficar na posição certa. Depois aplique um Gaussian Blur com valor 1.3 e escolha o filtro Overlay. Agora duplique esse layer para aumentar o contraste e o efeito de luz.

RESULTADO FINAL

Criando a interface do iPhone no Fireworks

fabiano — Wed, 16 Apr 2008 18:54:20 -0500

Você com certeza ou tem um ou quer ter um desses. É um belo aparelho, mas a interface do iPhone também é algo que nos dá prazer de navegar. Pensando nisso que vamos nesse tutorial mostrar como fazer esta interface no Fireworks.

Procurei detalhar bem nesse tutorial como fazer esse visual glossy e talvez em um outro eu mostro como podemos criar o próprio aparelho no Fireworks, mas isso ainda estou pensando se vocês irão querer...Vamos então ao que interessa!

PASSO 1

Para começar então baixe as 2 imagens que servirão de base.
Imagem do iPhone
Imagem do background colorido

Crie um documento novo de 800x800px e fundo preto, e importe as 2 imagens.

PASSO 2

Agora coloque o layer da imagem dos peixes para traz do iPhone e reduza a imagem, tente enquadre até ficar parecido com a imagem abaixo.
Dica: vamos usar a imagem do telefone com a parte central recortada como layer acima de todos os outros, desta forma podemos ter mais liberdade para trabalhar com as formas por trás dele!

PASSO 3

Vamos criar um retangulo de 255 x 380px, ele servirá para mascarar a imagem de fundo. Agora selecione a imagem, recorte e cole dentro do retângulo (CTRL+SHIFT+V). Agora posicione para ficar nos limites do visor e por trás.

PASSO 4

Para criar a interface, vamos usar basicamente retângulos e aplicar alguns gradientes e trasnparências. O processo é simples, e devem haver diversas maneiras de criarmos esses efeitos. Vamos começar entao criando um retângulo na parte superior de 255 x 20px, na cor #000 e use como transparência 55%. Copie este retângulo, mova 20px para baixo e coloque na altura 76px. Crie depois mais uma linha abaixo, de 1px na cor #000 e com uma trasnparência de 50%.

PASSO 5

Agora vamos criar o efeito de relevo. Crie um retângulo de 255 x 38px na cor #FFF e posicione no topo do último retângulo criado como mostra a figura. Agora aplique um gradiente linear do #FFF para o #FFF nele e use as transparências no próprio gradiente como mostramos nos detalhes (note q criarmos um ponto a mais de trasnparência para dar o efeito de feather somente na parte de baixo).

PASSO 6

Ja temos a parte superior pronta, agora copie os dois retângulos criados por último para a parte de baixo. E crie outra linha de #000 e 50% de trasnparência acima deles, da mesma forma q fizemos antes.

PASSO 7

Vamos fazer agora o botao de "slide to unlock". Crie um retângulo de 215 x 39px sem preenchimento e com borda de 1px na cor #CCC, use um round de 50. Duplique este retângulo e com ele vamos cortar a parte de baixo do gradiente branco. Selecione retângulo e o gradiente, vá em Modify > Combine Paths > Punch.

PASSO 8

Depois disso duplique novamente o retângulo e mova este de cima 1px para cima, aplique um gradiente linear da cor #000 para a #000, e com uma trasnparência de 24 na parte de baixo do gradiente. Depois em todo o retângulo aplique uma trasnparência de 80%.

PASSO 9

Para o botão, crie outro retângulo de 53 x 35px, e round de 43. Aplique um gradiente liear da forma como está a figura. Depois vamos colocar uma seta acima dele, use a ferramente Arrow, e deixe no formato como estamos usando. Use na seta a cor #979797 e aplique um Inner Shadow nos valores 0 30% 2.

PASSO 10

Agora vamos começar a colocar os textos. Aqui usamos a Helvetica, mas se não tiver pode usar a Arial sem problemas. O texto da hora está na cor #FFF no tamanho 50. Duplique esse layer do texto e no de baixo aplique a cor #000 e mova 1px para cima. Esse efeito fica melhor que o Inner Shadow, pois mantém a fonte no aparência normal. No texto da data usamos a cor #CCC no tamanho 13. Para o "slide to unlock" usamos a cor #FFF com trasnparência de 25% e no tamanho 20.

RESULTADO FINAL

Para finalizar, aplique os ícones e nome da sua opradora no topo, por cima do retângulo de 20px de altura. Todos os ícone criamos também somente como retângulos e linhas, brinque um pouco com isso! No PNG está tudo que foi feito também.

Faça o download do arquivo em PNG.

Criando efeito de fumaça

zee — Tue, 06 Nov 2007 17:27:45 -0600

Vamos começar a postar tutoriais do blog abduzeedo.com, e o primeiro será o mais visualizado até hoje, que mostra como criar efeitos de fumaça no photoshop.

Há algum tempo atrás, postei um artigo mostrando como criar efeito de fumaça no photoshop (semelhante ao que usamos no topo de nosso blog). Para ajudar nisto foi usado uma foto de fumaça e alguns filtros de photoshop. Porém algumas pessoas falaram que eu deveria ter feito a fumaça também e é extamente o que irei mostrar neste post.

Eu havia pensado primeiro qual seria o melhor caminho para criar fumaça no photoshop, e li alguns tutoriais online e assisti alguns episódios do ótimo podcast Pixel Perfect, para encontrar uma maneira boa e fácil de solucionar isto.

Na verdade foi mais fácil que eu esperava.

1 - Criar alguns shapes: Foram criados alguns shapes randômicos.

2 - Aplicar Gaussian blur em cada shape.

3 - Usar o filtro liquify.

4 - Posicionar os shapes.

5 - Adicionar algumas cores.

Adicionar uma cor de fundo no layer do shape, caso contrário o efeito Hue/Saturation não irá funcionar.

6 - Criar uma Cloud (núvem) atrás da fumaça.

Escolha um feather com valor alto, tipo 40 à 80, e depois aplique o Hue/Saturation na núvem também.

7 - Adicionar um gradiente para criar uma atmosfera.

O gradiente irá criar a atmosfera e dar mais profundidade na imagem.

Resultado Final

O processo inteiro leva em média 30 a 40 minutos, é muito simples, mas também é difiícil de criar um efeito natural de fumaça com o filtro Liquify. A melhor forma de fazer isto é brincar com brushes e com ferramentas para chegar ao efeito desejado.

O arquivo PSD está disponível para download.

Arquivos	Tamanho
Final Result (smokeTest.zip)	2.81 MB
shapes.zip	3.57 MB
Wallpaper 1280x1024 (smokeTest.jpg)	163.55 KB

Criando o efeito do logo IE7 no Fireworks

fabiano — Tue, 29 Apr 2008 20:31:29 -0500

Apesar de não ser um grande fã do Internet Explorer, vale o desafio de tentar recriar os efeitos do logo do IE7 e claro, no Fireworks.

Vamos mostrar aqui como fazer esses efeitos e utilzar diversas e novas ferramentas do fireworks que não tinhamos usado antes nos tutoriais.

PASSO 1

Vamos começar criando nossa letra, aqui vamos usar a letra "a". Escolhemos a fonte Helvetica, mas você pode usar a que preferir. Deixe ela na cor #000. Agora vamos trabalhar ela em curvas, para isso clique com o botão direito nela e vá em Convert to paths. Ele irá converter e deixar agrupado o layer, desagrupe para podermos trabalhar com os pontos mais pra frente.

PASSO 2

Agora duplique esse layer e neste de cima aplique um Gradiente Bars e com as cores como mostramos na figura.

PASSO 3

O layer que ficou por baixo será nossa borda preta. E para isso este de cima precisa ser um pouco menor. Selecione o comando Modify > Alter Path > Inset Path. Selecione Inside e width 5.

Depois faça como na figura seguinte, selecione os pontos e vá modificando para deixar eles bem alinhados e com bom espaçamento. Na parte de baixo é legal deixar bem perto da borda para criarmos o efeito certo.

PASSO 4

Agora vamos aplicar bevels e shadows nesse layer. Serão 2 Bevels e 1 Inner Shadow. Deixe os valores como na figura em cada um dos filtros.

PASSO 5

Boa parte da estrutura está pronta agora temos que começar a colocar os efeitos. Vamos fazer o reflexo na parte de cima. Para isso, simplesmente duplique o layer do "a" azul e apague os pontos selecionados na figura. Depois ajuste a curva e aplique um Gradiente Linear com os lados #FFF e 0% de alpha em um dos lados.

PASSO 6

Agora vamos fazer o efeito de luz que aparece na parte de baixo. Será feito com 3 elipses. Aplique as cores como na figura e repare que usamos sempre um Feather e um filtro. Depois agrupe os 3 elementos.

PASSO 7

Vamos aplicar uma máscara agora nesse grupo. Selecione o "a" azul copie (CTRL+C), depois vá em Modify > Mask > Paste as Mask . Duplique esse layer e aplique o filtro Overlay nos 2 layers com alpha de 60% no de cima.

PASSO 8

Precisamos agora criar os arcos amarelos. Vamos usar elipses para fazer eles. Crie 2 elipses como na figura. Para deixar elas no formato e tamanho desejado, use a ferramenta "Q" na opção Distort que facilita bastante.

Depois de criar as duas elipses vá em Modify > Combine Paths > Punch. O arco final está na cor #F8A30A. Faça uns ajutes na ponta de baixo parecer que ela passa por trás da letra.

PASSO 9

Nesta forma aplicamos um Inner Glow com os valores 2 50% 6 0. Depois vamos criar uma nova forma com a ferramenta Pen. Deixe por baixo do arco com o gradiente linear com as duas cores #F8A30A e um lado com alpha 0% como mostra a figura.

PASSO 10

Agora vamos criar a sombra do arco. Duplique o arco amarelo, diminua ele e deixe na cor preta. Aplique agora um Gradiente Radial e deixe bem suave as cores trabalhando com os valores do alphas no gradiente.

Agora aplicamos uma máscara nesta sombra. Copie o "a" azul (CTRL+C) e faça o mesmo processo anterior, selecione a sombra e vá em Modify > Mask > Paste as Mask .

RESULTADO FINAL

Seu efeito deve ter ficado parecido com este!

Podemos colocar também um complemento ou brincar com algumas cores.

Crie o frame do iPhone no Fireworks

fabiano — Wed, 14 May 2008 11:08:56 -0500

Como algumas pessoas pediram no outro tutorial, vamos mostrar agora como criar o frame do iPhone. Não é tão complicado quanto parece, e acho esta solução que encontramos é a que mais se assemelha ao original.

Veja que vamos usar aqui basicamente retângulos e bevels, siga os passos e diga o boa sorte!

PASSO 1

Vamos abrir um documento de 800x800 com fundo #000. Crie um Rounded Rectangle de 280 x 557px.
Note: Os rounds dos retanglos que vamos criar devem ser feitos de acordo com seu instinto. Não colocamos o raio certo aqui dos rounds para instigar você a mexer nas ferramentas!.

Depois vamos aplicar 2 bevels neste retângulo, vejas nas imagens como devem ser.

PASSO 2

O próximo retângulo será com round também como na figura, ficando por cima do anterior. Vamos aplicar um Gradiente Bars com as cores como na figura. Depois siga os passos e aplique 2 bevels também com os valores usados. Repare que neste usamos um feather de 1

PASSO 3

Agora temos que criar mais um retângulo em cima deles. Vamos usar a cor #FFF e os 2 bevels também, para dar o efeito nas laterais.

PASSO 4

Precisamos criar agora o úlimo retângulo da estrutura principal. Será o menor de todos e na cor #000. Repare que nele colocamos uma borda de 2px, isso dará um detalhe mais para frente.

PASSO 5

Vamos criar agora as partes de baixo de cima do nosso iPhone. Crie um retângulo (este sem round!) com Gradiente Radial nas cores como na figura. Na parte de cima ainda usamos uma linha de 1px na cor #0C1114.

PASSO 6

Agrupe estes elementos do passo 5 e vamos agora mascarar eles com o retângulo preto do passo 4. Para isso selecione o grupo, recorte (CTRL+X) selecione o retângulo preto e cole com o shift (CTRL+SHIFT+V).

PASSO 7

A estrutura ta pronta, agora só precisamos criar os elementos menores, que nada mais são que retângulos e círculos como mostram as figuras.

RESULTADO FINAL

Agora só pegamos a nossa interface que criamos no outro tutorial (Criando a interface do iPhone no Fireworks)!

Crie um fantástico background no fireworks inspirado no site do Barack Obama

fabiano — Thu, 03 Apr 2008 13:55:37 -0500

Chegando no fim a corrida eleitoral para saber quem defenderá os Democratas, Barack Obama demonstra que uma de suas preocupações foi o design das peças de sua campanha. Todos os materiais de divulgação, inclusive seu website oficial mostram isso.

Por isso, aqui não vamos ensinar como Obama poderá vencer Hillary, mas dar umas dicas pra ele de como fazer no Fireworks a imagem que é o background se seu website.

A imagem original é esta aqui. Vamos então reconstruir essa imagem e ver como se faz alguns destes efeitos no Fireworks.

PASSO 1

Vamos começar abrindo um novo documento de 1280x1024px. Use como cor de fundo a cor #01245C. Já de início vamos usar as linhas guias para delimitar a área central do conteúdo. Deixei todas a 160px das bordas (esquerda, direita e topo), ficando a área central como 960px.

PASSO 2

Crie um retângulo de 960x850px (ele deve ir até a parte de baixo da página). Aplique um Gradiente Linear de #FFFFFF para #01245C.

PASSO 3

Agora vamos começar a criar o fundo de luz do site. Escolha a Pen tool (P) e faça um shape como o demonstrado na figura. Use Gradiente Radial da cor #FFFFFF para #85CFF2 e com 65% de transparência nessa cor como mostra a figura. Depois disso aplique um Feather de 100% e a textura Swish com 20%. Feito tudo isso agora aplicamos um Color Dodge e deixamos todo esse shape com alpha de 60%.

PASSO 4

Para essa luz ficar com a cor que queremos vamos precisar criar mais 2 shapes. Para o próximo copie este que criamos por primeiro e modifique um pouco os pontos deixando a forma toda um pouco menor para criar efeitos diferentes em todos os locias. Neste shape vamos mudar a textura Swish para 2% e trocar ao invés de Color Dodge, usar Overlay

PASSO 5

O terceiro shape da luz então vamos criar um novo, um pouco menor q o último. Apliquei a cor #FFFFFF, Feather 100%, Texture 0%, Color Dodge e transparência deste shape de 40%.

PASSO 6

Vamos criar agora a sombra. Ela também será um shape irregular. Faça o formato como mostra a figura, use a cor #01245C e um Feather de 22%.

PASSO 7

Veja como deve ficar a ordem dos layers e o efeito até agora.

PASSO 8

Agora vamos criar a área do topo direito. Para fazer o efeito de blend vamos usar outro comando no fireworks. Antes crie uma linha como na figura e vá em Commands > Creative > Twist and Fade. Brinque um pouco com os valores para tentar achar o melhor resultado, aqui usamos os que sao mostrados na figura.

PASSO 9

Agora copie esse resultdo algumas vezes, coloque uma transparência baixa, de uns 8% e posicione como na imagem. Aplique ainda alguns textos e outros elementos, aqui usamos algumas estrelas. Jogue tudo isto para baixo de todos os layers, assim as linhsa irao brilhar mais por causa do Color Dodge dos outros shapes.

PASSO 10

Para a área do logo criamos um outro shape pra parecer que há uma luz especial saindo ali. Use a cor #FFFFFF e aplique um Feather de 40%. Além disso ainda usamos alguns elementos a mais, como uns circulos somente com contornos e alpha próximo de 5%.

PASSO 11

Agora falta somente a área central. Criamos um forma como mostrada na figura. Aplicamos um gradiente linear da cor #FFFFFF para a #336994. Vamos entao usar o retângulo de baixo como máscara para ele. Basta recortar o shape criado e colar dentro do retângulo (CTRL+SHIFT+V selecionando o retângulo.).

RESULTADO FINAL

Coloque agora alguns elementos por cima de tudo para personalizar seu background.

Veja em tamanho real

O arquivo PNG está desiponível para download.

Design estilo Grooveshark no Fireworks

fabiano — Wed, 18 Jun 2008 19:45:57 -0500

Semana passada mostramos o site Tinysong no nosso Sites da Semana. Além de se um belo aplicativo o site tem um design muito bem feito e achei que seria interessante reproduzir o mesmo design e fazer um tutorial sobre isso no fireworks.

Neste tutorial não iremo aplicar nenhum grande efeito ou alguma ferramenta desconhecida, mas apenas mostrar uma forma simples de fazer pequenos efeitos que fazem a diferença em um bom design.

PASSO 1 - NOVO DOCUMENTO

Para começarmos, abra um novo documento de 600 x 600px com a cor #BFD2E5 de background.

PASSO 2 - RETÂNGULO

Vamos agora fazer um Rounded Retângulo branco de 578 x 555px. Deixe como na figura com um espaçamento um pouco maior em baixo para podermos colocar algum elemento ali no final. Faça este retângulo com rounds pequenos, para ficar bem suave. Aplique também um Drop Shadow com os valore 1 - 50% - 2 - 270º e com a cor #46586A.

PASSO 3 - BOX 1

Para fazermos o background que será o fundo de nosso textfield vamos usar 3 Rounded Retângulos sobrepostos. Em todos eles será aplicado um gradiente linear e repare nas dimensões deles que o de cima é sempre 2px na altura e na largura menor que o de baixo, desta forma conseguimos dar a impressão de relevo que queremos. Siga o gradiente e as dimensoes de cada um dos retângulos.

PASSO 4 - ALINHANDO OS RETÂNGULOS

Aqui você consegue ver como devem ficar dispostos os 3 retângulos. Após fazer os 3 nesta ordem, selecione os 3 e alinhe na vertical e na horizontal para ter certeza que eles estão centralizados. Depois agrupe os 3.

PASSO 4 - SOMBRA E REFLEXO

Para finalizarmos o Box 1, vamos aplicar uma pequena sombra nele e um efeito de reflexo. Ambos serão feitos também com retângulos. Para fazer a sombra (1) faça um retângulo como na figura e aplique um Feather de 3 e alpha de 55. Depois coloque este layer para baixo do grupo de retângulos feito antes. Para fazer o reflexo, faça um Rounded Retângulo na base do desenho já feito e aplique um gradiente linear da cor #E6EEF5 para #FFF. No lado #FFF coloque um alpha de 0. Feito isto aplique um alpha de 90 neste retângulo. Veja no final da imagem como ficam a ordem destes layers.

PASSO 5 - BOX 2

Neste box faremos os mesmo processo do passo 3. Repare nas cores dos gradientes e no tamanho dos retângulos. Depois de feito os 3 alinhe eles na vertical e na horizontal e agrupe eles também. Posisione este grupo abaixo do reflexo feito no passo anterior.

PASSO 6 - SOMBRA

Aqui vamos somente copiar o retângulo de sombra feito antes. Copie ele para baixo deste nosso grupo do Box 2.

PASSO 7 - TEXTFIELD

O campo de texto criado será feito com 2 retângulos. Os 2 terão preenchimento #FFF. Faça o primeiro com borda de 1px #D6E4F0. Faça o segundo retângulo em cima dele com borda 1px #93AEC7 e mova 1px para cima. Veja na imagem como ficarâo dispostos os 2 retângulos.

PASSO 8 - ÍCONE DE BUSCA

O ícone que iremos criar será feito com um Doughnut e um Retângulo. Aproxime e una os dois e gire um pouco o retângulo. Selecione os dois elementos e use Modify > Combine Paths > Union. Posicione a figura já ao lado do textfield e aplique um Gradiente Linear da cor #99ABBB para #5D768C. Observe também que aplicamos um Inner Shadow nessa figura. Depois duplique este layer, delete a Inner Shadow e use uma cor sólida #F3F7FA. Mova este layer mais claro para baixo do outro. E depois mova 1px para baixo para dar a impressão de relevo. Veja no final como ficariam os 2 layers do ícone.

PASSO 9 - ELEMENTOS

Agora que já temos praticamente tudo finalizado, utilize mais alguns elementos como um logotipo, alguns textos e também algum logo na parte de baixo da nossa área de trabalho, onde deixamos um espaço no início do tutorial.

RESULTADO FINAL

Veja que o resultado é bem similar ao do Tinysong, mas podíamos brincar e aplicar outra paleta de cores, testando com os mesmos efeitos. Espero que tenham gostado e fiquem à vontade para fazerem alguns testes e mostrar aqui no blog!

Efeito mágico de luz no Photoshop

zee — Mon, 12 Nov 2007 06:49:09 -0600

Seguindo a série de tutoriais do site abduzeedo.com vamos mostrar agora como criar um fantástico efeito de luz no photoshop.

1 - Criar um gradiente radial, neste caso do roxo para o roxo escuro

2 - Aqui eu adicionei um ícone de um chapéu de mágico: Crystal Clear Collection by Everaldo

3 - Adicione algum texto. Eu usei um código fonte de um site e apliquei o filtro Distort >Wave.

Criar dois textos simples

4 - Rotacionar e posicionar os textos

5 - Adicionar algumas luzes usando Glow: Use valores diferentes para cada linha de texto, o segredo aqui é o blending option COLOR DODGE.

Troque os valores de Spread, Size e Range

6 - Agrupe as duas linhas de texto e com uma aplique uma máscara para fazer as linhas irem desaparecendo para o final delas.

7 - Com o outro grupo de texto aplique um gausian blur, depois disso delete algumas partes para mostrar o texto sem blur.

Isto irá acrescentar movimento para o texto, como se tivesse sido criado por mágica.

8 - Criar um novo layer abaixo do texto e com um um brushe grande e regular com aprox. 100px adicione um spot de luz em branco.

O layer deve estar abaixo do texto, caso contrário o glow nao irá afetar a luz branca.

9 - Adicione umas fumaças, denovo eu uso a borracaha, eu podereia ter usado o efeito liquify também.

10 - Crie uma núvem (Cloud): para fazer isto, use um marquee com feather de valor grande, tipo 20, e aplique render > cloud segurando a tecla Command(mac) ou CTRL(win).

Como ditado antes em outra imagem, o mais importante aqui é aplicar o blendig option COLOR DODGE.

11 - Faíscas: Para as faíscas crie um brush, teste os shape dynamics, scatering e outros dynamics até chegar em uma forma desejada. Depois disso, plique um Outer Glow e Inner Glow para criar o efeito de mágica.

Final - O resultado é muito simples mas ao mesmo tempo muito bonito.

O processo inteiro leva em média 35 minutos, mas uma dica legal é aplicar o color dodge na pasta, e e colocar os elementos com blur dentro dela. Fazendo isto você pode criar um fantástico efeito de luz.

O arquivo PSD está disponível para download.

Arquivot Tamanho

magicEffect.jpg 87.23 KB

PSD File realizee.psd 3.6 MB

Efeitos em vetor

zee — Fri, 30 Nov 2007 05:48:24 -0600

Mais um tutorial retirado do site abduzeedo.com, aqui demonstrando inspiração em alguns grandes artistas. Destacamos Adhemas Baptista, Eduardo Recife and Nik Ainley.

Neste post foi criado um estilo de design muito legal mixando uma foto, elementos de vetor usando Photoshop (muitos brushes) e Ilustrator. Tudo que foi utilizado aqui foi feito download em sites como magurno e brusheezy.com.

Este tutorial pode parecer complicado e extenso, mas na realidade é bem fácil de fazer e acompanhar, você só rira precisar usar brushes and masks

1- Escolha uma foto legal: Esta pode ser a parte mais complicada, no meu caso foi fácil, um fotógrafo amigo nosso tirou algumas fotos para um site chamado UDOX e ele me permitiu usar uma dessas fotos.

2 - Adicionar alguns elementos de vetor: O primeiro símbolo que peguei foi um CD que veio na revista Computer Arts.

3 - Misturando

Aplique um Color Overlay nas preferências do layer.

4 - Usando o primeiro Brush: Primeiro você pinta em cima da foto, e depois você começará a deletar algumas partes dela. Isso dará a impressão que os elementos estão as vezes por cima e outras vezes por trás da pessoa da foto.

Aplique um Layer Mask e delete através da máscara.

Aqui eu preferi colocar os elementos rosas por trás das pernas.

5 - Adicionando mais cores e elementos: Como no elemento anterior, nós usamos outro brush e apagamos algumas partes para colocar por trás da pessoa.

6 - mais um passo: Todos estes elementos são do Vintage feitos no Vogue brushes, você pode fazer o download deles aqui.

7 - Um pouco de Ilustrator: Adhemas usa muito este efeito, basicamente é um Blend entre dois elementos, e pode ser feito com muita facilidade do Ilustrator.

Simplesmente crie dois elementos e use o Blend para unir eles.

Você vê que foi criado um Path (caminho).

Edite o Path com a ferramenta Pen.

Com um 'double click' em cima do ícone do Blend e abrirá a janela de Blens Options, onde você pode editar algumas propriedades.

8 - Precisamos de um pouco de azul: Eu adicionei um outro elemento por baixo dos pés da pessoa.

9 - Refinamentos finais: Agora é hora de refinar o design, delete algumas partes de cada elemento para fazer com que eles pareçam estarem misturados.

Algumas vezes o elemento laranja esta na frente do blend e outras está por trás, o mesmo se aplica para os outros.

10 - Agora precisamos de um pouco de luz: Duplique o elemento laranja, crie uma pasta na paleta de layer, e coloque este elemento duplicao dentro da pasta. Aplique na pasta um Color Dodge, e adicione um Gaussian Blur no elemento dentro da pasta.

Resultado Final:

Todos os arquivos estão disponíveis para download.

Attachment Size

vectors.zip 132.63 KB

AI_file.zip 1.35 MB

PSD_file.zip 2.27 MB

abduzeedo_wp.jpg 146.95 KB

Fantástico efeito de luz no Photoshop em 10 passos

zee — Fri, 01 Feb 2008 09:38:41 -0600

Já havíamos mostrado em outro tutorial do Abduzeedo como criar efeitos de luz chamado Efeito mágico de luz no Photoshop. Muitas pessoas gostaram bastantem, mas algumas ainda tem dúvidas de como conseguir esse efeito.

Passo 1

Crie um novo documento, aplique um Layer Style no layer background. Adicione um Gradient Overlay e um Pattern Overlay.

Passo 2

Aqui foi usado um ícone encontrado em um site, mas você pode usar qualquer um que desejar.

Passo 3

Selecione a Ellipse Tool (U) e crie uma forma como esta. Depois aplique um Gaussian Blur (Filter>Blur>Gaussian Blur) com raio de 30px.

Passo 4

Crie uma novaPasta e coloque o nome de “Light Effects”. Troque o blend mode para Color Dodge, e mova a elipese que você criou para dentro desta pasta.

Step 5

Para criar as faíscas nós usaremos um fantástico sistema de brushes. Adicione um noco layer, dentro do layer “Light Effects”, selecione branco para a cor e siga as imagens abaixo.

Step 6

Using the Layer Styles add a Outer Glow to the sparks

Passo 7

Vamos agora adicionar um pouco de fumaça. Criar um novo layer, chame de “Smoke”. Troque o blen mode para Color Dodge e selecione o Lasso Tool. Selecione 40px de Feather e crie uma seleção como mostrado abaixo. Depois disso certifique-se que o foreground é branco e o background é preto e aplique Filter>Render>Clouds. Dica: Continue aplicando o filtro até que consiga a melhor nuvem.

Passo 8

Adicione algum texto e usando o Layer Styles denovo vamos criar um efeito legal.

Passo 9

Coloque seu logo e você pode até mesmo adicionar mais efeitos como feito em Efeito mágico de luz no Photoshop, mas para isso você precisará seguir esse tutorial! ;).

Conclusion

Se você souber um pouco de Layer Styles e de Brushes em Photoshop você estará pronto para criar efeitos sensacionais. Dependerá exclusivamente de sua imaginação e de brincar com as ferramentas. As vezes somente um pequeno ajuste na configuração e você consegue um efeito totalmente diferente.

O PSD para esse tutorial pode ser baixdo
The PSD file used in this tutorial can be downloaded aqui.

Attachment Size

coffee_tut.jpg 261.74 KB

Mini-layout inspirado no 9rules design

fabiano — Tue, 01 Jul 2008 18:48:37 -0500

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

Para começar, abra um arquivo novo de 600x600px, com a cor de background de #DBE8C4. Em seguida faça um retângulo na parte superior de 600x105px. Use um gradiente linear nele da cor #669933 para #0B1005.

PASSO 2 - EFEITOS

Para fazer o efeito das listras, vamos usar 2 texturas sobrepostas. Para fazer a primeira, faça um retângulo no topo queseja maior que o feito anteriormente (aqui fizemos de 625x162px) e preencha ele com a textura DNA e cor #666666. Em seguida aplique um fitro Motion BLur com os valores indicados na figura e um blend Soft Dodge. Feito isso duplique este layer e apenas troque a textura para Grid 4 e o blend para Overlay. Aqui não vamos mascarar o que ficou sobrando, vamos apenas criar um retângulo branco por cima de tudo.

PASSO 3 - GRADIENTE DO BODY

Faça agora um retângulo com gradiente linear para ser o fundo do corpo principal. Use as cores #93B956 e #DBE8C4 e deixe ele na posição Y em 109. Agora vamos fazer apenas um acabamento no header com uma linha horizontal de 1px na cor #C2D79A. Veja no detalhe como devem ficar os elementos até agora.

PASSO 4 - ELEMENTOS DO LAYOUT

Agora não temos nenhum truque de efeitos para ser feito, apenas usar a criatidade e adicionar alguns elementos no layout. Usamos algumas frases grandes, textos, uma lista com links, um footer e claro, um bom ícone e um título pra dar o acabamento!

RESULTADO FINAL

Veja que o processo é bem simples é só testar as cores, os efeitos e tentar chegar nos elementos certos para que consiga comport um layout com harmonia e com estilo.

Tutorial background Barack Obama em CSS - Parte 2

fabiano — Thu, 24 Apr 2008 19:00:13 -0500

Nesse tutorial vamos mostrar como podemos utilizar o background criado no Tutorial Parte 1. Mas não vamos mostrar somente como colocar ele no body, mas também criar a estruturar as principais regiões do site como menu, conteúdo principal, coluna de apoio e rodapé.

O objetivo deste tutorial não será montar o site todo, e sim mostrar alguns conceitos básico de CSS e integração do fireworks para web.

PASSO 1

A primeira coisa que precisamos fazer é exportar nossas imagens. Como vamos somente monstar a estrutura básica vamos precisa somente de duas imagens: o background e o logo.

PASSO 2

Vamos agora criar o html. A estrutura terá basicamente 4 regioes: #header, #main, #sidebar e #footer. Repare que vamos colocar o #main e #sidebar dentro de um #content, dessa forma para modificações futuras podemos teruma flexibilidade maior.

<body> <div id="total"> <div id="header"> <a href="#"> <img src="logo_obama.jpg" alt="Home Obama"/> </a> </div>> <div id="menu">MENU</div> <div id="content"> <div id="main">HERE IS THE MAIN CONTENT</div> <div id="sidebar">SIDEBAR</div> <div> <div id="footer">FOOTER</div> </div> </body>

PASSO 3

Vamos agora para o CSS. Voce pode usar um editor de texto/css que desejar. Usamos aqui o CSS Edit, e abrimos o Live Preview. Com isso temos a vantagem de visualizar em tempo real o que estamos modificando. Notem que a estrutura é muito simples. Apenas colocamos um corpo #total com "margin:0 auto" e o restante dos elementos dentro dele.

body { margin: 0; color: #999; font-weight: bold; font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; font-size: 2em; background: #01245c url(bg_obama.jpg) no-repeat center top; } /*** AQUI ESTÁ NOSSO BG! Repare também que usamos a cor #01245C para complementar resoluções maiores. ***/ #total { width: 960px; margin: 0 auto; } #header { height: 160px; } #header img{ border: 0; } #menu { height: 60px; background: #FFF; text-align: center; line-height: 60px; } #main { float: left; width: 650px; background: #f0f0f0; height: 400px; text-align: center; padding-top: 100px; } #sidebar { float: right; width: 310px; background: #dadada; height: 400px; text-align: center; padding-top: 100px; } #footer { height: 150px; text-align: center; padding-top: 50px; clear: both; color: #15539c; }

PASSO 4

Veja que o resultado final é bem simples. Basta estruturar bem o código e praticar!

Tutorial: Newspond menu em CSS - Parte 2

fabiano — Wed, 26 Mar 2008 07:05:55 -0500

A segunda etapa deste tutorial, vamos mostrar como desenvolver o menu Zeepond criado no fireworks agora em CSS. O processo é simples: montar o html e criar os estilos em CSS. Como falamos no outro tutorial, talvez esta não tenha sido a solução encontrada pelos desenvolvedores do prórpio Newspond, pois com CSS podemos ter o mesmo resultado de diversas formas diferentes.

O objetivo deste tutorial é mostrar a facilidade que o fireworks nos trás para desenvolver interfaces web e demonstrar também que CSS não é nenhum bixo de 7 cabeças!

PASSO 1

Primeiro vamos estudar o layout e definir quais serão as regiões principais para estruturar o html.

PASSO 2

Para criar o html, abra seu editor de texto preferido (notepad, dreamweaver, textmate, etc) Aqui usamos o Smultron. O que temos que fazer então é criar as áreas seguindo nossas regiões do layout:

O HEADER

O CONTENT
Aqui nós usamos 2 div's para o conteúdo central por estarmos usando as sombras nas laterais.

O MENU

APOIO ABAIXO DO MENU

O CÓDIGO COMPLETO
Salve este arquivo como menu.html.

PASSO 3

Agora que temos o código pronto, vamos abrir nosso arquivo .png e exportar as imagens que serão usadas em nosso CSS. Para isso vamos usar a ferramenta Slices e criar todos os slices necessários de acordo com as imagens:

PASSO 4

Salve todas as imagens em uma pasta images, direto na raiz onde se econtra o arquivo menu.html.

PASSO 5

Com todas as imagens na mão e o código pronto, vamos agora começar nosso CSS. Aqui eu uso o CSSEdit para trabalhar, mas você pode usar seu editor de preferência. Para iniciar cole o seguinte código no "HEAD" do menu.html:

PASSO 6

Usamos aqui tb um arquivo para resetar todas as configurações padrão das tags, o que nos facilita para manipular os objetos no layout. Baixe o arquivo "reset.css" (está no zip em anexo no final do tutorial com todo o site) e deixe na raiz junto com o arquivo menu.html. Abra um documento novo de css e salve como nome de style.css. No top do documento, vamos importar o reset.css com o seguinte código:

PASSO 7

Começamos então criando o estilo de nossos ID's principais. Veja como tinhamos falado que no #content e no #main é onde apilcamos as sombras laterais.

Repare também que a largura do #content é de 844px, pois são os 700px do corpo mais 7px de sombra para cada lado. Uma dica que é legal de salientar aqui é como centralizamos este conteúdo principal. São 3 os atributos que utilizamos para ele ficar sempre no centro do browser: width, position e margin. Veja:

PASSO 8

Agora vamos ao nosso menu. Reveja o código que utilizamos para ele. O "ul" é onde colocamos todos nossos links. Note que utilizamos um class="nav_right" no segundo "ul", pois vamos posicionar este no lado direito do menu, é o que usamos aqui como nosso link de Login.

Vamos entao posicionar nossos "ul" e colocar as imagens das extemidades do menu:

Quase finalizando então vamos colocar o estilo dos nossos links e ver como eles irão se comportar:

PASSO 9

Aqui mostramos só como irá ficar o estilo para o texto e links de apoio abaixo do menu. É aqui que aplicamos a sombra de baixo do menu também.

PASSO 10

Você precisa agora fazer os boxes de texto de baixo para finalizar o layout. Não vamos entrar em detalhes sobre esta etapa pois não é o objetivo principal deste tutorial, mas vamos falar melhor sobre round corners e boxes de texto em outro artigo. Mas se baixar os arquivos finais e analisar verá que o processo é bem simples.

RESULTADO FINAL

Para ver então como deverá ficar seu layout, totalmente tabless e cross-browser, veja aqui o resultado final.

Tutorial: Newspond menu no fireworks - Parte 1

fabiano — Sat, 15 Mar 2008 15:14:02 -0500

Hoje começamos uma série nova de tutoriais, mostrando como desenvolver layouts para web, desde a criação do design até a montagem do código em CSS. Os tutoriais serão sempre em duas etapas: 1- layout; 2: CSS.

Porém temos uma diferença, vamos desvendar e desenvolver os tutoriais em cima de sites existentes. Talvez os passos usados não sejam os mesmos que foram utilizados na criação dos próprios sites, mas a idéia é simplesmente ajudar a mostrar como se faz, e chegar o mais próximo do layout original.

Para começar a série, nosso primeiro post é sobre o menu do site Newspond. As cores e os efeitos são leves e muito modernos. E foram pequenos detalhes no design que chamaram a atenção e fizeram dele o escolhido para ser o primeiro.

Newspond: Nenhum editor. Nada de votos. Somente um sistema auto-suficiente de notícias.

Vamos usar o fireworks para desenvolver todo o design, os passos são simples, mas os ajustes em alguns efeitos e gradientes que irão fazer a diferença no resultado final.

PASSO 1

Para começar, abra um novo documento com 1000x660px. Escolha #595D67 para cor de fundo.

PASSO 2

Crie um retângulo de 1010x100px e aplique um gradiente da cor #3F444D para #000000. Posicione ele em X=-5 e Y=0 (Essa posição -5 ajudará para não aparecer a sombra dos lados que será aplicada no próximo passo).

PASSO 3

Aplique Filter > Inner Shadow, e escolha os valores como na figura: 0, 90%, 5.

PASSO 4

Vamos criar o esperado menu. Crie um retângulode 830x30, centralize na área de trabalho e posicione em Y=100. Aplique o gradiente linear usado as cores como mostrado na figura.

PASSO 5

Agora vamos criar o fundo da área de conteúdo do site. um retângulo e aplique um gradiente linear da cor #434752 para #000000. Mova o gradiente como mostrado na figura. Isso irá servir para já fazer a sombra que aparece abaixo do menu.

PASSO 6

Mova o layer do retângulo para baixo de todos os outros e aplique um Filter > Drop Shadow, com os valores mostrados: 0, 90%, 7.

PASSO 7

Aplique alguns textos no menu, aqui foi usado 4 links, mas você pode criar quantos achar melhor. Depois crie uma linha no topo do retângulo com a cor #9EA8B2. Isso já dará um relevo no menu.

PASSO 8

Vamos agora criar o fundo dos links ativos. Crie um retângulo e aplique um gradiente linear da cor #000000 para #434752. Posicione o gradiente na forma que mostra a figura. Veja no detalhe também que criamos uma linha acima de retângulo com a cor #555C68.

PASSO 9

Crie agora as linhas que serão os divisores entre os links do menu. Vamos começar agora também a alinhar os links e criar os espaçamaentos certos entre eles. Siga os passos abaixo Criando as linhas (repare que além das cores agrupamos elas aplicamos uma opacidade de 40%), depois criando as linhas guias deixando 30px de espaçamento das bordas, ajuste os espaçamentos e por último crie um link extra alinhado na direita do menu.

PASSO 10

Vamos criar agora os pequenos gradientes das bordas que fazem um detalhe bacana no menu. Crie um retângulo de 20x30px. Aplique um gradiente linear na posição horizontal nas cores e na opacidade como mostra a figura (repare que tem Feather=2). Depois copie ele para a outra extremidade do menu e aplique um modify > trasnform > flip horizontal.

PASSO 11

Quase no final, vamos dar um pouco mais de relevância para o menu, criando uma sobra mais forte abaixo dele. Para isso criei uma elipse com cor #000000 e Feather = 33. Mova o layer desta elipse lá para baixo, logo acima somente do retângulo que será o corpo do conteúdo.

PASSO 12

Agora só falta criar alguns conteúdos no corpo central. Nessa parte vai da criatividade de cada um, aqui só criamos alguns blocos de textos para tentar se assemelhar ao site original. E além disso, coloque seu logo no topo e aplique pode criar uma elipse com cor #BCC9D9 e feather 75 por baixo dele para criar uma idéia de luz.

RESULTADO FINAL

Clique para ver em tamanho real.
O PNG está disponível abaixo para download.

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

fabiano — Tue, 03 Jun 2008 17:56:43 -0500

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.

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.

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.

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.

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.

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.

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.

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.

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!

Attachment	Size
vectors.zip	132.63 KB
AI_file.zip	1.35 MB
PSD_file.zip	2.27 MB
abduzeedo_wp.jpg	146.95 KB