Mapeie uma imagem usando o Photoshop

Escrito por jeff o'kelley | Traduzido por ritaciro cavalcante
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Mapeie uma imagem usando o Photoshop
Mapas de imagem ajudam na navegação entre os links (Henry Gan/Digital Vision/Getty Images)

No mapeamento de imagens, você pode criar certos pontos e transformar em links para outras páginas, sons, animações e vídeos. Mapas de imagem ajudam na navegação para pessoas que tem dificuldades em acessar links em texto ou botões. Você pode montar uma usando o Photoshop, um programa de edição de imagens feito pela Adobe, que também criou o componente Image Ready, com a qual você pode criar o mapa da imagem.

Nível de dificuldade:
Moderadamente desafiante

Outras pessoas estão lendo

Instruções

  1. 1

    No Photoshop, abra a imagem da qual o mapa será baseado. Ela já deve ter sido otimizada para web.

  2. 2

    Acesse o componente ImageReady pressionando Shift + Ctrl + M ou clicando em "Saltar para o ImageReady" na parte de baixo da caixa de ferramentas.

  3. 3

    Pressione a tecla "P" ou selecione a ferramenta "Mapa da imagem" na caixa de ferramentas padrão. Clique e segure o ícone da ferramenta e um menu descerá, com as formas retangular, circular ou poligonal. Escolha a forma que melhor define a área da imagem que você quer mapear.

  4. 4

    Usando o mouse, clique na imagem e defina a área mapeada, clicando e arrastando o mouse. Quando soltar o botão, o ImageReady criará uma nova área mapeada.

  5. 5

    Abra a caixa de opções, clicando no menu "Janela" e selecionando "Mapa de Imagem". Use o campo "Nome" para nomear a área mapeada. Use o campo "URL" para mapear a área a um endereço da web. Use o campo "Alvo" para definir como o link externo será aberto. O campo "Alt" se refere ao texto mostrado quando o ponteiro do mouse é colocado sobre a área mapeada.

  6. 6

    Use o campo "Dimensões" para ajustar a posição e o tamanho do mapeamento. As coordenadas X e Y se referem ao local exato do mapeamento em pixels, horizontal e verticalmente. W e H são, respectivamente, a largura e a altura do mapeamento em pixels.

  7. 7

    Repita os Passos 4, 5 e 6 para todas as áreas que deseja criar.

  8. 8

    Pressione Ctrl + Shift + Alt + S ou vá para o menu "Arquivo" e escolha "Salvar otimizado como". Entre com um nome de arquivo e certifique de que "HTML e imagens" está aparente na seção "Salvar como tipo". Clique em "Salvar" para terminar de salvar o arquivo. Um arquivo HTML e as imagens associadas a ele serão criados.

  9. 9

    Clique no recém-criado arquivo HTML para testar a execução do seu mapa de imagens.

Dicas & Advertências

  • Crie estados de rollover para suas áreas mapeadas, clicando com o botão direito na camada do mapeamento na caixa "Conteúdo Web".
  • Dê uma boa descrição para seus mapeamentos para futura referência
  • Não crie áreas em cima de outras. pois causa problemas no acesso aos links da camada mais inferior.
  • Seja cuidadoso com o número de mapeamentos e mapas de imagem, a fim de evitar páginas confusas e amontoadas.

Não perca

Recursos

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível