Na criação de um site, é muito importante a etapa de renderização do design da página, que posteriormente será composta e publicada na rede. Neste artigo, você aprenderá como usar o Adobe Photoshop para desenhar um layout competente para um site, com base no qual poderá posteriormente formar layouts mais complexos.
É necessário
Programa Adobe Photoshop
Instruções
Passo 1
Crie um novo arquivo no Photoshop (Ctrl + N) com dimensões 1040x1400, onde 1400 é a altura. Ative a exibição de réguas (Ctrl + R) e defina os pixels como unidades de medida nas configurações da régua.
Passo 2
Comece a esticar as guias para que se ajustem às bordas das caixas de layout. Estique as bordas laterais para que 40 pixels sejam deixados nas bordas. As bordas superior e inferior também devem deixar 40 pixels de cada lado para as bordas do fundo.
etapa 3
Em seguida, selecione um guia com 200 pixels abaixo do topo do fundo para o cabeçalho superior.
Passo 4
Para formar as barras laterais à esquerda e à direita do layout, defina as guias de 240 pixels da borda do fundo para a esquerda e 800 para a direita.
Etapa 5
5px para dentro a partir das barras laterais esquerda e direita e desenhe mais duas guias verticais. Em seguida, arraste mais duas guias de 245 px para a esquerda e 795 px para a direita.
Etapa 6
Agora meça a partir da borda do cabeçalho 30px e desenhe uma guia horizontal para o menu horizontal.
Etapa 7
Selecione a área estreita do menu horizontal que você acabou de marcar com uma seleção retangular usando a tecla M. Selecione a ferramenta de preenchimento e preencha a área com uma cor cinza claro neutro.
Etapa 8
Selecione a ferramenta de preenchimento e preencha a área com uma cor cinza claro neutro. Clique no menu "Selecionar-Modificar-Compactar", especifique uma opção de 1 pixel e clique em "OK". Preencha a área com um tom de cinza mais claro - você terá um quadro de menu.
Etapa 9
Crie uma nova camada e selecione uma imagem adequada para o ícone ou logotipo do site e, em seguida, abra-a.
Etapa 10
Insira uma imagem em uma nova camada no cabeçalho, colocando-a na borda esquerda. À direita da imagem, escreva o título do texto do site usando qualquer fonte.
Etapa 11
Projete os blocos do seu site no mesmo esquema de cores do cabeçalho recém-criado. Selecione a área da barra lateral esquerda e execute as mesmas operações de preenchimento de duas cores como no bloco de menu.
Etapa 12
Faça o mesmo com o bloco central de conteúdo. Copie a camada da barra lateral esquerda e coloque-a como barra lateral direita.
Etapa 13
Adicione texto ao seu layout - escolha uma fonte neutra e preencha os títulos dos menus, exemplos de notícias, fotos, tags e seção de links.
Etapa 14
Termine o layout criando um "rodapé" ou rodapé - anote seus direitos autorais e seus contatos lá.
