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

7/25/2019 Caderno INFO(Ilustrao Vetorial para Web 2015.2).pdf

1/64

Ilustrao Vetorial para Web

Anderson Elias do Nascimento

Curso Tcnico em Informtica

Educao a Distncia2015


2/64


3/64

EXPEDIENTE

Professor Autor


DesignInstrucional

Deyvid Souza NascimentoMaria de Ftima Duarte Angeiras

Renata Marques de OteroTerezinha Mnica Sincio Beltro

Reviso de Lngua Portuguesa

Letcia Garcia

Diagramao

Izabela Cavalcanti

CoordenaoJoo 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


4/64

N244i Nascimento, Anderson Elias do.Ilustrao Vetorial para Web: Curso Tcnico em

Informtica: Educao a distncia / Anderson Elias doNascimento. Recife: Secretaria Executiva de EducaoProfissional de Pernambuco, 2015.

61 p.: il.

1. Educao a distncia. 2. Ilustrao vetorial. 3.Computao grfica. 4. Desenho por computador. 4. Sites daWeb - Projeto. I. Nascimento, Anderson Elias do. II. Ttulo. III.Secretaria Executiva de Educao Profissional dePernambuco. IV. Ministrio da Educao. V. Rede e-TecBrasil.

CDD006.6CDU004.92


5/64

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


6/64

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


7/64

5

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.


8/64

6

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 ebitmaps, 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


9/64

7

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 bastanteconhecida 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 defotografias. 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


10/64

8

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-vermelha-image25443272.

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


11/64

9

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 decorrnciadas 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


12/64

10

Figura 3Fonte: 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 hcerta 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

Competncia 01


13/64

11

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.

Competncia 01
http://www.fotoshot.com.br/vetores-impressionantes-do-artista-brasileiro-jorge-packer/http://www.fotoshot.com.br/vetores-impressionantes-do-artista-brasileiro-jorge-packer/


14/64

12

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 guardarmais 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

Competncia 01


15/64

13

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

Competncia 01
http://www.w3c.br/http://www.w3c.br/


16/64

14

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 em

Navegadores:

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, Operae outros tambm podem utilizar este padro.

Embutido em

HTML:

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 Languageou 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 e

Animao:

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,

Competncia 01


17/64

15

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 rasterou 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.svgdiz o nome do arquivo e sua localizao;

type=image/svg+xmldiz 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.

Competncia 01


18/64

16

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

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 dotipo PNG em curvas e textos. indicado que evitemos nmeros fracionados, como por exemplo,

Competncia 01


19/64

17

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.

Competncia 01


20/64

18

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.

Competncia 02


21/64

19

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

Competncia 02


22/64

20

realizao do trabalho;

rea de desenho: apesar de voc conseguir desenhar em qualquer lugar desta rea, oretngulo 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.

Competncia 02


23/64

21

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.

Competncia 02


24/64

22

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.

Competncia 02


25/64

23

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.

Competncia 02


26/64

24

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 doobjeto.Fonte: o autor.

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

Competncia 02


27/64

25

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

Competncia 02


28/64

26

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 precisamosalterar 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,

Competncia 02


29/64

27

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 parabranco, 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.

Competncia 02


30/64

28

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.

Competncia 02


31/64

29

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" comopodemos 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.

Competncia 02


32/64

30

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 e contorno, clique na primeira aba, a

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.

Competncia 02


33/64

31

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

Competncia 02


34/64

32

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.

Competncia 02


35/64

33

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 odesfoque 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 @.

Competncia 02


36/64

34

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

Competncia 02


37/64

35

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 seuteclado 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

@.

Competncia 02


38/64

36

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

Competncia 02


39/64

37

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

Competncia 02


40/64

38

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

Competncia 02


41/64

39

se separe cada objeto por camada ou se agrupe todos em apenas uma camada, entretanto

recomendado separar por camada, principalmente quando se deseja fatiar em partes.

Para iniciarmos, vamos at o menu Camada (Layer). Selecione a 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.

Competncia 02


42/64

40

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

Competncia 02


43/64

41

2.3.4 O Layout

Vamos agora nos preocupar como nosso site ser visto pelas pessoas, idealizar como queremos

dispor os objetos, links, logotipos, banners de propagandas, textos e imagens que 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 dePreenchimento 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.

Competncia 02


44/64

42

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

Competncia 02


45/64

43

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

Competncia 02


46/64

44

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 dacamada 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

Competncia 02


47/64

45

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.

Competncia 02


48/64

46

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.

Competncia 02


49/64

47

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.

Competncia 02


50/64

48

Com a tecla TAB, selecione a sombra. Com ela selecionada, clique, desta vez, na seta inferior e

arraste-a at o fim do documento. Selecione agora a seta superior e a arraste um pouco para baixo.Para saber o posicionamento correto, verifique a Figura 44.

Figura 44 - aplicando o efeito sombra em toda 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 destacamada.

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.

Competncia 02


51/64

49

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.

Competncia 02


52/64

50

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.

Competncia 02


53/64

51

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.

Competncia 02


54/64

52

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 opargrafo 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

Competncia 02


55/64

53

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 opoembed e depois clicar em OK.

Competncia 02


56/64

54

A imagem ir aparecer no tamanho que voc produziu. Para poder demonstrar a ferramenta

melhor, a imagem est maior do que deveria. Vamos ajustar o tamanho da imagem. Observe oscontroles 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

Competncia 02


57/64

55

para exportar toda a imagem. Em Nome do Arquivo coloque o caminho e o nome do arquivo.

Pressione Exportar para que o arquivo PNG seja construdo. Veja na Figura 52.

Figura 52 - exportando o projeto da pgina para bitmapFonte: 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.

Competncia 02


58/64

56

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.

Competncia 02


59/64

57

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. Elessero criados na pasta onde o arquivo SVG est salvo.

Competncia 02


60/64

58

Figura 55 - exportando todas as fatias do projeto em um lote com quatro arquivos.Fonte: o autor.

Observe na pasta do seu arquivo SVG que foram criados quatros arquivos, de acordo com o nome

que voc concebeu para cada 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.

Competncia 02


61/64

59

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.


62/64

60

Referncias

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

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

. Acesso em: 09 jul. 2014

EDUCACIONAL. In: APOSTILA SVG. Disponvel em

. 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

. Acesso em: 10 out. 2014.

SVG. In: WIKIPDIA. Desenvolvido pela Wikimedia Foundation. Disponvel em

. Acesso em: 10 out. 2014.


63/64

61

Minicurrculo do Professor


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


64/64

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

Documents

Transcript of Caderno INFO(Ilustração Vetorial para Web 2015.2).pdf