Feito com PS CS3 Extended
Parte 1 – Criar uma Userbar Estática
(AS Fonter Poden Ser baixadas do Site: 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:
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 e de preferência com 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
Agora desenhem 3 pontos na imagem assim:
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 e o tamanho 10px e se quiserem, 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 – 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)
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
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
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:
Ou seja, está pronta.. Para quem quiser uma userbar estática.. Mas nós não.. Nós queremos uma animada =D
[b]Parte 2 – Animar a Userbar Estática[/b]
Para animar alguma coisa no Photoshop, precisamos da janela de animação, por isso vamos ao menu [b]Window[/b]>[b]Animation[/b]..
A janela animação está em modo [b]Timeline[/b] (para utilizadores de versões recentes do Photoshop) mas nós vamos usar o modo [b]Frames[/b], por isso cliquem no botão das opções da janela [b]Animation[/b] e escolham [b]Convert to Frame Animation[/b]:
Criem um Grupo novo na lista das layers e pode ficar acima de todas as layers existentes
Vamos definir o [b]Blending Mode[/b] deste grupo a [b]Overlay[/b] e criar uma layer no grupo
Vamos buscar a [b]Gradient Tool[/b] (pressionem prolongadamente no [b]Paint Bucket[/b] e seleccionem esta) e vamos criar um gradiente novo.. Para isso, cliquem no gradiente que vos aparecer abaixo do menu [b]Edit[/b] e vai aparecer a janela dos gradientes..
Escolham um dos gradientes que tem uma cor dos lados e outra diferente no meio e vamos alterá-lo um pouco..
Agora vamos eliminar o "[b]stop[/b]" amarelo (o do meio) – é só arrastá-lo para baixo..
Agora vamos clicar num dos outros [b]stop[/b]'s laranjas e alterar a [b]Color[/b] deles para branco e depois alterar também o outro para branco..
Por isso a cor já está, vamos agora alterar a transparência.. Vamos aos dois [b]stop[/b]'s pretos em cima e alterá-los aos dois para [b]0%[/b]
E vamos adicionar um [b]stop[/b] mesmo no meio dos dois pretos.. É só clicar naquela zona e depois arrastar o [b]stop[/b] até a posição dele ser [b]50%[/b] e alterar a [b]Opacity[/b] dele para [b]100%[/b]..
Só falta clicar no botão [b]New[/b] para gravar aquele gradiente e depois [b]OK[/b]
Agora com a layer que está dentro do grupo seleccionada, vamos criar este gradiente lá dentro:
Vamos buscar a [b]Move Tool (V)[/b] e esticar um pouco a layer para o lado e depois, clicar com o botão direito do rato na layer e escolher [b]Skew[/b].. E com o [b]Skew[/b] activo, podemos ir ao quadrado de controlo superior da layer e arrastá-lo um pouco para a direita para a layer ficar inclinada:
Aceitamos as alterações e vamos mover a layer para o lado esquerdo até estar +/- metade de fora da imagem:
(pressionem a tecla [b]Shift[/b] enquanto movem a imagem para a mover em linha recta)
Agora dupliquem a layer e coloquem a nova do lado direito, também metade de fora
Dupliquem novamente a layer que está do lado esquerdo e mudem o nome dela para "[b]animada[/b]" para saberem depois qual é – esta vai ser a layer que vai andar de um lado para o outro =D
Vamos agora à janela de animação e vamos alterar as opções necessárias..
Temos lá a [b]Frame1[/b], por baixo dela tem escrito [b]10 sec[/b].. cliquem nesse texto e escolham [b]0.1 seconds[/b]
Isto vai fazer com que aquela frame dure [b]0,1[/b] segundos
Ainda abaixo disso tem um texto [b]Once[/b], cliquem nele e escolham [b]Forever[/b] – isto vai fazer a animação repetir-se para sempre, em vez de uma única vez
Agora cliquem no botão para criar uma nova frame.. Com esta frame seleccionada, vão pegar na layer [b]animada[/b] e movê-la para o lado direito da imagem..
Por enquanto o brilho animado da imagem só aparece num lado e outro da imagem.. Mas vamos usar o [b]Tween[/b] para o fazer passar pelo meio também =D
Então seleccionem as duas frames e pressionem o botão [b]Tween[/b] (está ao lado do botão da nova frame).. Na janela que apareceu, escolham assim:
Isto vai criar 4 frames entre as duas actuais.. Cliquem em [b]OK[/b]
Agora, seleccionem e eliminem a última frame porque já não vamos precisar dela.. Só foi criada para fazer a layer andar para o lado certo
Seleccionem todas as frames excepto a primeira e na lista das layers, ponham as duas layers do grupo que não são a [b]animada[/b] invisíveis.. Estas só são necessárias para a [b]Frame1[/b]
Seleccionem agora a [b]Frame1[/b] e ponham a layer que está dentro do grupo e que está do lado esquerdo da imagem invisível também..
Agora podem clicar no [b]Play Animation[/b] para ver como ficou a animação =D
Uma característica usual nas userbars é criar um risco preto de 1px a toda a volta de imagem.. Se quiserem pôr isso na vossa, é só criar uma layer acima de tudo o resto, preenchê-la com uma cor qualquer com o [b]Paint Bucket Tool[/b] e clicar duas vezes na layer para abrir os [b]Layer Styles[/b] e diminuir o [b]Fill Opacity[/b] para [b]0%[/b] e em [b]Stroke[/b], mudar a cor para preto, o tamanho para [b]1px[/b] e a [b]Position[/b] para [b]Inside[/b] =D
Para gravar como GIF, vão ao menu File>Save for Web & Devices e lá escolham a tab que diz 4-Up, isto vai-vos mostrar a animação com vários níveis de cores e de gradientes.. Claro que quanto menor for o número de cores, mais pequena vai ser a imagem final e mais rápido será o download dela quando estiver numa página da net..
Cliquem em baixo no botão [b]Play[/b] e vejam como fica a animação.
Para mim, a melhor é a 3ª, porque é mais pequena em tamanho que as outras e a diferença em qualidade é imperceptivel =D
Então é só seleccionar a que preferimos e clicar no botão Salve e gravem como ficheiro GIF
o resultado sera esse:
So se divertir agora
Comentários