Tutorial - Criando uma Userbar

Aprenda a instalar e usar programas, baixar arquivos, usar serviços, etc
Avatar do usuário
kazuo
Kouhai
Mensagens: 234
Registrado em: Sáb Ago 12, 2006 6:12 pm
Localização: Campinas - SP

Tutorial - Criando uma Userbar

Mensagem por kazuo »

Yo MinnaSan! Ikaga desu ka?

Vou postar então o tutorial de userbar, fiz um bem simples, usei o Rurouni Kenshin como tema, nada muuuito complicado, e desde já eu falo pra vocês, nada, nada mesmo depende do programa, mas sim da sua habilidade e criatividade, ok?
Eu uso o Photoshop CS1, então o tutorial vai ser baseado nele, quem quiser saber como encontrar o programa PM-me[Copiando KeiKun, gomen XD].

Primeiro eu peço que vocês façam isso com calma e sem pressa, afinal se não der certo você não gastou nada além de tempo =], é só tentar de novo. Let's rock...

>>0<< - Ponham uma boa música, eu preciso de uma boa música pra poder fazer isso XD então, com vocês acho que vai ser melhor também o/. Ao som de P.O.D. - Roots In Stereo

Imagem
1 - Abrindo o PS[Photoshop] vocês terão nada, então vamos em File[Arquivo] > Novo.

[img]http://img149.imageshack.us/img149/3675/2mp8.jpg[/img]
2- Nesta tela coloquem as dimensões que quiserem, eu recomendo 350x20, não é necessário colocar nome.

[img]http://img250.imageshack.us/img250/5334/3tx6.jpg[/img]
3- Apresento o balde o/, com certeza vocês já usaram ele no paint, então sabem como se usa aqui né? É a mesma coisa =]

[img]http://img442.imageshack.us/img442/976/4qb2.jpg[/img]
4 - Como eu disse vou usar o Kenshin como base, logo vamos em File[Arquivo]>Open[Abrir] e abrimos o arquivo que desejarmos. Para dar zoom, utilizem a rodinha do Mouse ou a ferramenta zoom, uma lupa ali na barra de ferramentas, ou apertem Ctrl+'+'

[img]http://img442.imageshack.us/img442/7750/5nm2.jpg[/img]
5- Utilizando a ferramenta mostrada nessa figura a gente seleciona parte ou tudo da figura, um Ctrl+C [comando básico de trabalhos escolares].

[img]http://img254.imageshack.us/img254/6070/6ss6.jpg[/img]
6 - Aqui vem uma parte importante, após o Ctrl+V[outro comando muito utilizado pelos amantes do Google e Wikipédia XD], você poderá posicionar a figura com a ferramenta selecionada ali na figura[veja, selecionada, não destacada] ou redimensionar ela, bom ae vocês tomodachi's me perguntam, como a gente redimensiona, ora apertem Ctrl+T o/. Após redimensionar cliquem em qualque outra ferramenta, como o conta-gotas ali, a ferramenta destacada, e cliquem em Apply[Aplicar] para que o novo tamanho seja aplicado. Então, após selecionar o conta-gotas clique em uma região da figura e obtenha a cor...

Imagem
7 - ... No meu caso essa cor não muito bonita, nem feia... Enfim, é só uma questão de combinar com a figura, vocês podem colocar a cor que quiserem =].

[img]http://img157.imageshack.us/img157/4746/8uv5.jpg[/img]
8 - Selecionem essa ferramenta destacada, o pincel \o/ [ou o balde] e completem a região onde não está a figura, como na imagem acima... dica: Para aumentar o tamanho do pincel pressione ']' e para diminuir '[' ok?

[img]http://img157.imageshack.us/img157/1349/9cm4.jpg[/img]
9 - Agora pessoal é a parte que vocês precisam de uma boa música, e muita criatividade, é só vocês preencherem o espaço em branco com o que quiserem[de verdade]. No meu caso eu peguei a cor escura da figura e aplicando um efeito do pincel[como fazer isso? botão direito no espaço 'desenhável' e selecione a largura e efeito do pincel] eu coloquei folhas como as da figura, só para enfeitar.

[img]http://img157.imageshack.us/img157/869/10yy8.jpg[/img]
10 - Nada absurdo neh? Apenas criatividade, o que vai fazer sua userbar bonita é isso ok?

Imagem
11 - Agora pessoal, selecionem a ferramenta de texto, um "T" ali na barra de ferramentas, e cliquem na parte desenhável, digitem o texto que quiserem. Eeeeentão olhem para a esquerda e no painel de layers vocês verão uma camada com o texto que vocês digitaram[Meoo, esse painel não tá aparecendo, pressione F7 certo?!] Aaaai MinnaSan vocês clicam com o botão direito nessa camada[layer] e selecionam blending options.

[img]http://img440.imageshack.us/img440/3781/12lf5.jpg[/img]
12 - Configurando como na figura acima, vocês obterão o resultado ali do lado, o texto envolto por uma linha preta =] É claro que se vocês digitaram em preto ele não aparecerá, logo selecionem o texto com a ferramenta texto e mudem no painel de cima a cor para branco, ou outra do seu gosto =]

[img]http://img253.imageshack.us/img253/3733/13vd5.jpg[/img]
13 - Agora isso é o efeito natural de toooooda userbar, toda pq todo mundo faz, e realmente é um efeito legal. MinnaSan, sabe aquele painel de layers? Pois bem, o seu deve estar com 3, ou quem sabe duas, selecione a layer que você pintou o fundo, no meu caso é a mesma da figura, acredito que no de vocês também não é? E sigam o mesmo procedimento acima [Botão direito > Blending Options] só que, selecionem o item Bevel and Emboss, como na figura acima, e configurem desse jeito para ficar igual, oooou [usem a criatividade!] coloquem do jeito que quiserem a luz e a sombra ok?


É isso MinnaSan, espero que tenham gostado e mostrem suas userbars daqui algum tempo!
Espero ter ajudado...
Mata o/


PS> ラファ君、せんぱいではありませんね。
Editado pela última vez por kazuo em Sex Jan 19, 2007 9:08 pm, em um total de 2 vezes.
Avatar do usuário
Ricardo
Kouhai
Mensagens: 95
Registrado em: Sex Set 15, 2006 4:34 pm
Localização: Joinville - SC
Contato:

Mensagem por Ricardo »

Sim! Sempre quis saber como se faz isso!
Eu acho interessante!

またね!
[img]http://xs312.xs.to/xs312/07070/sainwolflfu.png[/img]
Avatar do usuário
DFN
Senpai
Mensagens: 359
Registrado em: Sex Jun 23, 2006 2:55 pm
Localização: jundiaì-SP ( nao me pergunte como chega aki :P )
Contato:

Mensagem por DFN »

ehhhhhhhhh
eu quero aprender XD
[img]http://nihonmix.xisde.net/userbar.gif[/img]
Imagem
Imagem
[img]http://i132.photobucket.com/albums/q40/dfn_2007/ava01.gif[/img]
Imagem
Avatar do usuário
kazuo
Kouhai
Mensagens: 234
Registrado em: Sáb Ago 12, 2006 6:12 pm
Localização: Campinas - SP

Mensagem por kazuo »

Yo MinnaSan, só dois postaram mas tudo bem, se fosse um só eu já ficava feliz XD o/
Vou fazer com um tema ok? posto daqui um tempo

Mata MinnaSan! o/
Avatar do usuário
DFN
Senpai
Mensagens: 359
Registrado em: Sex Jun 23, 2006 2:55 pm
Localização: jundiaì-SP ( nao me pergunte como chega aki :P )
Contato:

Mensagem por DFN »

ok... XD XD XD
[img]http://nihonmix.xisde.net/userbar.gif[/img]
Imagem
Imagem
[img]http://i132.photobucket.com/albums/q40/dfn_2007/ava01.gif[/img]
Imagem
Avatar do usuário
RafaKun
Kouhai
Mensagens: 114
Registrado em: Sáb Set 09, 2006 8:50 pm

Mensagem por RafaKun »

:D pooo vai ser legal sim ^^
Imagem





Imagem
Beto
Senpai
Mensagens: 330
Registrado em: Sex Jun 23, 2006 8:20 pm
Localização: Japão
Contato:

Mensagem por Beto »

Aeeeee! Omedetou!!
OtouKun mandou bem!!! ^^
Ficou show mesmo, qualquer hora vou ver se faço uma de novo, nunca mais fucei com editores de imagem. xD
Sugoi!
Mata!
Avatar do usuário
DFN
Senpai
Mensagens: 359
Registrado em: Sex Jun 23, 2006 2:55 pm
Localização: jundiaì-SP ( nao me pergunte como chega aki :P )
Contato:

Mensagem por DFN »

vo fazer o meu no corel 11 e posta aki... :):):):):) :)
[img]http://nihonmix.xisde.net/userbar.gif[/img]
Imagem
Imagem
[img]http://i132.photobucket.com/albums/q40/dfn_2007/ava01.gif[/img]
Imagem
Avatar do usuário
Keitarou
Senpai
Mensagens: 1257
Registrado em: Sex Jun 23, 2006 10:23 am
Localização: Rio de Janeiro
Contato:

Mensagem por Keitarou »

Boa Kazuo-kun, muito bem explicado! Nunca tive coragem de tentar fazer uma userbar, resolvi testar e minhas primeiras tentativas estão na minha assinatura
Editado pela última vez por Keitarou em Sáb Jan 20, 2007 1:33 am, em um total de 1 vez.
Avatar do usuário
kazuo
Kouhai
Mensagens: 234
Registrado em: Sáb Ago 12, 2006 6:12 pm
Localização: Campinas - SP

Mensagem por kazuo »

Yo MinnaSan! Ikaga desu ka?
Fico Feliz que tenham gostado, e façam como o Keitarou Sensei, postem as suas o/

Mata nee o/
Avatar do usuário
DFN
Senpai
Mensagens: 359
Registrado em: Sex Jun 23, 2006 2:55 pm
Localização: jundiaì-SP ( nao me pergunte como chega aki :P )
Contato:

Mensagem por DFN »

fiz os meus :)... vou aprimoralos XD
[img]http://nihonmix.xisde.net/userbar.gif[/img]
Imagem
Imagem
[img]http://i132.photobucket.com/albums/q40/dfn_2007/ava01.gif[/img]
Imagem
Avatar do usuário
Ricardo
Kouhai
Mensagens: 95
Registrado em: Sex Set 15, 2006 4:34 pm
Localização: Joinville - SC
Contato:

Mensagem por Ricardo »

Pô, achei muito legal o tutorial kazuo-san!
Já vou tentar fazer minha user bar e por na minha assinatura!

またね!
[img]http://xs312.xs.to/xs312/07070/sainwolflfu.png[/img]
Avatar do usuário
kazuo
Kouhai
Mensagens: 234
Registrado em: Sáb Ago 12, 2006 6:12 pm
Localização: Campinas - SP

Mensagem por kazuo »

Hey eh isso ae, daqui a pouco as página vão ficar mais pesadas, várias img's de userbar.
Pra quem já fez, parabéns estão muito bons, e como eu disse tudo é uma questão de criatividade não é?
Ganbatte MinnaSan!
Mata o/
Avatar do usuário
h34d4k3
Mensagens: 42
Registrado em: Seg Nov 06, 2006 5:35 pm
Localização: Portugal, Funchal
Contato:

Mensagem por h34d4k3 »

eu faço muitas userbars...
Também podias ensinar a fazer a scanlines (linhas diagonais na bars) Faz sempre um efeito fixe...ou legal! (>U<)
O meu TERCEIRO pagamento! Visita a minha página:
[img]http://dadosfixes.com.sapo.pt/ppu.PNG[/img]
Avatar do usuário
DFN
Senpai
Mensagens: 359
Registrado em: Sex Jun 23, 2006 2:55 pm
Localização: jundiaì-SP ( nao me pergunte como chega aki :P )
Contato:

Mensagem por DFN »

h34d4k3 escreveu:eu faço muitas userbars...
Também podias ensinar a fazer a scanlines (linhas diagonais na bars) Faz sempre um efeito fixe...ou legal! (>U<)


encina ai pra gente XD
[img]http://nihonmix.xisde.net/userbar.gif[/img]
Imagem
Imagem
[img]http://i132.photobucket.com/albums/q40/dfn_2007/ava01.gif[/img]
Imagem
Responder