neste tutorial de Web design do Photoshop, vamos projetar um layout de site smashing, limpo e profissional no Photoshop. O layout que estamos fazendo neste tutorial pode ser usado como design de site pessoal ou Corporativo. Este design é bastante fácil de usar, por isso deve ser ótimo para a reputação do seu site.
atualização: Esta é a primeira parte de uma série de duas partes que ensinará como criar o layout no Photoshop e, em seguida, como convertê-lo em um web design HTML compatível com padrões (x).
a série “web Design limpo e profissional”
- Parte 1: Crie um Web Design limpo e profissional no Photoshop
- Parte 2: codificando um web Design limpo e profissional
visualização Final
dê uma olhada no layout que estaremos criando neste tutorial. Você pode ver a visualização final da imagem abaixo ou clique aqui para uma versão em tamanho real. 
Prepare seu documento do Photoshop
1 Crie um novo documento no Photoshop (Ctrl/Cmd + N) Usando as configurações da imagem a seguir.
defina as configurações de unidades e réguas
2 Certifique-se de que você está trabalhando em unidades de pixel, que é a unidade fixa padrão para web design.
configure as seguintes configurações para suas réguas na janela de diálogo Preferências (Ctrl/Cmd + K); clique em unidades & réguas e verifique se você tem tudo definido como mostrado na figura abaixo. 
adicione guias para designar a área de conteúdo
3 Ative as réguas do Photoshop na visualização > réguas.
Alterne a visibilidade das réguas pressionando “Ctrl / Cmd + R”.
também abra o painel de Informações da janela > Info (tecla de atalho: F8).
o painel de Informações fornece informações úteis dependendo da ferramenta selecionada.
pressionando “M”, escolha a Ferramenta de marquise retangular e crie uma caixa com 120px de largura no canto esquerdo da tela. Você pode ajustar o tamanho olhando para o painel de informações ao fazer a seleção.
agora clique na régua esquerda e arraste um guia para a direita da seleção de marquise, conforme mostrado na imagem abaixo. 
4 mova esta seleção na borda direita da tela. Atribua outro guia ao lado esquerdo da seleção.
sua tela agora deve ser assim: 
criando o logotipo
5 Agora vamos criar o logotipo para o nosso site.
o logotipo será muito simples e terá um efeito de gradiente de cor. Crie um novo grupo (camada > novo > grupo) e nomeie-o como “logotipo”.
6 Selecione a Ferramenta de tipo Horizontal (T) e digite “SMASHING” (ou o nome do seu site) em letras maiúsculas.
7 em seguida, no painel de caracteres, defina a fonte para Arial, o estilo para negrito e o tamanho para 42pt. Defina também a opção método anti-aliasing para Sharp e use a cor # 101112.
você também pode definir essas opções na barra de opções quando a ferramenta tipo é a ferramenta ativa. 
8 Clique duas vezes para abrir a caixa de diálogo Estilo de camada. Selecione sobreposição de gradiente, clique no editor de gradiente e use as configurações conforme mostrado abaixo.
9 Coloque a camada do tipo “SMASHING” à distância de 35px da parte superior e 0px da guia esquerda. Você pode fazer isso com precisão usando a ferramenta Mover (V) e as teclas de seta. Duplique esta camada de tipo (camada > camada duplicada).
mova a camada duplicada ao lado da palavra ” esmagamento “e edite o texto para”Dzine”. Repita as etapas 6, 7, 8, mas use cores gradientes diferentes (parada da cor esquerda: #b27625, parada da cor direita: #e5ad27) para a palavra “Dzine”.
10 selecione a ferramenta Tipo Horizontal (T) e adicione uma linha de tag sob o logotipo com as seguintes configurações. 
11 O logotipo final deve se parecer com a imagem abaixo.
para ativar/desativar os guias, vá para exibir > Mostrar > grade ou use o atalho Ctrl / Cmd + ; 
criando a barra de navegação
12 crie um novo grupo e nomeie-o como “navegação”, ele deve estar acima do grupo “logotipo”. Arraste um guia da régua superior, 150px abaixo da borda superior da tela. Selecione a ferramenta Retângulo (U) e desenhe uma linha horizontal de 4PX de altura com uma cor de #e3ab27, na tela.
13 adicione links de navegação a 12px-alta desta linha horizontal e 20px à direita da guia esquerda.
selecione a ferramenta Retângulo arredondado (U) e desenhe uma caixa com o tamanho de 72px por 35px. Mova esta camada abaixo dos links de texto e nomeie a camada “pairar”.
endireite os cantos arredondados inferiores com a ferramenta Converter Point. Mova os lados das bordas irregulares abaixo com uma margem de 8px para tornar as bordas iguais a outras bordas internas na parte inferior.Clique duas vezes na camada” hover ” para abrir a caixa de diálogo Estilo camada e adicionar cores de gradiente (parada de cor esquerda: #e5ad27, parada de cor direita: #b27625). Selecione a ferramenta Tipo Horizontal (T), selecione o texto, “Home” e altere a cor para #ffffff (branco). 
criando a seção “ligue para nós”
14 em seguida, vamos criar a seção “ligue para nós” no canto superior direito do nosso design (exatamente do lado oposto do logotipo).
Baixe este ícone do telefone e coloque-o perto do guia certo. Nomeie esta camada “ícone do telefone”. Selecione a ferramenta Tipo Horizontal (T).
adicione um número de telefone à esquerda do ícone do telefone usando a fonte Arial, com o tamanho definido em 20pt e a cor #292929.
adicione algum texto relacionado abaixo do número de telefone usando font Arial, definido em negrito, com um tamanho de 11pt e uma cor de #595959. 
criando o cabeçalho
15 Agora vamos a um criar a seção de cabeçalho. Crie um novo grupo e nomeie-o como “cabeçalho”.
16 selecione a ferramenta Retângulo (U) e crie uma forma de retângulo com o tamanho de 1200px por 440px.
coloque este retângulo a uma distância de 1px abaixo da barra de navegação e nomeie esta camada “cabeçalho bg”. Clique duas vezes na camada “cabeçalho bg”, selecione o estilo da camada de sobreposição de gradiente e tenha essas duas cores no editor de gradiente (parada de cor esquerda: #2e2226, parada de cor direita: #7a7556).
veja a imagem abaixo para a posição do retângulo e os detalhes das cores. 
17 crie outro retângulo a partir da ferramenta Retângulo (U) com o tamanho de 960px por 360px.
coloque este retângulo à distância de 40px da parte superior da camada “header bg” e 0px da guia esquerda. Nomeie esta camada “contêiner de cabeçalho”. Visualize abaixo o que fizemos até agora com o design.
criando a seção “projeto em destaque”
18 em seguida, criaremos a seção projeto em destaque. Crie um novo grupo dentro do grupo de cabeçalho e nomeie-o “fp”. Selecione a ferramenta Retângulo (U) e crie um retângulo com o tamanho de 630px por 340px à distância de 10px da parte superior e à esquerda do contêiner de cabeçalho.
dê a esta cor da camada de #000000 e nomeie-a como “contêiner fp”. 
19 Abra uma imagem no Photoshop para colocar aqui como seu projeto em destaque. Vá para selecionar > todos (Ctrl / Cmd + A) e edite > copiar (Ctrl/Cmd + C).
volte para o nosso Web design.
crie uma nova camada acima da camada “FP container” e vá para editar > Colar (Ctrl/Cmd + V) para colar na imagem do projeto em destaque. Renomeie esta camada para”imagem fp”. Clique com o botão direito do mouse na camada “imagem fp” e selecione Criar Máscara de recorte.
agora a imagem é visível apenas dentro do retângulo (“FP container”).
faça ajustes para que a imagem do projeto em destaque seja semelhante à mostrada abaixo. 
20 vá para editar > transformar > escala (Ctrl/Cmd + T). Na barra de Opções, clique na caixa de rotação e digite -4 e pressione enter duas vezes para ajustar o ângulo.
permaneça na mesma camada (“imagem fp”) e selecione luminosidade como o modo de mesclagem dessa camada. 
21 em seguida, vamos criar a barra de Título e descrição para a imagem do projeto em destaque. Selecione a ferramenta Retângulo (U) e crie uma forma de retângulo com o tamanho de 630px por 90px usando a cor #161718.
altere a opacidade desta camada para 90% e nomeie-a como “título bg”. Coloque este retângulo como mostrado na imagem abaixo. 
22 crie outro retângulo com o tamanho de 630px por 1px usando a cor # 9c9c9c e nomeie-o como “linha horizontal de título”.
coloque este retângulo na borda superior do conteúdo da camada “título bg”.
23 adicione um título e uma descrição dentro do retângulo que criamos na etapa 21, usando as seguintes configurações para título e descrição.
Para o título:
- tipo de letra: Arial color: #ffffff, tamanho: 25pt e anti-aliasing opção de método: Sharp
Para a descrição:
- tipo de letra: Arial, cor: #a4a4a4, tamanho: 12 pt e com anti-aliasing opção de método de: Nenhum
criando a seção “cotação rápida”
24 crie outro grupo dentro do grupo de cabeçalho e nomeie-o como “cotação rápida”. Selecione a ferramenta Retângulo (U) e crie um retângulo com o tamanho de 300px por 340px. Coloque este retângulo à distância de 10px à direita da seção do projeto em destaque e nomeie-o como “contêiner qq”.
25 copiaremos um estilo de camada de outra camada que criamos em uma etapa anterior.
vá para dentro do grupo “navegação”, clique com o botão direito do mouse na camada” pairar”, selecione Copiar estilo da camada, volte para a camada” QQ container”, clique com o botão direito e selecione Colar Estilo da camada. Temos o mesmo estilo de camada da camada “hover” para nosso “contêiner qq” agora. 
26 selecione a ferramenta Tipo Horizontal (T).
escreva “cotação rápida” dentro de “QQ container” à distância de 20px das bordas superior e esquerda da caixa que contém. Defina a família de fontes como Trebuchet MS (ou uma fonte segura para a web de sua preferência) com a cor branca (#ffffff) e a opção de método anti-aliasing definida como Sharp. Vamos usar a ferramenta Retângulo arredondado (U) para criar três campos de formulário.
selecione a ferramenta Retângulo arredondado (U) e defina o raio para 3px. Em seguida, crie dois retângulos arredondados com o tamanho 260px por 35px usando a cor branca (#ffffff). Em seguida, nomeie as camadas de forma como “field1” e “field2”, respectivamente.
Crie o terceiro retângulo arredondado com o tamanho de 260px por 75px usando uma cor branca (#ffffff) e nomeie-o como “field3”. Selecione a ferramenta Tipo Horizontal (T) e crie rótulos para cada campo de formulário. 
27 selecione a ferramenta Retângulo arredondado (U) e crie uma caixa de 80px por 35px e nomeie-a como “enviar btn”.Clique duas vezes na camada para abrir a janela de diálogo Estilos de camada e marque a caixa de seleção sobreposição de gradiente da esquerda.
clique no editor de gradiente e altere as cores do gradiente conforme mostrado abaixo. 
29 selecione a Ferramenta de tipo Horizontal (T) e digite “enviar” usando a fonte Arial, estilo negrito e tamanho a 13pt. Selecione ambas as camadas no painel Camadas (“enviar btn” e “enviar texto”).
30 escolha a ferramenta Mover (V) no painel Ferramentas e clique em alinhar centros verticais e alinhar centros horizontais na barra de Opções.
(Alternativamente, você pode obter o mesmo resultado indo para a camada > alinhar > centros verticais e camada > alinhar > centros Horizontais). 
criando a área de conteúdo principal
31 crie um novo grupo e nomeie-o como “conteúdo”. Selecione a ferramenta Retângulo (U).
crie um retângulo de 300px por 175px e nomeie-o “c01”. Coloque esta camada 30px abaixo do cabeçalho e 0px da guia esquerda. Clique duas vezes na camada e use as configurações da imagem a seguir.
32 vamos adicionar conteúdo a esta caixa agora. Selecione a ferramenta Tipo Horizontal (T) e adicione o texto, “sobre SmashingDzine”. Faça uma seleção da palavra “sobre” usando a Ferramenta de tipo Horizontal (T) e altere sua cor para #b47825.
em seguida, faça uma seleção da palavra “Smashing” e altere a cor para #2f2f2f. adicione uma pequena descrição e um texto de link abaixo do título. As seguintes opções foram usadas para o título, descrição e texto do link.
(você pode ajustar essas opções conforme necessário). 
Para o Título:
- Font: Trebuchet MS, estilo: Normal, tamanho: 24pt, anti-aliasing método: Sharp
Para a Descrição:
- tipo de Letra: Arial, estilo: Normal, tamanho: 12 pt, anti-aliasing método: Nenhum, cor: #767676
Para o texto do Link:
- tipo de Letra: Arial, estilo: Negrito, tamanho: 13pt, anti-aliasing método: Nenhum, cor: #252525, Sublinhado
33 Vamos adicionar uma caixa quadrada avançar para a descrição de agora. Selecione a ferramenta Retângulo (U) e cor #ffffff, mantenha pressionada a tecla Shift para manter as proporções e criar um quadrado com o tamanho 88px por 88px. Mova este quadrado a uma distância de 10px da esquerda do retângulo (“c01”).
nomeie esta camada “borda”. Clique duas vezes na camada para abrir a janela de diálogo Estilo de Camada, e adicionar um acidente vascular cerebral estilo de camada com as seguintes configurações: 
34 Criar outra caixa com o tamanho do 82px por 82px e coloque-a no centro da “borda” da camada. Nomeie esta camada “caixa” e altere a cor deste quadrado para #d5d5d5.
Selecione Todas as camadas neste grupo (grupo “conteúdo”), vá para camada > novo > grupo de camadas (Ctrl/Cmd + G) e renomeie este novo grupo”sobre”. 
Nota: A caixa quadrada cinzenta interna é um suporte do lugar para uma imagem e pode ser substituída com toda a imagem de sua escolha.
35 duplique o grupo “sobre” (Clique com o botão direito do mouse no grupo e selecione Duplicar grupo) e nomeie-o como “serviços”. Clique com o botão direito do mouse no Grupo “serviços” e selecione Duplicar Grupo novamente e nomeie-o “portfólio”.
temos três grupos agora (“sobre”, “serviços” e “portfólio”). Mova o último grupo (“portfólio”) para o guia certo, conforme mostrado abaixo. 
36 Selecione Todos os três grupos no painel Camadas e, em seguida, vá para a camada > distribuir > centros horizontais para espaçá-los igualmente.
Clique aqui para ver a imagem em tamanho real da imagem a seguir. 
37 altere os títulos do grupo ” Serviços “(centro) e do grupo” portfólio ” (à direita), conforme mostrado abaixo. (Você pode alterar esses títulos de acordo com sua exigência.) 
criando o rodapé
38 crie um novo grupo e nomeie-o como “rodapé”.
selecione a ferramenta Retângulo (U) e crie um retângulo com o tamanho de 1200px por 100px na parte inferior do nosso layout de design. Nomeie esta camada “rodapé bg”. Use o mesmo estilo de sobreposição de gradiente que a camada “header bg” clicando com o botão direito do mouse na camada “header bg” e escolhendo Copy Layer Style.
volte para o grupo de rodapé, clique com o botão direito do mouse na camada “rodapé bg” e selecione Colar Estilo da camada. 
39selecione a Ferramenta de tipo Horizontal (T) e adicione texto de direitos autorais e links de rodapé texto à esquerda usando a fonte Arial, tamanho de 12pt e uma cor cinza (#ddddd). 
40 vamos adicionar a seção de assinatura de E-mail à direita.
crie um novo grupo dentro do grupo” rodapé “e nomeie-o como”inscrever-se”. Selecione a ferramenta Retângulo arredondado (U) e crie um retângulo de 85px por 35px. Nomeie esta camada “assinar btn”.
41 repita a Etapa 26 para adicionar os campos e rótulos do formulário.
42 selecione a Ferramenta de tipo Horizontal (T) e digite “inscrever-se” usando a fonte Arial, estilo definido como negrito e tamanho a 13pt.
selecione ambas as camadas (“subscribe btn” e “Subscribe text”).
43 repita a Etapa 28 para criar o botão Inscrever-se.
44 selecione a ferramenta Retângulo arredondado (U) e defina o raio para 3px. Crie um retângulo arredondado com o tamanho 210px por 35px usando uma cor branca (#ffffff) e nomeie essa camada de forma como “campo de E-mail”. Adicione uma linha de texto acima de”campo de E-mail”.
resultado Final
OK, é isso e estamos prontos. Aqui está o resultado final.
clique na imagem abaixo para ver o layout em tamanho real. Obrigado por acompanhar o meu tutorial. Espero que todos tenham gostado e aprendido algo novo com este tutorial.
por favor, deixe seus comentários abaixo e compartilhe seus pensamentos e opiniões, eu adoraria ouvi-los. Você também pode compartilhar este tutorial de design com seus amigos se achar que pode ser útil para eles!
baixe o arquivo de origem
você pode baixar o arquivo Photoshop (PSD) deste tutorial no link abaixo como um arquivo ZIP.
- clean-professional-weblayout (ZIP, 2.4 MB)
Sumário
se você decidir usar esse design, otimize as imagens para reduzir o tempo de carregamento. Esta decisão deve ser ótima para sites pequenos, como um para um campo de golfe, porque é simples, fácil de usar e amigável.
conteúdo relacionado
- como criar um design de Blog limpo com Photoshop
- codificando uma Web limpa 2.0 Style Web Design do Photoshop
- crie um Layout da Web elegante e minimalista no Photoshop
sobre o autor
Waheed Akhtar é um web designer freelancer de Dubai, Emirados Árabes Unidos. Ele é o fundador e editor da Boost Inspiration, onde apresenta diferentes recursos criativos de Arte Digital, Design Gráfico, ilustração, fotografia e tipografia para inspiração. Você pode contatá-lo via Twitter ou Facebook.