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

About the author of this post

Abduzeedo is a blog about design. There are all sorts of articles for those who want to look for inspiration. Also you will find very useful tutorials for the most used applications out there, with a special selection of Photoshop Tutorials and Illustrator Tutorials. Of course there are other softwares conteplated like Pixelmator, Fireworks, and web design tutorials.