Design da interface Web 2.0 no Photoshop
Entender o tutorial abaixo é entender sua técnica, com isso você pode desenhar uma interface gráfica para um website. Navegação lateral, botões, cabeçalhos, por exemplo. Todo o estilo da Web 2.0.
Inicie uma nova tela; qualquer tamanho. Algo maior que 450x300px seria bom. Selecione os Ferramenta Retangular Arredondada e desenhe um retângulo tão grande quanto mostrado na imagem acima.
Clique duas vezes na camada do Rounded Rectangular para iniciar o Opções de mesclagem. Altere as configurações dos seguintes estilos.
Sombra
Opacidade: 31% Distância: 1px Spread: 0% Tamanho: 5px
Bisel e relevo
Profundidade: 100% Tamanho: 0px Suavizar: 0px
Sobreposição de gradação
Clique duas vezes em Gradiant e defina os pontos de parada a seguir. Localização: 0%, # 1378cd Localização: 100% # 4da5f0
Acidente vascular encefálico
Tamanho: 5px posição: dentro cor: # 54abf6
Vamos inserir algum texto, um slogan, URL ou algo assim. Deixe-o no meio e alinhe-o bem para que o logotipo possa residir no lado esquerdo mais tarde. Vamos estilizar o texto. Estou usando o Lucida Sans Unicode; 55pt; suave; -120 para rastreamento de caracteres (espaçamento entre letras). Clique duas vezes na camada de texto e defina o seguinte em Opções de mesclagem.
Sobreposição de Gradiente
Clique duas vezes em Gradiant e defina os pontos de parada a seguir. Localização: 0%, # 9ec7eb Localização: 100% ecf6ff
Você precisará inserir o logotipo no lado esquerdo do texto. Vou usar um retângulo arredondado com raio 5px para representar o logo. Aqui está o Opção de mistura configurações para o retangular arredondado.
Sombra interior
Opacidade: 45% Distância: 0 px Tamanho: 43 px;
Bisel e relevo
Profundidade: 100% Tamanho: 0px Suavizar: 0px Modo de realce Opacidade: 50% de ShadowMode Opacidade: 100%
Sobreposição de gradação
Clique duas vezes em Gradiant e defina os pontos de parada a seguir. Localização: 0% # 0e2f4a Localização: 47% # 001a31 Localização: 48% # 002545 Localização: 100% # 0f4b7f
Acidente vascular encefálico
Tamanho: 5px Clique duas vezes em Gradiant e defina os seguintes pontos de parada. Localização: 0% # 1468af Localização: 100% # 50abf8
Vamos dar um pequeno efeito brilhante. Aguarde CTRL e clique com o botão esquerdo na retangular arredondada Miniatura da camada. Quando todo o retângulo arredondado é selecionado, alterado para Ferramenta de letreiro retangular, aguarde ALT e desenha a segunda metade da área selecionada; assim como a imagem acima.
Crie uma nova camada; Arraste-o para cima, de modo que fique no topo de todas as camadas; preencha a parte selecionada com branco [#ffffff]; mude a opacidade para 15%.
O tutorial terminará aqui. Como você vai fazer uso deste projeto é inteiramente com você. Alterando ligeiramente o tamanho e as cores, pode ser usado como um cabeçalho ou botões da web. Aqui está um exemplo.
Cabeçalho do site
Botões do site
