Fatiar um layout no Photoshop – Psd para html – Parte 1/2

Tutorial – Fatiando um layout no photoshop (psd) para html, e visualizá-lo no navegador

Hoje vamos aprender a fatiar um layout já pronto usando o programa Photoshop. Nesse programa existe duas ferramentas chamadas Slice Tools e Slice select tools que se encontra no mesmo menu da ferramenta Crop(Corte), e são elas que vamos usar.

Abriremos o Photoshop e o arquivo Psd e puxaremos linhas-guia, com ajuda da Régua (Rulers Ctrl+R). Depois faremos aparecer os cortes, ou cortaremos manualmente para depois salvar o arquivo fatiado em html, com links configurados e todas as suas imagens numa pasta.  A vantagem do fatiamento é que quando a pessoa vai em um website e nele tem uma imagem muito grande em tamanho e em Mb, ela demora muito a ser carregada, mas com o fatiamento ela carrega muito mais rápido, pois a imagem vai estar cortada e assim carregará uma de cada vez. Podemos cortar imagens e tranformar em um website simples ou até mesmo cortar as imagens, gerar o html e pegar o código para implantar em algum template.

Mesmo a imagem estando cortada, não afetará na sua aparência. Ela vai parecer uma imagem inteira, não ficará marcas. Com essa ferramenta de corte e seleção de corte do Photoshop (Slice tool e Slice Select Tools), também podemos linkar uma parte da imagem para que quando ela estiver incorporada a um arquivo html, possamos abrir um link clicando em cima da parte que linkamos, esse processo chama-se Criação de Image Maps. Então ficará a seu critério, escolher se você quer fatiar uma imagem para incorporá-la em seu website, pegando o código do arquivo html gerado pelo photoshop ou fazer um layout de um site inteiro e fatiar com a ferramenta.

O layout que fatiaremos é esse.

 

 

30. primeiro pressionamos Ctrl+O e abrimos o layout já pronto que eu tinha feito pra ser fatiado e tranformado em um protótipo html.

 

 

29. Agora começaremos a posicionar as linhas-guia no documento. Pressione Ctrl+R para ativar as Réguas, ou escolha View > Rulers. Clique com o botão esquerdo na régua, segure o clique e arraste a linha guia para o documento e solte. Com isso vamos puxar várias linhas-guia para envolver cada parte a ser cortada.

 

 

28. Puxamos a segunda linha-guia para o meio do documento.

 

 

27. E continuamos a puxar.

 

 

26. Agora começaremos a puxar as linhas da parte de cima da régua. Note que já marcamos as duas fotografias com linhas-guia, agora vamos marcar o menu depois o título.

 

 

25. Terminamos de marcar o menu.

 

 

24. Posteriormente, o título.

 

 

23. Agora pressionando Shift+C e ir escolhendo até chegar na Slice Tools, selecione-a, pelo atalho que eu disse ou pelo menu à esquerda.

 

 

22. Com a ferramenta Slice Tools selecionada, clique, segure o clique e arraste começando na parte de cima-esquerda da fotografia do bovino descendo até abaixo-direita. Solte-a. A fotografia vai estar selecionada (observe que ela agora está envolvida com aquelas marcas de aumentar e diminuir de tamanho. Quase não dá pra ver na imagem, no Photoshop é assim mesmo.)

.

 

21. Agora faça o mesmo com a fotografia ao lado.

 

 

20. Posteriormente selecione o menu todo.

 

19. Agora faça o título e o sub-título (um de cada vez).

 

 

18. Clique no botão “Criar Slices a partir das guias” na parte de cima do painel Options. Note que foi criada fatia em todo o documento.

 

 

17. Selecione Slice select tools. (ela serve para selecionar as fatias, pode também ser usada sem precisar de selecioná-la, é só quando a ferramenta slice tools estiver selecionada você segurar CTRL, quando clicar que a slice tools adota a função dela até soltar Ctrl).

 

 

16. Segure Shift e selecione todas as fatias do menu clicando uma vez em cada uma.

 

 

15. Clique com o botão direito em cima do menu e selecione Combine slices.

 

 

14. As fatias serão combinadas. Agora com ela ainda selecionada, clique com o botão direito e selecione Divide Slice.

 

 

13. Uma caixa aparecerá. Marque Divide Vertically Into e coloque 5 no campo, para ela se dividir em cinco, a quantidade de itens que temos no menu.

 

 

12. Agora edite a propriedade de cada mitem do menu. Clique com o botão direito e escolha Edit Slice Options. Aparecerá uma janela. Vamos editar as propriedades da Home, o restante vocês fazem.
Continua…

Veja a 2ª parte do tutorial

Siga-me no Facebook

Comments

comments

Deixe uma resposta

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