Wordpedia

PHOTOSHOP – SLICE TOOL

1 – Abra a imagem já pronta em seu Photoshop:

1.1 – Clique na ferramenta SLICE:

2 – Com a ferramenta acionada, clique em um ponto da imagem, segure o clique e arraste para outro:

3 – Pronto, você já dividiu sua imagem em duas partes, agora como exemplo, vamos “reparti-la” em mais um pedaço, faça do mesmo jeito que fez no passo 2, assim:

4 – Olhe que agora sua imagem esta dividida em 3 partes:

5 – Você também pode usar a ferramenta SLICE SELECT TOOL.
Para isso, basta clicar e segurar o clique durante alguns segundos em cima da ferramente SLICE, mude de ferramenta no menu “drop-down” que aparecerá:

5.1 – Observe que com ela você pode clicar em cima de um dos recortes que fez com a SLICE e movê-los ou excluí-los para outro lugar.

6 – Cocê aprendeu como recortar seu desenho. Agora vamos salvá-lo nas condições.

6.1 – Vá em FILE > SAVE FOR WEB.

6.2 – Agora você pode escolher com que qualidade vão ser salvas as partes, clique em cada uma delas e especifique o valor de qualidade que cada uma terá. Lembre-se quando maior a qualidade, maior será o tamanho em KB e se a qualidade for menor, menor será o tamanho em KB. Hoje em dia na internet, como muitos ainda usam internet discada ( aquelas que são são ADSL ou qualquer outra de alta velocidade ) é bom manter imagens com poucos KB, para que o site não demore a carregar em computadores sem internet rápida:

6.3 – Clique em SAVE após configurar tudo corretamente. E pronto, agora vá até a pasta onde salvou os arquivos, as 3 imagens estarão separadas dentro de uma pasta chamada IMAGE criada pelo próprio programa.

6.4 – Observe abaixo as 3 imagens separadas:

parte 1:

parte 2:

parte 3:

7 – Perfeito até aqui, agora é só abrir algum editor html visual, e criar uma tabela que se “ajeite” a sua imagem. Em nosso tutorial faremos uma tabela assim:

8 – Vamos inserir as imagens dentro da célula da tabela. Se quiser colocar texto por cima, coloque a figura como plano de fundo na tabela. No final, ficará assim ( Separei as imagens por uma borda nas células para você vê melhor ):