7 days of PS Actions, graphics, templates & fonts - for free! Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Design & Illustration
  2. Interface Design

Crie um Web Design com Tema de Noite Mágica do Zero no Photoshop

Read Time: 14 mins

Portuguese (Português) translation by Ingrid Fornazari (you can also view the original English article)

Os últimos dias eu estive procurando inspiração em antigas pinturas famosas, e eu me interessei pela Noite Estrelada de Van Gogh e pensei: Posso aplicar isso ao web design? E a resposta é Sim! Então após várias horas de trabalho, aqui está meu tutorial para você, um web design artístico retratando o conceito de "Noite Mágica."


Passo 1

Que o design comece! Primeiro de tudo, esse não é um tutorial básico, então eu vou pular algumas explicações básicas. De qualquer modo, qualquer um com um nível intermediário, avançado de habilidade em Photoshop vai ser capaz de fazer isso. Segundo, é realmente difícil obter exatamente o mesmo resultado que eu consegui, e você deve usar a imaginação e o bom senso para conseguir algo semelhante ou melhor que meu design. E terceiro, isso foi desenvolvido considerando a aplicação em um modelo Wordpress, mas você pode rapidamente converter isso em tema para outra engine, ou mesmo personalizar um website.

Seguindo adiante então! Crie um novo documento de 960 pixels por 1000 pixels em RGB. Desenhe algumas guias para marcar os limites e vá até Imagem > Tela > Tamanho para redimensionar o documento e deixar a tela maior (1460 x 1000 px). Desse modo você terá seu design centrado em um grande documento e verá como fica em resoluções widescreen. Também, desenhe a guia para marcar a altura do cabeçalho.


Passo 2

Desenhe uma linha horizontal no meio do documento e use para preencher a camada de "Plano de Fundo" Eu também acrescentei algumas guias como limites do preenchimento da página principal na direita e na esquerda.

É bem possível que nós mudemos a altura do documento mais tarde, então adicione uma Nova Camada de Preenchimento (#010D1F) abaixo da nossa camada de Plano de Fundo.


Passo 3

Uma vez que um dos leitores do Psdtuts+ sugeriu usar imagens reais ao invés do clássico filtro Nuvens, nós vamos tentar isso dessa vez. Cole essa figura de algumas nuvens de tempestade em uma nova camada chamada "Clouds" (Nuvens) e troque o Modo de Mesclagem para Sobrepor. Então vá até Camada > Camada  de Máscara > Ocultar tudo, e desenhe um Gradiente Radial do branco para o preto (#FFFFFF - #000000) que vai do metade de cima até quase a metade inferior. Então ajuste os Níveis da "Clouds" um pouco para deixas as nuvens escuras.


Passo 4

Agora cole esse esse lindo horizonte de uma praia espanhol em uma nova camada chamada "skyline" (horizonte). Então crie uma nova Camada de Ajuste > Misturador de Canais... e selecione Preto & Branco com o Filtro Azul (RGB). Então aplique esse efeito apenas a camada "skyline" na paleta de camadas, segure a tecla Opções e clique entre a camada Misturador de Canais e a camada "skyline". Finalmente, altere o Modo de Mesclagem da camada "skyline" para Sobrepor.


Passo 5

Aplicar uma Máscara de Camada  > Mostrar Tudo a camada "skyline". Então usando um grande e macio Pincel preto (#000000) esconda as bordas da imagem, depois, selecione um pincel Grunge ( Eu estou usando este conjunto de Pincéis Grunge por Kelzky13, especialmente os pincéis 250 e 181) e deixar as bordas um pouco mais irregulares.


Passo 6

A seguir digite o título "Magic" (mágica) usando a fonte Scriptina. Depois aplique os estilos de camadas conforme mostrados abaixo: Brilho Externo (#9EB6D0) e uma Sobreposição de Gradiente (#70ABF6, #FFFFFF, #B4CBE7, para #FFFFFF). Também é uma boa hora para organizar seu design em desenvolvimento em pastas. Ponha todas as camadas dentro de uma nova pasta e nomeie como "Background" (plano de fundo) e o texto dentro de outra pasta chamada "Logo".


Passo 7

Agora nós adicionamos algumas estrelas ao nosso design, você pode usar qualquer conjunto de pincéis de estrelas:  pincéis Star field  por BL1nX. Então usando o pincel 550 do conjunto, pinte as estrela em branco (#FFFFFF)  em uma nova camada dentro da pasta nomeada como "Stars" (estrelas). Observe que eu estou colocando a estrela mais brilhante sobre o pingo do i. Então aplique uma sobreposição de gradiente usando as três cores (#3A8FEF, #FFFFFF, e #66C9FC)  na camada "Stars1" (estrelas 1).


Passo 8

A seguir, usando o pincel 615 do conjunto campo de estrelas, adicione mais estralas ao céu em uma nova camada chamada "Stars2" (estrelas 2), então com uma Borracha macia apague as estrelas sobre os prédios. Depois, adicione um Brilho Externo (#8AB2FF) a "Star2".


Passo 9

Adicione mais estralas a camada "Star2" por todo o design, então usando a Ferramenta Borracha, apague algumas áreas de estrelas. Finalmente aplique um efeito Sobreposição de Gradiente para a camada "Star2", usando quatro cores: #6AB1D1, #FFFFFF, #94CFED, e #FFFFFF.


Passo 10

Agora baixe esses Pincéis Star por jen-ni, e mantenha os pincéis a mão poque nós vamos usá-los várias vezes nesse tutorial. Selecione um pincel de 65 px (eu estou usando o número 148) e desenhe uma estrela branca (#FFFFFF) dentro de uma nova camada, bem acima do pingo do i. Então aplique Brilho Externo (#00BCF9) à estrela para deixá-la mais brilhante.


Passo 11

Duplique o texto "Magic", selecione o texto e digite a palavra "Night" (noite) no lugar. Depis, configure o Brilho Externo em branco (#FFFFFF) e a sobreposição de Gradiente para três cores  (#F9DA5B, #FEAE00, e #FFD403), veja a imagem abaixo para conferir os valores dos filtros.


Passo 12

Vamos adicionar algumas nuvens a nossa noite! Baixe os pincéis redheadstock's Clouds II. A seguir, selecione o pincel número 2464 e configure o tamanho para 960 px (combinando a largura do layout do design principal. Configure a cor de primeiro plano para #234B7F e cole uma única nuvem em uma nova camada chamada "cloud1" (nuvem1). Para manter as camadas organizadas, eu estou colocando as nuvens em uma pasta separada dentro da pasta "Backgroud" (Plano de Fundo). Agora diminua a altura da "cloud1" um pouco.


Passo 13

Prosseguindo, aplique um pouco de Superexposição e Subexposição a nuvem. Observe que eu estou clareando as áreas próximas a estrela do logotipo e escurecendo o fundo das nuvens. Também alterei a Opacidade para 50% da "cloud1".


Passo 14

Adicione mais uma nuvem dentro de uma nova camada chamada "cloud2" (nuvem2). Você pode usar qualquer nuvem que gostar, mas use essa cor como primeiro plano: #5F83A5. Aplique Subexposição a parte inferior da nuvem um pouco para aumentar a sensação de luminosidade.


Passo 15

Repita o passo anterior, mas dessa vez use outro pincel com essa cor: #36638C e posicione acima da "cloud1". Redimensione isso, então aplique Superexposição ou Subexposição se necessário.


Passo 16

Selecione uma Borracha grande e macia  apague o fundo da "cloud1" para criar um efeito de desaparecer gradualmente.


Passo 17

Esse é na verdade um passo crítico, nós vamos adicionar o recipiente principal do plano de fundo, você não deve nunca se esquecer que você está desenvolvendo para web. Usando uma Ferramenta Retângulo desenhe um retângulo vetorial (#0A1D37) em uma camada bem abaixo da pasta "Clouds" (nuvens). Observe que meu retângulo está dentro das Guias de preenchimento. então selecione a camada do retângulo e vá até Camada > Máscara de Camada  > Mostrar tudo... e desenhe um gradiente do branco para o preto, que acrescenta um lindo efeito ao topo do retângulo. Finalmente, coloque uma guia abaixo do retângulo que desbota, que vai nos ajudar quando nós transformarmos esse design em HTML + CSS. Observe que, da guia até o final do plano de fundo a cor deve ser plana.


Passo 18

Agora adicione outro retângulo mas dessa vez como plano de fundo da Barra Lateral, novamente ajude a você mesmo com uma Guia, e use a cor #091525. Então, aplique ao novo retângulo uma Máscara de Camada  com apenas um pouco, como no passo anterior.


Passo 19

Nesse ponto, nós temos o Plano de Fundo básico do cabeçalho pronto. Agora é hora de alguns detalhes. Eu vou colocar um ícone RSS único no cabeçalho. Copiar essa figura de uma lua cheia e colar em uma nova camada chamada "moon-rss" (lua-rss). Então ajuste os valores de Matiz/Saturação para deixar a lua um pouco mais amarelada, e acrescente os dois filtros, Brilho Interno e Externo (Inner e Outer Glow) (veja os valores mostrados abaixo).


Passo 20

Adicione uma pequena forma de nuvem com a cor #7997B3 em uma nova camada acima da lua na paleta de camadas. Então usando uma borracha macia grande, apague algumas áreas ao redor da nuvem.


Passo 21

Adicione a forma clássica do RSS (#DCA30B) em uma nova camada na frente da camada "moon" mas atrás da camada "cloud"(nuvem). Então, aplique um pouco de filtros como mostrado abaixo (Sobreposição de Gradiente, um Brilho Externo e uma Sombra Projetada). Finalmente adicione uma estrela em algum lugar acima da forma RSS (veja passo 10).


Passo 22

Cole essa imagem em uma nova camada, nós vamos usá-la como plano de fundo da nossa barra de navegação das páginas principais. Uma vez que a imagem original está um pouco esticada, nós precisamos deixá-la mais larga, eu mexi com as duas seleções e a Ferramenta Mover (Transformação Livre) para aumentar a largura do pergaminho. Então  Distorcer o pergaminho apenas um pouco usando a Flag warp (bandeira de distorção).


Passo 23

Subexponha algumas áreas do pergaminho para aumentar as sobras e melhorar a ilusão de distorção.


Passo 24

Para melhorar a textura do pergaminho, aplique um filtro de Sobreposição de Gradiente (#045F96 and #FBF4BD) e uma Sobreposição de Padrão também.


Passo 25

Agora adicione uma Sombra Projetada ao pergaminho. Você pode usar o filtro de Sombra Projetada ou fazer o que eu fiz, duplicar a camada do pergaminho, e ajustar no  Matiz/Saturação a clareamento para -100, Desfoque a cópia preta um pouco e distorça com a Ferramenta de Transformação Livre para deixa irregular.


Passo 26

A seguir, adicione uma nuvem sobre o pergaminho, Subexposição, Superexposição e apagar exatamente como no Passo 15. Então adicione os links de páginas usando a fonte Georgia - Itálica.  Use a cor #0B1827 para os links padrão, e a cor #211808  para o link suspenso. Também adicione alguns detalhes adicionais como estrelas no plano de fundo e uma linha como efeito suspenso. Você pode ver as estruturas das camadas no parte de baixo da imagem abaixo.


Passo 27

Como detalhe final da barra de navegação das páginas, crie uma nova camada acima do pergaminho e usando um pincel de partículas, desenhe uma linha como se fosse uma pintura em aquarela (veja a imagem abaixo). Faça isso mais algumas vezes usando cores diferentes. Também, diminua a Opacidade das "Estrelas" da barra de navegação abaixo de 40%.


Passo 28

Adicione o texto relacionado RSS. Eu estou usando Aria 10 px, com amarelo (#F2C90D) e branco (#FFFFFF). Não se esqueça de configurar o Método Anti-aliasing em Nenhum a maioria dos navegadores renderiza o teto sem qualquer anti-aliasing (IE7 e Safari são as exceções).


Passo 29

Como um detalhe adicional adicione essa figura de um lindo balão. Extraia o balão do seu plano de fundo e posicione-o em algum lugar abaixo do logo, adicione Sobreposição de Cor (#1F416E - Modo de Mesclagem: Sobrepor) a camada "Balloon" (Balão) para combinar com as cores da cena. Você também pode aplicar Superexposição ao lado esquerdo do balão apenas um pouco.


Passo 30

Depois, usando o pincel 615 dos pincéis campo de estrela (veja Passo 8) adicione mais estrelas acima do balão e do pergaminho. Eu também adicionei uma corda ao balão pintando uma linha branca curva com um pincel sólido de 3 px. Também usei uma Borracha aqui e lá para reduzir a quantidade de estrelas.


Passo 31

É hora de adicionar uma postagem. Primeiro adicione um título e a linha de metadado em uma nova camada chamada de "Post" (postagem). Veja a imagem abaixo para visualizar os valores de carácter. Eu também adicionei uma pequena estrela próximo ao metadado como um detalhe visual.


Passo 32

Vamos adicionar mais informações dentro da pasta "Post", uma vez que a lista da homepage terá uma visualização de várias postagens. Nós adicionamos uma imagem de pré visualização à esquerda (200 px por 200 px com efeito de traço de 1 px) e um breve texto à direita. Também nós adicionaremos uma visualização de quantos comentários tem a postagem no lado superior direito. Para o campo comentários, crie uma nova pasta e nomeie como "Comments" (comentários) e adicione um pequeno plano de fundo com uma pequena nuvem e algumas estrelas pequenas. Basicamente, repita um dos passos anteriores quando nós estávamos desenvolvendo o cabeçalho, mas em uma medida pequena. Então adicione os números de comentários e a palavra Comments (comentários) abaixo.

A seguir, adicione uma linha de Tags abaixo do post e adicione uma pequena estrela à direita daquela linha. Adicione um pequeno campo de estrelas como plano de fundo para a postagem, apenas se você quiser. Finalmente, desenhe um divisor (#1D324F) para a postagem usando a Ferramenta Linha.

Então duplique a pasta "Post" e edite as cópias para criar duas ou três postagens diferentes. É bem possível que a altura do seu documento precise ser aumentada nesse ponto, apenas faça isso usando a ferramenta Cortar ou Imagem > Tamanho da Tela, como no Passo 1. Quando você tiver redimensionado seu documento principal, aumente a altura de ambos o plano de fundo principal e o plano de fundo da barra lateral.


Passo 33

Vamos trabalhar na barra lateral agora. Nós vamos adicionar o formulário de Busca. Crie uma nova pasta e nomeie como "Sidebar" (barra lateral) e dentro dela crie outra pasta e nomeie como "Search" (busca). Desenhe uma nuvem dentro da pasta e aplique subexposição e superexposição para deixar ela parecendo com a seguinte imagem. Então usando a Ferramenta Retângulo Arredondado, desenhe um retângulo sobre a nuvem. Aplicar um efeito de Traço Interno de 1 px (#697372) ao retângulo e altere seu valor de Preenchimento para 50%.


Passo 34

Adicione algumas estrelas brancas acima da camada de nuvens usando qualquer camada de campo de estrelas, lembre-se de apagar as estrelas extras. Então duplique, reduza e Edite > Rotacionar horizontalmente a camada "balloon" (balão) do Passo 29. Ponha dentro da Pasta "Search". Também, adicione um pequeno texto usando a Georgia Itálico e uma linda cor amarela (#D5A934). A seguir adicione as instruções de busca e o botão "Ir!". Você também pode ver os valores de Caracteres na parte de baixo da seguinte imagem. Como um detalhe final desenhe uma única estrela brilhante atrás do texto.


Passo 35

Adicione o conteúdo da barra lateral, texto de conteúdo, links e ponha cada seção em uma pasta separada. Também, adicione um plano de fundo de campo de estrelas suave em cada pasta e uma estrela brilhante atrás de cada título. Além disso, adicione uma estrela brilhante como no exemplo do efeito suspenso em qualquer link. Não se esqueça das duas Guias, preenchimento e margem.


Passo 36

Nós estamos chegando ao fim. Vamos adicionar um rodapé para a barra lateral. Primeiro, desvaneça um pouco a parte de baixo do plano de fundo da barra lateral pintando com um pincel macio na camada de máscara dele. A seguir desenhe algumas nuvens e então aplique Subexposição e Subexposição a elas. Tenha certeza de que as nuvens não invadam o conteúdo principal ou excedam a largura da barra lateral. Então adicione um campo de estrelas branco atrás das nuvens e duplique o balão mais uma vez. Eu estou salvando todos esses itens em uma Pasta nomeada "Sidebar Footer" (rodapé da barra lateral).


Passo 37

Finalmente, nós vamos criar o rodapé. Primeiro na máscara de camada do plano de fundo do conteúdo principal, usando um pincel grande macio, esconda a parte inferior para fazê-la desaparecer gradualmente. Então selecione alguns pincéis de nuvens e pinte com eles através do fundo do design. Eu estou combinando um nuvens grandes azul escuras (#0B1C38) e pequenas nuvens azuis (#223E63), conforme mostra a imagem abaixo. Lembre-se que essas nuvens vão se tornar uma imagem de plano de fundo, então tente não cruzar a Guia entre conteúdo e rodapé. Além disso, lembre-se de colocar tudo relacionado ao rodapé em camadas dentro de uma nova pasta com nome "Footer" (rodapé).


Passo 38

Superexpor as nuvens mais claras. Então. pinte um campo de estrela branco usando o pincel 615 do conjunto de estrelas. Continuando, pinte um campo de estrelas mais brilhantes com um pincel diferente, nesse caso 656 do conjunto. Por último, apague o campo de estrelas com uma Borracha grande macia.


Conclusão

Espero que tenha achado esse tutorial útil. Membros Plus podem baixar o arquivo PDS e modificar o que quer que desejem, adicionar ou remover detalhes e criar seu próprio design estrelado.

.

Inscreva-se no RSS Feed do Psdtuts+ para os melhores Tutoriais Photoshop e artigos da web.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Design & Illustration tutorials. Never miss out on learning about the next big thing.
One subscription.
Unlimited Downloads.
Get unlimited downloads