Cabeçalho do site no Photoshop

• Pode 13, 2024

Neste tutorial, criaremos um cabeçalho de site no Photoshop^R que iremos animar no Flash^R Catalisador^TM. A animação começa com um plano de fundo vazio e os elementos de design deslizam para "construir" o cabeçalho diante de nossos olhos. A animação será programada para começar "em carga" e durará apenas alguns segundos. O cabeçalho deste site será para uma empresa de cartões comemorativa.

Nosso primeiro passo é criar o cabeçalho no Photoshop. Colocaremos cada elemento de design em sua própria camada, em preparação para trabalhar com eles no Flash Catalyst. Como você pode ver, teremos 6 elementos de design.

1. Fundo
2. Barra inferior na largura do cabeçalho
3. Nome da empresa
4. Cartão de Aniversário
5. Cartão de abóbora Notecard
6. Cartão de Natal

1. Vamos começar um novo projeto no Photoshop. Defina Largura como 1000 pixels, Altura para 225 pixels e Plano de fundo como transparente. Esse tamanho cabe perfeitamente na parte superior da nossa página da web.
   
   
2. O único elemento que será visível no início da animação é o fundo branco. Preencha a primeira camada da imagem com a cor de fundo de sua escolha. No painel Camadas, renomeie esta camada "Plano de fundo".
   
   
3. Para criar a borda sombreada, usei o Inner Layer Layer Style. Clique duas vezes na camada Background e marque a caixa ao lado de Inner Shadow. Defina Distância e Choke como 0 e Tamanho para 49.
   
   
4. Em seguida, adicionaremos a borda fina ao redor da imagem com o Stroke Layer Style. Defina a cor como marrom (# 6e674f), o tamanho como 2 e a posição como interior.
   
   Em seguida, adicionaremos os cartões. Reduzi o tamanho dos meus cartões de felicitações para 230 x 175 pixels. Isso os manterá na proporção do tamanho do cabeçalho.
   
   
5. Vamos copiar / colar o cartão Pumpkin em nosso cabeçalho. Nomeie a nova camada "Pumpkin". Clique em Editar - Transformação livre para girar o cartão levemente para a direita. Clique na camada Pumpkin e aplique o Drop Shadow Layer Style, mantendo as configurações padrão.
   
   
6. Repita a última etapa para o cartão de aniversário e de Natal.
   
   Em seguida, adicionaremos a barra na parte inferior do cabeçalho. Vamos dobrar nossos cartões atrás dessa barra para emular os cartões em uma prateleira.
   
   
7. Adicione uma nova camada ao painel Camadas e chame-a de "Barra".
   
   
8. Com a ferramenta Letreiro retangular, selecione a área inferior do cabeçalho, apenas dentro da borda marrom. Escolha uma cor para sua barra e preencha a seleção com essa cor.
   
   
9. Clique duas vezes na camada e adicione o Stroke Layer Style como você fez na camada Background.
   
   
10. Clique na ferramenta Tipo horizontal e escolha uma fonte para o nome da sua empresa. Eu usei a mesma cor marrom que a cor da borda. Digite o nome da empresa no lado esquerdo do cabeçalho.
    
    
11. Esta etapa é opcional. Rasterizaremos o texto. Clique com o botão direito do mouse na camada de texto e escolha Rasterizar tipo no menu.
    
    
12. Salve seu projeto no formato .psd do Photoshop.
    
    

Direitos autorais 2018 Adobe Systems Incorporated. Todos os direitos reservados. As capturas de tela do produto Adobe foram reproduzidas com a permissão da Adobe Systems Incorporated. Adobe, Photoshop, Álbum do Photoshop, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst e Flash Paper é / são marcas comerciais registradas ou marcas comerciais da Adobe Systems Incorporated nos Estados Unidos e / ou em outros países.

Instruções De Vídeo: Photoshop CC - Layout de Site (Parte 4 - Criação do cabeçalho e do menu) (Pode 2024).