Como Fazer User Bar Animada

Como Fazer User Bar Animada · por AmigoID Qui Dez 29, 2011 12:17 pm

Como fazer uma User Bar animada.

• Abrimos o Photoshop e criamos um novo documento com o tamanho 350 x 20 pixeis com fundo transparente
Como Fazer User Bar Animada Fa68na

• A seguir vamos pintar o fundo da cor do Tvtuga

A cor do Tvtuga é o numero #FFCC00
Como Fazer User Bar Animada Rwl7hx

• Inserimos um logotipo que nos quisermos .. neste caso do Tvtuga

Fazemos Ctrl + Shift + N e metemos OK Assim temos criada uma nova layer
Como Fazer User Bar Animada Jkg5qe

Agora selecionamos a 2ª layer e vamos a File -» place e escolhem a imagem que querem... nós queremos o logo do tvtuga...
Como Fazer User Bar Animada 23vgep3

• Agora inserimos o Texto que queremos....nós vamos por Tvtuga member
Como Fazer User Bar Animada 9ldi09

• 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
Como Fazer User Bar Animada O51ehd

Agora temos de fazer zoom até ficar deste tamanho
Como Fazer User Bar Animada 24edl07

Selecionamos com o Pencil tool (obtemos o pencil tool carregando com o lado direito do rato sobre o Pincel como na imagem)
Como Fazer User Bar Animada 2vl9us5

e fazemos isto ou ao vosso gosto
Como Fazer User Bar Animada 24nmdug

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
Como Fazer User Bar Animada 2mzluc

• 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)
Como Fazer User Bar Animada 30awdwm

E fazemos isto:
Como Fazer User Bar Animada Am3acl

Quando tivermos feito a seleção carregamos Ctrl+U
Como Fazer User Bar Animada 2ahd28k

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

Como Fazer User Bar Animada 2wr16ol

Agora aparece uma parte em baixo

Como Fazer User Bar Animada Rap6c0

• Escolhemos a Layer do Logotipo e pressionamos o SHIFT e na seta para cima até a imagem ficar como em baixo

Como Fazer User Bar Animada 2rgdi15

•
Agora adicionamos uma frame ( 1) e depois selecionamos a imagem e
carregamos SHIFT e na seta baixo até ficar como na imagem em baixo

Como Fazer User Bar Animada 54vh5i

• Agora vamos fazer a animação

selecionamos a 1 frame em baixo e carregamos em Tweens animation( 1)

Expandir esta imagem Ver em tamanho real
Como Fazer User Bar Animada 14sdxrd

Aparecerá esta janela e fazemos tudo como lá está
Como Fazer User Bar Animada 2ls9xkg

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:

Como Fazer User Bar Animada 2643zir

• Agora tiramos os frames que não queremos e metemos para aquilo Ficar sempre a dar Metendo Forever como na imagem

Como Fazer User Bar Animada 28sc8t3

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

Como Fazer User Bar Animada 2elh9v4

• Gif que fizemos!
Como Fazer User Bar Animada Okap0i

Tutorial By: Perry.
Postado por: Victor_NOS