Artes Gráficas para

Games I
Prof. Marcio Ferreira/Prof.(a) Andreia
Inkscape
Artes Gráficas para Games I Inkscape
2/68
Prof. Marcio Ferreira

• Official site : https://inkscape.org/pt-br

Artes Gráficas para Games I Inkscape
3/68
Prof. Marcio Ferreira

Reconhecimento de
Ambiente – Tela
Principal
Artes Gráficas para Games I Inkscape – Navegando pela tela
4/68
Prof. Marcio Ferreira

Ctrl+setas para rolar pelo

teclado. (Tente isto agora
para rolar este documento
para baixo.)
Você pode também arrastar
a lousa com o botão do meio
do mouse.
E possível também usar as
barras de rolagem (pressione
Ctrl+B para mostrar ou
esconde-las). A
Botão do seu mouse também
funciona para rolar
verticalmente; pressione Shift
junto
com a roda para rolar
horizontalmente.
Artes Gráficas para Games I Inkscape – Navegando pela tela
5/68
Prof. Marcio Ferreira

Aumentantdo e
diminuindo o Zoom

CTRL + scroll do mouse

SHIFT + scroll do mouse
Ou digitar o valor para
aumentar ou diminuir no
Zoon
Artes Gráficas para Games I
Prof. Marcio Ferreira
Criando e administrando
documentos
Inkscape – Navegando pela tela
6/68
• Para criar um documento novo vazio, utilize
o menu arquivo / novo ou pressione CTRL +
N
• Para abrir um documento SVG (Scalable
Vector Graphics) utilize o menu Arquivo /
Abrir ou pressione CTRL + O
• Para salvar, utilize o menu Arquivo / Salvar
ou CTRL + S ou salvar como (SHIFT + CTRL
+ S)
• Ele abre uma janela separada para cada
documento, você pode navegar entre elas
pelo gerenciador de janelas ou ALT + TAB
Artes Gráficas para Games I Inkscape – Navegando pela tela
7/68
Prof. Marcio Ferreira

• Selecione o menu Arquivo / Propriedades do Desenho ou

as teclas de atalho SHIFT + CTRL + D

Propriedades do desenho
Artes Gráficas para Games I Inkscape – Navegando pela tela
8/68
Prof. Marcio Ferreira

• Passo 1 – Escolher a ferramenta Retângulo. (Desenho um

retângulo na área de trabalho do documento.
• Passo 2 – Clicar com o botão esquerdo do mouse no ponto
referenciado pela seta.

Primeiros rabiscos

• Passo 3 – Para arredondar as extremidades, arraste o mouse

no sentido diagonal esquerda e para baixo
Artes Gráficas para Games I Inkscape – Navegando pela tela
9/68
Prof. Marcio Ferreira

• Agora vamos criar 4 retângulos como visto abaixo:

Primeiros rabiscos

• Para isto selecione o primeiro quadrado efetue uma copia

utilizando o menu ou após a seleção CTRL + C.
• Posicione cada retângulo como acima.
Artes Gráficas para Games I Inkscape – Navegando pela tela
10/68
Prof. Marcio Ferreira

• Vamos mudar de cor cada retângulo:

Selecione cada um e escolha na palheta de cor, conforme
cores abaixo:

Primeiros rabiscos
Artes Gráficas para Games I Inkscape – Navegando pela tela
11/68
Prof. Marcio Ferreira

• Agora vamos inserir um texto em cada retângulo:

• Selecione a ferramenta Texto
• Clicar no quadrado verde. 1.
• Selecione fonte/estilo/tamanho/cor Branca /
Primeiros rabiscos

• digitar o número 1
• Escolher a ferramenta Seletor
• Observe a imagem se ficou selecionado.
Artes Gráficas para Games I Inkscape – Navegando pela tela
12/68
Prof. Marcio Ferreira

• Traga o número para centro, selecionado e arrastando com

o mouse.

Primeiros rabiscos
• Caso queira aumentar o numero, basta selecionar as setas e
redimencionar.
Artes Gráficas para Games I Inkscape – Navegando pela tela
13/68
Prof. Marcio Ferreira

• Vamos alinha o objeto número dentro do quadrado.

Primeiros rabiscos
• Selecione Seletor , pressione a tecla SHIFT, clicar no
objeto do número com o botão esquerdo do mouse e
selecionar também o próprio quadrado..
• Agora clicar na opção de menu Objeto / Alinhar e
Distribuir
• Em alinhamento selecione centralizar no eixo vertical.
• Em alinhamento selecione centralizar no eixo horizontal.
• Repetir os passos anteriores para alinhamentos dos
números nos demais quadrados.
Artes Gráficas para Games I Inkscape – Navegando pela tela
14/68
Prof. Marcio Ferreira

• Vamos salvar o arquivo:

Primeiros rabiscos
• Para salvar o arquivo, basta clicar no menu arquivo / salvar
ou utilize as teclas de atalho CTRL + S
• De um nome ao seu arquivo.
• A extensão do arquivo em Inkscape e .SVG
Artes Gráficas para Games I Inkscape – Navegando pela tela
15/68
Prof. Marcio Ferreira

• Exportação do arquivo:
Primeiros rabiscos • Clicar na opção de menu Arquivo, e em sequiada Exportar Imagem PNG (ou utilizar as teclas de atalho
SHIFT+CTRL+E).

• Confirmar ou alterar o tamanho da Imagem.

• Clicar no botão Exportar Como... E definir o Nome do arquivo e escolher para qual pasta o arquivo será exportado.

• Para efetivar a exportação, clicar no botão Exportar

Artes Gráficas para Games I Inkscape – Navegando pela tela
16/68
Prof. Marcio Ferreira

• Ferramenta Elipse:
Primeiros círculos: corpo
• Segurando SHIFT+CTRL e criar um circulo mais ou menos
como a figura abaixo:
• Usar a ferramenta Seletor e selecionar a figura e definindo a
cor do círculo como azul
Artes Gráficas para Games I Inkscape – Navegando pela tela
17/68
Prof. Marcio Ferreira

• Ferramenta Elipse:
Primeiros círculos: corpo
• Ainda como o circulo selecionado, clicar na opção de menu Editar, e em
seguida Duplicar (ou utilizar as teclas de atalho CTRL+D), para criação
de um novo círculo.
• Com a ferramenta Selector, arraste o novo circulo para baixo obtendo a
seguinte imagem:
• Com as teclas SHIFT + CTRL pressionadas, aumentar o novo circulo
mais ou menos como a próxima imagem:
Artes Gráficas para Games I Inkscape – Navegando pela tela
18/68
Prof. Marcio Ferreira

• Ferramenta Elipse:
Primeiros círculos: corpo
• Selecione os dois círculos como abaixo:
Artes Gráficas para Games I Inkscape – Navegando pela tela
19/68
Prof. Marcio Ferreira

• Ferramenta Elipse:
Primeiros círculos: corpo
• Selecione opção de menu Objeto/Preenchimento e contorno:
Artes Gráficas para Games I Inkscape – Navegando pela tela
20/68
Prof. Marcio Ferreira

• Ferramenta Elipse:
Primeiros círculos: corpo
• Mantenha os 2 círculos selecionados:
Artes Gráficas para Games I Inkscape – Navegando pela tela
21/68
Prof. Marcio Ferreira

• Ferramenta Elipse:
Primeiros círculos: corpo
• Retirar o preenchimento dos 2 círculos, clicando em Preencher e depois em X,
não esquecer do contorno antes :
Artes Gráficas para Games I Inkscape – Navegando pela tela
22/68
Prof. Marcio Ferreira

• Ferramenta Elipse:
Primeiros círculos: corpo
• Selecione na barra de ferramentas, a Caneta bézier faça o desenho
conforme abaixo, indicando na linha tracejada:
Artes Gráficas para Games I Inkscape – Navegando pela tela
23/68
Prof. Marcio Ferreira

• Ferramenta Elipse:
Primeiros círculos: corpo
• Selecione todos os elementos, conforme abaixo:
Artes Gráficas para Games I Inkscape – Navegando pela tela
24/68
Prof. Marcio Ferreira

• Ferramenta Elipse:
Primeiros círculos: corpo
• Acessar a opção de menu Caminho e depois União para obter o seguinte efeito:

• Clicar fora da área do boneco, para obter o efeito da ferramenta seletor.

Artes Gráficas para Games I Inkscape – Navegando pela tela
25/68
Prof. Marcio Ferreira

• Desenhe:
Exercícios 1
Artes Gráficas para Games I Inkscape – Navegando pela tela
26/68
Prof. Marcio Ferreira

• Desenhe:
Exercícios 2
Artes Gráficas para Games I Inkscape – Navegando pela tela
27/68
Prof. Marcio Ferreira

• Desenhe:
Exercícios 3
Artes Gráficas para Games I Inkscape – Navegando pela tela
28/68
Prof. Marcio Ferreira

• Adicione uma caixa ou retângulo como

abaixo:

• Depois selecione no menu

Caminho\Converter em caminho
• Agora selecione a ferramenta editor de
nós escolha um dos nós e comece a
trabalhar
Artes Gráficas para Games I Inkscape – Navegando pela tela
29/68
Prof. Marcio Ferreira

• Gradiente
• Adicione uma caixa ou retângulo como
abaixo:

• Selecione a ferramenta gradiente

• Escolha um ponto.
Artes Gráficas para Games I Inkscape – Navegando pela tela
30/68
Prof. Marcio Ferreira

• Criando
um • Adicione uma caixa ou retângulo e um
garrafão circulo como abaixo:
Artes Gráficas para Games I Inkscape – Navegando pela tela
31/68
Prof. Marcio Ferreira

• Criando
um • Adicione um circulo como abaixo, pode
garrafão ser de qualquer cor:

• Depois selecione o menu

caminho\converter em caminho
Artes Gráficas para Games I Inkscape – Navegando pela tela
32/68
Prof. Marcio Ferreira

• Criando
um • Selecione o seletor para o objeto ficar
garrafão como abaixo
Artes Gráficas para Games I Inkscape – Navegando pela tela
33/68
Prof. Marcio Ferreira

• Criando
um • Adicione um retângulo como abaixo
garrafão
Artes Gráficas para Games I Inkscape – Navegando pela tela
34/68
Prof. Marcio Ferreira

• Criando
um • Selecione os dois objetos como abaixo:
garrafão
Artes Gráficas para Games I Inkscape – Navegando pela tela
35/68
Prof. Marcio Ferreira

• Criando
um • Selecione no menu Objeto\Alinhar e
garrafão distribuir\Centralizar no eixo vertical
Artes Gráficas para Games I Inkscape – Navegando pela tela
36/68
Prof. Marcio Ferreira

• Criando
um • Selecione o menu Caminho\União
garrafão
Artes Gráficas para Games I Inkscape – Navegando pela tela
37/68
Prof. Marcio Ferreira

• Criando
um • Selecione a ferramenta Editor de nós
garrafão
Artes Gráficas para Games I Inkscape – Navegando pela tela
38/68
Prof. Marcio Ferreira

• Criando
um • Selecione a ferramenta Editor de nós
garrafão
Artes Gráficas para Games I Inkscape – Navegando pela tela
39/68
Prof. Marcio Ferreira

• Criando
um • Com a ferramenta Editor de nós clicar
garrafão nos pontos abaixo:
Artes Gráficas para Games I Inkscape – Navegando pela tela
40/68
Prof. Marcio Ferreira

• Criando
um • Posicione o curso no ponto abaixo e puxe
garrafão para ficar conforme desenho nos dois
lados, aumente o desenho para facilitar:
Artes Gráficas para Games I Inkscape – Navegando pela tela
41/68
Prof. Marcio Ferreira

• Criando
um • Selecione o objeto com o seletor
garrafão
Artes Gráficas para Games I Inkscape – Navegando pela tela
42/68
Prof. Marcio Ferreira

• Criando
um • Selecione cor de contorno, verifique se
garrafão Contorno no Width esta com
aproximadamente 1,600
Artes Gráficas para Games I Inkscape – Navegando pela tela
43/68
Prof. Marcio Ferreira

• Criando
um • Em Cor de contorno selecione Roda e
garrafão replique a cor conforme abaixo.
Artes Gráficas para Games I Inkscape – Navegando pela tela
44/68
Prof. Marcio Ferreira

• Criando
um • Eu não gostei como ficou a diferença
garrafão entre os lados, então vamos tirar esta
diferença.
Artes Gráficas para Games I Inkscape – Navegando pela tela
45/68
Prof. Marcio Ferreira

• Criando
um • Vamos adicionar um retângulo conforme
garrafão figura abaixo, bem no centro:
Artes Gráficas para Games I Inkscape – Navegando pela tela
46/68
Prof. Marcio Ferreira

• Criando
um • Selecione os dois:
garrafão
Artes Gráficas para Games I Inkscape – Navegando pela tela
47/68
Prof. Marcio Ferreira

• Criando
um • Selecione o menu Caminho\Diferença:
garrafão
Artes Gráficas para Games I Inkscape – Navegando pela tela
48/68
Prof. Marcio Ferreira

• Criando
um • Aplique um CTRL + D, para duplicar e
garrafão arraste conforme abaixo:
Artes Gráficas para Games I Inkscape – Navegando pela tela
49/68
Prof. Marcio Ferreira

• Criando
um • Selecione a ferramenta Inverter os objetos
garrafão selecionados
Artes Gráficas para Games I Inkscape – Navegando pela tela
50/68
Prof. Marcio Ferreira

• Criando
um • Aproxime os objetos conforme abaixo:
garrafão
Artes Gráficas para Games I Inkscape – Navegando pela tela
51/68
Prof. Marcio Ferreira

• Criando
um • Selecione os dois objetos:
garrafão • Selecione Caminho\União
Artes Gráficas para Games I Inkscape – Navegando pela tela
52/68
Prof. Marcio Ferreira

• Criando
um • Vamos duplicar a garrafa para manipular
garrafão a parte interna da garrafa (CTRL + D)
Artes Gráficas para Games I Inkscape – Navegando pela tela
53/68
Prof. Marcio Ferreira

• Criando
um • Tirar o contorno da segunda garrafa:
garrafão • Cor de contorno X:
Artes Gráficas para Games I Inkscape – Navegando pela tela
54/68
Prof. Marcio Ferreira

• Criando
um • Criar um circulo conforme abaixo, com
garrafão uma cor um pouco diferente:
Artes Gráficas para Games I Inkscape – Navegando pela tela
55/68
Prof. Marcio Ferreira

• Criando
um • Selecione o menu Caminho\Converte em
garrafão caminho
Artes Gráficas para Games I Inkscape – Navegando pela tela
56/68
Prof. Marcio Ferreira

• Criando
um • Criar os pontos do caminho, clicando no
garrafão ponto vermelho conforme abaixo:
Artes Gráficas para Games I Inkscape – Navegando pela tela
57/68
Prof. Marcio Ferreira

• Criando
um • Arraste para baixo no ponto indicado em
garrafão preto pelo cursor:
Artes Gráficas para Games I Inkscape – Navegando pela tela
58/68
Prof. Marcio Ferreira

• Criando
um • Criar o ponto do outro lado, e arraste
garrafão para baixo conforme a figura:
Artes Gráficas para Games I Inkscape – Navegando pela tela
59/68
Prof. Marcio Ferreira

• Criando
um • Selecione os dois
garrafão objetos\Caminho\Diferença
Artes Gráficas para Games I Inkscape – Navegando pela tela
60/68
Prof. Marcio Ferreira

• Criando
um • Vamos diminuir a figura um pouco,
garrafão troque de cor e arraste para dentro da
outra garrafa conforme exemplo:
Artes Gráficas para Games I Inkscape – Navegando pela tela
61/68
Prof. Marcio Ferreira

• Criando
um • Vamos diminuir a figura um pouco,
garrafão troque de cor e arraste para dentro da
outra garrafa conforme exemplo:
Artes Gráficas para Games I Inkscape – Navegando pela tela
62/68
Prof. Marcio Ferreira

• Criando
um • Altere as cores de fundo e a cor azul, bem
garrafão como a espessura de contorno, conforme
figura abaixo:
Artes Gráficas para Games I Inkscape – Navegando pela tela
63/68
Prof. Marcio Ferreira

• Criando
um • Altere as cores de fundo e a cor azul, bem
garrafão como a espessura de contorno, conforme
figura abaixo:
Artes Gráficas para Games I Inkscape – Navegando pela tela
64/68
Prof. Marcio Ferreira

• Treinamentos
Práticos
Artes Gráficas para Games I Inkscape – Navegando pela tela
65/68
Prof. Marcio Ferreira

• Treinamentos
Práticos
Artes Gráficas para Games I Inkscape – Navegando pela tela
66/68
Prof. Marcio Ferreira

• Treinamentos
Práticos
Artes Gráficas para Games I Inkscape – Navegando pela tela
67/68
Prof. Marcio Ferreira

• Treinamentos
Práticos
Artes Gráficas para Games I Inkscape – Navegando pela tela
68/68
Prof. Marcio Ferreira

• Treinamentos
Práticos