•  
     

[Tutorial] Como criar uma userbar estática

PS CS4 Extended


Criar uma Userbar Estática

(AS Fonter Poden Ser baixadas do Site: http://www.dafont.com)

Depois de instalarem a fonte (ficheiro visitor1.ttf ou visitor2.ttf de preferência), podem abrir o nosso amigo Photoshop e criar um novo documento com a resolução de 350×19px (tamanho normal das userbars) e preencher a layer existente com uma cor ou gradiente do vosso gosto.. Eu preenchi com um gradiente vertical com as cores #71dc00 e #82ff00, mas vocês podem usar qualquer outro fundo, incluindo uma imagem que arrastem para lá.

ela ira ficar algo parecido com isso:
Imagem

Agora que o fundo já está, vamos criar as scanlines, porque uma usarbar não é userbar sem scanlines.. Para isso, criem um novo documento no Photoshop com a dimensão de 3×3px (pode ser maior, eu costumo usar 6 x 6 ou 4 x4 )e de fundo transparente..

Agora façam imenso zoom a esta nova imagem e vão buscar a Pencil Tool – pressionem o rato prolongadamente em cima da Brush Tool até aparecer o lápis e seleccionem esse..

A diferença do pincel para o lápis, é que o pincel tem arestas suaves, enquanto que o lápis desenha tudo sem anti-aliasing..

Agora com o lápis, pressionem a tecla D para a cor principal mudar para preto e cliquem com o botão direito do rato na imagem e escolham o tamanho do traço do lápis a 1px

Imagem


Agora desenhem 3 pontos na imagem assim:
Imagem

Agora vão ao menu Edit>Define Pattern e escolham um nome para o padrão – eu ___ scanlines – e cliquem em OK

Já podem fechar este documento e voltar á imagem da userbar.. Criem uma nova layer e vamos preenchê-la com o padrão das scanlines que acabamos de criar.. Para isso, seleccionem a nova layer e vão ao menu Edit>Fill
Imagem


Em Custom Pattern escolham a que acabaram de criar e depois cliquem no OK

Como podem ver, isto preencheu a layer seleccionada com o padrão.. Parabéns, têm agora scanlines na vossa imagem =D

No Photoshop podem criar vários padrões e gravá-los desta forma para depois usarem em qualquer das vossas imagens ;D

Como estão demasiado fortes, vamos pôr a Opacity desta layer a 30%

Agora, vamos criar outra layer e aqui é que vamos escrever o texto da nossa userbar..

Escolham a fonte Visitor TT2 e o tamanho 13px, mudem o modo de Anti-Aliasing para None (está ao lado do tamanho da letra)

Agora é só escrever qualquer coisa na userbar.. Eu escrevi "Design é escrever com píxeis – http://www.pixeis.net" =D

Agora aceitem as alterações e vão buscar a Move Tool (tecla V) para alinharmos o texto com a imagem.. Pressionem Ctrl+A para seleccione tudo e cliquem nos botões de alinhamento na barra abaixo dos menus para ficarem com o texto centrado verticalmente e horizontalmente na imagem..

Como o texto ainda não está ao estilo usual das userbars, vamos acrescentar-lhe uns Layer Styles.. Por isso, cliquem duas vezes na layer do texto na lista das layers até aparecer a janela dos Layer Styles e em Color Overlay, mudem a cor para branco e em Stroke, mudem o Size para 1px e a cor para preto (só se ainda não estiver)


Imagem


Cliquem no OK para aceitar as alterações e vamos criar outra nova layer onde vamos adicionar algum brilho à imagem..

Seleccionem a Elipse Tool e por baixo do menu Edit, cliquem no botão que diz Shape Layers e desenhem uma elipse assim

Imagem

Agora Ctrl+A para seleccionar tudo e com a Move Tool (V), alinhem a elipse horizontalmente..

Pressionem agora Ctrl+D para apagar a selecção actual e transformem a elipse até ficar parecida com a da minha imagem


Imagem



Na lista das layers, cliquem duas vezes na miniatura desta layer e mudem a cor para branco..

Agora mudem o Blending Mode desta layer de Normal para Overlay e a Opacity para 50%

Agora a vossa userbar deve estar algo assim:

Imagem

Obs: Padrão de fonte para userbars: Fonte: Visitor TT2; Tamanho:13px; Stroke: 1px preto; anti-aliasing; texto alinhado à direita.

by: [J]ack
Fotos by: mauricio32 - jogando.net


Jajá a continuação como criar userbars animadas.