Emoticons são muito usados para sugerir expressões ou estados de espírito mais complicados de mostrar por escrito. Hoje vamos aprender a fazer um emoticon animado no Photoshop e a importá-lo no Messenger.
Uma vez que são relativamente simples de fazer, a parte mais complicada será talvez escolher a expressão facial a demonstrar.. Como todas as que me lembrei eram muito simples de fazer, decidi criar um “completamente louco” =D

E mãos ao trabalho..

Passo 1 – Photoshop

Vamos abrir o Photoshop e criar uma nova imagem com fundo transparente e com as dimensões do nosso emoticon. Eu quero fazer um idêntico aos que já vêm com o Windows Live Messeger, por isso escolho o mesmo tamanho, 19x19px.

Agora vamos buscar a Ellipse Tool (U) e vamos desenhar um círculo que ocupe praticamente todo o espaço disponível:

Agora vamos clicar duas vezes na layer para abrir a janela dos Layer Styles e vamos diminuir o Fill para 0%. Depois vamos a Stroke e vamos usar estes valores:

O gradiente que usei foi este:

E agora vamos adicionar um Gradient Overlay:

E desta vez é este gradiente:

E já só falta uma Inner Shadow para dar volume (#ECB01B):

E já temos a face do nosso emoticon. Podem mudar o nome desta layer para “Face” ou qualquer coisa que identifique.

Passo 2 – Olhos

Vamos criar um novo grupo acima da layer existente e vamos mudar o nome do grupo para “Olhos” e vamos criar uma nova layer dentro. Agora vamos buscar a Pencil Tool (B) – com o tamanho a 1px – e com a cor #AC904C vamos desenhar uns olhos esbugalhados na face do nosso emoticon:

Agora vamos buscar a for branca (#FFFFFF) e vamos preencher o interior dos olhos

E vamos de novo buscar a cor #AC904C e na barra superior do Photoshop, vamos diminuir a Opacity para 30% e pintar os cantos dentro e fora para parecerem mais arredondados do que realmente são.

Agora vamos mudar o nome desta layer para “Olhos – Base” e vamos criar 5 novas layers acima dela.

Na imediatamente acima vamos pintar as íris dos olhos dele normais nesta cor #6A2217 (não se esqueçam de voltar a por a Opacity a 100% antes de pintar):

E vamos deixar as outras quatro layers sem nada por enquanto (elas vão servir para a animação depois)

Passo 3 – Boca

Agora vamos criar um grupo para a boca. Podemos criar imediatamente acima do grupo dos olhos. E vamos mudar o nome para “Boca” para fácil orientação =D

Vamos criar uma layer lá dentro e com a Ellipse Tool (U), desenhem algo assim:

E vamos clicar duas vezes nesta layer para editar os Layer Styles. Vamos adicionar um Stroke com a cor #9f4021:

E agora vamos duplicar esta layer até termos 4 iguais e vamos pô-las todas invisíveis. E vamos criar uma nova layer vazia onde vamos com o pincel pintar uma boca simples para o início da animação – também com a mesma cor do stroke – #9f4021 – eu pus o pincel a 20% e pintei várias vezes nos mesmos pontos até ficar uma linha mais ou menos gradual:

E pronto.. Já só falta animar o nosso emoticon =D

Passo 4 – Animação

Vamos ao menu Window>Animation e vai aparecer uma barra no fundo do ecrã.. No canto superior direito dessa barra há um botão, cliquem lá e depois em Convert to Frame Animation – isto é para criarmos uma animação por frames, que é o que nós queremos (para mais informação em como fazer animações, vão dar uma vista de olhos pelo tutorial da userbar onde explico isto com mais pormenor)

Agora criem três novas Frames. A primeira vai ficar intacta. Na segunda, vamos ao grupo Olhos e vamos seleccionar a layer com as íris pintadas e com a Move Tool (V), vamos pressionar a tecla direccional para a direita do teclado uma vez (mover um pixel para a direita):

E vamos agora à terceira frame e vamos mover os olhos para a esquerda:

E a última vamos deixar normal como a primeira.

Agora vamos adicionar mais quatro frames à frente da última.

Vamos seleccionar as quatro novas frames e por a layer das íris do emoticon invisível e vamos mover os olhos 1px para cima:

Antes de alterarmos, temos que fazer outra coisa: Como há uma opção activada chamada Propagate Frame 1, todas as alterações feitas á frame 1 vão ser visíveis em todas as outras, por isso vamos para a frame 1 e vamos seleccionar as 4 layers vazias que já tínhamos criado e pô-las todas invisíveis para depois as pormos visíveis só na frame correcta em vez de todas.

E agora na frame 5, vamos usar a primeira daquelas 4 layers vazias. Vamos lá com o pincel (a 100%) e a cor #6A2217 pintar as novas íris dele da forma mais estranha possível:

Agora vamos á frame 6 e vamos activar a layer seguinte e lá vamos pintar as íris noutra posição qualquer:

E assim sucessivamente para as outras duas frames e layers.. O meu resultado foi este:

Agora que os olhos já estão, vamos tratar da boca.. Para isso temos de seleccionar as 4 últimas frames e desactivar a layer da boca “simples” que está visível.

Ok, agora vamos à frame 5 de novo e vamos activar a primeira layer da boca “aberta”:

Agora é só seleccionar a máscara desta layer e alterar o formato da elipse com a Pen Tool (P) para lhe dar o aspecto mais louco possível (com a Pen Tool e a máscara seleccionadas, pressionem a tecla Ctrl e depois cliquem na elipse para aparecerem os pontos alteráveis e depois Ctrl de novo para os mover de um lado para outro)

Que tal? He he. Agora vamos fazer o mesmo nas frames e layers seguintes: Em cada frame, activamos outra das layers e alteramos. O resultado deve ficar algo assim:

Passo 5 – Temporização

Já devem ter notado que por baixo de cada frame aparece escrito 10 sec. Isto é a duração daquela frame. Neste caso está a dizer que cada frame vai durar 10 segundos.. Claro que nós não queremos isso, por isso vamos alterar os tempos individualmente..

A primeira frame é a parte normal do emoticon, por isso vamos pôr uns 2 segundos.
A segunda, em que ele começa a olhar para os lados – para ver se ninguém o está a observar – tem que ficar bem menos.. uns 0,7 segundos (no menu escolham Other e escrevam os 0,7).
A terceira frame, onde ele olha para o outro lado, vamos pôr ainda menos – 0,5 segundos.
A quarta frame também pode ser 0,5.
As outras quatro têm que ser mesmo rápidas.. Pode ser 0,1 segundos para cada.

Agora é só diminuir o zoom da nossa imagem até 100% e pressionar o botão Play animation para vermos como ficou. Alterem também o Once para Forever para que a animação continue sempre em vez de parar ao chegar à última frame.

Passo 6 – Retoques

Agora é uma boa altura para retocar e aperfeiçoar a nossa animação.. Na minha opinião, as retinas não dão a sensação de se estarem a mover rápido o suficiente nas últimas 4 frames.. Por isso vou lá com o pincel a 30% pintar em cada frame a posição em que os olhos estavam antes, para parecer uma mudança gradual, em vez de repentina:

Frame 5. Os olhos antes estavam abaixo, vou por um pixel nos lugares onde antes estavam as retinas:

Frame 6:

Frame 7:

E última:

Ok, acho que já está tudo bem =D

Passo 7 – Guardar como Gif Animado

Agora que temos a nossa animação pronta, queremos guardá-la. Para isso vamos ao menu File>Save for Web & Devices.
Nota: não se esqueçam claro de guardar sempre também o ficheiro original do Photoshop como .psd para poderem editar posteriormente.

A janela que apareceu tem imensas opções editáveis.. Mas nós vamos ver as principais para o nosso emoticon.

1 – O formato de ficheiro tem que ser Gif, uma vez que é o único ali que permite animação – provavelmente até já estava escolhido.
2 – O algoritmo de redução de cores pode ser praticamente qualquer um, desde que não altere muito o aspecto – eu vou escolher o Perceptual.
3 – O número de cores.. Bem, o nosso emoticon tem muito poucas cores, é quase tudo tons diferentes de amarelo e vermelho, por isso 64 cores deve chegar e ainda diminui o tamanho do ficheiro.
4 – Tem que ter transparência.
5 – O Matte é a cor que ele usa para poder tornar a transparência mais gradual.. Ou seja, aqui ele vai tornar as arestas do emoticon de cada vez mais brancas para se poder misturar com o fundo bem.. Vejam este exemplo:

O emoticon da primeira coluna não tem matte, o da segunda tem matte branco e o da terceira tem preto. Notam como o que tem matte preto fica mesmo bem no fundo preto e o que tem matte branco fica bem no fundo branco? Eu vou escolher branco porque todos os originais do Messenger também têm matte branco.. Provavelmente eles acham que a maior parte das pessoas usa fundo branco no Messenger.
6 – Este aqui não vai fazer muita diferença, mas numa imagem maior, ele iria pôr poucos pixeis numa área muito transparente e muitos numa área pouco transparente para parecer gradual.. Mas no nosso caso vamos deixar desactivado.
7 – Agora que está tudo bem, vamos gravar =D

Passo 8 – Importar no Messenger

Agora abram a vossa janela do Messenger e uma janela de conversa com alguém. Depois cliquem no botão dos emoticons e vai aparecer esta janela:

Cliquem depois em Mostrar tudo… E vai aparecer esta janela:

Agora é só clicar em Criar e vai aparecer esta janela:

Escolham onde está o Gif que vocês guardaram e depois um atalho (frase que ao escreverem, faz aparecer o emoticon) e pressionar OK.. E pronto, já podem usar um emoticon criado por vocês nas vossas conversas, programas, etc.

Resultado final:  Webtutoriais:CA5E50C6

Espero que tenham gostado e que comentem com sugestões ou mostrem os que vocês criaram e que subscrevam o nosso site para passarem a receber todas as novidades =D