[Tutorial] Fazendo Uma User Bar/Fan Bar Do Início Ao Fim!

Última edição por Danube dia Qui Set 04, 2008 5:12 pm, editado 1 vezes

Fala galera! Tudo beleza?
Hoje vou ensina-los a fazerem suas proprias userbars desde o zero. Espero que eu consiga explicar tudo direitinho. Qualquer duvida que tiverem em relaçao ao tutorial e so postar aqui que eu farei o maximo para os ajudar.
Agora vamos deixar de lado o papo e vamos ao que interessa, o tutorial!

Pesso que nao divulguem esse tutorial sem a minha autoriaçao e pesso tambem que ao divulgarem o tuto deem creditos ao autor (eu, Danube). Obrigado!

Sumário:
1º Passo - Fazendo uma máscara
2º Passo -Fazendo a base de nossa user bar
3º Passo - Adcionando uma render à nossa user bar
4º Passo - Aplicando a nossa máscara
5º Passo - Escrevendo em nossa user bar
6º Passo - Aplicando efeito "3D" em nossa use bar

*Primeiro passo: Fazendo uma mascara

Primeiramente, a mascara que iremos fazer serve para dar aquele efeito de linhas na diagonal na nossa userbar.
Para fazer a mascara que iremos usar, primeiro abra um novo documento -Ctrl+N- nas dimensoes 4x4 pixels e transparente. Agora aproxime ao maximo e use a ferramenta do pincel para pintar como mostra na figura abaixo:

Feito isso e so salvar em formato .png e fechar. Mas se o melhor formato para se salvar uma imagem e o .jpg porque salvar em .png? Porque se nos salvarmos em formato .jpg a transparencia nao tera efeito, e nos queremos uma imagem com transparencia.

*Segundo passo: Fazendo a base de nossa userbar

Abra um novo documento nas dimensoes 350x19 pixels e branco. Voce devera ter a seguinte imagem:

Essa e a sua base.
Agora vamos dar cores a nossa userbar. Utilize o efeito degrade -gradient- na sua base de acordo com as cores que voce quizer. Feito isso voce devera ter agora a seguinte imagem:

*Terceiro passo: Adcionando uma render em nossa userbar

Primeiramente eu gostaria de dar um explicaçao de render bem facil de entender. Uma render e bastante parecida com uma sprite, porem a dona render e usada para fazer avatares, assinaturas e as proprias userbars, diferente da dona sprite que e usada para fazer chars, gifs, etc. "Ok, agora eu ja sei o que e uma render, mas onde eu posso acha-las?" Existem varios sites, e so procurar no google que voce acha, eu sei o endereço de um site muito bom que tem varias renders de animes, mangas, jogos, etc. Se alguem quizer dar uma conferida, o endereço e: http://www.planetrenders.net/

Tendo a render em maos, cole-a na sua base e posicione-a do jeito que voce quizer -vale lembrar que voce pode diminuir o tamanho das renders para que elas se ajustem melhor na sua userbar. Adcione algum efeito se voce quizer, ou algo do tipo. Voce tera uma imagem parecida com essa:

Quando estiver com a camada -layer- da sua render pronta junte-a a sua base -Shift+Enter-.

*Quarto passo: Aplicando a nossa mascara

O programa que eu uso se chama PhotoFiltre Studio, alguns comandos sao diferentes dos comandos do PhotoShop, entao eu tive que traduzir parte de um tutorial de PhotoShop para que o meu tutorial ficasse completo. Aqui estao as duas formas diferentes de se aplicar uma mascara:

Aplicando uma mascara usando o PFS:

Para aplicar uma mascara usando o PFS, va: Filtro -Filter; PhotoMasque... a seguinte janela abrira:

Ajuste de acordo com o seu gosto.

Aplicando uma mascara usando o PS:

"Vamos preencher a imagem com que o padrão que criamos anteriormente. Faça uma nova camada. Selecionar tudo (Ctrl + A). Ir para Editar> Inserir e escolha a opção Padrão no menu suspenso. Encontre o seu padrão e clique em OK. Isto é provavelmente um pouco overpowering, então sugiro-lhe definir a opacidade da camada de cerca de 30%. Jogar com este até que ele olha agradável. Com efeito, poderia mudar se você tem muito mais leves cores."

Texto retirado do site Tech by Colin.

*Quinto passo: Escrevendo na nossa userbar

Pronto, agora ja podemos escrever na nossa userbar. A fonte mais usada para escrever frases em userbars e a Visitor -BRK-, mas fique a vontade se voce quizer experimentar algo novo. Terminado isso junte tambem essa camada. Voce tera uma imagem parecida com essa:

*Sexta e ultimo passo: Aplicando o efeito 3D em nossa userbar

Agora estamos quase terminando a nossa userbar. Utilize a ferramenta elipse para selecionar a nossa userbar. Feito isso desloque a seleçao para cima deixando somente metade da userbar selecionada. Agora de acordo com o programa que voce esta usando siga as instruçoes:
No PFS va botao direito -em cima da seleçao; Contorno e preenchimento... a seguinte janela ira aparecer:

Ajuste de acordo com o seu gosto. Feito isso e so clicar em Ok e parabens, sua userbar esta pronta, pode salva-la no formato .jpg.
Ja no PS... ir para Editar> Inserir e escolha a opção branco no menu suspenso. Agora definir a opacidade a seu gosto -ou se quizer pode usar os mesmos dados mostrados na janela do PS.

Resultado final da minha userbar:

Espero que tenham entendido tudo direitinho e que eu nao tenha cometido nenhum erro no tutorial. Se cometi pesso por favor que me avisem para que eu ajeite o tutorial. Pesso desculpas tambem, porque esse e o meu primeiro tutorial. E isso, agradeço por lerem esse meu primeiro tutorial.

Ass:

bo tutorial DAN
empenhaste-te em explicar as coisas ao pormenor... =D

ab.

Obg pelo comentário. ^-^ Espero que tenhas entendido tudo muito bem...

P/ melhor visualização, troquei a fonte Arial Narrow pela fonte Tahoma.
_________________

"Porque design é a minha vida!!"
Assinado pelo Danube.

Metas:
[]Ter 300 posts;
[]Ser mod/designer da NPT;
[]Pedir a mão de uma portuguesa da NPT em namoro - crítico!! ~.~''

Ta mt fixe mas a outra maneira vejam:

São simples só tens de ter o adobe photoshop cs2 no minimo, mas depois com pratica vais conseguir fazer alguns muito fixes.

Spoiler:

_________________

http://narutozone-pt.ativo-forum.com/

Já contamos com mais de 40 usários ajude-nos a ir muito mais além inscreva-se hoje.

Danube a sign até tá porreirinha, mas pkek tens o nome de um tipo de letra?
XD

n gosto muito dessas signs prefiro as modernas (pontas arredondadas e brilho , dando um efeito 3D)

e já te chamas de "o melhor designer" elah! XDXDXD
_________________

Spoiler:

Kage Idade : 19 Registrado dia : 31 Mar 2008 Mensagens : 170

Ah, ele foi escurraçado do Brasil porque há lá melhores que ele beijos
_________________

Tobi is a good boy

sinceramente não sei. Mas que isto não devia estar em FanFic's e FanArt's suponho que não O.o' . Pode ser uma espécie de FanArt, mas não o é à mesma.
_________________

CM «3 MP

Ai shi teru Mauro ♥