Como criar um cabeçalho website profissional em photoshop

Banners são geralmente fina e ampla, como 900 por 150 pixels.

Banners são geralmente fina e ampla, como 900 por 150 pixels.

Video: #4 Criando o Layout com Photoshop - Criando um Site Responsivo do Começo ao Fim

Photoshop CC 2014 é uma ferramenta ideal para a criação de imagens profissionais para o seu site, incluindo banners. Ao projetar seu primeiro banner, manter o design simples para que o gráfico não é sobrecarregado com demasiada informação visual. Se sua empresa tem cores da empresa e uma fonte da empresa, certamente você pode usar aqueles em sua bandeira.

Crie uma nova imagem de 900 por 150 pixels.
1

Inicie Photoshop. pressione "Ctrl-N" ou selecione "Novo" no menu Arquivo. Na caixa de diálogo, especifique a altura e largura para o seu banner, tais como 900 pixels de largura e 150 pixels de altura. Clique "ESTÁ BEM."

Adicionar um retângulo sólido como um fundo, se desejar.

Video: Como fazer Banner Flat no Photoshop

2

Selecione uma cor de fundo sólida para a bandeira, se desejar. Para fazer isso, clique no "Cor do primeiro plano" ícone na barra de ferramentas e selecione uma cor e clique no "Ferramenta retângulo" e arrastá-lo em toda a faixa. Neste tutorial, no entanto, que serão sobrepostos dois gradientes em vez de usar um fundo sólido.

presets Gradient ferramenta estão disponíveis na barra de opções.
3

Clique no "Gradiente" ferramenta na caixa de ferramentas. Clique no "Encher" Menu na barra de opções e selecione o gradiente de preto e branco a partir das predefinições disponíveis. Clique em qualquer lugar acima da faixa na tela e arrastar o cursor abaixo do banner. Solte o botão do mouse para aplicar o gradiente.

Um tipo de letra negrito branco Tahoma fixado em 48, pt.
4

Clique no "Ferramenta Texto Horizontal" na caixa de ferramentas. Arraste o cursor sobre a bandeira para criar uma caixa de texto. Use os menus na barra de opções para especificar um tipo de letra, tamanho da fonte e cor. Arraste a caixa de texto de modo que ele está centrado no lado esquerdo da bandeira.

Selecione o cabeçalho`s file in the Duplicate Layer window`s Document menu.
5

selecionar "Aberto" no menu Arquivo e selecione qualquer imagem em seu computador que você deseja usar para a sua bandeira, como um logotipo da empresa, uma imagem de si mesmo ou um produto que você está vendendo. Quando a imagem abrir, selecione "Duplicado" no menu Layer. Alterar o destino para o arquivo de cabeçalho, que seria chamado "Untitled-1" a menos que você já salvou. Clique "Está bem" para adicionar a imagem como uma nova camada à sua bandeira.

Redimensionar a imagem para o banner.
6

selecionar "Transformar" no menu Editar e clique em "Escala." Na maioria dos casos, toda a imagem não será visível na faixa estreita, mas seu contorno é visível depois de seleccionar "Escala." Arraste qualquer canto do contorno da imagem para redimensioná-la para o seu banner. Mantenha pressionada a "Mudança" enquanto arrasta para bloquear a sua relação de aspecto. pressione "Entrar." Arraste a imagem assim que é no lado direito da bandeira.

Selecione uma cor na imagem usando o Color Picker.
7

Clique no "Cor do primeiro plano" ícone na barra de ferramentas para abrir o Color Picker. Clique em qualquer lugar no lado direito do banner para coincidir com a sua cor no Color Picker e clique em "ESTÁ BEM."

Adicionar um retângulo de gradiente para a bandeira.
8

Selecione os "Ferramenta retângulo" da caixa de ferramentas. Clique no "Encher" Menu e selecione o "Gradiente" ícone na parte superior das opções do menu. Arraste o cursor sobre a bandeira a partir de apenas dentro lado esquerdo da imagem até a borda esquerda da bandeira. O faz um retângulo com um gradiente usando a cor que combinava a partir da imagem.

Reduzir o retângulo`s opacity to about 50 percent.
9

Localize o "retângulo 1" camada no painel de camadas, que é a camada que contém o rectângulo gradiente que apenas adicionado. Arraste esta camada para baixo para torná-la a terceira camada do topo - abaixo "camada 1" e a camada que contém o texto. Clique no "Opacidade" menu na parte superior do painel Layers e arraste o controle deslizante por isso é cerca de 50 por cento. Fazer o gradiente top semi-transparente permite que ele se fundir com o gradiente abaixo dele, criando um fundo rico.

O estilo Emboss é definido em uma profundidade de
10

Selecione a camada que contém o texto no painel Camadas. Clique no "Camada" de menu, selecione "Estilo de Camada" e clique em "bisel & Emboss." Verifique se o menu Estilo é fixado em "Emboss" e arraste o "Profundidade" controle deslizante para a esquerda - em torno de "225" por cento - para adicionar apenas um pouco desse efeito ao texto.

O estilo de cetim com um
11

Clique no "Cetim" opção na janela Layer Style. Para este modelo, use um Blend Mode "Multiplicar" e reduzir a opacidade para cerca de "15" por cento. Este combina o estilo de cetim com o estilo de relevo. Ajustar as configurações, se desejar e clique "ESTÁ BEM."

Uma imagem JPEG com uma qualidade de 77 por cento.
12

Salve a imagem como um banner otimizado Web selecionando "Save for Web" no menu Arquivo. selecionar "JPEG" a partir do menu Formatar e usar uma qualidade de imagem de entre 75 e 80 por cento. Isso cria uma imagem com um tamanho de arquivo pequeno, que é rapidamente carregado por qualquer navegador da Web, sem sacrificar a qualidade da imagem. Clique "Salve " e selecione um local para armazenar o arquivo no seu computador. Depois de fechar Photoshop, adicionar o arquivo para sua página Web.

Referências

  • ligação Adobe: Adobe Photoshop CC Ajuda
  • ligação Adobe Photoshop Help: Criação de Tipo
  • ligação Adobe Photoshop Ajuda: gradientes
  • ligação Adobe: Photoshop CC: Salvar uma foto no formato JPEG
  • ligação Ajuda do Adobe Photoshop: opacidade da camada e Blending

Sobre o autor

Um autor publicado e palestrante profissional, David Weedmark aconselhou empresas e governos em tecnologia, mídia e marketing para mais de 20 anos. Ele ensinou ciência da computação na Algonquin College, começou três empresas de sucesso, e tem escrito centenas de artigos para jornais e revistas em todo o Canadá e os Estados Unidos.


Artigos relacionados