Feliz ano novo para você!
Área Vip, os códigos mais inovadores
Leia as Regras do SP-Design
Publique no SPublicidade
Modifique o visual do seu fórum
Faça Pedidos Gráficos para seu fórum
Novo Administrador na comunidade
StyLe®
Moderador
Mensagens : 1469 Reputação : 180
Inscrição : 15/05/2012 Cash : 5014
Inscrição : 15/05/2012 Cash : 5014
Ter 05 Jun 2012, 7:00 pm | |
• Abrimos o Photoshop e criamos um novo documento com o tamanho 350 x 20 pixeis com fundo transparente
Expandir esta imagemReduzir esta imagem Ver em tamanho real
![[TUTORIAL] CRIANDO USERS BARS 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
Expandir esta imagemReduzir esta imagem Ver em tamanho real
![[TUTORIAL] CRIANDO USERS BARS 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] CRIANDO USERS BARS 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] CRIANDO USERS BARS 23vgep3](https://2img.net/h/oi38.tinypic.com/23vgep3.png)
• Agora inserimos o Texto que queremos....nós vamos por Tvtuga member
![[TUTORIAL] CRIANDO USERS BARS 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
Expandir esta imagemReduzir esta imagem Ver em tamanho real
![[TUTORIAL] CRIANDO USERS BARS O51ehd](https://2img.net/h/oi33.tinypic.com/o51ehd.png)
Agora temos de fazer zoom até ficar deste tamanho
![[TUTORIAL] CRIANDO USERS BARS 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] CRIANDO USERS BARS 2vl9us5](https://2img.net/h/oi37.tinypic.com/2vl9us5.png)
e fazemos isto ou ao vosso gosto
![[TUTORIAL] CRIANDO USERS BARS 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] CRIANDO USERS BARS 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] CRIANDO USERS BARS 30awdwm](https://2img.net/h/oi35.tinypic.com/30awdwm.png)
E fazemos isto:
![[TUTORIAL] CRIANDO USERS BARS Am3acl](https://2img.net/h/oi36.tinypic.com/am3acl.png)
Quando tivermos feito a seleção carregamos Ctrl+U
![[TUTORIAL] CRIANDO USERS BARS 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!
Se queremos fazer uma animação é muito fácil .... vamos para isso aproveitar a nossa bar feita em cima
• Vamos a Window-» Animation
![[TUTORIAL] CRIANDO USERS BARS 2wr16ol](https://2img.net/h/oi36.tinypic.com/2wr16ol.png)
Agora aparece uma parte em baixo
Expandir esta imagemReduzir esta imagem Ver em tamanho real
![[TUTORIAL] CRIANDO USERS BARS 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
Expandir esta imagemReduzir esta imagem Ver em tamanho real
![[TUTORIAL] CRIANDO USERS BARS 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
Expandir esta imagemReduzir esta imagem Ver em tamanho real
![[TUTORIAL] CRIANDO USERS BARS 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)
Expandir esta imagemReduzir esta imagem Ver em tamanho real
![[TUTORIAL] CRIANDO USERS BARS 14sdxrd](https://2img.net/h/oi34.tinypic.com/14sdxrd.png)
Aparecerá esta janela e fazemos tudo como lá está
![[TUTORIAL] CRIANDO USERS BARS 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:
Expandir esta imagemReduzir esta imagem Ver em tamanho real
![[TUTORIAL] CRIANDO USERS BARS 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
Expandir esta imagemReduzir esta imagem Ver em tamanho real
![[TUTORIAL] CRIANDO USERS BARS 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
Expandir esta imagemReduzir esta imagem Ver em tamanho real
![[TUTORIAL] CRIANDO USERS BARS 2elh9v4](https://2img.net/h/oi38.tinypic.com/2elh9v4.png)
• Gif que fizemos!
![[TUTORIAL] CRIANDO USERS BARS Okap0i](https://2img.net/h/oi37.tinypic.com/okap0i.gif)
Expandir esta imagemReduzir esta imagem Ver em tamanho real
• A seguir vamos pintar o fundo da cor do Tvtuga
A cor do Tvtuga é o numero #FFCC00
Expandir esta imagemReduzir esta imagem Ver em tamanho real
• Inserimos um logotipo que nos quisermos .. neste caso do Tvtuga
Fazemos Ctrl + Shift + N e metemos OK Assim temos criada uma nova layer
Agora selecionamos a 2ª layer e vamos a File -» place e escolhem a imagem que querem... nós queremos o logo do tvtuga...
• Agora inserimos o Texto que queremos....nós vamos por Tvtuga member
• 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
Expandir esta imagemReduzir esta imagem Ver em tamanho real
Agora temos de fazer zoom até ficar deste tamanho
Selecionamos com o Pencil tool (obtemos o pencil tool carregando com o lado direito do rato sobre o Pincel como na imagem)
e fazemos isto ou ao vosso gosto
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
• 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)
E fazemos isto:
Quando tivermos feito a seleção carregamos Ctrl+U
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
Agora aparece uma parte em baixo
Expandir esta imagemReduzir esta imagem Ver em tamanho real
• Escolhemos a Layer do Logotipo e pressionamos o SHIFT e na seta para cima até a imagem ficar como em baixo
Expandir esta imagemReduzir esta imagem Ver em tamanho real
• Agora adicionamos uma frame ( 1) e depois selecionamos a imagem e carregamos SHIFT e na seta baixo até ficar como na imagem em baixo
Expandir esta imagemReduzir esta imagem Ver em tamanho real
• Agora vamos fazer a animação
selecionamos a 1 frame em baixo e carregamos em Tweens animation( 1)
Expandir esta imagemReduzir esta imagem Ver em tamanho real
Aparecerá esta janela e fazemos tudo como lá está
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:
Expandir esta imagemReduzir esta imagem Ver em tamanho real
• Agora tiramos os frames que não queremos e metemos para aquilo Ficar sempre a dar Metendo Forever como na imagem
Expandir esta imagemReduzir esta imagem Ver em tamanho real
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
Expandir esta imagemReduzir esta imagem Ver em tamanho real
• Gif que fizemos!
Destaque do Fórum
Muito Obrigado
