Mapeamento com Image Ready - Aline Star☆

15 de julho de 2009

Mapeamento com Image Ready

Mapeando imagens no Image Ready (Photoshop)
Mapeamento de imagens (transformar uma imagem em link), é algo muito útil para organizar seu site/blog.
Hoje vou ensinar a fazer o mapeamento no Image Ready,programa que vem junto com o Photoshop.
1.Abra no Photoshop a imagem que você quer mapear.


2.Clique em Saltar para o Imageready.


3.Irá abrir o Image Ready com a sua imagem lá.
Aí clique na ferramenta Mapa de Imagem


4.Agora selecione o local que você quer mapear e preencha um "formulário" que aparece lá em baixo no canto esquerdo da tela.


5.Preencha os dados que pedem no formulário,é necessário preencher só a URL,que é o endereço da página que você quer que abra quando a pessoa clicar, e o ALT que é o texto ou a palavra que aparecerá quando a pessoa descansar o mouse na área mapeada.
As dimensões não é necessário ajustar,pois ela mesmo se ajusta quando você faz a seleção da área mapeada.

6.Se você for mapear mais de uma área,faça o mesmo procedimento,na mesma figura,sem fechar ou minimizar nada!

7.Depois que você terminar a seleção,clique com o botão direito do mouse,em cima da área selecionada e vá em Visualizar em e depois em Internet Explorer.


8.Irá abrir uma página no IE com o código do mapeamento.
Você irá copiar só a parte do HTML.


9.Na parte que diz IMG SRC="ENDEREÇO DA IMAGEM" você deverá hospedar a imagem que deseja mapear e colocar o endereço nesse local.


10.Coloque o código entre a tag body do seu HTML e pronto!



Tutorial elaborado por ALINE.
Se lhe foi útil,dê os créditos!
Qualquer dúvida é só perguntar!

7 comentários:

  1. muito obrigada *-*

    ResponderExcluir
  2. Muito útil, obrigada :D

    ResponderExcluir
  3. super util, tava procurando faz tempo

    ResponderExcluir
  4. Que imagem,a imagem do lay ou da parte que está sendo mapeada com o nome e tal?!

    ResponderExcluir
  5. Boiei no passo 10. O que é tag body? E qual o código de que vc está falando?

    ResponderExcluir
  6. Muito bom o tutoriaaal, me ajudou muito..obrigada por compartilhar seus conhecimentos:D

    ResponderExcluir
  7. Muito bom seu tutorial! Adorei e deu super certo!
    A minha dúvida é, se eu for mapear apenas o header do template, eu posso colocar o código gerado entre as tags "body" e ela vai aparecer automaticamente no lugar da imagem do cabeçalho?
    Se puder me responder ao meu e-mail eu te agradeço (pingosegotas@hotmail.com).
    Bjks

    ResponderExcluir