Olá, hoje vamos aprender a fazer uma userbar animada no Photoshop..

Pode ser que não vos interesse muito fazer userbars, mas depois de aprenderem a fazer uma animação por frames no Photoshop, podem fazer todo o tipo de imagens GIF que quiserem =D

Para quem não souber, GIF é uma formato de imagem que, apesar de já ser antiguinho (última actualização do formato em 1989) ainda é muito utilizado pela internet devido a suportar animação e transparência.. Um dos problemas deste formato é o número de bits usado para as cores – apenas 8, ou seja 256 cores apenas.. – enquanto que os formatos actuais têm muito mais –  entre 16.777.216 e 79.228.162.514.264.337.593.543.950.336 cores =D

Claro que actualmente usa-se muito mais o Flash para animações, devido a ser um formato vectorial e não alterável sem o ficheiro original (bem.. com algum trabalho até se consegue.. – vocês não leram isto) e que dá muito mais possibilidades e com ficheiros de tamanhos razoáveis.. Mas para algumas coisinhas pequenas e simples como uma userbar, ou um emoticon para o messenger ou um avatar para um forum, o GIF serve perfeitamente

Parte 1 – Criar uma Userbar Estática

Ok, vamos lá começar.. Quanto ao texto da userbar.. As userbars todas usam fontes em que o texto é constituído por píxeis, sendo a mais usada a fonte Visitor, que podem obter gratuitamente aqui

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 350x19px (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á..

O meu ficou assim:

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 3x3px 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:

Agora vão ao menu Edit>Define Pattern e escolham um nome para o padrão – eu pus 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

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

Parte 2 – Animar a Userbar Estática

Para animar alguma coisa no Photoshop, precisamos da janela de animação, por isso vamos ao menu Window>Animation..

A janela animação está em modo Timeline (para utilizadores de versões recentes do Photoshop) mas nós vamos usar o modo Frames, por isso cliquem no botão das opções da janela Animation e escolham Convert to Frame Animation:

Agora que já temos a janela de animação pronta, vamos aprender sobre alguns termos relevantes a animações no Photoshop..

Frames

Cada animação/vídeo é constituída por várias imagens que são mostradas sequêncialmente.. Em cada frame a imagem muda um bocado, de forma a que ao ver a sequência toda, pareça que é algo a movimentar-se..
Nos filmes e câmaras de filmar, é normal usar-se 30 ou 23,976 frames por segundo (fps).. Nos jogos modernos, costuma ser cerca de 60fps, que é o máximo habitual dos ecrâs dos PCs

Abaixo de 25fps, já se começa a notar um efeito de atraso na imagem, principalmente em vídeos em que são mostradas coisas que se movimentam muito rápido, como desportos.. Foi esse o problema das primeiras televisões de plasma.. Como ainda tinham uma taxa de actualização do ecrâ muito baixa, uma pessoa a ver desportos ou outra coisa muito rápida, notava algum atraso nos movimentos =D

Mas agora já não há esse problema ;D

Tween

Este botão na janela de animação do Photoshop serve para criar frames intermédias entre duas frames seleccionadas..

Por exemplo, se tivermos duas frames, e numa delas uma layer estiver transparente e no lado direito da imagem e na outra frame, a layer estiver completamente opaca e do lado esquerdo da imagem, ao pressionarmos este botão, escolhemos quantas frames queremos entre estas as duas e ele cria automaticamente as frames que quisermos e com a layer a aumentar a opacidade e a mover-se do lado direito para o esquerdo – Absolutamente útil =D

Frame Delay

Isto define quanto tempo uma frame vai demorar durante a animação.. Podemos põr várias frames a durarem tempos diferentes

Looping Options

Esta opção define o tipo de ciclo da animação assim que se termine a última frame.. Podemos põr a animação a aparecer apenas uma vez e ficar parada na última frame (mais usado nos banners de publicidade), aparecer outro número de vezes e parar depois na última frame ou repetir-se para sempre (o mais usado)

Ok, estes devem chegar =D

Vamos lá começar.. Criem um Grupo novo na lista das layers e pode ficar acima de todas as layers existentes

Vamos definir o Blending Mode deste grupo a Overlay e criar uma layer no grupo

Vamos buscar a Gradient Tool (pressionem prolongadamente no Paint Bucket e seleccionem esta) e vamos criar um gradiente novo.. Para isso, cliquem no gradiente que vos aparecer abaixo do menu Edit 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 “stop” amarelo (o do meio) – é só arrastá-lo para baixo..

Agora vamos clicar num dos outros stop‘s laranjas e alterar a Color 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 stop‘s pretos em cima e alterá-los aos dois para 0%

E vamos adicionar um stop mesmo no meio dos dois pretos.. É só clicar naquela zona e depois arrastar o stop até a posição dele ser 50% e alterar a Opacity dele para 100%..

Só falta clicar no botão New para gravar aquele gradiente e depois OK

Agora com a layer que está dentro do grupo seleccionada, vamos criar este gradiente lá dentro:

Vamos buscar a Move Tool (V) e esticar um pouco a layer para o lado e depois, clicar com o botão direito do rato na layer e escolher Skew.. E com o Skew 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 Shift 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 “animada” 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 Frame1, por baixo dela tem escrito 10 sec.. cliquem nesse texto e escolham 0.1 seconds

Isto vai fazer com que aquela frame dure 0,1 segundos

Ainda abaixo disso tem um texto Once, cliquem nele e escolham Forever – 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 animada 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 Tween para o fazer passar pelo meio também =D

Então seleccionem as duas frames e pressionem o botão Tween (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 OK

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 animada invisíveis.. Estas só são necessárias para a Frame1

Seleccionem agora a Frame1 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 Play Animation 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 Paint Bucket Tool e clicar duas vezes na layer para abrir os Layer Styles e diminuir o Fill Opacity para 0% e em Stroke, mudar a cor para preto, o tamanho para 1px e a Position para Inside =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 Play e vejam como fica a animação..

Cliquem na imagem para aumentar

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 Save e gravem como ficheiro GIF

O meu resultado foi este:

Que tal?

Agora é só andarem a brincar com isto e fazer montes de userbars para os amigos todos =D

Espero que tenham gostado e aprendido qualquer coisa, até à próxima