[TUTORIAL] Fazendo UserBars

Ir em baixo

default [TUTORIAL] Fazendo UserBars

Mensagem por Devil Maker em Ter 06 Jul 2010, 3:44 pm

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.

CRIANDO USERBARS PERSONALIZADAS

Introdução
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:




Vamos lá?

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:




Clique em Edit » Stroke, e configure como na imagem abaixo:




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:



Desenhe um degradê agora, do mesmo jeito do anterior. Agora, faça uma seleção do tamanho da barra e clique em Select»Modify»Contract. Na caixa de diálogo que abrir, digite 1px e dê enter. Com essa seleção feita, clique no botão Add layer mask. Depois disso, mude a opacidade para 60%. A seleção de opacidade pode ser feita na aba layers, veja abaixo:



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í!

______________________________________________________
Conheça nosso Espaço!

Temos um Fórum;
Conheça nossa Equipe;
Leia as Regras é claro;
Ajude a divulgar o fórum, use nossas UserBars.
avatar
Devil Maker


Mensagens : 94

Ver perfil do usuário http://espacomaker.forumeiro.com

Voltar ao Topo Ir em baixo

Voltar ao Topo

- Tópicos similares

 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum