Olá,

Vamos aprender a divir um layout em imagens para aplicar o HTML (Isso não será ensinado nessa coluna).
VÍDEO AULA
Tamanho:
4,015 KB

http://www.4shared.com/file/13330321/2afb7c45/FatiandoSitesPorMarok.html

Agora para os amigos que não podem baixar a vídeo-aula vamos ao tutorial.
Mãos a obra!

Primeiramente crie um novo documento e crie seu layout após isso ser feito selecione a ferramenta Slice Tool.



Agora podem remover os textos pois eles devem ser adicionados no HTML e formatos no CSS.
Bom galera agora façam o seguinte selecionem as partes importantes e que não podem ser criadas com o HTML por exemplo o Topo do site, menus, barras, imagens, formas adicionais e coisas do tipo.
DICA: Usem o Fireworks para selecionar alguma coisa difícil de fatiar no Photoshop

Agora cabe a você decidir o que deve ser fatiado, feito isso selecione tais áreas com a ajuda da Slice Tool veja meu exemplo:



O que é importante nele por hora?
As barras de cor azul (Todas), as formas onde estão o conteúdo do site (Mais fácil fazer isso no Fireworks), o conjunto com várias imagens (Se quisermos por um link em cada uma precisaremos recortar uma por uma e será complicado vou fatiar todas).O resto é puro HTML...

LAYOUT FATIADO


Notem que removi todo conteúdo (Escrito), e selecionei o que quero que seja salvo.
Agora o que tem de ser feito é ir no menu File > New > Save for Web


Então clique apenas em Save, não autere as configurações sem ter certeza do que esta fazendo.Após clicar em Save uma caixa de dialogo ira aparecer pedindo um diretório e um nome, escolha o nome do seu site (ou não) e coloque em qualquer lugar de sua preferência porém não crie uma pasta para as imagens o programa faz isso automáticamente!

Então depois de salvo temos o seguinte resultado:


Pronto! Imagens prontas para um bom HTML!

Sugestões?Dúvidas?Problemas?
[email protected]

Atenciosamente, Luciano infanti de paula.
Abraços.