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

Tcnico em Informtica
Ewerton Menezes de Mendona

2014
Ilustrao Vetorial
para Web

Presidenta da Repblica
Dilma Vana Rousseff

Vice-presidente da Repblica
Michel Temer

Ministro da Educao
Jos Henrique Paim Fernandes

Secretrio de Educao Profissional e
Tecnolgica
Alssio Trindade de Barros

Diretor de Integrao das Redes
Marcelo Machado Feres

Coordenao Geral de Fortalecimento
Carlos Artur de Carvalho Aras

Governador do Estado de Pernambuco
Joo Soares Lyra Neto

Secretrio de Educao
Jos Ricardo Wanderley Dantas de Oliveira

Secretrio Executivo de Educao Profissional
Paulo Fernando de Vasconcelos Dutra

Gerente Geral de Educao Profissional
Luciane Alves Santos Pula

Coordenador de Educao a Distncia
George Bento Catunda

Coordenao do Curso
Joo Ferreira

Coordenao de Design Instrucional
Diogo Galvo

Reviso de Lngua Portuguesa
Letcia Garcia

Diagramao
Izabela Cavalcanti

INTRODUO ............................................................................................................................ 3
1.COMPETNCIA 01 | CONHECER OS PRINCIPAIS FORMATOS DE REPRESENTAO
VETORIAL PARA WEB ................................................................................................................ 5
1.1 Grficos Vetoriais ................................................................................................... 5
1.2 Padres para Grficos Vetoriais ............................................................................. 7
1.3 Caractersticas do SVG............................................................................................ 8
1.4 SVG ....................................................................................................................... 10
1.5 SVG na Web .......................................................................................................... 11
1.6 SVG para Criao de Ilustraes ........................................................................... 13
2.COMPETNCIA 02 | PLANEJAR LAYOUTS E PEAS GRFICAS COM BASE EM VETORES
PARA WEB ............................................................................................................................... 15
2.1 Interface do Inkscape ........................................................................................... 16
2.2 Botes no Estilo Aqua .......................................................................................... 17
2.2.1 Configurando o Documento .............................................................................. 18
2.2.2 Ferramenta Zoom .............................................................................................. 19
2.2.3 Ferramenta Crculo, Elipse e Arcos ................................................................... 19
2.2.4 Pintura do Trao ................................................................................................ 20
2.2.5 Ferramenta Seleo e Transformao de Objetos ............................................ 21
2.2.6 Preenchimento .................................................................................................. 22
2.2.7 Editor de Degrad ............................................................................................. 23
2.2.8 Ferramenta Criar e Editar Degrad ................................................................... 25
2.2.9 Duplicar Objeto ................................................................................................. 26
2.2.10 Borrar e Opacidade (ou Transparncia) .......................................................... 26
2.2.11 Selecionando Objetos Atrs de Objetos ......................................................... 28
2.2.12 Duplicao de Preenchimentos ....................................................................... 29
2.2.13 Caminhos ......................................................................................................... 31
2.2.14 Editar Caminhos por Ns ................................................................................. 32
2.2.15 Ferramenta Texto ............................................................................................ 33
2.2.16 Alterando a Ordem dos Objetos ..................................................................... 34
2.3 Planejanto Web Sites com Inkscape .................................................................... 36
2.3.1 Definindo Formatos Personalizados ................................................................. 36
2.3.2 Camadas ou Layers ............................................................................................ 37
Sumrio

2.3.3 Grade ................................................................................................................. 39
2.3.4 O Layout ............................................................................................................ 39
2.3.5 Linhas Guias ....................................................................................................... 41
2.3.6 Ttulo do Site ..................................................................................................... 43
2.3.7 Sombra .............................................................................................................. 44
2.3.8 O Logotipo ......................................................................................................... 46
2.3.8.1 Ferramenta Criar Estrelas e Polgonos ........................................................... 47
2.3.9 Ferramenta Texto Pargrafo ............................................................................. 48
2.3.10 Adicionando Imagens ...................................................................................... 49
2.3.11 Exportao....................................................................................................... 53
2.3.12 Exportao em Lote ........................................................................................ 54
CONCLUSO ........................................................................................................................... 59
REFERNCIAS .......................................................................................................................... 60
MINICURRCULO DO PROFESSOR ........................................................................................... 61

3
Ilustrao Vetorial para Web
INTRODUO

Caro (a) aluno (a), h diversas ferramentas para criao de sites. Algumas
delas so melhores do que outras em certos aspectos, apesar de realizar as
mesmas tarefas. Por exemplo, normalmente a construo de sites para web
utiliza imagens. Estas imagens podem ser produzidas por alguma
ferramenta de edio de imagem, como o GIMP, que vocs acabaram de
ver na disciplina anterior, mas tambm podem ser produzidas por
aplicativos de desenho vetorial como o INKSCAPE. Sempre digo que a
melhor ferramenta para voc produzir aquela que voc j conhece. Ento,
para voc poder ter mais liberdade criativa muito importante que
conhea um programa de desenho vetorial. Assim, este curso apresenta
duas competncias:

A primeira lhe oferece conhecimentos relacionados a formatos vetoriais
para a WEB, dando informaes sobre as caractersticas desses formatos.
Assim, voc saber o que so, as vantagens e desvantagens.
A segunda competncia fornece informaes para melhor planejar seu
layout, dando dicas para finalizar seu trabalho com mais qualidade e
rapidez.

A ateno nestas competncias, junto a todo o curso que voc est se
dedicando, vai permitir, ao final, que voc seja um indivduo mais
preparado para enfrentar o mercado de trabalho, conhecendo, assim, a
manipulao de desenhos vetoriais, uma opo alm da edio de imagem.

Assim, como dito, esta disciplina dividida em duas competncias que do
a oportunidade de aprender criao de desenhos vetoriais para aplicao
em web sites. So elas:

Conhecer os principais formatos de representao vetorial para Web;
Planejar layouts e peas grficas com base em vetores para Web.

4
No decorrer das competncias voc conhecer os desenhos vetoriais como
uma opo para criaes, o que eles so, as caractersticas e diferenas em
relao manipulao de imagens, alm de informaes que sero uteis
para o planejamento de projetos web utilizando grficos vetoriais.

Os grficos vetoriais possuem sua importncia como uma opo que, bem
utilizada, pode beneficiar a criao de web sites em rapidez e qualidade,
principalmente quando o projeto envolve ilustraes, e isso no apenas no
desenvolvimento de sites como tambm na publicidade online.

Este material foi desenvolvido para dar uma viso inicial, mas abrangente
da ferramenta Inkscape. Recursos extras so disponibilizados em vrios
formatos, entre eles esto hiperlinks que possuem mais conhecimentos
para aprofundamento em assuntos especficos.

Ento, comearemos descobrindo o que uma ilustrao vetorial e quais as
diferenas dela em relao s imagens digitais.

5
Competncia 01
1.COMPETNCIA 01 | CONHECER OS PRINCIPAIS FORMATOS
DE REPRESENTAO VETORIAL PARA WEB

1.1 Grficos Vetoriais

Na apresentao deste material falei que grficos ou ilustraes vetoriais
so uma alternativa para o desenvolvimento de pginas web. Mas o que
so grficos vetoriais?

Voc pode representar uma imagem em computadores como imagens
raster, tambm conhecidas como bitmaps, e imagens vetoriais. Na
imagem bitmap a representao feita por um mapa de bits, onde cada bit
representa uma cor. A imagem bitmap foi bem explicada na disciplina
anterior e este material no pretende repetir o que j foi dito. Mas se faz
necessria uma pequena reviso para se compreender o que seja uma
imagem vetorial.

Bem! Como ia dizendo, a representao de uma imagem bitmap
representada por um mapa de bit, como uma batalha naval em que cada
quadrado guarda uma informao de cor. Na Figura 1 abaixo, observe as
duas ampliaes da esquerda para a direita. Quanto mais ampliar uma
imagem, mais visveis sero os quadrados (pixels) que formam a imagem.

Figura 1 Ampliao de uma imagem.
Fonte: Prprio autor.

As imagens vetoriais so representadas atravs de funes matemticas.
Assim, para se desenhar um crculo vermelho com contorno preto existe

A disciplina anterior
foi desenvolvida
para apresentar as
imagens digitais.
Este breve resumo
no tem a inteno
de encerrar o
assunto. Caso
queira saber mais
sobre imagens
digitais, visite o
hiperlink abaixo.
Nele, voc
encontrar maiores
informaes sobre
este assunto
especificamente.
http://pt.wikipedia.
org/wiki/Imagem_d
igital

6
Competncia 01
um cdigo que diz como a funo ir funcionar para representar
propriedades como tamanho, posio, largura do contorno, deformaes
etc. Observe o exemplo na Figura 2.

Figura 2 Padro que descreve um crculo vermelho com contorno preto de largura 2. No se preocupe
com este cdigo agora.

Uma das maiores vantagens de grficos vetoriais sobre as imagens bitmaps
a resoluo virtualmente infinita dos grficos vetoriais. Como a
representao feita por um cdigo, chamado de padro, o software exibe
sem perda, no importando o quanto voc amplie a imagem. Observe na
Figura 3.

Figura 3 Ampliao de uma ilustrao vetorial.

claro que h uma limitao para a representao por meio dessa
tecnologia. muito mais conveniente representar uma foto por uma
imagem bitmap, mas uma marca, por exemplo, que no possui o grau de
complexidade de uma fotografia, muito melhor representado por um
grfico vetorial.

Apesar dessa caracterstica, alguns artistas com dedicao e estudo
conseguem criar obras de arte representando realisticamente fotografias
atravs de vetores.

Caso queira se
aprofundar mais
sobre as diferenas
entre imagens
bitmap e imagens
vetoriais visite o
hiperlink abaixo.
Nele, voc
encontrar maiores
informaes sobre
este assunto
especificamente.
org/wiki/Desenho_
vetorial

7
Competncia 01

Figura 4 Parece uma foto de uma xcara de caf, mas uma ilustrao veto-
rial.
Fonte: http://www.allvectors.com/coffee-vector/, 2012.

Na prxima competncia, voc conhecer alguns truques para a criao
de bonitos efeitos utilizando grficos vetoriais no Inkscape. Mas, antes,
vamos conhecer alguns padres disponveis para grficos vetoriais.

1.2 Padres para Grficos Vetoriais

Vimos anteriormente que os grficos vetoriais so armazenados em cdigo.
O cdigo, ento, lido por uma funo matemtica e sua representao
exibida pelo software. Esse cdigo chamado de padro e existem alguns
padres populares.

Alguns desses padres esto brevemente descritos abaixo:

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 em WMF.
EMF: evoluo do WMF, significando Enhaced MetaFile. EMF armazena
a informao em 32 bits, dessa forma guardando mais informaes que seu
antecessor. No entanto, mesmo com a ampliao de seus recursos, ainda

8
Competncia 01
inferior a outros padres especialistas.
DRW: formato para grficos vetoriais que suportado pelos programas
mais populares. Esse formato tambm tem limitaes em comparao com
outros formatos.
DXF: formato desenvolvido pela Autodesk para possibilitar a troca de
grficos vetoriais entre os diferentes programas CAD. Programas CAD so
ferramentas especializadas no desenvolvimento de projetos que exigem
desenhos precisos. Existem dois tipos de DXF, um codificado em ASCII e ou
em binrio. 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. Eles so reconhecidos pela maioria dos
programas de desenho vetoriais.
CDR: 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, 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: formato proprietrio da Adobe para seu programa de desenho
vetorial 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, responsvel pela
padronizao da web, as verses mais recentes dos navegadores mais
populares podem exibir seu contedo.

1.3 Caractersticas do SVG

Vimos que o SVG se destaca por ser um excelente padro de armazenagem

ASCII o acrnimo
para American
Standard Code for
Information
Interchange. Caso
voc queira saber
mais a respeito, leia
em:
org/wiki/ASCII

Existem outros
formatos vetoriais.
Pesquise
informaes sobre
o formato SXD.

9
Competncia 01
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.

Padro Aberto

Por ser definido por um consrcio de vrias empresas que tm a inteno
de padronizar a troca de documentos pela internet, o SVG foi determinado
como um padro aberto. Isso quer dizer que a empresa que quiser utilizar o
SVG poder, sem ter que pagar pelo seu uso, basta seguir as regras
definidas pelo padro.

Visualizao em Navegadores

Assim, vrios programas de criao vetorial, entre eles o Corel Draw,
Illustrator, Inkscape podem abrir e salvar nesse formato. No s programas
de desenho, como tambm os navegadores, como o Internet Explorer,
Firefox, Chrome, etc., em suas verses mais recentes, tambm podem
visualiz-los.

Embutido em HTML

A W3C construiu o SVG derivado do XML. Ento, os comandos de criao
so fceis de serem compreendidos, possibilitando seu uso junto do cdigo
HTML. Vocs vero HTML na disciplina de Web Design que ser dada mais
adiante. Observe a Figura 6 abaixo, perceba o cdigo HTML e no meio, em
destaque azul, o cdigo SVG de um crculo vermelho com contorno preto.
Ao lado do cdigo est o que exibido pelo navegador.

10
Competncia 01

Figura 5 esquerda o cdigo de uma pgina web simples. Em destaque azul, o comando de criao
de um crculo, sua posio, seu raio, cor contorno, largura do contorno e cor de preenchimento. No
lado di-reto, o resultado.

Tente fazer este exerccio:

1- Abra o Bloco de Notas e digite o texto da Figura 5, exatamente igual.
Se tiver qualquer erro, a imagem no ser exibida igual;
2- Salve o arquivo com o nome TESTE.HTML e tenha cuidado em verificar
se a extenso est correta;
3- D dois cliques em TESTE.HTML para exibir a ilustrao em seu
navegador. Caso seu navegador seja uma verso antiga, pode ser que
no seja exibido.

Interao e Animao

O SVG pode ter interao e ser animado nas pginas web atravs de uma
linguagem de programao chamada JavaScript. Esta linguagem define
comportamentos para elementos nas pginas web, adicionando elementos
interativos como botes e controles, bem como animaes.

1.4 SVG

O Scable Vectorial Graphics ou, mais simplesmente, SVG pode guardar trs
tipos de representao:

Se voc tiver
alguma dificuldade
no exerccio
anterior, assista ao
procedimento neste
endereo.
https://vimeo.com/
53748546

11
Competncia 01
Grficos vetoriais: formas geomtricas descritas atravs de comandos;
Imagens bitmaps: imagens raster, como fotografias;
Texto: a informao sobre o texto guardada possibilita a edio
posterior, o que no possvel quando o texto convertido em imagem
raster ou grficos vetoriais.

Como o arquivo armazenado em formato textual, eles 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.5 SVG na Web

Vimos que os grficos vetoriais em SVG tanto podem ser armazenados em
arquivos com a extenso SVG, como tambm em pginas HTML.

Voc pode encontrar ilustraes em SVG na internet e acrescent-las em
suas pginas atravs do seguinte cdigo:

<object data='teste.svg' type='image/svg+xml' width='450' height='300'>
<\object>

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.

Outra maneira digitar o cdigo de criao das ilustraes diretamente no
HTML, mas no se preocupe em ter de fazer suas ilustraes dessa forma.
Voc poder utilizar o Inkscape para criar suas ilustraes sem ter que
digitar nenhum cdigo e, se preferir, acrescentar o cdigo HTML acima.

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, o CSS 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 assim um
padro.

Caso queira saber
mais informaes
sobre o formato
SVG, acesse o
hiperlink abaixo:
org/wiki/SVG

12
Competncia 01
Bem mais conveniente. Mas, vamos dar uma olhada em poucos cdigos em
SVG. Dessa forma, voc ter um conhecimento a mais sobre o assunto.

Vamos comear de forma simples, desenhando uma linha. Observe o
cdigo na Figura 7.

Figura 6 Cdigo que representa uma linha em SVG e suas configuraes.

Vamos entend-lo:

<line x1='20' y1='20' x2='200' y2='180' stroke='black' stroke-width='2' />

<line /> o comando. Observe que ele termina com uma barra
invertida />;
x1 e y1 so as posies iniciais, a coordenada 0,0 no canto superior
esquerdo da pgina;
x2 e y2 so as posies finais;
stroke a cor de contorno, no caso da linha;
stroke-width a largura em pixels do contorno.

O restante do cdigo pertence pgina HTML. Coloque todos os cdigos
SVG dentro do bloco abaixo, no lugar dos trs pontinhos:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

</svg>

Ficou curioso em
como desenhar
com cdigo SVG?
Voc encontrar
mais informaes
sobre esse assunto
e muito mais neste
endereo:
http://uni.educacio
nal.com.br/up/6801
0001/5075252/SVG
.pdf

13
Competncia 01
1.6 SVG para Criao de Ilustraes

A criao de ilustraes escrevendo cdigo interessante, mas pouco
conveniente. O ideal que utilizemos uma ferramenta de desenho vetorial
que salve em SVG. Assim, no nos preocupamos com a escrita correta do
cdigo e sim com o trabalho artstico que estamos fazendo.

Uma excelente ferramenta gratuita para desenho vetorial o Inkscape.

O Inkscape no possui de forma nativa a capacidade de exportar HTML j
com as imagens posicionadas corretamente. Por forma nativa quero dizer,
sem a ajuda de programas externos, chamados plug-ins, No entanto, voc
pode planejar a aparncia de seu web site nele e exportar imagens no
formato PNG para depois montar sua pgina.

Em uma futura disciplina, a de Web Design, voc ter competncias
responsveis por essa tarefa. Por enquanto, vamos nos dedicar a criar as
imagens, de forma vetorial, na nossa prxima competncia, a de Planejar
layouts e peas grficas com base em vetores para Web.

Antes de comearmos, ser necessrio configurar de forma adequada o
Inkscape. que o Inkscape capaz de subdividir pixel aumentando sua
preciso, porm prejudicando a formao de imagens em PNG em curvas e
textos. Evite nmeros fracionados como, por exemplo, 300,45. O melhor
seria 300.

Assim, v em Configuraes do Inkscape (Inkscape Preferences) no menu
Ficheiro (File), ou pressione Shift + Ctrl + P para aparecer a lista de opes.
No menu esquerda, selecione a opo Passos (Steps). Configure as trs
primeiras opes para 1px, 10px e 1px de acordo com a Figura 8. No se
importe com os zeros depois da vrgula.

Voc encontrar o
instalador do
Inkscape em:
www.softonic.com.
br/s/inkscape-
0.48.3.1-1

O Inkscape possui
traduo para o
portugus do Brasil.
Caso voc tenha
instalado em outro
idioma e deseje
mudar, aps abrir o
Inkscape siga estes
passos:
1-Tecle juntos o
Shift + Ctrl + P
2-Ir abrir o painel
de configuraes.
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.

14
Competncia 01

Figura 7 Configurao de deslocamento com o uso de setas.
Fonte: Prprio Autor.

Na prxima competncia, utilizaremos o Inkscape para planejar um web
site enquanto aprendemos a us-lo.

Esta competncia teve poucas prticas, mas agora vamos arregaar as
mangas. Aps o planejamento, aprenderemos a exportar as imagens que
futuramente, em uma prxima disciplina, podero ser usadas para montar
sua pgina.

15
Competncia 02
2.COMPETNCIA 02 | PLANEJAR LAYOUTS E PEAS GRFICAS
COM BASE EM VETORES PARA WEB

Na competncia anterior vimos o que so grficos vetoriais, o nosso SVG, e
no que eles so diferentes das imagens bitmaps, alm de suas vantagens e
desvantagens.

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.

Ento chegamos ao Inkscape, uma aplicao para desenho vetorial de
cdigo aberto, ou seja, voc no precisa comprar uma licena para us-lo,
oque 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.

Infelizmente, o Inkscape no pode exportar seu layout direto para HTML
como outras aplicaes o fazem, mas aprenderemos como exportar todas
as imagens de uma vez para que, em uma disciplina futura, voc possa
montar adequadamente seu layout criado no Inkscape.

Agora, vamos conhecer o programa medida que construmos efeitos
especiais para um boto. Como disse no final da competncia anterior, o
trabalho ser mais prtico do que terico.

Voc j deve ter instalado o Inkscape. Se voc ainda no o fez, tem o
endereo de onde voc pode baixar, alm de como mudar o idioma do
programa para o portugus e configuraes que sero necessrias para que

16
Competncia 02
tudo d certo. s voltar competncia anterior para seguir esses passos.

Tudo pronto? Ento, vamos l!

2.1 Interface do Inkscape

Primeiro, deixe-me explicar rapidamente sobre a interface do Inkscape.
Inicie o programa para que voc possa acompanhar esse material junto
com o que voc tem instalado no computador.

Vamos dar uma olhada na interface, Figura 9.

Figura 8 Interface do Inkscape.

1. Menu Textual: menu em que os comandos e controles so exibidos de
forma textual;
2. Comandos: barra de cones com os comandos. Tambm podem ser
encontrados no menu textual;
3. Controles: barra sensvel ao contexto, que exibe os controles referentes
ferramenta ativa no momento;

17
Competncia 02
4. Caixa de Ferramentas: barra com as ferramentas, que o sistema
disponibiliza para realizao do trabalho;
5. rea de desenho: Apesar de voc poder 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;
6. Cores: Exibe as cores de preenchimento e borda do objeto selecionado;
7. Camada: Exibe a camada ativa no momento, junto com as
configuraes de exibio e bloqueio;
8. Paleta de Cores: Disponibiliza as cores para uso;
9. Informaes: exibe informaes referentes ao contexto;
10. Zoom: caixa com opes de magnificncia do documento.

A interface do Inkscape semelhante a muitas outras, principalmente a
outros programas de desenho vetorial. J o funcionamento de suas
ferramentas mais semelhante ao do Adobe Illustrator.

Um conselho importante o de sempre salvar seu trabalho. Para salvar no
Inkscape, v ao menu textual em Ficheiro (File) e selecione Guardar (Save).
Se for a primeira vez que voc est salvando o arquivo, o software vai
solicitar um nome e uma localizao. Preste ateno onde vai guardar o
arquivo para poder localiz-lo facilmente mais tarde.

2.2 Botes no Estilo Aqua

Aqua foi um estilismo que ficou muito popular quando usado pela Apple.
Voc j deve ter visto cones e botes que se utilizam desse efeito. A Figura
10 mostra como nosso boto ficar quando voc concluir essa
competncia, pois trabalharemos na elaborao do mesmo.

Magnificncia a
qualidade das
lentes em poder
aumentar e reduzir
a imagem. O termo
utilizado no
portugus em
substituio ao
termo zoom, j que
a ferramenta tanto
tem o poder de
ampliar como de
reduzir.

18
Competncia 02

Figura 9 Boto estilo aqua.

2.2.1 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 Ficheiro (File), clique em
Propriedades do Desenho... (Document Properties...). Na tela que aparecer,
em Stage Size, selecione Icon 48x48 px. Esta configurao nos dar uma
rea em pixels para desenharmos nosso boto aqua.

Figura 10 Janela de Propriedades do Desenho, atalho Shift + Ctrl + D.

Existem diversas
formas para se
chegar s opes do
programa. As
formas mais
comuns so atravs
de cones que esto
destacados com as
setas vermelhas nas
figuras, por meio do
menu textual e
pelas teclas de
atalho que esto
descritas nas
legendas das
figuras. Escolha o
jeito que mais lhe
agrade.

19
Competncia 02
2.2.2 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 (Zoom to fit page
in window), que est destacada no quadro vermelho da Figura 12. Clique na
Ferramenta Zoom na barra de ferramentas e depois no cone destacado
para ajustar a visualizao da pgina.

Figura 11 Ferramenta Zoom, atalho F3. Ferramenta para caber a pgina na janela, atalho 5.

2.2.3 Ferramenta Crculo, Elipse e Arcos

Com a pgina ajustada, vamos utilizar a ferramenta Crculo, Elipse e Arcos
(Create circles, ellipses, and arcs) para desenhar um crculo na pgina.
Selecione a ferramenta, clique e arraste na pgina. No se preocupe nem
com tamanho, posio ou cores. Ajustaremos isso mais adiante.

20
Competncia 02

Figura 12 Ferramenta Crculo, Elipses e Arcos, atalho F5.

2.2.4 Pintura do Trao

Para este trabalho especificamente, o trao de borda ir nos atrapalhar.
Podemos remov-lo selecionando no menu textual Objecto (Object), a
opo Preenchimento e Trao (Fill and Stroke). Ir aparecer uma caixa de
dilogo como na Figura 14, clique na aba Pintura de Trao (Stroke Paint),
depois no x para retirar o cotorno.

21
Competncia 02

Figura 13 Painel Preenchimento e Trao, atalho Shift + Ctrol + F.

2.2.5 Ferramenta Seleo e Transformao de Objetos

Vamos agora deixar o crculo como deve ser. Antes, um aviso importante. O
Inkscape capaz de trabalhar com subdivises de pixel. Isso muito bom,
mas na hora de gerar imagens pode causar problemas. Para resolver,
necessrio que, ao criar alguma ilustrao, use apenas valores redondos de
pixel.

Vamos demonstrar essas correes. Na Barra de Ferramentas clique na
ferramenta Seleo e Transformao de Objetos (Selects and transform
objects) e no crculo. Veja na Figura 15, na parte destacada em vermelho, a
posio x e y do objeto, a largura em w, a altura em h. Deixe como na
figura. Observe que s usei nmeros redondos.

As opes em
Preenchimento e
Trao mostram as
configuraes do
objeto selecionado.
Assim, verifique se
o crculo est
selecionado para
que as modificaes
sejam efetivas.

22
Competncia 02

Figura 14 Ferramenta Seleo e Transformao de Objetos, atalho F1.

2.2.6 Preenchimento

Agora, vamos fazer o preenchimento. Abra a caixa Preenchimento e Trao
(Fill and Stroke), como fizemos anteriormente para apagar a borda do
crculo, na Figura 16, o cone apontado pela seta vermelha. Depois,
selecione a aba Preenchimento (Fill), apontada pela seta azul. Esta aba
guarda as configuraes de preenchimento que podem ser Cor Lisa,
Degrad Linear, Degrad Radial, Padro e Swatch.

Selecione Degrad Radial (Radial Gradient), que est apontado pela seta
verde. Clique no boto de Editar... (Edit...), que est apontado pela seta
laranja. Ir abrir uma janela chamada Editor de Degrad (Gradient Editor),
seta preta.

23
Competncia 02

Figura 15 Preenchimento e Trao.

2.2.7 Editor de Degrad

Este efeito precisa de vrios preenchimentos em degrad, ento preste
bastante ateno a partir de agora.

Figura 16 Editor de Degrad

Caso voc teve
alguma dificuldade
no exerccio
procedimento neste
endereo:
https://vimeo.com/
53751272

24
Competncia 02
A primeira linha mostra o degrad.

A caixa logo abaixo mostra a cor inicial e a final. Nesse caso, a que fica no
lado esquerdo e direito. Selecione aqui a que voc quer alterar.

Em Cor da Parada (Stop Color) voc seleciona a forma de seleo
cromtica, que podem ser RGB, HSL, CMYK, Roda e CMS. Cada um escolhe a
que preferir. Eu prefiro a HSL.

Em H, Hue, voc seleciona a cor.

Em S, Saturation, a pureza da cor.

Em L, Luminosity, o brilho da cor.

Em A, Alpha, a transparncia da cor.

Faa ento o seguinte. Na caixa de seleo da cor inicial e final, escolha a
primeira cor e configure com os valores da Figura 18. Basta digitar os
nmeros H=82, S=255, L=128 e A=255.

Figura 17 Configurao da cor da esquerda.

25
Competncia 02
Agora, na mesma caixa de seleo da cor inicial e final, escolha a segunda
cor e configure com os valores da Figura 19. Basta digitar os nmeros H=82,
S=255, L=60 e A=255.

Figura 189 - Configurao da cor da direita.

Pronto! Assim voc poder editar as cores de degrad, at se elas forem
semitransparentes, bastando colocar um valor menor para A.

2.2.8 Ferramenta Criar e Editar Degrad

Com a ferramenta Criar e Editar Degrad (Creat and Edit Gradients) voc
pode alterar o degrad dinamicamente. Ao clicar no cone destacado na
Figura 20, aparecero trs controles que esto circulados em vermelho na
Figura 20. Clique neles e os mova at ficarem com a mesma aparncia da
imagem.

26
Competncia 02

Figura 19 Criar e Editar Degrad, atalho Ctrl + F1.

2.2.9 Duplicar Objeto

Vamos precisar duplicar o crculo. Para isso, voc pode selecionar no menu
textual Editar (Edit) o item Duplicar (Duplicate), ou usar as teclas de atalho
Ctrl + D. Lembre-se de que o objeto a ser duplicado precisa estar
selecionado.

2.2.10 Borrar e Opacidade (ou Transparncia)

Com o novo objeto que acabamos de duplicar, vamos modificar o
preenchimento para que se parea com uma sombra e d volume a nossa
ilustrao.

Primeiro, vamos limpar o preenchimento, escolhendo no painel
Preenchimento e Trao (Fill and Stroke) o cone da Cor Lisa (Flat Color), seta
vermelha na Figura 21. Logo abaixo, voc vai encontrar as configuraes de
cores. Na guia HSL modifique seus valores para H=0, S=0, L=0 e A=255.
Assim, o preenchimento ser um chapado preto. Mais abaixo do painel

27
Competncia 02
temos a configurao de Borrar (Blur). Coloque o valor de 3 e em
Opacidade (Opacity), coloque o valor de 50. Borrar serve para desfocar a
borda, opacidade o quanto do objeto exibido.

Figura 20 Borrar e Opacidade.

Atravs de Borrar, temos uma sombra. O valor de 50 em Opacidade exibe
parcialmente o objeto atrs. Mas ainda no est bom. Vamos transformar o
preenchimento em degrad para dar a sensao de volume.

J foi dito anteriormente como modificar as cores de preenchimento. Caso
tenha esquecido, d uma olhada no subcaptulo 3.2.7 e 3.2.8. S que agora
voc vai colocar os seguintes valores: para a cor inicial H=0, S=0, L=0 e A=0;
para a cor final H=0, S=0, L=0 e A=255. Veja como fica na Figura 22.

Em outros
softwares, voc
pode encontrar a
opo de
Opacidade com o
nome de
Transparncia ou
Alpha. Apesar de
terem significados
diferentes, eles
possuem o mesmo
efeito. A diferena
bsica que 100%
de opacidade
mostra o objeto
totalmente e 100%
de transparncia
esconde o objeto
totalmente.

28
Competncia 02

Figura 21 Configurao de preenchimento radial esquerdo.

2.2.11 Selecionando Objetos Atrs de Objetos

O crculo borrado est por cima do crculo verde, impedindo a seleo dele
com o cursor. Para selecionarmos, ento, o crculo verde, teremos que
pressionar a tecla TAB.

O TAB serve para selecionar o prximo objeto da camada atual. Como na
camada atual s existem dois objetos e o crculo borrado j est
selecionado, o TAB selecionar nosso crculo verde.

Agora, duplique o crculo verde novamente. Como fizemos no subcaptulo
3.2.9. e com a ferramenta de Seleo e Transformao de Objeto (Select
and Transform Objects), que vimos no subcaptulo 3.2.5, vamos definir a
localizao x e y, e a largura e altura de acordo com a Figura 23, onde est o
retngulo vermelho.

29
Competncia 02

Figura 22 Configurando a posio, largura e altura do crculo interno.

2.2.12 Duplicao de Preenchimentos

Como duplicamos o objeto, temos dois objetos com o mesmo
preenchimento. Assim, se alterarmos o crculo interno, o que est atrs
ser alterado tambm.

Para corrigir esse comportamento, selecione o crculo interno, caso no
esteja marcado, e no painel Preenchimento e Trao (Fill and Stroke)
pressione o boto Duplicar. Veja a Figura 24. Como estamos no painel
Preenchimento e Trao (Fill and Stroke), esse boto ir duplicar apenas o
preenchimento. Agora, podemos edit-lo sem medo.

Sempre tenha
cuidado com
objetos duplicados
e seus
preenchimentos. Se
acontecer de voc
alterar o
preenchimento de
um objeto e outro
tambm modificar,
provvel que eles
estejam
compartilhando o
mesmo
preenchimento.

30
Competncia 02

Figura 23 Duplicar preenchimento.

Agora clique no boto Editar... (Edit...) para modificarmos as cores do
preenchimento. A cor inicial H= 0, S= 0, L= 255 e A=255 e a cor final H=
0, S= 0, L= 255 e A=0. Observe a configurao da cor inicial na Figura 25.

Figura 24 Configurao da cor inicial do degrad radial do crculo menor.

Se por acaso voc
teve alguma
dificuldade no
exerccio anterior,
assista ao
procedimento neste
endereo.
https://vimeo.com/
53756808

31
Competncia 02
Agora, vamos duplicar o crculo menor com o degrad branco transparente.
Vimos como fazer isso no subcaptulo 3.2.9.

E vamos definir sua localizao, largura e altura para os valores da Figura 26
destacados pelo retngulo vermelho.

Figura 25 Definio das propriedades do reflexo inferior. Utilize a ferramenta de
Seleo.

Estamos quase terminando!

2.2.13 Caminhos

Vamos agora editar o crculo para tomar a forma que desejarmos. Para isso,
precisamos transformar o crculo em um caminho. Caminho o nome dado
ao contorno dos desenhos. No caso, as ilustraes no Inkscape so feitas
principalmente com caminhos. Voc ver que a forma que queremos no
se parece com um polgono (tringulo, quadrado, etc.) simples e, por isso,
precisamos transformar ele em um caminho.

32
Competncia 02
Primeiro, selecione nosso crculo menor. Cuidado para no selecionar o
crculo que achatamos anteriormente. Em caso de dvida, observe a
Figura 27. Agora, no menu textual selecione Caminho (Path) e Objeto para
Caminho (Object to Path).

Figura 26 Objeto para Caminho, atalho Shift + Ctrl + C.

2.2.14 Editar Caminhos por Ns

Os desenhos dos caminhos so feitos por meio de ns. As linhas comeam e
terminam por meio dos ns e tambm se conectam por elas. Observe que o
crculo tem quatro ns: um acima, um abaixo, um esquerda e outro
direita. Voc pode edit-los selecionando a ferramenta Editar Caminhos por
Ns (Edit path by nodes). Veja sua localizao na Figura 28, na Barra de
Ferramentas. Verifique se o objeto em que se deseja alterar os ns j se
encontra selecionado.

Cada n pode ter dois controles que definem sua curvatura. A esse tipo de
sistema dado o nome de Curvas de Brzie.

Para saber mais
sobre as Curvas de
Brzie veja o
hiperlink abaixo:
org/wiki/Curva_de_
Bzier

33
Competncia 02

Figura 27 Editar caminhos por ns, atalho F2.

Com a ferramenta Editar caminhos por ns (Edit path by nodes)
selecionada, voc pode clicar nos ns e posicion-los onde desejar. Voc
tambm pode modificar os controles de cada n. Observe a Figura 28,
foram feitas duas modificaes, a primeira no n de baixo, que foi
suspenso, a segunda foi no controle esquerdo desse n, que tambm foi
suspenso. O n e o controle esto destacados em retngulos vermelhos na
Figura 28.

Agora, o efeito de reflexo superior se parece com uma onda.

2.2.15 Ferramenta Texto

Vamos colocar uma letra no nosso boto, mas voc pode colocar o que
quiser.

Selecione a ferramenta Criar e Alterar Blocos de Texto (Creat and Edit text
objects), na Barra de Ferramentas. Observe sua localizao na Figura 29. Na

34
Competncia 02
Barra de Controle, escolha uma fonte e um tamanho. Na Figura 29, o
retngulo vermelho est destacando a localizao desses controles. Clique
onde voc quer digitar seu texto e escreva uma letra, pode ser a sua.

Voc pode arrastar a letra utilizando a ferramenta de Seleo (Select). Para
isso, basta clicar no objeto e arrastar para a nova posio. No caso de nossa
ilustrao, o centro do crculo verde parece ideal.

Figura 28 Ferramenta e Criar e alterar blocos de texto, atalho F8.

Finalizando!

2.2.16 Alterando a Ordem dos Objetos

Observe que nossa letra encontra-se acima do reflexo. Isto acontece
porque os objetos (letra, reflexo, crculo, sombra, etc.) encontram-se
empilhados um acima dos outros. Precisaremos descer a letra na ordem de
empilhamento at que a mesma fique atrs do reflexo.

Selecione a letra com a ferramenta de Seleo (Select), caso ainda no

35
Competncia 02
esteja selecionada. Agora v ao menu textual Objecto (Object) e selecione
Baixar (Lower). Faa isso at a letra se encontrar atrs do reflexo superior
como na Figura 30.

Figura 29 Levantar e Baixar objetos na pilha da camada, atalho PageUp para subir e PageDown
descer.

Pronto!

Alterando as cores de preenchimento do crculo com degrad verde voc
pode conseguir vrios botes diferentes. Alterando o contedo do boto
voc pode mudar o contexto, indicando outras funes. Observe os
exemplos abaixo.

36
Competncia 02

Figura 30 Exemplos de variao do efeito aqua.

2.3 Planejanto Web Sites com Inkscape

Como mencionei no incio desta competncia, o Inkscape no exporta a
pgina pronta como outros aplicativos, como o Gimp, que foi visto na
disciplina anterior. Aprenderemos ento a planejar a aparncia da pgina
no Inkscape e exportar pedaos em imagens PNG (o tipo de arquivo PNG foi
explicado na disciplina passada), chamados de fatias. Essas fatias sero
utilizadas na futura disciplina de web design para montar seu site.

Primeiramente, vocs vo executar o Inkscape, caso ele no esteja ativo, ou
criar um novo documento. V ao menu textual Ficheiro (File) e selecione a
opo Novo (New), depois Padro (Default). Como alternativa, voc pode
utilizar as teclas de atalho Ctrl + N.

2.3.1 Definindo Formatos Personalizados

Em vez de Padro (Default) voc poderia ter escolhido outro formato, mas
vamos utilizar um formato de documento personalizado. No menu textual
Ficheiro (File), selecione a opo Propriedades do Documento (Document
Properties). Em Tamanho Personalizado (Custon Size), coloque 960 para a
Largura (Width) e 600 para a Altura (Height), de acordo com a Figura 32.

Repetiremos muitas
tarefas vistas nos
subcaptulos
anteriores. O ideal
que vocs repitam a
execuo do efeito
aqua vrias vezes
at poderem usar
as ferramentas sem
consulta. Mas se
no lembrarem
como se faz
determinada tarefa
daqui por diante,
consulte o que foi
visto
anteriormente.

37
Competncia 02

Figura 31 Tamanho Personalizado do Documento.

um bom tamanho para a resoluo da maioria dos monitores atuais. Voc
conhecer mais sobre o melhor tamanho da pgina web para resoluo de
diversos monitores na disciplina de Web Designer.

Agora, voc deve salvar o arquivo. Preste ateno onde est salvando para
poder ach-lo mais tarde. Coloque o nome que desejar.

Antes de continuarmos, para visualizarmos melhor a pgina, pressione 5 no
teclado numrico para ajustar a magnificncia.

2.3.2 Camadas ou Layers

No Inkscape as ilustraes so organizadas em camadas, ou layers na lngua
inglesa. Elas funcionam como em outros softwares grficos, como o Gimp.
So empilhadas uma em cima das outras e servem para organizar seu
trabalho, alm de facilitar a seleo dos objetos. Cada camada pode

Para saber mais
sobre resoluo de
imagem, veja o
hiperlink abaixo:
org/wiki/Resoluo
_de_imagem

Uma boa atitude
salvar seu arquivo
constantemente
durante o processo
de construo de
seu trabalho. Caso
d algum problema
no computador,
voc no perder
todo o trabalho.
Lembre-se disso!

38
Competncia 02
guardar objetos como retngulos, crculos, textos, etc. Nada impede de que
voc faa toda sua ilustrao em apenas uma camada, mas para o trabalho
de fatiar imagens muito aconselhvel que voc faa da forma a seguir.

Ento, vamos l. No menu textual Camada (Layer), selecione a opo
Camadas... (Layers...). Voc tambm pode acionar o painel de opes
atravs do cone apontado na Figura 33.

No painel que abriu, pressione o boto de + para adicionar uma nova
camada. Na caixa de dilogo que aparece voc pode colocar um nome e
dizer em que posio a camada vai aparecer. Vamos apenas colocar o nome
de Fatias e pressionar Adicionar (Add).

Figura 32 Camadas, atalho Shift + Ctrl + L. Adicionar Nova Camada, atalho Shift + Ctrl + N.

No painel Camadas, voc pode selecionar a camada em que deseja
desenhar, clicando em alguma rea branca ao lado do nome da camada.
Caso queira renomear, basta clicar no nome da camada. Se quiser bloquear
para no permitir edies por engano, clique no cone de cadeado. Se
quiser esconder, clique no cone de olho. Para voltar a editar e/ou
visualizar, basta clicar novamente no cone correspondente.

Como as camadas
servem
principalmente para
organizar o
trabalho,
aconselhvel que
voc d nomes
reconhecveis s
camadas.

39
Competncia 02
2.3.3 Grade

O desenho de nosso layout ter que ser preciso. Para isso, o Inkscape
possui uma grade para ajustar suas criaes. Voc pode exibir a grade no
menu textual Ver (View), opo Grelha (Grid), Figura 34. A mesma opo
pode retirar a grade.

Figura 33 Grade, atalho Shift + 3.

2.3.4 O Layout

Agora que nosso documento est configurado, vamos planejar as reas de
nosso site. As reas so: ttulo, menu, contedo e rodap.

Vamos ento desenhar nossas reas com retngulos. Ser da mesma forma
que fizemos o crculo antes, s que desta vez utilizaremos a ferramenta
Retngulos e Quadrados (Creat Rectangles and Squares).

Ela funciona igual ferramenta Crculo, Elipse e Arcos (Creat Circles,

Lembre-se de que o
Inkscape pode
subdividir pixels, o
que d problema na
gerao de
imagens. Por isso,
quando for fazer
seus layouts, utilize
sempre nmeros
redondos.

40
Competncia 02
Ellipses, and Arcs). Voc seleciona a ferramenta (observe sua localizao na
Figura 35) e depois clica e arrasta para formar o retngulo.

Figura 34 Ferramenta Retngulos e Quadrados, atalho F4.

Vimos no captulo anterior que o contorno, ou trao, interfere no tamanho
e posicionamento dos objetos. Sendo assim, como vamos posicionar e
alterar o tamanho, devemos retirar o contorno usando o painel
Preenchimento e Trao, (Fill and Stroke) visto anteriormente.

Vamos fazer quatro retngulos e modificar suas configuraes para as que
esto abaixo. Voc pode ver o resultado na figura 36. Alterei as cores dos
retngulos para tons de cinza, para que voc possa identific-las melhor,
mas no h necessidade de voc fazer igual. Atente para o fato de que os
quatro retngulos foram construdos na camada Fatias.

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.

Caso o retngulo
no aparea,
verifique se a cor de
preenchimento e
trao esto
configuradas para
branco, ou se a
opacidade est
definida para zero.
O Inkscape guarda
as ltimas
configuraes
utilizadas.

41
Competncia 02
X=0, Y=470, W=960 e H=40.

Figura 35 Layout do site.

2.3.5 Linhas Guias

Linhas guias so linhas azuis no imprimveis que servem para orientar
nosso desenho. A grade feita por linhas azuis, mas neste caso elas fazem
parte de um padro que forma a grade. Para que possamos ver melhor
nossas linhas guias, vamos esconder a grade. Caso no se lembre, leia
novamente o subcaptulo 3.3.3.

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 textual
Editar (Edit), na opo Selecionar Todos (Select All), ou utilize a tecla de
atalho Ctrl + A. Agora, v novamente a Editar (Edit), na opo Copiar (Copy),

42
Competncia 02
ou utilize a tecla de atalho Ctrl + C. Pronto! 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 textual Editar (Edit), na opo
Colar no Lugar (Paste in Place), ou use as teclas de atalho Ctrl + Alt + V.

Verifique se seu documento est semelhante ao da Figura 37. Voc pode
esconder e exibir utilizando o menu textual Ver (View), na opo Guias
(Guides), ou pelas teclas de atalho Shift + \ .

Figura 36 Linhas guias.

Vamos esconder a camada Fatias, e renomear a camada debaixo. V ao
painel Camadas (Layers) e clique no cone do olho que fica na linha da
camada Fatias, dessa forma escondendo a camada. Clique no nome da
camada abaixo, na Figura 37 ela est nomeada de Layer1, e escreva
Background. Desenharemos a imagem de fundo de nosso site. Suas
camadas devem estar como as da Figura 38.

43
Competncia 02

Figura 37 Ajuste das camadas.

Com a camada background selecionada, tudo que desenharmos estar
nela.

2.3.6 Ttulo do Site

O ttulo do site identifica onde o usurio est. Se voc seguir uma
identidade visual, poucas cores, por exemplo, a identificao ser ainda
maior. Ento vamos utilizar branco, preto e verde.

Desenhe um retngulo, como fizemos anteriormente. Utilize as linhas guias
para ajustar nos cantos. Verifique sua posio e tamanho para ver se esto
com uma numerao redonda. A Figura 39 mostra como deve ficar seu
trabalho, a posio e tamanho que usei, bem como a numerao em HSLA
para o preenchimento de verde.

Uma alternativa mais rpida para seleo de cor lisa a barra de cores
abaixo. Para us-la, basta selecionar o objeto e clicar na cor.

44
Competncia 02

Figura 38 Ttulo do Site.

Duplique este retngulo selecionando-o e pressionando Ctrl + D. Ento,
deixe o retngulo 40 pixels menor, 20 pixels para cada lado. Voc pode
fazer isso rapidamente, ligando a grade usando a Shift + 3 e usando a
ferramenta de Seleo (Select). Veja como fica na Figura 40.

Figura 39 Utilizando a grade.

2.3.7 Sombra

Duplique este retngulo menor. Preencha com uma cor preta e no campo
Borrar coloque o valor de 3. Sua ilustrao deve ficar como na da Figura 41.

45
Competncia 02

Figura 40 Sombra.

Selecione a sombra e pressione Page Down uma vez para colocar a sombra
atrs do retngulo menor. Sua imagem deve ficar como na Figura 41.

Figura 41 Efeito sombra.

O prximo passo ser fazer o corpo de nosso site. Ento, vamos aproveitar
o retngulo menor que j est na largura adequada. Sendo assim, duplique
ele e d um preenchimento branco ao mesmo.

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

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

46
Competncia 02
superior e arraste-a um pouco para baixo. Para saber o posicionamento
correto, verifique a Figura 43.

Figura 42 Corpo do site.

Uma vez terminado, bloqueie a camada Background clicando no cone de
cadeado ao lado do nome da camada.

2.3.8 O Logotipo

Crie uma nova camada com o nome Logotipo. Tudo que criamos agora
estar nela. Assim, nosso trabalho estar bem organizado. Veja na Figura 44
como ser a organizao das camadas.

Figura 43 Organizao das Camadas.

47
Competncia 02
2.3.8.1 Ferramenta Criar Estrelas e Polgonos

Vamos fazer um estilismo que seria o equivalente a uma marca. Selecione a
ferramenta Criar Estrelas e Polgonos (Creat Stars and Poligons). Veja na
Figura 45 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 como na Figura 45. Para deix-
las com a mesma aparncia do nosso exemplo no painel Preenchimento e
Trao (Fill and Stroke), diminua a opacidade.

Figura 44 Ferramenta Criar Estrelas e Polgonos, atalho * (asterisco).

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. Veja como ficou
o nosso exemplo na Figura 46. Voc j aprendeu anteriormente como
colocar texto na ilustrao, mas, caso no se lembre, leia novamente o
subcaptulo 3.2.15.

48
Competncia 02

Figura 45 Ttulo do site.

2.3.9 Ferramenta Texto Pargrafo

Para continuarmos, crie mais uma camada, desta vez com o nome
Contedo. Veja como ficar nossa organizao de camadas na Figura 47.
Ser nela que colocaremos uma representao do futuro texto de nosso
site. Dessa forma, poderemos ver como nosso site se comportar quando o
texto for acrescentado. Isso no s facilitar a nossa apreciao como
tambm a de outras pessoas que desejarem mostr-lo.

Figura 46 Camada Contedo.

49
Competncia 02
Voc j aprendeu a colocar texto artstico, que um texto que no possui
pargrafos. Vamos colocar os ttulos dessa forma. Para texto que possui
pargrafos voc deve utilizar a ferramenta Criar e Alterar Objetos de Texto
como se fosse fazer um retngulo, clicando e arrastando. Na Figura 48, voc
observa como foi feito no exemplo. O controle que est circulado em
vermelho na imagem aumenta e diminui a caixa de texto, assim,
aumentando ou diminuindo a quantidade de texto exibida.

Figura 47 Texto Pargrafo.

2.3.10 Adicionando Imagens

Voc pode adicionar imagens bitmap a qualquer momento, caso haja a
necessidade de elaborar melhor seu projeto. 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 alguma, desde que fique claro em sua cabea o
que voc est fazendo.

50
Competncia 02
No comeo os aplicativos de desenho vetorial e edio de imagem eram
limitados a suas respectivas reas. Hoje, a tendncia que eles fiquem cada
vez mais unidos e o que d para fazer em um possa ser feito no outro. Mas
isto uma tendncia para o futuro. Como voc viu na primeira
competncia desta disciplina, vetores e bitmaps so diferentes na origem e
por isso as ferramentas de um tendem a no funcionar com o outro. Mas o
Inkscape possui algumas ferramentas simples de edio de imagem. O ideal
e o que normalmente feito profissionalmente, que voc edite as
imagens em uma ferramenta adequada, como o Gimp. Faa os efeitos,
ajustes e deixe no tamanho ideal, depois adicione ao seu projeto no
Inkscape.

Ento, como adicionamos uma imagem?

Observe a Figura 49. Nela, modificamos o texto pargrafo deixando uma
rea direita para uma imagem. J editamos a imagem anteriormente no
Gimp deixando j pronta para atualizao.

No menu textual Ficheiro (File), selecione Importar.... Se abrir uma caixa
de dilogo para que voc possa dizer qual arquivo ser importado. Observe
que na parte superior existem cones e o ltimo serve para ligar e desligar a
visualizao das imagens. Selecione a imagem que voc deseja importar e
clique em Abrir.

51
Competncia 02

Figura 48 Importar imagem, atalho Ctrl + I.

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. Cada
caso tem suas vantagens e desvantagens, mas se voc utilizar a opo link e
tirar o arquivo de imagem do lugar dela ou levar para algum lugar apenas o
SVG sem a imagem, ento a imagem no ir aparecer. At voc entender
perfeitamente esse processo melhor sempre utilizar embed, mesmo que
o arquivo fique gigante com as imagens. Ento, selecione embed e clique
em Ok. Figura 50.

52
Competncia 02

Figura 49 Opes Embed e Link.

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.

53
Competncia 02

Figura 50 Ajustando a imagem no layout.

2.3.11 Exportao

Nunca se esquea de salvar seu trabalho medida que 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 textual Ficheiro (File), selecione Exportar Bitmap... (Export
Bitmap...). Na caixa de dilogo que aparecer, clique em Desenho para
exportar toda a imagem. Em Nome de Ficheiro (Filename) coloque o
caminho e o nome do arquivo. Pressione Exportar (Export) para que o
arquivo PNG seja construdo. Veja na Figura 52.

54
Competncia 02

Figura 51 Exportar Bitmap, atalho Shift + Ctrl + E.

Quando o Inkscape exporta um desenho, o fundo do desenho
transparente. Objetos brancos no se alteram, permanecendo brancos na
imagem PNG.

2.3.12 Exportao em Lote

Da maneira que exportamos anteriormente, todo o trabalho colocado em
um PNG. Mas vocs vero na disciplina de Web Design que a montagem de
uma pgina web realizada com pedaos de imagem. 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.

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.

Ento, vamos comear. No painel Camadas (Layers), clique no cone do olho

55
Competncia 02
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 (Layers), 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.

Para que vocs possam visualizar, os retngulos de nosso exemplo foram
pintados de azul, mas vocs no precisam fazer isso. Observem como ficou
na Figura 53.

Figura 52 Camada Fatias.

Selecione o retngulo do topo do site, e clique com o boto direito do
mouse nele. No menu que aparecer, selecione Propriedades do Objeto
(Object Properties). Ir aparecer uma caixa de dilogo, como na Figura 50.
No campo Id, coloque um nome (sem espaos, acentos ou caracteres

56
Competncia 02
especiais e de preferncia tudo minsculo), para o objeto, como por
exemplo, topo, e clique em Aplicar (Set).

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 (Object Properties), basta selecionar um novo
retngulo e dar os nomes. Eu utilizei: topo, menu, conteudo e rodape.
Dessa forma mesmo em que esto escritas as palavras, sem acentos. No
se esquea de pressionar Aplicar (Set) 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 textual Editar
(Edit), opo Selecionar Todos (Select All).

Agora no menu textual Ficheiro (File), selecione a opo Exportar Bitmap...
(Export Bitmap...). Marque a caixa Exportar em Lote 4 Objetos Selecionados
(Batch export 4 selected objects). Observe na Figura 54 que voc no
poder definir mais a localizao de criao dos arquivos. Eles sero criados
na pasta onde o arquivo SVG est salvo.

Pronto! s pressionar Exportar (Export) que todas as quatro imagens
sero criadas.

57
Competncia 02

Figura 53 Exportao em Lote.

Veja que foram criadas quatro imagens:

topo.png;
menu.png;
conteudo.png e;
rodape.png.

Observe na Figura 55 o resultado do fatiamento em um fundo amarelo para
melhor visualizao. Como o PNG guarda informao de transparncia,
perceba que onde no havia desenho est transparente e as sombras esto
semitransparentes.

58
Competncia 02

Figura 54 Imagens fatiadas. A reproduo aqui no ficou adequada, mas com certeza voc ver o
resultado melhor em seu computador.
Fonte: Prprio do autor.

O Inkscape ainda no capaz de exportar para outros formatos de forma
nativa, mas voc pode utilizar o Gimp, que foi estudado na disciplina
anterior, para converter as imagens em outros formatos que achar
necessrio.

Caso voc teve
alguma dificuldade
no exerccio
procedimento neste
endereo.
https://vimeo.com/
53786222

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

59
CONCLUSO

Assim, encerramos a competncia de Ilustrao Vetorial para Web.
Demonstramos como utilizar o Inkscape para planejar e gerar imagens para
seus sites. Esperamos que tenha gostado, mas seu aprendizado no
termina por aqui. Sempre existe algo mais para aprender. Voc pode
encontrar, pesquisando na internet, mais contedo a este respeito e se
aperfeioar cada vez mais.

Nas prximas disciplinas voc aprender como dividir melhor as reas de
uma pgina web, dando continuidade ao que foi visto nesta competncia e
se tornando um melhor profissional. Tenha entusiasmo, faa mais e melhor
a cada dia que as recompensas viro.

60
REFERNCIAS

WIKIPEDIA, Imagem Digital. Disponvel em http://pt.wikipedia.org/wiki/
Imagem_digital. Acesso em 15 de novembro de 2012.

WIKIPEDIA, Desenho Vetorial. Disponvel em http://pt.wikipedia.org/wiki/
Desenho_vetorial. Acesso em 15 de novembro de 2012.

WIKIPEDIA, Figura 4. Disponvel em www.allvectors.com/coffee-vector/>.
Ace sso em 15 de novembro de 2012.

EDUCACIONAL, Apostila SVG. Disponvel em http://uni.educacional.com.br
/up/68010001/5075252/SVG.pdf. Acesso em 15 de novembro de 2012.

WIKIPEDIA, SVG. Disponvel em http://pt.wikipedia.org/wiki/SVG. Acesso
em 15 de novembro de 2012.

WIKIPEDIA, ASCII. Disponvel em http://pt.wikipedia.org/wiki/ASCII. Acesso
em 15 de novembro de 2012.

WIKIPEDIA, Resoluo de Imagem. Disponvel em http://pt.wikipedia.org/
wiki/Resoluo_de_image>. Acesso em 15 de novembro de 2012.

61
MINICURRCULO DO PROFESSOR

Ewerton Mendona formado em Sistemas de Informao pela UPE e
Design pela UFPE, com mestrado em Cincia da Computao pela UFPE.
Atualmente, professor da Faculdade de Cincias e Letras de Caruaru
FAFICA e professor substituto no IFPE em Belo Jardim. Possui experincia
na rea de desenvolvimento WEB e design grfico desde 1998.

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

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

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

Diunggah oleh

Hak Cipta:

Format Tersedia

Tcnico em Informtica

Ewerton Menezes de Mendona

Anda mungkin juga menyukai