Criando o efeito do logo IE7 no Fireworks ListThumbs

Criando o efeito do logo IE7 no Fireworks

maio 01, 2008

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.

Tutorial logo IE7

PASSO 2

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

Tutorial logo IE7

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.

Tutorial logo IE7

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.

Tutorial logo IE7

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.

Tutorial logo IE7

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.

Tutorial logo IE7

Tutorial logo IE7

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.

Tutorial logo IE7

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.

Tutorial logo IE7

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.

Tutorial logo IE7

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 .

Tutorial logo IE7

RESULTADO FINAL

Seu efeito deve ter ficado parecido com este!

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

Tutorial logo IE7

Tutorial logo IE7

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:

Mais conteúdo sobre:

Compartilhe com os outros!

No comments yet :(

Comentar

O conteúdo deste campo é privado não será exibido ao público.

Ícones dos Anunciantes