Como criar um cabeçalho website profissional em photoshop

Conteúdo
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.

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."

Video: Como fazer Banner Flat no Photoshop
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.

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.

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.

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.

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.

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."

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.

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.

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.

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."

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