Criando um black Layout

[LVGX]

Passo 1: Criar o documento do Photoshop

Os blogs tendem a ser bastante grande no comprimento, devido à quantidade de informação que eles têm para mostrar, então vamos começar com uma tela de tamanho 1200 x 1370 pixels.

 

Passo 2: Configurando guias Photoshop

A área do blog é o conteúdo principal terá uma largura de 850 pixels. Para fazer com que linhas se tudo até bem, vamos usar alguns guias. Para criar um novo guia, vá para View> New Guide introduzir os seguintes tamanhos.

 

Passo 3: Preencha a camada de fundo

No documento que criamos, tinha fixado Background Contents para Branca. Definir cor de primeiro plano seu para um cinza escuro (# 282828), selecione a camada de fundo no painel Camadas, ative a Paint Bucket Tool (G) e clique na tela para preencher nosso fundo com a cor cinza escuro.

 

Etapa 4: Criar barra de navegação à primeira

Pegue a Rectangular Marquee Tool (M) no painel Ferramentas. No topo da sua tela, crie um retângulo sobre 38-40 pixels de altura e que abrangem toda a largura da tela.

 

Preenchimento (Ctrl / Cmd + F5) a seleção retângulo com qualquer cor (não importa qual a cor que você escolher, porque vamos adicionar alguns estilos de camada a camada).

 

Em seguida, vamos adicionar alguns estilos de camada. Abra a janela de diálogo Estilos de camada clicando sobre a miniatura da camada no painel Layers.

 

Cor e camada Sobreposição

 

Borda estilo de camada

 

 

Debaixo da borda no retângulo, crie uma seleção 1px, certificando-se as extensões de linha a largura da tela. Você pode usar o Single Row Marquee Tool para isso.

 

Preencha a seleção com uma cor cinza escuro (# 323232).

 

 

 

Etapa 5: Criando o layout do cabeçalho do blog

Com a Rectangular Marquee Tool (M), crie uma seleção debaixo da navegação. A seleção deve ser de cerca de 80-83 pixels de altura e abrangem a largura da tela.

 

 

Preencha a seleção com um gradiente de cor usando o Gradient Tool (G). Primeiro, defina sua cor de primeiro plano para # 282828 e cor de fundo para # 191919. Em seguida, na barra de opções, definir o estilo do gradiente Gradiente refletida. Iniciar a partir do meio da seleção e arraste para o exterior, quer do lado esquerdo ou direito da tela.

 

 

Debaixo do cabeçalho, deixará uma lacuna 1px, e depois adicionar outra linha medindo a largura da tela. Preencha a linha com a cor # 323232.

 

 

 

Passo 6: Criando o menu de navegação segunda

Novamente, utilizando o Rectangular Marquee Tool (M), crie uma seleção cobrindo a largura da tela. A altura deve ser de cerca de 38-40 pixels.

 

Dê um duplo clique na camada para abrir a janela de diálogo Layer Estilos e, em seguida, adicione os estilos de camada seguinte.

 

Gradiente overlay e camada Sobreposição

 

 

Borda e estilo de camada

 

 

Certifique-se que a camada de linha de 1px que fizemos para o nosso cabeçalho é acima de sua camada de navegação segundo. A diferença 1px deixamos sob o cabeçalho deve ser preenchido com o golpe foi aplicado para a camada de navegação segundo.

 

 

 

Depois, na parte inferior da segunda navegação, adicionar uma outra linha de 1px da mesma forma que nós temos de criá-las.

 

 

Passo 7: Preencher em algum conteúdo

No primeiro retângulo que criamos, adicione os itens de navegação ligação com a Horizontal Type Tool (T). Dentro da área de cabeçalho, adicione o seu site, blog título eo slogan. A cor azul que usei a palavra "blog" é # 019fc1.

 

Na barra de navegação em segundo lugar, adicionar os itens elo principal de navegação.

 

No espaço à esquerda e à direita, adicione o seu favorito mídia ícones social. Os ícones social que usei são de um pacote de ícones gratuito chamado .

O conteúdo está oculto, favor efetuar login ou se cadastrar!

• Entre
• ou
• Cadastre-se

.

 

 

Passo 8: Criando a área em destaque

Usando o Rectangular Marquee Tool (M), crie uma seleção de cerca de 250 pixels de altura e 1200 pixels de largura (que é a largura da tela).

 

Preencha a seleção usando a Paint Bucket Tool (G) com uma cor cinzento muito escuro (# 191919).

 

 

Dentro da sua área do retângulo em destaque, inserir uma imagem em destaque. Coloque a imagem contra a guia esquerda, deixando cerca de 2-4 pixels acima e abaixo da imagem em destaque. A imagem que eu estou usando é uma imagem de

O conteúdo está oculto, favor efetuar login ou se cadastrar!

• Entre
• ou
• Cadastre-se

. Você pode usar suas próprias imagens, é claro.

 

 

Passo 8: Criando o marcador área em destaque

Usando o Rectangular Marquee Tool (M), faça uma seleção a partir da borda da guia direita terminando na borda da imagem em destaque. A seleção retângulo deve ser de cerca de 37-40 pixels de altura. Preencha a seleção com qualquer cor (eu usei vermelho para fins de demonstração).

 

 

 

Usando a Polygonal Lasso Tool (L), crie uma seleção para fazer o lado esquerdo do retângulo vermelho em uma seta. Preencha a seleção na mesma camada da mesma cor do retângulo vermelho.

 

 

Em seguida, adicione os estilos de camada que se segue para o retângulo vermelho.

 

 

 

 

 

Vai ficar assim:

 

 

Etapa 9: Crie marcadores de área adicional em Destaque

Usando o mesmo método como acima, crie um mais cinco marcadores, só que desta vez, pule a parte em que acrescentou a seta à esquerda dos marcadores.

 

 

Agora estilize:

 

 

 

 

 

Etapa 10: Criação de postos de manequim

Use a mesma técnica que usamos para o primeiro marcador em Destaque. Criar uma versão menor, mantendo a altura um pouco o mesmo.

 

Coloque uma pequena seta azul debaixo de sua área de destaque contra o seu guia de esquerda.

 

 

Em uma nova camada abaixo da pequena seta azul, crie uma seleção retangular.

 

 

Preencha a seleção com uma cor muito cinza escuro (# 191919). Em seguida, adicione um estilo de camada do curso com as configurações abaixo.

 

 

Você deve ter algo parecido com isso.

 

 

Em uma camada abaixo da última camada que acabou de fazer, faça uma seleção com a mesma largura que a pequena seta eo último retângulo que você criou.

 

 

Preencha a seleção com uma cor cinza (# 333333) e, em seguida, adicionar um estilo de camada Stroke usando as configurações abaixo.

 

 

ficou assim:

 

 

Passo 11: Adicionar conteúdo do post

Dentro da pequena seta azul, adicione a data da postagem. Na escuridão da caixa cinza, adicione o "WordPress" texto título do post. Dentro da caixa cinza leve, adicione o conteúdo do post manequim WordPress.

 

 

Duplicar cada elemento simulado post para que possamos ter algo que se parece com uma frente blogue / página inicial.

 

 

Passo 12: Criando a barra lateral

Para a barra lateral do WordPress, vamos replicar o post do WordPress manequim, mas sem a pequena seta azul. Então começamos com o mais escuro retângulo no topo de um título da caixa, então usamos o leve para o nosso rectângulo recipiente de conteúdo.

 

 

Comece a construir a sua barra lateral, utilizando técnicas similares que temos vindo a utilizar, bem como cores e elementos que já fizemos.

 

Aqui está uma caixa de pesquisa, por exemplo.

 

 

 

Talvez você queira adicionar uma lista de blogs também. Para a lista de marcadores, eu usei apenas a Rectangular Marquee Tool (M) e da mesma cor azul que temos vindo a utilizar durante todo o tutorial.

 

 

Passo 13: Criando o rodapé

Para o nosso rodapé, vamos usar uma técnica similar para criar o cabeçalho. Crie um retângulo usando a Rectangular Marquee Tool (M), o retângulo deve ser cerca de 60 pixels de altura e abrangem a largura da tela.

 

Defina a sua cor de primeiro plano para um cinza escuro cor de fundo (# 282827) e seu ainda mais escuro para um cinza (# 191919).

 

Em seguida, puxe a Gradient Tool (G) e defina a opção de estilo de gradiente gradiente refletido como a que usamos no cabeçalho do layout. Arraste o gradiente de cor do meio para fora.

 

Dê uma borda de 1px para o rodapé utilizando a cor # 353535.

 

 

Diretamente acima do AVC no rodapé, adicione uma linha cinza escuro 1px usando a cor # 0b0b0b.

 

 

Por fim, adicionar o conteúdo do rodapé para terminar o layout.

 

Aqui está o que ele deve ser parecido quando terminar.

 

 

 

Fonte Arquivos Download

 

O conteúdo está oculto, favor efetuar login ou se cadastrar!

• Entre
• ou
• Cadastre-se

 

 

Créditos:

Lucasuppes - Traduzir e passar..

Layout e tutorial - Richard Carpenter

O conteúdo está oculto, favor efetuar login ou se cadastrar!

• Entre
• ou
• Cadastre-se

[JohnSmith]

Legal, gostei bastante detalhado... So é ruim alguem ter coragem pra ler completo kkkk

Obrigado por compartilhar!

[Mickael']

Concordo, uma video aula seria bem melhor.

amei o layout fico lindo, breve usarei esse tutorial. like

[Bark]

caraca muito bom tutorial obrigado por compartilhar.