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

Este post é parte integrante de um tutorial de Como fatiar um layout no photoshop (psd) para html. Veja a 1ª parte.
Continuando de onde paramos…
11. Na janela que aparece você vai definir as propriedades da imagem. Slice type serve para você determinar se vamos usar a imagem que está na fatia ou não. Marcaremos Imagem, pois vamos usar a imagem. Se marcar No Image, a janela nos dá um campo para escrevermos um texto que aparecerá no espaço, e a cor deste espaço seria a que vamos definir em Slice Background Type.


Em Name escreva o nome da imagem. Escolha um nome que tenha a ver com o tema do site, pois é melhor para SEO. Quando alguém fizer buscas em algum site específico, a página aparecerá com mais facilidade. Embaixo coloque a URL que a imagem quando visualizada no navegador apontará para este link, se clicarmos iremos para ele.

Em Target colocaremos _parent para quando clicarmos no link ele se abra na mesmo aba, caso colocasse _blank, seria aberta em uma nova aba. Em Message text como o próprio nome diz, temos que colocar a descrição da imagem.

Em Alt Tag é bom colocar uma breve descrição da imagem pois quando alguém está navegando em internet lenta, e o navegador não carrega a imagem, tudo que você colocar aí aparecerá no lugar dela, sem falar na questão de acessibilidade que é muito importante para pessoas com deficiência audiovisual, pois existe programas que lêem o conteúdo das páginas, no caso ele ficaria sabendo que existe essa imagem naquele lugar. Em Dimensions especifica a Posição da imagem no canvas ( x y ) e a largura (width) e altura (height).
Por fim, em Slice background type serve para dar uma cor para a parte de baixo das imagens, por isso que aparecerá a cor se escolhermos (na parte de cima da janela Slice Options) Select Type “No Image”.

 

 

10. Você também pode criar uma fatia em cima da outra e quando o fizer, esses quatro botões circulados na foto podem ser usado para organizar as camadas – fatias cima – baixo, como se fosse uma Layer que a pessoa coloca uma em cima da outra. O botão Promote serve para… por exemplo, quando criamos uma fatia com a ferramenta, ela cria uma fatia circundada de azul, correto? Quando fazemos isso, o Photoshop automaticamente cria outra fatias automáticas e as deixa em cinza, e elas ficam bloqueadas até você selecioná-las e clicar neste botão Promote. O botão dividir já usamos. Podemos usar para dividir horizontalmente e verticalmente.  Hide auto Slices serve para ocultar ou mostrar as fatias automáticas.

 

 

9. Agora que o documento está pronto, vamos em File > Save for Web and devices.


 

8. E salvamos com essas configurações.

 

 

7. Escolha a pasta onde quer salvar e selecione html and images para salvar um documento html e as fatias em jpg numa pasta.

 

6. Clique com o botão direito e abra a imagem no seu navegador favorito para visualisar.

 

 

5. Se você colocar o link em cima de cada menu, você verá a mão que indica link podendo clicar, ou seja, ele está linkado.

 

 

4. Agora clique com o botão direito e abra no seu editor de html favorito. Usei o Notepad++ Plus, mas pode ser o Dreamweaver, bloco de notas, etc.

 

 

3. Localize a tag Body e escreva isso antes dela:

 

 

 

2. No final, depois do fechamento </body>, feche a tag center, para que todo o conteúdo fique centralizado. Aqueles Br’s não precisa fechar. Eles são quebra de linha, e já abrem e fecham em uma tag só.

 

 

 

1. Site pronto, agora só é você criar as páginas e linkar aos menus. Até a próxima.

 

Siga-me no Facebook

Comments

comments

Comments

  1. Marcus Vinicius says

    Excelente post. Muito obrigado, me ajudou não somente em fatiar um layout como me ensinou que também se pode criar site através de photoshop. Obrigado mais uma vez.

    • @everson_azevedo says

      Isso mesmo, Oswaldo. O melhor é usar Tableless (sem tabela) ou seja, com divs, span, etc. Mas o objetivo do post foi mostrar como funciona a ferramenta de fatiamento de layout do Photoshop.
      Obrigado pela visita!

  2. Isabela says

    Sensacional, eu baixei um site com layout pronto, e nao tinha nem ideia de como mexer, não sabia nem dessas funcionalidades.
    Muito facil, obrigada pela dicas.

  3. Felipe says

    Primeiro parabéns pelo artigo, muito bem escrito!

    Minha dúvida é como linkar as outras páginas no menu, tipo…você ja escreveu o nome dos links no photoshop (Home, About, Blogs, etc), mas e se eu quiser mudar? Como eu faço isso?Tem que ser no photoshop mesmo ou é no código html e css?

    Abraço!

  4. Jorge Oliveira Silva says

    Foi muito importante achar este tutorial.
    Agora preciso aprender a colocar link em algumas das fatias.
    Se puder me ajudar agradeço.

    Parabéns pelo trabalho

    Jorge Oliveira

Deixe uma resposta

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