Caderno INF - Ilustração Vetorial para Web [2 ed - 2019 ETEPAC]

Prévia do material em texto

Curso Técnico em Informática 
Educação a Distância 
2019 
 
Ilustração Vetorial para Web 
Anderson Elias 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
EXPEDIENTE 
 
 
Professor Autor 
Anderson Elias 
 
Design Educacional 
Deyvid Souza Nascimento 
Renata Marques de Otero 
 
Revisão de Língua Portuguesa 
Letícia Garcia 
 
Diagramação (2.ed. 2019) 
Jailson Miranda 
 
Catalogação e Normalização 
Hugo Cavalcanti (Crb-4 2129) 
 
Coordenação 
Anderson Elias 
 
Coordenação Executiva 
George Bento Catunda 
Terezinha Mônica Sinício Beltrão 
 
Coordenação Geral 
Paulo Fernando de Vasconcelos Dutra 
 
 
 
Conteúdo produzido para os Cursos Técnicos da Secretaria Executiva de Educação 
Profissional de Pernambuco, em convênio com o Ministério da Educação 
(Rede e-Tec Brasil). 
 
Maio, 2017 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Dados Internacionais de Catalogação na Publicação (CIP) de acordo com ISDB 
 
N244i 
Nascimento, Anderson Elias do. 
Ilustração Vetorial para Web: Curso Técnico em Informática: Educação a distância / 
Anderson Elias do Nascimento. – 2.ed. – Recife: Escola Técnica Estadual Professor Antônio 
Carlos Gomes da Costa, 2019. 
60 p.: il. 
 
Inclui referências bibliográficas. 
Material produzido em maio de 2017 através de convênio com o Ministério da Educação 
(Rede e-Tec Brasil) e a Secretaria de Educação de Pernambuco. 
 
1. Ilustração vetorial. 2. Computação gráfica. 3. Desenho por computador. 4. Sites da Web 
- Projeto. I. Nascimento, Anderson Elias do. II. Título. 
 
CDU – 004.92 
 
 
Elaborado por Hugo Carlos Cavalcanti | CRB-4 2129 
 
 
 
3 
Sumário 
Introdução .............................................................................................................................................. 5 
1. Competência 01 | Introdução à Ilustração Vetorial para Web .......................................................... 6 
1.1 Conhecendo os principais formatos de representações vetoriais para web ............................................. 6 
1.1.1 Editores Bitmaps ..................................................................................................................................... 6 
1.1.2 Editores vetoriais .................................................................................................................................... 8 
1.1.3 Gráficos vetoriais .................................................................................................................................... 9 
1.1.4 Padrões de gráficos vetoriais ................................................................................................................ 11 
1.1.5 Características do SVG .......................................................................................................................... 13 
1.1.6 SVG ........................................................................................................................................................ 14 
1.1.7 SVG na Web ........................................................................................................................................... 15 
1.1.8 SVG para criação de ilustrações ............................................................................................................ 15 
2. Competência 02| Planejar Layouts e Peças Gráficas com Base em Vetores para Web .................. 18 
2.1 Interface do Inkscape ............................................................................................................................... 19 
2.1.1 Botões de Vidro ..................................................................................................................................... 20 
2.1.2 Configurando o documento .................................................................................................................. 21 
2.1.3 Ferramenta ZOOM ................................................................................................................................ 21 
2.1.4 Ferramenta Círculo, Elipse e Arcos ....................................................................................................... 22 
2.1.5 Pintura do traço .................................................................................................................................... 24 
2.1.6 Duplicando objetos ............................................................................................................................... 26 
2.2 Alterar a ordem dos objetos .................................................................................................................... 26 
2.2.1 Preenchimento ...................................................................................................................................... 27 
2.2.2 Caminhos ............................................................................................................................................... 28 
2.2.3 Editor de degradê .................................................................................................................................. 30 
2.2.4 Ferramenta texto .................................................................................................................................. 33 
2.3 Planejamento de WebSites com Inkscape ............................................................................................... 36 
 
 
 
4 
2.3.1 Definindo formatos personalizados ...................................................................................................... 37 
2.3.2 Camadas ou Layers ................................................................................................................................ 38 
2.3.3 Grade ..................................................................................................................................................... 39 
2.3.4 O layout ................................................................................................................................................. 40 
2.3.5 Linhas Guias .......................................................................................................................................... 42 
2.3.6 Título do site ......................................................................................................................................... 44 
2.3.7 Sombra .................................................................................................................................................. 45 
2.3.8 O Logotipo ............................................................................................................................................. 48 
2.3.9 Ferramenta Criar Estrelas e Polígonos .................................................................................................. 48 
2.3.10 Ferramenta Texto Parágrafo ............................................................................................................... 50 
2.3.11 Adicionando Imagens .......................................................................................................................... 51 
2.3.12 Exportação .......................................................................................................................................... 54 
2.3.13 Exportação em lote ............................................................................................................................. 54 
Conclusão ............................................................................................................................................. 58 
Referências ........................................................................................................................................... 59 
Minicurrículo do Professor................................................................................................................... 60 
 
 
 
 
 
 
 
5 
Introdução 
Caro (a) aluno (a), nos dias atuais, o processo de ilustração em computação gráfica é 
realizado por meio de editores gráficos, cuja função é criar ilustrações, tanto para o meio digital 
quanto para o meio impresso. Estes editores gráficos são divididos em duas classes, são elas: 
editores de bitmap e editores vetoriais. Explicarei aqui um pouco sobre a diferença entre estas duas 
classes de representações gráficas para que facilmente você possa distingui-las daqui pra frente. Os 
gráficos vetoriais são muito bem difundidos pela comunidade da computação gráfica e têm papel 
importante para a realização de trabalhos com alto padrão de qualidade. Além de publicidades de 
boa qualidade, sejam online ou impressas, as imagens vetoriais são utilizadas massivamente para 
confecção de websites que se beneficiam de rapidez e qualidade, principalmente quando o projeto 
utiliza ilustrações. 
Este curso será apresentado em dois capítulos: 
 
• O primeiro capítulo fornecerá conhecimento sobre os tipos de imagens e os formatos 
vetoriais para web e informações sobre suas características. 
• O segundo capítulo fornecerá informações para planejar e construir mais 
rapidamente layouts. 
 
Ao longo do curso e em cada capítulo, você conhecerá as imagens vetoriais como uma opção 
de criação, o que são, características e diferenças em relação às imagens bitmap, além de 
informações que serão úteis para o planejamento de projetos web utilizando gráficos vetoriais. 
Ao final deste curso, você será capaz de reconhecer e distinguir imagens dos tipos vetoriais e 
bitmaps, além de entender melhor as imagens vetorizadas. Estará também mais preparado para o 
mercado de trabalho, conhecendo, assim, a manipulação de imagens vetoriais, que são opções 
fundamentais, além da edição de imagens do tipo bitmap. 
 
 
 
 
 
 
 
 
 
6 
Competência 01 
1. Competência 01 | Introdução à Ilustração Vetorial para Web 
Este caderno foi desenvolvido com o intuito de proporcionar uma visão mais clara do que 
são imagens vetoriais. Abordaremos para utilização dessas imagens uma ferramenta bastante 
conhecida pela comunidade da computação gráfica que se chama Inkscape. Essa ferramenta é 
direcionada para a utilização de imagens vetoriais e é de fácil uso. É fundamental que você faça o 
download dessa ferramenta para poder dar sequência às atividades que surgirão ao longo deste 
curso. Você pode obter a ferramenta Inkscape no website do próprio fabricante, segue abaixo o link 
para download: 
 
 
 
Ao abrir a página, escolha o link para download de acordo com seu sistema operacional. 
Então, vamos lá? 
 
1.1 Conhecendo os principais formatos de representações vetoriais para web 
Iniciaremos nosso curso conhecendo os tipos de editores de imagens e quais as diferenças 
entre eles, explicando porque um é mais utilizado que o outro e qual a grande utilização de imagens 
vetorizadas. Depois, embarcaremos nos principais formatos de representações de vetores e o uso 
deles para a web. 
 
1.1.1 Editores Bitmaps 
Os editores de bitmap são mais direcionados para o uso de mídias impressas para o 
tratamento de fotografias. São caracterizados por trabalhar com cada ponto do documento. Estes 
pontos são também chamados de pixel, que são a menor unidade de visualização na tela de um 
documento do tipo bitmap. Ao agrupar vários pixels, podemos considerar que temos um mapa de 
 Acesse: https://inkscape.org/pt/download/ 
 
 
 
 
 
 
7 
Competência 01 
pixel, então, daí vem o nome para este tipo de gráfico (bitmap ou mapa de bit). Ao abrir uma 
fotografia em um editor de bitmap, podemos ver este grande mapa formado por pontos e cada um 
desses pontos recebe uma informação de cor, que forma, assim, a ilustração da imagem do 
documento. Existem diversos editores de bitmap disponíveis para o tratamento de imagens, sendo 
alguns pagos e outros grátis. Entre os mais famosos podemos considerar o Adobe Photoshop, o 
Corel Photo Paint, Adobe Fireworks e o Gimp. 
 
 
Figura 1 - imagem de alta resolução ampliada para exibir os pixels. 
Fonte: http://pt.dreamstime.com/fotografia-de-stock-ma%C3%A7%C3%A3-verde-e-vermelha-image 25443272. 
Descrição: Na figura acima uma imagem e a mesma ampliada para mostrar os detalhes dos pixels que a compõem. Do 
lado esquerdo ela ilustra duas maças. À direita a ampliação onde aparece parte de uma maçã e parte da outra, bem 
como um dos talos. 
 
 
A imagem acima exemplifica a minúscula dimensão de cada ponto. Especialmente em 
trabalhos de alta resolução, os pontos ficam perceptíveis somente quando se faz uma ampliação do 
documento, em que se revela a imagem quadriculada, mostrando cada ponto. Ao lado esquerdo da 
Figura 1 podemos ver uma bela fotografia de duas maçãs com alta resolução. Após a ampliação de 
alguma área desta fotografia, podemos enxergar os pixels, um por um, e cada um deles se refere a 
uma cor específica do documento. 
O maior problema desses tipos de documentos é quanto à resolução para o tipo de mídia 
específica, já que cada meio de exibição tem uma resolução própria. Por exemplo, a tela do 
computador tem resolução de 72dpi (dots per inch, pontos por polegadas); telas de smartphones 
têm em média 150dpi; já as páginas de mídia impressas têm em média entre 300dpi e 350dpi. 
http://pt.dreamstime.com/fotografia-de-stock-ma%C3%A7%C3%A3-verde-e-vermelha-image%2025443272
 
 
 
 
 
 
8 
Competência 01 
1.1.2 Editores vetoriais 
Os editores vetoriais têm por característica principal o trabalho com polígonos autênticos no 
documento, que são construídos matematicamente através do computador. Cada um desses 
polígonos construídos representa um conjunto de equações que monta o polígono no documento. 
Nesse caso, o que faz com que os polígonos não percam sua aparência e possam ser 
redimensionados diversas vezes, além de não causar deformidade, está relacionado à decorrência 
das informações de posição e dimensões que foi requerida pelo usuário. Como vimos antes, as 
imagens bitmap não podem realizar este feito. Embora vários editores vetoriais tenham 
ferramentas para trabalhar com documentos de bitmap, o maior destaque dos editores vetoriais 
corresponde ao fato da possibilidade de lidar com polígonos de diversas formas. Entre as 
ferramentas mais conhecidas pela comunidade da computação gráfica, podemos citar (tanto pagos 
quanto grátis): Corel Draw, Adobe Flash, Adobe Ilustrator e Inkscape. 
 
 
Figura 2 - imagem ampliada para exibir o comportamento da vetorização. 
Fonte: http://all-free-download.com/free-vector. 
Descrição: A imagem do lado esquerdo mostra a figura de uma maçã. À direita, de forma ampliada, os detalhes da 
vetorização. Podemos observar que, mesmo ampliada, a imagem não perde a qualidade. 
 
Podemos observar na Figura 2 que ao ampliar uma determinada área da imagem vetorizada 
ela não perde a qualidade. Isso porque a posição e a dimensão de cada polígono que constitui esta 
imagem são recalculadas através das fórmulas matemáticas, que garantem a posição e a dimensão 
de cada polígono em relação à proporção do que se deseja observar. 
http://all-free-download.com/free-vector
 
 
 
 
 
 
9 
Competência 01 
1.1.3 Gráficos vetoriais 
Os gráficos vetoriais correspondem aos resultados de cálculos matemáticos. Dessa forma, 
por exemplo, podemos desenhar um quadrado vermelho sem contorno em um editor vetorial e um 
código será gerado. Ele nos dirá como a função matemática irá funcionar para representar as 
propriedades do desenho como: posição, largura, altura, tamanho, deformações (caso haja) etc. 
Figura 3 – código fonte de um quadrado vermelho vetorizado 
Fonte: o autor. 
Descrição: a imagem acima exibe o código fonte gerador de um quadrado vermelho. 
 
Este código representa o quadrado vermelho exibido na Figura 4, entretanto,não se 
preocupe com o código agora, os editores vetoriais os geram. 
 
 
 
 
Figura 4 - imagem de um quadrado vetorizado. 
Fonte: o autor. 
Descrição: Imagem que representa um quadrado vermelho gerado a partir do código fonte da figura 3. 
 
Com isso, as imagens vetoriais desempenham maiores vantagens de gráficos que as imagens 
do tipo bitmap, devido à resolução que é virtualmente infinita nos gráficos vetoriais. Conforme 
 
<svg xmlns=“http://www.w3.org/2000/svg” version=“1.1”> 
<rect 
style=“fill:#ff0000;stroke-width:1;stroke-miterlimit:4;stroke-
dasharray:3, 3;strpke-dashoffset:0” 
id=“rect2985” 
width=“378.62369” 
height=329.18567” 
x=“194.22624” 
Y=“118.79946” 
/> 
</svg> 
 
http://www.w3.org/2000/svg
 
 
 
 
 
 
10 
Competência 01 
vimos, toda imagem vetorizada é representada através de um código, que se chama padrão, em 
que o software exibe sem perda, sem se preocupar com o quanto você amplie a imagem. 
Entretanto, é claro que há certa limitação para a representação através dessa tecnologia. Temos de 
usar o bom senso para compreender a necessidade de uso. Por exemplo, é mais conveniente 
representar uma fotografia através de uma imagem do tipo bitmap, por outro lado, uma logomarca 
que não possui o grau de complexidade de uma fotografia torna-se mais interessante ser 
representada através de um gráfico vetorial. 
Com estudo e dedicação, alguns artistas se destacam com trabalhos de alto nível de 
qualidade através da utilização da ilustração vetorial. Estes trabalhos conseguem representar obras 
de artes realísticas de fotografias através dos vetores. 
 
 
 
 
 
 
 
 
Figura 5 - obra de arte vetorizada. 
Fonte: www.fotoshot.com.br/vetores-impressionantes-do-artista-brasileiro-jorge-pack er/ 
Descrição: a imagem mostra um exemplo de representação de alta qualidade de uma fotografia em que aparece um 
casal onde o homem beija a testa da mulher. Note que a imagem vetorial consegue preservar a riqueza de detalhes. 
 
Na Figura 5 podemos observar que o artista conseguiu traduzir uma cena realística de uma 
fotografia em um gráfico vetorizado nos mínimos detalhes. Para esse tipo de trabalho, o artista 
http://www.fotoshot.com.br/vetores-impressionantes-do-artista-brasileiro-jorge-pack%20er/
 
 
 
 
 
 
11 
Competência 01 
empregou bastante esforço de tempo e estudo até alcançar altos níveis de qualidade e conseguir 
expressar sua obra. 
No próximo capítulo, você conhecerá alguns “truques” para a criação de efeitos que 
deixarão seu trabalho mais bonito utilizando gráficos vetoriais com o uso da ferramenta Inkscape. 
Se ainda não fez o download desta ferramenta, faça o quanto antes, pois ela é essencial para o 
decorrer deste curso. 
 
1.1.4 Padrões de gráficos vetoriais 
Até agora vimos que os gráficos vetoriais são armazenados em códigos, estes códigos são 
lidos por funções matemáticas e a representação deles é exibida através de editores vetoriais. Este 
código é denominado de “padrão” e existe uma extensa lista de padrões para gráficos vetoriais 
onde cada qual tem sua particularidade. Iremos abordar alguns dos padrões mais conhecidos para 
gráficos vetoriais e explicaremos um pouco sobre cada um. Podemos assimilar também que cada 
padrão de gráficos vetoriais está diretamente ligado à extensão do arquivo que foi salvo pela 
ferramenta que o gerou. 
Abaixo, seguem alguns dos padrões mais populares e uma breve descrição: 
 
EPS: 
O formato de arquivo de linguagem EPS (Encapsulated PostScript) pode conter 
gráficos vetoriais e de bitmap, sendo suportado por praticamente todos os 
programas gráficos, de ilustração e de layout de página. Esse formato é usado 
para transferir a arte vetorial em PostScript entre aplicativos. 
WMF: 
Sigla para Windows MetaFile Format. Baseado em 16 bits, foi criado para que 
se pudessem copiar gráficos de um programa para outro da família Microsoft 
(Word, Excel, Power Point, etc). WMF é um formato vetorial limitado, mas 
pode armazenar imagens bitmap e textos, além de gráficos vetoriais 
complexos. Muitas aplicações gráficas podem utilizar ilustrações vetoriais com 
o padrão WMF. 
EMF: 
É a evolução do padrão WMF, significando Enhaced MetaFile (MetaFile 
Melhorado). O padrão EMF armazena a informação em 32 bits, dessa forma 
 
 
 
 
 
 
12 
Competência 01 
consegue guardar mais informações que seu antecessor. No entanto, mesmo 
com a ampliação de seus recursos, ainda é inferior a outros padrões 
especialistas. 
DRW: 
É um formato para gráficos vetoriais que é suportado pelos programas mais 
populares. Entretanto, esse formato também tem limitações em comparação 
com outros formatos. 
DXF: 
Este formato foi desenvolvido pela Autodesk para possibilitar a troca de 
gráficos vetoriais entre os diferentes programas CAD (Computer Aided Design). 
Programas CAD são ferramentas especializadas no desenvolvimento de 
projetos que exigem desenhos precisos. Existem dois tipos de DXF, um 
codificado em ASCII ou em binário ou em ambos. A versão em ASCII pode ser 
aberta em editores de texto. O DXF é conhecido como um formato que exige 
mais processamento do computador para ser lido. Os dois tipos são 
reconhecidos pela maioria dos programas de desenho vetoriais. 
CDR: 
É um formato proprietário da empresa Corel para armazenar os arquivos de 
seu aplicativo de desenho vetorial, o Corel Draw. Apesar de ser desenvolvido 
para gráficos, também armazena bitmaps. Junto com o formato AI (Adobe 
Ilustrator), o CDR é especializado no uso de cores e fontes, podendo armazenar 
paletas especiais e as fontes utilizadas no projeto, além de outras informações. 
Por ser um formato proprietário, nem todas as aplicações conseguem 
interpretá-las corretamente. 
AI: 
É um formato proprietário da Adobe para seu programa de desenho vetorial 
chamado de Ilustrator. Possui as mesmas características técnicas do CDR. 
Como também é um formato proprietário junto com o CDR, nem todas as 
aplicações conseguem interpretá-las corretamente. 
SVG: 
Acrônimo de Scable Vectorial Graphics. Por não ser um padrão proprietário, 
as aplicações mais populares de desenho vetorial trabalham com este 
formato. Além de gráficos vetoriais, o formato também suporta bitmaps e 
texto. Por ser um padrão definido pela W3C (World Wide Web Consortium), 
responsável pela padronização da web, as versões mais recentes dos 
 
 
 
 
 
 
13 
Competência 01 
navegadores mais populares podem exibir seu conteúdo. 
Você pode conhecer mais sobre os padrões que a W3C gerencia e mantém 
através deste endereço: www.w3c.br 
 
1.1.5 Características do SVG 
Dentre os padrões de formatos para gráficos vetoriais, podemos observar que o padrão SVG 
se destaca por ser um excelente padrão de armazenamento para ilustrações vetoriais para web em 
comparação a outros formatos. Além disso, ele é utilizado para salvar as ilustrações realizadas no 
Inkscape, programa que veremos mais adiante. Por essas características, vamos focar nosso estudo 
nele e conhecê-lo melhor. 
 
Padrão Aberto: 
O SVG foi determinado como um padrão aberto, por ter sido definido 
através de um consórcio de várias empresas que tiveram a intenção 
de padronizar a troca de documentos através da internet. Isso quer 
dizer que a empresa que quiser pode utilizar o padrão SVG, sem ter 
que pagar pelo uso, basta seguir as regras definidas pelo padrão. 
Visualização em 
Navegadores: 
Por se tratar de um padrão aberto, vários softwares de ilustração 
vetorial como Corel Draw, Adobe Ilustrator, Inkscape, entre outros, 
podem criar e salvar documentos no padrão SVG. Além destes 
softwares de ilustração vetorial, os navegadores Chrome, Internet 
Explorer, Mozilla FireFox, Opera e outros também podem utilizar este 
padrão. 
Embutido em HTML: 
A W3C construiu o padrão SVG tendo como base o XML (Extensible 
Markup Language, ou Linguagem Extensível de Marcação Genérica), 
desta forma, os comandos de criação são bastante amigáveise fáceis 
de serem compreendidos, possibilitando o uso junto ao código HTML 
(HyperText Markup Language ou Linguagem de Marcação de 
Hipertexto). HTML é um protocolo de comunicação entre sistemas de 
informação que permite a transferência de dados entre redes de 
http://www.w3c.br/
 
 
 
 
 
 
14 
Competência 01 
computadores, principalmente na World Wide Web (Internet). 
Interação e Animação: 
O padrão SVG pode conter interação e ser animado nas páginas web 
através de uma linguagem de programação denominada JavaScipt. 
Esta linguagem define os comportamentos para os elementos nas 
páginas web, adicionando elementos interativos como botões e 
controles, bem como animações. 
 
1.1.6 SVG 
O SVG foi desenvolvido por um consórcio de grandes empresas relacionadas à internet, 
como a Microsoft, a Adobe, entre outras. Este consórcio foi chamado de World Wide Web 
Consortium, ou W3C. A W3C define regras para que você possa ver de forma igual os documentos 
que circulam pela internet, como o HTML e o SVG. Assim, qualquer programa que queira exibir 
gráficos vetoriais em SVG deve seguir essas regras para que seja mostrado igualmente em todos os 
lugares, formando, assim, um padrão. 
 
O padrão SVG pode guardar três tipos de representações, são elas: 
• Gráficos vetoriais: formas geométricas descritas através de comandos; 
• Imagens bitmaps: conhecido como mapa de bits, são imagens que contêm a 
descrição de cada pixel. Também são conhecidas como imagens raster, ou 
fotografias; 
• Texto: a informação guardada sobre o texto possibilita a edição posterior, o que não 
é possível quando o texto é convertido em imagem raster ou gráficos vetoriais. 
Os arquivos armazenados em formato textual são bem pequenos e ainda podem ser 
compactados em GZIP, sem perda de dados e, consequentemente, sem perda de qualidade. Nesses 
casos, você pode encontrar os arquivos compactados com a extensão SVGZ. 
 
 
 
 
 
 
 
15 
Competência 01 
1.1.7 SVG na Web 
Até agora vimos que os gráficos vetoriais com o formato SVG podem ser armazenados em 
arquivos com a extensão SVG, como também em páginas HTML. Para acrescentar ilustrações SVG 
em suas páginas, basta inserir o código abaixo dentro do seu código HTML 
 
 
 
 
Onde: 
 
• Data=’teste.svg’ diz o nome do arquivo e sua localização; 
• type=’image/svg+xml’ diz que o tipo do arquivo é SVG, nunca muda; 
• width=’450’ é a largura da ilustração, neste caso 450 pixels; 
• height=’300’ é a altura da ilustração, neste caso 300 pixels. 
 
Você poderá utilizar a ferramenta Inkscape como foi sugerida anteriormente, para criar suas 
ilustrações sem ter que digitar nenhum código e, se preferir, acrescentar o código HTML citado 
anteriormente. 
 
1.1.8 SVG para criação de ilustrações 
Podemos entender até agora que é de fato interessante escrever códigos para gerar 
ilustrações vetoriais, entretanto pouco conveniente quando se trata de ganhar tempo. O ideal é que 
utilizemos uma ferramenta de ilustração vetorial que salve nossos documentos em algum padrão. 
No nosso caso, estamos trabalhando com o padrão SVG. A partir daí, não temos que nos preocupar 
com a escrita correta do código e sim com o trabalho artístico que estamos realizando. 
A ferramenta que adotamos para trabalharmos com ilustrações vetoriais neste curso foi a 
Inkscape, por ser uma boa ferramenta, não precisar pagar para utilizá-la e que ainda atende aos 
padrões de criação de ilustrações vetoriais. Com esta ferramenta podemos salvar em diversos tipos 
de padrões, inclusive o padrão SVG. 
<object data=‘teste.svg’ type=‘image/svg+xml’ width=‘450’ height=‘300’> 
<\object> 
 
 
 
 
 
 
16 
Competência 01 
 
 
 
 
 
 
 
 Para começar, é necessário configurar de forma correta a ferramenta Inkscape. O 
Inkscape é capaz de subdividir o pixel para aumentar a precisão, porém isto prejudica a formação de 
imagens do tipo PNG em curvas e textos. É indicado que evitemos números fracionados como, por 
exemplo, 500,35. Nesse caso, o ideal é que fosse 500,00. 
Então, vá a Configurações do Inkscape no menu Arquivo ou pressione Shift + Ctrl + P para 
aparecer a lista de opções de configurações. No menu à esquerda selecione a opção Passos. Vamos 
configurar as três primeiras opções para 1px, 10px e 1px como mostra a Figura 6. Quando 
preencher, não se importe com os zeros depois da vírgula, eles serão preenchidos 
automaticamente. 
 
Dicas: 
Caso você não tenha instalado a ferramenta Inkscape para o idioma português 
do Brasil e deseja utilizá-lo, abra o Inkscape e siga estes passos: 
1. Tecle juntos o Shift + Ctrl + P para abrir o painel de configurações; 
2. No menu à esquerda, clique no quarto item de baixo pra cima; 
3. A tela à direita vai mudar. A primeira opção é a definição do idioma. 
Selecione a opção Portuguese/Brasil (pt_BR); 
4. Reinicie o Inkscape. 
 
 
 
 
 
 
 
17 
Competência 01 
 
 
 
 
 
 
 
 
 
 
 
 
 
Figura 6 - configuração da ferramenta para o deslocamento com o uso das teclas de setas do teclado. 
Fonte: o autor. 
Descrição: tela de configuração do Inkscape. À esquerda é exibido o menu. Do lado direito é feita a configuração do 
item escolhido. 
 
Caro (a) aluno (a), este capítulo serviu de embasamento para compreendermos um pouco 
mais sobre os tipos de gráficos e seus editores, tanto bitmaps quanto vetoriais. Em seguida, 
direcionamos nossa atenção para os gráficos vetoriais, que são o objetivo deste curso. Conhecemos 
também alguns padrões de ilustrações vetoriais e focamos no padrão SVG, por ser um padrão 
desenvolvido a partir de um consórcio de empresas que desejavam compartilhar o mesmo 
documento para diversas plataformas. Por fim, configuramos a ferramenta Inkscape para que no 
próximo capítulo possamos dar sequência aos nossos trabalhos. 
 
 
 
 
 
 
18 
Competência 02 
2. Competência 02| Planejar Layouts e Peças Gráficas com Base em 
Vetores para Web 
 
No capítulo anterior vimos que existem duas classes de ilustrações gráficas, uma 
representada pelas imagens bitmaps e outra pelos vetores. Podemos entender a diferença entres 
estas duas classes, além de suas vantagens e desvantagens. 
Entendemos que as ilustrações vetoriais são representadas através de funções matemáticas 
que exibem como resultados os gráficos vetoriais. Vimos que existem diversos formatos de padrões 
para os documentos de ilustrações vetoriais, porém focamos no padrão SVG. 
Vimos ainda que podemos acrescentar uma ilustração vetorial em SVG com um código HTML 
como se fosse uma imagem bitmap e, desde que o público de seu site possua as versões mais 
recentes dos navegadores, poderão ver seu trabalho normalmente. Mas não é só isso. Também 
aprendemos a desenhar diretamente na página web, utilizando os códigos SVG. Apesar de ser uma 
opção, saber isso pode lhe destacar no mercado, mesmo não sendo conveniente para fazer as suas 
criações por tomar muito mais tempo do que utilizar uma ferramenta para ilustrações vetoriais. 
Utilizaremos a ferramenta Inkscape, que é direcionada para construção de gráficos vetoriais 
e por ser um software de código aberto, ou seja, você não precisa comprar uma licença para usá-lo, 
o que facilita muito a criação artística. Você não precisa também se preocupar com os códigos SVG, 
apenas fazer a ilustração com as ferramentas que o software lhe proporciona. 
Neste capítulo iremos conhecer melhor esta ferramenta ao longo da construção de efeitos 
especiais como, por exemplo, a ilustração de um botão de vidro. Realizaremos aqui mais trabalhos 
práticos do que teóricos. Será fundamental neste capítulo o uso da ferramenta, então partimos do 
princípio de que você já tenha instalado o Inkscape e configurado para a língua portuguesa do 
Brasil, seguindo as configurações recomendadas no capítulo anterior. Se ainda não o fez, é só voltar 
ao capítulo anterior e seguir os passos. 
 
Então, vamos começar, mãos à obra! 
 
 
 
 
 
 
 
 
19 
Competência02 
2.1 Interface do Inkscape 
Antes de iniciarmos, é necessário conhecer a ferramenta Inkscape. Para isso, abra o Inkscape 
e acompanhe este material para entender melhor a ferramenta. 
 
Figura 7 - interface do Inkscape. 
Fonte: o autor. 
Descrição: Tela inicial do Inkscape. Na imagem podemos observar logo acima o Menu, abaixo dele a Barra de Controles. 
À esquerda, a Caixa de Ferramentas. Na parte inferior, temos a opção de Cores, Camadas, Paleta de Cores, a barra de 
Informações e escolha do Zoom de exibição. Ao centro, temos a Área de Desenho e, por fim, do lado direito, a barra 
vertical de Comandos. 
 
Iremos agora entender um pouco sobre cada área destacada na Figura 7. 
• Menu Textual: onde os comandos e controles são exibidos de forma textual; 
• Comandos: é a barra de ícones com os comandos. Também podem ser encontrados 
no menu textual; 
• Controles: é a barra sensível ao contexto, que exibe os controles referentes à 
ferramenta ativa no momento; 
• Caixa de Ferramentas: é a barra com as ferramentas, que o sistema disponibiliza para 
realização do trabalho; 
 
 
 
 
 
 
20 
Competência 02 
• Área de desenho: apesar de você conseguir desenhar em qualquer lugar desta área, 
o retângulo no meio auxilia, como a exibição de uma folha de papel. Nas 
configurações padrão é a área que será impressa; 
• Cores: exibe as cores de preenchimento e borda do objeto selecionado; 
• Camada: exibe a camada ativa no momento, junto com as configurações de exibição 
e bloqueio; 
• Paleta de Cores: disponibiliza as cores para uso; 
• Informações: exibe informações referentes ao contexto; 
• Zoom: é a caixa com opções de magnificência (qualidade em poder aumentar ou 
reduzir a imagem) do documento. 
Podemos constatar que a interface do Inkscape é parecida com muitas outras interfaces de 
softwares para as mais variadas finalidades, inclusive as que realizam ilustrações vetoriais. Isto o 
torna uma ferramenta de fácil uso. 
 
2.1.1 Botões de Vidro 
Este tipo de estilo é bastante popular em materiais gráficos, seja impresso ou digital. Você já 
deve ter visto ícones e botões com esta aparência. A Figura 8 mostra como esse efeito será 
apresentado neste caderno ao longo deste capítulo. 
 
Figura 8 - botão estilo vidro. 
Fonte: o autor. 
Descrição: a imagem mostra o exemplo de um botão de vidro em que aparece o símbolo de @, usado principalmente 
em e-mails. 
 
 
 
 
 
 
21 
Competência 02 
2.1.2 Configurando o documento 
Antes de iniciarmos cada projeto, devemos configurar o documento. Por padrão, o Inkscape 
é configurado para páginas A4, mas ele tem diversas pré-configurações de tamanho. No menu 
textual Arquivo, clique em Propriedades do Desenho ou Shift + Ctrl + D. A Figura 9 mostra a tela em 
que deve aparecer, em seguida vá até a seção de Tamanho Personalizado e ajuste os valores de 
largura e altura para 48 em ambos, selecione a unidade px (pixel) e observe que a área de desenho 
do seu documento muda para as novas configurações. Esta configuração nos dará uma área em 
pixels para desenharmos nosso botão de vidro. 
 
 
 
 
 
 
Figura 9 - Ajustando as propriedades do documento. 
Fonte: o autor. 
Descrição: tela de configuração do documento. Na aba Página, por exemplo, é possível configurar o tamanho da página 
e personalizá-la. 
 
2.1.3 Ferramenta ZOOM 
Ao selecionar o novo tamanho, a página se modifica, mas fica muito pequena para 
trabalharmos. A ferramenta Zoom oferece várias formas de visualização para podermos executar a 
tarefa mais confortavelmente. Entre as várias opções, encontra-se a Caber a Página na janela, que 
está destacada no quadro vermelho da Figura 10. Clique na Ferramenta Zoom na barra de 
ferramentas e depois no ícone destacado para ajustar a visualização da página. 
 
 
 
 
 
 
22 
Competência 02 
 
Figura 10 - Ferramenta Zoom e atalho para caber o projeto na tela. 
Fonte: o autor. 
Descrição: a figura 10 mostra em destaque a ferramenta Zoom. Com essa ferramenta é possível ajustar formas de 
visualização a fim de executar melhor a tarefa. 
 
2.1.4 Ferramenta Círculo, Elipse e Arcos 
Com a página ajustada, vamos utilizar a ferramenta Círculo, Elipse e Arcos para desenhar um 
círculo na página. Selecione a ferramenta, clique e arraste na página. Para desenhar um círculo 
perfeito, segure a tecla Ctrl e arraste de cima para baixo na diagonal. Neste momento não se 
preocupe com tamanho, posição ou cores. 
 
 
 
 
 
 
23 
Competência 02 
 
Figura 11 - Ferramenta Círculo, Elipse e Arcos. 
Fonte: o autor. 
Descrição: Exemplo de uso da ferramenta Círculo, Elipse e Arcos. Como podem ver, com ela é possível desenhar um 
círculo de forma rápida e prática. 
 
Antes de prosseguir, é conveniente explicar alguns detalhes. No canto inferior esquerdo da 
tela, você encontrará a barra de cores. Clicando sobre uma cor, você muda a cor de 
preenchimento de um objeto que esteja selecionado. Clicando com o botão direito sobre a cor, 
você pode aplicar a cor selecionada ao preenchimento ou ao contorno do objeto. 
Logo abaixo da barra de cores, o Inkscape nos dá informações sobre o objeto selecionado: 
se ele tem preenchimento ou não (se tiver, informa a cor), se tem contorno ou não (se tiver, mostra 
a cor e a espessura) e a porcentagem de opacidade, como mostra a Figura 12. 
 
 
 
Figura 12 - Taxa de opacidade de um objeto. 
Fonte: o autor. 
Descrição: A imagem mostra na parte inferior a opção de alterar a taxa de opacidade. 
 
 
 
 
 
 
24 
Competência 02 
 Opacidade é a quantidade de transparência de um objeto. O círculo 1 exibido na Figura 13 
tem 100% de opacidade, ou seja, é totalmente opaco. O círculo 2 possui 50% de opacidade e o 
círculo 3, 10%. Um objeto com 0% de opacidade torna-se invisível na tela. Se o objeto que você 
criou está com opacidade menor que 100%, digite 100 na caixa para alterar. Ou, se preferir, faça 
isso depois. 
 
Figura 13 - Opacidade de objetos. 
Fonte: o autor. 
Descrição: A imagem acima ilustra os níveis de opacidade de um círculo vermelho. Note que quanto menor a taxa de 
opacidade, mais transparente o círculo fica. 
 
2.1.5 Pintura do traço 
Para nosso trabalho, é necessário configurar a espessura do contorno do objeto, através da 
caixa de diálogo Preenchimento e Contorno. Para acessá-la, clique com o botão direito do mouse 
em cima do círculo e selecione a opção Preenchimento e Contorno, ou Shift+Ctrl+F. 
 
Figura 14 - menu para seleção da opção de Preenchimento e Contorno do objeto. 
Fonte: o autor. 
Descrição: a imagem mostra o menu com a opção Preenchimento e contorno. 
 
 
 
 
 
 
 
25 
Competência 02 
A caixa de diálogo surgirá no canto direito, como podemos observar na Figura 15 e nela 
haverá três abas: a primeira aba é a do Preenchimento do objeto. Abaixo, estão os ícones que 
configuram o preenchimento: deixe marcado o segundo ícone e selecione o primeiro quadrado. A 
cor do preenchimento, por enquanto, não importa, contanto que seja uma cor diferente do 
preto. Confira mais abaixo se o grau de desfoque está em zero e a opacidade está em 100: caso 
estejam, deixe assim. Se não estiver, ajuste para os valores citados. 
 
 
 
Figura 15 - janela de preenchimento e contorno do objeto selecionado. 
Fonte: o autor. 
Descrição: a imagem mostra o uso da ferramenta Preenchimento e Contorno. Com ela, pode-se notar no 
exemplo acima o destaque no contorno na figura do círculo. 
 
 
 
No topo da caixa, clique na aba do meio, ela define a Cor do contorno: deixe tudo 
configurado exatamente como na Figura 16.a. Em seguida, clique na terceira aba do topo. Na 
Espessura digite 0,9 e o restante deve ficar igual ao exibido na Figura 16.b. 
 
 
 
 
 
 
26 
Competência 02 
 
 
Figura 16 - menu para seleção da opção de Preenchimento e Contorno do objeto. 
Fonte: o autor. 
Descrição: a imagem mostra as opções avançadas para a configuração na ferramenta Preenchimento e Contorno. À 
esquerda, as opções da aba Cordo Contorno. À direita, as opções da aba Contorno. 
 
 
2.1.6 Duplicando objetos 
Precisamos, agora, duplicar o objeto. Para isso, vá ao menu Editar. Em seguida, em Duplicar 
ou Ctrl+D. Aparentemente nada mudou como podemos ver na Figura 17.a, mas a duplicata está lá, 
o Inkscape a coloca acima do objeto original. Pressione a tecla de seta para baixo, de seu teclado 
para a duplicata ser deslocada, como mostra a figura 17.b. 
 
2.2 Alterar a ordem dos objetos 
Como podemos perceber, o círculo que foi duplicado está à frente do círculo original e 
precisamos alterar esta ordem. O Inkscape fornece técnicas para esta necessidade, que podem ser 
feitas tanto através dos menus quanto pelo teclado, por meio de teclas de atalho, sendo esta de 
forma mais direta. 
 
 
 
 
 
 
27 
Competência 02 
Agora, precisamos colocar o objeto duplicado atrás do objeto original. Para isso, podemos 
utilizar este recurso por meio do menu Objeto e selecionar a opção Enviar para trás, porém, 
podemos ver que existem outras opções como Enviar para Frente, Recuar Um e Avançar Um. Como 
queremos apenas levar o círculo que foi duplicado para trás, podemos também fazer isto de forma 
direta, pressionando a tecla End do seu teclado e a duplicata ficará por atrás do círculo original, 
como podemos observar na Figura 17.c. 
 
Figura 17 - passos para duplicação de objeto. 
Fonte: o autor. 
Descrição: As imagens mostram os efeitos possíveis na duplicação de imagens. A figura “a” aparentemente parece 
única, mas na realidade são duas imagens. A imagem “b” mostra quando usamos a tecla seta pra baixo, a imagem 
duplicada se move para baixo. O exemplo da imagem “c” mostra quando teclamos a tecla END. A duplicada se move 
para trás da original. 
 
2.2.1 Preenchimento 
Agora vamos utilizar o preenchimento. Selecione o objeto duplicado e mude a cor para 
branco, indo na barra de cores, no canto inferior esquerdo da tela. Se estiver igual à 
Figura 18.a estará correto. 
Na caixa de diálogo Preenchimento e contorno mude o valor do Desfoque para 3 e reduza a 
opacidade para 75%. Com essas configurações, a duplicada terá o aspecto da figura 18.b. 
 
 
 
 
 
 
 
 
28 
Competência 02 
 
 
 
 
 
Figura 18 - duplicação e aplicação de transparência no objeto. 
Fonte: o autor. 
Descrição: A figura 18a mostra quando selecionamos a imagem desejada e mudamos a sua cor. Já na figura 18b o item 
alterado é a opacidade. 
 
2.2.2 Caminhos 
Vamos agora editar o círculo que está mais à frente para tomar a forma que desejamos. Para 
isso, precisamos transformar o círculo em um caminho. Caminho é o nome dado ao contorno dos 
desenhos. No caso, as ilustrações vetoriais no Inkscape são feitas principalmente com caminhos. 
Primeiro, selecione o círculo que está por cima do outro. Para isso, clique exatamente dentro dele. 
Então, vá até o menu textual e selecione o menu Caminho. Em seguida, selecione Converter 
contorno em caminho. Isto fará com que o preenchimento desapareça como mostra a Figura 
19.a. Agora, vá novamente ao menu Caminho e selecione Separar e seu gráfico ficará exatamente 
como na Figura 19.b. 
 
 
 
 
 
 
Figura 19 - utilizando a ferramenta Caminhos no objeto. 
Fonte: o autor. 
Descrição: A imagem 19a mostra o efeito caminho aplicado à figura. Note que o preenchimento desaparece. Voltando 
ao menu Caminho e clicando em separar a imagem mostra-se como na figura 19b. 
 
 
 
 
 
 
 
29 
Competência 02 
O que aconteceu foi que o Inkscape separou o contorno e o preenchimento do objeto, 
criando dois círculos: um menor e outro maior, onde um está por cima do outro, porém não dá 
ainda para ver, pois estão os dois pintados de preto (mais adiante você entenderá). Agora, clique 
dentro do objeto preto. Assim, você estará selecionando o círculo menor. Em seguida, mude a cor 
de preenchimento deste círculo menor que está selecionado para um tom de vermelho através da 
barra de cores que você já conhece. Agora, duplique esse círculo como você já aprendeu (no 
menu Editar e depois em Duplicar ou Ctrl+D). Em seguida, mude a cor dessa duplicata para branco. 
Crie novamente uma duplicata desse círculo branco. Pressione a tecla da seta para cima e 
leve a duplicata para cima como podemos ver na Figura 20.a. 
Para melhor visualização, aplique um contorno à duplicata que você moveu. Para tanto, 
clique com o botão direito do mouse na cor preta (na barra de cores) e escolha "Aplicar ao 
contorno", como podemos ver já na Figura 20.b. 
 
 
 
 
 
 
Figura 20 - utilizando a ferramenta de Duplicar e Preencher. 
Fonte: o autor. 
Descrição: as imagens mostram a criação de um círculo já duplicado. 
 
 
Segure a tecla Shift e clique no círculo branco de baixo. Dessa forma, a duplicata e o círculo 
branco original estarão selecionados, como podemos observar na Figura 21.a. 
Então, vá ao menu Caminho, depois selecione Interseção e teremos um resultado similar à 
Figura 21.b. 
 
 
 
 
 
 
 
30 
Competência 02 
 
 
 
 
 
 
Figura 21 - fazendo a interseção de um objeto no outro. 
Fonte: o autor. 
Descrição: a imagem 21a mostra o círculo original e a duplicata, ambos selecionados. Após acionar a opção Interseção, 
o resultado será similar à figura 21b. 
 
2.2.3 Editor de degradê 
Chegou o momento de trabalharmos com degradê. Então, preste bastante atenção a partir 
de agora. Na caixa de diálogo Preenchimento e contorno, clique na primeira aba, a 
do Preenchimento e clique no terceiro ícone, o de Gradiente linear. O dégradé aparecerá no objeto, 
como exibido na Figura 22. 
 
 
 
 
 
Figura 22 - aplicando degradê no objeto selecionado. 
Fonte: o autor. 
Descrição: a imagem acima mostra o círculo com efeito degradê. 
 
Agora, vá à barra de ferramentas do lado esquerdo da tela e selecione a ferramenta 
indicada na figura 23. 
 
 
 
 
 
 
31 
Competência 02 
 
 
 
 
 
 
 
Figura 23 - ferramenta de orientação para Dégradé. 
Fonte: o autor. 
Descrição: a imagem acima mostra o local da ferramenta degradê no Inkscape. 
 
 
No objeto aparecerá uma linha reta, com um ponto quadrado no canto esquerdo e 
um ponto redondo no canto direito. Com a ferramenta, clique no ponto quadrado, segurando a 
tecla Ctrl, e gire para a direita até a linha reta ficar na vertical, conforme o último objeto da Figura 
24. 
 
 
 
Figura 24 - ferramenta de orientação para dégradé do círculo menor. 
Fonte: o autor. 
Descrição: exemplo de uso da ferramenta degradê. Segurando na tecla Ctrl pode-se mover o ponto quadrado até atingir 
o efeito desejado. 
 
Quando terminar, clique fora do objeto para tirar a seleção. Agora, clique dentro do círculo 
vermelho maior vermelho selecioná-lo. Abra a caixa de diálogo Preenchimento e Contorno e clique 
na primeira aba, Preenchimento, e escolha o terceiro ícone, o Gradiente Linear, como mostrado na 
Figura 25. 
 
 
 
 
 
 
32 
Competência 02 
 
 
 
 
 
 
 
 
 
Figura 25 - preenchimento gradiente. 
Fonte: o autor. 
Descrição: tela de Preenchimento e Contorno do Inkscape. Nela, podemos observar a opção de escolha do Gradiente 
Linear. 
 
Então, selecione na barra de ferramentas, do lado esquerdo da tela, a mesma ferramenta 
utilizada para editar o degradê que você acabou de manipular e já conhece. Como antes, você 
deverá deixar a linha do degradê na vertical: a única diferença é que o ponto quadrado deverá 
ficar para baixo e o ponto circular para cima, portanto você deverá girar o ponto quadrado para a 
direita e para baixo (veja a Figura 26). 
 
 
 
 
 
Figura 26 - ferramenta de orientação para degradê do círculo maior. 
Fonte: o autor. 
Descrição: a imagem mostra as etapas para aplicação do degradê. O objetivo é girar o ponto quadrado para a direita e 
para baixo. O resultado deverá ficar como na figura da extrema direita. 
 
 
Para finalizar e dar um acabamento ao nosso trabalho, vamos dar um leve desfoque ao 
círculo maior vermelho. Volte ao painel de Preenchimento e Contorno e na abade Preenchimento 
 
 
 
 
 
 
33 
Competência 02 
altere o desfoque para 2,5. Agora clique no círculo branco menor para darmos o último ajuste. No 
painel de Preenchimento e Contorno, altere o valor do desfoque para 0,8 e a opacidade para 95%. 
 
 
 
 
 
Figura 27 - resultado de como o objeto irá ficar após aplicação do degradê. 
Fonte: o autor. 
Descrição: Resultado final do círculo após o efeito degradê. 
 
 
 
2.2.4 Ferramenta texto 
Perceba que estamos quase concluindo este trabalho, mas podemos deixá-lo ainda mais rico 
e informativo. Podemos acrescentar outros objetos ou até mesmo uma letra ou um texto dentro 
deste botão de vidro. 
Vamos supor que este é um botão que serve para chamar o aplicativo de enviar e-mail, 
então nada mais óbvio do que colocarmos o caractere “@” centralizado neste botão. 
Para isso, vamos selecionar a ferramenta Criar e Alterar Blocos de Textos, como mostrado na 
Figura 28, para inserir o texto desejado, porém neste caso seria apenas o caractere “@”. 
 
 
 
 
 
 
34 
Competência 02 
 
Figura 28 - Ferramenta para criar e editar textos. 
Fonte: o autor. 
Descrição: a imagem 28 mostra a localização da ferramenta de texto no Inkscape. 
 
Após a inserção do caractere “@”, preencha-o com alguma cor que se destaque sobre o 
botão. Neste exemplo, escolhi a cor verde, mas fica a seu critério usar qualquer cor que realce bem 
quando for colocada no botão. Agora temos uma imagem como na Figura 29. 
 
Figura 29 - inserindo texto no documento. 
Fonte: o autor. 
Descrição: a imagem mostra a inserção de texto, no caso o símbolo arroba, usando a ferramenta Texto. 
 
 
 
 
 
 
 
35 
Competência 02 
 
Precisamos agora ajustar o caractere “@” para se acomodar de forma correta ao nosso 
botão. Para isso, iremos selecionar o caractere “@” e posicioná-lo sobre o botão, como podemos 
ver na Figura 30. 
 
 
 
 
Figura 30 - inserindo texto no documento. 
Fonte: o autor. 
Descrição: a imagem mostra o resultado após arrastar o caractere @ para dentro do círculo. 
 
Note agora que embora o caractere “@” esteja sobre o botão, ainda falta uma interação 
entre o texto e o objeto. Iremos então aplicar recuos no texto para que todo o objeto se torne um e 
com isto fique mais realístico. Então, selecione o texto e aplique um recuo, para mudar a ordem de 
exibição dos objetos. Faremos isso pela forma direta, pressionando a tecla PageDown do seu 
teclado. Observe como fica seu botão. Veja na figura 31 que o efeito de brilho do botão destacou a 
parte superior do caractere “@”, tornando-o, assim, mais interativo com o botão. 
 
 
 
 
Figura 31 - mudando a ordem de apresentação dos objetos. 
Fonte: o autor. 
Descrição: a imagem mostra o efeito recuo. Pode-se notar agora que a interação do caractere @ ficou mais realístico 
com o botão. 
 
Entretanto, ainda podemos melhorar, efetuando mais um recuo na ordenação para o 
caractere “@”. 
 
 
 
 
 
 
36 
Competência 02 
 
 
 
 
 
Figura 31 - mudando a ordem de apresentação dos objetos. 
Fonte: o autor. 
Descrição: a imagem agora mostra mais um recuo dado no caractere “@”. Note que o texto agora está interagindo 
ainda mais com as tonalidades das cores do botão. 
 
 
Perceba agora que o caractere “@” também interage com a área mais escura do botão. 
Dessa forma, o texto adaptou-se totalmente ao objeto botão que, além de um reflexo na parte 
superior, também tem uma sombra na parte inferior, que foi repassada ao texto que se incorporou 
a todo objeto. 
Finalizamos este trabalho, onde criamos um botão de vidro com um caractere informativo 
que neste caso foi o “@”, utilizando várias técnicas de que a ferramenta Inkscape dispõe, como 
podemos ver o resultado na Figura 27. 
 
2.3 Planejamento de WebSites com Inkscape 
O Inkscape não gera código HTML e, consequentemente, não exporta a página web como 
outras ferramentas, porém é uma ferramenta bastante poderosa para planejar a aparência de uma 
página web, gerar protótipos e exportar partes (também conhecido como fatias) deste projeto em 
imagens PNG para que um editor de HTML possa utilizar e gerar a página web. 
PNG (Portable Network Graphics ou gráfico portável de rede) é um formato de arquivo 
gráfico bem difundido para exibir imagens com boa profundidade de cores e suporta o canal alfa, 
que proporciona uma transparência ao redor de uma imagem. 
A seguir iremos criar um projeto de aparência para um site. Você perceberá que iremos 
repetir muitas tarefas que vimos no projeto anterior, do efeito para o botão de vidro. Então, o ideal 
é que você repita a execução do efeito do botão de vidro algumas vezes para que possa usar a 
 
 
 
 
 
 
37 
Competência 02 
ferramenta sem consulta. Mas se não se lembrar de uma tarefa ou outra, é só voltar e consultar o 
que foi visto anteriormente. 
Para iniciar o novo projeto de planejamento de website, primeiro, abra o Inkscape, e vá ao 
menu Arquivo. Selecione a opção Novo e depois a opção Padrão ou tecle Ctrl + N. 
 
2.3.1 Definindo formatos personalizados 
Aqui iremos aprender a definir formatos de acordo com o tipo de projeto que desejamos. 
Então, digamos que você não queira utilizar o formato Padrão para este novo documento e deseja 
agora utilizar outro formato de documento personalizável. Vá ao menu Arquivo e selecione a opção 
Propriedades do Documento. 
Na janela que abrir, veja que no centro há uma área identificando o tamanho do documento. 
Nesta área altere o valor da largura para 960 e a altura para 600 como mostrado na Figura 32. 
Estes valores representam um bom tamanho para a resolução da maioria dos monitores 
utilizados atualmente. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Figura 32 - propriedades do documento. 
Fonte: o autor. 
 
 
 
 
 
 
38 
Competência 02 
Descrição: a imagem mostra a tela Propriedades do Desenho na aba Página. Nela, é possível personalizar o tamanho da 
imagem, por exemplo. 
 
Após, salve o projeto com o nome de arquivo que desejar, e fique atento onde salvar, pois 
iremos precisar encontrá-lo posteriormente. 
Antes de darmos sequência, pressione a tecla 5 do teclado numérico para redimensionar e 
ajustar o zoom para ocupar e expandir totalmente a área de trabalho do documento na sua tela. 
 
2.3.2 Camadas ou Layers 
Uma técnica de trabalho bastante interessante que o Inkscape utiliza são as camadas (ou 
layers). O Inkscape organiza as ilustrações em camadas e tem a mesma função que em outros 
softwares de editoração gráfica, como Gimp, Photoshop, etc. As camadas são empilhadas umas em 
cima das outras e servem para organizar o trabalho, além de facilitar a seleção de objetos, 
principalmente quando há muitos objetos distintos e ocupando praticamente o mesmo espaço no 
documento. Estas camadas podem guardar um objeto ou todos os objetos do seu documento, nada 
impede que se separe cada objeto por camada ou se agrupe todos em apenas uma camada, 
entretanto é recomendado separar por camada, principalmente quando se deseja fatiar em partes. 
Para iniciarmos, vamos até o menu Camada (Layer). Selecione a opção Adicionar ou 
pressione Shift + Ctrl + N. Na janela que abriu, informe o nome da camada e clique em adicionar 
como mostrado na Figura 33. 
 
 
 
 
 
 
Figura 33 - adicionar camada. 
Fonte: o autor. 
Descrição: assistente para adicionar camada. 
 
 
 
 
 
 
 
39 
Competência 02 
Após isso, você pode facilmente gerenciar as camadas que foram criadas e estão sendo 
utilizadas neste documento como visto na Figura 34. Para isso, pressione Shift + Ctrl + L e no painel 
do lado direito aparecerão todas as camadas, inclusive você pode adicionar mais alguma 
pressionando no botão [ + ] ou remover através do botão [ - ]. 
 
 
 
 
 
 
Figura 34 - painel de gerenciamento de camadas. 
Fonte: o autor. 
Descrição: a imagem mostra a ferramenta responsável por gerencias as camadas. Com ela é possível adicionar e 
remover camadas. 
 
 
No painel de gerenciamentode camadas você pode renomear a camada, bastando clicar no 
nome dela. Pode bloquear a camada para preservar seu conteúdo e evitar alterações acidentais. 
Pode também esconder a camada para que seus objetos não sejam visíveis em um determinado 
momento, bastando apenas clicar no ícone do “olho” para a camada que deseja. 
 
2.3.3 Grade 
O Inkscape possui uma grade para ajustar a criação de objetos e tornar o layout mais 
preciso. Para exibir a grade, vá até o menu Exibir e depois selecione Grade. A Figura 35 exibe a 
grade que ajuda na precisão do layout. 
 
 
 
 
 
 
 
40 
Competência 02 
 
 
 
 
 
 
 
 
 
Figura 35 - exibição da grade no documento. 
Fonte: o autor. 
Descrição: Tela do Inkscape exibindo a grade. Com ela é possível ter mais precisão na elaboração das imagens. 
 
 
2.3.4 O layout 
Vamos agora nos preocupar como nosso site será visto pelas pessoas, idealizar como 
queremos dispor os objetos, links, logotipos, banners de propagandas, textos e imagens que irão 
compor a página do website. 
Antes de iniciar, é importante relembrar o uso da técnica de contorno dos objetos, e esta 
será bem empregada aqui. Nela podemos definir além de outras coisas, o tamanho e a posição dos 
objetos. Desta forma, como iremos alterar o tamanho, devemos retirar o contorno usando o painel 
de Preenchimento e Contorno, como visto anteriormente. 
 
 
 
 
 
 
41 
Competência 02 
Mãos à obra. Iremos agora criar quatro retângulos e em seguida alterar suas configurações. 
A Figura 36 mostra onde se devem realizar estas alterações. 
 
 
 
Figura 36 - configuração da posição e dimensão de objetos do tipo retângulo. 
Fonte: o autor. 
Descrição: a imagem mostra a área de ajuste para o desenho. 
 
Aplique estas configurações para cada retângulo: 
• X=0, Y=470, W=960 e H=130 
• X=0, Y=40, W=210 e H=430 
• X=210, Y=40, W=750 e H=430 
• X=0, Y=470, W=960 e H=40 
 
Após estas mudanças, você pode ver como ficou o resultado através da Figura 37. 
Fique atento que todos os retângulos foram criados na camada Fatias que definimos 
anteriormente. 
 
 
 
 
 
 
 
 
 
 
 
 
 
42 
Competência 02 
Figura 37 - configuração da posição e dimensão de objetos do tipo retângulo. 
Fonte: o autor. 
Descrição: a imagem mostra o resultado obtido após a configuração nos retângulos. 
 
 
2.3.5 Linhas Guias 
As linhas guias servem para orientar o alinhamento dos objetos um ao outro. Não são 
imprimíveis e aparecem na cor azul. Observe que a grade é feita de linhas azuis, mas neste caso elas 
fazem parte de um padrão que forma a grade. Para que possamos ver melhor nossas linhas guias, 
precisamos esconder a grade. Para isso, vá ao menu Exibir e depois selecione Grade para ativar e 
novamente para desativar sua visibilidade. 
Agora você pode exibir as linhas guias através do menu Exibir e depois selecionando Guias. 
Nada acontece, porém você pode clicar ou na régua horizontal ou na régua vertical, segurar o botão 
do mouse e arrastar para o documento. Note que será exibida uma linha na cor vermelha. Isso quer 
dizer que você tem uma linha guia em seu documento e está selecionada para uso. Caso necessite 
de mais uma linha guia, basta seguir o mesmo processo, clicando e arrastando a partir de uma das 
duas réguas e no centro do documento aparecerá uma linha na cor vermelha. Entretanto, note que 
a primeira linha guia agora ficou na cor azul, o que informa que você não a selecionou. 
O Inkscape tem uma forma interessante de criar linhas guias aproveitando as laterais dos 
objetos selecionados. No entanto, ele apaga os objetos no processo. Então, vamos copiar todos os 
objetos para uma memória reservada do computador antes de converter os objetos em linhas guia. 
Primeiro você deve selecionar todos os retângulos. Vá ao menu Editar e clique na opção Selecionar 
Todos, ou utilize a tecla de atalho Ctrl + A. Agora, vá novamente ao menu Editar e selecione a opção 
Copiar, ou utilize a tecla de atalho Ctrl + C. Com os objetos guardados temporariamente, vamos 
converter os retângulos pressionando Shift + G. Para terminar essa parte, vamos colar os objetos da 
memória do computador para o documento. Vá ao menu Editar, selecione a opção Colar no Lugar, 
ou use as teclas de atalho Ctrl + Alt + V. 
Verifique se seu documento está semelhante ao da Figura 38. Você pode esconder e exibir 
utilizando o menu Exibir e selecionar a opção Guias, ou pelas teclas de atalho Shift + \ . 
 
 
 
 
 
 
 
43 
Competência 02 
 
 
 
 
 
 
 
 
 
Figura 38 - objetos alinhados através das linhas guias. 
Fonte: o autor. 
Descrição: a figura mostra a imagem agora com as linhas guias. Pode-se notar que a grade foi retirada e com a ajuda 
delas (linhas guias) há uma melhor orientação entre os objetos. 
 
Agora vamos esconder a camada Fatias que criamos no início deste projeto e em seguida 
renomear a camada debaixo. Então, siga os passos. Vá até o painel de camadas e clique no olho ao 
lado da camada Fatia. Dessa forma, esta camada se torna invisível. Clique na camada debaixo que 
tem o nome de “Camada 1” e escreva Background. Agora suas camadas devem estar como mostra a 
Figura 39. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
44 
Competência 02 
Figura 39 - camadas. 
Fonte: o autor. 
Descrição: a imagem mostra o Gerenciador de Camadas. O exemplo mostra como tornar a camada Fatia invisível, basta 
clicar no ícone “olho” à esquerda. 
 
2.3.6 Título do site 
O Título do site serve para identificar o site para quem o está visitando. Iniciaremos 
desenhando um retângulo como fizemos anteriormente. Escolha a cor que deseja, como a Figura 40 
mostra. Siga os valores para tamanho e posição como segue abaixo: 
 
• X=0, Y=470, W=960 e H=130 
 
Figura 40 - Área para o título do site. 
Fonte: o autor. 
Descrição: a imagem mostra a área para o título destacada na parte superior. 
 
 
 
 
 
 
 
 
 
 
45 
Competência 02 
Agora duplique este retângulo. Selecione o retângulo e pressione Ctrl + D. Em seguida, 
diminua 20 pixels à esquerda e 20 pixels à direita. Veja como fica na Figura 41. 
 
 
 
 
 
 
 
 
 
Figura 41 - área para o título do site duplicada. 
Fonte: o autor. 
Descrição: a imagem acima mostra a área do retângulo agora duplicada e com as margens diminuídas em ambos os 
lados. 
 
 
2.3.7 Sombra 
Dando sequência à tarefa anterior, duplique este retângulo menor e preencha com cor 
preta. Logo após, abra o painel Preenchimento e Contorno e altere o valor da propriedade 
Desfoque para 3. Feito isso, clique neste retângulo menor da cor preta e realize um recuo nele, 
pressionando a tecla pagedown do seu teclado. Pronto, seu projeto deve estar semelhante à Figura 
42. 
 
 
 
 
 
 
46 
Competência 02 
 
 
 
 
 
 
 
 
 
 
Figura 42 - área para o título do site com o efeito sombra. 
Fonte: o autor. 
Descrição: a imagem agora mostra os efeitos da alteração provocados pelo sombreamento. A sensação é que a figura 
está em formato 3D. 
 
 
Agora, iremos construir o corpo do site e iremos aproveitar o retângulo menor que já está na 
largura adequada. Então, duplique-o e dê um preenchimento na cor branca para ele. 
Clique, então, na ferramenta de Seleção e depois na seta superior que está destacada na 
Figura 43. Arraste-o até a metade da página. O retângulo do corpo estará nivelado com o retângulo 
do cabeçalho. 
 
Figura 43 - Efeito sombra para o corpo da página. 
Fonte: o autor. 
Descrição: a figura acima mostra o efeito sombra no retângulo. 
 
 
 
 
 
 
 
47 
Competência 02 
Com a tecla TAB, selecione a sombra. Com ela selecionada, clique, desta vez, na seta inferior 
e arraste-a até o fim do documento. Selecione agora a seta superior e a arraste um pouco para 
baixo. Para saber o posicionamento correto, verifique a Figura 44. 
 
 
 
 
 
 
 
 
 
 
Figura 44 - aplicando o efeito sombra em toda página. 
Fonte: o autor. 
Descrição: a imagem acima mostra o efeito sombra se estendendo por todaa página. 
Para finalizar este passo, vamos proteger estes objetos para não ocorrer alterações 
inconvenientes. Então, vamos bloquear a camada Background, clicando no ícone de cadeado ao 
lado do nome desta camada. 
 
 
 
 
 
 
 
48 
Competência 02 
2.3.8 O Logotipo 
Vamos agora criar o logotipo da página. Crie uma nova camada com o nome de Logotipo. 
Observe no painel de camadas que nosso trabalho está bem organizado, como podemos ver na 
Figura 45. 
 
 
 
 
 
 
Figura 45 - gerenciamento das camadas. 
Fonte: o autor. 
Descrição: a imagem acima mostra o Gerenciador de Camadas com a camada Logotipo criada. 
 
2.3.9 Ferramenta Criar Estrelas e Polígonos 
Vamos agora melhorar o visual da página, fazendo um estilismo que seria o equivalente a 
uma marca. Selecione a ferramenta Criar Estrelas e Polígonos. Veja na Figura 46 a localização pela 
seta vermelha. Na Barra de Controle você pode selecionar entre polígono e estrela, clique em 
estrela. Proceda da mesma forma como fizemos com o círculo e retângulo, clique e arraste para 
criar as estrelas. Desenhe algumas estrelas para deixá-las com a mesma aparência do nosso 
exemplo. Em seguida, vá ao painel Preenchimento e Traço e diminua a opacidade. 
 
 
 
 
 
 
 
 
49 
Competência 02 
 
 
 
 
 
 
 
 
 
 
 
Figura 46 - ferramenta para estrelas e polígonos. 
Fonte: o autor. 
Descrição: a imagem acima mostra a localização da ferramenta Estrelas e Polígonos. Com ela é possível criar desenhos 
de polígonos ou estrelas. 
 
 
Agora faça um retângulo com as seguintes configurações: x=10, y=480, w=200 e h=50. 
Coloque uma cor forte e escreva o nome do seu site. Na sequência, coloque um texto com o título 
“meu site”. Veja como ficou o nosso exemplo na Figura 47. 
 
 
 
 
 
 
 
 
 
50 
Competência 02 
 
 
 
 
 
 
 
 
 
 
Figura 47 - layout do site com o título do site e as estrelas. 
Fonte: o autor. 
Descrição: a imagem agora mostra o retângulo já com desenhos e também com o texto “meu site”. 
 
2.3.10 Ferramenta Texto Parágrafo 
Iremos agora criar um parágrafo de texto para o conteúdo do site. Precisaremos, então, 
organizar antes nosso site, criando mais uma camada chamada conteúdo. Após ter criado, veja se 
está parecida com a janela da Figura 48. 
 
 
 
 
 
 
 
 
 
 
51 
Competência 02 
 
Figura 48 - layout do site com o título do site e as estrelas. 
Fonte: o autor. 
Descrição: A imagem mostra a criação da camada “Conteúdo” no gerenciador de camadas. 
 
 
Vamos agora inserir um texto que possui parágrafos, utilizando a ferramenta Criar e Alterar 
Objetos de Texto como se fosse fazer um retângulo, clicando e arrastando. A Figura 49 mostra como 
o parágrafo para os textos deve ficar. 
 
 
 
 
 
 
 
 
 
 
Figura 49 - disposição do parágrafo. 
Fonte: o autor. 
Descrição: a imagem agora mostra o site com o texto já inserido. 
 
 
2.3.11 Adicionando Imagens 
Para melhorar a elaboração do seu projeto, você pode adicionar imagens do tipo bitmap a 
qualquer momento. Atente que, nesse caso, o arquivo SVG resultante terá código vetorial, aquele 
 
 
 
 
 
 
52 
Competência 02 
que fizemos até agora, mais os dados que compõe a imagem. Ele deixará de ser puramente vetor. 
Mas isso não é problema algum, desde que você entenda o que está ocorrendo. 
O Inkscape possui algumas ferramentas simples de edição de imagem, porém o ideal é que 
isso seja feito por alguma ferramenta mais adequada, como o Gimp ou Photoshop. Faça os efeitos, 
ajustes e deixe no tamanho ideal, depois adicione ao seu projeto no Inkscape. 
Antes de você adicionar uma imagem, ajuste o texto para que sua página possa receber uma 
imagem. Antes, clique no parágrafo da página e arraste para estreitar, como mostra a Figura 50. 
Selecione novamente a ferramenta de criação e edição de texto, selecione o texto e irá aparecer um 
retângulo vermelho. Depois, no canto inferior direito há um quadrado que você pode clicar e 
arrastar para redimensionar todo o parágrafo para a posição que desejar. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Figura 50 - ajustando a dimensão do parágrafo. 
Fonte: o autor. 
Descrição: a imagem mostra agora a personalização de todo o parágrafo. Basta com o assistente selecionar e 
dimensionar a posição do texto a fim de obter o layout desejado. 
 
 
 
 
 
 
 
 
53 
Competência 02 
Agora podemos importar uma imagem para a área reservada da página. Vá ao menu Arquivo 
e selecione Importar, então selecione o arquivo que deseja e confirme a importação. Irá aparecer 
uma segunda caixa de diálogo perguntando se você quer embed ou link para o arquivo. Embed 
significa que a imagem será colocada dentro do arquivo SVG, tornando-o bem maior. Link significa 
que o endereço do arquivo será colocado no arquivo SVG e não a imagem. Vamos escolher a opção 
embed e depois clicar em OK. 
A imagem irá aparecer no tamanho que você produziu. Para poder demonstrar a ferramenta 
melhor, a imagem está maior do que deveria. Vamos ajustar o tamanho da imagem. Observe os 
controles nos cantos e laterais da imagem, eles funcionam iguais aos objetos vetoriais. Você poderá 
ajustar o tamanho e deformação, além da posição da imagem, da forma como já foi explicado 
anteriormente. Observe como ajustamos a imagem na Figura 51. 
 
 
 
 
 
 
 
 
 
 
Figura 51 - Página com texto e imagem. 
Fonte: o autor. 
Descrição: a imagem mostra agora a página com uma imagem inserida à direita da página. 
 
 
 
 
 
 
54 
Competência 02 
 
2.3.12 Exportação 
Nunca se esqueça de salvar seu trabalho à medida que o for realizando. Não é muito 
conveniente ver o resultado de seu esforço através de um arquivo SVG. Então, vamos exportá-lo 
para PNG. 
No menu Arquivo, selecione Exportar Bitmap. Na caixa de diálogo que aparecer, clique em 
Desenho para exportar toda a imagem. Em Nome do Arquivo coloque o caminho e o nome do 
arquivo. Pressione Exportar para que o arquivo PNG seja construído. Veja na Figura 52. 
 
Figura 52 - exportando o projeto da página para bitmap 
Fonte: o autor. 
Descrição: a imagem mostra a ferramenta de Exportar área. Com ela, você pode exportar seu arquivo SVG para um 
arquivo PNG. 
 
 
Quando o Inkscape exporta um desenho, o fundo do desenho é transparente. Objetos 
brancos não se alteram, permanecendo brancos na imagem PNG. 
 
2.3.13 Exportação em lote 
Exportamos anteriormente todo projeto em um PNG, entretanto, o Inkscape tem a 
capacidade de exportar de várias formas, entre elas está a exportação em lote. Lote quer dizer que 
 
 
 
 
 
 
55 
Competência 02 
várias fatias da imagem vão ser exportadas com um único comando. Isto é essencial para que uma 
ferramenta de desenvolvimento para páginas em HTML possa gerar as páginas a serem publicadas. 
No começo do planejamento deste site, já iniciamos o processo correto para se exportar em 
lote no Inkscape. Lembram-se da nossa camada Fatias que está escondida? Ela tem vários 
retângulos que serão as fatias da imagem. 
Então, vamos começar. No painel Camadas, clique no ícone do olho da camada Conteúdo, 
porque este não será o conteúdo real de nosso futuro site. Nós só queremos as imagens que vão 
compô-lo. 
Ainda no painel Camadas clique no ícone do olho da camada Fatias. Isto vai exibir os objetos 
pertencentes à camada. Como ela está acima de todas as camadas, os retângulos devem cobrir 
todos os objetos das camadas inferiores, impossibilitando de serem vistos. Então, no painel 
Camadas, selecione a camada Fatias e coloque o valor de 50% em Opacidade. Observem como ficou 
na Figura 53. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Figura 53 - exportando o projeto da página em lote. 
Fonte: o autor. 
Descrição: a imagem acima mostra a camada fatias sendo visível. Por ela estar acima das camadas inferiores, os 
retângulos cobrem os outros objetos. 
 
 
 
 
 
 
 
56 
Competência 02 
Selecione o retângulo do topo do site, e clique com o botão direitodo mouse nele. No menu 
que aparecer, selecione Propriedades do Objeto. Irá aparecer uma caixa de diálogo, como na Figura 
54. No campo Id, coloque um nome (sem espaços, acentos ou caracteres especiais e de preferência 
tudo minúsculo), para o objeto, como por exemplo, topo, e clique em Aplicar. 
 
Figura 54 - propriedade do objeto. 
Fonte: o autor. 
Descrição: a imagem mostra a tela Propriedades do objeto. Nesse caso, ele está exibindo as propriedades do retângulo 
do topo da nossa página. 
 
Esses vão ser os nomes dos arquivos quando exportar em lote. Será um arquivo para cada 
retângulo. Não precisa fechar a caixa de diálogo Propriedade do Objeto, basta selecionar um novo 
retângulo e dar os nomes. Como sugestão, utilizei: topo, menu, conteúdo e rodapé. Dessa forma 
mesmo em que estão escritas as palavras, sem acentos. Não se esqueça de pressionar aplicar para 
cada nome escrito. 
Quando terminar de nomear os objetos, deixe a opacidade da camada com o valor de zero. 
Assim, as cores dos retângulos não irão poluir a geração das imagens. 
Certifique-se de que a camada Fatias está ativa e selecione todos os retângulos desta 
camada. Você consegue isso pelo menu Editar, depois na opção Selecionar Todos. 
Agora no menu Arquivo, selecione a opção Exportar Bitmap. Marque a caixa Exportar em 
Lote 4 Objetos Selecionados. 
 
 
 
 
 
 
57 
Competência 02 
Observe na Figura 55 que você não poderá definir mais a localização de criação dos arquivos. 
Eles serão criados na pasta onde o arquivo SVG está salvo. 
 
Figura 55 - exportando todas as fatias do projeto em um lote com quatro arquivos. 
Fonte: o autor. 
Descrição: a imagem acima mostra a tela de Exportar Área. Um detalhe importante é que a localização do arquivo não 
poderá ser alterada pelo usuário. Ela será salva onde se encontra o arquivo SVG. 
 
Observe na pasta do seu arquivo SVG que foram criados quatros arquivos, de acordo com o 
nome que você concebeu para cada retângulo: 
 
• topo.png; 
• menu.png; 
• conteudo.png; 
• rodape.png. 
 
Finalmente, é só pressionar Exportar que todas as quatro imagens serão criadas. 
Assim, encerramos este capítulo. Demonstramos como utilizar o Inkscape para planejar e 
gerar imagens para seus sites. 
Lembre-se de que o aprendizado se fixa através da repetição, da prática. Repita algumas 
vezes o que fizemos até que você possa fazer sem necessidade de consultas. 
 
 
 
 
 
 
58 
Conclusão 
 
Espero que você tenha aprendido e se divertido na produção de ilustrações vetoriais 
utilizando a ferramenta Inkscape através deste caderno. Entretanto, nada aprendido até aqui será 
de valia para você se não praticar. A prática constante levará você a atingir graus altíssimos de 
conhecimento sobre a ilustração vetorial para web. 
Vimos que o campo da ilustração vetorial é muito rico em publicidades, tanto para mídias 
impressas quanto para o paradigma da Internet. Mas depende da criatividade e experiência prática 
de quem utiliza. Somente com sua prática constante e criatividade, você realizará trabalhos 
belíssimos e autênticos. 
Até a próxima. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
59 
Referências 
ANDRADE, Marcos Serafim de. Adobe Indesign CS4. São Paulo: Senac, 2009. 
DESENHO VETORIAL. WIKIPEDIA. Desenvolvido pela Wikimedia Foundation. Disponível em <http:// 
pt.wikipedia.org/wiki/Desenho_vetorial>. Acesso em: 09 jul. 2014 
EDUCACIONAL. In: APOSTILA SVG. Disponível em <http://uni.educacional.com.br/up/68010001/ 
5075252 /SVG.pdf>. Acesso em: 23 ago. 2014. 
GONZALES, R., WOODS, R. Processamento de Imagens Digitais. 3.ed. São Paulo: Person, 2010. 
PEDRINI, H., SCHWARTZ, W. R. Análise de Imagens Digitais. São Paulo: Thomson, 2007. 
RESOLUÇÃO DE IMAGEM. WIKIPEDIA. Desenvolvido pela Wikimedia Foundation. Disponível em 
<http://pt.wikipedia.org/wiki/Resolução_de_ima gem>. Acesso em: 10 out. 2014. 
SVG. In: WIKIPÉDIA. Desenvolvido pela Wikimedia Foundation. Disponível em <http://pt.wikipedia. 
org/wiki/SVG>. Acesso em: 10 out. 2014. 
 
 
 
 
 
 
 
 
60 
Minicurrículo do Professor 
Anderson Elias do Nascimento 
 
Mestre em Ciências da Computação (2014) através da 
Universidade Federal de Pernambuco - UFPE, Pós-Graduado em Gestão 
da Tecnologia da Informação e Comunicação e Bacharel em Sistemas de 
Informação como discente laureado pela Faculdade Maurício de Nassau 
(2011). Atualmente é gerente de TI e Comunicações na Moinho Petinho 
Indústria e Comércio Ltda. Tem experiência na área de Ciência da 
Computação, com ênfase em avaliação de desempenho de sistemas, 
sistemas de Informação, atuando principalmente nos seguintes temas: 
automatização de processos, sistemas mobile, gestão corporativa e 
integração de sistemas. Possui experiência na área de desenvolvimento 
WEB e design gráfico.