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


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

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

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.

http://pt.wikipedia.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:

http://pt.wikipedia.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. Fonte: Prprio autor.

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:

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:

http://pt.wikipedia.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. Fonte: Prprio autor.

Vamos entend-lo:

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:

Ficou curioso em como desenhar

com cdigo SVG? Voc encontrar

mais informaes sobre esse assunto e muito mais neste

endereo: http://uni.educacional.com.br/up/68010001/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. Fonte: Prprio autor.

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

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

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

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

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

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

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

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

Caso voc teve alguma dificuldade


procedimento neste endereo:


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

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

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

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

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

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

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

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

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

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

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:

http://pt.wikipedia.org/wiki/Curva_de_

Bzier

33


Competncia 02

Figura 27 Editar caminhos por ns, atalho F2. Fonte: Prprio autor.

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

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

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

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

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:

http://pt.wikipedia.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. Fonte: Prprio autor.

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

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

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

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

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

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

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

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

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

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

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

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). Fonte: Prprio autor.

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

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

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

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

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

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

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

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. Fonte: Prprio 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

(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. Fonte: Prprio autor.

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


procedimento neste endereo.


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)

Documents