Tutorial: Criando o layout de um site

Bem, esse não é um curso de webdesign, então não veremos os porquês e técnicas relativas a esta área, mas somente algumas formas de usar o GIMP para este fim.

Veja o site do PSL-BA (seu layout foi criado no GIMP):

O mais importante na criação do layout é definir como a informação será disponibilizada. Onde fica o título da página? Onde fica o menu? Responda a essas perguntas e defina os blocos de espaço onde cada uma dessas informações se encaixa.

Depois disso, você pode aplicar arte gráfica respeitando e usando esses blocos.

No caso do layout do PSL-BA, você vê uma grande caixa que envolve o conteúdo, seu título, rodapé e notícias. Existe um elemento HTML envolvendo todas essas áreas, mesmo que no plano só tenhamos mostrado que a notícia fica a direita. É importante saber fazer bom uso te um esqueleto HTML enxuto. Tente criar de forma que se exija o mínimo de código HTML além do obrigatório para uma boa definição de blocos de conteúdo (como fazer isso? Estudando TableLess).

Lembre-se que um layout cheio de imagens e efeitos mostra bem o quanto você domina técnicas de edição de imagens, mas não ajuda o visitante. Um site deve ser confortável e focar no que interessa: o conteúdo.

Após desenhar o layout você deve recortar áreas retangulares para aplicar no HTML através de tags <img>, atributos backgroung ou via CSS. É fortemente recomendável que você use CSS. Visite o site TableLess para saber mais.

Como recortar? Bem, se você usou várias camadas na sua criação, é preciso uni-las. Clique com o botão direito em uma camada qualquer na janela de camadas e selecione "Combinar Camadas Visíveis...". Agora faça a seleção de um pedaço da imagem que serve de fundo para para um elemento, copie-o (Ctrl+C) e selecione o menu "Editar > Colar como Novo". Essa nova imagem você pode salvar com o formato que você achar mais adequado, vide o que tratamos em Conceitos Básicos I.

Se for útil para o seu caso você pode automatizar todo esse processo definindo linhas guia e fazendo o recorte com o plugin Web-o-Tine. No exemplo abaixo você vê o XCF original do layout PSL-BA e suas várias camadas. No menu selecione: Script-Fu > Web > Web-o-Tine

Uma janela se abrirá para você inserir os parâmetros do plugin:

Directory to Save: Selecione um diretório onde o arquivo HTML e as imagens serão salvas. HTML File: O nome do arquivo HTML. Image Base Name: O nome base para os arquivos de imagem. Será adicionado dos números de posicionamento e da extensão. Relative Image Directory: Se quiser pode colocar as imagens em um sub-diretório. Image Extension: Define o tipo da imagem. Indent Type e Indent Spaces: Servem para organizar o código HTML gerado Captalize HTML Tags?: Cria código HTML com letras maiúsculas. Não use! Essa opção existe para compatibilizar com estilos aceitáveis em versões ultrapassadas do HTML. Full HTML Document?: Gera código de uma página HTML e não somente de uma tabela.

Ao completar o serviço o plugin lhe mostra a seguinte mensagem:

Isso porque ele foi obrigado a unir as camadas e para você continuar trabalhando nesse layout certamente seria útil voltar a tê-lo em camadas independentes.

Aqui está o resultado gerado pelo exemplo:

Um código HTML com uma tabela apresentando as partes recortadas do desenho e as imagens recortadas em um sub-diretório imagens. Certamente esse código está longe de ser o que um site precisaria, mas já ajuda a visualizar o resultado do seu trabalho. Daqui para frente é codificação HTML+CSS ou uso de um software como o Nvu.

---

Como instalar o plugin Web-O-Tine

1. Baixe o Web-O-Tine Plugin
2. Coloque-o no seu diretório ~/.gimp-X.Y/scripts (onde X.Y é o numero da sua versão, como 2.2 ou 2.3)
3. Renicie o GIMP. Ou clique no menu "Extras > Script-Fu > Recarregar Scripts"