#1 [Tutorial] Fazer User Bar Animada Qua Dez 21, 2011 4:52 pm
BrunoSouza
Designer
Como fazer uma User Bar animada.
• Abrimos o Photoshop e criamos um novo documento com o tamanho 350 x 20 pixeis com fundo transparente
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
• A seguir vamos pintar o fundo da cor do Tvtuga
A cor do Tvtuga é o numero #FFCC00
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
• Inserimos um logotipo que nos quisermos .. neste caso do Tvtuga
Fazemos Ctrl + Shift + N e metemos OK Assim temos criada uma nova layer
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Agora selecionamos a 2ª layer e vamos a File -» place e escolhem a imagem que querem... nós queremos o logo do tvtuga...
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
• Agora inserimos o Texto que queremos....nós vamos por Tvtuga member
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
• Agora vamos fazer aquelas riscas que se chama Pattern
Vamos a File-» New
e criamos um documento de 6 x 6 pixeis com fundo transparente
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Agora temos de fazer zoom até ficar deste tamanho
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Selecionamos com o Pencil tool (obtemos o pencil tool carregando com o lado direito do rato sobre o Pincel como na imagem)
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
e fazemos isto ou ao vosso gosto
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Agora vamos a Edit -» Define pattern e guardam com um nome qualquer
A seguir podem Fechar sem guardar porque fica guardado nos Pattern
• Agora vamos aplicar as riscas. Fazemos ctrl+ shift+ N para criarmos uma nova layer
Selecionamos essa layer e vamos a edit -» Fill e vai abrir uma janela
Fazemos como mostra a imagem e metemos OK
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
• Agora já temos as riscas vamos por um efeito transparente
Selecionamos a Primeira layer (a do fundo) e selecionamos a Eliptical Marquee Too (Como na imagem abaixo)
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
E fazemos isto:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Quando tivermos feito a seleção carregamos Ctrl+U
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
e alteramos o Valor de Lightness para + 45 e apertamos " Ok "
Agora já Temos uma Userbar!
[center]Userbar animada:
• Abrimos o Photoshop e criamos um novo documento com o tamanho 350 x 20 pixeis com fundo transparente
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
• A seguir vamos pintar o fundo da cor do Tvtuga
A cor do Tvtuga é o numero #FFCC00
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
• Inserimos um logotipo que nos quisermos .. neste caso do Tvtuga
Fazemos Ctrl + Shift + N e metemos OK Assim temos criada uma nova layer
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Agora selecionamos a 2ª layer e vamos a File -» place e escolhem a imagem que querem... nós queremos o logo do tvtuga...
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
• Agora inserimos o Texto que queremos....nós vamos por Tvtuga member
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
• Agora vamos fazer aquelas riscas que se chama Pattern
Vamos a File-» New
e criamos um documento de 6 x 6 pixeis com fundo transparente
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Agora temos de fazer zoom até ficar deste tamanho
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Selecionamos com o Pencil tool (obtemos o pencil tool carregando com o lado direito do rato sobre o Pincel como na imagem)
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
e fazemos isto ou ao vosso gosto
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Agora vamos a Edit -» Define pattern e guardam com um nome qualquer
A seguir podem Fechar sem guardar porque fica guardado nos Pattern
• Agora vamos aplicar as riscas. Fazemos ctrl+ shift+ N para criarmos uma nova layer
Selecionamos essa layer e vamos a edit -» Fill e vai abrir uma janela
Fazemos como mostra a imagem e metemos OK
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
• Agora já temos as riscas vamos por um efeito transparente
Selecionamos a Primeira layer (a do fundo) e selecionamos a Eliptical Marquee Too (Como na imagem abaixo)
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
E fazemos isto:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Quando tivermos feito a seleção carregamos Ctrl+U
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
e alteramos o Valor de Lightness para + 45 e apertamos " Ok "
Agora já Temos uma Userbar!
[center]Userbar animada:
Se queremos fazer uma animação é muito fácil .... vamos para isso aproveitar a nossa bar feita em cima
• Vamos a Window-» Animation
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Agora aparece uma parte em baixo
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
• Escolhemos a Layer do Logotipo e pressionamos o SHIFT e na seta para cima até a imagem ficar como em baixo
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
•
Agora adicionamos uma frame ( 1) e depois selecionamos a imagem e
carregamos SHIFT e na seta baixo até ficar como na imagem em baixo
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
• Agora vamos fazer a animação
selecionamos a 1 frame em baixo e carregamos em Tweens animation( 1)
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Aparecerá esta janela e fazemos tudo como lá está
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Agora
fazemos igual para o outro! Selecionamos a ultima frame vamos a Tweens
animation e fazemos o mesmo que estava na janela anterior
Ficamos com isto:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
• Agora tiramos os frames que não queremos e metemos para aquilo Ficar sempre a dar Metendo Forever como na imagem
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Carregamos no play e voila temos o nosso gif animado...
• Agora para guardar vamos a File -» Save for web & devices
e Metemos tudo como na imagem em baixo e guardamos
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
• Gif que fizemos!
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Tutorial By: Perry.
Postado por: Victor_NOS