Criando um banner no ImageReady

Publicado por Eduardo Antunes em 20/02/2007

Criando um banner no ImageReady

Olá pessoal.
Vou ensinar a criar um banner animado usando Photoshop e ImageReady.
Todo site, seja de empresa, loja etc precisa anunciar na internet. Eles usam o meio de banners, assim recebem muitas visitas.
Alguns banners são feitos em flash, mas o Photoshop juntamente com o ImageReady podem criar um banner no formato gif muito bom.
Vamos começar?

Abra um novo arquivo do tamanho 468×60 pixels.

Imagem

Vamos ter uma noção básica de como criar um banner:
- Você precisa tem o logotipo do seu site;
- O nome do site é bom sempre vir no final da animação que você fizer (a introdução);
- Você precisa de um slogan;

No decorrer desse tutorial vamos entender melhor tudo isso.
Para continuar, vamos colocar um fundo legal no nosso banner.
Se preferir, use o Gradient Tool (G), fica bem legal:

Imagem

Criado o fundo, vamos colocar o logotipo.
Faça o logotipo com fundo transparente, se você já tiver um desenhado, coloque-o no banner com um tamanho proporcional.
Para esse exemplo, coloquei o logotipo MxStudio (já possui o nome).

Imagem

Agora vamos começar a fazer a propaganda do site, devemos separar todas as frases em camadas.
Nesse exemplo, irei escrever 3 frases:
- Tutoriais de Photoshop?
- O que você precisa está aqui!
- Clique e conheça o MXstudio.

Aqui vai como escrevi e a organização das camadas:

Imagem
Obs: Deixe visível apenas uma camada de texto por enquanto, para não haver confusão:
Imagem

Criamos tudo o que precisamos para o banner, agora vamos passar para o ImageReady.
Aperte CTRL+SHIFT+M.

Na tela do ImageReady, deixe abertas as janelas mais importantes: Animation e Layers (Animação e Camadas).

Deixe visível nas camadas o fundo, o logotipo e a primeira frase que você quer que apareça (no meu caso, a frase “tutoriais de photoshop”).

Logo após, clique em Duplicates Current Frame.

Imagem

Clicando nesse botão, aparecerá outro quadro na janela Animação.
Nesse quadro, tire a visibilidade da camada do primeiro texto (clicando no Olho ao lado da camada).

Agora deixe visível a camada do próximo texto.

Temos 2 quadros:

Imagem

Do mesmo modo que você fez o segundo quadro e trocando as camadas de texto, faça a mesma coisa até terminar todos os textos.

Estamos chegando ao final, vamos dar um toque de animação melhor para você aprender a movimentar objetos.

Crie mais um quadro na janela Animação (Duplicates Current Frame) e deixe somente o fundo e o logotipo aparecendo.
Duplique esse quadro. Agora arraste o logotipo até o outro lado do banner (aqui seria para o lado direito).
Você tem 2 quadros quase iguais. Selecione-os e clique em Tween…

Imagem

Na janela tween, configure assim:

Imagem
Explicação:
Tween with selection = anima a seleção que fizemos dos 2 quadros;
Frames to add = quantos quadros irá usar para animar (não passe de 5 para seu banner não ficar pesado);

Note que ele fez uma transição do logotipo, ele agora está animado!
Agora crie uma camada de texto na janela Layers e escreva seu slogan:

Imagem
Obs: O slogan que usei é apenas para exemplo, não é o slogan do MXStudio.

Vamos agora configurar os tempos.
Para cada quadro de texto use 3 segundos.
Para os quadros da animação do logotipo use 0 segundos.
Para o quadro final com o slogan use 5 segundos.

Para mecher no tempo, clique na marcação em baixo do quadro na janela Animation.
Selecione um dos tempos que ele mostra ou clique em Other para por o seu.

Imagem         Imagem

Agora é só salvar.
File (Arquivo), Save Optimized (Salvar otimizado).

Preview:

Pronto, você aprendeu a criar banner no ImageReady.
Agora é só usar a criatividade e fazer seus banners.

É isso aí pessoal, um abraço.

Autor: Eduardo Antunes.

Em caso de dúvidas acessem o nosso fórum.

Assine o nosso Feed
1.281 assinantes,
assine você também!
Publique esse artigo no Twitter Salve este artigo no Delicious Cadastre esse artigo no Dihitt Cadastre esse artigo no UEBA Cadastre esse artigo no Rec6

Eduardo Antunes

54 usuário comentou em " Criando um banner no ImageReady "

Assine o Feed de Comtentários ou URL de Trackback

Vinícius disse,
Enviado em 11-04-2008 às 10:01 pm

E como faço para publicar meu banner a partir do código que o Image Ready disponibiliza?

Marcinha disse,
Enviado em 16-04-2008 às 10:22 pm

Tá, adorei o tutorial, fiz o banner e agora n faço idéia de como divulgar no my space.
Help please

maria disse,
Enviado em 17-04-2008 às 8:50 am

como eu faço p/ criar um slogan sem ter photoshop???

g23_info disse,
Enviado em 20-04-2008 às 12:11 am

Muito bom mesmo, fácil de aplicar, ótima dica, parabéns!

g23_info disse,
Enviado em 20-04-2008 às 12:47 am

Respondendo ao Vinícius, acima, eu aqui exportei e copiei o código onde aponta para o arquivo gerado “g23_anuncie.swf” e colei na minha página, mas vc poderá editar o próprio html gerado com um programa editor “front page”, ou até mesmo o bloco de notas. Espero ter ajudado!

Gabriel disse,
Enviado em 24-04-2008 às 11:38 pm

como eu faço para mudar o efeito do banner?

Porque no meu não ficou com esse efeito de fade in e out… o logotipo apenas “corre” de um lado pro outro…

Gabriel disse,
Enviado em 24-04-2008 às 11:39 pm

Note que ele fez uma transição do logotipo, ele agora está animado!
Agora crie uma camada de texto na janela Layers e escreva seu slogan:

não entendi esse ponto também

ne disse,
Enviado em 01-05-2008 às 8:18 pm

po cara vc ajudou tanto que eu nem consegui fazer um baner

matheus disse,
Enviado em 04-05-2008 às 4:13 pm

FERAS

VLW MUITO BOM !!

MAS NA ORA DE SALVA EU NAO CONSIGO

NAO TEM ESSA OPÇÃO ” Save Optimized ”

COMO EU FAÇO ???

ME AJUDA

ME ADD NO MSN

MATHEUSEZUEIRA@HOTMAIL.COM

VLW

ABRAÇOS

SAL

EDGARD disse,
Enviado em 22-05-2008 às 10:11 am

obrigado pela dica muito facil e pratico

Sonia disse,
Enviado em 22-05-2008 às 10:32 am

Usei seu tutorial no Jasc Paint Shop e no Animatios, ficou otimo, claro a modo da velocidade das frames eu fui testanto ate encontrar uma ideal
Valeu

Larissa disse,
Enviado em 02-06-2008 às 7:56 pm

Bom,eu quero um banner pra MeAdd.com só quee eu quero saber se é em qualqueer photoshop?

thay disse,
Enviado em 17-06-2008 às 11:09 pm

aah, muito obrigada *-* ajudou muito! vlw por compartilhar sua experiência com os outros e não ser mesquinho como muita gente por ai… =) beeeeeijos =**

Luh disse,
Enviado em 20-06-2008 às 11:36 am

Ensina muitoo beem ..
mais queria saber como fazer banners para meadd … pois querooo muitooo aprender !!

bjux :*
?

Curioso disse,
Enviado em 03-07-2008 às 12:18 am

Cara vc eh bom heim pra explicar…
consegui fazer tudo sem complicação

apenas uma coisa não consegui…

publicar no meu blog…
tipow parece que o codigo não bate…
eu coloco lah e aparece apenas o nome que eu coloquei no meu baner… (aquele nome no inicio onde eu escolho o tamanho onde eu vou trabalhar)

se tiver como vc me ajudar

eu disse,
Enviado em 03-07-2008 às 10:40 am

ttah bom!
mais como abree esse arkivooo???

flavim47_bob disse,
Enviado em 04-07-2008 às 3:30 pm

ensina bem
+ eu qria saber como q
faz banners no meadd
falo…..fla47

pappasepippas disse,
Enviado em 05-07-2008 às 3:10 am

Cara devo muito a voce ta de parabens,facil de aprender,rapido,ja fiz 3 rapidim,isso vai me ajudar muti agora.brigadao
visitem meu blog para ver como ficou.
http://www.pappasepippas.blogspot.com

ionso disse,
Enviado em 14-08-2008 às 11:36 am

gostei mto dessas dicas…kero m formar nessa area de websites….obrigado pela dica…mozambique no ar

alvaro disse,
Enviado em 21-08-2008 às 8:25 pm

oi eu ostaria de saber como eu faço um banner pro meu site em php meu msn alvinho.ariel@hotmail.com

rosemere disse,
Enviado em 23-08-2008 às 8:26 pm

tbm quero aprender pra colocar no meadd..bjos..

thay disse,
Enviado em 25-08-2008 às 12:56 pm

gente, pro meadd é a mesma coisa que esse ai… oO’

camila disse,
Enviado em 28-09-2008 às 5:55 pm

oi
lwegal

Maaarii disse,
Enviado em 29-09-2008 às 1:02 pm

Oiiieee..

euu quero q voce mee ajuude a faaazer montagem com o photoshop me eexpliquee..
poooor favoor..
dees de ja obriiigadooo
Beeeeeeejoo

Thayra disse,
Enviado em 29-09-2008 às 10:37 pm

Como abree o Arquivo?

william radi disse,
Enviado em 29-10-2008 às 10:37 pm

pow, parabáns pelo tuto, mas tenho um problema….
quando salvo o banner em gif, ele só vai até um pedaço, não aparece a “animação” inteira……

pode ter algo a ver com o nº de frames? pq ficou com uns 60 frames….
XD

valeu!

kaio menezes disse,
Enviado em 30-10-2008 às 10:56 pm

nossa é muito interessante fazer um banner!

sanderson disse,
Enviado em 01-11-2008 às 10:48 am

muito bom esse exemplo parabens!!!!!
ja aprendi um bucado vlw….
continuem assim.
abraço pra vcs ou vc ok’s^^.

Danone* disse,
Enviado em 15-11-2008 às 8:53 am

O_o fiquei um pokinho’ com duvida quem quiser me ajudar me add nun msn awe>

joaofelipebcouto@hot…..

:)

^.^ ^.^

junim disse,
Enviado em 09-12-2008 às 7:23 pm

nao consigo abrir o ImageReady

Dayse disse,
Enviado em 11-12-2008 às 11:35 am

Vamos começar?

Abra um novo arquivo do tamanho 468×60 pixels.

táa mais como eu abro esse arquivo ?

Sfappi disse,
Enviado em 11-12-2008 às 2:52 pm

Olá!
Já contruí o meu BANNER. Ficou muito bom.
Muito obrigada pela aula. Amei o site e os artigos interessantes dele. Sou uma apaixonada por photoshop e você me ajudou bastante.
Obrigada novamente à você e a toda equipe do MX STUDIO.

so burro :) disse,
Enviado em 05-02-2009 às 1:22 pm

… GENTE PLZZ ME AJUDA!!!! EU NAO CONSIGO FAZER O FUNDO!!! E TB NAO CONSIGO ESCREVER NA PARTE DO “LAYER” POR FAVOR ME DIZ DETALHADAMENTE PLZZ POIS NUM CONSIGO ALI SO “EU VOU ESCREVER” MAS NAO DIZ ONDE TEM QUE CLIKA ETC…e tipo eu cliko em criar uma nova camanda mas nao abre nada pra eu digita etc…

hmm disse,
Enviado em 05-02-2009 às 1:37 pm

e tipo naquela parte
Criamos tudo o que precisamos para o banner, agora vamos passar para o ImageReady.
Aperte CTRL+SHIFT+M.

Na tela do ImageReady, deixe abertas as janelas mais importantes: Animation e Layers (Animação e Camadas).

Deixe visível nas camadas o fundo, o logotipo e a primeira frase que você quer que apareça (no meu caso, a frase “tutoriais de photoshop”).

Logo após, clique em Duplicates Current Frame.

¬¬” nao entendi nada…eu tipo peguei o mesmo plano de fundo que ele mas nao botei nada depois oq tem q fazer no photoshop……… meu deus nao entendo

Letícia Medina disse,
Enviado em 12-02-2009 às 2:17 pm

oi mas como eu acho um programa para fazer um barnner?

Danyele disse,
Enviado em 24-02-2009 às 2:58 pm

Duplicates Current Frame. onde fica essa ferramenta ?? me enrolei nessa parte aíi

Simone Atlante disse,
Enviado em 31-03-2009 às 1:55 am

Olá, eu criei o Banner como você ensinou, mas ele salva em gif, não gerando nenhum código HTML.
Então eu joguei ele no Site : http://img10.imageshack.us/content.php?page=done&l=img10/4817/banner1nrl.gif&via=mupload , e lá foi gerado o código, então alterei o primeiro endereço do código para o endereço do meu site. Funcionou quando jogo no Orkut, as pessoas clicam no Banner e são direcionadas para o meu Site, mas por e-mail já não funciona, nem anexando, nem enviando como figura, nem escrevendo o código…nada.
Como faço para ter um Banner que ao clicar as pessoas sejam direcionadas para o meu Site, que funcione em e-mails ???
Obrigadão…

Eli disse,
Enviado em 20-05-2009 às 12:19 pm

Muito Bom! Consegui seguir as instruções direitinho… a única coisa q não consegui foi o slogan.. não entendi muito bem!
Mais Parabéns pela explicação.
Obrigada

Derneval disse,
Enviado em 05-06-2009 às 5:50 pm

Boa noite, fiz tudo direito saiu bom demais, oitmo, eu salvei como manda mais não consigo achar, como faço pra achar a imagem, um abraço

john Lessa disse,
Enviado em 13-06-2009 às 1:04 pm

olha nn conseguiir fazer miim add no msn.por favor;

meeu msn ~> john_matador1@hotmail.com.

vlw

Mateus Piaia disse,
Enviado em 01-07-2009 às 9:43 pm

belo tutorial , consegui e fico diferente !!!
fico bem legal =]

Felipe Nascimento disse,
Enviado em 09-07-2009 às 12:03 am

Olá eu gostaria de saber o que é esse image ready… valeeu

Maiara oxford disse,
Enviado em 11-07-2009 às 1:29 am

Ficou maravilhoso, amei.

Jose Alexandre Martins disse,
Enviado em 16-07-2009 às 5:45 pm

Fomidável ! Gostei muito da explicação e do estilo .

majcbranco disse,
Enviado em 15-08-2009 às 8:45 pm

Show de bola, valeu. Agora me informa como exporto ele para meu site, pois uso o flash e o drewaver. Já tentei através do Fireworks mas não conseguir. Fico no aguardo da ajuda.

aline disse,
Enviado em 18-08-2009 às 1:40 pm

eu quero um banners pra mim :D

alan disse,
Enviado em 28-08-2009 às 3:21 pm

queria uma ajuda de vcs
to tentando aprender fazer banner para o meu meadd,mais é muito dificil no cs4 ,gostaria de alguma ajuda
poderia ser a de vcs?

Desenvolvimento de Site | Criação de Sites disse,
Enviado em 21-10-2009 às 5:42 am

Fikou D+ agora vou tentar por meu blog.

Bj

Marina

Rose disse,
Enviado em 10-11-2009 às 12:25 am

Muito bom! Fiz um banner seguindo as instruções e funcionou direitinho, porém a transição do logotipo não ficou igual a sua, como faz esse efeito de fade in out . Outra dúvida; Quando chega no último quadro ele para não fica recomeçando. Se puder me ajudar nessas dúvidas, agradeco muito.

lucas disse,
Enviado em 07-12-2009 às 8:19 pm

parabens

NeW_Ball disse,
Enviado em 16-12-2009 às 3:12 am

Familia grande cabulosa

ar condicionado split disse,
Enviado em 26-12-2009 às 10:36 am

ajudou muito
brigadinha
Ana

Vidro Temperado disse,
Enviado em 01-01-2010 às 6:00 am

Deu certo, ja está no meu blog.
Tanks!!!

Bruna

João Victor disse,
Enviado em 12-01-2010 às 6:22 pm

fiz tudo direitinho, mas quando chego na hora de clicar “Tween” “Selection” está em branco, ou seja não da pra clicar, me ajudem por favor!

Deixe o seu comentário abaixo...

 Username (*required)

 Email Address (*private)

 Website (*optional)

 

MXStudio © 2003-2010. Todos os direitos reservados.
É expressamente proibido a cópia, reprodução e difusão dos textos, fotos e outros elementos contidos neste site sem autorização expressa do MXStudio.