Clicky

Jump to content
  • Sign Up
Sign in to follow this  
charless

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


Aprenda a ouvir...
...e ganhará o MUNDO !

Share this post


Link to post
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


Aprenda a ouvir...
...e ganhará o MUNDO !

Share this post


Link to post
Share on other sites

8-Gradient-overlay-settings-590x466.jpg

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.

9-Ultimate-gradinet-pack.jpg

10-Stroke-settings-590x466.jpg

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

11-Add-thin-lines.jpg


Aprenda a ouvir...
...e ganhará o MUNDO !

Share this post


Link to post
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


Aprenda a ouvir...
...e ganhará o MUNDO !

Share this post


Link to post
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


Aprenda a ouvir...
...e ganhará o MUNDO !

Share this post


Link to post
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


Aprenda a ouvir...
...e ganhará o MUNDO !

Share this post


Link to post
Share on other sites

23-Gradient-colors.jpg

24-Stroke-settings-for-this-button-590x466.jpg

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.

25-Create-a-pressed-form.jpg

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

26-Add-a-button-on-the-right.jpg


Aprenda a ouvir...
...e ganhará o MUNDO !

Share this post


Link to post
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


Aprenda a ouvir...
...e ganhará o MUNDO !

Share this post


Link to post
Share on other sites

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

31-Layer-styles-for-pressed-shapes-590x466.jpg

32-Layer-styles-590x466.jpg

33-Inner-shadow-photoshop-layer-style-590x466.jpg

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

34-Add-some-simple-circles-on-your-price-tables.jpg


Aprenda a ouvir...
...e ganhará o MUNDO !

Share this post


Link to post
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

Aprenda a ouvir...
...e ganhará o MUNDO !

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.




×
×
  • Create New...