Libre Designers

Este artigo foi atualizado em 26/01/2021 graças a observação de Tuxuai de que a extensão usada antes não funcionava mais.

Nosso objetivo neste artigo é, utilizando o inkscape em sua versão 1.0.1 (versão estável mais recente no momento da escrita desse artigo), criar um sistema de grid para nos ajudar a fazer o design de uma interface em um próximo momento.

Separei este artigo em 4 partes:

1. Sistemas de Grid
2. Explorando linhas-guia
3. Instalando extensões no inkscape
4. Gerando o sistema de grid com a extensão guide tools

Sistemas de Grid

Uma definição para Sistema de Grid é:

Uma estrutura composta de uma série de linhas horizontais e/ou verticais, usadas para organizar o conteúdo.

Como exemplo temos a estrutura de 12 colunas usada em uma interface de uma landing page da diasporaBR.

Observe que apesar do uso da estrutura de grid, nessa região da nossa interface não seguimos fielmente o grid de 12 colunas, pois o objetivo do grid, nesse caso, é orientar e não determinar as posições dos elementos da interface.

Em uma visão mais simplificada, para uma interface de largura 1200px, um grid de 12 colunas, margem esquerda e direita com 10px, temos a seguinte configuração de grid:

Explorando linhas-guia

A geração de linhas-guia no inkscape é bem simples. Basta colocar o cursor do mouse em cima da régua horizontal ou vertical, clicar com o botão esquerdo, arrastar o mouse para a área de desenho e soltar o botão clicado. Dependendo de onde foi realizado o clique na régua, a linha-guia gerada será horizontal, vertical ou inclinada em 45 graus (veja animação abaixo). Se o clique foi na régua horizontal será gerada uma linha-guia horizontal. Se o clique foi na régua vertical a linha-guia será vertical. E se o clique foi bem próximo da quina entre as duas réguas a linha-guia gerada será inclinada.

Instalando extensões no inkscape

Desejamos criar um sistema de grid de 12 colunas. Poderíamos criar as linhas-guia manualmente e ajustar a distância entre as linhas-guia para formar a grade, mas isso consumiria muito tempo e talvez nem conseguíssemos um bom resultado. Para agilizar nosso trabalho iremos utilizar a extensão Guide Creation Tools desenvolvido pelo Maren Hachmann baseado na extensão do Inkscape Guide Tools iniciado pelo Samuel Dellicour. Para realizar o download da extensão clique aqui.

Descompacte o arquivo inkscape-guide-tools-master.zip em alguma pasta acessível, entre dentro da pasta inkscape-guide-tools-master descompactada e em seguida na pasta src (Ver imagem abaixo).

Copie o conteúdo dessa pasta e, se você estiver usando sistema operacional GNU/Linux, cole no caminho ~/.config/inkscape/extensions.

Caso a pasta ~/.config/inkscape/extensions não exista, crie ela e coloque os arquivos da extensão dentro da pasta extensions.

Pronto. Basta reiniciar seu inkscape e se tudo correr corretamente sua extensão estará acessível no menu extensões (Ver imagem a seguir).

Recomendo que você explore a extensão e crie algumas linhas-guia por conta própria com ele. É uma extensão bem legal (na minha opinião).

Gerando o sistema de grid com a extensão Guide Creation Tools

Inicialmente, vamos gerar no inkscape um novo documento e configurar o seu tamanho para que tenha uma largura de 1200px (ver imagem a seguir). Para isso, vá no

1. menu arquivo > novo (atalho ctrl + n)
2. menu arquivo > propriedades do desenho (atalho ctrl + shift + d)
3. Na janela de propriedades do desenho, na aba página, na região de tamanho personalizado, coloque a largura de 1200px e uma altura qualquer.
4. (sugestão) Salve seu arquivo em uma pasta acessível com o nome page-1200w.svg

Vá no menu extensões > Guias > Guide Creation Tools ... A janela de diálogo (a seguir) surgirá. Clique na aba Grade em destaque na imagem:

Clique na subaba Distribute evenly, insira os valores indicados na imagem abaixo e clique no botão Aplicar.

Você obterá o seguinte resultado:

Agora vá para a subaba Specify distances e insira os valores mostrados na imagem abaixo. Lembre de desmarcar a opção Add outer gutters nas opções de Columns. Cliquei no botão Aplicar.:

Temos a seguinte estrutura de linhas-guia montada (ver imagem a seguir):

Como ainda não é possível zerar os valores do número de linhas (rows) na extensão Guide Creation Tools será necessário remover linhas-guia manualmente. Remova 2 linhas-guia que estão sobrepostas no topo da página. Também remova a linha-guia está na base da página e vamos colocar a cor vermelha nas linhas-guia que estão na fronteira da página. Para deletar uma linha-guia deixe o mouse em cima dela e clique no botão delete do seu teclado. Para acessar a janela de propriedades da linha-guia basta dar um duplo clique com o botão esquerdo do mouse na linha guia (Ver animação a seguir).

Pronto. Basta desabilitar as bordas da página na janela de Propriedades do Desenho (Ctrl + Shift + d) (Ver imagem a seguir).

Obtemos nosso sistema de grid.

Conseguimos gerar nosso sistema de grid e já podemos utilizá-lo em nossos próximos projetos.

Arquivo final:

Caso você queira a versão final do arquivo svg do inkscape com nosso sistema de grid clique aqui.

Fontes:

• All About Grid Systems (Envato Tuts+)

Imagem de background do Card:

• Ama Dablam - User 12019