[Tutorial] Userbar Simples e Animada

Introdução

Olá pessoal, vejo que muita gente quer saber como faz uma Userbar animada, por isso resolvi fazer um Tutorial rapido e eficiente que vceis possam entender. Aqui irei ensinar primeiro a simples, dps partiremos para a animada e não se assustem, é muuito simples. Irei utilizar o Photoshop CS4, bom vamos a aula:

Criando a Userbar simples.

Primeiramente você ira fazer uma userbar como qualquer outra que iria fazer, abra um Documento com o tamanho 350x19 com o fundo transparente:


Após isso, você deve selecionar a ferramenta Gradient Tool (se quiser a userbar com 2 cores) e selecionar 2 Cores e clicar e arrasta na imagem, ela devera ficar assim:


Bom essas foram as cores que eu escolhi, agora vamos ao proximo passo, iremos fazer uma Scanline, crie uma nova Layer (camada) e selecione a Ferramenta Pattern Stamp Tool (É um carimbo) e selecione uma Pattern e passe por cima da imagem, após isso, diminua sua opacidade para 25% com isso ela devera ficar assim:


Agora o proximo passo é colocar seu texto, crie uma Camada de Texto, e escreva o que quiser, a fonte certa para uma userbar é a Visitor TT2 BRK (Você acha ela em qualquer lugar, no Google mesmo) e o tamanho é 10, bom vc escreve o que quiser, no meu caso escrevi isso:


Bom, mais ai vceis me dizem, a fonte esta horrivel e não da pra ver ela. Então iremos colocar uma "margem" no texto, vá em Layer > Layer Style > Stroke e selecione 1 px, sua userbar ficara assim:


O proximo passo agora, é dar um efeito de Cristal na userbar, ou luz, chame como quiser, para isso crie uma nova Layer (camada) e selecione a Ferramenta Elliptical Marquee Tool e faça um meio circulo na userbar, deixando ela assim:


Após isso, selecione a ferramente Paint Bucket Tool (ou balde de tinta como a maioria chama) e pinte de branco, após isso, diminua a opacidade dela pra 25%, deixando ela assim:


Está ficando bonita não ? Estamos chegando no final, ah, so pra avisar, nessa ai eu não vou colocar uma imagem, mais vou explicar como faz na parte Extra do Tutorial, agora voltando na userbar, vamos dar o toque final para começarmos a fazer ela animada, crie uma nova Layer e vá em Select > All > Edit > Stroke e coloque 1 px (pixel) com isso ela ficara assim:


Bom gente, terminamos a primeira parte do Tutorial, agora vamos para a Segunda, como fazer ela animada, mais antes, aqui o resultado:



Bom gente, usarei o modelo feito acima, para fazer ela animada. Eu irei fazer o texto piscando, mais com treino, conseguese fazer de todo jeito. Bom para começar com a userbar já feita, vá em Window > Animation após isso ira abrir uma aba em baixo desse jeito:


O tipo q eu irei fazer, precisa de 6 Frames para ficar animada, para criar as Frames clique aqui onde está em vermelho:


O meu ficou assim:


Agora, vamos colocar a animação, como disse irei fazer animação no texto e piscando, para isso, vá na primeira Frame e deixe a opacidade do Texto em 100%, depois vá na 2ª Frame e diminua ela para 80%, depois vá na 3ª Frame e diminua para 60%, vá na 4ª e diminua para 40%, vá na 5ª e diminua para 20% e por ultimo va na 6ª frame e diminua para 0% e mais um Detalhe, para sua animação ficar se repetindo toda hora, você deve ali onde está Once ou 3 Times ou Forever, você deve deixar selecionado a Forever. Agora, você seleciona o tempo de sua animação, se quer piscando muito rapida ou não, repare, em baixo de cada Frame está 0 sec. Isso significa o tempo que ela demorara para passar, no meu exemplo colocarei assim, no primeiro 2sec e no resto 1sec. Deixando assim:


Agora para finalizar, teste sua animação apertanto o simbolo de Play, e veja se ficou como queria. E é so salvar. Apenas um Detalhe, quando for salvar uma Userbar animada, vá em File > Save for Web e Devices e salvea selecionando o Formato Gif. Bom gente, é isso ai, espero que tenham gostado do meu 1º Tutorial, Resultado:


Espero que ajude vocêis, abraços e comentem

PS: Dei apenas um exemplo, e fiz ela meia feia, pois ninguem no começo acerta na primeira, eu posso dizer q sou especialista nisso, so fiz feia, para mostrar ha vceis q podem melhorar.

Em breve criarei um Tuto de como fazer as animações nas imagens.

Esse seu tutorial é mto bom wtd, aorei *-*
Vou tentar fazer, mas acho qeu nao vou conseguir hehehe

Kra, nem lembro quanto tempo eu havia demorado pra fazer userbars! Eu fikei treinando umas semanas fazendo um moonte de userbars.

tipow, tem um jeito mais facil de colocar a animação, e so precisa de 2 layers^^
na primeira vc coloca uma opacidade ao seu gosto, e na segunda coloca 100%
apos isso clica no botão tween (umas 3 bolas na window animation) e coloca 6 frames, dai sua animação ta feita^^
ahh, mas ficou bem legal o seu tuto^^

Pois é, porém, cada jeito é uma animação diferente. E valeu pelo Comentario e pela ajuda.

Esse ai do hiryu é o chamado motion tween ^^

Mas eu adorei seu jeito tbm WTD,vlw por este belo tutorial !

Aleluia irmãos...

Tava esperando por ele,lol ele ja tava aqui faz tempo,mas não tinha visto aeuhue

N

legal o tutu.

Huahuahua...mto mais facil fazer com a timeline do CS5, vc coloca só uns keyframes e o tween faz sózinho...

@Eskilo

Putz tenho CS5 é não sabia dessa ferramenta.

@Topic

Putz ótimo tuto adorei, concerteza vai mim ajudar em uns detalhes valeu ai.

O tween não é do cs5 .-.

Até no cs2 já tinha... No cs eu não sei porque nunca usei =|

É uma ferramenta interessante, eu gosto dela ^^