Como fazer uma bela página de destino com o Photoshop

Como fazer uma bela página de destino com o Photoshop

Etapa 1: configuração básica de documentos do Photoshop

Para esta página de destino, contaremos com um sistema de grade. Podemos usar o popular 960 Grid System.

Isso nos ajudará a alinhar os elementos do web design com mais facilidade.

Baixe o arquivo ZIP do 960 Grid System no site oficial do projeto , extraia seu conteúdo e abra o arquivo PSD do Photoshop de 12 colunas. O arquivo é denominado 960_grid_12_col.psd. O arquivo está dentro da pasta templates\photoshop .

Vamos modificar a largura e a altura da tela do PSD para que tenhamos um pouco mais de espaço para trabalhar. Vá para Image > Canvas Size e defina Width para 1200 px e H 8 para 133 0px .

Deixe cerca de 245px do topo do layout para nossa imagem de cabeçalho principal.

Dê uma cor cinza ( #f0f0f0 ) ao espaço restante do layout.

Você pode fazer isso de várias maneiras. Meu jeito é usar a Ferramenta Rectangle. Escolha a Ferramenta Retângulo no painel Ferramentas.

Na barra de opções, certifique-se de que a opção Shape layers esteja selecionada e defina a opção Color para a cor desejada: #f0f0f0 . Desenhe um retângulo que cubra toda a tela , exceto os 245px superiores da tela. Renomeie a camada para algo como “base”.

Etapa 2: imagem do cabeçalho

Encontre qualquer foto grande de sua casa à venda que você gostaria de usar como plano de fundo para o cabeçalho da nossa página de destino. Certifique-se de que a foto escolhida tenha pelo menos 1200px de largura e 245px de altura. Talvez você possa encontrar uma foto em um site de fotos gratuito. Coloque a imagem no topo da tela.

Daremos à foto um efeito desfocado.

Existem algumas maneiras de fazer isso, mas vamos nos ater à mais simples: Vá em Filter > Blur > Gaussian Filter. Defina a opção Radius para 4.0px .

Etapa 3: barra de navegação superior

Use a Ferramenta Retângulo (M) para criar uma barra retangular horizontal na borda superior da tela com 20 px de altura e que se estenda por toda a largura da tela.

Dê à camada uma Opacidade de 2 5%: é assim que vamos conseguir aquela barra semitransparente no topo.

Mude para a Ferramenta Horizontal Type (T).

Usaremos a fonte Source Sans Pro , que pode ser baixada gratuitamente no Google Web Fonts.

Na barra de opções, você pode configurar sua ferramenta de texto horizontal para que:

  • família de fontes : Source Sans Pro
  • estilo da fonte : Negrito
  • tamanho da fonte : 16px
  • cor do texto: #aed572 (uma cor verde)

Use a Horizontal Type Tool para anotar o número de telefone e um endereço de e-mail fictício, ou qualquer texto que você gostaria de usar.

Também usarei alguns ícones interessantes que obtive do conjunto de ícones da interface do usuário impressionista . Você também pode preferir usar um conjunto de ícones gratuito, então vá em frente e faça o que funcionar para você.

Vou definir a cor dos ícones como branco, #ffffff.

Depois que o texto e os ícones estiverem em ordem, aplique o efeito de camada Drop Shadow neles.

Você também pode gostar…

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *