Neste tutorial de design da web do Photoshop, você aprenderá passo a passo, como criar um layout impressionante e limpo da Web. Você estará usando algumas técnicas básicas para o nível intermediário para criar seu design elegante no estilo “Web 2.0”, que usa o sistema de grade 960. Esta é mais uma coisa em que você pode economizar dinheiro em seu design na web, pois os preços da web design varia de US $ 1000 a US $ 100.000! Este é um série de duas partes Isso ensinará como criar o layout no Photoshop e, em seguida, como convertê-lo em um design html compatível com padrões (x).
Resultado final
Clicar na imagem abaixo o levará à versão em grande escala do layout da Web que estaremos projetando neste tutorial.
Configurando o documento
1 Crie um novo documento no Photoshop com as dimensões 1200px x 1050px. 
Criando o fundo
2 Agora, estaremos criando o plano de fundo. Selecione a ferramenta de gradiente (G).
Verifique se está definido como Gradiente linear. Defina a cor do primeiro plano para #A1e8fe e cor de fundo #59D3FA e crie um gradiente como abaixo: 
Para o seu site, se você estiver tendo problemas para escolher uma cor, use um seletor de cores aleatório e teste para ver como ela fica! Mas tenha cuidado, muitas empresas, especialmente faculdades, têm cores que são as cores da marca, assim como sua pesquisa para lugares como faculdades e seu design na web.
Colocando o sistema de grade no documento
3 Em uma nova camada, crie um 960px grade larga – 12 bares, cada barra em 60px largo.
Coloque cada barra 20px Além um do outro. Coloque a grade no centro do documento. As grades devem servir como guia e é recomendável que os principais elementos do seu design não excedam a largura da grade.
O sistema de grade 960 é um esforço para otimizar o fluxo de trabalho de desenvolvimento da Web, fornecendo dimensões comumente usadas, com base em uma largura de 960 pixels. Vá para o Sistema de grade 960 Para mais informações, ou Baixe o sistema de grade aqui. 
Fazendo contêineres para os itens de logotipo e navegação
4 Agora criaremos os contêineres para o logotipo e os itens de navegação.
Para criar os contêineres, use a ferramenta de retângulo arredondada com camadas de forma selecionadas. Defina o raio para 10px. 
5 Crie um retângulo arredondado 300px largo.
Crie um segundo retângulo arredondado 620px largo; Eles devem estar situados na grade da seguinte forma: 
6 Aplique estas configurações de estilo de camada em cada retângulo arredondado: 
Seu retângulo arredondado agora deve ficar assim: 
Inserindo o logotipo e o texto de navegação
7 Para criar os itens de navegação, use a ferramenta de tipo
FAQ
1. Como criar o plano de fundo do layout da web?
Para criar o plano de fundo, selecione a ferramenta de gradiente no Photoshop e defina as cores #A1e8fe e #59D3FA para criar um gradiente linear.
2. Como colocar o sistema de grade no documento?
Crie uma grade de 960px de largura com 12 barras, cada uma com 60px de largura e espaçadas 20px entre si. Posicione a grade no centro do documento para servir como guia.
3. Como criar os contêineres para o logotipo e os itens de navegação?
Use a ferramenta de retângulo arredondado no Photoshop para criar os contêineres. Crie um retângulo de 300px de largura para o logotipo e um de 620px de largura para os itens de navegação.
4. Como inserir o logotipo e o texto de navegação?
Utilize a ferramenta de tipo no Photoshop para inserir o logotipo e os itens de navegação nos contêineres criados anteriormente. Aplique configurações de estilo de camada para personalizar o visual dos elementos.
5. O que é o sistema de grade 960 e por que ele é usado?
O sistema de grade 960 é uma ferramenta que otimiza o fluxo de trabalho de desenvolvimento da web, fornecendo dimensões comumente usadas baseadas em uma largura de 960 pixels. É utilizado para garantir que os elementos do design se encaixem de forma consistente e harmônica no layout da web.
