Caderno INFO(Ilustração Vetorial para Web 2015.2)

Prévia do material em texto

Ilustração Vetorial para Web 
Anderson Elias do Nascimento 
 
Curso Técnico em Informática 
Educação a Distância 
2015 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
EXPEDIENTE 
 
 
Professor Autor 
Anderson Elias do Nascimento 
 
Design Instrucional 
Deyvid Souza Nascimento 
Maria de Fátima Duarte Angeiras 
Renata Marques de Otero 
Terezinha Mônica Sinício Beltrão 
 
Revisão de Língua Portuguesa 
Letícia Garcia 
 
Diagramação 
Izabela Cavalcanti 
 
Coordenação 
João Ferreira 
 
Coordenação Executiva 
George Bento Catunda 
 
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). 
Agosto, 2015 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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. – Recife: Secretaria Executiva de Educação 
Profissional de Pernambuco, 2015. 
61 p.: il. 
 
 
1. Educação a distância. 2. Ilustração vetorial. 3. 
Computação gráfica. 4. Desenho por computador. 4. Sites da 
Web - Projeto. I. Nascimento, Anderson Elias do. II. Título. III. 
Secretaria Executiva de Educação Profissional de 
Pernambuco. IV. Ministério da Educação. V. Rede e-Tec 
Brasil. 
 
 CDD – 006.6 
 CDU – 004.92 
 
 
 
 
 
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 ...........................................7 
1.1.1 Editores Bitmaps ......................................................................................................................................7 
1.1.2 Editores Vetoriais .....................................................................................................................................8 
1.1.3 Gráficos Vetoriais .....................................................................................................................................9 
1.1.4 Padrões de Gráficos Vetoriais ............................................................................................................... 12 
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 ........................................................................................................... 16 
2.Competência 2 | 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 
........................................................................................................................................................................ 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 Dégradé ................................................................................................................................. 30 
2.2.4 Ferramenta Texto .................................................................................................................................. 33 
2.3 Planejamento de WebSites com Inkscape ............................................................................................... 36 
 
 
 
 
2.3.1 Definindo Formatos Personalizados ..................................................................................................... 37 
2.3.2 Camadas ou Layers................................................................................................................................ 38 
2.3.3 Grade ..................................................................................................................................................... 40 
2.3.4 O Layout ................................................................................................................................................ 41 
2.3.5 Linhas Guias .......................................................................................................................................... 42 
2.3.6 Título do Site ......................................................................................................................................... 44 
2.3.7 Sombra .................................................................................................................................................. 46 
2.3.8 O Logotipo ............................................................................................................................................. 48 
2.3.9 Ferramenta Criar Estrelas e Polígonos .................................................................................................. 49 
2.3.10 Ferramenta Texto Parágrafo ............................................................................................................... 51 
2.3.11 Adicionando Imagens .......................................................................................................................... 52 
2.3.12 Exportação .......................................................................................................................................... 54 
2.3.13 Exportação em Lote ............................................................................................................................ 55 
Conclusão .............................................................................................................................................59 
Referências ........................................................................................................................................... 60 
Minicurrículo do Professor ................................................................................................................... 61 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 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 impressa, 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 é uma opção 
fundamental além da edição de imagens do tipo bitmap. 
 
 
 
 
 
 
 
 
 6 
1.Competência 01 | Introdução à Ilustração Vetorial para Web 
 
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 impressa, 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 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 é uma opção 
fundamental além da edição de imagens do tipo bitmap. 
 
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. 
 Competência 01 
 
 
 
 
 
 
 
 
 7 
Este caderno foi desenvolvido com o intuito de proporcionar uma visão mais clara do que são 
imagens vetoriais, e abordaremos para utilização destas imagens uma ferramenta bastante 
conhecida pela comunidade da computação gráfica que se chama Inkscape. Esta ferramenta é 
direcionada para a utilização de imagens vetoriais e é de fácil uso. É de grande importânciaque 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: 
 
https://inkscape.org/pt/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, onde um é mais utilizado que o outro e qual a grande utilização de imagens vetorizadas. Após 
isto, embarcaremos nos principais formatos de representações de vetores e seu uso 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 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 
 Competência 01 
 
 
 
 
 
 
 
 
 8 
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-
image25443272. 
 
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 destes 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. 
 
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 destes 
polígonos construídos representa um conjunto de equações que monta o polígono no documento. 
 Competência 019 
Neste 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. 
 
Podemos observar na Figura 2 que ao ampliar uma determinada área da imagem vetorizada, ela 
não perde a qualidade. Isto 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. 
 
1.1.3 Gráficos Vetoriais 
 
Os gráficos vetoriais correspondem aos resultados de cálculos matemáticos, desta forma, por 
exemplo, podemos desenhar um quadrado vermelho sem contorno em um editor vetorial e um 
código será gerado que 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. 
 Competência 01 
 
 
 
 
 
 
 
 
 10 
 
 
 
 
 
Figura 3 
Fonte: o autor. 
 
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. 
 
Com isto, 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 vimos, 
toda imagem vetorizada é representada através de um código, que se chama padrão, 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 representar através de um gráfico 
vetorial. 
 
Com estudo e dedicação, alguns artistas se destacam com trabalhos de alto nível de qualidade 
 Competência 01 
 
 
 
 
 
 
 
 
 11 
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-packer/. 
 
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 este tipo de trabalho o artista 
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. 
 
 Competência 01 
 
 
 
 
 
 
 
 
 12 
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 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 
 
 Competência 01 
 
 
 
 
 
 
 
 
 13 
 
 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 (AdobeIllustrator), 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 Illustrator. 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 navegadores mais populares podem exibir seu 
conteúdo. 
Você pode conhecer mais sobre os padrões que a W3C gerencia emanté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. 
 Competência 01 
 
 
 
 
 
 
 
 
 14 
 
 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. Isto 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áveis e 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 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, 
 Competência 01 
 
 
 
 
 
 
 
 
 15 
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. 
 
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. 
 
 Competência 01 
 
 
 
 
 
 
 
 
 16 
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. 
 
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. 
 
Para começar, é necessário configurar de forma correta a ferramenta Inkscape. O Inkscape é capaz 
de subdividir o pixel para aumentar sua 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, 
 Competência 01 
 
 
 
 
 
 
 
 
 17 
500,35. Neste 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. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Figura 6 - configuração da ferramenta para o deslocamento com o uso das teclas de setas do teclado. 
Fonte: o autor. 
 
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. Dando 
sequência, conhecemos 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. 
 Competência 01 
 
 
 
 
 
 
 
 
 18 
2.Competência 2 | 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 existemdiversos 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 no 
capítulo anterior e seguir os passos. 
 
 Competência 02 
 
 
 
 
 
 
 
 
 19 
Então vamos começar, mãos à obra! 
 
2.1 Interface do Inkscape 
 
Antes de iniciarmos, é necessário conhecer a ferramenta Inkscape. Para isto, abra o Inkscape e 
acompanhe este material para entender melhor a ferramenta. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Figura 7 - interface do Inkscape. 
Fonte: o autor. 
 
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 
 Competência 02 
 
 
 
 
 
 
 
 
 20 
realização do trabalho; 
 Á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 os 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. 
 
 Competência 02 
 
 
 
 
 
 
 
 
 21 
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. 
 
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. 
 Competência 02 
 
 
 
 
 
 
 
 
 22 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Figura 10 - ferramenta Zoom e atalho para caber projeto na tela. 
Fonte: o autor. 
 
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. 
 
 
 
 
 
 
 
 Competência 02 
 
 
 
 
 
 
 
 
 23 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Figura 11 - ferramenta Círculo, Elipse e Arcos. 
Fonte: o autor. 
 
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. 
 Competência 02 
 
 
 
 
 
 
 
 
 24 
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. 
 
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. 
 
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 oCompetência 02 
 
 
 
 
 
 
 
 
 25 
preenchimento: deixe marcado o segundo ícone, 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. 
 
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. 
 
 
 
 
 
 
 
 Competência 02 
 
 
 
 
 
 
 
 
 26 
 
 
 
 
 
 
 
 
 
 
Figura 16 - menu para seleção da opção de Preenchimento e Contorno do objeto. 
Fonte: o autor. 
 
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 por teclado, sendo este de forma mais direta. 
 
Agora, precisamos colocar o objeto duplicado atrás do objeto original. Para isto, 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, 
 Competência 02 
 
 
 
 
 
 
 
 
 27 
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. 
 
2.2.1 Preenchimento 
 
Agora vamos utilizar o preenchimento. Selecione o objeto duplicado e mude sua 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 estas configurações a duplicata terá o aspecto da figura 18.b. 
 
 
 
 
 
 
 
 
Figura 18 - duplicação e aplicação de transparência no objeto. 
Fonte: o autor. 
 Competência 02 
 
 
 
 
 
 
 
 
 28 
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 isto, 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. 
 
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 pretos (mais adiante você entenderá). Agora, clique dentro do objeto 
preto, desta forma, 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. 
 Competência 02 
 
 
 
 
 
 
 
 
 29 
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. 
 
Segure a tecla Shift e clique no círculo branco de baixo. Desta forma, a duplicata e o círculo branco 
original estarão ambos selecionados como podemos observar na Figura 21.a. 
 
Então, vá ao menu Caminho e depois selecione Interseção e teremos um resultado similar à 
Figura 21.b. 
 
 
 
 
 
 
 
 
 
Figura 21 - fazendo a interseção de um objeto no outro. 
Fonte: o autor. 
 Competência 02 
 
 
 
 
 
 
 
 
 30 
2.2.3 Editor de Dégradé 
 
Chegou o momento de trabalharmos com dégradé. 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 dégradé no objeto selecionado. 
Fonte: o autor. 
 
Agora vá à barra de ferramentas do lado esquerdo da tela e selecione a ferramenta indicada na 
figura 23. 
 
 
 
 
 
 
 
 
 
 
 
 
 Competência 02 
 
 
 
 
 
 
 
 
 31 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Figura 23 - ferramenta de orientação para Dégradé. 
Fonte: o autor. 
 
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 como podemos observar no último objeto da 
Figura 24. 
 
 
 
 
 
 
 
Figura 24 - ferramenta de orientação para dégradé do círculo menor. 
Fonte: o autor. 
 
Quando terminar, clique fora do objeto para tirar a seleção. Agora, clique dentro do círculo maior 
 Competência 02 
 
 
 
 
 
 
 
 
 32 
vermelho para 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. 
 
 
 
 
 
 
 
 
 
 
 
 
Figura 25 - preenchimento gradiente. 
Fonte: o autor. 
 
Então, selecione na barra de ferramentas, do lado esquerdo da tela, a mesma ferramenta utilizada 
para editar o dégradé que você acabou de manipular e já conhece. Como antes, você deverá deixar 
a linha do dégradé 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 paradégradé do círculo maior. 
Fonte: o autor. 
 Competência 02 
 
 
 
 
 
 
 
 
 33 
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 aba de Preenchimento 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 dégradé. 
Fonte: o autor. 
 
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 caracter “@” centralizado neste botão. 
 
Para isto, 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 “@”. 
 
 
 
 
 
 Competência 02 
 
 
 
 
 
 
 
 
 34 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Figura 28 - ferramenta para criar e editar textos. 
Fonte: o autor. 
 
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. 
 
Precisamos agora ajustar o caractere “@” para se acomodar de forma correta ao nosso botão. Para 
 Competência 02 
 
 
 
 
 
 
 
 
 35 
isto, 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. 
 
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 isto pela forma direta, pressionando a tecla PageDown do seu 
teclado e 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. 
 
Entretanto, ainda podemos melhorar, efetuando mais um recuo na ordenação para o caractere 
“@”. 
 Competência 02 
 
 
 
 
 
 
 
 
 36 
 
 
 
 
 
 
 
 
 
 
 
Figura 31 - mudando a ordem de apresentação dos objetos. 
Fonte: o autor. 
 
Perceba agora que o caractere “@” também interage com a área mais escura do botão. Desta 
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 e isto foi repassado ao texto que se incorporou a todo 
objeto. 
 
Com isto, 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 
 Competência 02 
 
 
 
 
 
 
 
 
 37 
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 ferramenta 
sem consulta. 
 
Mas se não lembrar-se 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 queria 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. 
 
 
 
 
 
 
 Competência 02 
 
 
 
 
 
 
 
 
 38 
 
 
 
 
 
 
 
 
 
 
 
 
Figura 32 - propriedades do documento. 
Fonte: o autor. 
 
Após isto, 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 
 Competência 02 
 
 
 
 
 
 
 
 
 39 
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. 
 
Após isto, você pode facilmente gerenciar as camadas que foram criadas e estão sendo utilizadas 
neste documento como visto na Figura 34. Para isto, 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.Competência 02 
 
 
 
 
 
 
 
 
 40 
No painel de gerenciamento de 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. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Figura 35 - exibição da grade no documento. 
Fonte: o autor. 
 
 
 Competência 02 
 
 
 
 
 
 
 
 
 41 
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. 
 
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. 
 
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. 
 
 Competência 02 
 
 
 
 
 
 
 
 
 42 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Figura 37 - configuração da posição e dimensão de objetos do tipo retângulo. 
Fonte: o autor. 
 
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. Isto 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 
 Competência 02 
 
 
 
 
 
 
 
 
 43 
a primeira linha guia agora ficou na cor azul. Isto 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 esta 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 + \ . 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Figura 38 - objetos alinhados através das linhas guias. 
Fonte: o autor. 
 Competência 02 
 
 
 
 
 
 
 
 
 44 
Agora vamos esconder a camada Fatias que criamos no início deste projeto e em seguida renomear 
a camada debaixo. Então siga estes 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. 
 
 
 
 
 
 
 
 
Figura 39 - camadas. 
Fonte: o autor. 
 
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 
 
 
 
 
 
 
 
 
 Competência 02 
 
 
 
 
 
 
 
 
 45 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Figura 40 - área para o título do site. 
Fonte: o autor. 
 
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. 
 
 
 
 
 
 
 
 
 
 
 
 Competência 02 
 
 
 
 
 
 
 
 
 46 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Figura 41 - área para o título do site duplicada. 
Fonte: o autor. 
 
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 isto, 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. 
 
 
 
 
 
 
 
 Competência 02 
 
 
 
 
 
 
 
 
 47 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Figura 42 - área para o título do site com o efeito sombra. 
Fonte: o autor. 
 
Agora iremos construir o corpo do site e iremos aproveitar o retângulo menor que já está na largura 
adequada. Então o duplique 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. 
 
 Competência 02 
 
 
 
 
 
 
 
 
 48 
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: oautor. 
 
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. 
 
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. 
 
 Competência 02 
 
 
 
 
 
 
 
 
 49 
 
 
 
 
 
 
 
 
 
 
 
 
 
Figura 45 - gerenciamento das camadas. 
Fonte: o autor. 
 
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 sua 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. 
 
 
 
 
 
 
 
 
 
 
 
 
 Competência 02 
 
 
 
 
 
 
 
 
 50 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Figura 46 - ferramenta para estrelas e polígonos. 
Fonte: o autor. 
 
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. Após isto, coloque um texto com o título “meu site”. Veja 
como ficou o nosso exemplo na Figura 47. 
 
 
 
 
 
 
 
 
 
 
 Competência 02 
 
 
 
 
 
 
 
 
 51 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Figura 47 - layout do site com o título do site e as estrelas. 
Fonte: o autor. 
 
2.3.10 Ferramenta Texto Parágrafo 
 
Iremos agora criar um parágrafo de texto para o conteúdo do site. Para isto, precisaremos 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. 
 
 
 
 
 
 
 
 
Figura 48 - layout do site com o título do site e as estrelas. 
Fonte: o autor. 
 Competência 02 
 
 
 
 
 
 
 
 
 52 
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. 
 
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 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 isto seja 
feito por alguma ferramenta mais adequada, como o Gimp ou Photoshop. Faça os efeitos, ajustes e 
 Competência 02 
 
 
 
 
 
 
 
 
 53 
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. Faça isso antes clicando no parágrafo da página e arraste para estreitar como mostra a 
Figura 50. Para isto, selecione novamente a ferramenta de criação e edição de texto, selecione o 
texto e irá aparecer um retângulo vermelho. Após isto, 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. 
 
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. 
 Competência 02 
 
 
 
 
 
 
 
 
 54 
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. 
 
2.3.12 Exportação 
 
Nunca se esqueça de salvar seu trabalho à medida que o for realizando, mas 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 
 Competência 02 
 
 
 
 
 
 
 
 
 55 
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. 
 
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 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. 
 
 Competência 02 
 
 
 
 
 
 
 
 
 56 
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. 
 
Selecione o retângulo do topo do site, e clique com o botão direito do 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. 
 
 
 Competência 02 
 
 
 
 
 
 
 
 
 57 
 
 
 
 
 
 
 
 
 
 
 
 
Figura 54 - propriedade do objeto. 
Fonte: o autor. 
 
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. 
 
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. 
 Competência 02 
 
 
 
 
 
 
 
 
 58 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Figura 55 - exportando todas as fatias do projeto em um lote com quatro arquivos. 
Fonte: o autor. 
 
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 e; 
 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. 
 
 Competência 02 
 
 
 
 
 
 
 
 
 59 
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. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 60 
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. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 61 
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 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.