Crie um Layout de Blog Limpo e Elegante no Photoshop CS6

Neste tutorial vou mostrar o processo de fazendo um blog de design simples e limpo usando o mais recente Photoshop. Nós vamos usar o novo Estilos de Personagem e Estilos de Parágrafo para nos ajudar a agilizar o processo.

Para seguir este tutorial, você precisará dos seguintes recursos:

• Fonte livre de sansação de Bernd Montag.
• 26 Padrão de Pixel Repetitivo do PSDfreemium.
• Ícones de mídia social gratuitos de Daniele Selvitella.

• Demonstração

Preparando o Canvas

Passo 1

Neste projeto, vamos usar 960 gs como estrutura. Faça o download do modelo a partir de sua página principal e dentro do arquivo zip, pesquise pelo arquivo do photoshop. Abra o arquivo '12 Column Grid 'no Photoshop.

Clique no ícone de olho da camada 12 Col Grid para ocultá-lo; nós não vamos precisar disso por enquanto.

Passo 2

O tamanho atual da tela é muito pequeno. Clique Imagem> Tamanho da tela (ou Ctrl + Alt + C). Adicione um tamanho maior e defina seu ponto de ancoragem para o centro.

etapa 3

Pressione Ctrl + R para revelar a régua. Clique Visualizar> Novo Guia para criar um novo guia que nos ajudará a projetar com precisão. Selecione Vertical e na posição: 185 px fazer uma guia vertical 185 px a partir do canto superior esquerdo da tela.

Passo 4

Desenhe outro guia vertical na posição 150 px, 1095 px e 1130 px.

Abaixo está nosso guia final dentro da tela.

Preparando Tema de Cores

Passo 5

Para este design, vamos usar uma bela combinação de cores da Colorlouver. Clique no link Visualizar para abrir a combinação de cores como um arquivo jpeg.

Salve a combinação de cores e coloque-a dentro do arquivo do Photoshop. Ao colocar a imagem diretamente dentro da tela, podemos amostrar sua cor mais rapidamente e mais facilmente.

Preparando o fundo

Passo 6

Selecione fundo camada e clique no ícone de bloqueio na parte superior do painel Camadas para desbloqueá-lo. Clique duas vezes na miniatura para alterar sua cor.

Clique na segunda cor, # 948371, para selecioná-lo.

Passo 7

Desenhe uma forma retangular no topo da tela. Este será o segundo plano de fundo.

Passo 8

Mantenha a forma selecionada. No Barra de opções, abrir Preencher Cor caixa e, em seguida, clique no ícone de roda de cor. Quando a caixa de diálogo Color Picker for aberta, clique na primeira cor para selecioná-la. Por sua Acidente vascular encefálico seleção de cor Nenhum.

Passo 9

Faça uma nova camada e, em seguida, selecione a tela superior usando a ferramenta de letreiro retangular. Ativar o ferramenta Gradiente e preenchê-lo com radial gradiente de branco para preto. Certifique-se de que o gradiente esteja centralizado na parte superior da tela.

Mude sua Mistura modo para Tela e reduzir sua Opacidade para 37%.

Passo 10

Faça uma nova camada e nomeie como 'sombra'.

Desenhe uma seleção retangular na parte inferior do segundo plano secundário, como mostrado. Clique Editar: preenchimento. Conjunto Usar para Preto. Clique Está bem para preencher a seleção com preto.

Passo 11

Suavize-o usando o Gaussian Blur. Clique Filtro> Desfoque> Desfoque Gaussiano.

Passo 12

Segure Alt e coloque o cursor entre sombra e fundo superior camada. Sem soltar a tecla Alt, clique para converter a camada para Clipping Mask. Ao convertê-lo em Clipping Mask, a sombra agora entra no plano de fundo superior.

Etapa 13

Derrubar sombra Opacidade para 50% para torná-lo sutil. Abaixo, você pode ver o resultado em 100% de ampliação.

Passo 14

É sempre uma boa ideia colocar essas camadas em um grupo. Para fazer isso, selecione todas as camadas e, em seguida, clique em Ctrl + G.

Cabeçalho

Etapa 15

Desenhe um retângulo na tela superior como mostrado.

Passo 16

No Barra de opções, conjunto Acidente vascular encefálico cor para # af9f8e.

17º passo

Por sua Preencher cor, selecione Gradiente linear de # d0c4b9 para # a89c91.

Abaixo está o resultado em 100%.

Nome do site

Passo 18

Adicione o nome do site no lado esquerdo do design. Observe a colocação como mostrado abaixo. Clique duas vezes no texto e adicione Sombra. Para sua fonte, use Sansation.

Cardápio

19º passo

Desenhe menus no outro lado da barra de menu. Use fonte Sansation 14 pt. Novamente, observe os canais.

20º passo

Para o menu ativo, defina seu tipo de fonte para negrito.

21º passo

Ativar Ferramenta de polígono E definir Lados para 3. Desenhe uma forma de triângulo com Preencha: # 3d3123 e Stroke: Nenhum. Adicionar Estilo de Camada > Sombra.

Passo 22

Vamos enfatizar o menu ativo, adicionando uma linha abaixo dele. Ativar o Ferramenta de linha e definir seu peso para 5 px. Selecione # f76b6a para seu preenchimento, sem derrame.

Coloque a linha logo abaixo do menu ativo e adicione 1 px de espaço na parte inferior da barra de menus.

Usando estilos de caractere

Passo 23

Vamos salvar a configuração de caracteres como um estilo de caractere. Esse recurso é uma versão simplificada dos estilos de caractere no InDesign. Para salvá-lo, ative o texto e clique no ícone 'New Character Style'.

Clique duas vezes no novo estilo de caractere e use a seguinte configuração.

Passo 24

Selecione o outro menu e clique no estilo de caractere para aplicá-lo. Se você encontrar um sinal de mais ao lado do estilo de caractere, isso significa que o personagem tem uma configuração diferente. Para substituir as configurações, clique no ícone de seta circular.

Passo 25

Repita o passo anterior para criar um novo estilo de caractere para o menu ativo.

Passo 26

Então, qual é o objetivo de usar os estilos de caractere? Os Estilos de Personagem nos ajudam a centralizar a configuração de caracteres. Podemos simplesmente editar o estilo de caractere para editar cada texto usando esse estilo. Veja um exemplo abaixo. Se editarmos o tipo de fonte dentro de Character Style Menu principal - normal para Corbel, todo o menu normal é alterado automaticamente para Corbel.

Passo 27

Faça uma nova camada e coloque-a sob a barra de menu. Pressione Ctrl e clique na barra de menus para fazer nova seleção com base em sua forma. Preencha com Preto.

Etapa 28

Remova a seleção usando Ctrl + D. Suavize adicionando Desfoque Gaussiano, Filtro> Desfoque> Desfoque Gaussiano.

Slider

29 de passo

Desenhe uma forma retangular com a largura de 10 colunas (veja abaixo).

Por sua Cor de preenchimento selecionar # dfd1c2. Por sua Acidente vascular encefálico selecionar # c8baac com tamanho 10 pt. Clique na pequena seta suspensa ao lado da visualização da linha e verifique Alinhar por dentro é selecionado.

Etapa 30

Cole uma imagem no topo do quadro. Converta-o para Clipping Mask pressionando Ctrl + Alt + G. A imagem entrará automaticamente no quadro do slider. Se necessário, você pode mover e redimensionar a imagem sem afetar o quadro.

Etapa 31

Desenhe outra forma retangular atrás do controle deslizante com a mesma cor. Certifique-se de encaixá-lo no guia mais externo. Adicionar Estilo de camada> Sobreposição de padrão usando o padrão de pixels do PSDfreemium. Diminuir sua Opacidade para tornar sutil.

Passo 32

Desenhe uma forma retangular acima da forma com Preencha: # b3aca5 e sem golpe. Pressione Ctrl + T e depois gire-o 45 °. Converter a forma da camada para Clipping Mask.

Passo 33

Duplique a forma e redimensione-a. Mude sua Preencher para uma cor mais escura. Converter a forma da camada para Clipping Mask.

Passo 34

Repita o mesmo passo para desenhar outra seta do outro lado.

Passo 35

Ctrl-clique no quadro de slides para fazer nova seleção. Faça uma nova camada e converta-a em um Clipping Mask. Preencha a seleção com Preto.

Passo 36

Desmarque (Ctrl + D) e depois suavizar usando Desfoque Gaussiano.

Você pode reduzir a opacidade da sombra, se necessário.

Passo 37

Desenhe um retângulo arredondado no canto do controle deslizante com Preencha # c8baac.

Passo 38

Desenhe um círculo dentro da forma. Defina seu Acidente vascular encefálico para Preto com tamanho 1 pt e remova o preenchimento.

Etapa 39

Selecione os círculo caminho usando Seleção de Caminho ferramenta. Shift + Alt-arraste o caminho para duplicá-lo.

Repita isso para desenhar mais círculos.

Passo 40

Selecione um dos caminhos do círculo. Pressione Ctrl + Shift + J para cortá-lo em uma nova camada.

Passo 41

No Barra de opções, remova seu Acidente vascular encefálico e mudar sua Preencher para um radial gradiente de # e38989 para # bb5c5c. Adicionar Estilo de Camada> Brilho Exterior e Sombra.

Passo 42

Desenhe uma seleção elíptica sob o controle deslizante. Faça uma nova camada e preencha com Preto.

Passo 43

Desmarque (Ctrl + D). Suavizar usando Desfoque Gaussiano.

Fundo Inferior

Passo 44

Desenhe outra forma retangular para o plano de fundo inferior. Use o mesmo Preencher e Acidente vascular encefálico cor como a forma de controle deslizante.

Como sempre, seja muito cauteloso com sua colocação. Queremos que cubra cada guia na tela.

Adicionar Estilo de camada> Sobreposição de padrão.

Abaixo está o resultado em 100% de ampliação.

Passo 45

Selecione sua área superior usando a ferramenta Rectangular Marquee.

Passo 46

Faça uma nova camada, coloque-a atrás da forma. Preencha a seleção com Preto. Pressione Ctrl + T, clique com o botão direito e selecione Perspectiva.

Arraste seus cantos superiores para fora.

Clique com o botão direito novamente e escolha Escala. Arraste a alça superior para baixo.

Clique com o botão direito e escolha Urdidura. Arraste o segmento esquerdo e direito para dentro.

Suavizar usando Desfoque Gaussiano.

Diminuir o Opacidade para 20%.

Passo 47

Desenhe um rectângulo branco dentro do fundo. Isso será o segundo plano do conteúdo principal do site.

Adicione um espaço de 10 px à esquerda, à direita e ao lado superior do plano de fundo. O espaçamento deve ser fácil porque fizemos o guia nos primeiros passos. Adicionar Estilo de Camada> Brilho Exterior.

Etapa 48

Adicione um novo guia, 25 px a partir do lado superior da forma.

Título da seção

Passo 49

Adicionar um novo estilo de caractere para o título da seção da página e sua descrição.

Adicione o título da seção e sua descrição usando a ferramenta Tipo. Aplique estilos que fizemos anteriormente. Certifique-se de adicionar 25 px de espaço na parte superior de seu plano de fundo com a ajuda do guia anterior.

Etapa 50

Desenhe uma linha de 5 px na descrição do site com Preenchimento: # 938270 e Stroke: Nenhum.

Postagem do blog

Passo 51

Faça outro estilo de personagem para o título da postagem.

Passo 52

Adicione um título de post e aplique o estilo de personagem anterior.

Passo 53

Desenhe uma forma de retângulo sob o título com 4 colunas de largura. Conjunto branco por sua Preencher e #bebebe por sua Acidente vascular encefálico. Adicionar Estilo de Camada> Acidente vascular cerebral.

Passo 54

Cole uma imagem na parte superior da forma. Converta-o para Clipping Mask (Ctrl + Alt + G).

Passo 55

Desenhe um retângulo arredondado com Preencha: # 8e8380 e Stroke: Nenhum. Converta-o para Clipping Mask.

Passo 56

Crie novos estilos de caractere para os metadados do blog.

Passo 57

Adicione texto de metadados sobre a forma e aplique o estilo de caractere que fizemos anteriormente.

Passo 58

Ativar Tipo ferramenta e clique e arraste para criar uma caixa de texto. Defina sua largura para 4 colunas. Clique Tipo> Colar Lorem Ipsum preenchê-lo com Lorem Ipsum gerado automaticamente a partir do Photoshop.

Passo 59

Crie um novo estilo de parágrafo para o conteúdo do personagem. Clique no novo ícone no painel 'Estilos de parágrafo'.

Clique duas vezes no estilo de parágrafo e use esta configuração a seguir.

Passo 60

Aplique esse estilo ao conteúdo da postagem. Você também pode experimentar suas configurações de recuo e espaçamento.

Para web design, desative a hifenização.

Passo 61

Desenhe um retângulo arredondado com Preencha: # 8e8380 e Stroke: Nenhum. Adicionar Estilo de camada> Sobreposição de padrão. Para consistência, use o mesmo padrão do controle deslizante.

Passo 62

Adicione um rótulo de botão. Eu sugiro que você salve como um estilo de caractere. Desta forma, podemos usá-lo facilmente para outros botões.

Passo 63

O botão anterior é para condições normais. Vamos duplicá-lo e mudar sua cor para # f76b6a. Além disso, defina seu tipo de rótulo como negrito.

Passo 64

Coloque o post dentro de um grupo e pressione Ctrl + J para duplicá-lo. Arraste com a tecla Alt para duplicar o grupo.

Repita o mesmo passo para fazer mais posts. Lembre-se de mudar a imagem e o título de cada postagem.

Passo 65

Duplicado consulte Mais informação botão e alterar o seu rótulo para o número. Vamos usá-lo para navegação na página. Lembre-se de definir um dos botões para pautar a condição.

Etapa 66: rodapé

Vamos começar a trabalhar no rodapé. Adicione um título de widget e sua descrição.

Passo 67

Adicione um link e desenhe uma linha de 1 px abaixo dele. Conjunto Preencher: Nenhum e Acidente vascular cerebral: # 8e8380.

Passo 68

Clique Mais opções botão e selecione linha tracejada.

Passo 69

Adicione mais links no widget.

Passo 70

Duplicar o widget.

Passo 71

Também precisamos adicionar a condição de foco. Defina um dos links para negrito.

Abaixo desse link ativo, adicione uma linha de 5 px. Defina sua cor para # f76b6a. Para consistência, a aparência desse link é semelhante ao menu ativo na barra de menus.

Passo 72

Adicione outro retângulo na área inferior. Defina seu Preencher para # 3d3123.

Rodapé de Informação

Passo 73

Adicionar informações do rodapé usando Tipo ferramenta. Dê um escuro Sombra para adicionar contraste ao seu fundo.

Rede social

Passo 74

Adicione alguns ícones de mídia social de Daniele Selvitella. Adicionar Estilo de Camada> Brilho Exterior.

Etapa 75

Diminuir o ícone normal para 50%. Para a condição de foco, vamos apenas manter o seu Opacidade a 100%.

Passo 76

Pegue um ícone de cursor de mão livre e coloque o menor cursor de mão acima do link ativo ou flutuante.

Resultado final

Este é o nosso resultado final. Você pode ver que a versão mais recente do Photoshop tem alguns recursos interessantes para projetar um layout da web. Estilos de Caracteres e Estilos de Parágrafos é uma melhoria significativa para cada web designer.

• Demonstração
• Fonte de download