Stawer Fórum
Seja bem-vindo ao Stawer Fórum,
Aqui você encontra tudo oque precisa, desde Games à Informática.
Para melho visualização do conteúdo do fórum, Registre-se!

Atenciosamente,
Administração Stawer Fórum.
Stawer Fórum
Seja bem-vindo ao Stawer Fórum,
Aqui você encontra tudo oque precisa, desde Games à Informática.
Para melho visualização do conteúdo do fórum, Registre-se!

Atenciosamente,
Administração Stawer Fórum.
Stawer Fórum
Últimos assuntos
» Template More Create [Blogger]
[Tutorial] Fazer User Bar Animada  EmptyDom Set 14, 2014 4:27 pm por artursk

» Banner Editável !
[Tutorial] Fazer User Bar Animada  EmptyDom Set 07, 2014 7:57 pm por raposa

» Template ATR Habbo - Plataforma Blogger
[Tutorial] Fazer User Bar Animada  EmptyTer Nov 12, 2013 6:17 pm por -Crash

» Fundo blog
[Tutorial] Fazer User Bar Animada  EmptySex Out 04, 2013 4:40 pm por Universal

» apresentaçao
[Tutorial] Fazer User Bar Animada  EmptyQui Jul 18, 2013 6:07 pm por digitalradio

» [TEMPLATE] Cria Habbos [TEMPLATE]
[Tutorial] Fazer User Bar Animada  EmptySáb Abr 27, 2013 10:55 am por Abusado

» Template do HabbMenta
[Tutorial] Fazer User Bar Animada  EmptySeg Mar 18, 2013 6:35 pm por Lolinaa

» Codigo selecione o fundo para blog 2013
[Tutorial] Fazer User Bar Animada  EmptySáb Jan 05, 2013 9:22 am por loko-poko

» Template blog habbo editado pelo the pixelando
[Tutorial] Fazer User Bar Animada  EmptyQua Jan 02, 2013 11:05 am por loko-poko

Os membros mais ativos do mês
Nenhum usuário


Você não está conectado. Conecte-se ou registre-se

[Tutorial] Fazer User Bar Animada

Ver o tópico anterior Ver o tópico seguinte Ir para baixo  Mensagem [Página 1 de 1]

#1[Tutorial] Fazer User Bar Animada  Empty [Tutorial] Fazer User Bar Animada Qua Dez 21, 2011 4:52 pm

BrunoSouza

BrunoSouza
Designer
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:


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

#2[Tutorial] Fazer User Bar Animada  Empty Re: [Tutorial] Fazer User Bar Animada Qua Dez 21, 2011 5:46 pm

AmigoID

AmigoID
Postador
Postador
Cara, Muito Legal ! Gostei do Tutorial =D

http://WelcomeMix.net

#3[Tutorial] Fazer User Bar Animada  Empty Re: [Tutorial] Fazer User Bar Animada Qua Dez 21, 2011 7:50 pm

TheDjPaulo

TheDjPaulo
Amador
Amador
AmigoID escreveu:Cara, Muito Legal ! Gostei do Tutorial =D
Muito bom mesmo.

https://stawer-forum.forumeiros.com

Conteúdo patrocinado


Ver o tópico anterior Ver o tópico seguinte Ir para o topo  Mensagem [Página 1 de 1]


Permissões neste sub-fórum
Não podes responder a tópicos