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.

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:

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).

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:

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

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.

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:

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…

Na janela tween, configure assim:

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:

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.

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.
|
E como faço para publicar meu banner a partir do código que o Image Ready disponibiliza?
Tá, adorei o tutorial, fiz o banner e agora n faço idéia de como divulgar no my space.
Help please
como eu faço p/ criar um slogan sem ter photoshop???
Muito bom mesmo, fácil de aplicar, ótima dica, parabéns!
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!
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…
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
po cara vc ajudou tanto que eu nem consegui fazer um baner
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
obrigado pela dica muito facil e pratico
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
Bom,eu quero um banner pra MeAdd.com só quee eu quero saber se é em qualqueer photoshop?
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 =**
Ensina muitoo beem ..
mais queria saber como fazer banners para meadd … pois querooo muitooo aprender !!
bjux :*
?
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
ttah bom!
mais como abree esse arkivooo???
ensina bem
+ eu qria saber como q
faz banners no meadd
falo…..fla47
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
gostei mto dessas dicas…kero m formar nessa area de websites….obrigado pela dica…mozambique no ar
oi eu ostaria de saber como eu faço um banner pro meu site em php meu msn alvinho.ariel@hotmail.com
tbm quero aprender pra colocar no meadd..bjos..
gente, pro meadd é a mesma coisa que esse ai… oO’
oi
lwegal
Oiiieee..
euu quero q voce mee ajuude a faaazer montagem com o photoshop me eexpliquee..
poooor favoor..
dees de ja obriiigadooo
Beeeeeeejoo
Como abree o Arquivo?
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!
nossa é muito interessante fazer um banner!
muito bom esse exemplo parabens!!!!!
ja aprendi um bucado vlw….
continuem assim.
abraço pra vcs ou vc ok’s^^.
O_o fiquei um pokinho’ com duvida quem quiser me ajudar me add nun msn awe>
joaofelipebcouto@hot…..
^.^ ^.^
nao consigo abrir o ImageReady
Vamos começar?
Abra um novo arquivo do tamanho 468×60 pixels.
táa mais como eu abro esse arquivo ?
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.
… 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…
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
oi mas como eu acho um programa para fazer um barnner?
Duplicates Current Frame. onde fica essa ferramenta ?? me enrolei nessa parte aíi
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…
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
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
olha nn conseguiir fazer miim add no msn.por favor;
meeu msn ~> john_matador1@hotmail.com.
vlw
belo tutorial , consegui e fico diferente !!!
fico bem legal =]
Olá eu gostaria de saber o que é esse image ready… valeeu
Ficou maravilhoso, amei.
Fomidável ! Gostei muito da explicação e do estilo .
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.
eu quero um banners pra mim
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?
Fikou D+ agora vou tentar por meu blog.
Bj
Marina
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.
parabens
Familia grande cabulosa
ajudou muito
brigadinha
Ana
Deu certo, ja está no meu blog.
Tanks!!!
Bruna
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!
Onde eu baixo o Imageready ?
oi pessoal.. estou louca para fazer um banner… preciso de ajuda!! este programa é mto ruim.. nao sei mexer nele nao pessoal!! o trabalho é pra amanhã, estou desesperadaaaaaaaaaaaaaaaaaaaa beijos
este programa é muito legal
Pra quem ta com dificuldade na hora de salvar,e não está achando o save .optimized tente o Save for Web & Devices.Espero ter ajudado;