fireworks

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 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!

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: 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!