Como construir um fundo telhado para seu HTML5 e CSS3 site
Muitas vezes, você quer uma imagem de fundo para cobrir toda a página em seu site HTML5 e CSS3. Isso pode ser mais difícil do que parece, porque você não sabe o tamanho da página será no navegador do usuário.
Pior, imagens grandes pode levar uma quantidade enorme de espaço e abrandar a experiência do usuário. A solução comum é usar uma imagem em mosaico que é projetado para repetir no fundo. Gimp tem algumas ferramentas muito úteis para a construção de imagens lado a lado.
Recorde-se que o fundo de repetição propriedade CSS permite que você especifique como um fundo repete. A configuração padrão repete o fundo infinitamente, tanto os eixos X e Y. Você também pode definir o fundo para repetir horizontalmente (repetir-X), Verticalmente (repetir-y), Ou não (no-repeat).
O objetivo de um fundo de azulejos é fazer com que uma parte relativamente pequena gráfica preencher toda a página e olhar como uma imagem maior. O segredo é criar a imagem de modo que é difícil ver onde a imagem se repete. Aqui está uma maneira de fazer um fundo de azulejos em Gimp. Claro, você pode adaptar essa técnica para seus próprios fins.
Criar uma nova imagem.
O tamanho da sua imagem é importante. Imagens menores são muito mais eficientes para download, mas o padrão é muito mais óbvio. Comece com 256 por 256 pixels.
Construir um padrão aleatório.
Você pode usar a técnica de filtro de Plasma ou tentar uma técnica semelhante, escolhendo Filtros-render-Clouds-Difference Clouds. O filtro Nuvens por Diferença cria uma imagem em tons de cinza, mas com uma série de opções interessantes. A opção Tileable cria um padrão que está pronto para telha. Jogar com estas opções até chegar algo interessante.
Ajustar o contraste.
Para o melhor efeito, você quer uma distribuição relativamente uniforme de valores de claro para escuro. A maneira mais fácil de fazer isso é através da ferramenta de normalização automática (cores-Auto-Normalize).
Escolha um gradiente.
Você vai adicionar cores para o seu padrão usando uma técnica chamada mapeamento gradiente. Use a caixa de diálogo Gradient (Windows-Dockable Diálogos gradientes) para escolher um gradiente. cores mais escuras em sua imagem de mapa para as cores do lado esquerdo do gradiente, e cores mais claras Roteiro para a esquerda. Você pode ajustar as cores, então não se preocupe se as cores não são exatamente o que você quer.
Use a ferramenta Gradient Map (Cores # 10154- Mapa # 10154- Gradient Map) para mapear as cores do gradiente para o seu padrão de nuvens.
Deslocamento da imagem para verificar se há azulejos.
A maneira mais fácil de ver se as telhas de imagem assim é compensar a imagem. Isso coloca as bordas no centro para que você possa ver como a imagem vai olhar quando várias cópias são próximas umas das outras. Abra o diálogo Deslocamento escolhendo Layer-Transform-offset. A caixa de diálogo Deslocamento tem uma tecla y / 2 calhar x / 2,. Clique no botão para ver como a sua imagem parece.
Limpar a imagem, se necessário.
Se você escolheu a opção Tileable quando você construiu a imagem da nuvem, a nova imagem fica mais bonito. Se não, você pode ter algumas costuras visíveis. Use as ferramentas de manchas e clone para limpar essas emendas, se necessário. Aplicar a ferramenta Deslocamento uma segunda vez para verificar se as suas costuras com bom aspecto.
Aplicar filtros para obter o efeito desejado.
Você pode querer colorir a sua imagem ou esbater-lo um pouco para cobrir qualquer tipo de artefato de sua limpeza. Lembre-se que imagens de fundo deve ser extremamente escuro ou extremamente leve com um contraste muito baixo se você quiser texto legível.
Teste a imagem ao salvar a imagem no formato XCF e um formato web-friendly (como PNG), construir uma página simples usando a imagem como um fundo, e carregar a página em seu navegador para garantir que ele azulejos da maneira esperada.
