Como mapear uma imagem no Gimp (Tutorial)

Por | Atualizado em 2016-09-18

Neste tutorial, iremos explicar como mapear uma imagem usando o editor de imagens Gimp (gratuito). Uma imagem mapeada permite-lhe adicionar vários links diferentes, através da colocação de coordenadas. Esta técnica semelhante têm algumas semelhantes com as CSS Sprites.

Como mapear uma imagem?

Em primeiro lugar, comece por abrir a imagem que pretende mapear no Gimp acedendo ao menu “Arquivo” – “Abrir”.

Caso você não possua o Gimp, poderá baixar o programa na seguinte página: Download Gimp. Agora, aceda ao menu “Filtros” – “Web” – “Imagem Mapeada”.

Surgirá uma nova janela, onde poderá criar a sua imagem mapeada. Comece por selecionar uma das ferramentas de seleção (rectangular, circular, ou polígono).

imagem mapeada no gimp

Nota: A ferramenta de seleção polígono permite-lhe criar o contorno de formas mais complexas. Quando terminar a disposição dos pontos de seleção, clique 2 vezes com o botão esquerdo do rato.

Agora selecione a área que pretende usar, surgirá a janela onde deverá inserir o link de destino. (incluindo o Http://). Desmarque a caixa de seleção “Ligação Web relativa”.

Como mapear uma imagem no Gimp

Quando terminar a edição da imagem, aceda ao separador “Arquivo” – “Guardar Como”. O Gimp normalmente criar um arquivo no formato .map (que não é reconhecido pelo Windows). No entanto, você pode alterar a extensão do arquivo simplesmente digitando o nome seguido de “.html” (sem aspas).

Guardar imagem mapeada

Por fim, abra o arquivo HTML que acabou de criar com o bloco de notas e copie o código fonte da imagem mapeada. Adicione o código fonte na página que pretende utilizar.

Importante: Não se esqueça de fazer o upload da imagem para os servidores do seu Website, ou para um serviço de hospedagem de imagem (photobucket, tinypic, etc), e trocar o respectivo link no código fonte (dentro da tag <img scr="link da imagem">). Caso contrário a imagem não irá carregar.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *