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.
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.
Comentários
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.
Muito obrigado pelo post, de vocês ou não, foi aqui que eu achei.
Beijos.
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
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?
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.