Nosso objetivo nesse artigo é, utilizando o inkscape em sua versão 0.92.2 (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.

Proposta de uma interface da Landing Page da diasporaBR com sistema de Grid com colunas destacadas em rosa .


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 Inkscape Guide Tools desenvolvido pelo Samuel Dellicour. Para realizar o download da extensão clique aqui.

É importante que você entenda que essa extensão não recebe atualizações desde o ano passado e possuem bugs. Apesar disso, servirá para os nossos propósitos.

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 extensions (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).



Gerando o sistema de grid com a extensão guide 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



Agora que já temos nossa página com largura de 1200px vamos criar 3 linhas-guia manualmente e, logo após isso, utilizar a extensão guide tools para gerar nosso sistema de grid.

Iremos precisar de uma linha-guia horizontal que marque a margem superior da página. E outras duas linhas-guia verticais que marquem a margem esquerda e direita. Vamos mudar a cor das linhas-guia para vermelho clicando duas vezes em cima de cada uma das linhas-guia criadas e selecionando na janela de diálogo a cor vermelha (ver imagem abaixo).


Após a geração das linhas-guia das margens (ver imagem a seguir) vá no menu extensões > guias > 2º opção Add Grid Guides (ver próxima imagem).


Para tanto, vá no menu extensões > guias > (2º opção) Add Grid Guides … (ver imagem a seguir)



A janela de diálogo (a seguir) surgirá:



Aplique os valores indicados pela imagem anterior e chegamos ao resultado da imagem a seguir:



Pronto. Basta desabilitar as bordas da página (ver imagem a seguir) e 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:


Lacaster

Este artigo foi escrito por Lacaster em 30 ago 2017.

Lacaster acredita que o compartilhamento do conhecimento e da informação é uma forma de tornar o mundo melhor.

Comentários

Libre Designers - Sistemas de Grid com Inkscape

Responder essa discussão

Você deve estar logado antes que possa publicar uma resposta ou curtir a postagem.

Cadastrar