Como Fazer Cabeçalhos Para Sites

Índice:

Como Fazer Cabeçalhos Para Sites
Como Fazer Cabeçalhos Para Sites

Vídeo: Como Fazer Cabeçalhos Para Sites

Vídeo: Como Fazer Cabeçalhos Para Sites
Vídeo: TUTORIAL - CABEÇALHO COM HTML + CSS 2024, Novembro
Anonim

O princípio de "ser saudado por roupas" é válido não só para as pessoas, mas também para os sites. O vestido do site é o seu design. E é o design que determina a impressão que o visitante tem nos primeiros segundos de visualização do recurso. Essa impressão é especialmente importante porque determina seu comportamento futuro. O primeiro elemento de design que todo usuário que visita o site vê é o seu "cabeçalho". O limite é a cara do recurso da web. Portanto, todo web designer novato deseja, antes de tudo, aprender a criar cabeçalhos para sites.

Como fazer cabeçalhos para sites
Como fazer cabeçalhos para sites

Necessário

  • - acesso à internet;
  • - navegador moderno;
  • - editor de gráficos raster (GIMP, Photoshop);
  • - opcional: editor de gráficos vetoriais (CorelDraw);
  • - opcional: ambiente de modelagem 3D (Blender, 3DStudio);
  • - opcional: folha de papel, lápis ou caneta.

Instruções

Passo 1

Desenvolva um conceito para o futuro cabeçalho do site. Idealmente, o conceito deve ser baseado na ideia original. Quando faltam ideias, a inspiração pode ser obtida analisando as boas soluções existentes. Reflita o resultado da pesquisa criativa na forma de um esboço em um pedaço de papel. O esboço deve refletir a estrutura do futuro cabeçalho do site com a indicação de locais "emborrachados" e áreas preenchidas com imagens. Nesse estágio, é uma boa ideia pensar em um esquema de cores aproximado para o design do cabeçalho.

Passo 2

Selecione o tamanho do cabeçalho. Na verdade, vale a pena definir claramente apenas um de seus parâmetros - a altura. Como regra, a altura dos cabeçalhos do site é fixa e não depende da resolução lógica que afeta os parâmetros de exibição das fontes. Em outras palavras, você deve escolher um valor para a altura do cabeçalho em pixels. Nesse caso, faz sentido levar em consideração a possibilidade de colocar banners ou blocos de publicidade contextual no cabeçalho. No que diz respeito à largura, deve-se determinar o valor mínimo, destacando pelo menos uma área "emborrachada" que permite que o cabeçalho se adapte aos diferentes tamanhos da página web.

etapa 3

Crie um modelo de cabeçalho em um editor gráfico. Em um novo documento, adicione uma camada transparente para a qual você arrastará o esboço de acordo com os parâmetros geométricos selecionados. A altura da camada deve corresponder à altura do cabeçalho. A largura pode ser considerada arbitrária, mas maior do que o tamanho mínimo, deixando espaço para áreas horizontais de “borracha”.”No modelo, designe zonas de tamanhos fixos e variáveis, zonas destinadas a serem preenchidas com imagens estáticas, imagens de fundo.

Passo 4

Pesquise ou crie imagens estáticas para colocar em seu modelo de cabeçalho. O logotipo e alguns elementos exclusivos podem ser criados em um editor de vetor ou ambiente de modelagem 3D. É muito fácil encontrar imagens temáticas em bancos de fotos gratuitos na Internet.

Etapa 5

Insira o plano de fundo, o logotipo e as imagens estáticas no modelo de cabeçalho do site em um editor gráfico. Adicione o fundo e cada imagem a uma camada transparente separada. Organize as camadas da melhor maneira. Ao mover as imagens em camadas, consegue seu layout perfeito, correspondendo ao modelo criado anteriormente.

Etapa 6

Salve a imagem de cabeçalho resultante. Salve o projeto de trabalho no formato nativo do editor gráfico. Em seguida, salve a imagem de cabeçalho achatada em um formato sem perdas (por exemplo, PNG).

Etapa 7

Crie um modelo de cabeçalho HTML, se necessário. Abra a imagem achatada no editor. Corte imagens dele que correspondam a áreas de tamanho fixo. Dos locais correspondentes às áreas "emborrachadas", recorte as imagens de 1 pixel de largura. Salve todas as imagens no disco. Faça o layout do cabeçalho HTML usando as imagens salvas.

Recomendado: