gradientes padrões máscaras e clipping efeitos e filtros Helder da Rocha

Tamanho: px
Começar a partir da página:

Download "gradientes padrões máscaras e clipping efeitos e filtros Helder da Rocha (helder@argonavis.com.br)"

Transcrição

1 gradientes padrões máscaras e clipping efeitos e filtros Helder da Rocha

2 Gradientes e Padrões Com SVG você pode pintar o interior (fill) ou o traço (stroke) de figuras e texto usando Cores opacas ou transparentes Gradientes (degradê) Padrões (imagens repe=das) Gradientes e padrões são definidos (em <defs>) e iden=ficados com id para que possam ser referenciados Objetos podem usar gradientes e padrões como =nta para preencher traços e interior dos objetos Use atributo fill ou stroke com função url(#xpointer) <rect fill="url(#id_gradiente)"... > <circle stroke="url(#id_padrao)"..> h7p://www.w3.org/tr/svg/pservers.html 2

3 Gradientes Gradientes são variações suaves de duas ou mais cores Há dois =pos de gradientes Lineares <lineargradient> que representa uma linha, e tem coordenadas x1/x2 e y1/y2 Radiais <radialgradient> que representa um círculo e tem coordenadas cx, cy e r Os valores são rela=vos (percentagens ou valores entre zero e um) ao gráfico que será pintado com o gradiente 0% a 100%, 0.0 a 1.0 Pontos de parada iniciais, finais e intermediários são marcados com um tag <stop> Atributo offset marca posição na linha Cada <stop> pode definir uma cor (atributo stop color) e/ou transparência (stop opacity) para o ponto Cores intermediárias são calculadas por interpolação 0% 25% 50% 75% 100% Transparência

4 Exemplos de gradientes <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600"> <defs> <lineargradient id="linear1" x1="0" y1="0%" x2="100%" y2="0"> <stop offset="0%" stop color="black" stop opacity="0.5" /> <stop offset="45%" stop color="rgb(225,225,255)" stop opacity="0.8"/> <stop offset="55%" stop color="rgb(225,225,255)" stop opacity="0.8"/> <stop offset="100%" stop color="black" stop opacity="0.5" /> </lineargradient> <radialgradient id="radial1" cx="75%" cy="25%" r="90%"> <stop offset="0.01%" stop color="rgb(225,225,255)" /> <stop offset="90%" stop color="navy" /> <stop offset="100%" stop color="black" /> </radialgradient> </defs> <circle r="100" cx="400" cy="300" fill="url(#radial1)"/> <circle r="30" cx="250" cy="200" fill="url(#radial1)"/> <rect x="50" y="55" height="170" width="60" fill="url(#radial1)" /> <rect x="50" y="50" height="180" width="60" fill="url(#linear1)" /> </svg> 4

5 Gradiente linear O gradiente linear é uma linha Gradiente ver=cal: x1 = x2 = 0, y1=0, y2=1 Gradiente horizontal: y1 = y2 = 0, x1=0, x2=1 Ou varie os valores para produzir offsets e inclinação <lineargradient x1="0" y1="0.1" x2="0.9" y2="0" id="arcoiris"> <stop offset="0" stop color="rgb(255,0,0)" /> <stop offset="0.3" stop color="rgb(180,180,0)" /> <stop offset="0.6" stop color="rgb(0,180,0)" /> <stop offset="0.8" stop color="blue" /> <stop offset="1" stop color="rgb(128,0,220)" /> </lineargradient> Para coordenadas x,y use proporção (0.0 a 1.0 ou 0% a 100%) O gradiente é pintado ao longo do vetor perpendicular (normal) ao vetor do gradiente y1 10% vetor normal offset x2 90% 5

6 Gradiente radial Gradientes radiais são círculos r, cx e cy são frações do espaço do gráfico cx 0.5, cy 0.5 e r 0.5 = gradiente no centro, com círculo inscrito Elementos <stop> marcam pontos no raio (0% = origem, 100% = borda) <svg... > <defs> <radialgradient cx="0.5" cy="0.5" r="0.5" id="arcoiris"> <stop offset="0" stop color="rgb(255,0,0)" /> <stop offset="0.25" stop color="rgb(255,255,64)" /> <stop offset="0.5" stop color="rgb(64,255,64)" /> <stop offset="0.75" stop color="rgb(64,64,255)" /> <stop offset="1" stop color="rgb(128,0,255)" /> </radialgradient> <radialgradient cx="0.25" cy="0.25" r="1" id="sombra"> <stop offset="0" stop color="rgb(255,255,255)" /> <stop offset="0.5" stop color="rgb(0,128,255)" /> <stop offset="1" stop color="rgb(128,0,255)" /> </radialgradient> </defs> <rect x="0" y="0" width="200" height="200" fill="url(#arcoiris)".../> <circle cx="100" cy="100" r="100" fill="url(#arcoiris)".../> <rect x="0" y="0" width="200" height="200" fill="url(#sombra)".../> <circle cx="100" cy="100" r="100" fill="url(#sombra)".../> </svg> 6

7 Reuso de cores com gradientes Se um gradiente for definido com uma única cor, o efeito é igual a um fill Permite construir cores referenciáveis pelo nome Exemplo: <defs> <lineargradient id="corpretas"> <stop offset="0" stop color="rgb(64,32,32)" /> </lineargradient> <lineargradient id="corbrancas"> <stop offset="0" stop color="rgb(255,225,200)" /> </lineargradient> <rect id="rp" x="0" y="0" width="20" height="20" fill="url(#corpretas)"/> <rect id="rb" x="0" y="0" width="20" height="20" fill="url(#corbrancas)"/>... <g id="tabuleiro">...</g> <g id="peao">...</g> <g id="peaobranco" fill="url(#corbrancas)" stroke="url(#corpretas)">...</g> <g id="peaopreto" fill="url(#corpretas)" stroke="url(#corbrancas)">...</g> </defs> <use xlink:href="#tabuleiro" transform="translate(50,50)"></use> <use xlink:href="#peaobranco" transform="translate(125,110)"></use>... <use xlink:href="#peaopreto" transform="translate(245,230)"></use> 7

8 Padrões (azulejos) O elemento <pajern> replica um objeto gráfico para pintar ou contornar um objeto Para criar e usar Defina o elemento <pajern> em <defs> Referencie o para pintar um objeto <svg... xmlns="http://www.w3.org/2000/svg"> <defs> <pattern id="trianglepattern" patternunits="userspaceonuse" x="0" y="0" width="100" height="100" viewbox=" " > <path d="m 0 0 L 7 0 L z" fill="red" stroke="blue" /> </pattern> </defs> <! The ellipse is filled using a triangle pattern paint server and stroked with black > <ellipse fill="url(#trianglepattern)" stroke="black" stroke width="5" cx="400" cy="200" rx="350" ry="150" /> </svg> Fonte: W3C (spec SVG) 8

9 <pajern> e viewbox Coordenadas x, y, height e width: dimensões do padrão Atributo pajernunits="userspaceonuse" determina que as coordenadas usadas serão as do objeto que aplica o padrão Cada unidade de padrão ("azulejo") deve ter seus limites recortados dentro de um viewbox Isto não é obrigatório, mas é uma boa prá=ca Desenho de cada "azulejo" nas coordenadas do viewbox No exemplo abaixo, haverá clipping de 4x2 pixels da imagem <defs> <pattern id="peixes" patternunits="userspaceonuse" x="0" y="0" width="80" height="50" viewbox=" " > <image xlink:href="thefish.png" x="0" y="0" width="24" height="12" /> </pattern> </defs> <rect x="0" y="0" width="300" height="300" fill="url(#peixes)" /> 9

10 Máscaras Máscaras alfa são usadas em composição gráfica São definidas com o elemento <mask> e devem conter uma imagem fonte (formada por qualquer imagem, elemento gráfico ou combinação de elementos) A máscara pode ser reaplicada a vários elementos gráficos Exemplo: aplicação de máscara simples (criada no PhotoShop) para remover o fundo de uma imagem <defs> <mask id="mascarapeixe" x="0" y="0" width="300" height="150"> <image xlink:href="thefishmask.png"... /> </mask> </defs> <rect x="0" y="0" width="600" height="300" fill="aquamarine" /> <g transform="translate(100,50)"> <image xlink:href="thefish.png" mask="url(#mascarapeixe)" /> </g> TheFishMask.png (fonte da máscara) TheFish.png Resultado 10

11 Como funciona uma máscara A máscara é formada por pixels de transparência (alfa) que são mul=plicados pelo valor dos pixels do objeto alvo da máscara Se a fonte da máscara for uma imagem colorida RGB (24 bits), o valor alfa de cada pixel é sua luminância, ob=da pela fórmula* Luminância = R G B Se for imagem monocromá=ca (tons de cinza), o valor alfa corresponde ao nível de cinza (preto = 0) Se a imagem for de 32 bits (RGBA), o fator alfa de cada pixel da fonte é mul=plicado pela luminância para obter o alfa resultante 00f 00f fff fff f 00f fff fff f0 0f0 fff fff f0 0f0 fff fff Máscara RGBA Converte em alfa Resultado Alvo da máscara * segundo o padrão srgb, adotado pela especificação SVG 11

12 Máscara usando figuras SVG <defs> <polygon id="poligono" points="50,0 150,0 150,50 200,50 200, , ,200 50,200 50,150 0,150 0,50 50,50" fill="white" /> <rect id="retangulo" width="100" height="100" x="50" y="50" fill="red"/> <circle id="circulo" cx="100" cy="200" r="50" fill="green" /> <mask id="mascara" x="0" y="0" width="200" height="200" > <use xlink:href="#poligono"/> <use xlink:href="#retangulo"/> <use xlink:href="#circulo"/> </mask> </defs> <use xlink:href="#circulo" stroke="gray" stroke dasharray="5 5"/> <use xlink:href="#retangulo" stroke="gray" stroke dasharray="5 5"/> <use xlink:href="#poligono" stroke="gray" stroke dasharray="5 5"/> <text x="100" y="300" font size="24" text anchor="middle">mascara</text> <rect x="0" y="0" height="200" width="200" fill="blue" transform="translate(250,0)"/> <circle cx="100" cy="100" r="100" fill="red" transform="translate(250,250)" /> <rect x="0" y="0" height="200" width="200" fill="blue" mask="url(#mascara)" transform="translate(500,0)"/> <circle cx="100" cy="100" r="100" fill="red" mask="url(#mascara)" transform="translate(500,250)" /> 12

13 Máscaras de recorte (1 bit) Para isolar a imagem do peixe, foi usada uma máscara de recorte Cada pixel branco (#FFF) usa apenas dois valores alfa 0 = 100% transparente (exclui do resultado) 1 = 100% opaco (inclui no resultado) Ou cada pixel de alfa=1 usa apenas duas cores #000 = 100% preto opaco (exclui do resultado) #FFF = 100% branco opaco (inclui no resultado) Resultado Resultado desse =po de máscara equivale à aplicação de clipping Máscara RGBA Alvo da máscara Resultado 13

14 Atributos de <mask> x e y, height e width Coordenadas, altura e largura da máscara O resultado da aplicação da máscara leva em conta as coordenadas e dimensões Resultado será truncado se coordenadas e dimensões do objeto não couberem na máscara ou vice versa maskunits="userspaceonuse objectboundingbox" Default é objectboundingbox, que considera as coordenadas x, y, height e width percentagens do objeto no qual a máscara é aplicada userspaceonuse considera os considera valores do sistema de coordenadas usado quando a máscara é referenciada Veja mais em h7p://www.w3.org/tr/svg/masking.html 14

15 Recorte (clipping) Gráficos podem também podem ser recortados por um caminho definido pelo elemento <clippath> Funciona como máscara de 1 bit Áreas fora do clipping path não são desenhadas Caminho é combinação dos elementos usados na definição Qualquer objeto pode aplicar o recorte com o atributo clip path, que recebe uma função de xpointer url(#idref) para o <clippath> O atributo clip rule se aplicado a um elemento dentro do <clippath> comporta se como fill rule no resultado Funciona para polígonos, caminhos, etc. Exemplo de polígonos com fill rule fill rule="nonzero" fill rule="evenodd" 15

16 Exemplo de clipping com <clippath> <svg... viewbox=" "> <defs> <clippath id="poly"> <polygon points="50,50 300, ,50 100,50 50, , ,250" clip rule="evenodd" /> <circle r="50" cx="200" cy="300" clip rule="evenodd"/> </clippath> </defs> <image x="0" y="0" height="500" width="600" xlink:href="lua.png" clip path="url(#poly)" transform="translate(20,20)"/> </svg> 16

17 Filtros <filter> Filtros combinam algoritmos para compor efeitos gráficos Composições, desfoques, pontos de luz, mesclagens, etc. Podem ser aplicados em objetos diferentes Definidos com <filter> que configura e concatena um ou mais algoritmos primiyvos (cada um realiza uma operação) Há atributos e sub elementos próprios para cada primi=vo Detalhes na especificação: h7p://www.w3.org/tr/svg/filters.html Objetos referenciam o filtro com o atributo filter <rect... filter="url(#filtro)" /> Dimensões default x= 10, y= 10, height=120%, width=120% Geralmente se define um filtro com mais espaço pois efeitos podem vazar além dos limites do gráfico 17

18 Elementos de filtro do SVG 1.1 <feblend/> Combina duas imagens; atributos: mul=ply, screen, darken, etc. <fecolormatrix/> Define um filtro através de uma matriz de transformação de cores. <fecomponenttransfer/> Ajuste de brilho, contraste, balanceamento de cores, etc. <fecomposite/> Combina duas imagens usando algoritmos de composição <feconvolvematrix/> Aplica uma matriz de convolução para desfoque, embossing, etc. <fediffuseligh=ng/> Aplica um efeito de luz difusa em uma imagem usando o canal alfa. <fedisplacementmap/> Efeito realizado deslocando a imagem de lugar. <feflood/> Preenche uma área com cor e transparência determinados no filtro. 18

19 Elementos de filtro do SVG 1.1 <fegaussianblur/> Desfoca a imagem usando algoritmo gaussiano. <feimage/> Usa uma imagem externa como fonte para o filtro. <femerge/> Combina várias imagens externas para formar o filtro. <femorphology/> Usado para erodir ou dilatar o objeto no qual o filtro é aplicado. <feoffset/> Desloca a imagem em relação à sua posição atual. <fespecularligh=ng/> Aplica um efeito de luz brilhante em uma imagem usando o canal alfa. <fetile/> Define um filtro como um padrão de imagem repe=da. <feturbulence /> Cria efeito de nuvens ou mármore. 19

20 Exemplo: desfoque gaussiano <defs> <filter id="f2" x=" 100" y=" 100" height="200" width="200"> <fegaussianblur stddeviation="50,0" in="sourcegraphic"/> </filter> <filter id="f1"> <fegaussianblur stddeviation="5" /> </filter> </defs> <text id="text" font size="48" fill="blue" x="50" y="60" filter="url(#f1)"> Voce precisa de oculos? </text> <g id="stardot" transform="translate(100,50)"> <polygon id="star" points="250,0 400,500 0, , ,500" fill="red" fill rule="evenodd"/> <circle id="circ" cx="250" cy="283" r="75" fill="blue" filter="url(#f1)" /> </g> <image xlink:href="thefish.png" width="400" height="300" x="100" y="550" filter="url(#f2)" />

21 Entradas e resultados Componentes do gráfico fonte a ser filtrado* SourceGraphic o gráfico fonte completo SourceAlpha máscara simples do gráfico fonte A maior parte dos primi=vos de filtro recebem uma ou mais entradas (in) que podem ser Componente de gráfico fonte Resultado (result) do processamento de algum outro primi=vo Exemplo {pico de concatenação de algoritmos de filtro <fexxx in="sourcealpha"... result="passo1" /> <feyyy in="passo1"... result="passo2" /> <fezzz in="sourcegraphic" in2="passo2" operator="xor" result="passo3" /> Outras fontes que podem ser usadas como entrada BackgroundImage e BackgroundAlpha: o fundo da imagem FillPaint e StrokePaint: cor/padrão/gradiente de preenchimento ou traço * É possível também manipular o fundo com BackgroundImage e BackgroundAlpha 21

22 Filtro composto <svg... > <defs> <lineargradient... id="arcoiris">... </lineargradient> <filter id="efeito3d" x=" 300" y=" 300" height="500" width="500"> <! Brilho > <fegaussianblur in="sourcealpha" stddeviation="5" result="borrao" /> <feflood flood color="orange" flood opacity="1" result="laranja" /> <fecomposite in="laranja" in2="borrao" operator="in" result="brilho" /> <! Sombra > <feoffset in="borrao" dx="8" dy="8" result="sombra" /> <! Texto em 3D > <fespecularlighting in="borrao" surfacescale="5" specularconstant="1" specularexponent="15" lighting color="white" result="luzdifusa"> <fepointlight x=" 50" y=" 200" z="300"/> </fespecularlighting> <fecomposite in="luzdifusa" in2="sourcealpha" operator="in" result="luzdireta"/> <fecomposite in="sourcegraphic" in2="luzdireta" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="texto3d" /> <! Combinacao dos filtros > <femerge> <femergenode in="sombra"/> <femergenode in="brilho"/> <femergenode in="texto3d"/> </femerge> </filter> </defs> <g transform="translate(50,50) scale(2)"> <text id="text" font weight="bold" font family="impact" font size="150" fill="url(#arcoiris)" x="0" y="160" filter="url(#efeito3d)">svg</text></g> </svg> 22

23 Início SourceGraphic Filtro composto SourceAlpha in fecomposite result in fegaussian Blur result luzdifusa in2 fecomposite result in2 in luzdireta texto3d result fespecular Lighting in2 fecomposite in result brilho in in n n n in in result feflood femerge borrao laranja in feoffset result sombra efeito3d 23

24 Exercícios Explore outros algoritmos de filtro como feturbulence femerge feblend fediffuseligh=ng fecolormatrix Consulte a especificação em h7p://www.w3.org/tr/svg/filters.html Aplique os filtros em desenhos usados em exemplos e exercícios Explore os filtros variando atributos e parâmetros 24

modelo de apresentação estilos, cores e transparência traços e preenchimento Helder da Rocha

modelo de apresentação estilos, cores e transparência traços e preenchimento Helder da Rocha modelo de apresentação estilos, cores e transparência traços e preenchimento Helder da Rocha (helder@) Modelo de apresentação gráfica Objetos em SVG são desenhados em contextos gráficos individuais Grupos,

Leia mais

animação smil Helder da Rocha (helder@argonavis.com.br)

animação smil Helder da Rocha (helder@argonavis.com.br) animação smil Helder da Rocha (helder@) Animação em SVG com SMIL Mais simples que scrip.ng, porém menos suporte nos browsers Chrome, Opera, FF 4 em diante), IE 9.0 (suporte parcial) Elementos e atributos

Leia mais

texto efeitos de texto fontes Helder da Rocha (helder@argonavis.com.br)

texto efeitos de texto fontes Helder da Rocha (helder@argonavis.com.br) texto efeitos de texto fontes Helder da Rocha (helder@) Texto Pode ser desenhado com o elemento Atributos e sub- elementos permitem controle sobre muitos aspectos do texto e caracteres individuais

Leia mais

Textos com o Photoshop

Textos com o Photoshop Textos com o Photoshop Texto 1 Efeito Glow 1 Criar nova imagem em formato RGB 2 Aplicar cor ao fundo 3 Selecionar a ferramenta "Horizontal Type Mask Tool" e escrever o seu texto (usar no mínimo fonte tamanho

Leia mais

Workshop Processing: Visualização de Dados e Interatividade

Workshop Processing: Visualização de Dados e Interatividade Workshop Processing: Visualização de Dados e Interatividade Imagens Claudio Esperança Programa de Engenharia de Sistemas e Computação COPPE / UFRJ Escola de Belas Artes Claudio Esperança (PESC/COPPE/UFRJ)

Leia mais

coordenadas viewports e viewboxes clipping de viewports transformação de coordenadas Helder da Rocha

coordenadas viewports e viewboxes clipping de viewports transformação de coordenadas Helder da Rocha coordenadas viewports e viewboxes clipping de viewports transformação de coordenadas Helder da Rocha (helder@) Coordenadas e viewports A área onde o gráfico SVG é desenhado chama se SVG Viewport Contém

Leia mais

caminhos linhas, curvas e arcos Helder da Rocha

caminhos linhas, curvas e arcos Helder da Rocha caminhos linhas, curvas e arcos Helder da Rocha (helder@) Caminhos Caminhos representam o contorno de uma figura São definidos por seqüências de comandos (representados por letras) e coordenadas (pares

Leia mais

MULTIMÍDIA - GIMP TRABALHANDO COM TEXTOS

MULTIMÍDIA - GIMP TRABALHANDO COM TEXTOS MULTIMÍDIA - GIMP TRABALHANDO COM TEXTOS Utilizando Camadas As camadas representam uma forma efetiva para organização do trabalho. Podemos imaginar as camadas como películas sobrepostas onde podemos desenhar.

Leia mais

Seleção Retangular Esta é uma das ferramentas mais usadas. A seleção será indicada pelas linhas tracejadas que fazem a figura de um retângulo.

Seleção Retangular Esta é uma das ferramentas mais usadas. A seleção será indicada pelas linhas tracejadas que fazem a figura de um retângulo. O que é o Gimp? O GIMP é um editor de imagens e fotografias. Seus usos incluem criar gráficos e logotipos, redimensionar fotos, alterar cores, combinar imagens utilizando o paradigma de camadas, remover

Leia mais

Trabalho 2 Fundamentos de computação Gráfica

Trabalho 2 Fundamentos de computação Gráfica Trabalho 2 Fundamentos de computação Gráfica Processamento de Imagens Aluno: Renato Deris Prado Tópicos: 1- Programa em QT e C++ 2- Efeitos de processamento de imagens 1- Programa em QT e C++ Para o trabalho

Leia mais

Filtros. Filtros SVG SVG_Filter_Blend SVG_Filter_Blur SVG_Filter_Offset

Filtros. Filtros SVG SVG_Filter_Blend SVG_Filter_Blur SVG_Filter_Offset 4D SVG Filtros Introdução Atributos Cores e gradientes Desenho Documentos Estrutura e definições Texto Utilitários Anexos Novidades Lista alfabética dos comandos Filtros Filtros SVG SVG_Filter_Blend SVG_Filter_Blur

Leia mais

Plano de Aula - Fireworks CS5 - cód. 4084 16 Horas/Aula

Plano de Aula - Fireworks CS5 - cód. 4084 16 Horas/Aula Aula 1 Capítulo 1 - Introdução ao Fireworks CS5 Plano de Aula - Fireworks CS5 - cód. 4084 16 Horas/Aula 1.1. Novidades do Fireworks CS5...23 1.2. Área de Trabalho...24 1.2.1. Painel Ferramentas...25 1.2.2.

Leia mais

Representação de Imagens

Representação de Imagens Representação de Imagens Primitivas Gráficas As primitivas gráficas são os elementos básicos que formam um desenho. Exemplos: Ponto, segmento, polilinha, polígono, arco de elipse, etc. Primitivas já definidas

Leia mais

Abra um novo documento com tamanho 468x60 e adicione um fundo na cor branca, vamos montar a primeira moldura do nosso banner.

Abra um novo documento com tamanho 468x60 e adicione um fundo na cor branca, vamos montar a primeira moldura do nosso banner. FIREWORKS 1- BANNER ANIMADO - banner tamanho 468 x 60px (full banner). Abra um novo documento com tamanho 468x60 e adicione um fundo na cor branca, vamos montar a primeira moldura do nosso banner. Agora

Leia mais

ETI - Edição e tratamento de imagens digitais

ETI - Edição e tratamento de imagens digitais Curso Técnico em Multimídia ETI - Edição e tratamento de imagens digitais 2 Fundamentos "Conserva o modelo das sãs palavras que de mim tens ouvido, na fé e no amor que há em Cristo Jesus." 2 Timóteo 1:13

Leia mais

WEB DESIGN ELEMENTOS GRÁFICOS

WEB DESIGN ELEMENTOS GRÁFICOS ELEMENTOS GRÁFICOS Parte 4 José Manuel Russo 2005 24 A Imagem Bitmap (Raster) As imagens digitais ou Bitmap (Raster image do inglês) são desenhadas por um conjunto de pontos quadrangulares Pixel alinhados

Leia mais

estrutura do documento grupos, símbolos e marcadores reuso de objetos por referência Helder da Rocha

estrutura do documento grupos, símbolos e marcadores reuso de objetos por referência Helder da Rocha estrutura do documento grupos, símbolos e marcadores reuso de objetos por referência Helder da Rocha (helder@) Estrutura de um documento Documentos SVG podem declarar figuras como elementos de primeiro

Leia mais

CSS3 para principiantes:

CSS3 para principiantes: CSS3 para principiantes: Neste post vou apresentar algumas das inovações de CSS3 que funcionam em todos os browsers modernos. Como as inovações são tantas decidi escolher duas das mais importantes. Background-size:UL06

Leia mais

Bitmap X Vetorial OS DOIS PRINCIPAIS TIPOS DE ARQUIVOS NA COMPUTAÇÃO GRÁFICA

Bitmap X Vetorial OS DOIS PRINCIPAIS TIPOS DE ARQUIVOS NA COMPUTAÇÃO GRÁFICA OS DOIS PRINCIPAIS TIPOS DE ARQUIVOS NA COMPUTAÇÃO GRÁFICA Editores vetoriais são frequentemente contrastadas com editores de bitmap, e as suas capacidades se complementam. Eles são melhores para leiaute

Leia mais

Transformada de Hough. Cleber Pivetta Gustavo Mantovani Felipe Zottis

Transformada de Hough. Cleber Pivetta Gustavo Mantovani Felipe Zottis Transformada de Hough Cleber Pivetta Gustavo Mantovani Felipe Zottis A Transformada de Hough foi desenvolvida por Paul Hough em 1962 e patenteada pela IBM. Originalmente, foi elaborada para detectar características

Leia mais

em nosso primeiro projeto, veremos como utilizar as ferramentas do software gráfico para criar nossas pinturas

em nosso primeiro projeto, veremos como utilizar as ferramentas do software gráfico para criar nossas pinturas formação em pintura digital: A pintura digital abre as possibilidades para que artistas e desenhistas possam mostrar seu talento. Com a transição para o meio digital, os artistas clássicos se especializam

Leia mais

Thales Trigo. Formatos de arquivos digitais

Thales Trigo. Formatos de arquivos digitais Esse artigo sobre Formatos de Arquivos Digitais é parte da Tese de Doutoramento do autor apresentada para a obtenção do titulo de Doutor em Engenharia Elétrica pela Escola Politécnica da USP. Thales Trigo

Leia mais

%0/"1&2$&$3*$34+/!+&.05#!.62!+& #*+!&,&'-&"$.$"#/$&

%0/1&2$&$3*$34+/!+&.05#!.62!+& #*+!&,&'-&$.$#/$& !"#$%'()( %0/"12$$3*$34+/!+.05#!.62!+ #*+!,'-"$.$"#/$ 43#3)56(76'()( 48039:/;?8#/" @0/A$""/0; BC-2BBDEF!+GEGFFBEHIG #$.+)789:;?@ 8

Leia mais

COMPUTAÇÃO GRÁFICA RESOLUÇÃO

COMPUTAÇÃO GRÁFICA RESOLUÇÃO COMPUTAÇÃO GRÁFICA RESOLUÇÃO Curso: Tecnológico em Análise e Desenvolvimento de Sistemas Disciplina: COMPUTAÇÃO GRÁFICA 4º Semestre Prof. AFONSO MADEIRA RESOLUÇÃO Associada à quantidade e a qualidade de

Leia mais

OURO MODERNO www.ouromoderno.com.br. Designer Gráfico APOSTILA DE EXEMPLO. (Esta é só uma reprodução parcial do conteúdo)

OURO MODERNO www.ouromoderno.com.br. Designer Gráfico APOSTILA DE EXEMPLO. (Esta é só uma reprodução parcial do conteúdo) Designer Gráfico APOSTILA DE EXEMPLO (Esta é só uma reprodução parcial do conteúdo) 1 Índice Aula 1... 3 Apresentação do Photoshop... 3 Barra de Menus... 3 Barra de Opções... 3 Barra de Ferramentas...4

Leia mais

Filtragem. pixel. perfil de linha. Coluna de pixels. Imagem. Linha. Primeiro pixel na linha

Filtragem. pixel. perfil de linha. Coluna de pixels. Imagem. Linha. Primeiro pixel na linha Filtragem As técnicas de filtragem são transformações da imagem "pixel" a "pixel", que dependem do nível de cinza de um determinado "pixel" e do valor dos níveis de cinza dos "pixels" vizinhos, na imagem

Leia mais

1. Introdução ao Adobe Illustrator CC. 2.6. Ferramentas de Seleção e Visualização. 1.1. Novidades do Illustrator CC. 3. Desenho. 1.2.

1. Introdução ao Adobe Illustrator CC. 2.6. Ferramentas de Seleção e Visualização. 1.1. Novidades do Illustrator CC. 3. Desenho. 1.2. 1. Introdução ao Adobe Illustrator CC 1.1. Novidades do Illustrator CC 1.2. Abrir o Programa 1.3. Criar um Novo Documento 1.4. Área de Trabalho 1.4.1. Paletas e Painéis 1.4.2. Menus de Contexto 1.4.3.

Leia mais

Atividade: matrizes e imagens digitais

Atividade: matrizes e imagens digitais Atividade: matrizes e imagens digitais Aluno(a): Turma: Professor(a): Parte 01 MÓDULO: MATRIZES E IMAGENS BINÁRIAS 1 2 3 4 5 6 7 8 Indique, na tabela abaixo, as respostas dos 8 desafios do Jogo dos Índices

Leia mais

SHARP SELETIVO TUTORIAL PARA GIMP

SHARP SELETIVO TUTORIAL PARA GIMP SHARP SELETIVO TUTORIAL PARA GIMP Praticamente todo mundo que trabalha com fotografia e programas de edição de imagem, seja o PhotoShop, GIMP ou similares, em algum momento usa a ferramenta unsharp mask

Leia mais

IMAGEM REFLECTIDA NA ÁGUA

IMAGEM REFLECTIDA NA ÁGUA IMAGEM REFLECTIDA NA ÁGUA Introdução Vamos criar a imagem de um carro reflectida na água. Quando uma imagem é reflectida na água com ondulação o reflexo não é nítido, varia com as ondas. Aqui a variação

Leia mais

Escrito por Sáb, 15 de Outubro de 2011 21:33 - Última atualização Seg, 26 de Março de 2012 03:30

Escrito por Sáb, 15 de Outubro de 2011 21:33 - Última atualização Seg, 26 de Março de 2012 03:30 Preço R$129.00 Compre aqui Curso de Fireworks cs4, são 71 videoaulas, 1 dvd, 4.25 gigabyte - Clique aqui para ver o cronograma das aulas - Clique aqui para ver as imagens deste curso - Clique aqui para

Leia mais

No nosso exemplo, utilizámos apenas um braço e uma perna, que

No nosso exemplo, utilizámos apenas um braço e uma perna, que 1. Seleccione agora cada uma das camadas na janela Layers; 2. Escolha a Move Tool na barra de ferramentas e, com ela, posicione cada parte do alienígena, até ter algo como o visto na figura 4.56. Fig.

Leia mais

Capítulo 5 Filtragem de Imagens

Capítulo 5 Filtragem de Imagens Capítulo 5 Filtragem de Imagens Capítulo 5 5.1. Filtragem no Domínio da Frequência 5.2. Filtragem no Domínio Espacial 2 Objetivo Melhorar a qualidade das imagens através da: ampliação do seu contraste;

Leia mais

Conteúdo Programático do Photo Shop

Conteúdo Programático do Photo Shop O Ambiente Adobe Photoshop Conteúdo Programático do Photo Shop Características das Imagens Imagens Vetoriais e de Bitmap Tamanho e Resolução de Imagens Modos de Cores Formatos de Arquivo A Iniciação de

Leia mais

RUÍDOS EM IMAGENS FILTRAGEM DE RUÍDOS. o Flutuações aleatórias ou imprecisões em dados de entrada, precisão numérica, arredondamentos etc...

RUÍDOS EM IMAGENS FILTRAGEM DE RUÍDOS. o Flutuações aleatórias ou imprecisões em dados de entrada, precisão numérica, arredondamentos etc... RUÍDOS EM IMAGENS FILTRAGEM DE RUÍDOS RUÍDOS EM IMAGENS Em Visão Computacional, ruído se refere a qualquer entidade em imagens, dados ou resultados intermediários, que não são interessantes para os propósitos

Leia mais

Curso rapidíssimo de Processing

Curso rapidíssimo de Processing Curso rapidíssimo de Processing Primeira parte: bolas 1. Instale: http://processing.org/download/. 2. Crie uma pasta processing, ao lado da sua pasta sources (a dos programas C). 3. Abra o Processing.

Leia mais

Pré-requisitos para fazer este curso É necessário possuir conhecimentos em informática básica, internet e muita vontade para aprender.

Pré-requisitos para fazer este curso É necessário possuir conhecimentos em informática básica, internet e muita vontade para aprender. Descrição do curso O curso de Edição Profissional de Imagens com o Photoshop CS6 Extended foi desenvolvido para que o aluno obtenha todas as habilidades necessárias para, ao final do mesmo, ser capaz de

Leia mais

Fundamentos de Imagens Digitais. Aquisição e Digitalização de Imagens. Aquisição e Digitalização de Imagens. Aquisição e Digitalização de Imagens

Fundamentos de Imagens Digitais. Aquisição e Digitalização de Imagens. Aquisição e Digitalização de Imagens. Aquisição e Digitalização de Imagens Fundamentos de Imagens Digitais Aquisição e Serão apresentadas as principais características de uma imagem digital: imagem do ponto de vista matemático processo de aquisição e digitalização de uma imagem

Leia mais

Sistema topograph 98. Tutorial Módulo Projetos

Sistema topograph 98. Tutorial Módulo Projetos Sistema topograph 98 Tutorial Módulo Projetos Como abrir um projeto existente _ 1. Na área de trabalho do Windows, procure o ícone do topograph e dê um duplo clique sobre ele para carregar o programa.

Leia mais

SEGEMENTAÇÃO DE IMAGENS. Nielsen Castelo Damasceno

SEGEMENTAÇÃO DE IMAGENS. Nielsen Castelo Damasceno SEGEMENTAÇÃO DE IMAGENS Nielsen Castelo Damasceno Segmentação Segmentação Representação e descrição Préprocessamento Problema Aquisição de imagem Base do conhecimento Reconhecimento e interpretação Resultado

Leia mais

Tutorial do programa

Tutorial do programa 1 Tutorial do programa I. Guia Rápido 1. Clique no produto. 2. Clique na pasta de imagens. 3. Clique em preenchimento auto. 4. Verificar pedido. 5. Finalizar pedido. 6. Fazer pagamento / Entrega. 7. Fazer

Leia mais

APLICATIVOS GRÁFICOS (AULA 4)

APLICATIVOS GRÁFICOS (AULA 4) Prof. Breno Leonardo G. de M. Araújo brenod123@gmail.com http://blog.brenoleonardo.com.br APLICATIVOS GRÁFICOS (AULA 4) 1 Classificação da imagem Em relação à sua origem pode-se classificar uma imagem,

Leia mais

ferramentas da imagem digital

ferramentas da imagem digital ferramentas da imagem digital illustrator X photoshop aplicativo ilustração vetorial aplicativo imagem digital 02. 16 imagem vetorial X imagem de rastreio imagem vetorial traduz a imagem recorrendo a instrumentos

Leia mais

Controlando o trabalho impresso 1

Controlando o trabalho impresso 1 Controlando o trabalho impresso 1 O seu driver da impressora fornece a melhor qualidade de saída para vários tipos de necessidades de impressão. No entanto, você pode desejar ter mais controle sobre a

Leia mais

Computação Gráfica 3D Studio Max 2008.1 www.damasceno.info Prof.: Luiz Gonzaga Damasceno

Computação Gráfica 3D Studio Max 2008.1 www.damasceno.info Prof.: Luiz Gonzaga Damasceno 10 Iluminação e Sombras Lembre-se que iluminar é estabelecer uma relação entre luz e sombras. Se o ambiente estiver muito claro pode destruir áreas importantes de sombras. Este Tutorial mostra como simular

Leia mais

COMPUTAÇÃO GRÁFICA. Rasterização e Preenchimento de Regiões. MARCO ANTONIO GARCIA DE CARVALHO Fevereiro de 2009. Computação Gráfica

COMPUTAÇÃO GRÁFICA. Rasterização e Preenchimento de Regiões. MARCO ANTONIO GARCIA DE CARVALHO Fevereiro de 2009. Computação Gráfica COMPUTAÇÃO GRÁFICA Rasterização e Preenchimento de Regiões Objetivos Conhecer os fundamentos da construção de linhas e círculos Conhecer o modelo scan-line modelo de sementes para preenchimento de polígonos

Leia mais

IntMu.Lab3. Nome: Nº Data: Importe as imagens disponibilizadas em http://www.dee.isep.ipp.pt/~jml/intmu/lab3/:

IntMu.Lab3. Nome: Nº Data: Importe as imagens disponibilizadas em http://www.dee.isep.ipp.pt/~jml/intmu/lab3/: IntMu.Lab3 Nome: Nº Data: 0. Importe as imagens disponibilizadas em http://www.dee.isep.ipp.pt/~jml/intmu/lab3/: 1. mkdir lab3 cd lab3 wget www.dee.isep.ipp.pt/~jml/intmu/lab3/makefile make get Crie versões

Leia mais

O segredo do retoque de pele

O segredo do retoque de pele O segredo do retoque de pele Dia após dia a fama do Photoshop aumenta, graças, principalmente, aos seus milagres nos retoques de pele. O mundo inteiro discute se é correto editar a textura da pele de modelos

Leia mais

Filtragem Espacial. (Processamento Digital de Imagens) 1 / 41

Filtragem Espacial. (Processamento Digital de Imagens) 1 / 41 Filtragem Espacial (Processamento Digital de Imagens) 1 / 41 Filtragem Espacial Filtragem espacial é uma das principais ferramentas usadas em uma grande variedade de aplicações; A palavra filtro foi emprestada

Leia mais

FILTRAGEM ESPACIAL. Filtros Digitais no domínio do espaço

FILTRAGEM ESPACIAL. Filtros Digitais no domínio do espaço FILTRAGEM ESPACIAL Filtros Digitais no domínio do espaço Definição Também conhecidos como operadores locais ou filtros locais Combinam a intensidade de um certo número de piels, para gerar a intensidade

Leia mais

PHOTOSHOP. Menus. Caixa de Ferramentas:

PHOTOSHOP. Menus. Caixa de Ferramentas: PHOTOSHOP Universidade de Caxias do Sul O Photoshop 5.0 é um programa grande e complexo, é o mais usado e preferido pelos especialistas em editoração e computação gráfica para linha PC. Outros programas

Leia mais

SEGMENTAÇÃO DE IMAGENS EM PLACAS AUTOMOTIVAS

SEGMENTAÇÃO DE IMAGENS EM PLACAS AUTOMOTIVAS SEGMENTAÇÃO DE IMAGENS EM PLACAS AUTOMOTIVAS André Zuconelli 1 ; Manassés Ribeiro 2 1. Aluno do Curso Técnico em Informática, turma 2010, Instituto Federal Catarinense, Câmpus Videira, andre_zuconelli@hotmail.com

Leia mais

manual de identidade visual

manual de identidade visual manual de identidade visual Índice do nosso manual 1.Nosso Logo 1.1. Apresentação...3 1.2. Versões...4 Logo A Aplicações...5 Cores...6 Logo B Aplicações...7 Cores...8 Logo C Aplicações...9 Cores...10 1.3.

Leia mais

Morfologia Matemática Binária

Morfologia Matemática Binária Morfologia Matemática Binária Conceitos fundamentais: (Você precisa entender bem esses Pontos básicos para dominar a área! Esse será nosso game do dia!!! E nossa nota 2!!) Morfologia Matemática Binária

Leia mais

Imagem e Gráficos. vetorial ou raster?

Imagem e Gráficos. vetorial ou raster? http://computacaografica.ic.uff.br/conteudocap1.html Imagem e Gráficos vetorial ou raster? UFF Computação Visual tem pelo menos 3 grades divisões: CG ou SI, AI e OI Diferença entre as áreas relacionadas

Leia mais

Imagem digital 2. Resolução x dimensão da imagem

Imagem digital 2. Resolução x dimensão da imagem Uma imagem bitmapeada é formada por um conjunto de pixels. gerados no momento da digitalização da imagem (através do scanner ou câmera digital). PRODUÇÃO GRÁFICA 2 Imagem digital 2 Resolução x dimensão

Leia mais

Tratamento da Imagem Transformações (cont.)

Tratamento da Imagem Transformações (cont.) Universidade Federal do Rio de Janeiro - IM/DCC & NCE Tratamento da Imagem Transformações (cont.) Antonio G. Thomé thome@nce.ufrj.br Sala AEP/133 Tratamento de Imagens - Sumário Detalhado Objetivos Alguns

Leia mais

Aula 5 - Classificação

Aula 5 - Classificação AULA 5 - Aula 5-1. por Pixel é o processo de extração de informação em imagens para reconhecer padrões e objetos homogêneos. Os Classificadores "pixel a pixel" utilizam apenas a informação espectral isoladamente

Leia mais

COREL PHOTO-PAINT 10. Editar uma imagem digitalizada. Rodar ou Cortar uma imagem. Corrigir a Luminosidade e o Contraste de uma imagem

COREL PHOTO-PAINT 10. Editar uma imagem digitalizada. Rodar ou Cortar uma imagem. Corrigir a Luminosidade e o Contraste de uma imagem 10 Editar uma imagem digitalizada Após a digitalização de uma imagem pode-se fazer uma série de correcções no Photo-Paint rodar ou cortar a imagem, trabalhar a luz ou a cor, converter para outro formato,

Leia mais

Como aplicar batom multicolorido.

Como aplicar batom multicolorido. Como aplicar batom multicolorido. 01. Pressione Ctrl+O e abra uma foto qualquer, para este tutorial iremos usar a imagem abaixo. 02. Pressione Ctrl+U para abrir a caixa de Matiz /saturação e defina os

Leia mais

Aula 2 Aquisição de Imagens

Aula 2 Aquisição de Imagens Processamento Digital de Imagens Aula 2 Aquisição de Imagens Prof. Dr. Marcelo Andrade da Costa Vieira mvieira@sc.usp.br EESC/USP Fundamentos de Imagens Digitais Ocorre a formação de uma imagem quando

Leia mais

Imagens Digitais Tratamento de Imagens

Imagens Digitais Tratamento de Imagens Imagens Digitais Imagens de Bitmap Bitmap = Mapa de Bits ou Imagens Raster São as imagens formadas por pixels em oposição às imagens vetoriais. Imagens de Bitmap Imagem de bitmap Imagem vetorial Imagens

Leia mais

UFGD FCA PROF. OMAR DANIEL BLOCO 4 PROCESSAMENTO DE IMAGENS

UFGD FCA PROF. OMAR DANIEL BLOCO 4 PROCESSAMENTO DE IMAGENS UFGD FCA PROF. OMAR DANIEL BLOCO 4 PROCESSAMENTO DE IMAGENS Executar as principais técnicas utilizadas em processamento de imagens, como contraste, leitura de pixels, transformação IHS, operações aritméticas

Leia mais

)LJXUD8PGRVSDUHV'SDUDFRQYROXomRTXHWHPRPHVPRHIHLWRGR NHUQHOGD)LJXUD

)LJXUD8PGRVSDUHV'SDUDFRQYROXomRTXHWHPRPHVPRHIHLWRGR NHUQHOGD)LJXUD )LOWURJDXVVLDQR O filtro Gaussiano pode ser usado como um filtro SDVVDEDL[D. Usando a função Gaussiana para obter valores de uma máscara a ser definida digitalmente. O Filtro de Gaussiano em 1-D tem a

Leia mais

Instituto Politécnico de Setúbal Escola Superior de Educação de Setúbal. Formação Contínua 1999/2000. Filomena Izidro

Instituto Politécnico de Setúbal Escola Superior de Educação de Setúbal. Formação Contínua 1999/2000. Filomena Izidro Instituto Politécnico de Setúbal Formação Contínua 1999/2000 Filomena Izidro Setúbal 2000 1. APRESENTAÇÃO DO PROGRAMA PAINT SHOP PRO 5 O PSP 5 é um programa que permite o tratamento de imagens. Nome do

Leia mais

Chapter 2 Guia de referência rápida 2-

Chapter 2 Guia de referência rápida 2- Chapter 2 Guia de referência rápida 2- Este capítulo descreve como descompactar e exibir imagens de maneira rápida com o kit de desenvolvimento de software (SDK) para captura de imagens.net RasterMaster.

Leia mais

Operações Algébricas e Lógicas. Guillermo Cámara-Chávez

Operações Algébricas e Lógicas. Guillermo Cámara-Chávez Operações Algébricas e Lógicas Guillermo Cámara-Chávez Operações Aritméticas São aquelas que produzem uma imagem que é a soma, diferença, produto ou quociente pixel a pixel Operações Aritméticas Fig A

Leia mais

Paint Brush. 1- Conhecendo o Paint Brush...2. 2- Tamanho do desenho...2

Paint Brush. 1- Conhecendo o Paint Brush...2. 2- Tamanho do desenho...2 Paint Brush 1- Conhecendo o Paint Brush...2 2- Tamanho do desenho...2 3- Barra de Ferramentas...3 a) Recortar...3 b) Borracha...4 c) Balde...4 d) Conta-gotas...4 e) Lupa...4 f) Lápis...5 g) Pincel...5

Leia mais

Curso de Adobe Illustrator CS4

Curso de Adobe Illustrator CS4 Curso de Adobe Illustrator CS4 Apresentação do Programa O Adobe Illustrator CS4 é um programa de desenho e ilustração vectorial, que coloca à disposição dos profissionais poderosas ferramentas para a concepção

Leia mais

azevedolab.net 2015 Dr. Walter F. de Azevedo Jr.

azevedolab.net 2015 Dr. Walter F. de Azevedo Jr. azevedolab.net 2015 Dr. Walter F. de Azevedo Jr. 1 Ementa Apresentação de outras linguagens de programação para Bioinformática: introdução ao Perl e ao Processing; modelagem de sistemas biológicos; aplicações

Leia mais

RECONHECIMENTO DE PLACAS DE AUTOMÓVEIS ATRAVÉS DE CÂMERAS IP

RECONHECIMENTO DE PLACAS DE AUTOMÓVEIS ATRAVÉS DE CÂMERAS IP RECONHECIMENTO DE PLACAS DE AUTOMÓVEIS ATRAVÉS DE CÂMERAS IP Caio Augusto de Queiroz Souza caioaugusto@msn.com Éric Fleming Bonilha eric@digifort.com.br Gilson Torres Dias gilson@maempec.com.br Luciano

Leia mais

Curso Especializado Design Gráfico

Curso Especializado Design Gráfico Curso Especializado Design Gráfico 87 horas Descrição: Este pacote de formação é composto pelos programas essenciais e indispensáveis a todos os Designers Gráficos que pretendam compreender os processos

Leia mais

Para alterar o texto diretamente na página selecione a ferramenta Texto e clique sobre o bloco de texto parágrafo ou artístico.

Para alterar o texto diretamente na página selecione a ferramenta Texto e clique sobre o bloco de texto parágrafo ou artístico. Quando precisarmos utilizar trechos de texto mais longos, como frases inteiras e parágrafos, utilizaremos o recurso Texto Parágrafo. Para iniciarmos um texto parágrafo selecionamos a ferramenta Texto e

Leia mais

2.1.2 Definição Matemática de Imagem

2.1.2 Definição Matemática de Imagem Capítulo 2 Fundamentação Teórica Este capítulo descreve os fundamentos e as etapas do processamento digital de imagens. 2.1 Fundamentos para Processamento Digital de Imagens Esta seção apresenta as propriedades

Leia mais

APLICATIVOS GRÁFICOS (AULA 10)

APLICATIVOS GRÁFICOS (AULA 10) Prof. Breno Leonardo G. de M. Araújo brenod123@gmail.com http://blog.brenoleonardo.com.br APLICATIVOS GRÁFICOS (AULA 10) 1 Roteiro Operações Booleanas Comprimir e Expandir Simplificação Criando Texto Editor

Leia mais

O que é a cor? Como converter as cores para CMYK

O que é a cor? Como converter as cores para CMYK Introdução A Cartilha de Fechamento de Arquivos a seguir foi preparada pela equipe de criação da gráfica Cores, com o intuito de ajudar seus clientes a criarem artes o mais precisa possível, evitando assim

Leia mais

FECHAMENTO DE ARQUIVO PARA IMPRESSÃO DIGITAL

FECHAMENTO DE ARQUIVO PARA IMPRESSÃO DIGITAL FECHAMENTO DE ARQUIVO PARA IMPRESSÃO DIGITAL GERENCIAMENTO DE COR CONFORME ISO 12647-2:2004 Buscando qualidade, agilidade e fidelidade nas cores dos materiais impressos aos nossos clientes, a Dinâmica

Leia mais

Encontrando a Linha Divisória: Detecção de Bordas

Encontrando a Linha Divisória: Detecção de Bordas CAPÍTULO 1 Encontrando a Linha Divisória: Detecção de Bordas Contribuíram: Daniela Marta Seara, Geovani Cássia da Silva Espezim Elizandro Encontrar Bordas também é Segmentar A visão computacional envolve

Leia mais

CAUETEC INFORMÁTICA Rua Serra Talhada, 153 Vila Diana - 04835-150 São Paulo. Fone: 3441-6836 Site: www.cauetec.com.br E-mail: cauetec@cauetec.com.

CAUETEC INFORMÁTICA Rua Serra Talhada, 153 Vila Diana - 04835-150 São Paulo. Fone: 3441-6836 Site: www.cauetec.com.br E-mail: cauetec@cauetec.com. 3 de 13 Índice 1. Mapa CSS e legenda das principais imagens que compõe as paginas...4 a. Conhecimentos desejáveis:...4 b. Modelos Clássico e Fundo Fixo:...4 c. Para o designer o que muda entre o modelo

Leia mais

Dr. Sylvio Barbon Junior. Departamento de Computação - UEL. 1 o Semestre de 2015

Dr. Sylvio Barbon Junior. Departamento de Computação - UEL. 1 o Semestre de 2015 Introdução a Computação Gráfica [5COP100] Dr. Sylvio Barbon Junior Departamento de Computação - UEL 1 o Semestre de 2015 Assunto Aula 2 Princípios básicos de imagens de duas dimensões 2 de 45 Sumário Raster

Leia mais

I Encontro Brasileiro de usuários QGIS

I Encontro Brasileiro de usuários QGIS I Encontro Brasileiro de usuários QGIS Uso do QGIS no Processamento Digital de Imagens de Sensoriamento Remoto Jorge Santos jorgepsantos@outlook.com www.processamentodigital.com.br Dicas, tutoriais e tudo

Leia mais

Processamento de Imagens Digitais

Processamento de Imagens Digitais Processamento de Imagens Digitais Redução de Ruídos - Filtros Espaciais "Passa-Baixa" Glaucius Décio Duarte Instituto Federal Sul-rio-grandense Engenharia Elétrica 1 de 7 Ruído em Imagens Digitais As imagens

Leia mais

Quatro para três (4:3): vou virar freguês!

Quatro para três (4:3): vou virar freguês! Uma breve introdução ao Photoshop. Embora várias ferramentas de manipulação de imagens sejam mais baratas e um pouco mais fáceis de utilizar, o Photoshop é a ferramenta mais importante de manipulação de

Leia mais

_PTBR. Guia de configuração de digitalização para aplicativos TWAIN

_PTBR. Guia de configuração de digitalização para aplicativos TWAIN _PTBR Guia de configuração de digitalização para aplicativos TWAIN Como usar a fonte de dados TWAIN Como iniciar a Ferramenta de validação de scanner... 2 A caixa de diálogo Ferramenta de validação de

Leia mais

Interfaces Gráficas: Interações Complexas

Interfaces Gráficas: Interações Complexas Interfaces Gráficas: 21 Interações Complexas 21.5 O contexto gráfico Os componentes de uma interface gráfica são desenhados na tela do computador a partir de primitivas que permitem a construção de linhas,

Leia mais

Técnico em Informática. Ilustração Vetorial para Web. Ewerton Menezes de Mendonça

Técnico em Informática. Ilustração Vetorial para Web. Ewerton Menezes de Mendonça Técnico em Informática Ilustração Vetorial para Web Ewerton Menezes de Mendonça 2014 Presidenta da República Dilma Vana Rousseff Vice-presidente da República Michel Temer Ministro da Educação José Henrique

Leia mais

Escola: Instituto de Desenvolvimento Social Bravagente Curso: Web Arte Disciplina: Layout Digital Educadora: Vania Pierozan Data: fevereiro 2010

Escola: Instituto de Desenvolvimento Social Bravagente Curso: Web Arte Disciplina: Layout Digital Educadora: Vania Pierozan Data: fevereiro 2010 Escola: Instituto de Desenvolvimento Social Bravagente Curso: Web Arte Disciplina: Layout Digital Educadora: Vania Pierozan Data: fevereiro 2010 APOSTILA DE EDIÇÃO DE IMAGENS COM GIMP HISTÓRIA O projeto

Leia mais

De seguida vamos importar a imagem da lupa File > Import e abrir a imagem Lupa.png que está no Cd-rom.

De seguida vamos importar a imagem da lupa File > Import e abrir a imagem Lupa.png que está no Cd-rom. LUPA Introdução A base que está por detrás deste tutorial são duas imagens, uma com 50% do tamanho original colocada numa layer e outra imagem com o tamanho original colocada numa Mask layer dentro de

Leia mais

ROBERTO OLIVEIRA CUNHA

ROBERTO OLIVEIRA CUNHA LEIAME Nenhuma informação do TUTORIAL DO PHOTO- SHOP CS 8.0 poderá ser copiada, movida ou modificada sem autorização prévia e escrita do Programador Roberto Oliveira Cunha. Programador: Roberto Oliveira

Leia mais

Julho/2015. essencial. aprenda a criar gráficos e animações eficientes para a Web. helderdarocha.

Julho/2015. essencial. aprenda a criar gráficos e animações eficientes para a Web. helderdarocha. Julho/2015 essencial aprenda a criar gráficos e animações eficientes para a Web helderdarocha helder@argonavis.com.br Programa Uma introdução abrangente a SVG Como criar e como usar com HTML5 e CSS Elementos

Leia mais

Guia de qualidade de cores

Guia de qualidade de cores Página 1 de 5 Guia de qualidade de cores O Guia de qualidade de cores ajuda você a entender como as operações disponíveis na impressora podem ser usadas para ajustar e personalizar a saída colorida. Menu

Leia mais

BREVE TUTORIAL DO PAINT PARTE I Prof. Reginaldo Brito - Informática

BREVE TUTORIAL DO PAINT PARTE I Prof. Reginaldo Brito - Informática BREVE TUTORIAL DO PAINT PARTE I Prof. Reginaldo Brito - Informática O Paint é o programa de edição de imagens padrão do Windows, ao instalar o sistema o Paint é instalado automaticamente. Provavelmente,

Leia mais

Tutorial Paint Brush

Tutorial Paint Brush Tutorial Paint Brush GET da Engenharia Computacional Curso de Mídias Digitais Jan 17, 2011 GET da Engenharia Computacional Tutorial Paint Brush 1/27 O Paint é um programa utilizado para a criação de desenhos

Leia mais

PS02_02-08: Exercícios: Photoshop CS3. Objetivo: FERRAMENTAS DE PINTURA. 1) Abra um novo arquivo e altere os valores para a seguinte configuração:

PS02_02-08: Exercícios: Photoshop CS3. Objetivo: FERRAMENTAS DE PINTURA. 1) Abra um novo arquivo e altere os valores para a seguinte configuração: PS02_02-08: Objetivo: FERRAMENTAS DE PINTURA Exercícios: 1) Abra um novo arquivo e altere os valores para a seguinte configuração: 2) Finalize a configuração. A janela da imagem, também chamada de tela

Leia mais

COFFEE BREAK!!: CRIAÇÃO DE UM CARTAZ COM INKSCAPE

COFFEE BREAK!!: CRIAÇÃO DE UM CARTAZ COM INKSCAPE COFFEE BREAK!!: CRIAÇÃO DE UM CARTAZ COM INKSCAPE O Inkscape (http://www.inkscape.org/) é uma aplicação de Software Livre para desenho e edição electrónica de imagem vectorial. É uma ferramenta para edição

Leia mais

Manual de utilização do programa

Manual de utilização do programa PCIToGCode Manual de utilização do programa PCIToGCode O PCITOGCODE é um aplicativo desenvolvido para converter imagem de uma placa de circuito impresso em um arquivo de códigos G. Com o arquivo de códigos

Leia mais

O endereço de sua estação de trabalho é 201.252.203.107, e você esta usando a máscara de subrede: 255.255.255.248.

O endereço de sua estação de trabalho é 201.252.203.107, e você esta usando a máscara de subrede: 255.255.255.248. Cálculo de endereços de rede Quais os hosts da rede 10.12.148.0 IP: 00001010.00001100.100101xx.xxxxxxxx Mask:11111111.11111111.11111100.00000000 Rede:00001010.00001100.10010100.00000000 Assim, podemos

Leia mais

Curso de InDesign CS4

Curso de InDesign CS4 Curso de InDesign CS4 especialmente estruturado para utilizadores de QuarkXPress Apresentação do programa O Adobe InDesign é um programa de paginação relativamente recente, que tem vindo a ganhar progressiva

Leia mais

FORMATO DE ARQUIVO: BMP

FORMATO DE ARQUIVO: BMP FORMATO DE ARQUIVO: BMP 1. INTRODUÇÃO: Formato nativo do ambiente Windows O formato de arquivos BMP foi desenvolvido pela Microsoft, sendo o formato nativo de mapa de bits do Windows (a partir da versão

Leia mais

FEN- 06723 Processamento Digital de Imagens. Projeto 2 Utilização de máscaras laplacianas

FEN- 06723 Processamento Digital de Imagens. Projeto 2 Utilização de máscaras laplacianas FEN- 06723 Processamento Digital de Imagens Projeto 2 Utilização de máscaras laplacianas Marcelo Musci Mestrado Geomática/UERJ-2004 Abstract The Laplacian is also called as second difference function,

Leia mais