escolas da rede municipal.

Sobre a oficina de Inkscape

A Michael Berti por efetivar a oficina de Inkscape e
acreditar na força do opensource.
A oficina de A Márcio Borzuk por acatar a idéia e implantá-la
Inkscape é parte de um nas instituições a qual leciona.
projeto chamado Tecno A Aurélio Heckert e ao pessoal do Inkscape Brasil
Design, desenvolvido por disponibilizar material didático o qual me inspirou
pelo curso de ADS fortemente e muito me ensinou.
(Análise e Tecnologia de Desenvolvimento de Sistemas) da
faculdade Univale de Ivaiporã-PR.
A duração da oficina é de 4 horas e os 1. Introdução
participantes tem direito a um certificado expedido pela
própria Univale. Nós homo sapiens temos uma ligação muito forte
Além do Tecno Design outros projetos como o com o ato de desenhar. Tando que ele veio antes da
Tecno News (jornal de publicação bimestral) e a Tecno escrita, basta ver aquelas belas pinturas rupestres
Week (feira anual do curso) trazem em seu lema uma maior espalhadas pelo mundo. Mais do que isso, o desenho é
integração da informática com a comunidade local. uma prática intuitiva em nós, dê uma caneta e papel a uma
Para maiores informações, acesse: criança que rapidamente ela começa a tracejar e ainda que
www.univale.com.br/tecnodesign não compreendemos de início o que ela pretende, em sua
cabeça aquilo é uma belíssima obra!

Sobre o autor Quem não se pegou desenhando coisas aleatórias

ao conversar ao telefone? Que ser apaixonado não
Cícero Moraes é digital desenhou coraçõezinho atravessados pela flecha do cupido?
designer, eventual palestrante e Pois é... somos cativados pela arte de desenhar, somos
instrutor técnico. Autodidata, amantes desse ato que remonta a pré-história.
aprendeu sua profissão na internet,
lendo diversos tutoriais e artigos Infelizmente muitos de nós se julga uma verdadeira
sobre computação gráfica. Hoje retribui essa informação negação nessa arte e acaba deixando de lado esse exercício
escrevendo seus próprios, onde compartilha o que delicioso e muito bom para o cérebro. Mas a coisa não é
aprendeu. bem assim e você pode sim, se tornar um bom desenhista!
Participou de diversas publicações online e Não se trata de uma técnica tirada de livros de auto-ajuda
impressas, lidas em todo o Brasil. do tipo "you can due it!" mas no fato de que todos nós, com
Está envolvido em vários projetos voltados para um pouco de esforço e dedicação, alcançar tudo o que
instituições de ensino superior e prefeituras, cujo principal desejamos, desde que esse objeto de desejo seja algo
objetivo é levar ao dia-a-dia das pessoas não apenas o plausível :)
software livre, mas todo o conhecimento que ele oferece
através de oficinas, cursos e eventos. A oficina de Inkscape Tecno Design vai
Mais informações e contato pelo site pessoal: proporcionar as bases desse caminho para você. As bases
http://cogitas3d.site.vu do caminho do conhecimento rumo ao ato de bem desenhar.
Serão quatro horas de desenho vetorial e criatividade postos
a prova, de uma forma bem divertida e didática. Com um
Agradecimentos pouco de treino, você pode não se tornar um da Vinci, mas
com certeza vai sair melhor do do que entrou. Mas não
A Aleksandro Montanha por dar a idéia inicial de esquente com isso, vamos fazer tudo na paz, na maciota,
um curso de Inkscape. curtindo cada comando aprendido ou conceito explanado.
A Luciano Lourenço pela prima inspiração de
escrever essa apostila. Boa sorte e bons estudos!
À minha irmã Elizângela Patrícia, pelo lampejo e
motivação de desenvolver uma oficina e oferecê-la as

Cícero Moraes – http://cogitas3d.site.vu Projeto Tecno Design :: Bitmaps integrando pessoas Página 1

2.Vetorial e Bitmap
Nessa oficina você vai aprender um pouco de
Inkscape. O Inkscape é um programa para confecção de
desenhos vetoriais... vetoriais? Espere um pouco, que
diabos é isso?
Pois bem, de que adianta explicar que o Inkscape
trabalha com arquivos SVG, que é um programa opensource
e etc. se você desconhece o significado de vetorial? Já que
temos apenas quatro horas para brincar e aprender, vamos
enxugar o conteúdo e trabalhar apenas o essencial. Sobre
SVG, opensource, história do Inkscape e cia. ltda. temos a
internet para consultas posteriores.
Vamos nos ater inicialmente ao termo Vetorial. É
impossível explicar o que ele significa sem compará-lo a
uma imagem raster ou bitmap. Com certeza você já ouviu
falar de bitmap, a não ser que nunca usou o Pain na sua
vida. Se não ouviu vamos lá, bitmap é uma imagem formada
por muitos pontinhos chamados pixels. Não entendeu?
Então olhe essa imagem abaixo:
A princípio nada de interessante, mas se dermos
um zoom nela, se nos aproximarmos bastante veja só:
Ela vai ficar quadriculada, ou serrilhada. Esses
quadradinhos são os pixels.
Cícero Moraes – http://cogitas3d.site.vu Projeto Tecno Design :: Bitmaps integrando pessoas
Agora, vamos dar uma olhada na imagem vetorial:
Novamente nada de espantoso, então vamos dar
um zoom na imagem e ver o que acontece:
Interessante não? Não ficou serrilhada! Isso
aconteceu por que trata-se de uma imagem matemática
formada por linhas. Você pode ser aproximar o resto da vida
dela que a sua qualidade permanecerá a mesma.
A princípio a diferença entre os dois tipos de
imagem é esse:
Bitmap – Imagem formada por quadradinhos
chamado pixels. Quando mais se dá zoom, mais se vê
esses quadradinhos.
Vetorial – Imagem matemática formada geralmente
por linhas, a qualidade é a mesma independente do zoom.
Obviamente essa não é a explicação mais correta
ou mesmo mais inteligente, mas é o que você precisa saber
por enquanto para diferir bem um tipo do outro.
Depois de saber desse conceito muitas perguntas
devem estar pululando em sua cabeça... perguntas do tipo:
Por que existe desenho vetorial?
Por que sendo o vetorial um desenho com
qualidade infinita não se usa ele em tudo?
E outras tantas mais. O caso é que o vetorial é
muito útil em alguns casos onde se precisa de uma
qualidade refinada para se apresentar um tipo de imagem. É
o caso de letras, logotipos, desenhos técnicos e para o
recorte de adesivos. Já os bitmaps, usa-se largamente em
imagens com grande quantidade de cores e detalhes.
Página 2

Para saber quando se usar um ou outro é
necessário alguma experiência e isso você só vai
conseguir treinando bastante e se familiarizando com o
programa. Então não percamos tempo e vamos mexer nele!
3. Primitivas
Agora que você já tem uma noção básica do que é
desenho vetorial, vamos começar a trabalhar com o
Inkscape. Ao abrir o programa você verá a seguinte
interface:
Perceba que ao centro da parte branca há o
desenho de uma folha. Ela está no formato A4 (21x29,7
cm), que nada mais é do que aquelas folhas de sulfite as
quais compramos nas papelarias. É nessa área branca que
faremos os nossos desenhos.
Para começar, vamos criar uma
figura bem simples, um quadrado ou
retângulo, para tal, vá a parte direita
superior e clique no ícone ao qual a flexa
ao lado aponta.
O retângulo que criaremos parecerá com esse
azulzinho aí em baixo:
Cícero Moraes – http://cogitas3d.site.vu Projeto Tecno Design :: Bitmaps integrando pessoas
Para saber como fazer basta olhar na próxima
imagem. Os passos serão descritos usando como base a
captura de tela anterior.
1) clica no ícone, 2) clica no
primeiro canto do retângulo e
sem soltar o botão esquerdo
do mouse 3) arraste até o
seguindo canto do retângulo.
Barbada não? Para que você se familiarize com os
comandos e desenvolva a coordenação motora atralada a
esse processo, é essencial que repita esse exercício várias
vezes. Invista alguns minutos e encha a tela de retângulos
como aparece na imagem abaixo:
Veja bem, não precisa ficar igual a imagem acima,
ela serve apenas como referência. O importante aqui é que
você "pegue o jeito" de inserir a figura de modo a fazê-lo
sem pensar.
Se você desejar apagar algumas
dessas figuras basta clicar no ícone de
seleção.
Em seguida clicar na figura a ser apagada e por fim
pressionar a tecla del Del.
Se você apagar algo sem querer basta volta a cena.
Pode-se fazer isso de dois modos:
1) Indo no menu superior em Editar --> Voltar.
2) Pressionando Crtl e sem soltá-lo pressionar também o Z,
o conhecido Crtl+Z.
Página 3
 Existem também os comandos de zoom
da cena. Caso você deseje aproximar a tela (mais
zoom), pressione a tecla + (mais).

Caso deseje afastar a tela (menos

zoom), pressione a tecla - (menos)
Show não? Experimente fazer o mesmo com as
Caso deseje mover a tela de trabalho outras figuras. Elas são responsáveis pelo
sem dar zoom, basta pressionar a roda do redimensionamento do retângulo. Agora que você aprender
mouse e sem soltá-la mover o mouse na a inserir um retângulo não há mais empecilhos para pular as
direção pretendida. próximas primitivas.
Quando trabalhamos com figuras primitivas, nesse
caso o retângulo, o Inkscape nos permite algum tipo de
edição dessas mesmas. Para compreender bem o que
pretendo explicar, crie um novo documento indo no menu
em Arquivo --> Novo --> Padrão.

Em seguida crie um
retângulo usando os passos
descritos anteriormente e não
faça nada além disso. O que
teremos do processo é algo
semelhante a essa figura ->

Perceba que temos três figuras que estão

posicionadas nos cantos do retângulo. Duas quadradas e Aproveite e antes de pularmos para a próxima
uma circular. matéria divirta-se com o círculo, a estrela e o espiral.

4. Pintando
Fizemos um monte de retângulos, em seguida
círculos, estrelas e espirais. Agora chegou a hora de tornar
as coisas mais divertidas. Que tal pintarmos os nossos
desenhos? Antes de efetivar o processo olhe na parte
inferior da área de trabalho do Inkscape. Nela você verá uma
série de quadradinhos coloridos. É a nossa palheta de
Essas figuras menores são os manipuladores de
cores.
transformação do objeto. Vamos tomar como exemplo a
figura circular. Se movermos a seta do mouse sobre ela e
clicarmos no botão direito do mouse sem soltar...

... e em seguida arrastarmos abaixo ou ao lado, o nosso

retângulo ficará com os cantos arredondados!

Cícero Moraes – http://cogitas3d.site.vu Projeto Tecno Design :: Bitmaps integrando pessoas Página 4
 Perfeito, agora tomemos como exemplo duas
formas primitivas que aprendemos anteriormente, o círculo
e a espiral.

Agora, a exemplo do círculo, pinte-a, nesse caso de

vermelho.

A primeira coisa que faremos é

selecionar o círculo. Lembrando que
devemos clicar no ícone de seleção.

Em seguida, clique em uma das cores da palheta, nesse

caso o vermelho.

Ué? O que aconteceu?

Que pintura gozada! Simples, perceba que o círculo

é um objeto fechado. Ele inicia e termina numa linha. Já a
espiral é um objeto aberto. Ligo, ao pintar o Inkscape tenta
fechar os pontos, mas como o desenho não tem essa
característica acaba tomando um aspecto um tanto exótico.

Com o tempo você vai compreender bem por que

isso acontece. O fato é o seguinte, se você deseja pintar a
Aproveite e brinque com as outras cores antes de linha da espiral, deve pressionar o Shift e sem soltá-lo
partirmos para o próximo passo. Uma vez feito isso, pressionar a cor que você deseja, nesse caso o azul.
selecione a espiral.

Cícero Moraes – http://cogitas3d.site.vu Projeto Tecno Design :: Bitmaps integrando pessoas Página 5

Vamos ver o resultado de mais perto.
Para fixar bem o conteúdo, encha a área de
trabalho de figuras diferentes pintadas com as mais
variadas cores.
5. Mais pintura e efeitos
Você aprendeu a pintar o seu objeto, mas a coisa
não pára por aí. Existe muito mais entre uma pintura e um
efeito de cor do que julga a nossa vã filosofia.
Cícero Moraes – http://cogitas3d.site.vu Projeto Tecno Design :: Bitmaps integrando pessoas
Para começarmos a nos aprofundar na arte de
editar a pintura de objetos, vamos criar uma cena com um
retângulo. E em seguida selecioná-lo.
Em seguida clique no ícone de edição de pintura de
objetos.
Prontamente uma janela se abrirá na parte direita
da área de trabalho.
Para facilitar a visualização desloque o retângulo
um pouco á esquerda. Para tal, clique na rodinha do mouse
e sem soltá-la desloque a área de trabalho movimentando o
mouse.
Página 6

Veja que temos quatro faixas abaixo precedidas
pelas letras R, G, B e A.
Por enquanto vamos nos ater somente aos três
primeiros, ou seja, o R, G e B. Mas por que? Pergunta o
dileto leitor. Bem, RGB é um código para Red, Green e Blue,
que por sua vez significa Vermelho (R), Verde (G) e Azul (B).
Isso por que através dessas três cores pode se chegar a
todas as outras que desejarmos. Sabe aquela coisa de
misturar tintas guache? Quando estamos
aprendemos que misturando amarelo e azul dá o verde, que
misturando o preto com o branco dá o cinza e assim por
diante. Pois é, o conceito é o mesmo aqui, mas as cores
resultantes são diferentes. Explico. No caso do pré nós
trabalhamos com o processo subtrativo de
Profissionalmente ele é chamado de CMYK. Ou Cyan
(Ciano), Magenta (Magenta), Yellow (Amarelo) e blacK
(Preto). Veja a imagem abaixo:
Perceba que ao se juntar todas as cores temos o
preto. No caso do blacK, temos essa opção para melhorar a
qualidade das gráficas, pois se juntarmos apenas o ciano, o
Cícero Moraes – http://cogitas3d.site.vu
magenta e o amarelo a cor resultante será um marrom
escuro, daí usa-se o preto para resolver esse probleminha.
Mas o CMYK está aqui apenas para enterdemos o
processo RGB. Veja a imagem abaixo:
Esse processo é o processo aditivo de cores, veja
que a junção das três cores resultou no branco! Ao contrário
do processo anterior que resultou no preto. Isso acontece
por que o RGB é formado pela luz que emana do monitor, já
as cores dos desenhos impressos ou feitos por guache são
resultantes de um raio de luz que bate na cor e em seguida
é recebido pelos seus olhos. Mas não se preocupe em
compreender isso de cara, o importante aqui é saber como
as cores funcionam no Inkscape e que esse usa o RGB
como sistema padrão.
Voltemos a nossa janelinha de cores. Experimente
alterar os valores dos três primeiros quadros e veja que ao
mudá-los a cor do objeto também muda.
no pré
Nesse caso, troquei a cor para um vermelho (255,
0, 0):
cores.
Viu só? Agora altere as cores de modo a criar
outras novas. Aos poucos você vai compreendendo como a
coisa funciona e pegando o jeito. Por enquanto mexa
apenas nos três primeiros campos.
Se você não quiser alterar o valor digitando um
número, basta mover a seta do mouse sobre o campo que
deseja alterar e pressionar no espaço com a tonalidade de
cor desejada:
Projeto Tecno Design :: Bitmaps integrando pessoas Página 7
 Tudo bonito, tudo legal, mas temos a pergunta que
não quer calar. Para que cargas d'água serve o quarto
campo, o A? Para responder essa pergunta, vamos criar um
outro retângulo sobre esse que desenhamos a pouco:
Para ficar mais didático altere a cor dele. Pode ser
um azul para o contraste não ficar grotesco.
Agora altere o valor do A de 255 para 125 e veja o
que acontece:
Cícero Moraes – http://cogitas3d.site.vu Projeto Tecno Design :: Bitmaps integrando pessoas
Ficou transparente! Isso por que A vem de Alpha,
que é o termo usado para definir transparência nas
imagens. Quante menor o valor, maior a transparência do
objeto.
Vamos agora para a próxima ferramenta, o Borrar.
Selecione o retângulo verde:
E em seguida altere o valor de Borrar para 10:
Essa ferramenta é bem bacana, muito útil para
efeitos de sombra e reflexão difusa. Mas manere ao usá-la,
pois ela exige um processamento razoável ao ser ativada.
6. Efeito gradiente e linhas
Até agora nós apenas pintamos os desenhos ocm
cores chapadas. E se quisermos aplicar efeitos estilo
degradê? No problem, o Inkscape permite que você faça
isso através da pintura gradiente.
Como você já está espertinho vou acelerar a
explicação senão acontecerá duas coisas, uma a apostila
Página 8
correrá o risco de ficar com quinhentas páginas e dois você Brinque um pouco e altere as posições dos pontos
vai querer me esganar por ficar duas horas explicando uma de degradê. Até enjoar.
coisa simples. Combinado?
Então, vamos criar um simples retângulo na cena.
Nesse caso, um retângulo vermelho.

Vamos compreender melhor o efeito. Pegue um

Agora procure o ícone cria e
editar degradês. Clique nele e em
seguida vamos aplicar o efeito no
retângulo criado anteriormente.
círculo e insira atrás do retângulo (para jogar ao fundo
selecione o círculo e pressione End).
Perceba que a parte vermelha está opaca e quanto
mais branco fica, mais transparente também. Que tal dar
uma olhada nas configuração de cor?

Com o retângulo selecionado pressione na

ferramenta de edição de pintura e traços.

Assim como aparece na imagem acima, clique em

uma extremidade (1) em seguida na outra (2). Fácil não?

Em seguida, clique em Editar na janela que se abrir

ao lado.

Cícero Moraes – http://cogitas3d.site.vu Projeto Tecno Design :: Bitmaps integrando pessoas Página 9
 Uma vez que você clicar
em Editar, abrir-se-á a janela Editor
de degradê. Nela alteraremos a
configuração da parte
transparente. Perceba que o alpha
da cor vermelha está em 255.
Vamos escolher a parte que está
transparente. Para que isso
aconteça clique na parte indicada
pela discreta flechinha amarela.

Viu só? Agora o objeto está totalmente opaco.

Assim que você clicar e
permanecer com o botão do Aproveite a deixa, volte ao editor de degradê e altere os
valores de modo a familiarizar-se com os conceitos
mouse clicado, aparecerá mais
uma opção de cor, nesse caso a envolvidos.

stop3155. Para selecioná-la

apenas mova a seta do mouse Exercício
sobre ela e quando ficar azul como
a figura ao lado solte o botão.
Depois que ela for
selecionada dê uma olhadinha
para o alpha (A) da cor.

Perceba que o valor está

em 0, por isso essa parte está
transparente. Para compreender
melhor, altere o valor de R e G
para 255, assim passará de
vermelho para amarelo. Crie uma esfera como a que aparece na imagem
acima. Antes de começar, observe os efeitos que foram
usados, você aprendeu todos eles.

7. Para se inspirar ou saber mais

www.inkscapebrasil.org Comunidade brasileira sobre o

Inkscape, com tutoriais, dicas e lista de discussão.

http://marcamaria.com/ Site do excelente artista Faso.

Uma amostra do que se pode fazer profissionalmente com o
Inkscape.

http://mundesign.org/ Site que fomenta o uso do Inkscape

profissionalmente.
Não aconteceu muita coisa não é mesmo? Isso por
que o alpha ainda está em 0. Experimento alterar o valor do http://openclipart.org/media/people/jonata Cliparts
alpha (A) para 255. gratuitos confeccionados pelo brasileiro Jonatã Bolzan.

Cícero Moraes – http://cogitas3d.site.vu Projeto Tecno Design :: Bitmaps integrando pessoas Página 10