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.