Utilizaremos sempre o Fireworks em sua versão MX 2004, que pode ser encontrada no site oficial da Macromedia (http://www.macromedia.com). Nesta coluna iremos utilizar vários métodos para criar o layout à seguir:
Clique na imagem para ampliá-la
Lembrem-se de que devemos ter uma certa manipulação avançada de algumas ferramentas de criação do Fireworks. Qualquer dúvida, entrem em contato comigo ou procurem por colunas anteriores relacionadas. Iremos utilizar muitas imagens de exemplos, dependendo do grau da explicação. Elas poderam ser ampliadas, em casos de difícil visualização.
Bom, agora que visualizaram tudo certo, vamos à primeira etapa:
1 - Criação vetorial para o topo do layout
Essa etapa requer bastante atenção e uma certa habilidade com os vetores e o posicionamento no plano cartesiano (X e Y). Vamos começar pelo topo, onde iremos criar três formar vetoriais. Para isso, vamos desenhar no palco, com a ferramenta Rectangle Tool (U). Inicialmente ela deve estar dimensionada à 829x162; branco e também com borda tamanho 1 na cor #80B3E6. Primeiro vamos desagrupá-lo e depois posicionar as hastes dos vértices (pontos) do vetor.
Após isso iremos configurar em suas propriedades as seguintes características:
X= -28
Y= -5
Feito isso iremos aplicar o efeito Inner Glow. Ele deverá ter a mesma cor da borda, #80B3E6, e uma suavização de 12, opacidade de 65% (formato original) e intensidade de 5. Agora temos o seguinte resultado:
Uma boa dica para trabalhar com vetores e esses detalhes é a de usar o famoso Ctrl+C e Ctrl+V, ou seja copiar e colar os vetores, um em cima do outro, apenas mudando algumas características de suas propriedades. Vamos dar continuidade ao desenho do topo utilizando esse método, que economiza tempo na criação do layout. Copie e cole o vetor e segurando a tecla Shift, pressione a direcional Superior do teclado, fazendo com que ele pule 10px.
Agora vamos editar as informações próprias do objeto vetorial. Vamos continuar com o Inner Glow, a diferença é que iremos agora adicionar o efeito Linear, do degradê. As cores são duas, que começa do branco (#FFFFFF) ao nosso azul customizado (#A3C8ED). Vamos posicionar o ponto de origem do raio gradiente acima da reta superior do vetor, e colocando o raio em direção contrária, totalmente abrangente ao objeto.
Bom, agora só falta fazer o nosso último vetor que finaliza esta etapa, iremos fazer a mesma coisa que anteriormente, e com a cópia do vetor, iremos pocisioná-la em x=-37 e y=-15. Feito isso iremos retirar o linear, e deixar no preenchimento sólido branco, ainda com o brilho interno. As hastes deverão estar pocisionadas da mesma forma que representada na imagem abaixo:
Pronto, agora terminamos de desenhar a "base" do topo. Não foi tão trabalhoso, né galera? Mas não paramos por aqui. Agora vamos criar o principal, a logomarca e o texto. Vamos utilizar a ferramenta Elipse Tool.
2 - Detalhes do topo
Agora, iremos desenhar a sombra da esfera, que ficará abaixo da mesma (obviamente). Com 112px de largura e 49px de altura, a elipse deverá estar pocisionado a 39px à horizontal e 83px à vertical. Agora, vamos editar o restante das propriedades.
Como na imagem acima, o elipse deverá estar com Edge: Feather (10), que irá enevoar o objeto. O preenchimento deve ser de #0066CC, tá legal? Agora vamos desenhar a esfera.
Iremos desenhar novamente um elipse, desabilite o efeito de névoa do elipse e dimensione ele em 133x119. No plano cartesiano, X e Y devem estar configurados nas proporções de 26x4. Vamos preencher o circulo com o efeito degradê. escolha a opção Ellipse (dica: aplique antes o preenchimento #FF0000). Feito isso teremos as cores #FFFFFF e #FF0000 no degradê. Agora vamos aplicar alguns efeitos. Primeiro, o Inner Glow, que deverá ter tamanho 2, suavização de 20 e opacidade de 85%. O próximo efeito é o de Brightness/Contrast, ele pode ser adicionado como mostra na imagem abaixo. Configure-o para ter um brilho de -1 e contraste de 21.
Bom, para quem conhece o famoso "Efeito Aqua", ele é feito da seguinte forma: Criamos outro elipse quase que cobrindo totalmente o anterior, mas ele deve ter a forma mais oval, com as proporções dimensionais de 92x74. X deve ser 48 e Y, 10. Agora vamos aplicar o degradê Linear. ele deve estar nas cores branca (#FFFFFF) para preta (#000000). Agora vá em propriedades e aplique o efeito Screen. Após isso aplique o Brightness/Contrast no objeto, com as mesmas propriedades do elipse anterior, para que as cores permanecam equivalentes. Feito isso vamos ajustar o raio do linear para que fique da seguinte aparência:
Agora o resto do logo é muito fácil. Façamos o seguinte: Escrevemos o texto "YES" de Tahoma com tamanho 60, com itálico e negrito. Agora preenchemos o texto de branco e adicionamos o efeito Tint com opacidade de 65%. Vamos escrever agora, com X=185 e Y=40, a frase "Your English School", com preenchimento #0066CC. Vamos convertê-lo para vetor, através do comando pelo teclado, Ctrl+Shift+P. Agora vamos em Effects / Blur / Motion Blur... Na caixa de opções que irá abrir, configuramos o ângulo (Angle) a 241º e a distância (Distance) em 12, finalizamos com o o bom e velho OK. Agora copiamos e colamos nosso texto, e o movemos a 15px para baixo. Vamos dimensioná-lo a 277x19. Bom vamos tirar aquilo tudo de Motion Blur, tudo, tudo! Agora, o único efeito é o de Drop Shadow (Sombra). Vamos aplicá-lo no objeto e editar as propriedades:
Preenchimento: #0066CC
Suavização: 0
Ângulo: 64
Opacidade: 100%
Por fim, colocamos o texto na cor branca e vamos para Url, logo abaixo do mesmo. Ela é a mais básica de se fazer. Criamos o texto "http://www.y3s.com.br" com a fonte Tahoma, com tamanho 9, em negrito, No Anti Alias e desabilitamos o auto Kern, para que o texto não fique muito próximo. Eis o nosso resultado:
Terminamos a primeira etapa da nossa maratona de layouts, na próxima coluna, iremos dar continuidade à criação do layout, agora com duas etapas mais simples de serem realizadas, agora que já descobrimos muitos truques e dicas da poderosa ferramenta Fireworks. Não se subestimem, pois ele é capaz de surpreendê-los ainda mais!
1 comentários:
uau!
:o
Postar um comentário