Como fazer um mapa de imagem usando o Photoshop

Passo 1

Abra a imagem que você usará para criar seu mapa de imagem no Photoshop. A imagem já deve estar otimizada para a Internet.

Passo 2

Acesse o componente Image Ready do Photoshop pressionando "Shift-Ctrl-M" ou clicando no botão "Editar na imagem pronto" na parte inferior da sua caixa de ferramentas.

Passo 3

Pressione a tecla "P" ou selecione o ícone da ferramenta "Image Map" na caixa de ferramentas padrão para acessar a ferramenta "Image Map". Mantenha a ferramenta "Image Map" pressionada e você verá uma forma retangular, circular ou poligonal. Selecione a forma que melhor se adapta à área da imagem que você deseja usar como um ponto ativo.

Passo 4

Usando o mouse, clique na imagem e realce a área do ponto ativo clicando e arrastando o mouse. Quando você soltar o botão do mouse, o Image Ready criará um novo ponto ativo na sua imagem.

Passo 5

Abra a caixa de opções do mapa de imagem clicando no menu suspenso "Janela" e selecionando "Mapa de imagem". Use a opção "Nome" para nomear o ponto ativo. Use o menu suspenso "URL" para destacar uma página local ou digite o endereço de uma página da Web externa para acessar por meio desse ponto ativo. Use o menu suspenso "Destino" para destacar como seu link externo será aberto. A área "Alt" conterá o texto exibido quando um ponteiro do mouse estiver posicionado nesse ponto ativo.

Passo 6

Use as opções "Dimensões" para ajustar a posição e o tamanho do seu ponto ativo. X e Y designam a localização exata do seu ponto ativo usando os pixels verticais e horizontais. W e H permitem que você defina o tamanho do seu ponto ativo usando um número de pixels.

Passo 7

Repita as etapas 4, 5 e 6 para cada ponto ativo que você deseja criar.

Passo 8

Pressione "Ctrl-Shift-Alt-S" ou selecione o menu suspenso "Arquivo" e escolha "Salvar otimizado como". Digite um nome de arquivo e verifique se "HTML e imagens" aparece na seção "Salvar como tipo". Clique em "Salvar" para concluir o processo de armazenamento de arquivos. Isso cria um arquivo HTML e uma pasta associada para imagens.

Passo 9

Clique no arquivo HTML recém-criado para testar a operação do novo mapa de imagem.