introdução à imagem vectorial - apontamentos tsi · representadas como uma grelha rectangular de...

128
1.ª parte Introdução à imagem vectorial Sexta-feira, 2 de Março de 12

Upload: phamtu

Post on 08-Nov-2018

216 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

1.ª parte

Introdução à imagem vectorial

Sexta-feira, 2 de Março de 12

Page 2: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Imagens baseadas em pixels (bitmap)

• São imagens cuja estrutura de dados as permite serem representadas como uma grelha rectangular de pixels, ou pontos de cor.

• As imagens baseadas em pixels tanto podem ser criadas em programas de edição de imagem bitmap, como capturadas em dispositivos de recolha de imagens como scanners ou câmaras fotográficas.

Sexta-feira, 2 de Março de 12

Page 3: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

• Características das imagens bitmap:• + ideias para a reprodução de originais fotográficos;• - perdem qualidade se redimensionadas;• - ocupam geralmente mais memória.

• Tipos de ficheiros de imagem associados:• .tiff;• .jpeg;• .gif;• .png;• .psd;• eps;• .pdf.

Sexta-feira, 2 de Março de 12

Page 4: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Imagens baseadas em vectores

• Ou mais correctamente, imagens baseadas em curvas Bézier, são imagens compostas a partir de primitivas geométricas (pontos, linhas e curvsa), descritas através de equações matemáticas;

• As imagens baseadas em vectores são normalmente criadas em programas de edição vectorial.

Sexta-feira, 2 de Março de 12

Page 5: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

• Características das imagens vectoriais:• + escalonáveis sem perda de qualidade;• + ocupam pouca memória;• - não podem reproduzir imagens fotográficas.

• Tipos de ficheiros de imagem associados:• .eps; • .ai; • .fh11; • .pdf; • .svg.

Sexta-feira, 2 de Março de 12

Page 6: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

2.ª parte

Propriedades dos documentos

Sexta-feira, 2 de Março de 12

Page 7: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Painel de boas-vindas

• Aquando do arranque inicial do Illustrator CS5, é apresentado ao utilizador o painel de boas-vindas;

• Este painel encontra-se dividido em quatro áreas: acesso a documentos recentes; ligações a recursos online; notícias e tipologias de criação de documentos.

Sexta-feira, 2 de Março de 12

Page 8: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

• Ao criar-se um novo documento segundo uma das tipologias sugeridas pela aplicação (print, web, mobile, video), o Illustrator aplica automaticamente o conjunto de definições mais adequada à referida tipologia (ex. um documento web será definido com perfil de cor RGB e usará como unidade de medida o píxel).

• Ainda assim, surgirá sempre uma caixa de diálogo de confirmação das propriedades relativas à tipologia de documento escolhido.

Sexta-feira, 2 de Março de 12

Page 9: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Templates

• A partir do painel de boas-vindas é também possível iniciar um documento a partir de uma série de modelos pré-criados; estes modelos consistem em layouts e medidas de documentos para impressão, web e vídeo;

• Particularmente útil é o modelo “FlexSkins”, onde se encontram uma variedade de controles UI para maquetagem de aplicações Flex.

Sexta-feira, 2 de Março de 12

Page 10: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Interface

• O interface do Illustrator CS5 segue a filosofia de interacção definida pela Adobe para a maior parte das suas aplicações: uma janela de aplicação dividida entre área de trabalho (1) , painel de ferramentas (2) e caixas de propriedades (3). O Illustrator possui ainda uma barra contextual (4), cujo conteúdo muda conforme a selecção e/ou ferramenta utilizada.

12 3

4

Sexta-feira, 2 de Março de 12

Page 11: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

• Também como acontece com as demais aplicações da Adobe, é possível reordenar os diferentes elementos do interface, e guardar essa organização sob diferentes perfis. O Illustrator traz de origem alguns perfis predefinidos, acessíveis a partir do botão Essentials, disponível na moldura da aplicação.

Sexta-feira, 2 de Março de 12

Page 12: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Navegação dentro de um documento

• Desde a versão CS4, o Illustrator possui a capacidade de trabalhar com múltiplas páginas. As principais ferramentas para navegar entre as diferentes páginas do documento são a zoom e a hand tool.

• Outra maneira de gerir diferentes páginas num documento é através do novo painel Artbords, que permite acrescentar, remover e definir o foco de uma página.

Sexta-feira, 2 de Março de 12

Page 13: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Réguas e guias

• Tal como acontece no Freehand, é possível usar réguas para auxílio no uso da aplicação: View -> Rulers -> Show Rulers.

• Cada página possui a sua própria régua, sendo o ponto zero definido no canto superior esquerdo de cada página.

• É, no entanto, possível usar as medidas da mesma régua para TODAS as páginas da aplicação: View -> Rulers -> Change to Global Rulers.

Sexta-feira, 2 de Março de 12

Page 14: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

• Também no Illustrator é possível criar guias a partir das réguas;• Ao contrário do Freehand, as guias comportam-se quase como se fossem objectos

vectoriais – é possivel rodá-las, apagá-las ou mudar a layer em que se encontram;• É possível transformar um qualquer objecto numa guia: View –> Guide –> Make Guide;• Uma guia criada normalmente ocupa toda a área de trabalho do Illustrator; mas se a guia

for criada no modo de edição de página, a guia resultante apenas existirá nessa página.

Sexta-feira, 2 de Março de 12

Page 15: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Grelhas

• Para além das guias, é possível usar grelhas para alinhamento do trabalho: View –> Show Grid;

• As propriedades da grelha são definidas no painel de Preferências da aplicação;• Para além da cor, medidas e subdivisões da grelha, é também possível definir se a grelha

fica por cima ou por baixo dos objectos (Grids in Back).

Sexta-feira, 2 de Março de 12

Page 16: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Smart Guides

• Smart Guides são guias que surgem automaticamente quando se realizam algumas acções sobre a área de trabalho;

• São particularmente úteis no alinhamento de objectos, na medida em que conseguem identificar automaticamente os extremos e os centros dos mesmos.

• As smart guides também indicam medidas e destacam objectos seleccionáveis.• É possível definir quais os componentes das smart guides activos a partir do painel de

Preferências da aplicação.

Sexta-feira, 2 de Março de 12

Page 17: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Modos de visualização (menu View)

• Preview – modo de visualização normal;• Outiline – apenas são visíveis os contornos dos objectos (corresponde ao modo Keyline

do Freehand);• Pixel preview – permite visualizar gráficos vectoriais como se estivessem rasterizados

(adequado para a criação de conteúdos para a web);• Overprint preview – permite simular em ecrã efeitos de impressão em overprint.

Sexta-feira, 2 de Março de 12

Page 18: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

3.ª parte

Técnicas de selecção

Sexta-feira, 2 de Março de 12

Page 19: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Ferramentas de selecção

• As ferramentas de selecção do Illustrator são, normalmente, as ferramentas mais usadas na aplicação, encontrando-se em lugar de destaque no lado direito do interface. Elas são:

• 1. Selection tool; • 2. Direct selection tool;• 3. Group selection tool

(seleccionável carregando continuamente sobre a direct selection tool).

1 2 3

Sexta-feira, 2 de Março de 12

Page 20: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

• A ferramenta de selecção normal selecciona unicamente objectos inteiros ou grupos inteiros, caso o objecto seleccionado esteja agrupado (ficheiro Seleccoes.ai)

Sexta-feira, 2 de Março de 12

Page 21: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

• A ferramenta de selecção directa selecciona somente um único objecto, independentemente da forma como esteja agrupado, ou âncoras individuais dentro de um objecto.

Sexta-feira, 2 de Março de 12

Page 22: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

• A ferramenta de selecção de grupo selecciona sequencialmente grupos, desde o objecto isolado até ao grupo que contém todos os objectos do qual o objecto seleccionado faz parte.

1 2

3 4

Sexta-feira, 2 de Março de 12

Page 23: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

• A ferramenta de selecção normal também pode ser usada de forma inversa à ferramenta de selecção de grupo: ao fazer-se duplo-clique sobre um grupo, este é progressivamente subdividido até se chegar ao objecto individual (à semelhança do que acontece com o Adobe Flash).

1 2

3 4

Sexta-feira, 2 de Março de 12

Page 24: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

• Para sair do modo de selecção de grupo, basta fazer duplo-clique numa zona em branco do ambiente de trabalho.

• Em conjunto com as ferramentas referidas, é possível usar a tecla de Alt para alterar a ferramenta seleccionada, e a tecla de Shift para adicionar/remover objectos da selecção.

Sexta-feira, 2 de Março de 12

Page 25: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Magic wand

• Outro tipo de ferramenta de selecção no Illustrator é a magic wand (varinha mágica) . Tal como acontece no Photoshop, a magic wand selecciona objectos por similaritude de cor.

• Ao fazer duplo-clique sobre o ícone da ferramenta, é possível definir a tolerância da selecção.

Sexta-feira, 2 de Março de 12

Page 26: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Seleccionar através de regras

• É possível realizar selecções usando como base os atributos de um objecto seleccionado;

• Usando o botão Select Similar Objects da barra contextual, é possível seleccionar objectos que tenham a mesma cor de contorno, preenchimento, espessura, opacidade ou aparência.

Sexta-feira, 2 de Março de 12

Page 27: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Seleccionar por detrás de objectos

• Ocasionalmente poderá surgir a necessidade de se seleccionar um objecto que esteja escondido por detrás de outro objecto;

• O Illustrator oferece um método próprio para realizar esse tipo de selecção:• 1. seleccionar o objecto que se encontra por cima do objecto pretendido com a

ferramenta de selecção normal;• 2. seleccionar novamente o mesmo objecto premindo a tecla Control (PC) ou

Command (Mac); o objecto por detrás será seleccionado.

Sexta-feira, 2 de Março de 12

Page 28: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

4.ª parte

Criação e edição de vectores

Sexta-feira, 2 de Março de 12

Page 29: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Criação de polígonos

• As várias ferramentas de criação de polígonos do Illustrator são influenciadas por um conjunto de atalhos, que só se encontra disponível durante o processo de criação do objecto (i.e. deixam de ser aplicáveis depois de se largar o rato. Alguns destes atalhos são semelhantes aos usados no Freehand. Estes são:

• Shift + rato: os objectos são criados sempre com proporções uniformes;• Alt + rato: os objectos são criados a partir do centro;• Espaço + rato: os objectos são movidos durante a criação;• clique simples do rato (sem arrastar): os objectos são criados através das

propriedades de uma caixa de diálogo;

Sexta-feira, 2 de Março de 12

Page 30: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

• Para além das figuras geométricas básicas (rectângulos e elipses), que usam apenas os atalhos atrás referidos, existem outras figuras com opções adicionais:

• para o rectângulo boleado:• setas cima/baixo + rato: mudar raio dos cantos do rectângulo;

• para a ferramenta de polígonos facetados:• setas cima/baixo + rato: muda o número de lados do polígono;

• para a ferramenta de estrelas:• setas cima/baixo + rato: muda o número de pontas da estrela;• alt + rato: alinha os “ombros” da estrela;• command + rato: altera a diferença entre os pontos interiores e exteriores da

estrela.

Sexta-feira, 2 de Março de 12

Page 31: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Criação de objectos abertos• Os atalhos de teclado referidos anteriormente (Shift, Alt, Command, teclas de cursor)

também se aplicam a estes objectos, com uma lógica de funcionamento semelhante. Em alguns deles, no entanto, aplicam-se ainda atalhos adicionais:• para a ferramenta de arco:

• x + rato: alterna entre arco côncavo e convexo;• c + rato: alterna entre arco aberto e fechado;

• para a ferramenta de espiral:• command + rato: altera a abertura da espiral

• para a ferramenta de grelha rectangular e polar:• f, v, x, c + rato: altera a proporção entre colunas horizontais e verticais

• (Exercício 1)

Sexta-feira, 2 de Março de 12

Page 32: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Pen tool

• A pen tool (caneta) é a ferramenta principal de desenho vectorial do Illustrator. Possui um comportamento semelhante à pen tool do Freehand, sendo que, tal como este, permite o desenho de formas vectoriais através da manipulação de âncoras e pontos de controlo.

• A pen tool permite a criação tanto de segmentos rectos como curvos, através do uso de diferentes tipos de âncoras (smooth e corner).

Sexta-feira, 2 de Março de 12

Page 33: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

• com a pen tool seleccionada:• clique simples: é criada uma âncora recta;• clique com arrasto: é criada uma âncora curva, com pontos de controlo;• clique + Shift: são criados segmentos ou pontos de controlo com ângulos em 45º;• clique + Alt: os 2 pontos de controlo associados a uma âncora deixam de estar

alinhados – útil quando se quer introduzir uma quebra numa linha curva;• clique + espaço: a âncora é movida.

• (Pen_tool.ai)

Sexta-feira, 2 de Março de 12

Page 34: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Pencil tool

• A pencil tool (lápis) permite desenhar as formas pretendidas à mão livre, sendo as âncoras e pontos de controle adicionados automaticamente; é equivalente à ferramenta freehand do Freehand.

• Ao contrário deste, a pen tool do Illustrator permite correcções automáticas à linha recém-desenhada, bastando para isso desenhar novamente por cima.

• Para alterar os parâmetros com que é feita essa correcção automática – duplo-clique sobre o ícone da feramenta.

Sexta-feira, 2 de Março de 12

Page 35: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Smooth e path eraser

• As ferramentas smooth e path eraser são concebidas para trabalhar em conjunto com a pencil tool, embora funcionem em qualquer objecto;

• A smooth tool permite suavizar linhas já existentes;

• a path eraser tool permite desenhra zonas de corte em paths (não confundir com a ferramenta eraser).

Sexta-feira, 2 de Março de 12

Page 36: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Editar vectores

• As ferramentas do Illustrator para edição de vectores encontram-se no botão da pen tool. Para além da pen tool, estas são:

• Add anchor point tool: permite adicionar pontos a um path;

• Delete anchor point tool: remove pontos de um path;

• Convert anchor point tool: permite converter de uma âncora smooth para corner, e vice-versa.

Sexta-feira, 2 de Março de 12

Page 37: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Juntar paths

• O Illustrator possui dois comandos para juntar âncoras que se encontram separadas: join e average (Object -> Path -> Join/Average):

• Join: cria uma linha recta entre duas âncoras separadas;• Average: este comando liga âncoras alterando a sua posição, ao invés de criar um

segmento entre elas, sendo essa posição uma zona média entre as posições originais das âncoras.

• (Exercício 2)

Sexta-feira, 2 de Março de 12

Page 38: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Offset path

• O comando offset path permite aumentar ou diminuir de forma equidistante as margens de um objecto. É acessível em Object -> Path -> Offset Path.

Sexta-feira, 2 de Março de 12

Page 39: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Compound paths e compound shapes

• O conceito de compound path é comum ao Freehand, e refere-se ao facto de vários paths poderem ser encarados pela aplicação como se fossem um único objecto. É uma situação que acontece vulgarmente com representações vectoriais de letras (a letra O, por exemplo, é um objecto com 2 paths, sendo que um deles representa o contorno da letra e o outro a forma interior.

• Uma das formas de criar compound paths é com o painel Pathfinders.

Sexta-feira, 2 de Março de 12

Page 40: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

• No entanto, o Illustrator possui outro tipo de objecto – compound shape – que são objectos aparentemente fundidos (como se criados através de uma operação booleana normal) mas que invisivelmente mantém as suas formas originais;

• Para criar um compound shape, utiliza-se também o painel de Pathfinder, mas selecciona-se a opção pretendida com a tecla Alt.

• Para transformar um compound shape num objecto regular, pode-se usar o botão Expand do painel Pathfinder.

Sexta-feira, 2 de Março de 12

Page 41: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Shape Builder

• A finalidade da ferramenta Shape Builder é semelhante à do Pathfinder; a diferença principal é o seu modo de operação ser mais directo. Com o Shape Builder, é possível seleccionar directamente quais as parte de um desenho a unir, ou a remover, usando a tecla Alt.

Sexta-feira, 2 de Março de 12

Page 42: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Blob Brush Tool e Eraser

• Quem já tiver desenhado com o software Flash, imediatamente encontrará semelhanças com a ferramenta Blob Brush. Esta ferramenta permite desenhar formas vectoriais naturalmente (ignorando âncoras e pontos de controlo):• Ao criar-se diferentes formas com a mesma cor, estas são

automaticamente unidas;• Ao criar-se formas com cores distintas, estas são mantidas separadas

do desenho existente.• A ferramenta Eraser possui a funcionalidade inversa: apaga formas sem ser

necessário considerar a localização das suas âncoras ou pontos de controlo.• Ambas as ferramentas funcionam particularmente bem com mesas

digitalizadoras.• (Exercício 3)

Sexta-feira, 2 de Março de 12

Page 43: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

5.ª parte

Live Paint

Sexta-feira, 2 de Março de 12

Page 44: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Live Paint

• Live Paint é uma ferramenta que foi desenvolvida no Illustrator com a intenção de permitir a aplicação de cor e textura sobre objectos de uma forma mais natural e menos matemática;

• Na generalidade dos programas de edição vectorial, um objecto é constituído apenas por um contorno e um preenchimento; a adição de outro tipo de preenchimento/contorno a apenas uma parte de uma forma obriga necessariamente à criação de um novo objecto;

• Com o Live Paint, é possível pintar formas que estão fechadas apenas visualmente, evitando-se todo o trabalho entediante de criação e aplicação de objectos adicionais.

Sexta-feira, 2 de Março de 12

Page 45: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

• Criar um grupo Live Paint: clique com a Live Paint Bucket tool num conjunto de objectos sobrepostos; esses objectos passam a poder ser pintados visualmente;

• Aplicar um preenchimento num objecto Live Paint: escolher a cor pretendida e clicar no local a pintar com o Live Paint Bucket tool;

• Aplicar um contorno num objecto Live Paint: escolher a cor pretendida e clicar no local a pintar com o Live Paint Bucket tool + a tecla de Shift;

• Adicionar/remover objectos de um grupo Live Paint: Usar o Isolation Mode (duplo-clique);

• Retornar o grupo Live Paint ao estado inicial: Object -> Live Paint -> Release;• Transformar o grupo Live Paint em vectores individuais: Object -> Live Paint -> Expand.

Sexta-feira, 2 de Março de 12

Page 46: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Gap Detection

• Incluído no Live Paint encontra-se a funcionalidade do Gap Detection. Com o Gap Detection, é possível pintar formas com o Live Paint que não se encontrem completamente fechadas visualmente, o que facilita em grande medida a coloração de formas criadas à mão livre;

• Para alterar as opções de Gap Detection: Object -> Live Paint -> Gap Detection.• (Exercício 4)

Sexta-feira, 2 de Março de 12

Page 47: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

6.ª parte

Manipulação de texto

Sexta-feira, 2 de Março de 12

Page 48: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Point text e Area text

• Os 2 tipos maios vulgares de objectos de texto no Illustrator são o Point Text e Area Text:• Point Text corresponde a caixas de texto de contornos não definidos, sendo o seu

tamanho definido unicamente pela quantidade de texto existente. São usadas em situações de texto pontuais (labels de botões, por ex.)

• Area text são caixas de texto de tamanho definido e que podem ser usadas para criar layouts baseados em texto. Possuem ainda opções adicionais para divisão e fluxo do texto.

Sexta-feira, 2 de Março de 12

Page 49: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

• clique simples: cria uma caixa de Point Text;• clique com arrasto: cria uma caixa de Area Text.• clique no contorno de um objecto fechado: cria uma caixa de Area Text com a forma

do objecto.• clique no contorno de um objecto fechado: o texto contorna o objecto.• Type -> Area Type Options...: opções da caixa de texto.

Sexta-feira, 2 de Março de 12

Page 50: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Character, Paragraph e Open Type

• O Illustrator partilha muitas das suas capacidades de tratamento de texto com o InDesign, sendo como tal dotado de opções sofisticadas tais como controlo sobre leading e kerning, sub e superscript, controlo de anti-aliasing, hifenização, controlo de justificação, e suporte a funcionalidades OpenType.

• As opções são acessíveis através do menu Window -> Type.

• (Exercício 5)

Sexta-feira, 2 de Março de 12

Page 51: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

7.ª parte

Appearances e efeitos

Sexta-feira, 2 de Março de 12

Page 52: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Appearances

• Como acontece em quase todos os programas de desenho vectorial, os objectos vectoriais representados pelo Illustrator são constituídos por um contorno (stroke) e um preenchimento (fill).

• O Illustrator é dotado um controlo sofisticado destas propriedades através do painel Appearances, que permite a adição/remoção e alteração de diferentes estilos de contornos e preenchimentos, bem como a aplicação de uma grande variedade de efeitos especiais.

Sexta-feira, 2 de Março de 12

Page 53: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

• Um objecto com appearance básica é constituído por um único contorno e um único preenchimento; através do painel Appearances, é possível acrescentar novos contornos e/ou preenchimentos, sendo o aspecto final da ficgura definido pela sua combinação de posições, transparências e blending modes.

Sexta-feira, 2 de Março de 12

Page 54: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Live effects

• Além dos contornos e dos preenchimentos, existe um outro tipo de propriedade editável através do painel das Appearances: os Live Effects.

• Live Effects são uma enorma variedade de efeitos aplicáveis nos objectos do Illustrator, que vão desde 3D a filtros do Photoshop, passando por sombras e arredondamentos automáticos de cantos.

• Uma característica comum a todos estes efeitos é a de que são editáveis e não-destrutivos: é possível alterar e substituir o efeito depois de aplicado.

Sexta-feira, 2 de Março de 12

Page 55: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

• A organização dos efeitos é um bocado caótica, e o seu grau de utilidade varia muito, pelo que é conveniente perder-se algum tempo para se perceber o que cada um faz.

Sexta-feira, 2 de Março de 12

Page 56: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

• Usando o comando Expand Appearance, é possível subdividir uma appearance complexa em múltiplos objectos com appearances simples, o que os torna mais compatíveis com outras aplicações.

Sexta-feira, 2 de Março de 12

Page 57: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Graphic Styles

• O painel Graphic Styles permite gravar e reutilizar combinações de aparências em novos objectos. Também permite a edição de estilos gráficos já aplicados.

Sexta-feira, 2 de Março de 12

Page 58: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

• arraste de objecto para o painel de Graphic Styles: é criada um graphic style novo;

• clique num Graphic Style: o graphic style é aplicado a um objecto seleccionado;• clique em Redefine Graphic Style: todos os objectos com com o mesmo graphic

style são alterados.• (coca-cola.ai)

Sexta-feira, 2 de Março de 12

Page 59: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

8.ª parte

Escolha e aplicação de cor

Sexta-feira, 2 de Março de 12

Page 60: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Aplicar cor

• Alternativas para a aplicação de cores de preenchimento e contorno no Illustrator.

Sexta-feira, 2 de Março de 12

Page 61: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Color Swatches

• O painel Swatches é o local onde o Illustrator armazena as cores disponíveis para uso num documento.

• Pode-se criar uma cor nova clicando no botão New Swatch, e de seguida definindo o tipo de cor (process ou spot) ou se é global.

Sexta-feira, 2 de Março de 12

Page 62: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

• Uma cor não-global é uma cor na qual não existe relação entre o swatch e objectos sob os quais a cor esteja aplicada;

• Uma cor global é uma cor onde existe uma relação entre o swatch e os objectos onde essa cor é aplicada: se o swatch mudar a cor, todos os objectos com essa cor também mudam

Cor Global

Cor Não-Global

Sexta-feira, 2 de Março de 12

Page 63: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Spot Colors

• Na caixa de diálogo de criação de nova cor, outra opção disponível é criar uma cor como uma Spot Color (cor directa):• No painel Swatches, a Spot Color é

representada com um ponto junto do swatch correspondente;

• No painel Color, passa a existir a opção de definir a cor através de um tint;

• No botão Swatch Libraries Menu é possível aceder uma grande pré-selecção de cores directas (e não só), entre as quais as que são parte do sistema de cores Pantone.

Sexta-feira, 2 de Março de 12

Page 64: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Pastas de cores

• É possível usar pastas para uma melhor organização dos vários swatches de cor que constituem um trabalho:• Clique no botão “New Color Group” é criada uma pasta vazia para colocação de

cores;• Clique no botão “New Color Group” com um objecto seleccionado: surge

uma caixa de diálogo para a criação de uma pasta de cores com as cores seleccionadas com o objecto; este método tem a vantagem adicional de permitir a criação de cores globais a partir das cores existentes nos objectos.

Sexta-feira, 2 de Março de 12

Page 65: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Color Guides

• Através do painel Color Guides, o Illustrator disponibiliza uma série de opções para criação de harmonias de cores:

• A partor de uma cor base, são geradas no painel conjuntos de cores correspondentes a harmonias definidas pelo utilizador (complementar, análogas, etc.)

• Em cada uma dessas cores são ainda exibidas variações tonais (mais claro a mais escuro, mais intenso a mais acizentado, etc.)

• As cores obtidas podem depois ser armazenadas como swatches.

• (Exercício 6)

Cor de base

Sexta-feira, 2 de Março de 12

Page 66: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

9.ª parte

Contornos e preenchimentos

Sexta-feira, 2 de Março de 12

Page 67: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Gradients

• Para o Illustrator existem apenas 2 tipos de gradientes: linear e radial;• A aplicação do gradiente num objecto pode ser feita através do painel Gradient, que

permite também a definição do n.º de cores integradas no gradiente, distribuição e ângulo, de forma semelhante à que acontece no Freehand.

• Usando a Gradient Tool na barrade ferramentas, é possível editar as mesmas opções do painel Gradient de uma forma mais visual.

Sexta-feira, 2 de Março de 12

Page 68: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Patterns

• Para além das cores sólidas e gradientes, existe um terceiro tipo de preenchimento: os patterns (padrões);

• Um pattern é aplicado como de uma cor normal se tratasse: basta clicar no swatch respectivo no painel Swatches;

• O Illustrator oferece também algumas funções para edição de patterns:• arrastar objecto para o painel Swatches: é

automaticamente criado um padrão;• arrastar swatch com padrão para o ambiente de

trabalho: o padrão fica editável.• De notar que quando se edita um padrão, este é sempre limitado

por um rectângulo invisível; esse rectângulo é que define a área de repetição do padrão.

Sexta-feira, 2 de Março de 12

Page 69: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Strokes

• Os strokes (contornos) possuem uma funcionalidade e opções bastante semelhantes àquelas que estão disponíveis no Freehand; essas opções podem se acedidas no painel Strokes. Existem, no entanto, algumas diefrenças:• É possível definir se o contorno

também fica por fora (ou por dentro) do vector que o define, e não só no meio;

• Os contornos tracejados têm de ser definidos numericamente.

Sexta-feira, 2 de Março de 12

Page 70: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Variable stroke width

• Uma poderosa funcionalidade introduzida no Illustrator CS5 é a capacidade de se criarem contornos com largura variável (variable witdh profile).

• Através da ferramenta Width, é possível definir manualmente a espessura de qualquer ponto arbitrário ao longo de um contorno.

• O perfil criado pode ainda ser guardado no painel Strokes para futura reutilização.

• (Exercício 7)

Sexta-feira, 2 de Março de 12

Page 71: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

10.ª parte

Desenho expressivo

Sexta-feira, 2 de Março de 12

Page 72: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Desenho expressivo

• O Illustrator possui uma série de funcionalidades para controlo da expressividade do traço; essas funcionalidades podem ser aplicadas com o rato, mas o seu real benefício torna-se mais evidente através do uso de uma mesa digitalizadora que permita o controlo directo da espessura (e em alguns modelos, inclinação) do traço.

• Os modelos de mesas digitalizadoras mais usadas pertencem à marca Wacom.

Sexta-feira, 2 de Março de 12

Page 73: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

• Traço feito com mesa digitalizadora (usando um brush 6D Art Pen):

• Traço feito com rato (brush 6D Art Pen):

Sexta-feira, 2 de Março de 12

Page 74: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Calligraphic brushes

• Um dos cinco tipos de ferramentas de desenho expressivo existentes no Illustrator são os pincéis caligráficos (calligraphic brushes);

• O pincel caligráfico funciona de forma semelhante à pen tool; a principal diferença reside nas opções disponíveis para a variação do traço;

• Para se aceder ao pincel caligráfico:• Escolher a paintbrush tool na barra de

ferramentas;• Optar por uma das pré-definições no painel

Brushes.

Sexta-feira, 2 de Março de 12

Page 75: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

• É possível igualmente criar definições novas para o pincel caligráfico:• No painél Brushes, clicar em New Brush;• Escolher a opção Calligraphic Brush;• No painel seguinte é possível editar ângulo, forma, e

diâmetro da ponta do pincel.• É também possível, a cada um desses parâmetros, atribuir um

valor fixo, aleatório, ou controlado através da mesa digitalizadora (normalmente o valor controlado é o diâmetro, mas é possível controlar os outros atributos).

Sexta-feira, 2 de Março de 12

Page 76: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Scatter brushes

• O pincel de dispersão (scatter brush) permite a repetição de um objecto gráfico ao longo do percurso definido pelo pincel;

Sexta-feira, 2 de Março de 12

Page 77: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

• Para usar um objecto gráfico num pincel de dispersão:• Com o objecto gráfico pretendido

seleccionado, clicar em New Brush;• Escolher a opção Scatter Brush;• No painel seguinte é possível definir os

parâmetros de tamanho, espacejamento, dispersão, rotação e coloração dos objectos criados pelo pincel.

• Tal como acontece com o pincel caligráfico, é possível controlar parâmetros do pincel de dispersão com a mesa digitalizadora.

• É possível ainda definir, ou não, a rotação dos objectos em relação à própria direcção do traço criado pelo pincel.

Sexta-feira, 2 de Março de 12

Page 78: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Art brushes

• O pincel de arte (art brush) funciona através da acomodação de um objecto gráfico ao longo do movimento do pincel.

Sexta-feira, 2 de Março de 12

Page 79: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

• Para usar um objecto gráfico num pincel de arte:• Com o objecto gráfico

pretendido seleccionado, clicar em New Brush;

• Escolher a opção Art Brush;• No painel seguinte é possível

definir a forma como será feita a distorção do objecto gráfico ao longo do percurso do pincel.

Sexta-feira, 2 de Março de 12

Page 80: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Pattern brushes

• O pincel de padrão (pattern brush) permite a aplicação de cercaduras que se adaptam à forma de objectos gráficos sem distorção.

• É particularmente adequado à criação de molduras.

Sexta-feira, 2 de Março de 12

Page 81: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

• Independentemente do quanto a forma final é esticada, o padrão aplicado mantém as proporções.

Sexta-feira, 2 de Março de 12

Page 82: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

• Para editar um pincel de padrão:• Duplo-clique sobre um padrão

existente no painel Brushes.• O painel seguinte permite configurar

como se comporta cada elemento gráfico constituinte do padrão:1. gráfico a meio da forma;2. gráfico num canto exterior;3. gráfico num canto interior;4. gráfico no início de um path;5. gráfico no fim de um path.

• É possível ainda definir como o gráfico se adapta ao path em que é aplicado: esticando-se, adicionando-se espaço pelo meio, ou por aproximação.

1. 2. 3. 4. 5.

Sexta-feira, 2 de Março de 12

Page 83: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Bristle brushes

• O último tipo de pincel expressivo do Illustrator é o pincel de pêlo (bristle brush) cuja função é a de simular vectorialmente o traço criado pelos pincéis de pêlo reais.

Sexta-feira, 2 de Março de 12

Page 84: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

• Para criar um pincel de pêlo novo:• No painel Brushes, clicar em New Brush;• Escolher a opção Bristle Brush.

• No painel seguinte, é possível escolher o tipo de ponta de pincel, bem como a largura, tamanho do pêlo, densidade do pêlo, grossura do pêlo, opacidade da tinta e dureza do pincel.

Sexta-feira, 2 de Março de 12

Page 85: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

11.ª parte

Layers

Sexta-feira, 2 de Março de 12

Page 86: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Layers

• Devido à própria natureza do interface do Illustrator, saber o funcionamento as layers (camadas) torna-se fundamental para o uso da aplicação;

• O painel Layers contém uma representação hierárquica de todos os objectos existentes no documento, o que o pode tornar algo confuso; no entanto, é possível na maior parte dos casos ignorar os objectos existentes e concentrarmo-nos na organização das layers;

• Quando um conjunto de layers é definido, torna-se possível:• esconder/mostrar layers;• alterar a sua ordem;• alterar a sua forma de visualização (preview/outline);• trancar ou destrancar.

Layer (fundo cinzento)

Objecto (fundo branco)

Sexta-feira, 2 de Março de 12

Page 87: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

• Também é possível ver que objectos estão seleccionados e em que layer, através do pequeno indicado quadrado situado do lado esquerdo do painel Layers.

• Esse indicador tem outra função fundamental: ao arrastar esse indicador, é possível rapidamente reposicionar o objecto seleccionado noutra layer.

• (Exercício 8)

Sexta-feira, 2 de Março de 12

Page 88: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

12.ª parte

Páginas múltiplas

Sexta-feira, 2 de Março de 12

Page 89: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Páginas múltiplas

• Desde a versão CS4 que o Illustrator possui (finalmente) a capacidade de trabalhar com múltiplas artboards (páginas);

• As páginas de cada documento do Illustrator podem ser configuradas a partir do painel de criação de novo documento, no quel é possível definir:• n.º de páginas;• espaço entre páginas;• formato (padrão ou personalizado);• orientação;• bleed.

Sexta-feira, 2 de Março de 12

Page 90: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Páginas múltiplas

• Através da Artboard Tool é possível manipular as páginas do documento directamente no ambiente de trabalho. Esta ferramenta permite redimensionar, criar e mover páginas, bem como acrescentar opções de adicionais de página na barra contextual.

• Entre essas opções encontra-se o painel Artboard Options, com configurações adicionais de página (mostrar marcas centrais e laterais, guias e proporções para vídeo).

Sexta-feira, 2 de Março de 12

Page 91: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

• Ao contrário do que acontece no Freehand, o Illustrator não muda automaticamente a ordem das páginas de acordo com a sua posição no ambiente de trabalho; a página n.º 1 é sempre a primeira página a ter sido criada, a n.º 2 é a segunda a ter sido criada, etc., o que pode levar a confusão se alguma página for reposicionada com a Artboard tool.

• Desde o Illustrator CS5 que se encontra disponível o painel Artboards, no qual se pode proceder à reordenação das páginas através do arrasto para a posição pretendida.

• É também a partir deste painel que é possível aceder à caixa Rearrange Artboards, que realianha automaticamente as páginas de acordo com a ordem indicada no painel Artboards.

Sexta-feira, 2 de Março de 12

Page 92: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Copy/Paste em páginas múltiplas

• Embora o Illustrator não possua funcionalidade de página mestra, é possível reproduzir facilmente um mesmo objecto em múltiplas páginas;

• Após a cópia de um objecto:• Edit -> Paste in Place: cola na página seleccionada o objecto copiado, na mesma

posição em que se encontrava na página original.• Edit -> Paste on All Artboards: cola em todas as páginas do documento o objecto

copiado, na mesma posição em que se encontrava na página original.• (Exercício 9)

Sexta-feira, 2 de Março de 12

Page 93: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

13.ª parte

Técnicas de transformação

Sexta-feira, 2 de Março de 12

Page 94: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Ferramentas básicas de transformação

• O Illustrator possui 5 formas de transformação de um objecto: deslocação, redimensionamento, reflexão, rotação e inclinação. Todas estas formas são acessíveis a partir da toolbox e possuem modos de operação semelhantes.

• Todas estas ferramentas possuem propriedades adicionais, através de duplo-clique no respectivo botão da tollbox (i.e. para se escolher opções extras para a rotação, basta um duplo clique no botão de rotação).

rotaçãoreflexão

redimensionamentoinclinação

deslocação

Sexta-feira, 2 de Março de 12

Page 95: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

• As caixa de diálogo invocadas desta forma permitem a introdução de valores rigorosos para a transformação dos objectos seleccionados e a aplicação da transformação num objecto clonado (ao invés do objecto seleccionado).

• Estas caixas também possuem valor informativo, na medida em que estas surgem já preenchidas com os valores de transformação aplicados na vez anterior do seu uso.

Sexta-feira, 2 de Março de 12

Page 96: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

• Por último, estas caixas permitem ainda definir se a transformação dave afectar as texturas pertencentes ao objecto, bem como o seu contorno e estilos gráficos, ou não.

• Em alternativa, é possível transformar objectos através do painel Transform.

Sexta-feira, 2 de Março de 12

Page 97: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

• Obviamente, as ferramentas de transformação podem também ser directamente usadas a partir da toolbox, o que é particularmente útil quando a opção de bounding box (a caixa com pontos de controlo que aparece automaticamete quando se selecciona um objecto) se encontra desactivada.

• Este método possui ainda a vantagem de tornar possivel definir com um clique o eixo a partir do qual a transformação se processa.

eixo de transformação definido com a ferramenta de rotação

botão de rotação

Sexta-feira, 2 de Março de 12

Page 98: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Free transform tool

• Quando se trabalha com a opção de bounding box desactivada, os pontos de controle respectivos desaparecem, perdendo-se a capacidade de rodar e redimensionar instantaneamente o objecto seleccionado; a free transform tool permite restabelecer temporariamente esses pontos de controlo.

• Esta ferramenta possui, no entanto uma funcionalidade adicional; juntamente com a tecla Command, a Free Transform tool permite a alteração individual de cada ponto de controlo, distorcendo assim o objecto.

Sexta-feira, 2 de Março de 12

Page 99: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Replicar transformações

• Com o comando Object -> Transform -> Transform Again, é possível repetir indefenidamente a última transformação efectuada. Na imagem à direita, foi criada uma forma circular a partir da repetição continua da rotação de uma estrela (com o eixo de transformação fora da forma da estrela).

Sexta-feira, 2 de Março de 12

Page 100: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

• Outra forma de replicar transformações é através do comando Object -> Transform -> Transform Again. Com este comando, torna-se possível editar múltiplos objectos como se cada um deles estivesse a ser manipulado individualmente.

Sexta-feira, 2 de Março de 12

Page 101: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Alinhar

• As opções de alinhamento do Illustrator são semelhantes às do Freehand, sendo acessíveis através do painel Align.

• Para além da opção de alinhamento à selecção, ou na página, tal como acontece no Freehand, o Illustrator oferece uma 3.ª opção: Align to Key Object, o que permite que se defina um objecto-âncora, a partir do qual todos os outros são alinhados. Esse objecto-âncora aparece no ambiente de trabalho com um contorno azul mais visível, e é definido através de um clique de rato.

key object

Sexta-feira, 2 de Março de 12

Page 102: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

14.ª parte

Trabalhar com bitmaps

Sexta-feira, 2 de Março de 12

Page 103: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Links

• As imagens bitmap podem ser integradas no Illustrator de dois modos: linked (ligadas) ou embebbed (embebidas).

• (ficheiro Bitmap.png)

Sexta-feira, 2 de Março de 12

Page 104: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

• A forma como a imagem pode ser definida aquando da importação da imagem, ou posteriormente, através do painel Links.

• Um pormenor importante a lembrar é que, para o Illustrator, é fácil transformar uma imagem ligada numa imagem embebida mas o contrário não é verdade; se se perder o original da imagem que foi embebida, pode ser complicado recuperá-la.

Sexta-feira, 2 de Março de 12

Page 105: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Live trace

• Live trace é o nome da função de vectorização de imagem incluído no Illustrator. Tal como acontece com todas as ferramentas desta aplicação com o nome “live”, esta actua não-destrutivamente; ou seja, a imagem original mantêm-se intacta após a vectorização, a não ser que seja dada ordem em contrário.

Sexta-feira, 2 de Março de 12

Page 106: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

• Esta funcionalidade vem de origem com várias definições de imagem, desde a vectorização a preto-e-branco até a cor de alta fidelidade.

• Na definição “Tracing Options” é possível definir com detalhe como é feito o pré-processamento e vectorização da imagem

• Para definir permanentemente a vectorização: Object -> Expand;

• Para repôr o estado original da imagem: Object -> Live Paint -> Release.

pré-processamento da imagem

vectroização

Sexta-feira, 2 de Março de 12

Page 107: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

15.ª parte

Símbolos

Sexta-feira, 2 de Março de 12

Page 108: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Símbolos

• Símbolos são objectos gráficos reutilizáveis, armazenados no painel Symbols.• A cada representação de um símbolo no ambiente de trabalho do Illustrator dá-se o nome de

instância. Sempre que é criada uma nova instância, é mantida a ligação com o símbolo que lhe deu origem, i.e. quando se altera o símbolo original, todas as suas instâncias são alteradas da mesma forma.

Sexta-feira, 2 de Março de 12

Page 109: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

• arrastar objecto para dentro painel Symbols: cria um novo símbolo gráfico;• arrastar símbolo para fora do painel Symbols: cria uma nova instância do símbolo;• duplo-clique sobre instância: edita o símbolo correspondente no contexto em que se

encontra a instância;• duplo-clique sobre um símbolo no painel Symbols: edita o símbolo isoladamente.• botão Break Symbol Link: deixa de haver ligação entre a instância e o seu símbolo.

Sexta-feira, 2 de Março de 12

Page 110: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Symbol sprayer

• Uma forma curiosa de se usar símbolos no Illustrator é através da Symbol Sprayer Tool. Esta ferramenta permite inserir, e manipular, uma grande quantidade de instâncias simultaneamente.

• A ferramenta pode ser aplicada com 8 variações de funcionalidade para adição, reposicionamento, redimensionamento, rotação, recoloração alteração a transparência e do estilo gráfico das instâncias afectadas.

Sexta-feira, 2 de Março de 12

Page 111: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

16.ª parte

Máscaras

Sexta-feira, 2 de Março de 12

Page 112: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Máscaras

• No Illustrator não existe o conceito de Past Inside; a técnica de usar objectos para definir a área visível de outros objectos é fundamentalmente diferente;

• Para este programa aplica-se o conceito de máscara, que consiste num objecto invisível que indica a área visível dos objectos que se lhe encontram associados.

máscara objecto

Sexta-feira, 2 de Março de 12

Page 113: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

• Para uso em imagens bitmaps, o Illustrator possui uma função de máscara automática, que é criada quando se clica no botão Mask da barra contextual;

• A partir desse momento, quando se move os pontos de controlo da bounding box, é a máscara, e não a imagem, que é manipulada;

Sexta-feira, 2 de Março de 12

Page 114: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

• Para uso em qualquer outro tipo de objecto, a aplicação da máscara tem de obedecer aos seguintes passos:• seleccionar pelo menos 2 objectos – o objecto a tapar e o objecto que servirá de

máscara – sendo que a máscara será o objecto que se encontra no topo;• Clicar em Object -> Clipping Mask -> Make.

• Para editar um objecto dentro da máscara:• Os botões Edit Contents e Edit Clipping Mask alternam entre edição da imagem e da

máscara.

• Em alternativa, basta entrar no Isolation Mode (duplo clique sobre o objecto) e realizar as alterações pretendidas

Sexta-feira, 2 de Março de 12

Page 115: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Layer clipping mask

• Em determinadas ocasiões é útil a possibilidade de se poder activar ou desactivar uma máscara que afecte todos os objectos de uma layer (por ex., para ver como fica um cartaz com e sem margem de bleeding);

• O comando Make/Release Clipping Mask, do painel Layers, permite alternar rapidamente a visibilidade de uma máscara de layer, sendo que o objecto utilizado como máscara se situa sempre no nível mais acima dessa layer.

Sexta-feira, 2 de Março de 12

Page 116: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Opacity mask

• O Illustrator possui um tipo completamente distinto de máscara – opacity mask – com a qual se torna possível a aplicação de formas difusas (tal como se tratasse de um canal alpha);

• Esta funcionalidade encontra-se na opção Make Opacity Mask, “escondida” dentro do painel Transparency.

• Para alterar entre o modo de edição de objecto e da máscara, clicar no respectivo thumbnail no painel Transparency.

• (Exercício 10)

Sexta-feira, 2 de Março de 12

Page 117: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

17.ª parte

Perspectivas

Sexta-feira, 2 de Março de 12

Page 118: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Perspective grid

• A perspective grid é uma ferramenta poderosa de criação e de aplicação de objectos num espaço tridimensional. No Illustrator, a essa grelha pode ser definida com 1, 2 ou 3 pontos de fuga, sendo a sua linha de horizonte, de terra e medidas definíveis directamente no ambiente de trabalho

Sexta-feira, 2 de Março de 12

Page 119: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

• A partir do momento em que a grelha está activa, objectos de desenho que sejam aplicados no ambiente de trabalho serão automaticamente aplicados à vista activa da grelha, conforme definido no Active Plane Widget.

• Objectos que não sejam compatíveis com a grelha de perspectiva (texto, por exemplo), não podem ser criados na grelha mas podem ser posteriormente adicionados à grelha com a Perspective Selection Tool.

Sexta-feira, 2 de Março de 12

Page 120: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

• Quando um object não compatível é adicionado à grelha, continua editável através do Isolation Mode (duplo-clique).

• A Perspective Selection Tool permite igualmente mover e redimensionar os objectos ao longo da grelha;

• Por fim, esta ferramenta permite também alterar a grelha na qual o objecto seleccionado se encontra, através das seguintes teclas de atalho:

• 1 – grelha esquerda;• 2 – grelha direita;• 3 – grelha da terra;• 4 – sem grelha.

• (Exercício 11)

Sexta-feira, 2 de Março de 12

Page 121: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

18.ª parte

Gravação e exportação

Sexta-feira, 2 de Março de 12

Page 122: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Gravação em AI

• O Illustrator permite a gravação de dados editáveis em diferentes tipos de ficheiro: Illustrator AI, EPS e PDF;• Illustrator AI é o formato nativo, e que

garante a maior fidelidade no registo da informação.

• Ao criar-se ficheiro AI compatível com PDF, está-se essencialmente a inserir um duplicado do documento em PDF: o ficheiro fica mais pesado, mas mais compatível com outras aplicações.

Sexta-feira, 2 de Março de 12

Page 123: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Gravação em PDF

• A gravação como PDF dispões de uma grande variedade de opções. O Illustrator possui predefinições de gravação para diferentes tipos de uso:• Illustrator Default: o ficheiro é gravado com uma cópia integral dos dados nativos,

para reedição posterior;• High Quality Print: para impressão em impressoras e máquinas de provas:• PDF/X: o ficheiro é configurado para compatibilidade total com fluxos de impressão

profissionais;• Press Quality: para saída para pré-impressão;• Smallest File Size: para uso na Internet.

• A partir da caixa de diálogo de gravação para PDF, é possível criar um ficheiro pronto para impressão em gráfica, sem necessidade de criação e destilação de ficheiro PostScript.

Sexta-feira, 2 de Março de 12

Page 124: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Exportação

• O acto de exportar implica necessariamente a perda de algum tipo de informação, pelo que a escolha do formato de saída deve ser o adequado ao trabalho em questão.

• O Illustrator permite os seguintes formatos de exportação:• PNG; BMP; AutoCAD (dwg, dxf); EMF; SWF; JPEG; PICT; Photoshop PSD;

TIFF; Targa; TXT; WMF.• Se o objectivo da exportação for a continuação da edição da imagem em

Photoshop, ou animação em Flash, é conveniente que a exportação seja feita nos respectivos formatos, de forma a manterem-se características como layers e efeitos.

• (Exercício 12)

Sexta-feira, 2 de Março de 12

Page 125: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Recursos adicionais

Sexta-feira, 2 de Março de 12

Page 126: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Recursos oficiais

• Página oficial do Adobe Illustrator – http://www.adobe.com/products/illustrator/• Fórum oficial do Adobe Illustrator – http://forums.adobe.com/community/illustrator/

illustrator_general• Illustrator Exchange (para transferência de plugins, scripts e outros

complementos do Illustrator) – http://www.adobe.com/cfusion/exchange/index.cfm?event=productHome&exc=17&loc=en_us

• Illustrator no Facebook – http://www.facebook.com/AdobeIllustrator• Inside Adobe Illustrator (blog da equipa de desenvolvimento do Illustrator) – http://

blogs.adobe.com/infiniteresolution/• Twitter do Inside Adobe Illustrator – http://twitter.com/insideAI

Sexta-feira, 2 de Março de 12

Page 127: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

Outros recursos

• 80 Best-Of Adobe Illustrator Tutorials, Brushes, .EPSs and Resources – http://www.noupe.com/illustrator/80-best-of-adobe-illustrator-tutorials-brushes-epss-and-resources.html

• 30 Beautiful Illustrator Brush and Symbol Collection – http://www.1stwebdesigner.com/resources/30-beautiful-illustrator-brush-and-symbol-collection/

• Illustrator Tutorials – http://www.ndesign-studio.com/tutorials• Layers Magazine – http://www.layersmagazine.com/• Vectortuts – http://vector.tutsplus.com/• 50 Excellent 3D Adobe Illustrator Tutorials – http://www.smashingmagazine.com/

2009/06/16/50-excellent-3d-adobe-illustrator-tutorials/

Sexta-feira, 2 de Março de 12

Page 128: Introdução à imagem vectorial - Apontamentos TSI · representadas como uma grelha rectangular de pixels, ou pontos de cor. ... • Ainda assim, surgirá sempre uma caixa de diálogo

ObrigadoIvo Daniel

Sexta-feira, 2 de Março de 12