Criando Imagens de Destaque:

Vamos comear com perguntas:

Por que se preocupar com a imagem de destaque?

Tudo questo de publicidade. Seu filme pode ser uma bosta completa, mas se tem uma bela imagem de destaque, o usurio vai entrar sem nem pensar na pgina de sua legenda. Agora se o seu filme o mais foda de todos e tiver uma imagem pobre, o usurio no vai clicar ali, salvo conhecendo a equipe ou tendo ouvido falar do filme.

difcil criar uma boa imagem de destaque?

Nesse tutorial, vamos ver que no um bicho de sete cabeas. possvel criar uma imagem legal sem nem ter muito conhecimento na parte de manipulao de imagens. O tutorial est no nvel mais bsico possvel.

Que programas iremos usar?

O tutorial todo baseado no Adobe Photoshop. Falarei tambm do Adobe Flash CS3, nas partes mais avanadas desse tutorial. O importante de ser a verso CS3 que a nica que tem interao com arquivos do Photoshop.

Como ser o esquema desse tutorial?

Ser todo baseado em imagens contextualizadas. Escolhi alguns filmes para criar imagens fictcias de destaque para eles. Tutorial todo baseado em exemplos.

Exemplo 1: Uma imagem simples.

1o Passo: Procurar a imagem.
Achar uma imagem legal do filme e preferivelmente em boa resoluo. Quanto melhor a resoluo, melhor o resultado final. Vou usar essa imagem:

2o Passo: Cortar a imagem. (usando Adobe Photoshop CS3)

Abra a imagem no Photoshop. Selecione a ferramenta Crop (cortar), pode selecion-la apertando a letra C do teclado. Em cima aparece dois campos Width (largura) e Height (altura). Coloque os valores 132px para largura e 80px para altura e aperte enter. Essas so as medidas da imagem do site.

Para finalizar, selecione a rea que voc quer usar e d dois cliques.

O resultado final ser sua imagem pronta:

Exemplo 2: Imagem simples com ajustes.

Essa ser a imagem a ser utilizada:

1o Passo: Cortando com rea fora da imagem.

Aperte F no seu teclado dentro do Photoshop e veja o que acontece. O modo de exibio da imagem vai mudar. Deixe na tela cinza que j est bom. Se eu cortasse normalmente, ou o Andy (mau elemento de cima) ou a Claire (mocinha de baixo) teriam que ficar de fora da imagem. Cortei ento dessa forma:

2o passo: Arrastando a imagem.

Logo de cara voc nota que ficou muito para direita. Voc ento seleciona a ferramenta de mover, apertando V no teclado. Em seguida, aperte a seta ESQUERDA do seu teclado para ir arrastando para esse sentido.

OBS: Se a camada da sua foto for Background e estiver bloqueada, voc no vai conseguir mover. Para resolver essa situao chata, voc d dois cliques no retngulo da camada, na janela Layers (camadas).

3o Passo: Consertando falhas.

Selecione o brush (pincel), aperta B no teclado, bote na cor branca e passe por cima do nome que ficou na imagem. Para diminuir aumentar o pincel, se utilize as teclas [ e ]

Nota-se tambm que ficou a borda de um quadrado no cabelo da menina de baixo, sem a figura estar na borda. Use a ferramenta dedo, aperta R. Ela funciona com um dedo mesmo, como se fosse pegasse uma foto em um jornal e arrastasse o dedo por cima. Voc arrasta o curso at a extremidade do cabelo e vai arrastando at deixar o formato desejado. Aperta CTRL + e CTRL para lidar com o zoom.

4o passo: Nitidez.

A sua imagem no momento est igual a da esquerda. Ao final desse passo ficar parecida da direita. A nitidez importante, pois ela enriquece o aspecto da imagem. Como uma imagem 132x80 relativamente pequena, no colocamos 100% de nitidez logo de cara. Use ento o Smart Sharpen (nitidez inteligente). Filtros > Nitidez > Nitidez Inteligente. Caso no tenha na sua vers, o Unsharp Mask (mscara de nitidez) serve.

Entrando nesse menu, configure a porcentagem para 15%, que o ideal.

Se voc acha que a dose foi pouca, basta apertar CTRL F, que vai aplicar automaticamente a mesma quantidade de nitidez. Use a gosto.

5o passo: Ajustes de cor e iluminao:

1 Balano de cor:
Serve para voc alterar a cor das luzes que incidem na imagem. Exemplo forado (a original e outra mais azul):

Esses foram os ajustes que eu fiz nas cores. A imagem estava muito azul e vermelho.

2 Brilho e Contraste:
Fica no menu Imagens > Ajustes > Brilho/Contraste:

D mais brilho e/ou mais brilho para sua imagem, como de se entender.

Talvez depois de aplicar o brilho e contraste seja necessrio rever o balano de cores.

Esse ser o resultado final do Exemplo 2:

Exemplo 3: Criando imagem com texto.

A imagem a ser trabalhada ser a mesma do 2. Foi colocado em exemplo diferente porque esse ser um dos caminhos a seguir, e o 4 ser outro caminho diferente. Esse exemplo na verdade no tem nada a ser feito de novo. pegar a parte com nome do filme e cortar, fazendo os ajustes em seguida. Fica assim:

Exemplo 4: Criando texto por cima da imagem.

1o passo: Colocando o texto.
Em vez de criarmos uma imagem para o texto, agora vamos inserir texto na imagem, assim como nossas queridas legendas se sobrepem ao filme. Abra o poster novamente com a imagem cortada ao lado. Como o nome do filme est de uma cor s (vermelho) que bem diferente do fundo (branco), selecione a Varinha Mgica (aperte W) e v passando por todo o texto.

Segure o boto Shift para poder selecionar todas as letras. Ficar assim:

Aperte CTRL J para que a rea selecionada se transforme em uma nova camada. Deixe as duas imagens emparelhadas e use a ferramenta mover (V) para arrastar a camada com o texto para cima da imagem com a foto.

Use o CTRL T (transformar) para redimensionar e ajustar a camada de texto. Use o Shift para que o texto diminua em uma mesma proporo.

Esse ser o resultado, que ainda no satisfatrio:

2o passo: Ajustes de camada.

O Texto ainda no est muito legvel, precisa de uns ajustes. D dois cliques bem do lado direito da camada onde est o texto.

Vai abrir um menu com os estilos: Tem as sombras, tem os brilhos, tem os contornos, futuque bem muito nas coisas para testar as modificaes na imagem.

Vou sugerir colocar uma borda (stroke) no texto de cor branca. Marque a caixinha l de baixo e d um clique em cima do nome para selecionar. O tamanho que eu usei para a borda 2 px.

Se voc quiser ainda pode aplicar um Drop Shadow (marca a primeira caixa), o efeito ficou bem legal nesse texto.

3o passo: Alinhamento
Voc ainda pode alinhar para o texto ficar exatamente no meio da sua imagem, selecionando Camada > Alinhar > Centros Verticais ou Horizontais

Finalmente, assim ficar sua imagem:

Exemplo 5: Salvando os arquivos

Se voc vai utilizar essa mesma imagem mais de uma vez, recomendado que voc salve o arquivo em .psd (Photoshop data). Esse formato salva as camadas, permitindo que voc faa alteraes posteriores sem necessidade de fazer tudo de novo. timo para seriados onde voc s precise trocar o S03E12 por S03E13 ou mudar o fundo, por exemplo.

J para salvar em jpg ou gif, tem outro recurso bem interessante. Chama-se Save for web (salvar para web) ou a grande combinao SHIFT CTRL ALT S. Abrindo essa janela, selecione 2-UP, para visualizar o tamanho do arquivo como est e como pode ficar. (No d para enxergar, mas tem 30.9K na esquerda e 5.906K na direita. )

Alm de tudo, s por essa janela que se pode salvar um gif animado. Salvando no menu normal, o gif perde a animao.

Exemplo 6: Criando um gif animado.

Como o prprio nome j diz, uma sequncia de imagens formando uma composio dinmica. A partir da verso CS2 j d para fazer dentro do prprio Photoshop, nas verses anteriores fazia-se pelo ImageReady, programa auxiliar instalado junto com o PS. Eu no recomendo criar imagens nesse formato, os gifs so pouco dinmicos e estraga a qualidade das fotos. Quem nunca viu um gif cheio de granulados, cores fubentas e outras imperfeies? Particularmente, prefiro fazer em swf (Flash), os movimentos so muito mais dinmicos e a qualidade impecvel. Mas, vamos aprender logo em gif. Para comear a aventura, abra a janela Animation (animao) atravs do menu Janela > Animao.

Crie mais alguns quadros, apertando no boto NOVO na janela de Animao. Para ser uma animao tem que ser no mnimo 2.

Agora s brincar com as camadas. Selecione o quadro e faa a modificao desejada. Exemplos: Voc pode apertar no olho e deixar uma camada invisvel. Por exemplo: o nome do filme pode aparecer s no segundo quadro. Voc pode mover a camada no ltimo quadro da animao, fazendo um movimento.

Depois programar o tempo de cada quadro, apertando na seta do lado de onde tem 0 segundos. D o play e teste sua animao. Para salvar est explicado no Exemplo 5.

Essa parte no vai ter como colocar imagem final, ento v testando vrias possibilidades a.

A aventura pelo Photoshop est completa. Nos prximos exemplos trabalharemos com o Flash.

Exemplo 7: Iniciando no Flash.

A partir de agora, tudo ser trabalhado no Adobe Flash. Photoshop servir apenas como base para criao das imagens. Nesse exerccio, a escolha da imagem livre. Usaremos qualquer imagem jpg no tamanho de 132x80 pixels. Partiremos do zero. Assim que abrir o seu Adobe Flash CS3, crie um novo arquivo, pode escolher tanto o de ActionScript 2.0 quanto o de AS 3.0 que no vai fazer diferena nesse momento. Essas so as partes bsicas do arquivo, a Linha do Tempo, a tela de trabalho e a Biblioteca:

L embaixo onde tem Properties, voc deve ajustar o Size para 132 x 80 pixels. Em seguida, voc importa sua figura para o flash. Basta apenas ir em File > Import > Import To Library.

1o passo: Alinhando a figura.

Com sua imagem dentro da Biblioteca, simplesmente arraste-a para a tela. Para alinhar com o stage basta abrir a paleta Align (CTRL K). Lembre-se de marcar o boto To Stage se quiser alinhar ao stage. Agora s precisa alinhar nos dois sentidos: Align Horizontal Center e Vertical Center (os comandos so CTRL ALT 2 e CTRL ALT 5).

2o passo: Desvendando a Timeline.

Tudo se passa pela timeline, dos projetos simples aos muito complexos. Ela determina todos os movimentos, mudanas. Recomendo voc a deixar 25 fps l em Properties, para melhor qualidade de movimentos antes de comear a mexer nela. Clique com o boto direito sobre o retngulo que marca 75 na timeline. Aparece algumas opes de insero de frames, vamos conhecer e diferenciar 3 nesse momento: Insert Frame: Insere um quadro na animao. Far com que o primeiro quadro fique no ar at o frame 75, ou seja, 7525 frames por segundo = 3 segundos de animao. O smbolo um retngulo branco que vai se ligando at o frame 1. Insert Keyframe: Insere um quadro-chave na animao. Enquanto o frame comum uma continuao, o keyframe uma situao nova. Nele voc tem a liberdade para fazer o que quiser com o quadro, compondo um filme juntamente com outro keyframe. O smbolo a bola preta. Insert Blank Keyframe: Nem precisa explicar, insere um quadro-chave em branco. O smbolo a bola branca.

Baseado nessas informaes, adicione um keyframe no quadro 75 e depois um frame no 150. Acrescente tambm mais uma imagem jpg na sua biblioteca. Vamos agora ver na prtica para que serve o Frame e o Keyframe que voc adicionou. Aperte no frame 75. Note que ele selecionou toda a rea, aperte fora da rea da imagem para deselecionar. Agora aperte em cima da imagem do seu filme. Em baixa na aba Properties aparece um boto Swap, aperte l. Escolha a imagem que voc acabou de colocar e d OK. Agora d CTRL ENTER (visualizar o filme) e veja o seu resultado!

Exemplo 8: Alguns pequenos efeitos.

Agora que voc j aprendeu o funcionamento bsico do Flash, que tal aprender alguns efeitinhos bsicos? Vamos utilizar o mesmo arquivo que usamos no exemplo anterior. Agora conheceremos outro termo que aparece quando clicamos com boto direito em um frame: Create Motion Tween.

1o Efeito: Opacidade.
Voc j deve ter visto um flash desses. A imagem comea branca e vai de transparente para opaca. E no existe grandes dificuldades para criar uma dessas. Usando sua composio, crie keyframes nos seguintes quadros: 10, 65, 74, 85, 140 e 150. Clique com o boto direito no frame 1 e bote em Create Motion Tween. Agora clique em cima da imagem do frame 1, veja quanta coisa foi acrescentada. Onde tem Color voc troca de None para Alpha, que a transparncia. Bote o valor para 0. D um play e veja como fica. Para ficar legal mesmo, voc tem que repetir os passos nos outros keyframes: No frame 65, voc cria o Motion Tween. No frame 74 voc coloca zero para o Alpha. No frame 75, voc cria o Motion Tween e coloca zero para o Alpha. No frame 140, voc cria o Motion Tween. No frame 150 voc coloca zero para o Alpha. Agora o trabalho est concludo. Coloque para testar o resultado.

2o Efeito: Movimento.
Do mesmo jeito que voc usou o Motion Tween para aumentar e diminuir o Alpha, voc pode usar para movimentar um objeto. Zere o seu flash, a Timeline toda. Coloque uma imagem na tela no frame 1 e crie um keyframe no 20. Aplique o Motion Tween no frame 1. Selecione o frame 20 e aperte a Seta da Direita do teclado at onde quiser. Teste o filme. Tem um recurso bem legal chamado Onion Skin. o segundo boto da esquerda abaixo da Timeline. Quando voc aperta nota que a Timeline est com dois colchetes em cima. Eles definem o ponto inicial e final para voc visualizar todo um movimento nesse intervalo em um nico frame.

3o Efeito: Redimensionar. Voc pode tambm redimensionar uma imagem da mesma

forma que o movimento. Aperte CTRL T e coloque a porcentagem que voc quer sobre a imagem em tamanho original. Se preferir valores absolutos, use o tamanho na aba Properties. Dentro da paleta Transform voc ainda pode trabalhar com rotao e mexer na pespectiva da imagem.

4o Efeito: Pintar.
Em vez de colocar o Color em Alpha, voc pode colocar em Tint. Nesse modo voc escolhe uma cor e a transparncia que ela vai ter em cima da imagem.

5o Efeito: Mudar a imagem quando passa o mouse.

Selecione a imagem e clique com o boto direito do mouse. Bote em Convert to Symbol l embaixo. Quando voc der dois cliques em cima do boto, vai aparecer uma Timeline bem estranha com 4 botes: Up, Over, Down, Hit. O Up a imagem sem o mouse por cima. O Over o estado que a imagem vai ficar quando voc passa o mouse em cima. O Down como ela fica quando voc fica com o mouse clicado em cima. Hit no vai ter importncia nesse momento, ele neutro. Voc bota keyframe nos trs estados e vai alterando as imagens com o clicando e dando Swap.

Agora com sua criatividade, s no abuse muito dos efeitos para a imagem no ficar esculhambada. Cuidado com a quantidade de imagens para o arquivo no ficar pesado.

Do prximo exerccio at o final do tutorial, usaremos o Photoshop preparar a imagem e o Flash para anim-la, sempre nessa ordem.

Exemplo 9: Flash atravs de Photoshop.

Antes de enviar qualquer arquivo do Photoshop para o Flash, voc tem que ter um ritual de preparao antes. Vamos tomar como exemplo essa imagem daqui j pronta:

Salve em arquivo PSD essa imagem, com as duas camadas: o fundo e o texto. Agora s levar pro Flash, vai l no File > Import> Import to Library.

Quando for importar, selecione todas as camadas e marque Bitmap image with editable layer styles. Isso far com que as imagens se comportem como objetos e no como uma figura chapada, dando mais qualidade. Assim que importar, v na Biblioteca e veja se tudo est normal, pois s vezes d problemas e a imagem fica toda zoada. Note que criou uma pasta e um arquivo acima, arreste este para o stage. Verifique novamente se tudo est normal, se no tiver, simplesmente apague tudo e importe de novo.

Faa o alinhamento da imagem com os centros e depois d dois cliques na imagem. Perceba que agora saiu da Scene 1 e foi parar num lugar com trs camadas. A camada debaixo tem um frame em branco, usaramos para colocar aes, como no vamos, pode deletar. Trabalhar com vrias camadas sempre interessante, pois os objetos se tornam indepentes, pode se fazer o que quiser tanto com o texto quanto com a imagem sem influenciar o outro. Quando terminar de colocar suas animaes na Timeline do smbolo, volte para a Scene 1 e d o famoso CTRL ENTER. Caso no tenha aparecido a animao, deixe a Timeline da Scene 1 com a mesma quantidade de frames que voc utilizou na camada mais longa do smbolo.

Esse ser o penltimo exemplo desse tutorial bsico, no prximo finalizaremos os aprendizados com mscaras e imagens maiores que o stage.

Exemplo 10: Trabalhando com imagens de rea maior.

Vou utilizar essa imagem como exemplo:

A inteno fazer com que a imagem foque na moto e depois v subindo at o nome The Motorcycle Diares. Abra essa foto no Photoshop e selecione a ferramenta Slices (Fatias) apertando a letra K. Em cima deixe o style em fixed size e o tamanho em 132x80 px. Nessa fase do projeto no vamos fazer nenhum progresso, apenas vamos testar a imagem. Insira uma fatia na moto e outra no texto e veja se o tamanho est adequado. O prximo passo voltar ao nicio, zere todas as fatias. V em Image Size (Tamanho da Imagem), atalho ALT CTRL I, e diminua 100 pixels. Teste novamente as fatias se o tamanho est bom. Voc vai dimuindo a imagem at ficar no tamanho ideal. Nunca aumente a imagem, pois perde qualidade. Nesses casos se utiliza o CTRL Z ou CTRL ALT Z. Quando estiver tudo OK, voc elimina as partes da foto que no vai usar com a ferramenta Crop (cortar), tecla C, para que o arquivo no fique pesado. bom tambm deixar uma margem de segurana. Salve em jpg para web e vamos partir para o Flash agora. Lembre-se de eliminar as fatias antes.

Importe a imagem para a Biblioteca e deixe quietinha descansando. Agora partiremos para fazer a mscara.

1o passo: Criando a mscara.

Uma mscara um demilitador de rea, pode ser de qualquer formato: quadrada, circular, cruz, estrela, coqueiro, etc. Um exemplo prtico do que mscara um copo dgua. A gua que nosso objeto assume o formato do copo, que a mscara. Para comear a criar a mscara, insira uma nova camada (Insert Layer), o boto o primeiro da esquerda logo abaixo de onde fica as camadas. Selecione o primeiro frame da camada de cima. Vamos fazer uma mscara retangular verde. Selecione a ferrementa para criar retngulo, aperte R. Crie um retngulo de qualquer tamanho, apertando e arrastando o mouse. Agora mude para ferramenta de seleo (V). Selecione o retngulo criado e em Properties clique em cima da cor ao lado do baldinho. Na janela que abre coloque a cor para verde e o Alpha para 50. Agora precisa deixar o retngulo do tamanho certo e alinhado. Selecione e ele e v para a paleta Align. Verifique se o To Stage est selecionado. Aperte no ltimo boto do Match Size, deixando ele do mesmo tamanho do stage. Agora alinhe aos centros. Mscara pronta.

2o passo: Trabalhando com a figura.

Agora que j tem sua mscara, insira a imagem na layer debaixo. V arrastando ela at o seu ponto inicial, a moto. A rea que estiver em verde ser o que vai aparecer no flash. Selecione a camada de cima (a da mscara), aperte com o boto direito do mouse e selecione Mask. A est, toda a parte no aproveitvel foi cortada! Para voltar a ver a imagem completa, basta tirar o cadeado da imagem de baixo. Apenas sem o cadeado voc pode mover a imagem.

3o passo: Fazendo a animao.

Crie um keyframe no frame 50 da camada inferior e depois outro no 70. Coloque Motion Tween no 50 e mova o objeto do 70 at o ponto final. Agora insira um frame no 120. Na camada superior voc s precisa inserir um frame comum, no caso no de nmero 120 que o final da animao. Mas se preferir, voc tem toda a liberdade para animar a mscara.

Anexo: Salvando o arquivo em Flash

Salvar o trabalho no Flash simples, mas requer ateno porque a imagem no pode passar de 20kb. Para salvar o arquivo .swf (o que voc posta no site), basta ir em File > Publish ou SHIFT F12. Esse arquivo ser salvo na mesma pasta que voc salvar o seu arquivo .fla, portanto salve este primeiro. o salvar normal, CTRL S. No Explorer, abra a pasta onde voc salvou o arquivo. Selecione o swf e veja se o arquivo ultrapassou os 20kb. Caso tenha ultrapassado muito, sugiro que voc retire alguma das imagens. Agora se ultrapassou bem pouco, voc pode diminuir a qualidade de algumas imagens. Procure todas as imagens na Biblioteca, caso tenha usado um psd, elas ficam numa pasta chamada assets, podendo estar dentro de ainda mais pastas. As imagens so aquelas que tem uma rvore do lado. Com a imagem selecionada na Biblioteca, aperte com o boto direito do mouse. Selecione Properties. Desmarque a caixa Use imported JPEG data. Voc define um valor para o campo Quality e aperta em Test para test-lo. Veja se essa foto diminuiu significamente, a quantidade que diminuir aqui vai diminuir no arquivo final. Se precisar, diminua a qualidade de outras imagens. Procure tambm deixar todas as imagens com a qualidade equivalente.

Bem, aqui termina esse tutorial, espero que seja til para vrias pessoas.

Enjoy, Imagemaker! :D

WWW.LEGENDAS.TV