Jump to content

!Tutoria!l Criando layout de seu host.


Recommended Posts

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.

41-Final-Hosting-Layout-590x571.jpg

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.

1-Create-a-dark-background.jpg

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

2-Add-a-touch-of-light.jpg

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

3-Change-the-blending-mode-to-overlay.jpg

Continua....

Link to comment
Share on other sites

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

4-Turn-on-the-grid-and-create-a-strange-shape-590x299.jpg

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.

5-Create-another-white-shape-590x571.jpg

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.

6-Add-a-sleek-layer-style.jpg

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

7-Custom-blending-option-settings-590x466.jpg

Link to comment
Share on other sites

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.

12-Create-a-shape-on-the-header-of-your-hosting-layout-590x571.jpg

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.

13-Add-settings-for-your-web-hosting-layout-590x466.jpg

14-Drop-shadow-settings-590x466.jpg

15-inner-shadow-settings-590x466.jpg

Link to comment
Share on other sites

16-Color-Overlay-Settings-590x466.jpg

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 )

17-Add-a-gritty-shape.-Use-Noise-590x571.jpg

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.

18-Add-another-white-area.jpg

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.

18-Add-another-white-area.jpg

Link to comment
Share on other sites

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

19-Change-the-blending-mode-to-overlay.jpg

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.

20-Add-a-call-to-action-button.jpg

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

21-Layer-styles-for-the-blue-button-590x466.jpg

22-Gradient-edito-for-the-blue-button-590x466.jpg

Link to comment
Share on other sites

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.

27-Add-another-two-buttons-590x292.jpg

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

28-Add-more-lines.jpg

Então eu vou acrescentar outros botões.

29-Add-detains-on-the-price-tables.jpg

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

30-Add-some-indented-shapes.jpg

Link to comment
Share on other sites

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ê.

35-Use-the-same-indented-layer-styles.jpg

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

36-Add-some-small-triangles.jpg

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.

37-Fill-the-price-tables-with-icons.jpg

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

38-Continue-creating-the-footer-of-the-web-hosting-layout-590x387.jpg

Continuaa na página 2 ....
Edited by Hello Interactive
Link to comment
Share on other sites

Guest
This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...

Important Information

Do you agree with our terms?