Olá Web Developers! Vamos ver como começar a trabalhar com o Inkscape para criar imagens para nossos projetos para a web. Esse é o segundo post de três sobre como começar a usar SVG.
O que é Inkscape e por que usá-lo?
O Inkscape é um software open-source usado para a criação de imagens vetoriais, assim como Adobe Illustrator e Corel Draw.
Ele é gratuito, leve e usa o SVG como formato nativo de seus arquivos. Isso significa que ao salvar um trabalho feito no Inkscape, já podemos usar em nossos projetos web, sem medo nenhum de incompatibilidade.
Este programa pode não ter uma interface muito bonita, mas ele tem um grande poder. Com o tempo você se acostuma.
Iniciando com Inkscape
Formas
A maioria das ferramentas que você irá utilizar estão no canto esquerdo do programa. A primeira coisa a se aprender é desenhar formas. Para acelerar seu trabalho, tente decorar os atalhos:
- Retângulo - R
- Elipse - E
- Estrela - *
Se você desenhar segurando a tecla Ctrl, a forma será feita mantendo proporções em suas dimensões. Isso permitirá que você utilize a ferramenta de retângulo para desenhar um quadrado ou a ferramenta de elipse para desenhar um círculo.
Se segurar Shift a forma será desenhada a partir de seu centro.
Para selecionar algum elemento, utilize a ferramenta de seleção, que pode ser acessada usando a tecla S. Com esta ferramenta você pode redimensionar a forma, e se clicar nela os controles serão alterados para que você possa rotacioná-la.
Cores
Ao ter algum elemento selecionado, podemos escolher a cor do contorno e do preenchimento.
Utilize o atalho Ctrl + Shift + F e você terá a ferramenta mostrada na imagem abaixo:
Em Fill podemos escolher a cor de preenchimento do elemento, em Stroke paint a cor do contorno e em Stroke style a grossura e estilo da linha do contorno.
Caso queira criar um efeito de gradiente, utilize o atalho G. Com isso você poderá indicar a posição e direção do gradiente, e junto à ferramenta anterior poderá escolher as cores de cada parte do gradiente.
Caso queira copiar a cor de um elemento (famoso “conta-gotas”), utilize o atalho D.
Desenhando
Linhas
Nem sempre vamos utilizar apenas formas prontas. Para desenhar suas próprias formas, a ferramenta mais utilizada é a de criação de curvas de Bezier. Para acessá-la você pode usar o atalho B.
Conforme você clica e arrasta irá criar curvas. Depois você pode editar essas curvas utilizando a ferramenta de edição de nós, que pode ser acessada pelo atalho N.
Nós e Segmentos
Um nó é cada ponto de uma forma, e um segmento é a linha entre dois nós, como você pode ver na imagem acima no desenho do matinho. Para selecionar um ou mais nós utilizamos a ferramenta de edição de nós N.
Ainda temos algumas opções que podemos alterar nestes elementos, que se encontram marcados na imagem abaixo. Mas vamos aprender a usar os atalhos. Vou seguir aqui a mesma ordem presente na imagem abaixo.
-
Duplo clique- ao clicar duas vezes em um segmento você criará um novo nó -
Delete- apaga o nó selecionado, mantendo os outros nós ligados -
Shift + J- junta dois nós -
Shift + B- quebra o segmento selecionado, separando-o da forma inicial -
Alt + J- junta dois nós criando um novo segmento -
Alt + Backspace- apaga o segmento entre dois nós -
Shift + C- deixa o nó selecionado criar cantos -
Shift + S- deixa o nó selecionado criar formas mais suaves -
Shift + Y- deixa o nó selecionado criar segmentos simétricos -
Shift + A- deixa o nó selecionado criar formas mais suaves automaticamente
Finalização da Imagem
Um atalho muito importante é quando finalizamos uma imagem e queremos definir qual a área da imagem será visível ou exportada. Selecione os elementos e utilize o atalho Ctrl + Shift + R. Para exportar a imagem para outros formatos de imagem, utilize o atalho Ctrl + Shift + E. Caso queira utilizar em SVG mesmo, basta salvar com Ctrl + S.
Outras coisas básicas a se saber também é o Zoom, que basta segurar a tecla Ctrl e rolar a rodinha do mouse. Para mover o que você enxerga basta clicar com a rodinha do mouse e arrastar. Para espelhar a forma na vertical pressione V e na horizontal pressione H.
Esta foi apenas uma introdução bem breve. Ainda há muito mais no Inkscape. No próximo post veremos como animar nossos SVG’s.
