Criar um banner animado (Photoshop 7) <Clique aqui para visualizar o exemplo> Desenvolva um banner animado utilizando o Photoshop e o Image Ready. Neste tutorial, aprenda a utilizar filtros, estilos em camadas, fazer animações GIF, etc.

1 Abrir um novo arquivo. Arquivo > Novo

2 Na janela "Novo". No item "Tamanhos de Predefinição" selecione "banner da Web 468 x 60".
Obs.: Esse é um dos tamanhos padrões para desenvolver banners, mas existem outros tamanhos e padrões utilizados pela UNESP. Para saber mais a respeito <clique aqui>


3 Na janela "Camadas". Se não estiver visível, selecione Janela > Camadas.
Crie uma nova camada, clicando no item apresentado no círculo vermelho na imagem abaixo, uma nova camada será criada (indicado pela seta vermelha): 4 Na barra de ferramentas, se não estiver visível selecione Janela > Ferramentas.
Clique na cor do primeiro plano para escolher uma cor:

5 A janela de Seletor de Cores se abrirá: 6 Selecione uma cor. Depois clique OK. A cor que você escolheu, agora está definida como Cor de Primeiro Plano. No nosso exemplo, selecionamos azul, então na nossa barra de ferramentas veremos assim: 7 Para alternar entre as cores do primeiro plano com o segundo, clique no ícone indicado pela seta vermelha, para voltar as cores do modo padrão, clique no ícone indicado pela seta verde: 8 Vamos agora preencher o nosso banner com a cor que escolhemos. Certifique-se de estar na nova camada que criamos, basta clicar sobre a camada para selecioná-la. Então, selecione Editar > Preencher. A janela de "Preencher" se abrirá: 9 Certifique-se de no item "Usar" estar com a "Cor do Primeiro Plano" selecionado e clique OK. Dessa forma a sua camada será preenchida com a cor que selecionamos. 10 Vamos aplicar um filtro nessa camada.
Obs.: Filtros são pequenos aplicativos que acompanham o Photoshop. Eles permitem que apliquemos efeitos em nossas imagens.

Certifique-se de estar na camada que foi preenchida com a cor.
Selecione Filtro > Estilização > Extrusão.
A janela com as propriedades do filtro Extrusão será aberta, mantenha os itens dessa janela iguais ao apresentado na imagem:

Dica: Posteriormente você poderá testar e mudar as características dos outros filtros para ver como funcionam e qual efeito geram. 11 Clique OK. Agora vejamos o efeito que esse filtro gerou: 12 Dê um duplo clique sobre essa camada para renomeá-la.
Escreva "Fundo": 13 Selecione uma nova cor de Primeiro Plano (conforme exemplificado nos itens 4 a 6).
Agora selecione a ferramenta Texto (indicada pela seta vermelha): 14 Agora clique em qualquer lugar da nossa imagem.
Digite "Compareça no nosso evento.".
Clique sobre o ícone no lado direito superior na barra de propriedades da ferramenta Texto para confirmar a edição atual.
Verifique que agora o Photoshop cria uma nova camada contendo o texto que acabamos de digitar: 15 Vamos mudar o tipo e tamanho da fonte do texto que digitamos.
Dê um duplo clique sobre o ícone que aparece ao lado na camada do Texto que digitamos. Isso fará com que o texto seja selecionado e a barra de propriedades da ferramenta Texto aparece na barra superior da tela.

Ainda com o texto selecionado, altere a fonte para Arial, e tamanho 24, conforme imagem abaixo: 16 Confirme sua alteração.
Obs.: Clique no ícone para confirmar a edição.
17 Agora, selecione a ferramenta "Mover" na barra de ferramentas: 18 Clique e arraste o texto para o lado esquerdo da tela: 19 Vamos inserir um estilo de camada ao nosso texto. Clique sobre a camada do texto para selecioná-lo. Clique no ícone Estilo de Camada e selecione o estilo Traçado: 20 A janela Estilo de Camada será aberta (imagem abaixo). O estilo traçado faz uma borda no elemento que estiver na camada, no caso, o nosso texto. Selecione tamanho 2 e opacidade 77. Altere a cor da borda se desejar e clique OK:
21 Agora a nossa camada possui um ícone de "Estilo de Camada" para informar que ela possui um estilo (imagem esquerda).
Se você clicar sobre a seta azul ao lado desse ícone, a camada se desdobrará para mostrar qual o estilo foi aplicado (imagem direita): 22 Para alterar ou remover esse estilo. (acompanhe pela imagem abaixo)
Clique com o botão direito sobre o ícone de "Estilo de Camada" e uma lista de opções aparecerá.

Alterar/Incluir novo Estilo:
Na primeira parte da lista que é apresentada (ver imagem abaixo), temos todos os estilos, o estilo que estiver com um ícone de "Visto" é o que está sendo utilizado nessa camada. Basta clicar sobre um dos estilos para a janela de propriedades desse estilo ser aberta. Faça as alterações necessárias e clique OK.

Remover Estilo:
Na segunda parte da lista que é apresentada (ver imagem abaixo), temos alguns comandos de edição dos estilos. Para remover um estilo clicamos em "Apagar estilo de camada". E o nosso objeto da camada voltará ao seu estado normal, no caso, nosso texto voltará a ficar sem a borda.

23 Agora vamos criar um novo texto.
Obs.: Para criar um texto, verifique os passos 13 a 15 para inclusão de um texto.
Digite: "Nos dias 20, 23 e 28 de Janeiro".
Deixe a fonte com tamanho 18 e ajuste a sua localização na tela no lado direito. 24 Aplique o mesmo estilo que utilizamos para o texto anterior.
Você pode repetir os passos ditos anteriormente, ou copiar o estilo de uma camada.

Copiar Estilo:
Selecionamos a camada onde o estilo está aplicado (clique sobre a camada para selecioná-la).
Essa será uma continuação do passo 22:
A segunda parte da lista que é apresentada (ver imagem acima), temos alguns comandos de edição dos estilos. Para copiar um estilo clicamos em "Copiar estilo de camada".
Clicamos na camada que desejamos aplicar o mesmo estilo que copiamos, clicamos com o botão direito sobre ela e selecionamos "Colar estilo de camada". E a camada terá o mesmo estilo que o da camada anterior. 25 Nossa imagem está assim: 26 Muito bem, agora vamos deixar nossas camadas de texto invisíveis.
Para isso, clique sobre o ícone (indicado pela seta vermelha) mostrado na figura abaixo para tirar a visibilidade da camada: 27 Faça o mesmo para a camada com o texto "Compareça..." 28 Agora, crie um novo texto e digite: "Participe!".
Coloque tamanho 48 e o centralize na tela. 29 Deixe essa camada invisível, e deixe SOMENTE a camada "Compareça..." visível. 30 Como você já sabe aplicar um estilo em uma camada, aplique um estilo "Traçado" na camada "Fundo". Assim nossa imagem de fundo ficará com uma borda.
Dica: Na janela de Estilo de Camada, lembre-se de selecionar a posição Interna, assim você poderá visualizar a borda que criou.

Salve o seu trabalho. 31 Na barra de ferramentas, selecione o ícone "Saltar para o Image Ready" 32 O Image Ready será aberto com a sua imagem. 33 Agora temos na nossa tela o seguinte formato: 34 Selecionamos a aba "Animação".
Se você não estiver visualizando, selecione Janela > Animação. 35 Na imagem acima, visualizamos a Cena 1 da Animação.
Vamos criar uma nova cena, clicando sobre o ícone (indicado pela seta vermelha) para duplicar a tela da animação: 36 Temos agora a cena 1 e 2 da animação. Na imagem acima, podemos ver que a cena 2 está selecionada, pois esta aparece com uma borda azul.
Com a cena 2 selecionada, vá até a janela de camadas e deixe visível a camada "Nos dias...".
Se você não estiver vendo essa janela, selecione Janela > Camadas.

37 Então na cena 2 aparecem as camadas "Compareça..." e "Nos dias..." 38 Crie uma nova cena. Nesta cena apenas deixe visível a camada "Participe!".
Teremos então:

39 Agora, selecione as cenas 1 e 2.
Dica:
Para selecionar as duas cenas
Clique na cena 1 e clique a tecla "Shift" do seu teclado, geralmente representada por uma seta para cima. Mantenha essa tecla pressionada enquanto você clica com o mouse sobre a cena 2. Solte a tecla Shift. 40 Agora você interpolar essas cenas. Clique sobre o ícone indicado pela seta vermelha: 41 A janela Transição se abrirá. Mantenha todas as informações padrões e clique OK.
Agora você nota que a sua janela de animação mudou. Apareceram novas cenas.
As novas cenas 2, 3 e 4 agora são as cenas que fazem a transição da cena 1 para a cena 5. 42 Para visualizar o andamento da sua animação até agora, clique sobre o ícone "Visualizar em Navegador Padrão" na barra de ferramentas, se não estiver visível, selecione Janela > Ferramentas: Obs.: No nosso caso usamos o navegador Internet Explorer, caso você tenha o Netscape como navegador padrão esse ícone será alterado para o ícone do Netscape. 43 Note que nossa animação está muito rápida.
Para melhorarmos o tempo da nossa animação, voltemos para o Image Ready na janela de Animação. 44 Selecione a Cena 1. Note que logo abaixo dela aparece "0 seg" e uma seta para baixo.
Isso representa o intervalo de tempo que ela ocorre.
Cliquemos sobre a seta ao lado do "0 seg". Agora aparece algumas opções de intervalo de tempo. Selecione 1,0 para essa cena. Assim:
45 Para as cenas 2, 3 e 4 coloque o intervalo de tempo de 0,1 segundos.
E para a cena 5 deixe 2,0 segundos. 46 Agora visualize a sua animação no navegador (passo 42). 47 O intervalo de tempo ficou bem melhor certo?
Agora repita os passos 39 até 46 com as cenas 5 e 6.
Dica: Lembre-se de manter o tempo da cena 5 como 2 segundos. As novas cenas intermediárias que serão criadas (6,7 e 8) para o intervalo de tempo 0,1 segundos e a cena 9 para 2 segundos. 48 Você pode posteriormente fazer diferentes transições e intervalos de tempo diferentes.
Dica: No nosso exemplo <clique aqui para visualizar>, criamos uma nova cena após a cena 9. Nela deixamos a camada "Participe!" invisível e deixamos somente a camada "Compareça..." visível.
Fizemos uma transição com as cenas 9 e 10. E mantivemos os mesmos intervalos de tempo que utilizamos no passo 47. Assim a transição entre a camada "Participe!" e "Compareça.." ficou mais suave.
Tente você fazer isso também. 49 Para salvar a seu banner animado, clique em Arquivo > Salvar otimizado como.
Selecione um local para salvar sua imagem.
Agora basta inserir o seu banner na sua página HTML.



http://www.unesp.br/gti/tutoriais/photoshop/ps001/index.php