Imagem Final deste Tutorial
Passo 1
Vamos começar o layout! Primeiramente, este não é um tutorial básico, por isso o autor pula algumas explicações básicas. De qualquer forma, qualquer pessoa com um nível intermediário em Photoshop é capaz de fazê-lo. Em segundo lugar, é realmente difícil de obter exatamente o mesmo resultado que este tutorial ensina, e você deverá usar sua imaginação e o seu bom gosto para obter algo semelhante ou melhor. E em terceiro lugar, este layout foi feito pensando no Wordpress, mas você pode desenvolver um tema para outro tipo de aplicação como Joomla ou um site personalizado usando xhtml e css. “O que me impressionou neste tutorial, na primeira vez que eu o vi, foi o seu alto grau de qualidade, no estilo templatemonsters, e as preciosas dicas do autor de onde conseguir os brushes usados para fazer as nuvens, estrelas e outros, totalmente grátis. Este tutorial me ajudou muito ao fazer um hotsite para Expo Xangai 2010 (China), devido ao brush (pincel) para criar nuvens. Acesse meu portfolio na behance.net e veja como ficou.” Então vamos começar! Crie um novo documento com 960 pixels de largura por 1000 pixels de altura no modo RGB. Vá em View-> Rulers (régua) ou se preferir use as teclas de atalho Ctrl+R e desenhe algumas guias para marcar os limites do nosso layout. Agora vá em Image> Canvas Size para redimensionar a área do documento para (1460 x 1000 px). Desta forma, você terá o seu design centrado em um documento grande e ver como ele fica em resoluções widescreen. Além disso, crie uma guia para marcar a altura do cabeçalho.
Passo 2
Crie uma guia horizontal no meio do documento e a use para preencher o “plano de fundo” com um azul escuro usando um Gradiente Radial (# 0D2B53 – # 010D1F). Adicione algumas guias para servirem de referência para os limites de preenchimento da página principal, à esquerda e à direita. É muito provável que nós venhamos a mudar a altura do documento posteriormente, bom, adicione uma nova camada de preenchimento (# 010D1F) abaixo da nossa “camada de fundo”.
Passo 3
O autor usa para compor o fundo, uma fotografia de nuvens escuras em uma tempestade e que você pode achar facilmente em banco de imagens free como no Stock.Xchng, você precisa se cadastrar(é gratuito) para pode baixar as imagens em alta resolução. Cole a imagem que você escolheu em uma nova camada chamada “Nuvens” e altere o seu “Blending Mode” para Overlay. Em seguida, vá para o menu Layer->Layer Mask->Hide All, e faça um gradiente radial do branco para o preto(#FFFFFF – #000000), que vai da parte superior do meio para baixo quase no meio. Em seguida, ajuste um pouco os níveis das “nuvens”, para que as nuvens fiquem mais escuras.
Passo 4
Agora cole esta foto tirada de uma praia espanhola, em uma nova camada chamada “linha do horizonte.” Em seguida, crie um novo Adjustment Layer(Camada de Ajuste)-> Channel Mixer(Misturador de Canais) … e selecione Black & White(Preto & Branco) com Filtro Azul (RGB). Então, para aplicar esse efeito somente na camada” linha do horizonte” mantenha pressionada a tecla Option(mac) ou Alt(windows) e clique entre a camada Channel Mixer e a camada “linha do horizonte”. Finalmente, a mudança do horizonte “camada Blending Mode para Overlay.
Passo 5
Aplique um Layer Mask ( Máscara de Camada)-> Reveal all (Revelar todas) para a canada “Linha do Horizonte”. Em seguida, utilizando um pincel suave na cor preta e grande (# 000000) oculte as bordas da imagem, em seguida, vá nas opções do pincel e selecione o brush “Grunge” (O autor usou este Grunge Brush por Kelzky13, especialmente pincéis no tamanho 250 e 181) e faça as bordas um pouco mais irregulares. 
Passo 6
Usaremos para o título “Magic” a fonte Scriptina. Em seguida, aplique os estilos de camada abaixo (Blending Options): um Outer Glow (# 9EB6D0) e um Gradiente Overlay (# 70ABF6, # FFFFFF, # B4CBE7, a # FFFFFF). Pois bem, agora é um bom momento para organizar o nosso projeto de desenvolvimento, em pastas. Coloque todas as camadas em uma nova pasta chamada “Background” e o texto dentro de outra pasta chamada “Logo”.
Passo 7
Passo 8
Em seguida, usando o pincel tamanho 615 e ainda utilizando os brushes do conjunto de estrelas, adicione mais estrelas para o céu em uma nova camada chamada “Estrelas 2″, então com uma borracha macia, apagar as estrelas que estão sobre os edifícios. Em seguida, adicionar um Outer Glow (# 8AB2FF) para “Stars2″.
Passo 9
Adicione mais estrelas para a camada “Estrelas 2″ em todo o projeto, em seguida, usando a ferramenta Borracha, apague as estrelas de algumas áreas. Por último, aplique um efeito Gradient Overlay para a camada “Estrelas 2″, usando quatro cores: # 6AB1D1, # FFFFFF, # 94CFED e # FFFFFF.
Passo 10
Agora faça download desses brushes Star Brushes por jen-ni e mantenha os pincéis à mão, porque nós vamos usá-los várias vezes neste tutorial. Selecione um brush número 65 (estou usando o número 148) e use um branco (# FFFFFF) para a estrela em uma nova camada, logo acima do ponto do i. Em seguida, aplique um Outer Glow (# 00BCF9) para a estrela mais brilhante.
Passo 11
Duplique o texto “Magic”, selecione o texto, e digite a palavra “night” em seu lugar. Em seguida, defina o Outer Glow para branco (# FFFFFF) e da sobreposição de gradiente de três cores (# F9DA5B, # FEAE00 e # FFD403), veja a imagem abaixo para conferir os valores do filtro.
Passo 12
Vamos adicionar algumas nuvens para a nossa noite! Faça download dos brushes redheadstock’s Clouds II. Em seguida, selecione o brush número 2464 e defina o seu tamanho para 960px (tamanho correspondente a largura principal do nosso layout). Defina a cor de primeiro plano para # 234B7F e cole uma única nuvem em uma nova camada chamada “cloud1″. Para manter as camadas organizadas, estou colocando as nuvens em uma pasta separada dentro da pasta “background”. Agora, estique um pouco a altura do “cloud1″.
Passo 13
Na sequência, utilize as ferramentas Dodge e Burn um pouco na nuvem. Observe que eu estou iluminando as áreas próximas a logo e a estrela e escurecendo a parte inferior da nuvem. Além disso, altere a opacidade do “cloud1″ para 50%.
Passo 14
Adicionar mais uma nuvem em uma nova camada chamada “Cloud2″. Você pode usar qualquer nuvem que quiser, mas use essa cor #5F83A5 na nuvem em um primeiro plano. Use um pouco a ferramenta Dodge na parte inferior da nuvem para melhorar a sensação de iluminação.
Passo 15
Repita a etapa anterior, mas desta vez usando um outro brush com esta cor: # 36638C e coloque-o acima do ‘cloud1″. Redimensione, e em seguida, use a ferramenta Dodge e/ou Burn na nuvem, se necessário.
Passo 16
Selecione uma borracha macia e delete uma boa parte do lado inferior da camada “cloud1″ para criar um efeito de esmaecimento ou fade out.
Passo 17
Este é realmente um passo crítico, vamos acrescentar o fundo do conteúdo principal, você nunca deve esquecer que você está projetando para a web. Utilizando a ferramenta retângulo, desenhe um retângulo do tipo vetor com a cor (# 0A1D37) em uma nova camada, abaixo de todas as pastas, contanto que fique acima do background. Em seguida, selecione a camada de retângulo e vá para Layer> Layer Mask> Reveal all … e elabore um gradiente do branco para o preto, o que acrescenta um efeito muito bonito na parte superior do retângulo. Por último, adicione uma guia abaixo do efeito de fade in do retângulo, que vai nos ajudar para colocar este projeto em HTML + CSS. Observe, que abaixo desta guia, a cor do fundo deverá ser liso.
Passo 18
Agora adicione outro retângulo, mas desta vez como plano de fundo da barra lateral, mais uma vez coloque guias para te ajudar, e use a cor # 091525. Em seguida, aplique a esse novo retângulo uma Máscara “Layer Mask” do mesmo jeito que fizemos antes na etapa anterior.
Passo 19
Agora, temos a base do plano de fundo do cabeçalho. Agora é hora de acrescentar alguns detalhes. Vou colocar um ícone de RSS exclusivo no cabeçalho. Copie esta imagem da lua cheia e colá-lo em uma nova camada chamada “moom-rss(lua-de RSS)”. Em seguida, ajuste os valores de Hue/Saturation (Matiz/Saturação) para fazer a lua um pouco mais amarelada, e adicione alguns filtros como Outer Glow (veja os valores mostrados abaixo).
Passo 20
Adicionar uma pequena nuvem com a cor # 7997B3 em uma nova camada acima da lua. Em seguida, usando uma borracha grande e macia, apague algumas áreas da nuvem.
Passo 21
Adicione uma forma clássica de RSS (# DCA30B) em uma nova camada na frente de “lua” mas por trás da “nuvem” da camada. Em seguida, aplique a ele os filtros abaixo (um Gradiente Overlay, um Outer Glow e Drop Shadow). Finalmente, adicione uma estrela em algum lugar sobre o formato RSS (ver Passo 10).
Passo 22
Baixee cole essa imagem em uma nova camada. Vamos usá-lo como plano de fundo para a nossa barra de navegação(menu). Como a imagem original é um pouco pequena, precisamos torná-la mais larga. Selecione a metade esquerda do pergaminho e use a ferramenta Move (Free Transform) e coloque-a um pouco mais à esquerda, então selecione novamente uma parte de dentro do pergaminho e usando o (Free Trasform) aumenta a escala lateral até se encaixar a outra metade. Após aumentar o pergaminho use um pouco a ferramenta Warp para fazer uma pequena ondulação.
Passo 23
Ainda no pergaminho use a ferramenta “Dodge” em algumas áreas para aumentar as sombras e melhorar a ilusão da curvatura e de envelhecimento.
Passo 24
Para melhorar a textura do pergaminho, aplique um filtro “Gradient Overlay” (#045F96 e #FBF4BD) e um “Pattern Overlay” também como nas figuras abaixo.
Passo 25
Agora adicione uma sombra para o pergaminho. Você pode usar o filtro Drop Shadow ou fazer o que eu fiz, duplicar a camada do pergaminho e em Hue/Saturation ajustar a iluminação para -100, depois usar um pouco o Blur na cópia em preto e distorcê-lo com a ferramenta Free Transform para torná-lo irregular.
Passo 26
Em seguida, adicione uma nuvem sobre o pergaminho, use “Dodge”, “Burn” e exclua algumas partes como no Passo 15. Em seguida, adicione o texto dos links das páginas usando a fonte em itálico “Geórgia”. Use a cor # 0B1827 para os links, e a cor #211808 para o link quando passar o mouse (mouse over). Além disso, adicione alguns detalhes adicionais como as estrelas no fundo e uma linha como o efeito hover. Você pode ver a estrutura de camadas “na parte inferior da imagem abaixo.
Passo 27
Crie uma nova camada acima do pergaminho e usando um brush em forma de partículas, desenhe uma linha como se fosse uma pintura em aquarela (veja a imagem abaixo). Faça isso mais algumas vezes, mas com cores diferentes. Após isso, deixe barra de estrelas com Opacidade de 40%.
Passo 28
Passo 29
Vamos colocar um balão bem bonito como um detalhe adicional. Extraia o balão do fundo e coloque-o em algum lugar abaixo do logotipo, adicione ao layer do balão um Color Overlay(sobreposição de cor) com cor (# 1F416E – Blending Mode: Overlay) afim de combinar as cores da cena. Além disso, você pode queimar um pouco com a ferramenta “Burn” o lado esquerdo do balão.
Passo 30
Em seguida use o pincel 615 com o brush “campo de estrelas” (veja o Passo 
e adicione mais estrelas acima do balão e do pergaminho. Adicione também uma corda para o balão pintando uma linha branca curva com um brush de 3 px sólido. Além disso, use o Eraser(Borracha) aqui e ali, para reduzir a quantidade de estrelas.
Passo 31
Está na hora de adicionar um post. Primeiro, adicione o título e a data e hora em uma nova camada chamada “Post”. Veja a imagem abaixo para visualizar os valores de caracteres. Além disso, estou adicionando uma pequena estrela perto da data e hora como um detalhe visual.
Passo 32
Vamos acrescentar mais informações na pasta “Post”, desde que a lista na página inicial irá ter um preview de vários post. Adicione uma imagem à esquerda (200 px por 200 px com um efeito de Stroke 1px) e um breve texto à direita. Além disso, vamos adicionar um preview de quantidade de comentários do post no canto superior direito. Para o campo de comentários, crie uma nova pasta chamada “Comentários” e acrescente uma pequena nuvem de background do comentário e algumas pequenas estrelas. Basicamente, basta repetir uma das etapas anteriores, quando estávamos criando o cabeçalho, mas em uma escala menor. Em seguida, adicione o número de comentários e abaixo a palavra Comentários. Em seguida, adicione uma linha de Tags abaixo do post e adicionar uma pequena estrela à direita desta. Adicione um pequeno campo de estrelas no fundo do post, só se você quiser. Finalmente, desenhe uma linha divisora (#1D324F) para o post utilizando a ferramenta de linha. Então duplique a pasta “Post” e edite a cópia para criar dois ou três posts diferentes. É muito provável que a altura do seu documento precise ser aumentado, então basta ir em Image> Canvas size, como fizemos na Etapa 1. Quando você tiver redimensionado o documento principal, aumente a altura de ambos, background principal e de fundo da barra lateral também.
Passo 33
Vamos trabalhar agora na barra lateral. Nós vamos adicionar o formulário de busca. Crie uma nova pasta chamada “Sidebar” e dentro dela crie outra pasta com o nome “Search”. Desenhe uma nuvem dentro desta pasta e use a ferramenta “Dodge e blur” para torná-lo parecido com a imagem abaixo. Em seguida, usando a ferramenta Rounded Rectangle (retângulo com cantos arrredondados), desenhe um retângulo sobre a nuvem. Aplique um efeito Stroke 1px Inside (# 697372) para o retângulo e altere seu valor de preenchimento para 50%.
Passo 34
Adicione algumas estrelas brancas acima da camada de nuvens utilizando qualquer camada com campo de estrelas, e lembre-se de apagar todas as estrelas extras. Então duplique, reduza e Edite o balão do passo 29 e espelhe com Flip horizontal. Coloque-o na pasta “Search”. Além disso, adicione o título usando a fonte Geórgia Itálico com amarelo ouro (D5A934 #). Em seguida adicione as instruções para busca e o botão “Go!”. Você pode ver os valores dos caracteres na figura abaixo. Como detalhe final elabore uma única estrela brilhante por trás do texto.
Passo 35
Adicione o texto de conteúdo na coluna ou barra lateral, títulos, links e coloque cada seção em uma pasta separada. Além disso, crie um fundo suave de campo de estrelas em cada pasta e uma estrela brilhante por trás de cada título. Adicione também uma estrela brilhante como com efeito mouse over em qualquer link. Não se esqueça, das guias para as margens e respiro.
Passo 36
Estamos chegando ao fim. Vamos adicionar um rodapé para a barra lateral. Primeiro, faça com que a base da barra lateral suma um pouco com transparência ou fade out, faça isso com uma máscara e um brush suave no layer que contém a barra lateral. Em seguida desenhe algumas nuvens, e use a ferramenta Dodge e Burn. Certifique-se de que as nuvens não invadam o fundo do conteúdo principal ou exceda a largura da barra lateral. Em seguida, adicione um campo branco de estrelas por detrás das nuvens e duplique o balão mais uma vez. Eu estou guardando tudo isso em uma pasta chamada “Barra lateral Rodapé”.
Passo 37
Passo 38
Conclusão
Espero que você tenha achado útil este tutorial. Este Tutorial foi extraído do site http://psd.tutsplus.com e traduzido por mim para o português afim de facilitar o seu entendimento. Somente membros plus cadastrados neste site poderão baixar o psd deste tutorial e modificá-lo.
Até a próxima!!!
No related posts.
