setembro 14, 2009 from abduzeedo's blog
Nós decidimos, há algumas semanas, fazer o redesign do logo da Zee. Quando as empresas fazem o redesign de seus logos, isso significa, na maioria das vezes, que estão mudando algo em seu negócio. Pode ser sua estratégia, novos produtos, etc... Mas é quase certo que algo está por trás do logo. No nosso caso não é diferente. Nós mudamos nosso modelo de negócio e decidimos criar um novo logo.
Com a idéia "Stay in the Loop", decidi brincar um pouco no Illustrator para criar uma fonte customizada. Também queria que o logo fosse semelhante ao logo do Abduzeedo. Nós ainda estamos trabalhando no logo e na tag line, mas o conceito é esse que vou mostrar aqui.
Neste tutorial vou mostrar como eu criei o logo no Illustrator e o splash no Photoshop.
Passo 1
Abra o Illustrator e crie um novo documento. Vá até View>Show Grid e depois até View>Snap to Grid. Esses 2 presets serão muito importantes para podermos fazer o design da fonte do logo.
Passo 2
Com a Rectangle Tool (M) crie um retângulo usando o grid.
Passo 3
Com a Pen Tool (P) adicione 4 novos pontos em cada segmento do retângulo. Depois disso, com a Direct Selection Tool (A), selecione cada um dos pontos e os mova um módulo do grid para criar bordas chanfradas.
Passo 4
Vamos começar criando o Z. Ainda com a Direct Selection Tool (A), selecione o segmento da esquerda do retângulo e o delete.
Passo 5
Agora delete a parte da direita ainda com a Direct Selection Tool (A). Praticamente todo o processo será feito com a Direct Selection Tool (A) e a Pen Tool (P).
Passo 6
Agora com a Pen Tool (P) clique no ponto 1 e no ponto 2 crie um segmento diagonal e teremos o nosso Z.
Passo 7
Para criar o E usaremos um processo semelhante. Primeiro delete o segmento da direita do nosso retângulo chanfrado usando a Direct Selection Tool (A).
Passo 8
Com a Pen Tool (P) clique no ponto 1 e pressionando o SHIFT clique alguns módulos abaixo dno grid (ponto 2). Então clique novamente, agora no módulo da esquerda e para baixo para criar um canto chanfrado (ponto 3).
Passo 9
Ainda com a Pen Tool (P), crie o segmento 1 e o canto chanfrado 2. Pressione SHIFT para garantir linhas retas, mesmo com usando a opção Snap to Grid que ativamos. Depois disso nosso E está pronto.
Passo 10
Agora apenas duplique o E e teremos a palavra ZEE.
Passo 11
vá até Effect>Stylize>Round Corners. Use 5 points para Radius ou tente valores diferentes para aumentar ou reduzir o efeito de arredondamento dos cantos. Contudo eu não gostei do resultado, queria algo mais estilizado.
Passo 12
Decidi então aumentar em 2 módulos o efeito chanfrado.
Passo 13
Agora aplique o 'Round Corner effect' ao novo logo, ainda usei 5 points para Radius. O resultado fica muito melhor, é mais parecido com o que eu havia imaginado. Mas agora preciso criar uma conexão entre os caracteres para dar a idéia doloop.
Passo 14
Fazer isso não é muito difícil. Com a Pen Tool (P) crie os segmentos para conectar o Z ao E (1-2) e o E ao outro E (3-4).
Passo 15
Agora apenas aumente o tamanho do stroke. Eu estou usando 8 points para stroke. O logo está pronto. Ele lembra um pouco aqueles mapas de metro e tem a idéia do loop, exatamente o que queria.
Passo 16
Agora vamos abrir o Photoshop e criar um novo documento. Usei 1024x768 pixels para o tamanho. Preencha a background layer com azul claro (#dde9f5).
Passo 17
Copie o logo do Illustrator e cole no documento do Photoshop.
Passo 18
Vá até Layer>Layer Style>Color Overlay. Use #5d87b6 na Cor e Normal no Blend Mode.
Passo 19
Vá até Layer>Layer Style>Inner Shadow. Use Multiply para Blend Mode, preto na cor, 40% para Opacity, 120º para Angle, 1 pixel para Distance, 0 para Choke e 1 pixel para Size.
Passo 20
Vá até Layer>Layer Style>Drop Shadow. Use Color Dodge para Blend Mode, branco na cor, 100% para Opacity, 90º para Angle, 1 pixel para Distance, 1 pixel para Spread, 0 pixel para Size.
Passo 21
Esse é o efeito que teremos nesse ponto.
Passo 22
Crie uma nova layer e com a Rectangular Marquee Tool (M) crie uma 'rectangle selection' e a preencha com um gradiente de branco para preto com a Gradient Tool (G). Use a imagem abaixo como referência.
Passo 23
Duplique o retângulo e vá até Edit>Transform>Flip Horizontal. Mova ele até que o posicione no outro lado do segmento do E (1-2). Duplique essas 2 layers e as mova para criar o mesmo efeito no outro E (3-4).
Passo 24
Selecione as 4 gradient layers e as agrupe. Pressionando a tecla Command no MAC ou Control no PC, clique no thumbnail da Zee layer no Layers Panel para criar uma marquee selection do logo Zee. Depois disso selecione o grupo com os retângulos e vá até Layer>Layer Mask>Reveal Selection.
Passo 25
Reduza a Opacity do grupo com gradientes para 40%. Assim o efeito ficará muito mais sutil.
Passo 26
Duplique todas as layers e faça merge das cópias em uma única layer. Então vá até Filter>Noise>Add Noise. Use 1.4% para Amount e selecione Gaussian para Distribution and Monochromatic.
Conclusão
Isso é tudo, nosso efeito está pronto. Podemos colocar mais stroke se quisermos deixar o logo mais forte. Se você colou os vetores no Photoshop usando Smart Objects é bem fácil, apenas dê um duplo clique no smart object para abrir o Illustrator e apenas brinque com strokes por lá. Agora, o legal é que o logo usa uma fonte criada desde o início, o que deixa o logo ainda mais original e que foi fácil de fazer noIllustrator usando ferramentas básicas e a opção snap to grid.
Clique na imagem para um preview completo
