Quando você clica em parte da imagem de um site e seu navegador salta para uma página Web diferente, um mapa de imagem é provavelmente responsável por essa ação. Os designers de site pode escrever código HTML que cria pontos quentes clicáveis em qualquer imagem. Construção de mapas de imagem à mão é demorado porque é necessário identificar as coordenadas exatas de cada um hot spot. Com a ferramenta Fatia no Photoshop, você desenha pontos quentes em uma imagem para gerar o código HTML que você precisa automaticamente.
Criar Mapa Imagem
Inicie o Photoshop e abrir uma imagem que você deseja converter em um mapa de imagem. Clique e segure o "Colheita" ferramenta para exibir um menu contendo outras ferramentas. Clique no "Fatia" ferramenta para selecioná-lo.
Clique em um ponto dentro da imagem e arraste a ferramenta fatia para desenhar uma caixa delimitadora ao redor da parte da imagem que você quer fazer clicável. Photoshop desenha adicional "fatias automáticas" em torno de outras partes da imagem. Estas fatias automáticas assegurar que todas as partes de uma imagem são incluídas numa fatia.
direita; clique dentro da fatia criada e selecione "Editar Opções da Fatia" para abrir a janela Opções da Fatia. Digite a URL que você deseja associar com a fatia. Você também pode substituir o nome padrão que o Photoshop deu a fatia digitando um novo na "Nome" caixa de texto.
Clique "Está bem" para fechar a janela Opções da Fatia e retornar à imagem. Clique em outro ponto dentro da imagem e arraste a ferramenta Slice para criar fatias adicionais, conforme necessário.
Ajustar imagem de mapa Slices
Selecione os "Slice Select Tool" a partir da barra de ferramentas e clique dentro de uma fatia que deseja mover.
Mantenha pressionado o botão esquerdo do mouse e arraste a fatia para uma nova localização.
Mantenha o cursor do mouse sobre uma das bordas da fatia e uma linha com setas em cada extremidade aparece. Clique nessa linha, mantenha pressionado o botão esquerdo do mouse e arraste o mouse se você precisa para fazer a fatia maior ou menor.
Salvar Mapa Imagem
Clique "Arquivo" Seguido por "Save for Web" para abrir o Salvar para a janela Web.
Clique "predefinido" e selecione uma das opções de tipo de arquivo que aparecem. As opções incluem GIF 128 Rasterizado, JPEG e PNG alta-24.
Clique "Salvar" para abrir uma janela que exibe arquivos e pastas do seu disco rígido. Navegue até a pasta onde você deseja salvar os arquivos de mapa de imagem e digite um nome para o mapa de imagem na caixa de texto Nome do arquivo.
Clique no "Formato" drop-down menu e selecione "HTML e imagens." Clique "Salvar" para salvar todos os arquivos para a pasta que você especificou.
dicas & avisos
- Photoshop salva cada fatia como uma imagem separada em uma pasta de imagens. O programa também salva um documento HTML que tem o mesmo nome que o nome digitado na "Nome do arquivo" caixa de texto. Se você encontrar esse arquivo HTML no File Explorer e clique duas vezes no arquivo, o navegador é aberto e exibe o seu mapa de imagem. Clique diferentes partes do mapa de imagem para navegar para as URLs que você atribuídos às fatias. Por exemplo, se você divide um mapa EUA em estados através da criação de uma fatia para cada estado, você pode clicar em um estado para ir para o URL atribuído a fatia desse estado.
- Dê fatias nomes significativos e você vai encontrá-lo mais fácil de identificá-los, se você quiser ajustar o código HTML que o Photoshop gerado. Por exemplo, se você criou uma fatia que rodeava o estado de Iowa, você pode nomear a fatia de Iowa.
- Você provavelmente vai querer salvar suas imagens de mapa de imagem no mesmo formato que a imagem original. Por exemplo, se for um JPEG, escolha uma das opções JPEG a partir do menu drop-down predefinido no Salvar para a janela Web. Escolher "JPEG Baixo," por exemplo, e Photoshop gera imagens JPEG de baixa qualidade. A baixa qualidade de uma imagem, mais rápido ele carrega em um navegador da Web.
- Este artigo é aplicável a Adobe Photoshop CC de 2014 a versão. Algumas informações podem variar em outras versões do programa.
Referências
recursos
- Crédito da foto Shironosov / iStock / Getty Images
Como abrir uma jpeg no camera raw
Como fazer com que um lado de uma imagem escura e do outro lado luz no photoshop
Como capturar uma imagem de um arquivo pdf
Como emendar imagens para web design
Como converter uma imagem adobe photoshop em uma imagem vetorial
Como converter um pdf para um psd no photoshop
Como instalar texturas photoshop