Como construir um gráfico bandeira para seu HTML5 e CSS3 site
Quase todos os site comercial HTML5 e CSS3 tem um gráfico de faixa - um gráfico especial, geralmente com um tamanho de conjunto (900x100 é comum), que aparece em cada página. Normalmente, se você está modificando um modelo de CSS, você tem um gráfico de faixa padrão. Você vai querer copiar este gráfico, a fim de começar com o tamanho ea forma correta.
Você pode construir uma bandeira muitas maneiras, mas aqui está uma técnica simples que você pode modificar:
Carregar ou criar a forma de base.
Se você tem um gráfico de começar a utilizar, carregá-lo no Gimp. Se não, criar uma nova imagem do tamanho que você precisa. Mina é de 100 pixels de altura por 900 pixels de largura.
Criar um fundo de plasma.
Use o filtro de plasma (Filtros-render-Clouds-Plasma) para criar um padrão semi-aleatória. Use os novos botões com sementes e turbulência para mudar a sensação geral. Não se preocupe com o colors- que removê-las na próxima etapa.
Depois de o fundo de plasma está no lugar, utilizar o filtro colOuir para aplicar uma cor de fundo.
Escolha uma cor consistente com o seu tema. Para este exemplo, ir para uma cor mais clara porque você está usando sombras, que exigem um fundo claro. Use o controle deslizante Lightness para fazer uma cor relativamente leve.
Criar uma camada de texto usando a ferramenta Texto.
Texto em um gráfico deve ser grande e corajoso. A ferramenta de texto cria automaticamente uma nova camada. Depois de escrever o texto, especificar o tipo de letra e tamanho.
Duplique a camada de texto.
No painel Camadas, faça uma cópia da camada de texto. Seleccione a menor das duas camadas de texto (que se tornarão uma sombra).
Borrar a sombra.
Com a camada de sombra selecionada, aplique o Gaussian Blur (Filtros-borrão-Gaussian Blur).
Mova a sombra.
Use a ferramenta Mover para mover as posições relativas do texto ea sombra. Normalmente, os usuários esperam uma sombra a ser ligeiramente inferior e direita do texto (simulando luz que vem do canto superior esquerdo). Quanto mais a sombra do texto é, quanto maior for o texto é apresentado para ser flutuante.
Faça o semitransparente sombra.
Com a camada de sombra ainda selecionada, ajuste o controle deslizante opacidade para cerca de 50 por cento. Isso fará com que as sombras menos pronunciada e permitir que parte do fundo a aparecer através da camada de sombra.
Tempere a gosto- fazer adições com base em suas necessidades.
Salvar em um formato reutilizável.
O formato nativo para imagens em Gimp é XCF. lojas XCF tudo - camadas, configurações e tudo. Se você precisar modificar a faixa mais tarde (e você), você vai ter uma boa versão para trabalhar.
Escolha Arquivo-Salvar como para salvar o arquivo. Se você especificar o .xcf extensão, Gimp salva automaticamente no formato completo.
Exportar para um formato web-friendly.
Geralmente, você deve salvar banners gráficos como arquivos PNG ou GIF. (Gimp suporta ambos os formatos.) Considere PNG, a menos que a camada inferior tem a transparência (porque alguns browsers ainda não suportam as características de transparência avançadas do formato PNG). Não guardar imagens que contêm texto em formato JPG. O esquema de compressão de JPG é notório para adicionar artefatos ao texto.
Normalmente, quando você salvar para outro formato, aparece uma caixa de diálogo de opções. Em caso de dúvida, vá com os valores padrão.
