Background Listrado
Um recurso muito utilizado atualmente pelos WebDesigners é o de preencher o fundo do site com listras diagonais. É uma técnica bem simples de ser praticada mas que pode dar uma boa visualidade a página.
No Photoshop, comece criando um documento (CTRL+N). O tamanho não é de grande importância, no exemplo, utilizei 150×150.
Com a ferramenta Linha, desenhe uma linha na diagonal. Segure a tecla Shift para lhe ajudar a deixá-la em exatamente 45°.
Duplica a camada que foi criada ao desenhar a linha (CTRL+J) e mova-a quatro pixels para a direita. Repita o processo até você ter quatro linhas, como no exemplo abaixo.
Você pode mesclar as camadas (CTRL+E), de modo a ter somente uma camada para todas as quatro linhas. Aproxime a imagem utilizando a ferramenta lupa, algo em torno de 3200%. Use a ferramenta de Seleção Retangular (M) para selecionar uma parte das linhas, conforme a imagem abaixo.
Copie a área selecionada e crie um novo documento. Seu tamanho deverá ficar em torno de 4×4 pixels. Por fim, cole a seleção copiada e exporte o documento com o nome de “fundo” em formato de imagem, como JPEG ou GIF.
A imagem está pronta, falta criar um documento HTML e adicioná-la como background. Só para efeito de teste, copie o código abaixo no bloco de notas e salve-o com o nome de “arquivo.html”. Lembre-se de deixar a imagem das listras no mesmo diretório que o arquivo HTML.
<html>
<head>
<title>Background Listrado</title>
</head>
<body background=”fundo.gif”>
</body>
</html>
O resultado deverá ser este abaixo.
Você também é livre para modificar os valores aqui citados, aumentando a largura das linhas e/ou o espaço entre elas.
Há uma ferramenta recente que ajuda a realizar esse trabalho.
Stripe Generator - http://www.stripegenerator.com/