segunda-feira, 18 de junho de 2012

COMO COLOCAR LINK EM IMAGEM


Como usar a ferramenta slice (Fatia)

Já pensou em fatiar uma imagem? Sim! Elas também são fatiáveis! Descubra como fazer com que suas fotos sejam divididas em pedaços sem que os espaços entre elas apareçam!
O Photoshop possui ferramentas tão magnificas que às vezes acostuma-se a usar apenas aquelas que são triviais, como os filtros e efeitos. Algumas delas são tão funcionais quanto as outras. Basta explorar o seu editor de imagens para descobrir. A ferramenta Slice, também conhecida como “Fatiar” é uma delas. O resultado de fatiar uma imagem é separá-la em pedaços que poderão ser reunidos depois em um site de internet ou apresentação, por exemplo. Ficou curioso? Vamos ver como fazer tal tarefa.

Abra o seu Photoshop. Para este tutorial foi utilizada a versão CS4, portanto, algumas diferenças de localização de menus e ferramentas podem ocorrer entre as versões.

Depois, escolha a imagem que você deseja editar e abra-a.

Na caixa de ferramentas à esquerda da tela, clique na ferramenta “Crop” (Cortar) e mantenha o botão do mouse pressionado. Note que um pequeno menu com outras ferramentas irá aparecer. Clique na opção “Slice Tool”. 



Desenhe quadrados com a ferramenta pela imagem. Você decide o tamanho de cada fatia da foto. Esse recurso é muito útil para quem desenvolve imagens para sites e precisa definir diferentes pedaços para diferentes necessidades. Um exemplo bastante comum são as imagens que possuem diferentes partes com hiperlinks diferentes em cada uma delas. Ao final, sua imagem deve se parecer com esta:


Se o caso do exemplo citado for o seu, ou seja, você está desenvolvendo imagens para a web e precisa inserir hiperlinks diferentes em cada fatia, preste atenção neste passo. Clique com o botão direito sobre a fatia que você deseja ligar a algum site ou aplicativo online. Depois, clique em “Edit Slice Options...”.

Uma nova janela vai aparecer. Nela você pode inserir dados como a URL da página ou aplicativo online que você deseja relacionar àquela fatia da imagem. Repita este processo quantas vezes for necessário.




Vamos ver um exemplo do preenchimento da janela:





Para testar se a ligação das fatias está realmente funcionando, clique em “File” (Arquivo) e depois em “Save for web & devices” (Salvar para Web e Dispositivos...). Nesta nova janela, clique em “Preview” (Visualizar). Depois que você já viu como a imagem vai ficar quando for reagrupada, é hora de salvá-la.


Após ter clicado no botão salvar teremos a seguinte tela.


Certifique-se de ter selecionado a opção HTML e Imagens (*.html) e selecionar o local onde será salvo. A observação que faço é que será criada automaticamente uma pasta chamada imagens no local onde você está salvando. caso transfira o arquivo (HTML) para outro local leve também esta pasta OK.

Agora, clique em “Save” (Salvar). Pronto! Agora você já tem a sua imagem fatiada e com as propriedades editadas pro você mesmo!

Caso fique com alguma dúvida deixe seu comentário.

14 comentários:

Lucas disse...

O meu blog é blospot e não aceita arquivos *.html mas eu preciso de um cabeçalho assim... como eu faço?

Eduardo de Carvalho disse...

Fiz tudo que você disse ai, mas gostaria de saber como faço para mandar isso por e-mail?
Mandei mas ele não abre, no meu computador ele abre perfeito mas quando mando por e-mail ele não abre e acho que se abrir não vai funcionar.

maherling disse...

como enviar por email esse arquivo?

cláudia boechat disse...

Estou com o mesmo problema do Lucas.

Baby Happy Baby disse...

Também gostaria de saber se tem possibilidade de enviar por e-mail

Anônimo disse...

cara, estou com o mesmo problema. fiz a imagem do photoshop, mas quando arrasto para o microsoft outlook, a imagem não abre

Cih disse...

Acho que vocês deveriam citar a fonte das informações. Eu li isso no Tec Mundo com as mesmas palavras. E agora?

Nayla Liev disse...

Gente, esse serviço custa horrores em uma agência ou prestadores de serviço de programação. Não acredito que é tão simples. Estou pasma!
Muito obrigado pelo post, de vocês ou não, foi aqui que eu achei.
Beijos.

isdine munjaga disse...

tenho um problema.. quando insiro no outlook as imagens fogem (dispersam) deixando saliencias... alguma ajuda

Layla Vanessa disse...

OI. EU FIZ TODO O PROCESSO E CONSIGO ABRIR PELO MEU PC. ENTRETANTO QUANDO ENVIO POR INBOX A IMAGEM NÃO CARREGA APENAS ABRE UM LINK COM QUADRADOS BRANCOS QUE DIRECIONAM PARA OS HIPERLINKS QUE ADICIONEI. OQ FIZ DE ERRADO?

Dario Andrade disse...

Boa noite amigos, bem desculpa não responder com frequência ou quase nunca os comentários das postagens mas fico a disposição meu e-mail é darioandrade@outlook.com.

Bem pude notar que a dúvida e sobre a forma de salvar e a utilização do processo. Quando você salva o arquivo ele cria uma pasta com as imagens fatiadas e áreas ao redor ou seja ele pega todo o conteúdo da imagem porem ele faz uma mapa da área selecionada por você e coloca naquela área a sua configuração com os links OK.
o outro arquivo é um arquivo HTML, que contem toda a marcação para rodar na web. Vale a pena lembrar que HTML não é programação e existe diversas formas de fazer esse procedimento com programação também.
Quanto a usar esse procedimento num email seja para enviar e-mail marketing ou simplesmente encaminhar para seu cliente uma prévia do que seria seu layout web vc deve enviar a pasta com o arquivo HTML ou simplesmente hospedar online a página com a pasta e arquivos de imagem e enviar um link ou incorporar o link no email.
O funcionamento é simples normalmente usamos esse procedimento para criar sites assim poupamos tempo com muita programação ou seja vc monta todo um layout no Photoshop e depois sai fatiando, sobe tudo no servidor e Voilà como mágica o site esta pronto.

bem podem me adicionar no facebook estou sempre online e posso ajudar caso tenham duvidas.
http://www.facebook.com/dariosandrade

Skætos disse...

Dario, eu não sou um cara muito hábil no PS. Na verdade, não sei fazer quase nada além do que eu preciso. Aqui eu uso o CS3 num Windows 7, mas posso usar o CS4 se for necessário.
O meu problema é o seguinte: executei os passos que você colocou neste tutorial e funcionou muito bem, exceto que não era bem o que eu queria. Eu gostaria que houvesse uma forma de ter um arquivo .jpg (ou .png) com esse mesmo recurso, de modo que quando eu abrisse esse .jpg no visualizador de imagens do Windows (ou em outros visualizadores de .jpg), ao passar o cursor do mouse sobre um determinado trecho da imagem surgisse a opção do link, que redirecionaria para um site no navegador padrão.
Isso é possível?

Dario Andrade disse...

Boa noite amigos e em especial agora nosso amigo Skætos que deixou o ultimo comentário. Bem esse recurso cria um documento HTML o que permite a publicação do documento em um site (Servidor Web) ou local, vc pode hospedar a imagem somente e utilizar o html para configurar um e-mail e enviar mailing ou ate mesmo utilizar outros aplicativos que aceitam htlm para visualizar o documento. terei que fazer uma pesquisa mais detalhada para lhe dizer se existem visualizadores de imagens que permitiriam isso, mas assim de cara desconheço. Desculpem-me a frequencia da postagem no momento estou com muitas atividades mas preciso arrumar um tempo para voltar a postar meus estudos. Caso precisem de algo mais de imediato podem me enviar um email, terei muito prazer em ajudar postando algum material que possa ajudar. e-mail: darioandrade@outlook.com
para quem utiliza windows 8 pode pesquisar na loja e baixar o aplicativo Blog do Dario.
Vlw abraço a todos e ao sucesso que é nosso blog.

Anônimo disse...

Muito boas dicas, valeu.