Ilustrao Vetorial para Web

Anderson Elias do Nascimento

Curso Tcnico em Informtica

Educao a Distncia
2015

EXPEDIENTE
Professor Autor
Anderson Elias do Nascimento
Design Instrucional
Deyvid Souza Nascimento
Maria de Ftima Duarte Angeiras
Renata Marques de Otero
Terezinha Mnica Sincio Beltro
Reviso de Lngua Portuguesa
Letcia Garcia
Diagramao
Izabela Cavalcanti
Coordenao
Joo Ferreira
Coordenao Executiva
George Bento Catunda
Coordenao Geral
Paulo Fernando de Vasconcelos Dutra

Contedo produzido para os Cursos Tcnicos da Secretaria Executiva de Educao

Profissional de Pernambuco, em convnio com o Ministrio da Educao
(Rede e-Tec Brasil).
Agosto, 2015

N244i

Nascimento, Anderson Elias do.

Ilustrao Vetorial para Web: Curso Tcnico em
Informtica: Educao a distncia / Anderson Elias do
Nascimento. Recife: Secretaria Executiva de Educao
Profissional de Pernambuco, 2015.
61 p.: il.

1. Educao a distncia. 2. Ilustrao vetorial. 3.

Computao grfica. 4. Desenho por computador. 4. Sites da
Web - Projeto. I. Nascimento, Anderson Elias do. II. Ttulo. III.
Secretaria Executiva de Educao Profissional de
Pernambuco. IV. Ministrio da Educao. V. Rede e-Tec
Brasil.
CDD 006.6
CDU 004.92

Sumrio
Introduo .............................................................................................................................................. 5
1.Competncia 01 | Introduo Ilustrao Vetorial para Web ........................................................... 6
1.1 Conhecendo os Principais Formatos de Representaes Vetoriais para Web ...........................................7
1.1.1 Editores Bitmaps ......................................................................................................................................7
1.1.2 Editores Vetoriais .....................................................................................................................................8
1.1.3 Grficos Vetoriais .....................................................................................................................................9
1.1.4 Padres de Grficos Vetoriais ............................................................................................................... 12
1.1.5 Caractersticas do SVG .......................................................................................................................... 13
1.1.6 SVG ........................................................................................................................................................ 14
1.1.7 SVG na Web........................................................................................................................................... 15
1.1.8 SVG para Criao de Ilustraes ........................................................................................................... 16

2.Competncia 2 | Planejar layouts e Peas Grficas com Base em Vetores para Web ..................... 18
2.1 Interface do Inkscape ............................................................................................................................... 19
2.1.1 Botes de Vidro..................................................................................................................................... 20
2.1.2 Configurando o Documento.................................................................................................................. 21
........................................................................................................................................................................ 21
2.1.3 Ferramenta ZOOM ................................................................................................................................ 21
2.1.4 Ferramenta Crculo, Elipse e Arcos ....................................................................................................... 22
2.1.5 Pintura do Trao .................................................................................................................................... 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 Dgrad ................................................................................................................................. 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 Ttulo do Site ......................................................................................................................................... 44
2.3.7 Sombra .................................................................................................................................................. 46
2.3.8 O Logotipo ............................................................................................................................................. 48
2.3.9 Ferramenta Criar Estrelas e Polgonos .................................................................................................. 49
2.3.10 Ferramenta Texto Pargrafo ............................................................................................................... 51
2.3.11 Adicionando Imagens .......................................................................................................................... 52
2.3.12 Exportao .......................................................................................................................................... 54
2.3.13 Exportao em Lote ............................................................................................................................ 55

Concluso ............................................................................................................................................. 59
Referncias ........................................................................................................................................... 60
Minicurrculo do Professor ................................................................................................................... 61

Introduo
Caro (a) aluno (a), nos dias atuais, o processo de ilustrao em computao grfica, realizado por
meio de editores grficos, cuja funo criar ilustraes, tanto para o meio digital quanto para o
meio impresso. Estes editores grficos so divididos em duas classes, so elas: editores de bitmap e
editores vetoriais. Explicarei aqui um pouco sobre a diferena entre estas duas classes de
representaes grficas para que facilmente voc possa distingui-las daqui pra frente. Os grficos
vetoriais so muito bem difundidos pela comunidade da computao grfica e tm papel
importante para a realizao de trabalhos com alto padro de qualidade. Alm de publicidades de
boa qualidade, sejam online ou impressa, as imagens vetoriais so utilizadas massivamente para
confeco de websites que se beneficiam de rapidez e qualidade, principalmente quando o projeto
utiliza ilustraes.

Este curso ser apresentado em dois captulos:

O primeiro captulo fornecer conhecimento sobre os tipos de imagens, e os formatos

vetoriais para web e informaes sobre suas caractersticas.

O segundo captulo fornecer informaes para planejar e construir mais rapidamente

layouts.

Ao longo do curso e em cada captulo, voc conhecer as imagens vetoriais como uma opo de
criao, o que so, caractersticas e diferenas em relao s imagens bitmap, alm de informaes
que sero teis para o planejamento de projetos web utilizando grficos vetoriais.

Ao final deste curso, voc ser capaz de reconhecer e distinguir imagens dos tipos vetoriais e
bitmaps, alm de entender melhor as imagens vetorizadas. Estar tambm mais preparado para o
mercado de trabalho, conhecendo, assim, a manipulao de imagens vetoriais, que uma opo
fundamental alm da edio de imagens do tipo bitmap.

Competncia 01

1.Competncia 01 | Introduo Ilustrao Vetorial para Web

Caro (a) aluno (a), nos dias atuais, o processo de ilustrao em computao grfica, realizado por
meio de editores grficos, cuja funo criar ilustraes, tanto para o meio digital quanto para o
meio impresso. Estes editores grficos so divididos em duas classes, so elas: editores de bitmap e
editores vetoriais. Explicarei aqui um pouco sobre a diferena entre estas duas classes de
representaes grficas para que facilmente voc possa distingui-las daqui pra frente. Os grficos
vetoriais so muito bem difundidos pela comunidade da computao grfica e tm papel
importante para a realizao de trabalhos com alto padro de qualidade. Alm de publicidades de
boa qualidade, sejam online ou impressa, as imagens vetoriais so utilizadas massivamente para
confeco de websites que se beneficiam de rapidez e qualidade, principalmente quando o projeto
utiliza ilustraes.

Este curso ser apresentado em dois captulos:

O primeiro captulo fornecer conhecimento sobre os tipos de imagens, e os formatos

vetoriais para web e informaes sobre suas caractersticas.

O segundo captulo fornecer informaes para planejar e construir mais rapidamente

layouts.

Ao final deste curso, voc ser capaz de reconhecer e distinguir imagens dos tipos vetoriais e
bitmaps, alm de entender melhor as imagens vetorizadas. Estar tambm mais preparado para o
mercado de trabalho, conhecendo, assim, a manipulao de imagens vetoriais, que uma opo
fundamental alm da edio de imagens do tipo bitmap.

Ao longo do curso e em cada captulo, voc conhecer as imagens vetoriais como uma opo de
criao, o que so, caractersticas e diferenas em relao s imagens bitmap, alm de informaes
que sero teis para o planejamento de projetos web utilizando grficos vetoriais.

Competncia 01

Este caderno foi desenvolvido com o intuito de proporcionar uma viso mais clara do que so
imagens vetoriais, e abordaremos para utilizao destas imagens uma ferramenta bastante
conhecida pela comunidade da computao grfica que se chama Inkscape. Esta ferramenta
direcionada para a utilizao de imagens vetoriais e de fcil uso. de grande importnciaque voc
faa o download dessa ferramenta para poder dar sequncia s atividades que surgiro ao longo
deste curso. Voc pode obter a ferramenta Inkscape no website do prprio fabricante, segue abaixo
o link para download:

https://inkscape.org/pt/download/

Ao abrir a pgina, escolha o link para download de acordo com seu sistema operacional. Ento,
vamos l?

1.1 Conhecendo os Principais Formatos de Representaes Vetoriais para Web

Iniciaremos nosso curso conhecendo os tipos de editores de imagens, e quais as diferenas entre
eles, onde um mais utilizado que o outro e qual a grande utilizao de imagens vetorizadas. Aps
isto, embarcaremos nos principais formatos de representaes de vetores e seu uso para a web.

1.1.1 Editores Bitmaps

Os editores de bitmap so mais direcionados para o uso de mdias impressas para o tratamento de
fotografias. So caracterizados por trabalhar com cada ponto do documento. Estes pontos so
tambm chamados de pixel, que so a menor unidade de visualizao na tela de um documento do
tipo bitmap. Ao agrupar vrios pixels, podemos considerar que temos um mapa de pixel, ento, da
vem o nome para este tipo de grfico (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 informao de cor, que forma assim a ilustrao da imagem do documento. Existem
diversos editores de bitmap disponveis para o tratamento de imagens, sendo alguns pagos e outros

Competncia 01

grtis. Entre os mais famosos podemos considerar o Adobe Photoshop, o Corel Photo Paint, Adobe
Fireworks e o Gimp.

Figura 1 - imagem de alta resoluo ampliada para exibir os pixels.

Fonte: http://pt.dreamstime.com/fotografia-de-stock-ma%C3%A7%C3%A3-verde-e-vermelhaimage25443272.

A imagem acima exemplifica a minscula dimenso de cada ponto, especialmente em trabalhos de

alta resoluo, os pontos ficam perceptveis somente quando se faz uma ampliao 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 mas com alta resoluo. Aps a ampliao de alguma
rea desta fotografia, podemos enxergar os pixels, um por um, e cada um deles se refere a uma cor
especfica do documento.

O maior problema destes tipos de documentos quanto resoluo para o tipo de mdia especfica,
j que cada meio de exibio tem uma resoluo prpria. Por exemplo, a tela do computador tem
resoluo de 72dpi (dots per inch, pontos por polegadas); telas de smartphones tm em mdia
150dpi; j as pginas de mdia impressas tm em mdia entre 300dpi e 350dpi.

1.1.2 Editores Vetoriais

Os editores vetoriais tm por caracterstica principal o trabalho com polgonos autnticos no

documento, que so construdos matematicamente atravs do computador. Cada um destes
polgonos construdos representa um conjunto de equaes que monta o polgono no documento.

Competncia 01

Neste caso, o que faz com que os polgonos no percam sua aparncia e possam ser
redimensionados diversas vezes, alm de no causar deformidade, est relacionado decorrncia
das informaes de posio e dimenses que foi requerida pelo usurio. Como vimos antes, as
imagens bitmap no podem realizar este feito. Embora vrios editores vetoriais tenham
ferramentas para trabalhar com documentos de bitmap, o maior destaque dos editores vetoriais
corresponde ao fato da possibilidade de lidar com polgonos de diversas formas. Entre as
ferramentas mais conhecidas pela comunidade da computao grfica, podemos citar (tanto pagos
quanto grtis): Corel Draw, Adobe Flash, Adobe Ilustrator e Inkscape.

Figura 2 - imagem ampliada para exibir o comportamento da vetorizao.

Fonte: http://all-free-download.com/free-vector.

Podemos observar na Figura 2 que ao ampliar uma determinada rea da imagem vetorizada, ela
no perde a qualidade. Isto porque a posio e a dimenso de cada polgono que constitui esta
imagem so recalculadas atravs das frmulas matemticas, que garantem a posio e a dimenso
de cada polgono em relao proporo do que se deseja observar.

1.1.3 Grficos Vetoriais

Os grficos vetoriais correspondem aos resultados de clculos matemticos, desta forma, por
exemplo, podemos desenhar um quadrado vermelho sem contorno em um editor vetorial e um
cdigo ser gerado que nos dir como a funo matemtica ir funcionar para representar as
propriedades do desenho como: posio; largura; altura; tamanho; deformaes, caso haja, etc.

Competncia 01

Figura 3
Fonte: o autor.

Este cdigo representa o quadrado vermelho exibido na Figura 4, entretanto, no se preocupe com
o cdigo 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 grficos que as imagens do
tipo bitmap, devido resoluo que virtualmente infinita nos grficos vetoriais. Conforme vimos,
toda imagem vetorizada representada atravs de um cdigo, que se chama padro, o software
exibe sem perda, sem se preocupar com o quanto voc amplie a imagem. Entretanto, claro que h
certa limitao para a representao atravs dessa tecnologia. Temos de usar o bom senso para
compreender a necessidade de uso. Por exemplo, mais conveniente representar uma fotografia
atravs de uma imagem do tipo bitmap, por outro lado, uma logomarca que no possui o grau de
complexidade de uma fotografia torna-se mais interessante representar atravs de um grfico
vetorial.

Com estudo e dedicao, alguns artistas se destacam com trabalhos de alto nvel de qualidade

10

Competncia 01

atravs da utilizao da ilustrao vetorial. Estes trabalhos conseguem representar obras de artes
realsticas de fotografias atravs 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 realstica de uma
fotografia em um grfico vetorizado nos mnimos detalhes. Para este tipo de trabalho o artista
empregou bastante esforo de tempo e estudo at alcanar altos nveis de qualidade e conseguir
expressar sua obra.

No prximo captulo, voc conhecer alguns truques para a criao de efeitos que deixaro seu
trabalho mais bonito utilizando grficos vetoriais com o uso da ferramenta Inkscape. Se ainda no
fez o download desta ferramenta, faa o quanto antes, pois ela essencial para o decorrer deste
curso.

11

Competncia 01

1.1.4 Padres de Grficos Vetoriais

At agora vimos que os grficos vetoriais so armazenados em cdigos, estes cdigos so lidos por
funes matemticas e a representao deles exibida atravs de editores vetoriais. Este cdigo
denominado de padro e existe uma extensa lista de padres para grficos vetoriais onde cada
qual tem sua particularidade. Iremos abordar alguns dos padres mais conhecidos para grficos
vetoriais e explicaremos um pouco sobre cada um. Podemos assimilar tambm que cada padro de
grficos vetoriais est diretamente ligado extenso do arquivo que foi salvo pela ferramenta que o
gerou.

Abaixo, seguem alguns dos padres mais populares e uma breve descrio:

EPS:

O formato de arquivo de linguagem EPS (Encapsulated PostScript) pode conter

grficos vetoriais e de bitmap, sendo suportado por praticamente todos os
programas grficos, de ilustrao e de layout de pgina. 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 grficos de um programa para outro da famlia Microsoft (Word,
Excel, Power Point, etc). WMF um formato vetorial limitado, mas pode armazenar
imagens bitmap e textos, alm de grficos vetoriais complexos. Muitas aplicaes
grficas podem utilizar ilustraes vetoriais com o padro WMF.

EMF:

a evoluo do padro WMF, significando Enhaced MetaFile (MetaFile Melhorado).

O padro EMF armazena a informao em 32 bits, dessa forma consegue guardar
mais informaes que seu antecessor. No entanto, mesmo com a ampliao de seus
recursos, ainda inferior a outros padres especialistas.

DRW:

um formato para grficos vetoriais que suportado pelos programas mais

populares. Entretanto, esse formato tambm tem limitaes em comparao com
outros formatos.

DXF:

Este formato foi desenvolvido pela Autodesk para possibilitar a troca de grficos
vetoriais entre os diferentes programas CAD (Computer Aided Design). Programas
CAD so ferramentas especializadas no desenvolvimento de projetos que exigem

12

Competncia 01

desenhos precisos. Existem dois tipos de DXF, um codificado em ASCII ou em binrio

ou em ambos. A verso 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 so reconhecidos pela maioria dos programas de desenho
vetoriais.

CDR:

um formato proprietrio da empresa Corel para armazenar os arquivos de seu

aplicativo de desenho vetorial, o Corel Draw. Apesar de ser desenvolvido para
grficos, tambm 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, alm de outras informaes. Por ser um formato
proprietrio, nem todas as aplicaes conseguem interpret-las corretamente.

AI:

um formato proprietrio da Adobe para seu programa de desenho vetorial

chamado de Illustrator. Possui as mesmas caractersticas tcnicas do CDR. Como
tambm um formato proprietrio junto com o CDR, nem todas as aplicaes
conseguem interpret-las corretamente.

SVG:

Acrnimo de Scable Vectorial Graphics. Por no ser um padro proprietrio, as

aplicaes mais populares de desenho vetorial trabalham com este formato. Alm de
grficos vetoriais, o formato tambm suporta bitmaps e texto. Por ser um padro
definido pela W3C (World Wide Web Consortium), responsvel pela padronizao da
web, as verses mais recentes dos navegadores mais populares podem exibir seu
contedo.
Voc pode conhecer mais sobre os padres que a W3C gerencia e mantm atravs
deste endereo: www.w3c.br

1.1.5 Caractersticas do SVG

Dentre os padres de formatos para grficos vetoriais, podemos observar que o padro SVG se
destaca por ser um excelente padro de armazenamento para ilustraes vetoriais para web em
comparao a outros formatos. Alm disso, ele utilizado para salvar as ilustraes realizadas no
Inkscape, programa que veremos mais adiante. Por essas caractersticas, vamos focar nosso estudo
nele e conhec-lo melhor.

13

Competncia 01

Padro Aberto:

O SVG foi determinado como um padro aberto, por ter sido definido
atravs de um consrcio de vrias empresas que tiveram a inteno de
padronizar a troca de documentos atravs da internet. Isto quer dizer que a
empresa que quiser pode utilizar o padro SVG, sem ter que pagar pelo uso,
basta seguir as regras definidas pelo padro.

Visualizao
Navegadores:

em Por se tratar de um padro aberto, vrios softwares de ilustrao vetorial

como Corel Draw, Adobe Ilustrator, Inkscape, entre outros, podem criar e
salvar documentos no padro SVG. Alm destes softwares de ilustrao
vetorial, os navegadores Chrome, Internet Explorer, Mozilla FireFox, Opera
e outros tambm podem utilizar este padro.

Embutido
HTML:

em A W3C construiu o padro SVG tendo como base o XML (Extensible Markup
Language, ou Linguagem Extensvel de Marcao Genrica), desta forma, os
comandos de criao so bastante amigveis e fceis de serem
compreendidos, possibilitando o uso junto ao cdigo HTML (HyperText
Markup Language ou Linguagem de Marcao de Hipertexto). HTML um
protocolo de comunicao entre sistemas de informao que permite a
transferncia de dados entre redes de computadores, principalmente
na World Wide Web (Internet).

Interao
Animao:

e O padro SVG pode conter interao e ser animado nas pginas web atravs
de uma linguagem de programao denominada JavaScipt. Esta linguagem
define os comportamentos para os elementos nas pginas web,
adicionando elementos interativos como botes e controles, bem como
animaes.

1.1.6 SVG

O SVG foi desenvolvido por um consrcio de grandes empresas relacionadas internet, como a
Microsoft, a Adobe, entre outras. Este consrcio 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 grficos vetoriais em
SVG deve seguir essas regras para que seja mostrado igualmente em todos os lugares, formando,

14

Competncia 01

assim, um padro.

O padro SVG pode guardar trs tipos de representaes, so elas:

Grficos vetoriais: formas geomtricas descritas atravs de comandos;

Imagens bitmaps: conhecido como mapa de bits, so imagens que contm a descrio de

cada pixel. Tambm so conhecidas como imagens raster, ou fotografias;

Texto: a informao guardada sobre o texto possibilita a edio posterior, o que no

possvel quando o texto convertido em imagem raster ou grficos vetoriais.

Os arquivos armazenados em formato textual so 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 extenso SVGZ.

1.1.7 SVG na Web

At agora vimos que os grficos vetoriais com o formato SVG podem ser armazenados em arquivos
com a extenso SVG, como tambm em pginas HTML. Para acrescentar ilustraes SVG em suas
pginas, basta inserir o cdigo abaixo dentro do seu cdigo HTML:

Onde:

Data=teste.svg diz o nome do arquivo e sua localizao;

type=image/svg+xml diz que o tipo do arquivo SVG, nunca muda;

width=450 a largura da ilustrao, neste caso 450 pixels;

height=300 a altura da ilustrao, neste caso 300 pixels.

15

Competncia 01

Voc poder utilizar a ferramenta Inkscape como foi sugerida anteriormente, para criar suas
ilustraes sem ter que digitar nenhum cdigo e, se preferir, acrescentar o cdigo HTML citado
anteriormente.

1.1.8 SVG para Criao de Ilustraes

Podemos entender at agora que de fato interessante escrever cdigos para gerar ilustraes
vetoriais, entretanto pouco conveniente quando se trata de ganhar tempo. O ideal que utilizemos
uma ferramenta de ilustrao vetorial que salve nossos documentos em algum padro. No nosso
caso estamos trabalhando com o padro SVG. A partir da, no temos que nos preocupar com a
escrita correta do cdigo e sim com o trabalho artstico que estamos realizando.
A ferramenta que adotamos para trabalharmos com ilustraes vetoriais neste curso foi a Inkscape,
por ser uma boa ferramenta, no precisar pagar para utiliz-la e que ainda atende aos padres de
criao de ilustraes vetoriais. Com esta ferramenta podemos salvar em diversos tipos de padres,
inclusive o padro SVG.
Dicas:
Caso voc no tenha instalado a ferramenta Inkscape para o idioma portugus 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 configuraes;

2.

No menu esquerda, clique no quarto item de baixo pra cima;

3.

A tela direita vai mudar. A primeira opo a definio do idioma. Selecione a opo

Portuguese/Brasil (pt_BR);
4.

Reinicie o Inkscape.

Para comear, necessrio configurar de forma correta a ferramenta Inkscape. O Inkscape capaz
de subdividir o pixel para aumentar sua preciso, porm isto prejudica a formao de imagens do
tipo PNG em curvas e textos. indicado que evitemos nmeros fracionados, como por exemplo,

16

Competncia 01

500,35. Neste caso o ideal que fosse 500,00.

Ento, v a Configuraes do Inkscape no menu Arquivo, ou pressione Shift + Ctrl + P para aparecer
a lista de opes de configuraes. No menu esquerda selecione a opo Passos. Vamos
configurar as trs primeiras opes para 1px, 10px, e 1px como mostra a Figura 6. Quando
preencher, no se importe com os zeros depois da vrgula, eles sero preenchidos
automaticamente.

Figura 6 - configurao da ferramenta para o deslocamento com o uso das teclas de setas do teclado.
Fonte: o autor.

Caro (a) aluno (a), este captulo serviu de embasamento para compreendermos um pouco mais
sobre os tipos de grficos e seus editores, tanto bitmaps quanto vetoriais. Em seguida,
direcionamos nossa ateno para os grficos vetoriais, que so o objetivo deste curso. Dando
sequncia, conhecemos alguns padres de ilustraes vetoriais e focamos no padro SVG, por ser
um padro desenvolvido a partir de um consrcio de empresas que desejavam compartilhar o
mesmo documento para diversas plataformas. Por fim, configuramos a ferramenta Inkscape para
que no prximo captulo possamos dar sequncia aos nossos trabalhos.

17

Competncia 02

2.Competncia 2 | Planejar layouts e Peas Grficas com Base em

Vetores para Web
No captulo anterior vimos que existem duas classes de ilustraes grficas, uma representada pelas
imagens bitmaps e outra pelos vetores. Podemos entender a diferena entres estas duas classes,
alm de suas vantagens e desvantagens.
Entendemos que as ilustraes vetoriais so representadas atravs de funes matemticas que
exibem como resultados os grficos vetoriais. Vimos que existem diversos formatos de padres
para os documentos de ilustraes vetoriais, porm focamos no padro SVG.
Vimos ainda que podemos acrescentar uma ilustrao vetorial em SVG com um cdigo HTML como
se fosse uma imagem bitmap e, desde que o pblico de seu site possua as verses mais recentes
dos navegadores, podero ver seu trabalho normalmente. Mas no s isso. Tambm aprendemos
a desenhar diretamente na pgina web, utilizando os cdigos SVG. Apesar de ser uma opo, saber
isso pode lhe destacar no mercado, mesmo no sendo conveniente para fazer as suas criaes por
tomar muito mais tempo do que utilizar uma ferramenta para ilustraes vetoriais.
Utilizaremos a ferramenta Inkscape, que direcionada para construo de grficos vetoriais e por
ser um software de cdigo aberto, ou seja, voc no precisa comprar uma licena para us-lo, o que
facilita muito a criao artstica. Voc no precisa tambm se preocupar com os cdigos SVG,
apenas fazer a ilustrao com as ferramentas que o software lhe proporciona.
Neste captulo iremos conhecer melhor esta ferramenta ao longo da construo de efeitos especiais
como, por exemplo, a ilustrao de um boto de vidro. Realizaremos aqui mais trabalhos prticos
do que tericos. Ser fundamental neste captulo o uso da ferramenta, ento partimos do princpio
de que voc j tenha instalado o Inkscape e configurado para a lngua portuguesa do Brasil,
seguindo as configuraes recomendadas no captulo anterior. Se ainda no o fez, s voltar no
captulo anterior e seguir os passos.

18

Competncia 02

Ento vamos comear, mos obra!

2.1 Interface do Inkscape

Antes de iniciarmos, necessrio 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 so exibidos de forma textual;

Comandos: a barra de cones com os comandos. Tambm podem ser encontrados no

menu textual;

Controles: a barra sensvel ao contexto, que exibe os controles referentes ferramenta

ativa no momento;

Caixa de Ferramentas: a barra com as ferramentas, que o sistema disponibiliza para

19

Competncia 02

realizao do trabalho;

rea de desenho: apesar de voc conseguir desenhar em qualquer lugar desta rea, o

retngulo no meio auxilia como a exibio de uma folha de papel. Nas configuraes padro, 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 configuraes de exibio e

bloqueio;

Paleta de Cores: disponibiliza as cores para uso;

Informaes: exibe informaes referentes ao contexto;

Zoom: a caixa com opes de magnificncia (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 ilustraes vetoriais. Isto o
torna uma ferramenta de fcil uso.

2.1.1 Botes de Vidro

Este tipo de estilo bastante popular em materiais grficos, seja impresso ou digital. Voc j deve
ter visto cones e botes com esta aparncia. A Figura 8 mostra como esse efeito ser apresentado
neste caderno ao longo deste captulo.

Figura 8 - boto estilo vidro.

Fonte: o autor.

20

Competncia 02

2.1.2 Configurando o Documento

Antes de iniciarmos cada projeto, devemos configurar o documento. Por padro, o Inkscape
configurado para pginas A4, mas ele tem diversas pr-configuraes 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 seo 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 configuraes. Esta configurao nos dar uma rea em pixels para
desenharmos nosso boto de vidro.

Figura 9 - ajustando as propriedades do documento.

Fonte: o autor.

2.1.3 Ferramenta ZOOM

Ao selecionar o novo tamanho, a pgina se modifica, mas fica muito pequena para trabalharmos. A
ferramenta Zoom oferece vrias formas de visualizao para podermos executar a tarefa mais
confortavelmente. Entre as vrias opes, encontra-se a Caber a Pgina 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 visualizao da pgina.

21

Competncia 02

Figura 10 - ferramenta Zoom e atalho para caber projeto na tela.

Fonte: o autor.

2.1.4 Ferramenta Crculo, Elipse e Arcos

Com a pgina ajustada, vamos utilizar a ferramenta Crculo, Elipse e Arcos para desenhar um crculo
na pgina. Selecione a ferramenta, clique e arraste na pgina. Para desenhar um crculo perfeito,
segure a tecla Ctrl e arraste de cima para baixo na diagonal. Neste momento no se preocupe com
tamanho, posio ou cores.

22

Competncia 02

Figura 11 - ferramenta Crculo, 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 boto 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 informaes sobre o objeto selecionado: se ele
tem preenchimento ou no (se tiver, informa a cor), se tem contorno ou no (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.

23

Competncia 02

Opacidade a quantidade de transparncia de um objeto. O crculo 1 exibido na Figura 13 tem

100% de opacidade, ou seja, totalmente opaco. O crculo 2 possui 50% de opacidade e o crculo 3,
10%. Um objeto com 0% de opacidade torna-se invisvel na tela. Se o objeto que voc criou est
com opacidade menor que 100%, digite 100 na caixa para alterar. Ou, se preferir, faa isso depois.

Figura 13 - Opacidade de objetos.

Fonte: o autor.

2.1.5 Pintura do Trao

Para nosso trabalho, necessrio configurar a espessura do contorno do objeto, atravs da caixa de
dilogo Preenchimento e Contorno. Para acess-la, clique com o boto direito do mouse em cima
do crculo e selecione a opo Preenchimento e Contorno, ou Shift+Ctrl+F.

Figura 14 - menu para seleo da opo de Preenchimento e Contorno do

objeto.
Fonte: o autor.

A caixa de dilogo surgir no canto direito, como podemos observar na Figura 15 e nela haver trs
abas: a primeira aba a do Preenchimento do objeto. Abaixo esto os cones que configuram o

24

Competncia 02

preenchimento: deixe marcado o segundo cone, selecione o primeiro quadrado. A cor do

preenchimento, por enquanto, no 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 no 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.

25

Competncia 02

Figura 16 - menu para seleo da opo 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 crculo que foi duplicado est frente do crculo original e precisamos
alterar esta ordem. O Inkscape fornece tcnicas para esta necessidade, que podem ser feitas tanto
atravs dos menus quanto por teclado, sendo este de forma mais direta.

Agora, precisamos colocar o objeto duplicado atrs do objeto original. Para isto, podemos utilizar
este recurso por meio do menu Objeto e selecionar a opo Enviar para trs, porm, podemos ver
que existem outras opes como Enviar para Frente, Recuar Um e Avanar Um. Como queremos
apenas levar o crculo que foi duplicado para trs, podemos tambm fazer isto de forma direta,

26

Competncia 02

pressionando a tecla End do seu teclado e a duplicata ficar por atrs do crculo original, como
podemos observar na Figura 17.c.

Figura 17 - passos para duplicao 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 dilogo Preenchimento e contorno mude o valor do Desfoque para 3 e reduza a

opacidade para 75%. Com estas configuraes a duplicata ter o aspecto da figura 18.b.

Figura 18 - duplicao e aplicao de transparncia no objeto.

Fonte: o autor.

27

Competncia 02

2.2.2 Caminhos
Vamos agora editar o crculo que est mais frente para tomar a forma que desejamos. Para isso,
precisamos transformar o crculo em um caminho. Caminho o nome dado ao contorno dos
desenhos. No caso, as ilustraes vetoriais no Inkscape so feitas principalmente com caminhos.
Primeiro, selecione o crculo que est por cima do outro. Para isto, clique exatamente dentro dele.
Ento v at o menu textual, e selecione o menu Caminho, em seguida selecione Converter
contorno em caminho. Isto far com que o preenchimento desaparea como mostra a Figura
19.a. Agora, v novamente ao menu Caminho e selecione Separar e seu grfico 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
crculos: um menor e outro maior onde um est por cima do outro, porm no d ainda para ver,
pois esto os dois pintados de pretos (mais adiante voc entender). Agora, clique dentro do objeto
preto, desta forma, voc estar selecionando o crculo menor. Em seguida, mude a cor de
preenchimento deste crculo menor que est selecionado para um tom de vermelho atravs da
barra de cores que voc j conhece. Agora duplique esse crculo 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 crculo branco. Pressione a tecla da seta para cima e leve a
duplicata para cima como podemos ver na Figura 20.a.

28

Competncia 02

Para melhor visualizao, aplique um contorno duplicata que voc moveu: para tanto, clique com
o boto 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 crculo branco de baixo. Desta forma, a duplicata e o crculo branco
original estaro ambos selecionados como podemos observar na Figura 21.a.
Ento, v ao menu Caminho e depois selecione Interseo e teremos um resultado similar
Figura 21.b.

Figura 21 - fazendo a interseo de um objeto no outro.

Fonte: o autor.

29

Competncia 02

2.2.3 Editor de Dgrad

Chegou o momento de trabalharmos com dgrad. Ento, preste bastante ateno a partir de
agora. Na

caixa

de

dilogo Preenchimento

contorno, clique

na

primeira

aba,

do Preenchimento e clique no terceiro cone, o de Gradiente linear. O dgrad aparecer no objeto,

como exibido na Figura 22.

Figura 22 - aplicando dgrad no objeto selecionado.

Fonte: o autor.

Agora v barra de ferramentas do lado esquerdo da tela e selecione a ferramenta indicada na

figura 23.

30

Competncia 02

Figura 23 - ferramenta de orientao para Dgrad.

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 orientao para dgrad do crculo menor.

Fonte: o autor.

Quando terminar, clique fora do objeto para tirar a seleo. Agora, clique dentro do crculo maior

31

Competncia 02

vermelho para selecion-lo. Abra a caixa de dilogo 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.

Ento, selecione na barra de ferramentas, do lado esquerdo da tela, a mesma ferramenta utilizada
para editar o dgrad que voc acabou de manipular e j conhece. Como antes, voc dever deixar
a linha do dgrad na vertical: a nica diferena 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 orientao para dgrad do crculo maior.

Fonte: o autor.

32

Competncia 02

Para finalizar e dar um acabamento ao nosso trabalho, vamos dar um leve desfoque ao crculo
maior vermelho. Volte ao painel de Preenchimento e Contorno e na aba de Preenchimento altere o
desfoque para 2,5. Agora clique no crculo 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 aps aplicao do dgrad.

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 boto de vidro.

Vamos supor que este um boto que serve para chamar o aplicativo de enviar e-mail, ento nada
mais bvio do que colocarmos o caracter @ centralizado neste boto.

Para isto, vamos selecionar a ferramenta Criar e Alterar Blocos de Textos, como mostrado na Figura
28 para inserir o texto desejado, porm neste caso seria apenas o caractere @.

33

Competncia 02

Figura 28 - ferramenta para criar e editar textos.

Fonte: o autor.

Aps a insero do caractere @, preencha-o com alguma cor que se destaque sobre o boto.
Neste exemplo, escolhi a cor verde, mas fica a seu critrio usar qualquer cor que realce bem quando
for colocada no boto. 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 boto. Para

34

Competncia 02

isto, iremos selecionar o caractere @ e posicion-lo sobre o boto, como podemos ver na Figura
30.

Figura 30 - inserindo texto no documento.

Fonte: o autor.

Note agora que embora o caractere @ esteja sobre o boto, ainda falta uma interao entre o
texto e o objeto. Iremos ento aplicar recuos no texto para que todo o objeto se torne um e com
isto fique mais realstico. Ento, selecione o texto e aplique um recuo, para mudar a ordem de
exibio dos objetos. Faremos isto pela forma direta, pressionando a tecla PageDown do seu
teclado e observe como fica seu boto. Veja na figura 31, que o efeito de brilho do boto destacou a
parte superior do caractere @, tornando-o, assim, mais interativo com o boto.

Figura 31 - mudando a ordem de apresentao dos objetos.

Fonte: o autor.

Entretanto, ainda podemos melhorar, efetuando mais um recuo na ordenao para o caractere
@.

35

Competncia 02

Figura 31 - mudando a ordem de apresentao dos objetos.

Fonte: o autor.

Perceba agora que o caractere @ tambm interage com a rea mais escura do boto. Desta
forma, o texto adaptou-se totalmente ao objeto boto que, alm de um reflexo na parte superior,
tambm 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 boto de vidro com um caractere informativo
que neste caso foi o @, utilizando vrias tcnicas de que a ferramenta Inkscape dispe, como
podemos ver o resultado na Figura 27.

2.3 Planejamento de WebSites com Inkscape

O Inkscape no gera cdigo HTML e consequentemente no exporta a pgina web como outras
ferramentas, porm uma ferramenta bastante poderosa para planejar a aparncia de uma pgina
web, gerar prottipos e exportar partes (tambm conhecido como fatias) deste projeto em imagens
PNG para que um editor de HTML possa utilizar e gerar a pgina web.

PNG (Portable Network Graphics ou grfico portvel de rede) um formato de arquivo grfico bem
difundido para exibir imagens com boa profundidade de cores e suporta o canal alfa, que
proporciona uma transparncia ao redor de uma imagem.

A seguir iremos criar um projeto de aparncia para um site. Voc perceber que iremos repetir

36

Competncia 02

muitas tarefas que vimos no projeto anterior, do efeito para o boto de vidro. Ento, o ideal que
voc repita a execuo do efeito do boto de vidro algumas vezes para que possa usar a ferramenta
sem consulta.

Mas se no 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 opo Novo e depois a opo Padro 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. Ento,
digamos que voc no queria utilizar o formato Padro para este novo documento, e deseja agora
utilizar outro formato de documento personalizvel. V ao menu Arquivo e selecione a opo
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 resoluo da maioria dos monitores utilizados
atualmente.

37

Competncia 02

Figura 32 - propriedades do documento.

Fonte: o autor.

Aps 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 sequncia, pressione a tecla 5 do teclado numrico 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 tcnica de trabalho bastante interessante que o Inkscape utiliza so as camadas (ou layers). O
Inkscape organiza as ilustraes em camadas e tem a mesma funo que em outros softwares de
editorao grfica, como Gimp, Photoshop, etc. As camadas so empilhadas umas em cima das
outras e servem para organizar o trabalho, alm de facilitar a seleo de objetos, principalmente
quando h muitos objetos distintos e ocupando praticamente o mesmo espao no documento.
Estas camadas podem guardar um objeto ou todos os objetos do seu documento, nada impede que

38

Competncia 02

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 opo 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.

Aps isto, voc pode facilmente gerenciar as camadas que foram criadas e esto sendo utilizadas
neste documento como visto na Figura 34. Para isto, pressione Shift + Ctrl + L e no painel do lado
direito aparecero todas as camadas, inclusive voc pode adicionar mais alguma pressionando no
boto [ + ] ou remover atravs do boto [ - ].

Figura 34 - painel de gerenciamento de camadas.

Fonte: o autor.

39

Competncia 02

No painel de gerenciamento de camadas voc pode renomear a camada, bastando clicar no nome
dela. Pode bloquear a camada para preservar seu contedo e evitar alteraes acidentais. Pode
tambm esconder a camada para que seus objetos no sejam visveis 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 criao 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 preciso do layout.

Figura 35 - exibio da grade no documento.

Fonte: o autor.

40

Competncia 02

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 iro compor a
pgina do website.
Antes de iniciar, importante relembrar o uso da tcnica de contorno dos objetos, e esta ser bem
empregada aqui. Nela podemos definir alm de outras coisas, o tamanho e a posio dos objetos.
Desta forma, como iremos alterar o tamanho, devemos retirar o contorno usando o painel de
Preenchimento e Contorno, como visto anteriormente.
Mos obra. Iremos agora criar quatro retngulos e em seguida alterar suas configuraes. A Figura
36 mostra onde se devem realizar estas alteraes.

Figura 36 - configurao da posio e dimenso de objetos do tipo retngulo.

Fonte: o autor.

Aplique estas configuraes para cada retngulo:

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

Aps estas mudanas, voc pode ver como ficou o resultado atravs da Figura 37.
Fique atento que todos os retngulos foram criados na camada Fatias que definimos anteriormente.

41

Competncia 02

Figura 37 - configurao da posio e dimenso de objetos do tipo retngulo.

Fonte: o autor.

2.3.5 Linhas Guias

As linhas guias servem para orientar o alinhamento dos objetos um ao outro. No so imprimveis e
aparecem na cor azul. Observe que a grade feita de linhas azuis, mas neste caso elas fazem parte
de um padro 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 atravs do menu Exibir e depois selecionando Guias. Nada
acontece, porm voc pode clicar ou na rgua horizontal ou na rgua vertical, segurar o boto 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 rguas e no centro do documento aparecer uma linha na cor vermelha. Entretanto, note que

42

Competncia 02

a primeira linha guia agora ficou na cor azul. Isto informa que voc no 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. Ento, vamos copiar todos os objetos
para uma memria reservada do computador antes de converter os objetos em linhas guia.
Primeiro voc deve selecionar todos os retngulos. V ao menu Editar e clique na opo Selecionar
Todos, ou utilize a tecla de atalho Ctrl + A. Agora, v novamente ao menu Editar e selecione a opo
Copiar, ou utilize a tecla de atalho Ctrl + C. Com os objetos guardados temporariamente, vamos
converter os retngulos pressionando Shift + G. Para terminar esta parte, vamos colar os objetos da
memria do computador para o documento. V ao menu Editar, selecione a opo 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 opo Guias, ou pelas teclas de atalho Shift + \ .

Figura 38 - objetos alinhados atravs das linhas guias.

Fonte: o autor.

43

Competncia 02

Agora vamos esconder a camada Fatias que criamos no incio deste projeto e em seguida renomear
a camada debaixo. Ento siga estes passos. V at o painel de camadas e clique no olho ao lado da
camada Fatia. Dessa forma, esta camada se torna invisvel. 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 Ttulo do Site

O Ttulo do site serve para identificar o site para quem o est visitando. Iniciaremos desenhando um
retngulo como fizemos anteriormente. Escolha a cor que deseja, como a Figura 40 mostra. Siga os
valores para tamanho e posio como segue abaixo:

X=0, Y=470, W=960 e H=130

44

Competncia 02

Figura 40 - rea para o ttulo do site.

Fonte: o autor.

Agora duplique este retngulo. Selecione o retngulo e pressione Ctrl + D. Em seguida diminua 20
pixels esquerda e 20 pixels direita. Veja como fica na Figura 41.

45

Competncia 02

Figura 41 - rea para o ttulo do site duplicada.

Fonte: o autor.

2.3.7 Sombra

Dando sequncia tarefa anterior, duplique este retngulo menor, e preencha com cor preta. Logo
aps, abra o painel Preenchimento e Contorno e altere o valor da propriedade Desfoque para 3.
Feito isto, clique neste retngulo 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

Competncia 02

Figura 42 - rea para o ttulo do site com o efeito sombra.

Fonte: o autor.

Agora iremos construir o corpo do site e iremos aproveitar o retngulo menor que j est na largura
adequada. Ento o duplique e d um preenchimento na cor branca para ele.

Clique, ento, na ferramenta de Seleo e depois na seta superior que est destacada na Figura 43.
Arraste-o at a metade da pgina. O retngulo do corpo estar nivelado com o retngulo do
cabealho.

Figura 43 - efeito sombra para o corpo da pgina.

Fonte: o autor.

47

Competncia 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 pgina.

Fonte: o autor.

Para finalizar este passo, vamos proteger estes objetos para no ocorrer alteraes inconvenientes.
Ento, 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 pgina. 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.

48

Competncia 02

Figura 45 - gerenciamento das camadas.

Fonte: o autor.

2.3.9 Ferramenta Criar Estrelas e Polgonos

Vamos agora melhorar o visual da pgina, fazendo um estilismo que seria o equivalente a uma
marca. Selecione a ferramenta Criar Estrelas e Polgonos. Veja na Figura 46 sua localizao pela seta
vermelha. Na Barra de Controle voc pode selecionar entre polgono e estrela, clique em estrela.
Proceda da mesma forma como fizemos com o crculo e retngulo, clique e arraste para criar as
estrelas. Desenhe algumas estrelas para deix-las com a mesma aparncia do nosso exemplo. Em
seguida, v ao painel Preenchimento e Trao e diminua a opacidade.

49

Competncia 02

Figura 46 - ferramenta para estrelas e polgonos.

Fonte: o autor.

Agora faa um retngulo com as seguintes configuraes: x=10, y=480, w=200 e h=50. Coloque uma
cor forte e escreva o nome do seu site. Aps isto, coloque um texto com o ttulo meu site. Veja
como ficou o nosso exemplo na Figura 47.

50

Competncia 02

Figura 47 - layout do site com o ttulo do site e as estrelas.

Fonte: o autor.

2.3.10 Ferramenta Texto Pargrafo

Iremos agora criar um pargrafo de texto para o contedo do site. Para isto, precisaremos organizar
antes nosso site, criando mais uma camada chamada contedo. Aps ter criado, veja se est
parecida com a janela da Figura 48.

Figura 48 - layout do site com o ttulo do site e as estrelas.

Fonte: o autor.

51

Competncia 02

Vamos agora inserir um texto que possui pargrafos, utilizando a ferramenta Criar e Alterar Objetos
de Texto como se fosse fazer um retngulo, clicando e arrastando. A Figura 49 mostra como o
pargrafo para os textos deve ficar.

Figura 49 - disposio do pargrafo.

Fonte: o autor.

2.3.11 Adicionando Imagens

Para melhorar a elaborao do seu projeto, voc pode adicionar imagens do tipo bitmap a qualquer
momento. Atente que, nesse caso, o arquivo SVG resultante ter cdigo vetorial, aquele que
fizemos at agora, mais os dados que compe a imagem. Ele deixar de ser puramente vetor. Mas
isso no problema algum, desde que voc entenda o que est ocorrendo.

O Inkscape possui algumas ferramentas simples de edio de imagem. Porm o ideal que isto seja
feito por alguma ferramenta mais adequada, como o Gimp ou Photoshop. Faa os efeitos, ajustes e

52

Competncia 02

deixe no tamanho ideal, depois adicione ao seu projeto no Inkscape.

Antes de voc adicionar uma imagem, ajuste o texto para que sua pgina possa receber uma
imagem. Faa isso antes clicando no pargrafo da pgina e arraste para estreitar como mostra a
Figura 50. Para isto, selecione novamente a ferramenta de criao e edio de texto, selecione o
texto e ir aparecer um retngulo vermelho. Aps isto, no canto inferior direito h um quadrado
que voc pode clicar e arrastar para redimensionar todo o pargrafo para a posio que desejar.

Figura 50 - ajustando a dimenso do pargrafo.

Fonte: o autor.

Agora podemos importar uma imagem para a rea reservada da pgina. V ao menu Arquivo, e
selecione Importar, ento selecione o arquivo que deseja e confirme a importao. Ir aparecer
uma segunda caixa de dilogo 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 endereo do arquivo ser colocado no arquivo SVG e no a imagem. Vamos escolher a opo
embed e depois clicar em OK.

53

Competncia 02

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 deformao, alm da posio da imagem, da forma como j foi explicado
anteriormente. Observe como ajustamos a imagem na Figura 51.

Figura 51 - pgina com texto e imagem.

Fonte: o autor.

2.3.12 Exportao

Nunca se esquea de salvar seu trabalho medida que o for realizando, mas no muito
conveniente ver o resultado de seu esforo atravs de um arquivo SVG. Ento, vamos export-lo
para PNG.

No menu Arquivo, selecione Exportar Bitmap. Na caixa de dilogo que aparecer, clique em Desenho

54

Competncia 02

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 construdo. Veja na Figura 52.

Figura 52 - exportando o projeto da pgina para bitmap

Fonte: o autor.

Quando o Inkscape exporta um desenho, o fundo do desenho transparente. Objetos brancos no

se alteram, permanecendo brancos na imagem PNG.

2.3.13 Exportao em Lote

Exportamos anteriormente todo projeto em um PNG, entretanto, o Inkscape tem a capacidade de

exportar de vrias formas, entre elas est a exportao em lote. Lote quer dizer que vrias fatias da
imagem vo ser exportadas com um nico comando. Isto essencial para que uma ferramenta de
desenvolvimento para pginas em HTML possa gerar as pginas a serem publicadas.

No comeo 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 vrios retngulos que
sero as fatias da imagem.

55

Competncia 02

Ento, vamos comear. No painel Camadas, clique no cone do olho da camada Contedo, porque
este no ser o contedo real de nosso futuro site. Ns s queremos as imagens que vo 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 retngulos devem cobrir
todos os objetos das camadas inferiores, impossibilitando de serem vistos. Ento, 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 pgina em lote.

Fonte: o autor.

Selecione o retngulo do topo do site, e clique com o boto direito do mouse nele. No menu que
aparecer, selecione Propriedades do Objeto. Ir aparecer uma caixa de dilogo, como na Figura 54.
No campo Id, coloque um nome (sem espaos, acentos ou caracteres especiais e de preferncia
tudo minsculo), para o objeto, como por exemplo, topo, e clique em Aplicar.

56

Competncia 02

Figura 54 - propriedade do objeto.

Fonte: o autor.

Esses vo ser os nomes dos arquivos quando exportar em lote. Ser um arquivo para cada
retngulo. No precisa fechar a caixa de dilogo Propriedade do Objeto, basta selecionar um novo
retngulo e dar os nomes. Como sugesto, utilizei: topo, menu, contedo e rodap. Dessa forma
mesmo em que esto escritas as palavras, sem acentos. No se esquea 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 retngulos no iro poluir a gerao das imagens.
Certifique-se de que a camada Fatias est ativa e selecione todos os retngulos desta camada. Voc
consegue isso pelo menu Editar, depois na opo Selecionar Todos.

Agora no menu Arquivo, selecione a opo Exportar Bitmap. Marque a caixa Exportar em Lote 4
Objetos Selecionados.

Observe na Figura 55 que voc no poder definir mais a localizao de criao dos arquivos. Eles
sero criados na pasta onde o arquivo SVG est salvo.

57

Competncia 02

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 retngulo:

topo.png;

menu.png;

conteudo.png e;

rodape.png.

Finalmente, s pressionar Exportar que todas as quatro imagens sero criadas.

Assim, encerramos este captulo. Demonstramos como utilizar o Inkscape para planejar e gerar
imagens para seus sites.

Lembre-se de que o aprendizado se fixa atravs da repetio, da prtica. Repita algumas vezes o
que fizemos at que voc possa fazer sem necessidade de consultas.

58

Concluso
Espero que voc tenha aprendido e se divertido na produo de ilustraes vetoriais utilizando a
ferramenta Inkscape atravs deste caderno. Entretanto, nada aprendido at aqui ser de valia para
voc se no praticar. A prtica constante, levar voc a atingir graus altssimos de conhecimento
sobre a ilustrao vetorial para web.

Vimos que o campo da ilustrao vetorial muito rico em publicidades, tanto para mdias impressas
quanto para o paradigma da Internet. Mas depende da criatividade e experincia prtica de quem
utiliza. Somente com sua prtica constante e criatividade, voc realizar trabalhos belssimos e
autnticos.

At a prxima.

59

Referncias
ANDRADE, Marcos Serafim de. Adobe Indesign CS4. So Paulo: Senac, 2009.

DESENHO VETORIAL. WIKIPEDIA. Desenvolvido pela Wikimedia Foundation. Disponvel em

<http://pt.wikipedia.org/wiki/Desenho_vetorial>. Acesso em: 09 jul. 2014

EDUCACIONAL.

In:

APOSTILA

SVG.

Disponvel

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. So Paulo: Person, 2010.

PEDRINI, H., SCHWARTZ, W. R. Anlise de Imagens Digitais. So Paulo: Thomson, 2007.

RESOLUO DE IMAGEM. WIKIPEDIA. Desenvolvido pela Wikimedia Foundation. Disponvel em

<http://pt.wikipedia.org/wiki/Resoluo_de_ima gem>. Acesso em: 10 out. 2014.

SVG.

In:

WIKIPDIA.

Desenvolvido

pela

Wikimedia

Foundation.

Disponvel

em

<http://pt.wikipedia.org/wiki/SVG>. Acesso em: 10 out. 2014.

60

Minicurrculo do Professor

Anderson Elias do Nascimento

Mestre em Cincias da Computao (2014) atravs da Universidade Federal de Pernambuco - UFPE,

Ps-Graduado em Gesto da Tecnologia da Informao e Comunicao e Bacharel em Sistemas de
Informao como discente laureado pela Faculdade Maurcio de Nassau (2011). Atualmente
gerente de TI e Comunicaes na Moinho Petinho Indstria e Comrcio Ltda. Tem experincia na
rea de Cincia da Computao, com nfase avaliao de desempenho de sistemas, Sistemas de
Informao, atuando principalmente nos seguintes temas: automatizao de processos, sistemas
mobile, gesto corporativa e integrao de sistemas. Possui experincia na rea de
desenvolvimento WEB e design grfico.

61