Olá amigos . Hoje o tutorial será mais interessante e consequentemente mais longo do que estamos acostumados. Vamos aprender a fazer um layout de website, um básico nos moldes modernos. Irei descorrer nesse texto não só de como montá-lo no Photoshop, mas de uma série de outras coisas como buscar inspiração, referências e etc.

SABER O QUE PRETENDE TRANSMITIR COM O LAYOUT

Um layout assim como qualquer outra peça de comunicação é direcionada à um público alvo, e consequentemente atinge outras pessoas. Devemos sempre tentar fazer algo limpo e acessível, para que ambos possam navegar facilmente, mas sempre ter em foco o briefing do projeto. Cada público uma linguagem própria que possuem alguns padrões mas sempre que há a possibilidade também permite inovar. Alguns exemplos:

  •  Portais de comunicação: costumam usar 3 colunas de 300px em seus layouts, trabalham títulos grandes, com fotos impactantes.
  • Sites de agência de tecnologia buscam ser inovadores, portanto abusam de movimentos e cores
  • Hotsites para lançamento de produtos / serviços estão usando layouts de onepage – layouts de uma só página

PESQUISAR, PESQUISAR E PESQUISAR

Antes de começar fazer o layout em si, é deveras importante fazer uma pesquisa visual para você possuir referencias. E a melhor forma de se fazer isso, é pesquisar o que está acontecendo de melhor na internet. Alguns sites bons de referencia:

  • Awwwards (www.awwwards.com) – Essa é uma galeria com um rigoroso júri que tem como objetivo listar durante um ano os melhores projetos da internet. No ano anterior, eles fizeram um livro listando todos esses sites. Ou seja, é bom sempre dar umas olhadinhas nele.
  • Cssmania(www.cssmania.com) – Segundo o próprio site, foi o precusor das galerias de CSS. Tem uma galeria vasta que permite fazer busca até mesmo por cores. É legal acessar.
  • Behance (www.behance.net) – De longe a maior galeria de artistas/designers/diretores de arte e etc do mundo. Melhor do que eu tentar descrever como ela é, é você acessar e ficar (embabacado) impressionado com a qualidades dos trabalhos.
  • Dribbble (www.dribbble.com): é um site com o proposito bem simples: colocar uma prévia do que você está trabalhando. E funciona muito bem. Acaba sendo um mini portifolio.

Bom temos boas referencias, que vão nos inspirar bastante. Agora vamos começar a trabalhar. Mas antes de abrirmos o Photoshop, é necessário pensarmos nas áreas que terão o site. E a melhor forma de fazer isso é longe do computador: Com um papel e uma caneta. Vamos pensar então em um site simples para uma empresa. Algo básico, pois estamos começando. Algo conforme a listagem abaixo preenche bem a esse propósito:

  • Marca da empresa;
  • Menu de navegação;
  • Banner rotativo;
  • Três chamadas para alguma página interna relevante;
  • Rodapé com o endereço da empresa e contatos e
  • Marca do desenvolvedor do site – pois é importante você linkar para seu portifolio

Bom, agora que temos as áreas, é finalmente hora de abrirmos o Photoshop para criarmos. Antes de definirmos o tamanho do documento, primeiro devemos pensar em alguns de tamanhos de layouts:

  • Tablets de 7 polegadas: Entre 1024x600px a 1200x800px. Os mais utilizados são os superiores a 1024x768px.
  • Tablets de 10 polegadas : Entre 1024×768 px e 2048×1536 px (ipads retina)
  • Monitores de 13 polegadas: 1280×800 px
  • Monitores de 15 polegadas: 1440×900 px

Portanto o mínimo dele deve ser 1024x700px para caber nos mais utilizados tablet de 7”. Vamos aqui excluir tablets de 5” e smartphones, pois esses precisam de projetos focados exclusivamente a eles.

INICIANDO NO PHOTOSHOP

Abra um novo documento  em branco com 984×748 px e 72 dpis. Aperte Ctrl + R (Command + R no Mac) para aparecer as guias métricas no Photoshop. Puxe três guias de forma que elas ocupem todos os cantos do documento, como na imagem abaixo:

criando layout no photoshop

Esse é o tamanho mínimo da área útil de um tablet. Os maiores ocuparam mais do que isso, mas é importante focarmos em todos os tipos de usuários. Não tem problema as informações do site ultrapassar o limite inferior vertical, mas eles não pode passar o limite horizontal se não as informações ficaram cortadas para usuários. Depois então vá em Image – Canvas Size e altere o tamanho para 1064 x 768 px e novamente puxe as guias.

criando layout no photoshop

Como tem monitores com até 1920px de largura, vou novamente no Canvas Size e alterar para essa medida de largura. Agora  na foreground color,  mude a cor principal para a cor #f0f1ae. Selecione a Retangule Tool e faça um retângulo que pegue 100% da largura com 475px de altura.

OBS: Para fazer a altura dos elementos, vá em Windows – Info. Nesse painel que se abriu mostrará vários dados referentes ao objeto, inclusive a altura, largura e a cor em RBG e CMYK de onde está o ponteiro do mouse. O “W” é de width que é nossa largura e o “H” de height que é nossa altura. 

Se suas medidas estiver em centímetros, altere elas para pixels em: Preferences(Ctrl + K ou Command + K) – Units e Rules e altere a rules para pixels.

Posicione ele no topo de acordo com a imagem abaixo:

criando layout no photoshop

Mude a cor da foreground color para #185a76, e novamente com a Retangule Tool faça um novo retângulo só que com 100% de largura e 270px de altura.

criando layout no photoshop

Mude novamente a cor da foreground color, agora para #0a4863. Faremos o que será o rodapé. Faça um novo retângulo com 100% de largura e o restante da altura.

criando layout no photoshop

Agora vamos fazer o menu. Troque a cor da foreground color para #6c7f22 e faça um novo retângulo com 100% de largura e 75px de altura.

criando layout no photoshop

Troque a cor da foreground color agora para branco – #FFFFFF. Vamos fazer o que será o nosso banner. Já diferentemente dos outros elementos, ele necessita ficar exatamente na área útil do site, de 984px, portanto essa será nossa largura. Faça ele com 984px por 340px.  Posicione esse retângulo uns 10px abaixo da linha limite entre a faixa verde e a azul, como na imagem abaixo:

criando layout no photoshop

Bom o branco será borda do nosso banner. Ele mesmo será um novo retângulo, com 974px por 330px. Pode fazer ele no tom #dddddd. Posicione ele ao centro do retângulo branco.

criando layout no photoshop

Vamos então fazer pequenos retângulos como na imagem abaixo, para ser nossas chamadas para as páginas internas.

criando layout no photoshop

Coloque o tom #2d6a84 e selecione a Rounded Retangle Tool. Faça um retângulo com 315px de largura por 140px de altura. Depois duplique ele duas vezes, e espalhe eles como na imagem abaixo.

criando layout no photoshop

O próximo passo é colocarmos uma sombra no banner. Faremos isso não usando blending options mas sim um blur. Duplique o retângulo branco, e deixe a cópia dele com a layer abaixo da original. Mude a cor do retângulo para preto (#000000) no painel de layers ao lado. Agora não estamos vendo o retângulo preto, mas ele está lá. Com a layer do retângulo preto selecionada, vá em: Filter – Blur – Gaussian Blur. Uma janela de aviso como essa abaixo irá aparecer, apenas aperte ok.

Adobe Photoshop

Na janela para configurarmos o blur, coloque o radius em 2px, como mostrado abaixo.

Gaussian Blur

Aperte Ctrl + T (Command + T para Mac) para transformarmos esse objeto. Ficará assim:

criando layout no photoshop

Arraste agora o retângulo preto cerca de 10px para baixo.

criando layout no photoshop

Clique com o botão direito em cima desse objeto. Será dada algumas opções, selecione a Warp. Com isso até a forma da caixa de transformação será alterada, como mostrado abaixo:

criando layout no photoshop

Faremos algo delicado: Puxe a parte inferior um pouco para cima, como nessa imagem:

criando layout no photoshop

Aperte Enter para confirmar. Essa é a sombra do nosso banner. Um efeito semelhante a uma sombra num pedaço de papel emborcado. Diminua a opacidade dessa layer para 70%.

criando layout no photoshop

Agora nosso layout já ganhou uma forma e até mesmo um efeitinho no banner.. As áreas já estão bem definidas, o restante é inserirmos informações e salvarmos nosso arquivo. Salve ele pois precisaremos dele para a próxima aula. Qualquer dúvida ou sugestão deixe abaixo nos comentários.

Abraço e até a próxima.

 

Autor: Leonardo Manzi

Blog do Autor | Artigos do Autor:

Leonardo Manzi é designer gráfico brasileiro, mais apaixonado por webdesign e branding do que por futebol e carnaval. Gosta de passar os tempos livres apreciando um bom projeto de design e melhor ainda quando é num rótulo de cerveja.

  • Explorer - Factory Construction & Ship Building Joomla Theme
  • Justice - Attorney and Law Firm Joomla Template
  • OwnFolio - One Page Personal Portfolio / vCard / Resume / Showcase Joomla Template
  • Big Business - Responsive Template
  • Merab - Creative Multipurpose Drupal 8 Theme
  • Fitness Academy Joomla Template
  • Fruition - Business Joomla Template
  • Educate | Education & Courses, Kindergartens Joomla Template
  • Constructive - Contractors Multipurpose Joomla Landing Page Theme
  • Vina Bubox - VirtueMart Joomla Template for Online Stores
  • BizOne - One Page Parallax Drupal Theme
  • LawHouse - Responsive Lawyers Attorneys Joomla Template

Gostou deste artigo? Então torne-se fã do Blog no Facebook!



Comentários dos Alunos


  1. CID
    22 de janeiro de 2013

    O Link que aponta para o site:
    http://www.awwwards.com

    Está incorreto (falta um “W”)



    • Leonardo Manzi
      30 de janeiro de 2013

      Opa, corrigido o link.
      Obrigado pelo aviso CID.



      • Thiago Gouvêa
        17 de abril de 2013

        O link continua errado, Leonardo Manzi.
        Valeu.



  2. Gabriel
    1 de fevereiro de 2013

    Muito bom tutorial, esperando o próximo (:



  3. Tiago Martins
    25 de fevereiro de 2013

    O artigo está sem dúvida muito bom, os meus parabéns. Porém deixo também a minha dica, para quem deseja criar layouts pixel perfect deverá utilizar Fireworks, pois este é 100% virado para Web, enquanto o Photoshop foi feito para grafismo.



  4. Ueder
    19 de abril de 2013

    Muito Bom o Artigo esperando a Proxiam……..



  5. Kevin Oliveira
    19 de abril de 2013

    Eu não sei o porque, mas não consigo usar o Photoshop para criar layouts, prefiro mil vezes o Fireworks, mas acho que é gosto mesmo. Enfim, o artigo ficou ótimo.



  6. João Victor
    15 de julho de 2013

    Porque pararam as postagens no site?



  7. Rafael Almeida
    21 de outubro de 2013

    Todo mundo fala que é webdesigner mas design de verdade, de qualidade, sem copiar de outros sites é cada vez mais raro…

    Valeu pelas dicas! Seguimos aprendendo!



  8. Jéssica
    26 de março de 2014

    Muito bom, alguém teria a continuação deste arquivo? Não consegui encontrar!



  9. Hildo
    26 de julho de 2014

    Muito bom o tutorial, parabéns, esperando parte dois.



  10. Kevvin
    19 de agosto de 2015

    Essa série de artigos não será continuada não? :(


RSS
Twitter
Facebook
Comentários
ASSINANTES
SEGUIDORES
FÃS
COMENTÁRIOS
7794

Subscrever Newsletter
Subscreva a Newsletter:



Aplicativos Android, iPhone e Muito Mais!




Assine a Escola Criatividade Assine a Newsletter da Escola Criatividade Escola Criatividade no Twitter Escola Criatividade no Facebook Escola Criatividade no Youtube Escola Criatividade no Google Buzz