Sex 11 Mar 2011, 4:09 pm
Tutorial: Como fazer uma User Bar animada.
• Abrimos o Photoshop e criamos um novo documento com o tamanho 350 x 20 pixeis com fundo transparente
![[TUTORIAL] FAZER USER BAR ANIMADA COM PHOTOSHOP! Fa68na](https://2img.net/h/oi36.tinypic.com/fa68na.png)
• A seguir vamos pintar o fundo da cor do Tvtuga
A cor do Tvtuga é o numero #FFCC00
![[TUTORIAL] FAZER USER BAR ANIMADA COM PHOTOSHOP! Rwl7hx](https://2img.net/h/oi33.tinypic.com/rwl7hx.png)
• Inserimos um logotipo que nos quisermos .. neste caso do Tvtuga
Fazemos Ctrl + Shift + N e metemos OK Assim temos criada uma nova layer
![[TUTORIAL] FAZER USER BAR ANIMADA COM PHOTOSHOP! Jkg5qe](https://2img.net/h/oi37.tinypic.com/jkg5qe.png)
Agora selecionamos a 2ª layer e vamos a File -» place e escolhem a imagem que querem... nós queremos o logo do tvtuga...
![[TUTORIAL] FAZER USER BAR ANIMADA COM PHOTOSHOP! 23vgep3](https://2img.net/h/oi38.tinypic.com/23vgep3.png)
• Agora inserimos o Texto que queremos....nós vamos por Tvtuga member
![[TUTORIAL] FAZER USER BAR ANIMADA COM PHOTOSHOP! 9ldi09](https://2img.net/h/oi36.tinypic.com/9ldi09.png)
• 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
![[TUTORIAL] FAZER USER BAR ANIMADA COM PHOTOSHOP! O51ehd](https://2img.net/h/oi33.tinypic.com/o51ehd.png)
Agora temos de fazer zoom até ficar deste tamanho
![[TUTORIAL] FAZER USER BAR ANIMADA COM PHOTOSHOP! 24edl07](https://2img.net/h/oi37.tinypic.com/24edl07.png)
Selecionamos com o Pencil tool (obtemos o pencil tool carregando com o lado direito do rato sobre o Pincel como na imagem)
![[TUTORIAL] FAZER USER BAR ANIMADA COM PHOTOSHOP! 2vl9us5](https://2img.net/h/oi37.tinypic.com/2vl9us5.png)
e fazemos isto ou ao vosso gosto
![[TUTORIAL] FAZER USER BAR ANIMADA COM PHOTOSHOP! 24nmdug](https://2img.net/h/oi37.tinypic.com/24nmdug.png)
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
![[TUTORIAL] FAZER USER BAR ANIMADA COM PHOTOSHOP! 2mzluc](https://2img.net/h/oi34.tinypic.com/2mzluc.png)
• 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)
![[TUTORIAL] FAZER USER BAR ANIMADA COM PHOTOSHOP! 30awdwm](https://2img.net/h/oi35.tinypic.com/30awdwm.png)
E fazemos isto:
![[TUTORIAL] FAZER USER BAR ANIMADA COM PHOTOSHOP! Am3acl](https://2img.net/h/oi36.tinypic.com/am3acl.png)
Quando tivermos feito a seleção carregamos Ctrl+U
![[TUTORIAL] FAZER USER BAR ANIMADA COM PHOTOSHOP! 2ahd28k](https://2img.net/h/oi35.tinypic.com/2ahd28k.png)
e alteramos o Valor de Lightness para + 45 e apertamos " Ok "
Agora já Temos uma Userbar!
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
![[TUTORIAL] FAZER USER BAR ANIMADA COM PHOTOSHOP! 2wr16ol](https://2img.net/h/oi36.tinypic.com/2wr16ol.png)
Agora aparece uma parte em baixo
![[TUTORIAL] FAZER USER BAR ANIMADA COM PHOTOSHOP! Rap6c0](https://2img.net/h/oi34.tinypic.com/rap6c0.png)
• Escolhemos a Layer do Logotipo e pressionamos o SHIFT e na seta para cima até a imagem ficar como em baixo
![[TUTORIAL] FAZER USER BAR ANIMADA COM PHOTOSHOP! 2rgdi15](https://2img.net/h/oi36.tinypic.com/2rgdi15.png)
• Agora adicionamos uma frame ( 1) e depois selecionamos a imagem e carregamos SHIFT e na seta baixo até ficar como na imagem em baixo
![[TUTORIAL] FAZER USER BAR ANIMADA COM PHOTOSHOP! 54vh5i](https://2img.net/h/oi34.tinypic.com/54vh5i.png)
• Agora vamos fazer a animação
selecionamos a 1 frame em baixo e carregamos em Tweens animation( 1)
![[TUTORIAL] FAZER USER BAR ANIMADA COM PHOTOSHOP! 14sdxrd](https://2img.net/h/oi34.tinypic.com/14sdxrd.png)
Aparecerá esta janela e fazemos tudo como lá está
![[TUTORIAL] FAZER USER BAR ANIMADA COM PHOTOSHOP! 2ls9xkg](https://2img.net/h/oi37.tinypic.com/2ls9xkg.png)
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:
![[TUTORIAL] FAZER USER BAR ANIMADA COM PHOTOSHOP! 2643zir](https://2img.net/h/oi38.tinypic.com/2643zir.png)
• Agora tiramos os frames que não queremos e metemos para aquilo Ficar sempre a dar Metendo Forever como na imagem
![[TUTORIAL] FAZER USER BAR ANIMADA COM PHOTOSHOP! 28sc8t3](https://2img.net/h/oi34.tinypic.com/28sc8t3.png)
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
![[TUTORIAL] FAZER USER BAR ANIMADA COM PHOTOSHOP! 2elh9v4](https://2img.net/h/oi38.tinypic.com/2elh9v4.png)
• Gif que fizemos!
![[TUTORIAL] FAZER USER BAR ANIMADA COM PHOTOSHOP! Okap0i](https://2img.net/h/oi37.tinypic.com/okap0i.gif)
Tutorial By: Perry.
Postado por: Victor_NOS
![[TUTORIAL] FAZER USER BAR ANIMADA COM PHOTOSHOP! 11735](https://2img.net/u/3114/16/11/60/smiles/11735.gif)
