Prototipagem de Layouts com a extensão Velositey para Photoshop

Portuguese (Português) translation by Wesley Covre (you can also view the original English article)

Nesse tutorial nós vamos conhecer uma extensão gratuita do Photoshop chamada Velositey. Essa extensão (atualmente na versão 2) fornece padrões de layout comuns para a construção de protótipos de design de sites no Photoshop.

"Gaste mais tempo aperfeiçoando os detalhes e estilos e menos tempo em todas aquelas coisas chatas." — Velositey

Padrões de Layout Repetitivos

Antes de colocarmos as mãos no Velositey, vamos examinar alguns padrões de layout comuns encontrados em muitos sites hoje em dia.

Se nós dermos uma olhada em três dos temas de WordPress mais populares no ThemeForest (Avada, Enfold, e Salient), vamos notar que eles compartilham algumas características em comum.

Em primeiro lugar, em telas grandes, eles possuem uma barra de navegação com o logo à esquerda e a navegação à direita. Abaixo da barra de navegação nós normalmente encontramos uma imagem de destaque junto com um ou dois botões exibidos em slideshow. Depois do cabeçalho em destaque, frequentemente encontramos colunas ou algum tipo de layout baseado em grids.

Uma vez que esse tipo de layout é tão comum por aí, você pode se encontrar com frequência construindo algo parecido. Prototipar layouts familiares uma vez após a outra pode, portanto, tornar-se uma tarefa repetitiva.

Neste tutorial nós vamos passar por cada um dos recursos do Velositey e aprender a usá-los para automatizar tarefas comuns, por fim aumentando a velocidade do nosso workflow de prototipagem. Adicionalmente, vamos aprender a como fazer uso de recursos nativos do Photoshop para customizar e adicionar alguns atrativos no nosso protótipo.

Sem mais demora, vamos começar!

Pré-requisitos e Configuração

O requisito mínimo para executar o Velositey é ter o Adobe Photoshop CC 2014/CS6. Também se assegure que você tem o Adobe Extension Manager instalado. Com estes dois presentes, baixe o Velositey (é preciso pagar com um tweet ou postagem do Facebook) e instale-o através do Adobe Extension Manager.

Abra o Photoshop e navegue até Window > Extensions > Velositey para habilitar o painel do Velositey.

O Layout Básico

Para começar, nós iremos criar um layout-base.

Criando um Novo Documento

Primeiro, precisamos criar um documento em branco através do botão [+] New Template no painel do Velositey.

Este documento recém-gerado virá com linhas-guia cobrindo toda uma largura de 1170px com 30px de espaçamento entre as 12 colunas. Esse é um arranjo conveniente se você pretende usar o Bootstrap como o seu sistema de grid.

Adicionando um Cabeçalho

Uma das primeiras coisas que você verá sob o botão [+] New Template é uma série de abas, a primeira das quais é para os cabeçalhos. Eu vou optar pelo 10º padrão de cabeçalho. Clique nele, e então o Velositey vai gerar instantaneamente o cabeçalho e colocá-lo no documento.

Opção de cabeçalho no painel do Velositey

No nosso caso, ele nos dá um cabeçalho com o logo disposto à esquerda e os links de navegação à direita. No painel nativo Layers do Photoshop, você verá também que as camadas estão devidamente estruturadas e nomeadas dentro do grupo Header.

O layout-base do cabeçalho e sua estrutura de camadas no painel **Layers**.

Nota: se você optar mais tarde por outra opção de cabeçalho, o Velositey irá substituir o primeiro exemplo.

Adicionando a Seção do Slider

Apesar das desvantagens, muitas pessoas ainda querem um slider em seus sites. Adicionar uma área de slider é tão fácil como incluir a área de cabeçalho; o Velositey fornece um conjunto de padrões de slider prontos para adicionar com o clique de um botão.

As opções de padrão de layout de slider.

Aqui, eu optei pelo último padrão, que nos dá um slider contendo um título, conteúdo fictício, e dois botões.

A área de slider, com as camadas correspondentes.

Como você pode ver acima, você encontrará um novo grupo, Slider, acrescentado no painel Layers onde todas as camadas do slider residem.

Adicionando a Seção de Conteúdo

Adicionar a área de conteúdo é igualmente simples. Navegue até a terceira aba no painel do Velositey e você vai encontrar algumas opções de conteúdo.

Eu optei pelo terceiro estilo, dando-nos o conteúdo apresentado em três colunas com cada uma compreendendo um título, um espaço reservado para imagem, e conteúdo fictício.

Adicionando um Módulo

Um módulo, neste caso, é um bloco de conteúdo independente. Cabe a nós definir o conteúdo e para que ele será usado. Ao contrário das áreas de cabeçalho, slider, e conteúdo, nós somos capazes de incluir vários módulos dentro de um único documento. Aqui eu adicionei o segundo padrão:

O segundo tipo de módulo nos dá um espaço reservado para imagem (que se estende por toda a grid do documento), um título, e algumas linhas de texto fictício.

Adicionando a Seção de Rodapé

A última seção do nosso site será previsivelmente o rodapé. Para rodapés, mais uma vez o Velositey nos dá uma série de padrões predefinidos para escolher:

O primeiro padrão de rodapé nos dá o seguinte layout:

Neste estágio, nós terminamos a adição de todas as seções necessárias do nosso site—do cabeçalho ao rodapé—com somente alguns cliques. Para organizar cada seção corretamente, você pode acrescentar algum espaço vertical entre elas; assim:

Agora que temos o layout básico pronto, é hora de customizá-lo. Nós precisamos alterar algumas coisas para tornar o layout apresentável.

Customização

A regra de ouro quando se trara de customização de documentos do Photoshop é deixar as camadas intactas sempre que possível. Cada camada deve ser personalizada sem destruir a sua forma inicial ou propriedades. Isso nos leva a empregar alguns recursos do Photoshop, como:

Objetos Inteligentes e Objetos Inteligentes Vinculados
Camadas de Ajuste
Efeitos de Camada

Além disso, eu prefiro usar o mínimo de camadas possível.

Usando Objetos Inteligentes

No nosso caso, Objetos Inteligentes são úteis para incluir o logo.

Para começar, selecione a camada nomeada logo dentro do grupo Header (atualmente uma camada de forma retangular). Então clique com o botão direito, e selecione a opção Convert to Smart Object.

A camada logo agora é um Objeto Inteligente.

Para colocar o nosso logo nessa camada, clique com o botão direito nela e selecione a opção Edit Contents.

Isto vai nos levar para um novo documento na janela do Photoshop. Dentro deste documento, deixe a camada de forma retangular invisível, e arraste-e-solte o arquivo do logo dentro dele, alinhando o logo à esquerda. Assim que você salvar o arquivo, as mudanças serão refletidas no index.psd.

O logo é inserido através de um Objeto Inteligente

Agora nós vamos converter a camada logo, que agora é um Objeto Inteligente, em um Objeto Inteligente Vinculado. Isso efetivamente armazena o nosso logo como um arquivo externo. Para fazer isso, clique com o botão direito na camada, e selecione a opção Convert to Linked....

O Photoshop vai te pedir para salvar o arquivo do Objeto Inteligente, .psb. Salve-o dentro de uma organização típica, como você faria se estivesse organizando as imagens do site. Nesse caso, eu o salvaria em uma pasta chamada /images.

"Mantenha fotos/ícones de bancos de imagens em uma pasta próxima do PSD, não em uma pasta na área de trabalho chamada 'Coisas diversas'" — Photoshop Etiquette

Como agora estamos trabalhando com Objetos Inteligentes, vamos reutilizar o logo no rodapé. Vá até o grupo Footer e encontre a camada logo. Clique com o botão direito nela, e selecione Replace Contents....

Navegue para a pasta onde você salvou o arquivo .psb do logo, selecione-o, e aperte o botão Place. Agora você deve ter o logo no rodapé.

Repita esses passos para colocar imagens nas outras seções; Content, Slider, e Module. Uma vez que isso estiver feito, você deverá ter um resultado semelhante ao meu:

Usando Efeitos de Camada

Acrescentar um efeito de camada provavelmente será familiar para qualquer pessoa que já utilize o Photoshop há algum tempo. Os efeitos de camada aplicam um ou mais efeitos como cor, gradiente, sombra etc. no topo de uma camada. No nosso caso, nós vamos utilizá-los para definir uma nova cor para o logo e acrescentar um gradiente.

Vamos começar selecionando a camada logo no grupo Header. Em seguida, selecione o ícone fx no painel Layers, onde ficam as opções de efeito. Selecione Color Overlay..., e escolha a cor branco.

Repita este passo para personalizar as cores dos links da barra de navegação, dos ícones na seção de conteúdo, e dos botões no slider. Adicionalmente, acrescente um efeito de gradiente à imagem do slider para dar mais contraste entre o cabeçalho e ele, fazendo com que o logo e os links de navegação fiquem mais legíveis.

Usando Camadas de Ajuste

Camadas de Ajuste nos permitem alterar os ajustes de uma camada (como brilho e contraste) de uma forma não destrutiva. No nosso caso, nós podemos utilizar uma camada de ajuste para deixar os ícones do módulo preto-e-branco.

Primeiro, selecione a camada container dentro do grupo Module. Clique com o botão direito e selecione a opção Edit Contents.... Depois, clique em New Adjustment Layer e selecione a opção Black & White.... E voilà!

Resultado Final

A última coisa que você precisa fazer é reformular os títulos e os textos nos espaços reservados para conteúdo. Com isso feito, aqui está, o nosso protótipo finalizado:

Conclusão

Muito bem, nós construímos com sucesso um protótipo de design para uma página da web. Usamos o Velositey, que nos permitiu gerar o layout-base rapidamente. Além disso, nós customizamos as camadas com cores, gradientes, e ajustes de uma maneira não destrutiva, mantendo a sua forma inicial intacta e permitindo edições futuras.

Você tem outras dicas ou truques para o uso do Velositey? Deixe-nos saber nos comentários!

Leitura Adicional

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!