[TUTORIAL] Fazendo UserBars

Este Tutorial foi postado no Mundo RPG Maker pela Membro barbiezinha.
Este tutorial foi postado aqui com a autorização da autora.
Nenhuma modificação foi feita no post original.

Userbars são muito bacanas para usar em emails, postagens de fórum e muitos outros lugares. E fazê-las é muito fácil!

Esse tutorial vai ensinar você a fazê-las passo a passo usando o Photoshop. Nosso resultado final será esse:



Crie um novo arquivo clicando em File » New, com 450px de largura por 50px de altura e fundo transparente.


Usando a ferramenta de seleção retangular,



Crie um retângulo de 350px de largura por 20px de altura.




Você pode conferir as dimensões da sua seleção na aba Info. Se ela não estiver aberta, clique em Window»Info e ela aparecerá. Veja abaixo como fica:








Tire a seleção apertando CTRL+D. Renomeie este layer para "Contorno Barra" e crie um novo layer abaixo dele, clicando no botão "Add new layer". Ele fica no canto inferior direito da aba layers. Veja abaixo o botão:



Chame esse layer de de "Degradê". Para renomear um layer, clique duplo sobre seu nome, edite-o como quiser e depois aperte enter. Para movimentar um layer, clique pressionado em seu nome e movimente-o para cima ou para baixo.
Sua aba de layers vai ficar assim:





Selecione as cores para seu degradê. Eu escolhi rosa claro e rosa escuro.



Selecione a ferramenta degradê e configure para "Foreground to Background", assim:



Desenhe o degradê clicando pressionado na parte superior de seu retângulo e puxando para baixo, até o final do retângulo. O degradê preencherá todo o layer. Sua barra deve estar ficando assim:





Vamos criar uma máscara para esconder a parte que não queremos do degradê. Faça uma nova seleção do tamanho do quadrado e clique em "Add layer mask".



Sua barra deve estar assim:




Agora vamos criar um padrão de corações. Crie um novo arquivo de 5px de largura por 5px de altura e fundo transparente e desenhe um coração com vermelho escuro, assim(notem que eu ampliei o coração para melhor visualização):






Com seu coração criado, clique em Edit » Define Pattern, e na janela de diálogo que aparecer, clique em OK.



Volte ao seu arquivo da barra e crie um novo layer. Chame-o de "Corações". Preencha-o com o novo pattern indo em Edit» Fill. Na janela de diálogo que abrir, configure como abaixo:



Para manter os corações somente na área da barra, repita o processo de mascarar o layer, selecionando a área da barra e clicando em "Add layer mask".



Crie um novo layer e chame-o de "3D". Escolha sua primeira cor como branco, selecione a ferramenta de degradê e configure para Foreground to Transparent, assim:






Seu arquivo deve estar assim:




Abra o arquivo que contém seu desenho(no nosso caso, é o meu char para RMVX). Arraste o desenho para seu arquivo da barra e posicione-o. Vai ficar mais ou menos assim:





Vamos adicionar o texto: Selecione a ferramenta de texto e clique na área da barra onde você quer escrever.



Digite seu texto. Vai ficar assim:




Contornando o texto: Clique duplo no layer do texto. Abrirá uma caixa de diálogo. Configure-a como abaixo:





Posicione seu texto e sua imagem da forma que quiser. Agora a barra já está pronta, e deve ter ficado assim:




Vamos deixar a imagem no tamanho correto para exportar: Com a ferramenta crop, faça uma seleção da área total da barra e aperte enter.




Para finalizar é só exportar, clicando em File»Save for web and devices e configurando assim:






Pronto! Nossa barrinha está feita! Agora é só colocar na assinatura e sair se exibindo por aí!