Tutorial: Como fazer o layout de uma página da web com Adobe Photoshop

Existe uma grande variedade de ferramentas para projetar páginas da web e trabalhar de forma totalmente simples e funcional sem inserir ou mexer no código. São inúmeros, propostos por aplicações (Adobe Dreamweaver é um exemplo) ou diretamente por plataformas online como Wix. Porém, para um web designer, conhecer os procedimentos manuais é essencial. HTML5 e CSS são os pilares fundamentais para o layout de sites e páginas de destino.

No entanto, mais frequentemente do que você imagina, você terá que recorrer a aplicativos como o Indesign ou Adobe Photoshop para complementar o seu trabalho de layout e dar-lhes um acabamento perfeito. Hoje veremos neste extenso tutorial, como podemos fazer o layout de uma página da web usando Adobe Photoshop. Nesta primeira parte ficaremos no trabalho a ser desenvolvido a partir do Photoshop, embora nas próximas edições veremos como podemos aplicar este trabalho já diretamente no código HTML para torná-lo funcional.

Começando com o design do nosso wireframe

Para começar com o layout e design de uma página da web, é extremamente importante que comecemos definindo quais serão os elementos básicos, este é o esqueleto. Esta estrutura servirá de suporte para conter todos os conteúdos (sejam textuais ou multimídia). Ao definir cada uma das seções que compõem nossa página, podemos trabalhar nelas com total precisão e fornecer um design visual o mais preciso possível.

É muito importante que levemos em consideração as dimensões que nosso site terá, caso tenha um em caixa ou largura total. Uma página da web em caixa estará dentro de um pequeno recipiente e, portanto, um espaço aparecerá ao redor dela. Ao contrário, uma web com inteligência total ocupará toda a tela do aparelho que reproduz a página. A escolha entre uma modalidade ou outra responde a questões meramente estilísticas e dependerá também das necessidades do projeto em que estamos trabalhando. Trabalharemos neste exemplo com o modo encaixotado para que não ocupe todo o espaço fornecido pelo navegador.

Para criar nosso wireframe, a primeira coisa que devemos fazer é entrar no aplicativo Adobe Photoshop e incluir as dimensões que queremos que nossa página tenha. Neste exemplo, nossa página terá 1280 pixels de largura. No entanto, a questão do tamanho pode variar dependendo do destino final ou do dispositivo no qual queremos reproduzir nossa página. Não há dúvida de que para um web design ser funcional e eficiente, ele deve ser responsivo e deve se adaptar a todos os dispositivos do mercado. Porém, neste caso, vamos trabalhar para criar um protótipo que iremos reproduzir em um computador desktop. Mesmo assim, o problema de resposta será discutido mais tarde, por enquanto, aqui está uma hierarquia de dimensões de tela para trabalhar neste exemplo. Lembre-se que neste caso faremos um layout da landing page em Adobe Photoshop e depois migraremos para HTML5 E CSS3. O objetivo desta pequena prática é converter um design criado no Photoshop em um web design utilizável e interativo que responda aos movimentos do usuário.

Medições para telefones celulares

iPhone 4 e 4S: 320 x 480

iPhone 5 e 5S: 320 x 568

iPhone6: 375x667

iPhone 6+: 414x736

Nexus 4: 384 x 598

Nexus 5: 360 x 598

Galaxy S3, S4, S5: 360x640

HTC One: 360 x 640

Medidas de tablets

iPad em todos os modelos, bem como iPad Mini: 1024 x 768

Galaxy Tab 2 e 3 (7.0 polegadas): 600 x 1024

Galaxy Tab 2 e 3 (10.1 polegadas): 800 x 1280

Nexus 7: 603 x 966

Nexus 10: 800 x 1280

Microsoft Superfície W8 RT: 768 x 1366

Superfície W8 Pro: 720 x 1280

Medições para computadores desktop

Telas pequenas (usadas por exemplo em netbooks): 1024 x 600

Telas médias: 1280 x 720/1280 x 800

Telas grandes: largura maior que 1400 pixels, por exemplo, 1400 x 900 ou 1600 x 1200.

Para começar a distribuir os elementos e atribuir seções dentro de nossa maquete da web, é muito importante levar em consideração as proporções para garantir um acabamento legível e melódico. Será essencial que você use as opções de regras e guias que você pode encontrar no menu superior Exibir. Para trabalhar de forma proporcional e exata, é melhor trabalharmos a partir de percentagens. Clicaremos no menu visualizar e a seguir na opção «Novo guia» para escolher a modalidade da divisão. Neste caso faremos quatro divisões verticais a 25% e as tomaremos como referência para colocar as nossas imagens no rodapé e a imagem do nosso logotipo no cabeçalho.

Existe um código para designar cada uma das áreas que irão ocupar o nosso modelo e a função que cada um deles terá. Por exemplo, para indicar a área que uma imagem ocupará, vamos criar retângulos com uma espécie de cruz. Para indicar que queremos incluir vídeos em uma determinada área, incluiremos o símbolo de reprodução dentro de nosso contêiner. Neste primeiro exemplo vamos trabalhar apenas com imagens, na captura superior você pode ver a área que o logotipo do nosso site.

Este seria o resultado final de nosso wireframe. Como podemos ver, está dividido em um cabeçalho composto pela imagem na qual o logotipo será encontrado e que servirá como um link para a página inicial acompanhado de duas abas, um motor de busca e quatro botões na caixa de pesquisa. Além disso, já dentro do corpo, incluímos uma barra lateral composta por uma barra divisória e uma série de categorias que categorizam o tipo de conteúdo que estará em nosso site. Outra seção com uma numeração que inclui as entradas que existirão em nosso site e, finalmente, uma lista com as metatags mais representativas em nosso site.

Na área de conteúdo, que será definida por uma seção que incluirá conteúdo autogerenciável, vamos encontrar o conteúdo dos nossos artigos. Neste caso, breadcrumbs ou bread crumbs (que indica a estrutura orgânica do nosso site, o título do artigo, os metadados, um parágrafo como corpo de texto, dentro do qual está incluída uma imagem.

Incluímos como rodapé quatro imagens que servirão de link para outras áreas da nossa página. Aqui podemos incluir logotipos ou outras seções interessantes. Embora, na realidade, esta área atue mais como pré-rodapé, já que o próprio rodapé vai um pouco mais abaixo com a política de uso, aviso legal e copyright.

Uma vez que tenhamos definido a estrutura básica ou esqueleto de nossa página, teremos que ir para o próximo nível. Isso consistirá no design real de cada uma das áreas do nosso site. Ou seja, começaremos a "preencher" cada uma dessas áreas com o conteúdo que finalmente será inserido em nosso site. É recomendado que não projetemos esses elementos antes de trabalhar no wireframe porque é muito provável que, se fizermos isso nesta ordem, precisaremos modificar suas proporções posteriormente. Corremos o risco de distorcer nossas imagens e ter que refazer o design de cada um dos elementos, o que será uma perda de tempo ou um resultado de menor qualidade.

Neste caso, o design do nosso site será extremamente simples. Vamos usar o preceitos do material design, já que vamos usar o logotipo do Google para exemplificar essa prática. Devo esclarecer que o objetivo deste tutorial é ilustrar o conhecimento técnico, portanto o resultado estético neste caso é irrelevante. Como podem ver, aos poucos vamos preenchendo o espaço com todas as áreas que definimos previamente em nosso esquema. No entanto, fizemos uma pequena modificação no último minuto. Como você deve ter notado, reduzimos bastante o tamanho do nosso logotipo e incluímos uma linha divisória na área do cabeçalho inferior que se conecta perfeitamente com o menu superior. Neste caso, usamos botões e materiais de um banco de recursos. Como designers, podemos desenhá-los nós mesmos, (especialmente esta opção é recomendada se quisermos que ela apresente uma tônica muito semelhante à apresentada pela imagem da marca ou logotipo).

É importante ter em mente que, para mostrar este exemplo, vamos trabalhar em dois níveis diferentes. Por um lado trabalharemos os objetos e por outro a aparência do site. Ou seja, por um lado no esqueleto do nosso site e por outro lado em todos elementos flutuantes que este esqueleto irá suportar. Você notará que há áreas que não estarão flutuando de forma alguma, como a área que nossa barra lateral irá ocupar, o pré-rodapé ou a barra divisória que separa o cabeçalho do corpo.

As estruturas 1, 2, 3 e 4 farão parte do fundo da nossa página web, portanto, na realidade, não nos será necessário exportar como tal do Adobe Photoshop, embora possamos fazê-lo, não é necessário. Quando se trata de Cores planas (Um dos recursos essenciais do design plano e design de material, eles podem ser aplicados perfeitamente por meio de código usando uma folha de estilo CSS). No entanto, o resto dos elementos devem ser salvos para inserção posterior em nosso código HTML. Neste pequeno diagrama também reproduzimos as áreas que pertencem ao fundo da página para que tenhamos uma ideia clara de como ficará o aspecto final do nosso site.

Como você poderá perceber, o sentido de criar este esquema no Adobe Photoshop é obter a dimensão real de cada elemento e esclarecer a disposição e a estrutura de cada elemento. Claro, o conteúdo textual não tem lugar nesta fase do processo, uma vez que deve ser fornecido pelo nosso editor de código. Devemos destacar também que nesta prática trabalharemos com botões e elementos estáticos, embora geralmente estes sejam aplicados a partir de frameworks como Bootstrap ou diretamente do Jquery.

Uma vez que tenhamos criado cada um dos elementos que irão compor nossa página web, é hora de começar a exportá-los e salvá-los na pasta de imagens localizada dentro da pasta do projeto HTML. É importante que você se acostume a exportar de seu wireframe, porque é muito provável que você precise modificar alguns dos elementos originais com base na configuração do esqueleto. (Por exemplo, neste caso, alteramos o tamanho dos botões originais, o logotipo e a maioria dos elementos que fazem parte da composição, incluindo as imagens na área inferior).

É importante que aprendamos a salvar qualquer item de forma independente para salvá-lo com as dimensões que possui e de forma precisa. Qualquer erro, por mínimo que seja, pode influenciar todos os elementos que fazem parte da sua página web. Lembre-se de que eles estarão relacionados entre si e devem ter dimensões perfeitas para que possam ser inseridos a partir de HTML na web final. Nesse caso, precisaremos cortar e salvar independentemente os seguintes elementos:

• Nosso logotipo.
• Todos os botões (os que fazem parte do menu principal e os demais).
• Todas as imagens.

Podemos fazer isso de várias maneiras e talvez você encontre uma alternativa mais eficaz para você. Mas se é a primeira vez que você vai fazer esse tipo de layout, recomendo que você siga as dicas a seguir.

• Primeiro, você deve ir para a pasta onde o arquivo PSD que contém nosso wireframe está localizado e duplicá-lo quantas vezes forem os elementos que você vai exportar. Neste caso, criamos 12 cópias do original e as salvamos na mesma pasta. Em seguida, você renomeará cada uma das cópias e atribuirá a cada uma delas o nome do elemento que contém. Nossas 12 cópias serão renomeadas: Logotipo, botão de menu 1, botão de menu 2, barra de pesquisa, botão superior 1, botão superior 2, botão superior 3 e botão superior 4. Os quatro restantes serão renomeados como: Imagem 1, Imagem 2, Imagem 3 e imagem 4.
• Feito isso, abriremos o arquivo com o nome do logotipo.
• Iremos para nossa paleta de camadas e localizaremos a camada que contém nosso logotipo. Então vamos pressionar Ctrl / Cmd enquanto clicamos na miniatura dessa camada. Desta forma, o logotipo será selecionado automaticamente.
• O próximo passo será dizer ao Photoshop que queremos recortar esse logotipo de maneira precisa. Para isso só teremos que fazer uma chamada para a ferramenta de recorte a partir da tecla ou do comando C.
• Depois de fazer isso, clicaremos no botão Enter para confirmar o corte.
• Agora iremos ao menu Arquivo do topo para clicar em salvar como. Selecionaremos o nome, que neste caso será «Logo» e atribuiremos um formato a ele PNG, por ser o arquivo que oferece a melhor qualidade na web.
• Vamos repetir o processo com todas as cópias e os elementos. Depois de aparar, certifique-se de que o resto das camadas em nossa paleta sejam invisível ou eliminado. Desta forma, podemos salvar cada elemento com um fundo transparente.

Neste caso, estamos selecionando nosso botão de menu 2 na paleta de camadas. Você pode ver na imagem como os limites do nosso botão foram selecionados automaticamente.

Depois de selecionar a ferramenta de recorte na tecla C, nossa tela é reduzida apenas às dimensões de nosso botão.

Agora é a hora de salvar um a um todos os elementos que fazem parte do nosso site e incluí-los na pasta de imagens que usaremos posteriormente. Faremos chamadas de nosso código e continuaremos com nosso layout, mas de agora em diante de nosso editor de código.

Embora existam muitas ferramentas e alternativas para o layout de uma página da web que tornam o processo totalmente intuitivo, é muito importante que aprendamos a fazê-lo em um manual. Desta forma, aprenderemos quais são os fundamentos por trás do design de uma página da web.

Resumo:

1. Projete o estrutura do site prestando especial atenção ao conteúdo que deseja transmitir e às seções que deve criar no seu site.
2. Trabalhe em seu esqueleto ou wireframe do Adobe Photoshop indicando em quais áreas o conteúdo aparecerá e seu formato.
3. Com base nas medidas e marcas que você desenvolveu anteriormente, comece a projeto a superfície da web. Inclui todos os elementos (flutuantes e fixos). Não se esqueça de incluir os botões, logotipo e imagens correspondentes.
4. Recorte um a um todos os elementos que fazem parte do projeto. Certifique-se de que eles tenham as medidas corretas e que não causem problemas a você mais tarde.
5. Salve todos os elementos no formato PNG na pasta de imagens dentro da pasta do projeto HTML.
6. Tenha em mente que este projeto terá uma saída para a janela da web, por isso é muito importante que você leve em consideração o modo de cor e aplique RGB.
7. Inspire-se com outras páginas da Web que você admira antes de começar a trabalhar e não se esqueça de discutir isso com os membros da sua equipe. Caso seja um projeto para um cliente, tente se ater ao instruções o mais longe possível.