Click here to load reader

Material Inkscape

  • View
    2.634

  • Download
    25

Embed Size (px)

DESCRIPTION

Material de ensino dos alunos do projeto TITA, de apoia a incubadoras empresariais no interior do estado do Ceará. O presente material contém informações de como usar a ferramenta livre de edição de vetores Inkscape.

Text of Material Inkscape

Este material foi elaborado e postado no site COLIVRE, cujo endereo encontra-se no final deste documento. Este contedo foi selecionado por Dmora Bruna e Michael Guimares e formatado por Michael Guimares, para tornar-se o material de apoio da Tutoria de Iniciao Tecnolgica e Apoio a Incubadora em TI, em referncia ao Curso de Design Inkscape. Devido extenso do presente material, qualquer erro ortogrfico ou semntico contate-nos.

Michael Guimares [email protected] Tcnico em Informtica - IFCE Web Designer e Designer Digital Dmora Bruna Sousa [email protected] Tcnica em Informtica - IFCE Bacharelanda em Sistemas e Mdias Digitais - UFC

SumrioIntroduo ao Inkscape................................................................................................. 6 Elementos da Interface ............................................................................................. 6 Histria ...................................................................................................................... 8 Instalando o Inkscape ............................................................................................... 8 Instalando no Windows: ......................................................................................... 8 Instalando no GNU/Linux: ...................................................................................... 9 Tipos de Imagem ........................................................................................................ 10 O que uma imagem vetorial ................................................................................. 10 Formatos de Arquivos ............................................................................................. 12 O Canal Alfa ........................................................................................................ 12 Formatos Bitmap ................................................................................................. 13 Ferramentas de Desenho ........................................................................................... 16 Criar Retngulos e Quadrados ................................................................................ 16 Criar Crculos Elipses ou Arcos ............................................................................... 17 Criar Estrelas e Polgonos ....................................................................................... 18 Criar Espirais........................................................................................................... 18 Texto ....................................................................................................................... 19 Aplicar e Editar Gradiente ....................................................................................... 19 Ferramenta de Seleo ........................................................................................... 19 Manipulador de Ns ................................................................................................ 22 Zoom ....................................................................................................................... 24 Desenho a Mo Livre .............................................................................................. 25 Caneta - Desenhar Curvas e Retas......................................................................... 25 Desenho Caligrfico ................................................................................................ 25 Aplicar Conectores .................................................................................................. 26 Conta-gotas............................................................................................................. 27 Elementos do Desenho............................................................................................... 28 Elementos Primitivos ou Formas Geomtricas ........................................................ 28 Elementos de Curvas ou Caminhos ........................................................................ 28 Ns e suas propriedades......................................................................................... 28 Grupos .................................................................................................................... 29 Ferramentas de Auxilio ............................................................................................... 30

Botes Padro de Salvar, Desfazer, Copiar e outros... ........................................... 30 Importar imagens para o documento ....................................................................... 31 Exportar para Bitmap .............................................................................................. 31 Opes de Zoom ..................................................................................................... 32 Duplicar Objeto ....................................................................................................... 32 Criar Clone .............................................................................................................. 32 Desligar Clone......................................................................................................... 32 Agrupar ................................................................................................................... 32 Desagrupar ............................................................................................................. 33 Janela de Dilogo de Preenchimento e Traos ....................................................... 33 Janela de Dilogo de Texto ..................................................................................... 33 Visualizar a rvore XML do SVG ............................................................................. 34 Alinhar Objetos........................................................................................................ 34 Propriedades do Documento (cone dependente do tema do desktop) ................... 34 Pintando Elementos e suas Bordas ............................................................................ 35 Cor - Entendendo a Mistura de Cores ..................................................................... 35 RGB ........................................................................................................................ 35 HSL ......................................................................................................................... 36 CMYK...................................................................................................................... 36 Roda ....................................................................................................................... 37 Gradiente ou Degrad - Tudo o que voc queria saber ........................................... 38 Padres................................................................................................................... 40 Tipos de Bordas ...................................................................................................... 40 Sobre a Opacidade Mestre...................................................................................... 42 Desfocagem? .......................................................................................................... 42 Criando e Editando de Caminhos ............................................................................... 43 Caminho.................................................................................................................. 43 Editando Caminhos ................................................................................................. 43 Esculpindo Ns ....................................................................................................... 43 Convertendo Traos em Caminhos ......................................................................... 44 Manipulando Texto ..................................................................................................... 45 Formatando Texto ................................................................................................... 45 Texto em Caminho .................................................................................................. 45 Movendo e Girando Caracteres do Texto ................................................................ 46 Texto em Formas .................................................................................................... 46 Imagens Bitmap no Inkscape ...................................................................................... 48

Importao .............................................................................................................. 48 Exportao .............................................................................................................. 49 Vetorizao ............................................................................................................. 50 Vetorizando um Desenho ........................................................................................ 51 Vetorizando uma Fotografia ................................................................................. 52 Retirando o fundo de uma imagem ......................................................................... 52 Recortes e Mscaras .................................................................................................. 54 Clip - Definindo a rea visvel de elementos ............................................................ 54 Mscaras ................................................................................................................ 54 Organizando Elementos ............................................................................................. 56 Alinhando... ............................................................................................................. 56 Distribuindo... .......................................................................................................... 57 Espalhando e Organizando ..................................................................................... 58 Removendo sobreposies ..................................................................................... 59 Criando Clones ........................................................................................................... 60 Criando Um Clone ................................................................................................... 60 Criando clones a partir de um padro ..................................................................... 60 Criando clones baseado em um desenho Guia ....................................................... 62

Introduo ao InkscapeO Inkscape um programa para desenho vetorial, de cdigo aberto, que implementa o padro SVG (Scalable Vector Graphics), definido pela W3C (World Wide Web Consortium). O SVG um formato de imagem vetorial aberto (livre), j suportado em diversos softwares como ilustradores e navegadores, ou seja, possivel usar esse formato na Web. O formato SVG um dialeto de XML, um texto com cdigo de marcao muito parecido com HTML. Dessa forma, programadores e artistas podem se unir para criar imagens dinamicamente, se aproveitando das facilidades de se manipular um arquivo texto. Algumas caractersticas suportadas pelo SVG incluem formas primitivas (crculos, elipses e retngulos), caminhos (para desenhar elementos mais complexos), marcadores, clones, canal alfa, transformaes, gradientes, filtros, grupos, texto, texto-em-caminho, texto-em-forma e mais... O Inkscape estende o formato SVG, mas sem quebrar a interoperabilidade com outras aplicaes, adicionando novos formatos primitivos (estrelas, polgonos regulares e espirais), metadados Creative Commons e camadas. O Inkscape suporta edio de n, operaes complexas entre caminhos, edio direta do XML SVG e extenses que provem novas funcionalidades. Alm do SVG, o Inkscape capaz de importar diversos formatos como EPS, PostScript, AI, WMF, JPEG, PNG, BMP, TIFF, dentre outros, exporta o PNG para uso direto na web e pode salvar em SVG, EPS, PDF, dentre outros.

Elementos da Interface

6

Como a maioria das aplicaes voc encontra o menu do Inkscape no topo da aplicao com as caractersticas bsicas esperadas em um programa para criao e edio.

A primeira barra de ferramentas horizontal trs botes para auxiliar o desenho (como lupa e agrupamento) e opes de manipulao de arquivo (como salvar e exportar).

A segunda barra de ferramentas horizontal dependente de contexto e apresenta opes relativas a ferramenta de desenho em uso.

A barra de ferramentas vertical a que contm as ferramentas de desenho, como o "desenhar retngulo" e "desenho a mo livre";

Na parte central, ocupando o maior espao til do aplicativo, est a rea para desenho com uma representao opcional da rea da pgina. Por padro a pgina tem o tamanho A4.

Na parte inferior temos a paleta de cores e a barra de status.

7

HistriaO cdigo que um dia se tornaria Inkscape "veio vida" pela primeira vez em 1999 como o programa Gill, uma aplicao de ilustao para GNOME, criada por Raph Levien. Raph criou vrias das funcionalidades bsicas para uma aplicao de ilustrao vetorial. O trabalho no Gill parece ter desacelerado ou parado em 2000. A "encarnao" seguinte deste cdigo foi o super popular Sodipodi, liderado por Lauris Kaplinski. O cdigo inicial se tornou um poderoso ilustrador, com a adio de vrias funcionalidades, suporte multi-lngua, porte para Windows e outros sistemas operacionias e eliminao de dependncias. O Inkscape finalmente nasceu em 2003, por iniciativa de quatro desenvolvedores do Sodipodi, Bryce Harrington, MenTaLguY, Nathan Hurst e Ted Gould, que decidiram tomar um caminho diferente, que alm de outras questes tcnicas, envolvia o enfoque no suporte completo do formato SVG, qualidade da interface e desenvolvimento mais aberto, dando oportunidade ao aparecimento de novos desenvolvedores.

Instalando o Inkscape possvel instalar o Inkscape nos sistemas operacionais mais populares atualmente. GNU/Linux (qualquer distribuio), Mac OS X ou Windows. Como um software livre, voc tambm pode baixar o cdigo fonte do Inkscape e gerar um novo binrio localmente (para tcnicos).

Instalando no Windows:Voc precisa visitar a pgina de downloads no endereo Inkscape.org/download e baixar o instalador do Inkscape para windows, disponivel logo no incio da pgina (grifado na imagem ao lado). Baixe o arquivo .exe e execute-o (clique duplo). A instalao bastante simples, basta seguir adiante. No final ele criar um item no menu iniciar e um icone no Desktop (se assim voc quiser) para abrir o Inkscape. Completada a instalao voc j pode deletar o instalador.

8

Instalando no GNU/Linux:As distribuioes GNU/Linux (distros) atuais j trazem o Inkscape por padro (quando seu fim uso em Desktop). Veja no seu menu de aplicaes, no sub-menu grficos. Caso queira instalar ou atualizar, voc pode fazer o seguinte:No Debian e em seus derivados como, Ubuntu e Kurumin:

Opo 1: Use um aplicativo visual para gerncia de pacotes ou instalao de software, como o Synaptic, busque por inkscape, selecione-o e clique em aplicar ou instalar. Opo 2: Via terminal (como root), digite: aptitude install inkscapeNo Fedora e em seus derivados:

Opo 1: Use um aplicativo visual para gerncia de pacotes ou instalao de software, como o Synaptic, busque por inkscape, selecione-o e clique em aplicar ou instalar. Opo 2: Via terminal (como root), digite: yum install inkscape Se voc usa uma distribuio sem relao nenhuma com as citadas, busque o Inkscape em seu repositrio de pacotes. Esse software j bastante popular e provavelmente algum j empacotou para a sua distribuio. Compilar tambm uma boa opo para os mais tcnicos.

9

Tipos de ImagemSe voc j usou programas mais simples de edio de imagem, provavelmente voc manipulou imagens bitmap. Isso no significa que a edio de bitmaps seja um trabalho primitivo ou limitado.

O que uma imagem vetorialEnquanto em uma imagem bitmap temos uma matriz de cores de pixels que define a imagem, na imagem vetorial temos pontos com posicionamento livre, que so ligados por linhas formam o desenho. Veja a ilustrao:

Na imagem acima, a primeira estrela representa uma imagem vetorial, onde os pontos (pequenos crculos verde claro) so ligados por linhas que definem o objeto. Seu preenchimento um amarelo alaranjado e a borda vermelho escuro. A segunda estrela representa um zoom na imagem bitmap, por isso nota-se o quadriculado (um problema que no existe nas imagens vetoriais). Note que o conjunto de quadros, cada um com sua cor, juntos conseguem representar a mesma estrela da primeira imagem, o grande problema a definio. Veja este outro exemplo o zoom em um desenho real em cada um dos tipos:

10

Em imagens vetoriais voc no perde a definio, o desenho no se turva nem fica quadriculado, no mximo voc no ter os detalhes que esperaria ter em tal aproximao num objeto real. Esse benefcio vem do fato que termos um objeto definido pela ligao de pontos no espao que podem ser representados na tela em qualquer escala. Imagens bitmap so feitas para serem representadas na escala em que foram criadas. Mas onde o zoom pode ser til fora do estdio de criao? Na impressora, porque ela representa imagens com muito mais pixels que a tela do computador. como dar zoom na imagem. Outra utilidade o uso em animaes interativas ou no e o resto fica por conta da sua imaginao. Mas o zoom no o nico benefcio do uso de imagens vetoriais. Da mesma forma que no temos perda de qualidade no redimensionamento de desenhos vetoriais, tambm no temos na sua rotao. A maioria das modificaes em um objeto vetorial SVG so no destrutivas, pois possvel aplicar um efeito reverso que retorne o estado anterior do desenho. Por exemplo, se tivermos um tringulo semi-opaco verde na frente de uma flor e o pintarmos de vermelho, teremos um tringulo semi-opaco vermelho na frente de uma flor. Em seguida, pode-se pint-lo de verde novamente e tudo ser como antes. Em uma imagem bitmap, mudar a cor do que aparentemente um tringulo semi-opaco em frente a uma flor requer mudar a cor de cada pixel que faz parte da rea do tringulo e ainda cuidar das bordas suavizadas. preciso saber qual seria a cor real da flor atrs do tringulo para aplicar adequadamente a nova cor de cada pixel e assim modificar a cor do tringulo. Naturalmente, a informao de cores se perder gradativamente e seria improvvel ter de volta a imagem original. Alguns efeitos so ainda mais drsticos, inviabilizando a volta a algo prximo do estado anterior na primeira ocorrncia, como o efeito de embasamento.

Um elemento importante nos desenhos vetoriais a curva Bzier. As linhas entre os pontos no precisam ser necessariamente retas, o uso de curvas suaviza o desenho e permite a criao de objetos mais complexos com um nmero menor de pontos. As curvas Bziers so definidas por pontos de controle (ou alas) que atraem a linha, deformando-a e transformando-a assim em uma curva. Os pontos de controle so apresentados junto com retas que os ligam aos ns das extremidades da linha apenas para ajudar o artista a identificar os controles. Veja na animao ao lado como as Bziers funcionam. Em azul temos a linha do desenho e em laranja temos as alas.

11

O que foi dito anteriormente sobre imagens bitmaps no quer dizer que estas sejam ruins. Elas conseguem representar uma composio muito rica de cores e detalhes, dificilmente conseguida com imagens vetoriais, como o caso das fotografias (veja o Curso de GIMP para conhecer melhor essas possibilidades). Por isso normal que formatos vetoriais suportem a incluso de imagens bitmap para que a unio dos modelos de liberdade de criao ao artista. Outro fato interessante foi o nascimento do foto realismo vetorial. Uma expresso artstica que procura representar o mundo ou fantasias com a mesma riqueza e detalhismo dos bitmaps. Veja alguns exemplos:

Formatos de ArquivosAntes de tratarmos sobre os formatos, preciso esclarecer um conceito que ser usado com freqncia neste tpico e no decorrer do curso:

O Canal AlfaO canal alfa quem informa o nvel de opacidade de um elemento. Este um grande benefcio para mesclar imagens que no foram criadas inicialmente para estarem juntas ou para quando no se sabe exatamente em que ponto uma imagem se sobrepor a outra. Imagine que temos um crculo vermelho sobre uma imagem de folhas. Se modificarmos a intensidade do canal alfa deste crculo teremos o seguinte:

Alfa 100%

Alfa 70%

Alfa 40%

Alfa 13%

12

Na prtica, o canal alfa se apresenta como um quarto canal de cor na maioria dos aplicativos que suportam essa funcionalidade, logo aps os quantificadores de vermelho, verde e azul (RGB). Vamos aproveitar e ver o exemplo disto no Inkscape. Ao lado, temos a caixa de dilogo de preenchimento onde em vez do clssico RGB, temos RGBA, possibilitando definir diretamente a cor e a opacidade do preenchimento de um objeto ou elemento. Se no sabe o que RGB, no se preocupe, vamos tratar desse assunto mais a frente.

Formatos BitmapMas, por que falar de formatos bitmaps num curso sobre imagens vetoriais? Bem, nem sempre voc conseguir tudo o que deseja somente com vetores e nem sempre voc poder publicar sua criao a partir de vetores, ento importante conhecer cada um dos mais populares formatos para uma boa escolha.

BMP ou BitMap: O clssico bitmap da Microsoft, conhecido de todos os antigos usurios de PCs e dos novos usurios que tenham experimentado o MS Paint. Esse formato de imagem suporta indexao ou TrueColor, mas no compactado. Esse formato no suporta canal alfa, nem transparncia. (No trataremos aqui sobre o que vem a ser imagem indexada ou TrueColor por no ter relao com imagens vetoriais. Veja sobre isso no Curso de GIMP)

TIFF ou Tagged Image File Format: Um formato popular, bastante usado por artistas para guardar imagens sem perda ou para enviar trabalhos bitmap para impresso. Suporta canal alfa e tipos distintos de compactao. Tambm possvel usar nenhuma compactao e este , aparentemente, o uso mais comum.

GIF ou Graphics Interchange Format: Seria o formato mais restritivo de imagem se no possibilitasse pequenas animaes. Suporta apenas imagens indexadas e transparncia em lugar de canal alfa, ou seja, um pixel desta imagem pode ser ou totalmente opaco ou totalmente transparente. Esse formato possibilita pequenas animaes de forma simples e leve, pois novas frames no precisam representar o que for idntico frame anterior e os momentos lentos ou estticos no exigem novas frames porque cada frame especifica seu tempo de exposio.

13

JPG ou JPEG ou Joint Photographic Experts Group: Esse , com certeza, o segundo formato mais popular da internet, vindo logo em seguida do html. No a toa que o JPG se popularizou tanto, pois seu algortimo de compactao gera imagens muitas e muitas vezes mais leves que sua original na maior parte dos casos. Seu ponto negativo que esta compactao causa perda de informao e isso se representa em danos a imagem, o que torna inadequado o uso desse formato quando no se trata da publicao do produto final. O JPG tambm no suporta transparncia nem canal alfa.

PNG ou Portable Network Graphics: Se no pasado eram necessrios formatos com um grande poder de compactao, mesmo que isso signifique uma qualidade inferior, para que a imagem chegasse ao visitante em tempo hbil, hoje precisamos de belas representaes artsticas no layout de sites para termos, no mnimo, o respeito do visitante. Bem, se o JPG estiver te limitando, pense com carinho no PNG. Esse formato livre foi criado com a inteno de substituir o formato GIF, que era patenteado. Esse formato suporta um grande nmero de informaes, como canal alfa, correo de gama, verificao de integridade, suporte a imagens com paleta de cores ou truecolor, por fim, comprime com nvel regulvel e sem perdas. Pela qualidade e pela necessidade de formatos livres para o desenvolvimento da internet esse formato recomendado pela W3C.

Formatos VetoriaisMas, por que falar de outros formatos vetoriais se o Inkscape usa SVG como formato nativo? Infelizmente o SVG no to popular quanto outros formatos e ainda no bem implementado em outros aplicativos o que seria um problema principalmente para quem trabalha com material para impresso em grficas. Conhecendo os outros formatos voc poder escolher melhor, quando for necessrio usar outro formato.

PS ou PostScript: Esse formato largamente suportado e pode, inclusive, ser enviado diretamente maioria das impressoras recentes para aproveitamento mximo da sua qualidade de impresso. Porm esse um formato simples que no suporta canal alfa nem filtros e por isso no pode ser usado sempre como formato intermedirio para impresso.

EPS ou Encapsulated PostScript: basicamente um PS com algumas restries que ajudam na incorporao deste formato em outros arquivos PostScript.

PDF ou Portable Document Format: Um formato abrangente e tambm largamente suportado que pode representar quase tudo o que representvel em outros formatos, por isso um boa escolha no momento de enviar peas para grficas. O risco em usar o PDF como formato intermedirio se d pela inexistncia dos filtros previstos no formato SVG, como o de desfocagem e da grande variao de estgio de maturidade das aplicaes que geram e lem PDF, podendo levar a um resultado final diferente do esperado.

AI ou Adobe Illustrator Artwork: Um formato vetorial de propriedade da Adobe Systems. 14

CDR ou Arquivo Corel Draw: Um formato vetorial de propriedade da Corel Corporation.

SVG ou Scalable Vector Graphics: Esse o formato aberto (o que significa livre para uso e implementao) criado pela W3C (World Wide Web Consortium). SVG um dialeto de XML e isso significa que muito mais simples interpretar e modificar um arquivo SVG que um outro em formato binrio. Esse formato suporta elementos primitivos como elipses e retngulos, caminhos (que criam elementos complexos), texto formatado, texto encaixado em caminhos ou moldes, canal alfa, degrads, recortes, mscaras, clonagem, filtros, incluso de imagens bitmap e muito mais. Com isso o SVG pode ser visto em p de igualdade com os formatos mais completos do mercado. uma dificuldade que teremos (ao menos por enquanto) que temos o RGB como espao de cor padro do SVG, o que bom para a tela do computador, mas no para a impresso, onde seria melhor usar CMYK. Isso mostra um outro ponto negativo, pois, ao menos no Inkscape, ainda no temos suporte a outros espaos de cor. Como fazer a converso de um trabalho criado com Inkscape de RGB para CMYK? Veremos nos tutoriais. O grande problema fica na escolha da aplicao para visualizar, manipular e imprimir o SVG, j que um formato bastante recente e sua implementao ainda no est madura o suficiente na maioria das aplicaes.

15

Ferramentas de DesenhoAqui descrevemos cada uma das ferramentas de desenho e suas opes de uso, apresentadas na segunda barra horizontal (veja o tpico "Elementos da Interface"). Ao ler sobre cada opo da ferramenta, teste-a para ter um bom entendimento.

Criar Retngulos e QuadradosAo criar um retngulo voc ver 3 pontos, caso ele no tenha cantos arredondados ou 4 pontos caso tenha cantos arredondados. Isso porque os dois pontos redondos que controlam os raios de arredondamento ficam sobrepostos no canto superior direito quando os raios so iguais a 0. Na animao ao lado, voc v no primeiro quadro um retngulo sem arredondamento. Ao puxar um dos pontos de controle de arredondamento (no caso ser o que controla o raio vertical), voc aplicar exatamente o mesmo valor no raio horizontal, isso existe para facilitar o principal caso de uso da ferramenta, aplicar raios identicos no arredondamento. Bem, mas existem momentos em que queremos raios distintos, ento basta fazer como no terceiro caso e puxar o segundo ponto de controle e redefinir o raio horizontal. Os pontos quadrados servem para redimensionar o retngulo. Usando a tecla control, enquanto arrasta esses pontos, voc recebe um auxlio do Inkscape para redimensionar proporcionalmente, ou apenas na horizontal, ou apenas na vertical. Ele entender o que voc 16

deseja analisando a posio do mouse, se est puxando na diagonal ser proporcional, se est puxando mais prximo do que seria horizontal, ento o redimensionamento ser somente horizontal. Note que, como outras ferramentas do Inkscape, os novos retngulos criados seguiro as definies do ltimo editado.

Dica: Quadrados so retngulos com lados iguais. Para fazer quadrados perfeitos, pressione simultaneamente durante o clicar e arrastar da criao do retngulo.

Como descrito na sesso "Elementos da Interface" Ao selecionar a ferramenta Criar Retngulos e Quadrados a segunda barra de ferramentas horizontal do Inkscape apresenta as seguintes opes: Caixas de valor W e H: apresentam ou redefinem a largura e altura do retngulo. Caixas de valor Rx e Ry: apresentam ou redefinem o tamanho dos raios de arredondamento. Combo Box de unidades: onde voc pode selecionar com que unidade de medida prefere visualizar ou definir as medidas do retngulo. Boto "No Arredondado": zera os raios de arredondamento instantaneamente.

Criar Crculos Elipses ou ArcosAo criar um crculo (ou seja, uma elipse com raios horizontal e vertical identicos) voc ver 3 pontos, caso ele no esteja aberto ou 4 pontos caso j esteja aberto. Isso porque os dois pontos redondos que controlam a abertura da elipse ficam sobreopostos na extremidade direita quando a elipse est fechada. Veja na animao ao lado. Um crculo foi criado porque ao clicar e arrastar para cri-lo a tecla control foi pressionada simultaneamente, garantindo raios idnticos. Puxando o ponto de controle redondo voc abre o crculo, como uma pizza, no sentido anti-horrio. Puxando o outro ponto redondo, voc abre a pizza no sentido horrio. No ltimo quadro da animao o crculo no lugar de parecer com o pac-man apresenta o crculo com sua borda incompleta. Isso se d ao selecionar a opo "abrir arco". Veja sobre as outras opes: Caixas de valor "Incio" e "Fim": apresentam ou redefinem o ngulo de corte da elipse. Caixa de seleo "abrir arco": define se o caminho que define a elipse deve ser contnuo ou no. Boto "Tornar Inteiro": zera os ngulos de abertura da elipse.

17

Criar Estrelas e PolgonosAo criar uma estrela voc ver dois pontos de controle, com os quais voc poder esticar seus raios, gir-la e torc-la. A imagem ao lado pode te dar uma idia de como se pode interferir no formato da estrela usando seus pontos de controle e as opes listadas abaixo:

Caixa de seleo "Polgono": se marcado, em lugar de termos uma estrela de N pontas, temos um polgono regular de N lados. Caixa de valor "Cantos": define quantas pontas ter a estrela ou quantos lados ter o polgono. Caixa de valor "Proporo do Raio": Imagine que existe um primeiro crculo que toca as pontas externas da estrela (representado em verde na imagem ao lado) e um segundo que toca as pontas internas (representado em azul na imagem ao lado). O que definimos nessa caixa o tamanho percentual do raio do segundo crculo em relao ao do primeiro. Para entender melhor, imagine que o primeiro tem tamanho fixo 1 (um). O segundo pode ter qualquer valor entre 0,01 a 1. Se o valor for 0,5 (como no exemplo), ento o segundo raio tem 50% do tamanho do primeiro. Caixa de valor "Arredondado": define o quo arredontada devem ser as pontas (internas e externas) da estrela. Isso faz com que a estrela se parea mais com uma estrela do mar. Dica: para no perder a forma de uma estrela use valores pequenos como 0,2.

Caixa de valor "Aleatrio": insere um nvel de aleatoriedade nos pontos da estrela. Quanto maior mais deformada ser a estrela. Boto "Padres" retorna os valores padres do elemento estrela.

Criar EspiraisAo criar uma espiral voc ver dois pontos de controle, com os quais voc poder redefinir o incio e o fim da espiral, dando-lhe mais ou menos voltas. A imagem ao lado pode te dar uma idia de como se pode interferir no formato da espiral usando seus pontos de controle e as opes listadas abaixo:

Caixa de valor "Rotao": Define o nmero de voltas da espiral. Caixa de valor "Divergncia": A relao entre as voltas. Se o valor for igual a 1, ento o espao entre cada volta o mesmo, acima de 1 o espao entre voltas aumenta a cada volta e abaixo de 1 o espao entre voltas diminui a cada volta. Caixa de valor "Raio Interno": indica onde inicia a espiral. 0 o centro. Boto "Padres" retorna os valores padres do elemento espiral.

18

TextoVoc pode criar um elemento de texto de duas formas. Usando a ferramenta e simplesmente clicando uma vez na rea de desenho para ter um texto livre, onde quebras de linha s existiro onde voc pressionar enter e sem limite para o espao ocupado, ou clicando e arrastando para criar uma caixa de texto (como na animao ao lado) onde o texto fica limitado a uma rea retangular. Como em um editor de texto, voc pode selecionar partes do elemento de texto e aplicar uma formatao diferenciada, atravs das opes do contexto dessa ferramenta voc pode formatar seu texto como faz em qualquer outro editor de texto.

Aplicar e Editar GradienteO gradiente ou degrad pode ser aplicado em qualquer elemento ou linha. Nas opes da ferramenta voc pode escolher se deseja um gradiente linear ou radial. Escolha, v ao elemento, clique e arraste. Voc ter dois pontos de controle no degrad linear para indicar incio e fim e trs pontos no degrad radial permitindo que o degrad seja elptico. Veja as opes dessa ferramenta:

Aplicar gradiente linear. Aplicar gradiente radial. Aplicar gradiente no preenchimento. Aplicar gradiente na linha. Caixa de seleo de gradientes: Voc pode usar o mesmo gradiente em vrios elementos. Boto "Dupicar": Possibilita criar um novo gradiente copiando um existente. Boto "Editar...": Permite que voc modifique as cores do gradiente e adicione novos pontos de parada.

Ferramenta de SeleoCom essa ferramenta voc pode selecionar, mover, redimensionar, girar e inclinar objetos. A funo primordial desta ferramenta selecionar e mover elementos (clicando e arrastando), mas voc tambm pode mov-los com as setas do teclado. Pressionando juntamente a tecla control os elementos sero movidos de 20 em 20 pixels. Teste! Mover com o teclado ser de grande ajuda em vrios momentos. Tente tambm mover clicando e arrastando com o mouse, mas desta vez segurando a tecla control. Assim o objeto ser movido apenas horizontalmente ou verticalmente. Ao clicar pela primeira vez em um objeto, esse ser selecionado e aparecero as alas de redimensionamento (as setas). Para redimensionamento horizontal, esticando ou encolhendo pela direita, clique e arraste a seta a direita do elemento. Usando a mesma lgica voc pode

19

redimencionar para todas as direes. Com as alas das quinas (cantos) do elemento voc pode redimensionar horizontalmente e verticalmente ao mesmo tempo.

Dicas: Para redimensionamento proporcional segure uma das alas e puxe segurando a tecla control. Se o que voc quer que o redimensionamento seja repetido no lado inverso ao da ala puxada, segure a tecla shift. Para redimensionar proporcionalmente, teclas, control e shift. mantendo o mesmo centro, segure as duas

Ao clicar pela segunda vez aparecem novas alas para girar o elemento (as das quinas) e alas para inclinao (horizontais e verticais). A marca que aparece no centro do elemento indica o centro do giro e da inclinao. Voc pode reposicionar essa marca para redefinir o centro de giro e inclinao do elemento. Por exemplo, se voc criar dois elementos para fazer o brao e antebrao de um boneco, coloque o centro de giro na posio do cotovelo, para poder dobrar o brao usando apenas o movimento de giro e sem nunca perder seu eixo.

Dicas: Gire ou incline o elemento com saltos de 15 em 15 graus para maior controle segurando a tecla control. Gire ou incline o elemento com o centro na ala oposta segurando a tecla shift. Voc tambm pode segurar as duas teclas neste caso mesclando seus efeitos, como no caso anterior.

Voc pode selecionar vrios elementos simultaneamente e aplicar-lhes as transformaes que quiser como se fossem um s. Para tanto, existem duas formas: Retngulo de Seleo: Clique numa parte da rea de desenho sem nenhum elemento e arraste o mouse criando um retngulo. Voc ver o retngulo crescendo na tela enquanto arrasta o mouse, envolva todos os elementos que te interessar no retngulo e solte o boto do mouse. Todos os elementos dentro do retngulo sero selecionados. Shift + Clique: mantenha pressionada a tecla shift e clique em cada elemento que te interessa. Clicando novamente em um objeto j selecionado, voc o retira da seleo. Essa tcnica pode ser mesclada com o retngulo de seleo para incluir novos elementos na seleo ou retirar elementos que entraram foradamente na seleo por estarem na rea do retngulo.

20

Como descrito na sesso "Elementos da Interface" Ao selecionar a Ferramenta de Seleo a segunda barra de ferramentas horizontal do Inkscape apresenta as seguintes opes:

Girar seleo em 90 graus no sentido anti-horrio

Girar seleo em 90 graus no sentido horrio

Flip Horizontal (Espelhar horizontalmente)

Flip Vertical (Espelhar verticalmente)

Mover seleo para o fundo, colocar abaixo de todos os outros elementos.

Mover seleo para baixo, o que significa descer um nvel apenas.

Mover seleo para o topo, colocar acima de todos os outros elementos.

Mover seleo para cima, o que significa subir um nvel apenas. Caixas de valor numrico X e Y: apresentam ou redefinem a posio do(s) elemento(s) selecionado(s). Caixas de valor numrico W e H: apresentam ou redefinem o tamanho do(s) elemento(s) selecionado(s). Cadeado entre W e H: aplica redimensionamento proporcional na redefinio de tamanho via caixa de valor. Combo Box de unidades: onde voc pode selecionar com que unidade de medida prefere visualizar ou definir o tamanho e posio da seleo. Transformar a espessura da linha junto com o objeto. Se voc esticar o elemento para ficar com o dobro do tamanho atual a linha ficar com o dobro da espessura se esse boto estiver marcado. Transformar cantos arredondados junto com o objeto. Se voc esticar um retngulo para ficar com o dobro do tamanho atual (e se ele tiver cantos arredondados) os raios de arredondamento tero tambm o dobro do tamanho atual, se esse boto estiver marcado. Transformar gradiente (degrad) junto com o objeto. As posies de incio e fim do degrad acompanharo a transformao do elemento se esse boto estiver marcado.

21

Transformar padro de fundo junto com o objeto. O padro de fundo acompanhar a transformao se esse boto estiver marcado.

Manipulador de NsAo clicar em um elemento com a ferramenta de manipulao de ns, vemos cada um dos ns que compe o elemento, como na figura do carro vermelho ao lado. Ao selecionar um ou mais ns, vemos os pontos de fora ligados a ele e os ligados a seus visinhos, tendo assim acesso aos elementos bsicos das curvas bziers que so definidas pelos ns selecionados. com essa ferramenta que voc pode redefinir livremente a forma de um caminho, ou seja de um elemento qualquer no seu desenho, como feito na animao do lado direito. Se for preciso adcionar um novo n, d um duplo clique em uma posio qualquer do caminho e ali ser adcionado. Para deletar um n, selecione-o e pressione delete. Como na ferramenta de seleo, usando a tecla control voc pode mover um ponto somente na vertical ou na horizontal. Voc tambm pode mover os pontos selecionados com as setas do teclado e usando control os ns sero movidos de 20 em 20 pixels.Ao selecionar o Manipulador de Ns a segunda barra de ferramentas horizontal do Inkscape apresenta as seguintes opes:

Converter elementos primitivos em curvas (este no o primeiro boto, mas voc deve usa-lo antes para poder testar os seguintes). O elemento convertido no poder mais ser modificado atravs dos atributos especficos de sua criao. Retngulos perdero a capacidade de modificar igualmente o arredondamento de seus cantos, estrelas no podero receber instantaneamente novas pontas, o texto no ser mais editvel, etc... Porm voc ganha a liberdade de redefinir cada n do elemento dando-lhe formas livres e novas. Voc j criou um retngulo, torne seus cantos arredondados, transforme-o em um elemento de curvas e veja a diferena entre os pontos de controle e os ns do elemento.

Inserir n no(s) segmento(s) selecionado(s). Ao clicar nesse boto um novo n aparecer no centro de cada segmento selecionado. Um segmento est selecionado quando voc seleciona os ns de suas extremidades.

Deletar n(s) selecionado(s). O Inkscape tentar ajustar o segmento bzier resultante para que o caminho perca o mnimo de sua forma com a retirada de um dos ns.

22

Unir extremidades de caminhos. Voc pode unir as extremidades de um caminho, tornando-o fechado ou unir dois caminhos de um mesmo elemento. Essa unio transformar os dois ns das extremidades em apenas um.

Ligar extremidades de caminhos com novo segmento. Tem a mesma funo do boto citado anteriormente, mas esse mantm os ns das extremidades e cria um segmento unindo-os.

Deletar segmento selecionado. Mantm os ns selecionados, mas apaga o segmento que os une, tornando o caminho descontnuo.

Quebrar caminho no n selecionado. Torna o caminho descontnuo no local do ponto selecionado. Ao clicar nesse boto o n selecionado torn-se dois e cada um deles se conecta a um dos segmentos que o original estava conectado.

Permitir angulosidade no(s) n(s) selecionado(s). Isso significa que poder existir um ngulo diferente de 180 entre as alas das bziers ligadas a esse n.

Suavizar n(s) selecionado(s). Ns suaves so aqueles onde o ngulo entre as alas das bziers ligadas a ele so de 180.

Tornar n(s) selecionado(s) simtrico(s). Ns simtricos so aqueles onde, alm do ngulo de 180 entre as alas, tambm tem distncias idnticas entra as alas. Se voc puxar uma das alas de um n simtrico para longe dele, a outra automaticamente ser alongada tambm.

Converter segmento(s) selecionado(s) em linha(s). Os segmentos se tornaro linhas retas e no existiro mais as alas para curvas bzier.

Converter segmento(s) selecionado(s) em curva(s). Alas para curvas bzier sero adicionadas aos ns do(s) segmento(s).

Converter linhas em elementos de curvas. Voc precisa de uma borda grossa para perceber o que essa opo pode fazer, ento veja rapidamente o tpico Tipos de Bordas para 23

saber como faz-lo e ento clique nesse boto. Agora a borda um elemento independente e voc pode modificar sua expessua em alguns pontos e criar novas formas independentes de traos.

Mostrar pontos de controle (alas) das bziers. Voc pode desmarcar esse boto caso queira ver os ns sem as alas das bziers.

ZoomEssa, na realidade, no uma ferramentas de desenho, mas uma ferramentas de auxlio ao desenho. Contudo, aproveitando que ela est na barra de ferramentas que estamos estudando agora, vamos ver como funciona. Se voc quiser fazer um zoom em uma rea no desenho, clique e arraste com a ferramenta de lupa, criando um retngulo de seleo. O desenho ser aumentado para que esse retngulo ocupe o mximo da rea visvel da janela. Um clique simples tambm faz um zoom-in (aumenta) e um clique junto com shift faz um zoom-out (diminui). Veja as outras opes dessa ferramenta:

Ampliar. O mesmo que clique com o mouse ou pressionar a tecla +.

Reduzir. O mesmo que clique com o mouse junto com shift ou pressionar a tecla -.

Encaixar seleo na janela. Se voc tem um ou mais objetos selecionados e quer um zoom que os mostre ocupando o mximo do espao vizivel da janela de desenho, ento clique nesse boto.

Encaixar desenho na janela. Com esse boto voc v todo o desenho e somente o desenho, ocupando mximo do espao visvel da janela de desenho.

Encaixar pgina na janela. A pgina ocupar o mximo do espao visvel da janela de desenho.

Encaixar largura da pgina na janela. A largura da pgina ser representada com a largura da janela de desenho.

Nvel de zoom anterior. Funciona como um "desfazer" do zoom. Se antes voc estava com zoom de 90% e foi para 50%, ao clicar aqui voltar a ter 90%.

24

Prximo nvel de zoom. Funciona como um "refazer" se voc voltou ao zoom anterior, clique aqui e v para o seguinte, no histrico de zoom.

Mostrar desenho em tamanho natural. (90 DPI = 90 pixels por polegada)

Mostrar desenho com o dobro do tamanho.

Mostrar desenho com metade do tamanho.

Desenho a Mo LivreA ferramenta de desenho a mo livre bastante simples. Se voc apenas clicar enquanto a usa, ela ir esperar que voc clique em outro local para criar uma linha reta, mas esse no o uso principal dessa ferramenta. Voc deve segurar o mouse clicado e arrastar, desenhando uma linha para definir os limites do objeto que voc ir criar. Se voc quiser criar apenas uma linha sinuosa, pode soltar o mouse em qualquer lugar, mas se quiser criar um objeto fechado, caminhe de volta para o ponto inicial (quadradinho) e solte o mouse ali. Depois s clicar na paleta de cores na parte de baixo do Inkscape para para preencher o novo elemento. O elemento criado no um primitivo como os outros citados anteriormente, j um elemento de curvas, um elemento de forma livre, que voc conheceu quando vimos o Manipulador de Ns.

Caneta - Desenhar Curvas e RetasA caneta vai te ajudar a criar elementos de curvas com mais detalhismo. Cada clique criar um ponto e se voc clicar e arrastar perceber as alas de controle bzier para tornar as linhas curvas. Se voc quiser um objeto fechado, crie o ltimo ponto em cima do primeiro, mas se quiser s uma linha sinuosa, d um duplo-clique no final.

Desenho CaligrficoEssa ferramenta te permite desenhar como se estivesse pincelando, mantendo uma inclinao que tornar a pincelada mais fina ou mais grossa dependendo do sentido da pincelada. A pincelada tambm recebe interferncia pela velocidade do desenho (quanto mais rpido mais fino) e mantm uma inrcia no pincel para manter a pincelada suave (sem angulosidade) mesmo em curvas bruscas. Veja as opes que podero fazer essa ferramenta desenhar da forma que voc precisa:

25

Caixa de valor "Largura": define a largura do pincel. Claro que sua pincelada s ter essa largura se voc mover o pincel bem devagar. Caixa de valor "Sinuoso": a pincelada deve afinar quando voc d uma passada rpida, mas com que intensidade a velocidade deve interferir na largura da pincelada. aqui que voc define. Se voc quiser, pode colocar valores negativos, ento a pincelada ficar mais grossa em passadas mais rpidas. Caixa de valor "ngulo": define o ngulo do pincel. Caixa de valor "Fixao": define a rigidez com a qual o pincel se mantm no ngulo definido. Se o valor for 1 o pincel se manter sempre com o ngulo definido na outra caixa, mas se voc colocar 0 o pincel ir girar para ficar sempre perpendicular ao sentido da pincelada, como seria natural. Qualquer valor entre 0 e 1 lhe dar uma maior ou menor rigidez permitindo que o pincel se adeque mais ou menos ao sentido da pincelada. Caixa de valor "Caps": (ainda sem traduo): simula um pincel que colocado levemente e sua presso reduzida antes de ser retirado da tela, por isso arredonda a ponta no fim e incio do trao. Caixa de valor "Tremor": sero adicionadas ondulaes aleatrias espalhando as pinceladas diferentes em cada lado do trao. Valores maiores aumentam o "tremor" do pincel. Caixa de valor "Wiggle" (ainda sem traduo): simula um tremor no mouse. Caixa de valor "Massa": ou seja, quantidade de inrcia, quanto mais rpido uma linha for feita, mas difcil mudar seu sentido. Quanto mais massa, mais suave os traos, mas tambm menos precisos. Usar a presso do dispositivo de entrada para definir a largura. Se voc estiver usando um tablet para desenho isso pode ser til. Usar o ngulo do dispositivo de entrada como ngulo da caneta. Tambm, pode ser usado com um tablet que capture esse tipo de informao.

Aplicar ConectoresCom conectores voc pode fazer organogramas, fluxogramas e grafos. Ao colocar o mouse dentro de um elemento aparecer um quadradinho no centro onde voc deve clicar para marcar o incio da linha de conexo. Uma linha vai acompanhar o mouse at que voc clique no centro de outro elemento. Pronto agora voc pode mover qualquer um dos elementos que as linhas de conexo os acompanharo. Evitar Elementos. Selecione um ou mais elementos, clique neste boto e os conectores desviaro deste elemento.

26

Ignorar Elementos. Se voc quiser que os conectores parem de desviar de um certo elemento, selecione-o e clique neste boto. Caixa de valor "Espaamento": Define o espao ao redor dos elementos para distanciar conectores (ao crlicar em "Evitar Elementos") e outros elementos (ao clicar em "Auto Organizar"). Pressione enter aps modificar esse valor para que ele seja atualizado. Auto organizar rede de conexes. Selecione os elementos conectados e clique neste boto para que ele faa uma auto organizao do conjunto. Caixa de valor "Length" (ainda sem traduo): define o tamanho preferido dos conectores para o "Auto Organizar".

Boto ainda no funcional.

Esse boto impede que o auto organizar sobreponha objetos.

Conta-gotasCopie a cor de uma parte qualquer do desenho para os elementos selecionados. Se voc inserir uma fotografia no seu desenho, voc pode clicar em um ponto qualquer da fotografia e capturar a cor deste para um outro elemento qualquer. Em outro caso, se um elemento tem um gradiente e voc que a cor no meio do gradiente, basta clicar com o conta-gotas no meio do gradiente.

Caixa de checagem "Pick Alpha" (ainda sem traduo): Se marcado, os 4 valores sero coletados independentemente: RGBA = Vermelho, Verde, Azul e Alfa. Se no marcado apenas o RGB ser coletado e uma verso resultante da cor e seu alfa ser passada ao objeto selecionado. Caixa de checagem "Set Alpha" (ainda sem traduo): Somente se marcado, o valor alfa copiado ser aplicado ao objeto selecionado.

Ateno: O canal alfa coletado resultante do canal alfa e opacidade mestre dos elementos sobrepostos no ponto clicado do desenho. No se preocupe, voc entender esses conceitos no tpico Pintando Elementos e suas Bordas.

27

Elementos do DesenhoVoc j conheceu os elementos do desenho no tpico Ferramentas de Desenho. Esse tpico existe apenas para te ajudar a fixar esse conceito e traz alguns detalhes.

Elementos Primitivos ou Formas Geomtricas

Voc j viu esses elementos primitivos no tpico anterior, vamos s relembrar as caractersticas bsicas comum a eles. No existem ns nesses elementos, apenas pontos de controle para modificar as propriedades desses elementos, sem modificar sua natureza. Sem converter em elemento de curvas, uma estrela continua sendo uma estrela, um retngulo continua sendo um retngulo, por mais que modifiquemos seus atributos. Esclarecendo, o texto no se encaixa como forma geomtrica, mas tambm um elemento primitivo do desenho.

Elementos de Curvas ou Caminhos

Um elemento de curvas o resultado de um conjunto de ns e as linhas que os conectam. Voc pode criar um elemento de curvas com as ferramentas especficas, citadas no tpico Ferramentas de Desenho, ou convertendo um elemento primitivo em curvas com o boto no contexto de .

Elementos de curvas nos do total liberdade para criao de formas. Crie novos ns (como j foi citado na descrio do Manipulador de Ns), mova-os e puxe suas alas bziers para criar novas formas.

Ns e suas propriedadesO ns podem ser angulares, suaves ou simtricos:

N Angular

N Suave

N Simtrico

28

GruposOutro elemento do desenho o grupo. O grupo une elementos e permite aplicar transformaes e estilos (formatao) a todos os elementos filhos. Um grupo pode conter qualquer outro elemento de desenho, inclusive outro grupo. Para criar um grupo, selecione todos os elementos que devem ser agrupados e clique em . Para desagrupar, clique em .

Est difcil de ver o grupo como um elemento? A vivncia vai te ajudar a entender bem tudo sobre SVG e imagens vetoriais, mas veja aqui como fica a estrutura do SVG usado no exemplo animado sobre grupos:

Para abrir essa janela clique no boto "Visualizar a rvore XML do SVG". Opa... Estranhou? importante saber que o SVG basicamente um aquivo XML, mas se voc no programador(a) e nem conhece XML, no se preocupe. No necessrio conhecer o XML por traz da imagem SVG para criar SVGs, principalmente com Inkscape. Ok. Continuando... Nesse exemplo voc v o elemento raiz como pai de todos os outros elementos. Os elementos visveis retangulo-azul, circulo-vermelho e estrela-amarela, so filhos do elemento (selecionado na lista) cujo id grupo1.

29

Ferramentas de AuxilioVamos tratar aqui das ferramentas disponibilizadas na primeira barra de ferramentas vertical da interface do Inkscape. Agora voc vai poder salvar o que andou fazendo at agora!

Botes Padro de Salvar, Desfazer, Copiar e outros...Se voc j usou um software de edio qualquer, no Windows ou no GNU/Linux, seja para texto ou imagem, voc j conhece esses botes. Note que os cones desses botes no foram adicionados aqui, porque na verdade eles no fazem parte do tema de cones do Inkscape. O Inkscape requisita ao gerenciador de janelas os cones padres do ambiente para cada uma dessas funes (essa explicao foi bem simplificada, mas no nos importa nesse curso). Ou seja, provavelmente voc est vendo a um botes de salvar e abrir diferentes dos que aparecem no screenshot (imagem da tela do computador) de exemplo e mesmo assim voc sabe quem so eles, so os mesmos que voc v em outros softwares que voc tem usado.Para no ter boto reclamando que no foi citado, vamos falar deles na seqencia, da esquerda para a direita:

Novo: Abre uma nova janela do Inkscape para um novo desenho. Abrir: Abre um arquivo SVG em nova janela caso voc j esteja editando algum. Salvar: Salva o desenho atual em arquivo. (minha nossa... pode saltar essa lista se quiser) Imprimir: Abre o dilogo de impresso onde voc pode gerar um arquivo PS ou enviar para a Impressora. Desfazer: Desfaz a ltima modificao. 30

Refazer: Desistiu de desfazer? Refaa. Copiar: Copia elementos selecionados. O velho Ctrl+C Recortar: Retira do desenho e copia para a memria, os elementos selecionados. O velho Ctrl+X Colar: Cola elementos copiados no desenho. O velho Ctrl+V. Noque que clicando neste boto o elemento colado aparece no centro da rea visvel, e usando Ctrl+V o centro do elemento colado aparece na posio do mouse. Editar Preferncias do Inkscape: Esse o penltimo boto. Abre o dilogo de preferncias do Inkscape onde voc pode modificar os padres e ajustar opes.

Importar imagens para o documentoInclui imagens bitmap ou outros SVGs no desenho. Note que as imagens bitmap includas so apenas referncias a arquivos externos, assim como acontece no HTML. Voc pode incorporar os bitmaps ao SVG clicando no menu Efeitos -> Imagens -> Juntar todas as Imagens, depois disso todos os bitmaps presentes no desenho passaro a fazer parte do arquivo SVG, independentes do arquivo bitmap original.

Exportar para BitmapAbre uma janela de dilogo para gerao de um PNG, baseado no desenho atual. Os botes do topo ajudam a definir a rea de exportao:

Pgina : A rea exportada ser igual a rea da pgina, independente da rea desenhada. Desenho : Exporta toda a rea desenhada, mesmo que ultrapasse a rea da pgina. Seleo : Exporta a rea exata do(s) elemento(s) selecionado(s). Personalizado : rea definida pelo usurio nos campos numricos abaixo. x0 e y0 definem o canto inferior esquerdo do retngulo de exportao, x1 e y1 definem o canto superior direito do retngulo de exportao. Se voc preferir definir pela largura e altura, use os campos com esses nomes e x1 e y1 sero redefinidos automaticamente.

31

Bitmap size define o tamanho da imagem a ser gerada. Redefinir a largura e altura, interfere na DPI e vice versa. A DPI padro 90, assim um caminho com expessura de 1 pixel ter 1 pixel tambm na imagem gerada. Por fim, no ltimo campo voc pode escrever o caminho e nome do arquivo bitmap (PNG) a ser gerado. Ou clicar no boto ao lado e usar o dilogo de salvar para escolher o local e arquivo de forma mais amigvel. Se quiser a imagem exportada em JPG ou outro formato bitmap, use o GIMP ou outro programa para fazer a converso. Agora desenhe alguns objetos no Inkscape e exporte "Pgina", "Desenho" e "Seleo" com DPIs variadas para assimilar bem esses conceitos.

Opes de ZoomLembra-se que vimos sobre a ferramenta de zoom no tpico Ferramentas de Desenho? Ento, s pra relembrar, esses botes so:

Encaixar seleo na janela Encaixar desenho na janela Encaixar pgina na janela

Para a maioria dos casos de uso de zoom, basta usar esses botes ou as teclas + e - que aumentam e reduzem o zoom.

Duplicar ObjetoDuplica elemento(s) selecionado(s). A cpia aparece exatamente em cima do original e elas so independentes entre si.

Criar CloneClona elemento(s) selecionado(s). O clone aparece exatamente em cima do original e o clone acompanha as transformaes feitas no original. No se preocupe muito com isso agora. Veremos mais sobre clonagem no tpico Criando Clones.

Desligar CloneSelecione o clone e clique neste boto para tornar o clone independente do original.

AgruparCria um grupo com os elementos selecionados como j foi citado no tpico Elementos do Desenho.

32

DesagruparSelecione o grupo e clique neste boto para separar os elementos.

Janela de Dilogo de Preenchimento e TraosAbre a janela de dilogo para definir o preenchimento e trao do elemento selecionado. Veremos mais sobre esse dilogo no tpico Pintando Elementos e suas Bordas.

Janela de Dilogo de TextoEsse boto abre a janela de dilogo de texto para ajudar na formatao e edio do elemento de texto selecionado.

Nessa janela voc tem acesso a todas as opes j presentes na barra de ferramentas contextual de edio de texto e mais o boto "Ajustar como padro" e a caixa de valor "Espaamento de linha". O boto "Ajustar como padro" define a formatao corrente como padro para os novos textos criados. A caixa de valor "Espaamento de linha" define, na realidade, a altura da linha em relao ao tamanho da fonte. (Para conhecedores de CSS, a propriedade definida aqui line-height.) Agumas vezes difcil editar o texto em meio ao desenho, ento voc pode clicar na aba "Texto" e editar sem interferncia da formatao e outros elementos do desenho. Essa janela tambm tem o benefcio de incluir um corretor ortogrfico. Quando uma palavra for sublinhada de vermelho, clique-a com o boto direito do mouse e selecione a correo apropriada.

33

Visualizar a rvore XML do SVGVoc j viu a janela que se abre ao clicar neste boto quando falamos de grupos no tpico Elementos do Desenho. Vamos entende-la um pouco mais agora.

Essa janela nos mostra a estrutura de rvore XML deste desenho SVG. Alguns elementos podem conter elementos filhos, como o elemento raiz , o elemento e o . Essa janela de grande ajuda para quem quer aproveitar conhecimentos em XML, mas mesmo sem esse conhecimento essa janela pode te ajudar a acessar alguns elementos e seus atributos em casos especiais. Os atributos do elemento selecionado so listados na coluna da direita. Voc pode clicar em um atributo qualquer, redefinir seu valor e o desenho ser atualizado apresentando o resultado da modificao.

Alinhar ObjetosAbre a janela de dilogo "Alinhar e Distribuir", para ajudar na organizao dos elementos do desenho. Teremos um tpico s sobre isso em Organizando Elementos.

Propriedades do Documento (cone dependente do tema do desktop)Aqui voc pode redefinir o tamanho da pgina, a cor de fundo, unidade de medida padro, se as bordas da pgina aparecem ou no e mais... (as configuraes nas abas "Grelha/Guias" e "Snap" no sero tratadas neste curso) Se voc exportar um bitmap ( ), a sua cor de fundo ser a definida aqui, na opo "Fundo". Por padro a cor branca, mas com opacidade zero, ou seja, fundo transparente. O PNG consegue representar bem isso por suportar canal alfa, mas se no for do seu interesse, modifique a cor de fundo, conforme necessrio. As outras opes so auto descritivas o suficiente para voc ir testando e se divertindo.

34

Pintando Elementos e suas BordasCor - Entendendo a Mistura de CoresVamos l, selecione um retngulo, clique no boto e acompanhe.

Uma janela de dilogo de Preenchimento e Traos est aberta com a aba "Preencher" ativa. Dentro temos outra caixa com abas e a "RGB" est ativa. Nela voc v 4 barras com gradientes de cor. Mova seus marcadores como na animao ao lado e veja o efeito. Entendendo: O que so os gradientes R, G, B e A? Ao mover o marcador do gradiente R, voc modifica a intenciadade do canal R (Red, ou seja, Vermelho) na composio da cor. Porque o gradiente R no vermelho na maioria dos casos? Bem, nem o G verde e nem o B azul tambm. Esse gradiente te ajuda a prever que cor voc ter ao mover o marcador para uma certa posio. Veja na animao: Quando o retngulo estava azul, o gradiente R estava variando entre o azul atual e o lilaz. E nessa mesma animao o marcador R movido para o valor mximo, onde estava a cor lilaz e essa cor atribuida ao retngulo. O gradiente A um tanto diferente dos outros... Ele define o canal alfa, quanto mais alto o valor, mais opaco, quanto menor mais transparente. Note como o retngulo vai ganhando transprencia conforme o marcador A movido para o valor mnimo at que no fim fica como se no tivesse preenchimento. Mas porque temos 4 abas para fazer mistura de cor? No momento no faz muita diferena definirmos a cor em RGB ou CMYK. O SVG vai guardar todas as cores como RGB, mas j existem planos para estender a definio de cor e dar suporte a CMYK. Existem 4 formas de definio de cor para ajudar voc a definr a cor da forma que lhe for conveniente. As formas de mistura de cor funcionam de forma bastante diferente, vamos ver sobre cada uma:

RGBEste o modelo de mistura de cores por adio, simulando a mistura de luz, onde R, G e B significam Red, Green e Blue, ou seja, Vermelho, Verde e Azul. Esse modelo se tronou bastante popular, porque desta forma que o monitor pode apresentar cores, ento assim que o software deve repassar a cor e mais fcil pedir ao usurio que defina a cor neste modelo. dessa forma que voc percebe as cores do mundo. Seus olhos captam mistura de luz, ento quando voc v algo laranja, voc est recebendo uma grande intensidade de luz vermelha misturada com uma mediana de verde. Sim! 100% de Vermelho com 50% de Verde d Laranja, quando a mistura de cores aditiva. Cores Primrias: Vermelho, Verde e Azul Misturas para exemplo (Apresentando os valores numricos para R, G e B respectivamente):

35

255 + 255 + 255 = Branco 255 + 255 + 0 = Amarelo 255 + 150 + 0 = Laranja 0 + 200 + 255 = Azul Mdio Pastel 0 + 255 + 255 = Azul Ciano 255 + 0 + 255 = Magenta 255 + 150 + 255 = Lilaz

HSLEssa uma outra forma de definio de cor, baseada no RGB. H, S e L significam Hue, Saturao e Luminosidade. Hue o aspecto que nomeia a cor, como verde, ciano, magenta... Saturao define o quo representativa a cor na composio. Com saturao 0 a cor some e a composio fica cinza, com o valor mximo a composio ganha cor viva. Luminosidade em 50% da cor "normal", sem interferncia de excesso ou falta de luz. Com luminosidade abaixo de 50% a cor escurece e acima a cor clareia.Misturas para exemplo (Apresentando os valores numricos para H, S e L respectivamente): ... + ... + 255 = Branco 42 + 255 + 128 = Amarelo 25 + 255 + 128 = Laranja 137 + 255 + 128 = Azul Mdio Pastel 128 + 255 + 128 = Azul Ciano 212 + 255 + 128 = Magenta 212 + 255 + 203 = Lilaz

CMYKEste o modelo de mistura de cores por subtrao, simulando a mistura de tinta, onde C, M, Y e K significam Ciano, Magenta, Amarelo e Preto. Esse o modelo de definio de cor mais adequado para impresso, por motivos bvios. J sabemos desde a infncia que misturando tinta amarela com azul temos verde, mas mesmo assim, faa alguns testes para ver como isso acontece com valores numricos. Quando estiver definindo uma cor nesse modelo pense que voc vai espalhar uma certa quantidade de tinta em uma superfcie branca, mas s o valor mximo representa tinta suficiente para cobrir o papel, abaixo disso a cor vai ficar clareada quando espalhar.Cores Primrias: Magenta, Amarelo e Ciano Misturas para exemplo (Apresentando os valores numricos para C, M, Y e K respectivamente): 0 + 0 + 0 + 0 = Branco 0 + 0 + 100 + 0 = Amarelo 0 + 41 + 100 + 0 = Laranja 100 + 22 + 0 + 0 = Azul Mdio Pastel 100 + 0 + 0 + 0 = Azul Ciano 0 + 100 + 0 + 0 = Magenta

36

0 + 41 + 0 + 0 = Lilaz

RodaEssa uma forma puramente visual de definir uma cor atravz do modelo HSL. Uma ponta do tringulo toca no crculo de cor que contem os valores de Hue. Afastando-se desta ponta voc diminue a saturao. Aproximando-se de cada uma das outras extremidades voc almenta ou diminue o brilho.Voltando para o assunto "Entendendo a Mistura de Cores"

Mas e aquele campo "RGBA" que contm um valor esquisito com nmeros e letras? Ah sim... esse o valor hexadecimal que define o preenchimeto do elemento. quase assim que o valor da cor registrado no cdigo SVG. Quem conhece HTML tambm j usou bastenate essa forma de definio de cor, a diferena que aqui temos 4 unidades na composio R, G, B e A, mas atributos de cor tanto no HTML quanto no SVG carregam apenas R, G e B. Esse campo existe para facilitar a cpia ou edio de valores de cores, basta modificar ali e voc redefine sua cor de uma vz s. Ok ok... Ainda no expliquei o que esse tal de hexadecimal. Poderiamos comear falando sobre binrios e porque o hexadecimal uma boa forma de representar o valor de cor, mas isso voc pode ver na Wikipedia. O que precisamos entender aqui que a representao de RGBA em hexadecimal exige 8 caracteres, 2 para cada unidade da composio e cada uma dessas duplas dessas representam um valor entre 0 e 255 decimal. Vamos ver isso de forma mais clra. Esse o cdigo de um preenchimento laranja com 50% de opacidade: ffd20080 Isso equivale a: 255 de Vermelho, 210 de Verde, 0 de Azul, 128 de Alfa. Porque? Como voc j deve ter visto na Wikipedia, em vez de termos 10 caracteres para representaes numriacas (0 ... 9), como no decimal, aqui temos 16 caracteres (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, e F), com isso 00 hexa equivale a 0 decimal, 10 hexa equivale a 16 decimal e finalmente FF hexa equivale a 255 decimal. Antes de passarmos para o prximo ponto desta aula, vejamos os botes da parte superior desta caixa de preenchimento:

Nenhuma pintura. Retira o preenchimento do elemento.

Cor lisa. Define uma cor nica para o elemento, como estivemos fazendo at agora.

Gradiente linear. O elemento no ter uma cor nica, mas uma variao de uma cor para outra (talvz com pontos intermedirios) seguindo a linha de gradiente.

Gradiente radial. A diferena nesse caso que a variao sai do centro para as extremidades da elipice que definida pelos raios desse gradiente.

37

Preenchimento com Padro. Um desenho ser repetido dentro desse elemento, preenchendoo.

Pintura indefinida. Isso no o mesmo que "Nenhuma pintura". "Nenhuma pintura" define fill:none ao estilo do elemento, enquanto "Pintura indefinida" retira esse atributo de estilo, permitindo que a cor seja herdada. Como assim? Um elemento grupo pode ter seu prprio estilo e uma definio de cor para preenchimento. Essa a cor padro para elementos do grupo sem atributo de cor definido. Isso mais til para quem pretende manipular o cdigo SVG posteriormente.

No pintar intersesses. Caso exista sobreposio de um caminho por si mesmo, a rea sobreposta se torna vazia.

Pintar intersesses. Toda a rea definida pelo caminho ser pintada. Agora sim, podemos ir para o prximo ponto.

Gradiente ou Degrad - Tudo o que voc queria saberBem, agora voc j conhece a ferramenta e os botes e . Essas so as formas pelas quais voc pode iniciar um preenchimento com gradiente. Vamos l, clique no boto gradiente linear, na janela de preenchimento, e voc ver que ser criado um gradiente da cor atual do elemento para essa mesma cor com o valor alfa igual a 0, ou seja um gradiente de nvel de opacidade. Voc quer mudar a direo do gradiente? Ento use as ferramentas de edio de ns ou edio de gradientes para mover os pontos da reta do gradiente, como feito na animao a direita. Bom, voc j criou o gradiente, j modificou sua direo, agora vamos mudar as cores. Dentro da janela de preenchimento temos a caixa "Gradiente linear" e ali temos um boto "Editar", Clique nele. Voc est vendo agora a janela "Editor de Gradiente". A primeira caixa de seleo contm a cor inicial do seu gradiente e um nome "stop####". Clique ali e mude para a segunda parada (s existem duas no gradiente recm criado). Pronto, agora a "Cor da Parada" j se refere a segunda parada com mesma cor e alfa 0. Aumente o valor do canal alfa e mude a cor dessa parada para termos um gradiente mais interessante. Como exerccio crie outros gradientes lineares e radiais, para criar um gradiente radial use o boto . Tudo o mais funciona da mesma forma para os dois tipos de gradiente.

38

Veja na animao ao lado, outros detalhes sobre gradientes. Note que tanto na barra contextual da ferramenta de criao e edio de gradientes, quanto na janela de preenchimento temos uma caixa de seleo com os gradientes j criados para que voc possa reutilizar. Assim voc no precisa recriar gradientes complexos quando for necessrio reutilizar em elementos diferentes. Voc tambm pode usar o boto "Duplicar" para fazer uma cpia do gradiente atual e criar um variante. Voc notou tambm que no exemplo temos um gradiente com mais variaes de cor. Isso conseguimos adicionando novas paradas ao gradiente. Ento, clique no boto "Acrescentar Parada" na janela "Editor de Gradiente" e edite a cor das novas paradas. Veja na animao que existem 4 paradas no gradiente de exemplo (se voc se perdeu na hora de editar as paradas do seu gradiente, veja na animao onde se abrem as cores base do gradiente, na janela "Editor de Gradiente"). Quando voc acrescenta uma parada ao gradiente ela aparece no meio do caminho entre a parada atual e a prxima, mas e se essa no forma a melhor posio? Voc pode mudar a posio de uma parada pela janela "Editor de Gradiente" mudando o valor de tipografia ou movendo o ponto de controle diretamente no desenho. Veja na animao que aps mudar a inclinao do gradiente a parada amarela tem sua posio movida da posio 0,45 para 0,60 e isso se reflete no reposicionamento do ponto de controle do gradiente. O mesmo aconteceria em sentido contrrio se voc mudar a posio da parada movendo o ponto de controle. E o que aquela caixa de seleo "Repetir" na janela de preenchimento? Bem lembrado! Veja na animao que as opes so "nenhum", "refletido" e "direto". Essa caixa de seleo define o comportamento do gradiente alm dos limites do da linha que define o gradiente. Como funcionam as opes: 39

Nenhum: O que voc j tem usado mantm cor lisa fora dos limites da definio do gradiente. Refletido: O gradiente continua aps os limites do gradiente invertendo seu sentido para dar sensao de continuidade e suavidade. Direto: O gradiente repete-se com o mesmo sentido aps os limites do gradiente.

PadresPadres so muito mais simples do que parecem. Partindo logo para a prtica, vamos fazer uma estrela preenchida com sorrisos. Crie uma carinha sorridente como a da direita e agrupe-a (note que a seleo no toca nos olhos e na boca da carinha, isso porque coloquei um retngulo com alfa 0 como parte do grupo. Isso serve para dar um espao entre as carinhas quando ela for usada como padro da estrela). Agora, selecione o grupo da carinha e clique no menu Objeto > Padro de Preenchimento > Objetos para Padro. Ok! Agora temos nosso primeiro padro definido. Crie uma estrela, abra a janela de Preenchimento e clique no boto de Preenchimento com Padro. Sua estrela receber imediatamente esse padro recm criado. Al na caixa "Padro de Preenchimento" voc encontra uma caixa de seleo de padres, ento voc pode criar vrios e aplicar como quiser e onde quiser. E no s isso! Ao selecionar um elemento com preenchimento de padres, usando a ferramenta de edio de ns, voc v 3 pontos de controle, exatamente como aparecem a esquerda da nossa estrela de exemplo. Com o X voc reposiciona o padro, com o crculo voc gira o padro e com o quadrado voc redimensiona o padro.

Tipos de BordasVamos saltar agora para a terceira aba da janela de "Preenchimento e Trao". E a segunda? A segunda aba faz tudo o que a primeira faz, mas se aplica aos contornos. Teste-a um pouco e volte pra c. A terceira aba tem a aparncia mostrada a direita, e apesar de termos mais botes e opes aqui, bem mais simples entender essa aba. A primeira opo de configurao a "Largura", que define a espessura da linha. Mais claro que isso, s vendo o exemplo abaixo, onde temos linhas com largura crescente de 1 at 12 pixels. Voc pode redefinir a unidade de medida da largura na caixa de seleo ao lado.

40

A opo "Juntar" define como o cotovelo dos ns angulares do caminho sero desenhados. As 3 opes na seqncia so miter (pontudo), round (arredondado) bevel (chanfrado). Veja abaixo a aparncia dos caminhos idnticos com juntas diferentes: e

Quando usamos a junta pontuda (miter), alguns ns ganham uma projeo exagerada, por terem um ngulo mais fechado. Para restringir o ngulo mnimo para recebimento da ponta, definimos o "Limite de Aguamento". Quanto menor o valor deste campo, maior o ngulo mnimo onde a ponta ser aplicada. ngulos abaixo do valor limite sero chanfrados. Veja como se comporta um caminho com junta miter e valores diferenciados de limite de aguamento:

"Ponta" define o limite do caminho, quando este no fechado. As opes so: Sem ponta, como voc v no zoom ao lado, a linha acaba exatamente nos ns das extremidades do caminho. Ponta quadrada. A ponta se expande alm do n das extremidades, metade da largura do caminho. Ponta arredondada. Define-se um semicrculo nas extremidades do caminho. Ateno! Essas opes interferem no pontilhado do trao. Se voc quiser uma linha pontilhada ou tracejada (como veremos abaixo), defina o caminho como "sem ponta". Na opo "Traos" voc define se a linha continua ou no. Basta selecionar na caixa de opes o tipo de pontilhado ou tracejado da linha. Veja alguns exemplos:

Finalmente temos 3 caixas de opes com marcadores, de incio, centrais e final. Os marcadores centrais aparecem em cada n interno do caminho. Veja o exemplo abaixo onde um crculo usado como marcador inicial, um losango como central e uma ponta de seta como final.

41

Sobre a Opacidade MestreOpacidade mestre definida pela barra percentual na parte inferior da janela "Preenchimento e Trao". Ela funciona exatamente como o canal alfa que j vimos, mas se aplica ao elemento como um todo. Se houver um gradiente, a opacidade de todo o gradiente ser reduzida com a reduo da opacidade mestre, o mesmo vale para todo tipo de preenchimento. Tanto o preenchimento quanto a borda de um elemento podem ter sua opacidade definidas de forma independente, mas temos um resultado diferente quando aplicamos opacidade mestre em lugar de usar o canal alfa de cada parte do elemento. Perceba o exemplo:

Desfocagem?Um dos grandes benefcios das imagens vetoriais garantir boa definio dos desenhos em qualquer caso. Voc sempre tem uma idia clara dos limites dos elementos. Contudo, em alguns casos, interessante ter um elemento desfocado, borrado, com limites diludos. A grande importncia da desfocagem permitir desenhos foto-realistas em SVG, mas tambm pode ser bastante til para outros casos. No exemplo ao lado temos duas estrelas com sombra, mas na segunda sombra foi adicionada desfocagem, o que torna a sombra um tanto mais natural. Muito mais pode ser conseguido com esse filtro. Veja o que foi criado no Concurso de criao da "Janela Sobre" do Inkscape 0.45, cujo foco era demonstrar o uso deste filtro. Teste-o modificando o valor do campo "Borrado" na janela "Preenchimento e Trao".

42

Criando e Editando de CaminhosCaminho o contorno com ns de um objeto, o percurso limite do elemento ou uma linha qualquer. Todo elemento visvel definido por um caminho. Mesmo os elementos primitivos tm um caminho, porm nesse caso no acessamos diretamente seus ns, porque estes caminhos so definidos automaticamente, baseados nas propriedades deste elemento. Para editar caminhos sempre usamos a ferramenta "Manipulador de Ns".

Esse tpico apenas completa conceitos j vistos nos tpicos Manipulador de Ns e Ns e suas propriedades. Se voc chegou nessa pgina de paraquedas, veja as referncias anteriores.

Editando CaminhosComo vimos anteriormente, para editar o caminho de um objeto primitivo, primeiro necessrio converter em curvas . Sabendo disto vamos criar um corao baseado em um crculo, para exercitar. Guie-se pela animao: Nesse exerccio usamos apenas a ferramenta de edio de ns forma original e criar um corao. para modificar uma

No somos obrigados a iniciar o desenho de um elemento primitivo. Vamos novamente fazer um corao, mas desta vez vamos desenh-lo com ajuda da Caneta :

A caneta lhe permite definir um caminho onde, em cada clique, definimos as posies dos ns e se arrastarmos o mouse, definimos simtricas. Pelo fato de serem simtricas no podemos desenhar o corao todo apenas com esta ferramenta. Aps definir o caminho temos que corrigi-lo usando a ferramenta de edio de ns. No estranhe ter achado o primeiro mtodo mais fcil. O autor que vos escreve acredita que na maioria dos casos mais fcil criar novas formas partindo de formas primitivas. Criar ns uma ao importante na edio de caminhos. J vimos isso antes, lembra-se? Voc pode criar novos ns nos caminhos selecionados clicando em duplo clique na posio que quiser da linha. ou simplesmente com um

Esculpindo NsCom a funcionalidade "Esculpir Ns" podemos criar formas puxando e empurrando grupos de ns, como se o elemento fosse uma massa de modelar. Use-a para criao de novas formas a partir da deformao de um elemento complexo (com muitos ns).

43

Para deformar um elemento, selecione todos os seus ns (ou um conjunto grande deles) clique em um n, segure a tecla Alt e arraste o mouse. Veja que o n arrastado o centro da deformao e este arrasta seus visinhos com fora diretamente proporcional a proximidade deste. Veja no exemplo ao lado, com apenas duas selees e dois movimentos foi aplicada uma grande deformao mas suave e contnua ao texto, o que seria muito difcil de se fazer com a edio normal de caminhos movendo n a n. Naturalmente, o texto foi convertido em curvas antes de se aplicar a ao "Esculpir Ns". Textos so timos para se treinar a tcnica de escultura porque so naturalmente ricos em ns e no podemos perder a lgica de sua forma para no comprometer o entendimento.

Convertendo Traos em CaminhosEsse ttulo referencia o nome da funcionalidade "Trao para Caminho", cujo nome no perfeito, mas bom o suficiente para entendermos o que isso faz. Essa funcionalidade transforma o "trao" (ou "linha", "borda", "contorno", como preferir) em um novo elemento com as caractersticas do "trao" do elemento original. Se elemento original era um crculo com trao vermelho, o resultado ser um anel vermelho. Veja no exemplo ao lado: um elemento original (o primeiro elemento na animao) tinha trao preto e preenchimento amarelado, ao ser convertido com "Trao para Caminho" se torna um elemento preto, oco e sem borda (ou trao, linha, contorno, como preferir). Note que no original temos os ns do caminho que o define no meio do trao, pois o trao o caminho com alguma espessura e cor. No segundo elemento (resultado do "Trao para Caminho") temos os ns nas bordas do que antes era o trao, definindo a forma de um novo elemento. O terceiro elemento mostra uma boa utilidade dessa funcionalidade: alguns ns do novo elemento foram movidos tornando a parte arredondada mais larga que o resto do elemento, criando uma forma interessante que no seria possvel com traos reais.

Ento pra que usamos essa funcionalidade? Proteger a forma de traos quando um desenho ser reutilizado, desmontado e redimensionado constantemente. Como acontece com logotipos. Auxiliar na criao de novas formas.

44

Manipulando TextoVeremos agora as possibilidades de manipulao de texto no Inkscape. Se chegou aqui de para-quedas, antes veja sobre a Ferramenta de Texto e a Janela de Dilogo de Texto. Voc j conhece as formas bsicas de entrada de texto, usando a ferramenta de texto e simplesmente clicando, para criar um texto livre ou criando uma rea de texto. Tambm j conhece a janela de edio de texto onde voc pode definir outras caractersticas do texto e editlo independente de sua formatao e do resto do desenho que por ventura o esteja atrapalhando. Vamos alm agora...

Formatando TextoNo existem segredos aqui a no ser que voc nunca tenha usado um editor de texto com capacidade de formatar o texto. Note na barra de ferramentas contextual enquanto usa a ferramenta de texto. Parece-se com a berra de qualquer editor simples do gnero, no? Caso voc selecione o elemento de texto, mas no faa nenhuma seleo no texto em si, ao clicar em um dos botes de formatao, essa ser aplicada ao texto como um todo. Selecionando parte do texto voc formata apenas essa parte. A formatao pode ser feita tambm clicando na ferramenta de auxlio conheceu. que abrir a janela de edio de texto que voc j

Texto em CaminhoColocar texto sobre um caminho bem mais simples do que voc pode imaginar. Crie um texto e um elemento qualquer que ser o caminho. O caminho pode ser aberto ou fechado, no importa. Selecione os dois e clique no menu Texto -> suas propriedades e continua sendo editvel.Veja o exemplo:

Por no Caminho. O texto no perder

O texto editvel sobre o caminho, o que facilita a criao. Depois do texto feito percebeuse que deveria ser movido para a direita, para isso o cursor foi movido para o incio do texto e movido com Alt + seta para direita. Voc pode ajustar a posio do texto em qualquer parte deste, separando ou aproximando caracteres com Alt + setas direcionais. 45

Depois que vinculamos um texto a um caminho podemos move-lo que ele no perder o vinculo com a forma. Se voc editar o caminho o texto ir se ajustar ao novo formato. Se no quiser que o caminho aparea, retire seus atributos de preenchimento e trao, voc s no pode deletar o caminho. Se quiser desvincular o texto do caminho, selecione-o e clique no menu Texto > Remover do Caminho

Movendo e Girando Caracteres do TextoQuando falamos sobre "Texto em Caminho", vimos como deslocar o texto sobre o caminho para chegar na posio que queriamos. Na verdade essa apenas um uso do recurso de deslocamento e giro de caracteres no SVG.

Voc pode deslocar caracteres em todas as direes usando Alt + teclas direcionais (as setas). Quando voc posiciona o cursor em um ponto qualquer do texto todos os caracteres daquela posio em diante so deslocados ao usar Alt + tecla direcional. Caso voc queira deslocar apenas um caracter ou um conjunto deles, selecione o caracter, ou a parte de texto a ser movida e ento use Alt + tecla direcional. Voc tambm pode usar o Shift para mover mais rapidamente. Alt + Shift + tecla direcional move o caracter uma distncia 10 vezes maior. Para girar um caracter posicione o cursor a esquerda deste e use Alt + [ ou Alt + ]. [ (abre colchete) gira o caracter no sentido anti-horrio e ] (fecha colchete) gira no sentido horrio. Girar afeta apenas um caracter, ento no preciso se preocupar em selecionar o dito cujo para gir-lo. Para girar 90 graus, use Ctrl no lugar do Alt quando for girar.

Texto em FormasColocar um texto dentro de uma forma qualquer uma tarefa bastante simples e quase direta. Pegue um elemento qualquer, crie um texto, selecione esses dois e clique no menu Texto > Formatar texto na moldura.

Os limites do texto sero definidos pelo caminho que agora o envolve. Voc pode mover o texto para fora do elemento moldura, como foi feito no exemplo do texto em caminho, apesar do exemplo ao lado usar a moldura como parte da ilustrao. 46

Voc perceber que se criar um texto com quebras de linha e formatao especial para algumas partes, isso tudo ser perdido ao inserir o texto na moldura. Ento, ao criar o texto, no se preocupe em cri-lo completo, nem format-lo antes que esteja vinculado a sua moldura. As vezes precisamos que o texto siga fluindo por uma seqncia de elementos. Imagine um jornal... o texto corre entre colunas e ao chegar no fim de uma, continua no incio de outra. Como faramos essas colunas no Inkscape? Um retngulo ao lado do outro seria uma boa. E como fazemos para o texto seguir de um para o outro? Cortamos o texto em partes e cada retngulo contm uma parte? No... Isso pssimo. Se voc fizer qualquer modificao no texto corre o risco de ter que mover texto de um pedao para o outro, corrigindo os espaos. Ento, como ? Crie cada um dos elementos por onde o texto deve fluir. Selecione-os, um por um, do ltimo para o primeiro (para definir a seqncia por onde o texto deve fluir) e selecione tambm o texto. Agora s clicar em "Formatar texto na moldura", como antes. Veja o exemplo abaixo (3 elementos distintos com formas distintas emoldurando o texto):

47

Imagens Bitmap no InkscapeImportaoVoc se lembra do tpico Tipos de Imagem, no mesmo? Ento, j sabe que existe uma grande diferena no conceito base das duas formas de representao de imagens, mas mesmo assim possvel incorporar imagens bitmap na maioria dos formatos vetoriais, o que no diferente no SVG. Para importar uma imagem bitmap (como uma fotografia), clique no boto selecione uma imagem no seu computador. (importar) e

Note que esse elemento bitmap na verdade uma referncia a um arquivo externo. Clique neste bitmap com o boto direito e selecione "Propriedades da Imagem". Voc pode ver na janela "Atributos da Imagem" o campo "URL" apontando para o arquivo que voc importou. Sendo assim a imagem est sendo referenciada pelo SVG, mas no foi incorporada. Existe o lado bom e o lado ruim disso: o lado bom que voc pode, por exemplo, editar seu bitmap no GIMP e ao reabrir seu SVG ver o bitmap atualizado; o lado ruim que ao enviar seu SVG para outra pessoa, voc deve enviar o arquivo bitmap junto e mesmo assim pode no funcionar pois o caminho registrado no SVG pode ser invlido no computador da outra pessoa. Avaliando o lado bom e o lado ruim da referncia a bitmaps, podemos concluir o seguinte: Durante a criao do seu trabalho, caso seja vlido editar o bitmap, mantenha-o como referncia e ser fcil atualizar essa imagem sempre que preciso. Quando for finalizar seu trabalho ou enviar para outra pessoa ou outra mquina (por qualquer motivo), incorpore o bitmap ao SVG, para tornar-se independente do arquivo bitmap original. Mas como incorporar bitmaps no SVG pelo Inkscape? bastante simples... V no menu Efeitos > Imagens > Juntar todas as Imagens. Esse efeito coletar a informao contida no arquivo da imagem bitmap e a adicionar onde estaria a referncia ao arquivo. Veja o resultado no exemplo abaixo:

48

Note que nada muda na imagem, muda apenas no arquivo SVG. Seu SVG naturalmente ficar mais pesado, afinal agora carregar mais informao.

ExportaoPara exportar uma imagem bitmap, baseada no seu SVG, clique no boto (exportar), defina as opes de exportao e defina o nome de arquivo para salv-lo no seu computador.

As opes de definio de rea so:

Pgina - Exporta a rea da pgina, ignorando desenho fora desta. Desenho - Exporta todo o desenho e apenas a rea ocupada por ele. A pgina no importa. Seleo - Exporta a rea coberta pelos elementos selecionados. Personalizado - Aqui voc define o retngulo de exportao, definindo os valores numricos logo abaixo.

Em "Tamanho do Bitmap" voc define a dimenso de exportao da rea que voc j selecionou. Ao definir o tamanho em pixels o Inkscape j corrige a DPI, ao definir a DPI o Inkscape atualiza o tamanho em pixels. Abaixo voc v o resultado da exportao do desenho definido no arquivo "sapo.svg" com 37 DPI (300x287 pixels):

49

VetorizaoVetorizao ou Trace o nome dado a ao de criar uma imagem vetorial baseada em um bitmap. Existem softwares que automatizam esse processo, no caso do Inkscape a vetorizao feita pelo Potrace. A janela ao lado uma interface criada pelo Inkscape para facilitar o uso do Potrace. No preciso sair do Inkscape nem instalar nada, j est tudo incorporado. Para vetorizar um bitmap, selecione-o e clique no menu Caminho > Traar Bitmap. Voc deve ter notado que existem vrias opes de mtodos para executar a vetorizao. Vamos focar em apenas dois: "intensidade de brilho" e "cores".

50

Vetorizando um DesenhoPara vetorizar um desenho use a opo "intensidade de brilho". Voc pode usar essa opo em uma fotografia tambm, mas isso criar um resultado equivalente a transformar a foto em preto e branco (sem escala de cinza). Veja no exemplo abaixo, que uma cabea foi desenhada em papel, esboada a lpis e definida a caneta, para vetorizar pelo brilho reajustamos o limiar para0.500 possibilitando uma coleta mais adequada do desenho.

Ao clicar em "Ok", recebemos o resultado abaixo:

Todos os pixels com intensidade luminosa acima de 0.5 foram ignorados (como os traos de lpis e as dobras do papel amassado) e os que estavam abaixo disso (traos escuros da caneta) definiram a forma do elemento vetorial criado pelo Potrace. Isso pode ser bastante til para um desenhista de quadrinhos (que no tenha um tablet), possibilitando que ele desenhe em papel, escanei e vetorize, para colorir e imprimir com alta resoluo. nesse tipo de trabalho que um