!Tutoria!l Criando layout de seu host.

[charless]

Bom últimamente vejo muitas pessoas copiando templates ou fazendo layout horríveis.

Eu ainda digo, faze um site requer um investimento alto. Evite pessoas mal preparadas ou novatos que fizeram apenas um curso e acham que são "Design".

Sério está virando moda ser design. Faze um site não e apenas abrir o o photoshop e sair fazendo o que vem na cabeça, requer planejamento, tempo, e muito carinho.

E nisso eu decidir ajuda pessoas que realmente precisam mas estão meio que sem dinheiro ou com falta de criatividade.

Neste tutorial eu mostrarei como criar um layout de um site de hosting muito detalhado. Se você tem uma empresa de hospedagem você vai precisar de um modelo de site muito detalhado porque o mercado está muito saturado, e você vai precisar para se destacar na multidão.

Nesse tutorial recomendo o uso do Photoshop CS4 ou Superior CS5.

Esse é um tutorial em inglês que resolvir traduzir e para ajudar quem precisa.

Este é o nosso resultado final.

Para começar, você precisa criar um documento vazio. Vou usar uma cor escura para o fundo. Observe que você pode usar o Paint Bucket Tool para preencher o seu whit camada de fundo de qualquer cor que você deseja.

Eu vou selecionar a ferramenta Brush, e eu vou fazer um desenho branco em uma nova camada.

Então eu vou mudar o modo de mistura para a nova camada de sobreposição.

Continua....

[charless]

Agora (vá em Exibir> Mostrar Grade). Com a ferramenta Pen desenhar uma forma, como na imagem a seguir.

Este formato será utilizado para nossa tabela de preços. Aqui nós vamos adicionar os preços de todos os nossos planos de hospedagem.

No topo da tabela de preços você irá adicionar uma outra forma. Você pode usar a ferramenta caneta para criar esta forma. Aqui será o nome da sua empresa e planos.

Abaixo você tem o estilo da camada eu usei para criar o cabeçalho da tabela. Guarde esta camada de estilos, porque você vai usá-la mais tarde neste tutorial várias vezes. Vou nomeá-la LayerStyle1

[charless]

Por favor note que todo o gradiente usado neste tutorial é pacote enorme com mais de 25 mil gradientes. Mas você pode usar a sua criatividade e criar seu gradiente.

Com a ferramenta de linha irá criar algumas linhas verticais.

[charless]

No meio da layout você vai criar um espaço onde vou colocar mais tarde um efeito 3D. Esta forma será alterada posteriormente por outra. Enfim, se você gosta do layout desta maneira é por isso que eu dei-lhe duas opções.

Abaixo você encontrará os estilos de camada utilizado para esta forma com um olhar recuado. Por favor, salve este estilo da camada, pois você precisará mais adiante neste tutorial. Vou nomeá-la LayerStyle2.

[charless]

Aqui está uma nova forma para utilizar nesse tutorial. Eu criei este forma com Rounded Rectangle Tool, então eu tenho aplicado um filtro de ruído ( Filter > Noise > Add noise )

O próximo passo é carregar a seleção para essa camada. Selecione a camada na sua paleta de camadas e, em seguida vá em Select> Load Selection. Crie uma nova camada, e com a ferramenta Pincel adicionar uma área branca.

O próximo passo é carregar a seleção para essa camada. Selecione a camada na sua paleta de camadas e, em seguida vá em Select> Load Selection. Crie uma nova camada, e com a ferramenta Pincel adicionar uma área branca.

[charless]

Alterar o modo para Overlay para a camada com o desenho branco, layout será semelhante a imagem a seguir.

Não se esqueça de pressionar CTRL + D para desmarcar. Com a ferramenta Rounded Rectangle criar um botão azul agradável. Como você pode ver que terá uma cor diferente do nosso layout, porque este botão necessidade de atrair muita atenção.

Abaixo você encontrará os estilos da camada usada para criar o botão azul.

[charless]

Vou criar também uma outra forma. aqui será o formulário de busca. Ele permitirá que seus usuários façam pesquisas de registro de domínios.

No lado direito você terá de criar também um botão

[charless]

Com a ferramenta Rounded Rectangle voce pode criar outra formas. Você pode criar lá um ticker de notícias, e no lado direito você pode usar esse botão para um chat ao vivo.

Sobre o preço da área da tabela vai criar mais duas formas, com o rectangle Tool, e vou acrescentar também algumas linhas.

Então eu vou acrescentar outros botões.

E como você pode ver eu vou acrescentar outra formas em torno das primeiras.

[charless]

Abaixo você tem os estilos de camada utilizado para as formas de cima.

Com o Ellipse Tool eu vou criar alguns círculos.

[charless]

Depois que você adicionar alguns estilos de camada em seus círculos terá uma aparência agradável quando pressionado. Você pode usar os estilos de camada de cima. Se tiver guardado os estilos de camada como eu disse agora você vai ser muito fácil para você.

No meio dos círculos você irá adicionar alguns pequenos triângulos.

E então, o passo mais importante é a de adicionar alguns ícones com alguns servidores preto e branco, e também alguns preços. Se desejar você pode acessar o iconfinder e encontrar diversos icones que podem ser utilizados.

No rodapé do layout você vai criar outra formas, e eu vou enchê-lo com o texto.

Continuaa na página 2 ....

Editado Fevereiro 14, 2011 por Hello Interactive