facebook twitter youtube rss
Tutorial Illustrator: Criando um logo no estilo Web 2.0 (Opacity Mask)
Postado por em mar 12, 2008 sob as tags Illustrator, Logotipo, Tutoriais | 8 comments
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...


 

Creio que 11 em cada 10 logos de aplicativos Web 2.0 utilizam o efeito de reflexo em sua composição. :P Exageros a parte, tentarei de uma maneira bem simples, mostrar como conseguir este efeito no Illustrator. Por que no Illustrator? Simples! Por ser um software vetorial, criando o logo nele, você poderá posteriormente redimensioná-lo sem perda na qualidade da imagem. E também é muito fácil exportá-lo para qualquer formato desejado, seja .gif, .jpg ou .png.
1 – É muito fácil conseguir chegar ao efeito desejado. Abra o arquivo com o logotipo vetorial desejado. Como exemplo utilizei o logotipo da empresa que trabalho. Adicionei o fundo escuro apenas para destacar mais o efeito, contudo não é necessário qualquer tipo de background.

 




2 – Selecione e duplique o logotipo. Você poderá fazer isso de duas maneiras: Copiando e colando o logo em frente ao logo original. Basta selecionar o logo, ir em Edit – Copy [Editar - Copiar] e depois em Edit – Paste in Front [Editar - Colar na Frente]. As teclas de atalho são: CTRL + C e depois CTRL + F no PC e Command + C e depois Command + F no Mac. Outra maneira de fazer isso é selecionando o logo, pressionando as teclas ALT + SHIFT e arrastando o logo duplicado para baixo do logo original. Explicando. A tecla ALT pressionada ao arrastar um objeto, serve para copiá-lo, mantendo o original. A tecla SHIFT, serve para manter o objeto duplicado alinhado ao objeto original. Ao final deste passo você deve visualizar algo como a figura abaixo.

 




3 – É hora de invertermos a posição do logo. Clique no logotipo duplicado com o botão direito do mouse, e escolha Transform – Reflect [ Transformar - Refletir ].Aparecerá uma janela como a figura abaixo. Selecione a opção Horizontal e clique OK.

 




4 – Você deve posicionar o logo duplicado próximo ao logo original. Muita gente deixa os dois logos colados, eu particularmente gosto de deixar um pequeno espaço entre eles, acreditando dessa forma, conseguir um reflexo mais realista.

 




5 – Hora de adicionar a transparência.Crie um retângulo que cubra totalmente o logotipo duplicado. Não precisa ser um retângulo muito grande. Na verdade quanto mais próximo for o tamanho do logo e do retânguo melhor.

 




6 – Neste passo, você criará o que conhecemos por Opacity Mask. Uma Opacity Mask funciona como uma máscara comum [ Mask ], com a diferença que você controla a sua transparência. Sempre que utilizar uma Opacity Mask, você deve utilizar gradientes ou Meshs que possuam as cores Branco e Preto. A transparência só funciona se forem utilizadas essas cores. Selecione o retângulo e preencha-o com um gradiente linear da cor preta para branca.


7 – Finalmente aplicando a Opacity Mask. Selecione o logotipo refletido e o retângulo preenchido com o gradiente. Na janela Transparency [ Transparência], selecione no menu com uma seta no canto superior direito da janela, a opção Make Opacity Mask. Tcharammm. Estamos quase lá.

 

 

8 – Para dar um toque final de realismo costumo selecionar o logo refletido e configurar a transparência (janela Transparency) para 50%.

 



Note que sabendo os passos a serem seguidos fica fácil criar o mesmo efeito através de outros softwares como Photoshop e Fireworks.Espero ter ajudado.[ ]s



Sobre o autor

Tiago Pimentel

Estudei design gráfico na EPA e por uma ironia do destino, me tornei diretor de arte digital. Também sou ilustrador e músico, trabalho na Jazz Digital e sou adicto a links interessantes e todas as coisas boas da vida: fotografia, moda, cinema, viagens, arte, cultura, internet. Além disso dedico meu tempo livre às artes plásticas. Entre em contatos através das redes sociais, Facebook, Twitter, etc. Os links estão no MeAdiciona: www.meadiciona.com.br/tiagopimentel

Você também deve curtir:

Fontes no estilo Web 2.0 para download A pouco tempo atrás nossos browsers foram invadidos pela tal da Web 2.0. Sites agora viraram aplicativos,...
Download PSD: Interface Web Com o singelo nome de "O Baú do Tesouro da Interface Web" ou para os anglo-saxônicos "WEB UI Treasure...
39 Tutoriais de como criar botões no Photoshop A navegação é uma das partes primordiais na composição de um website. Sendo assim, tutoriais que...
Download: Illustrator brush que imita botões de gel (gel buttons)   Hoje em dia é muito comum nas páginas web o uso dos famosos Gel Buttons, como mostra...


8 Respostaspara ““Tutorial Illustrator: Criando um logo no estilo Web 2.0 (Opacity Mask)”

  1. 午夜客 disse:

    很清晰明了的教程!

  2. Renato Quintella disse:

    Gostei bastante do seu blog. Estava com dificuldade para achar a transparência no gradiente pois só usava Corel, mas agora trabalhando com vídeo, trabalho com a suite integrada.

    Já coloquei seu blog nos favoritos. Visitarei bastante! Continue seu trabalho que está de parabéns!

  3. anna disse:

    ótima dica!!!!

  4. michell disse:

    muito bom tava precisando veio a calhar o brigado

  5. admin disse:

    Vlw pelo comentário Michell. [ ]s

  6. Rafael disse:

    Estou começando agora com o Illustrator (já mexia com Fireworks, Flash…) e cada dia fico mais maravilhado com essa ferramenta fantástica da Adobe que dá de 10 a 0 no CorelDraw! Obrigado pelo tutorial, foi muito útil e prático!

  7. Karla disse:

    Muito bom!
    Estava quebrando a cabeça pra achar o comando que faz a Opacity Mask… e é tão fácil!
    Valeu!!!
    Abçs

  8. Marcio disse:

    cara, vc salvou a pátria. faço transparencia no indd e no ps brincando. agora tava precisando fazer direto AI e tava me batendo. qdo é praticamente a mesma coisa. Muito bom. parabéns. Eu ainda estou no começo, mas qdo estava no começo do começo precisava de tutoriais como o seu. tudo mastigadinho. hehehe
    valeu.

Deixe uma resposta

parceiros

The Old Black Gallery
Blog Ditudu
Caligraffiti
Choco la Design: O lado mais gostoso do design!
Studio MANGA ROSA
My Owl Barn
Tutorial 3D
Cute Drop
Magel Studio
Design Dicas
Design Dicas
Tutoriart
SmartGirls
Des1gnOn
Designers Brasileiros
sala7 design
Design Fera
Tonka 3D
Designer Effects
Designer Effects
Follow the Colours
Logotomia
Paroxismo Records
Designerd
SetUP Extras - Wallpapers  Matrias  Design
Artefinal
Designine