COMUNICAÇÃO SOCIAL PUBLICIDADE COMPUTAÇÃO GRÁFICA Prof. Celso Cardoso Neto

COMPUTAÇÃO GRÁFICA OBJETIVOS Conhecer os conceitos básicos da computação gráfica e processamento de imagens

COMPUTAÇÃO GRÁFICA EMENTA Computação Gráfica. Processamento de Imagens. Uso de Software. Corel Draw 11 / X3 Photoshop 7 / CS Flash MX / MX / 8

COMPUTAÇÃO GRÁFICA UNIDADE I : CONCEITOS BÁSICOS UNIDADE II : PARADIGMAS DE ABSTRAÇÃO UNIDADE III : OBJETOS GRÁFICOS UNIDADE IV : MODELAGEM DA GEOMETRIA DOS OBJETOS E CONSTRUÇÃO DA CENA EM 3D UNIDADE V : VISUALIZAÇÃO DE CENA UNIDADE VI : ILUMINAÇÃO DE CENA UNIDADE VII : PRÁTICA EM LABORATÓRIO

COMPUTAÇÃO GRÁFICA BIBLIOGRAFIA BÁSICA BIBLIOGRAFIA COMPLEMENTAR GOMES, J. e VELHO, L. Computação Gráfica: Imagem. IMPA-SBM, 1994. (*3) AZEVEDO, Eduardo. Computação Gráfica, Rio de Janeiro: Campus, 2005 (*0) GOMES, J. e VELHO, L. Computação Gráfica: Volume I. Série Computação e Matemática, SBM/IPA, 1998 BIBLIOGRAFIA COMPLEMENTAR GOMES, Jonas; VELHO, Luiz. Computação gráfica: imagem. Rio de Janeiro: IMPA/SBM, 1994 (*3 MAESTRI, George. Animação digital de personagens. Sao Paulo: QUARK EDITORA, 1996 (*3) Manuais de Software Sites na Internet

COMPUTAÇÃO GRÁFICA AVALIAÇÕES V1 ------------------ 30/09/2010 2A. CHAMADA – 09/12/2010 VS ----------------- 16/12/2010 VT ----------------- TAREFAS E PROVA

COMPUTAÇÃO GRÁFICA Sites na Internet http://www.inf.ufsc.br/~awangenh/CG/apostilas/apostilaport.pdf http://pt.wikipedia.org/wiki/Computa%C3%A7%C3%A3o_gr%C3%A1fica http://www.sobresites.com/computacaografica/ http://gbdi.icmc.usp.br/documentacao/apostilas/cg/ http://www.inf.pucrs.br/~pinho/CG/Aulas/Intro/intro.htm http://www.3darts.com.br/ http://profs.ccems.pt/Margarita/exercicios.htm http://www.xuti.net/index.php?option=com_content&task=view&id=51&Itemid=32 http://www.azmt.com.br/treinamento/index.php http://pt.wikipedia.org/wiki/CorelDraw http://pt.wikipedia.org/wiki/Photoshop http://pt.wikipedia.org/wiki/Autocad http://pt.wikipedia.org/wiki/3D_Studio_Max http://pt.wikipedia.org/wiki/Macromedia

COMPUTAÇÃO GRÁFICA DEFINIÇÕES Área da Ciência da Computação que estuda a geração, manipulação e interpretação de modelos e imagens de objetos utilizando computador. Tais modelos vêm de uma variedade de disciplinas como FÍSICA, MATEMÁTICA, ENGENHARIA, ARQUITETURA, etc... A computação gráfica é a área da computação destinada à geração de imagens em geral — em forma de representação de dados e informação, ou em forma de recriação do mundo real. Ela pode possuir uma infinidade de aplicações para diversas áreas. Desde a própria informática ao produzir interfaces gráficas para software, sistemas operacionais e sites na Internet, quanto para produzir animações e jogos.

COMPUTAÇÃO GRÁFICA ÁREAS

PROCESSAMENTO DE IMAGENS RELACIONAMENTO ENTRE AS 3(TRÊS) SUB-ÁREAS DA COMPUTAÇÃO GRÁFICA imagens SÍNTESE DE IMAGENS PROCESSAMENTO DE IMAGENS imagens Descrições (especificação geométrica) ANÁLISE DE IMAGENS

ÁREAS DA COMPUTAÇÃO GRÁFICA Na última década, somou-se a área da Visualização de Dados (VISUALIZAÇÃO COMPUTACIONAL), que usa técnicas de COMPUTAÇÃO GRÁFICA para representar informação, de forma a facilitar o entendimento de conjuntos de dados numéricos de alta complexidade Áreas de aplicação: Visualização de imagens médicas Meteorologia Dados financeiros Visualização de programas Dinâmica dos fluídos ... Nelas, o que existe em comum é a representação gráfica (superfícies, partículas, ícones) que são geradas automaticamente a partir de um conjunto de dados. A VISUALIZAÇÃO COMPUTACIONAL partilha das características da SÍNTESE, do PROCESSAMENTO e da ANÁLISE dos dados.

HISTÓRICO E APLICAÇÕES

CARACTERÍSTICAS DA COMPUTAÇÃO GRÁFICA

APLICAÇÕES DA COMPUTAÇÃO GRÁFICA

APLICAÇÕES DA COMPUTAÇÃO GRÁFICA

HARDWARE GRÁFICO DISPOSITIVOS GRÁFICOS DE ENTRADA E SAÍDA COMPUTADOR HOSPEDEIRO (DADOS ARMAZENADOS) LINKS DE ALTA VELOCIDADE

PROGRAMAS GRÁFICOS Qual o programa mais adequado às minhas necessidades ? TIPO COREL ADOBE MACROMEDIA Vetorial CorelDraw Illustrator Freehand Bitmap PhotoPaint Photoshop Xres Editoração Venture PageMaker (InDesign) QuarkExpress Animação Lumière Premier Flash

EXTENSÕES DOS PROGRAMAS VETORIAL BITMAP (MATRICIAL) EDITORAÇÃO e DIAGRAMAÇÃO DXF (*) GIF / PNG (*) TXT (*) WMF (*) JPEG (*) DOC / RTF (*) AI (*) TIFF (*) PRN (*) DWG EPS QXD / QXT CDR BMP (*) PMD / P65 --- TGA --- --- PSD --- --- CPT --- (*) SÃO EXTENSÕES UNIVERSAIS, GERALMENTE IMPORTADAS E EXPORTADAS POR QUALQUER PROGRAMA

EXTENSÕES DOS PROGRAMAS ATENÇÃO !!! SE A EXTENSÃO É DESCONHECIDA, FICA MUITO DIFÍCIL IDENTIFICAR SE A IMAGEM É VETORIAL OU BITMAP, ATÉ MESMO PORQUE, GERALMENTE, AS IMAGENS VETORIAIS SÃO CONVERTIDAS EM MATRICIAIS ANTES DE SEREM IMPRESSAS.

IMAGEM BITMAP E VETORIAL - DIFERENÇAS Uma imagem BITMAP é formada por pontos (pixels) Uma imagem VETORIAL é formada por coordenadas (x,y) O CorelDraw utiliza imagens VETORIAIS, pois elas permitem a criação de objetos, logotipos, plantas humanizadas, layouts, ... O PhotoShop trabalha com imagens BITMAP, adquiridas por meio de uma câmera ou scanner (digitalizadas). Posteriormente, faz-se o melhoramento das imagens, utilizando-se de ferramentas do programa. Imagens VETORIAIS são definidas matematicamente como uma série de pontos unidos por linhas. Por exemplo, para formar uma linha reta, deve haver pelo menos duas coordenadas: (x,y) inicial e (x,y) final.

IMAGENS - CARACTERÍSTICAS Os programas baseados em VETORES são ideais para ilustração, visto que cada objeto é uma unidade independente. É possível mover e alterar suas propriedades repetidas vezes e ainda assim manter a sua nitidez e resolução originais, sem afetar os demais objetos do desenho. Os objetos criados não dependem de resolução, o que significa que eles aparecem na resolução máxima do dispositivo de saída (impressora ou monitor). O CORELDRAW é um aplicativo que permite incorporar BITMAPS aos desenhos e exportar os BITMAPS criados, mas é um programa para trabalhar principalmente com IMAGENS VETORIAIS, assim como o PHOTOSHOP é específico para IMAGENS BITMAP (MATRICIAIS)

Imagem Vetorial

Imagem Vetorial

O Adobe Photoshop trabalha exclusivamente com edição de imagens BITMAP. Imagem Bitmap Com o Adobe Photoshop pode-se alterar fotografias e outros tipos de arte final digitalizada, retocar, aplicar efeitos, inserir textos e corrigir qualquer tipo de imagem. No entanto, o Adobe Photoshop não possui as melhores ferramentas para impressão. Muitas das vezes é necessário exportar o trabalho para o PageMaker ou Illustrator e o CorelDraw.

Imagem Bitmap

EXTENSÕES VETORIAIS DXF – muito utilizada pelo Autocad na exportação de arquivos para outros programas. WMF – boa alternativa para importação para outros programas, utilizada principalmente nas figuras do Word. AI – extensão principal do Adobe Illustrator e também a mais conhecida porta de entrada e saída para a plataforma Macintosh, utilizada na transferência de arquivos para outros programas. DWG – extensão principal do AutoCad. CDR – extensão principal do CorelDraw

EXTENSÕES BITMAP GIF / PNG – utilizadas para Internet quando se quer transformar uma das cores da imagem em transparência. O PNG utiliza 24 bits e o GIF utiliza 256 cores. JPG – a mais utilizada extensão da Internet. Utiliza 24 u 16 bits e permite a escolha do nível de compactação (tamanho do arquivo e as cores). Seus arquivos aparecem rapidamente nos browsers da Web quando compactados. TIFF – extensão muito utilizada para impressão, por ter 32 bits de cores e por obter uma boa resolução. EPS - extensão muito utilizada para impressão. Seu peso em bits é extremamente grande, por isso menos utilizada que o TIFF. BMP – extensão padrão do Windows. Perdeu espaço para o JPG, que reduz muito o tamanho do arquivo. TGA – extensão de arquivo utilizada para texturas. PSD – extensão padrão do Photoshop. Sua característica principal é a utilização de várias camadas (layers), diferentemente das outras extensões, que são chamadas chapadas (possuem apenas uma camada). CPT – tem as mesmas características do PSD, mas é extensão padrão do Corel PhotoPaint.

EXTENSÕES DE DIAGRAMAÇÃO TXT – extensão de somente texto (sem formatação) e pode ser aberta por qualquer programa que trabalhe com texto. DOC / RTF – são extensões padrão do Word e podem ser abertas por boa parte dos programas. A extensão RTF é o segundo padrão do Word e possui as mesmas características do .DOC PMD / P65 – extensões padrão do PageMaker. São arquivos fechados que só podem ser editados no próprio PageMaker. QXD / QXT – extensões padrão do QuarkPress.

EXTENSÕES FECHADAS SÃO MUITO UTILIZADOS PARA IMPRESSÃO EM UM COMPUTADOR DIFERENTE DO QUE FOI FEITO O TRABALHO. POR ISSO, ESSE TIPO DE EXTENSÃO É MUITO UTILIZADO PARA ENCAMINHAMENTO PARA REVISTAS OU PARA BUREAUS DE IMPRESSÃO. PDF – formato de arquivo fechado utilizado pelo programa Adobe Acrobat. Muito utilizado na Internet pelo fato do texto não ser editável, ainda que possa ser copiado. Obs: Já há programas que convertem PDF em arquivo no Word. PRN – extensão usada principalmente pelo Word para fechamento de arquivo. Pode ser transformada em PDF pelo Acrobat Distiller.

CORES a quantidade de cores varia de acordo com a impressora 1- RGB cores primitivas: vermelho, verde e azul Utilizado para imagens mostradas no monitor 2- CMYK cores primitivas: ciano, magenta, amarelo e preto a quantidade de cores varia de acordo com a impressora rosa, solferino, fúcsia, púrpura e mesmo vermelho são alguns dos nomes como o magenta era conhecido antigamente. É a cor púrpura primário ou vermelho-violetado 3- Lab Color abrange as faixas de cores RGB e CMYK Obs: Muitas vezes uma cor que pode ser visualizada na tela não pode ser impressa, por não estar dentro do limite do modelo. Exemplo disso é a cor neón, que está dentro do modelo RGB mas fora do modelo CMYK. http://www.mundocor.com.br/cores/cores_nomes.htm Curiosidades: http://www.mundocor.com.br/cores/index.asp

RESOLUÇÃO Diferentemente das VETORIAIS, as imagens BITMAP dependem muito da RESOLUÇÃO do monitor, da impressora e do scanner, que podem influenciar diretamente na qualidade da imagem. Um monitor pode trabalhar com diversas configurações. A mais comum é de 800 X 600 (800 pixels na horizontal e 600 pixels na vertical), com 72 dpi (“dots per inch” – pontos por polegada) de resolução. Existem outras: 1024 X 768 1152 X 864 1280 X 720 1280 X 768 1280 X 960 1280 X 1024 O que irá definir a resolução do monitor é a quantidade de pontos por polegada ou centímetro que forma a imagem. Assim, a qualidade da imagem dependerá diretamente desta informação. Para imagens na Internet pode-se usar a resolução de 72 dpi. Já para uma imagem a ser impressa, é melhor usar uma resolução de 300 dpi.

RESOLUÇÃO

RESOLUÇÃO Existem outras configurações para a tela do computador, como por exemplo, a de 1024 X 768 pixels, com 96 dpi de resolução. Quando se tem uma imagem em um arquivo, não é possível aumentar a sua resolução no Photoshop. Somente com o scanner é possível realizar esta tarefa, com a imagem sendo novamente digitalizada no scanner, configurado agora com a resolução desejada. Ao diminuir a resolução de uma imagem (dpi), diminui-se o número de pixels (tamanho da imagem). No entanto, diminuir o número de pixels, não irá diminuir a resolução.

RESOLUÇÃO Você tem que imprimir a capa de um folder de uma empresa Exemplo: Você tem que imprimir a capa de um folder de uma empresa com qualidade profissional. A capa tem o tamanho de papel A4 (21 cm X 29,7 cm). O arquivo em branco no Photoshop terá o mesmo tamanho e resolução de 300 dpi (resolução para imprimir na gráfica) Colocando duas imagens iguais neste arquivo, uma com 300 dpi e outra com 72 dpi, veja o que acontece ...

RESOLUÇÃO A imagem com resolução menor (72 dpi) teve o seu tamanho diminuído para manter uma qualidade proporcional a uma imagem de 300 dpi

RESOLUÇÃO DA IMPRESSORA A RESOLUÇÃO DA IMPRESSORA é a distância em polegadas entre dois pontos, portanto, quanto menor a distância entre eles, melhor a resolução. A impressora de 720 dpi tem uma boa resolução, mas é aconselhável utilizar uma que tenha 1400 ou 2880 dpi. Quando a resolução da impressora é baixa, a imagem vista no monitor não condiz com a imagem impressa. Por exemplo, a foto de uma pessoa impressa em uma impressora de baixa resolução pode apresentar pontos avermelhados. É recomendável converter em BITMAP todos os trabalhos VETORIAIS para que não haja erros na impressão e para diminuir o tempo de impressão do trabalho.

IMAGEM 3D A imagem 3D mistura imagens VETORIAIS e BITMAPS. Os objetos na criação e na modelagem são VETORIAIS (possuem altura, largura e profundidade), podendo-se ter visão completa de todos os seus ângulos. Quando renderizada (pintada), a imagem se torna BITMAP e são utilizados os pontos do monitor como referência. Observe as figuras dos próximos slides. Neles as imagens não são reais, todas foram criadas com polígonos e a grande maioria ajustada ou modificada no PhotoShop.

IMAGEM 3D Na figura de baixo, a luz do abajour foi criada e a imagem foi escurecida.

IMAGEM 3D

IMAGEM 3D

IMAGEM 3D

Versões: 9, 10, 11, 12 e X3 CorelDraw Programa mais completo já criado para a arte gráfica baseada em vetores. Com o CorelDraw, pode-se criar verdadeiras obras de arte, utilizando-se das poderosas ferramentas de desenho e pintura. Com o CorelDraw, pode-se desde logotipos até sofisticadas páginas para a Internet, dependendo apenas da criatividade. Pacote do CorelDraw estão incluídos: CorelDraw PHOTO-PAINT – software destinado ao tratamento de imagens, semelhante ao PhotoShop da Adobe CorelDraw R.A.V.E. – programa voltado para a criação de animações para a Web, semelhante ao Flash, da Macromedia

Versões: 9, 10, 11, 12 e X3 CorelDraw O também incorpora alguns utilitários interessantes para os artistas gráficos: CorelDraw Capture – utilitário para capturar qualquer imagem que esteja na tela do computador, como também gravar ações da tela como arquivos de animação. CorelDraw TEXTURE – permite simular texturas naturais, como nuvens, mármore e madeira, combinando até 7 (sete) camadas de materiais definidas pelo usuário. CorelDraw TRACE – utilitário que permite converter imagens no formato bitmap em imagens vetoriais. Bitstream Font Navigator – utilitário que serve para encontrar fonts de uma forma rápida e fácil, assim como organizá-las em grupos gerenciáveis, exibir e imprimir amostras das mesmas. Canto Cumulus Desktop LE – utilitário utilizado para organizar arquivos gráficos e de mídia em um catálogo que pode ser indexado para que se possa localizar imagens, desenhos, clipart, fotos prontas e filmes Apple Quick Time de forma rápida e fácil.

CorelDraw Versões: 9, 10, 11, 12 e X3 O QUE SE PODE FAZER COM O Panfletos – criar propagandas para empresas, escolas ou instituições. Logomarcas Folders – divulgação de feiras, seminários e eventos em geral. Cartões de visitas – uso das ferramentas de desenho e pintura do CorelDraw. Etiquetas – fins comerciais ou pessoais, de diversos padrões e tamanhos, como etiquetas para preços, fitas de vídeo e de áudio, CD´s e DVD´s, correspondências ... Páginas para a web – uso de recursos como botões de opção, caixas de seleção, listas de opções, botões de enviar, menus pop-up ... Capas – para revistas, livros, CD´s, trabalhos acadêmicos, outras publicações dp gênero.

Photoshop Versões: 7, CS e CS2 Programa de edição de imagens em bitmap. Com o ADSOBE PHOTOSHOP, pode-se alterar fotografias e outros tipos de arte final digitalizada. É possível retocar, aplicar efeitos, inserir textos e corrigir qualquer tipo de imagem. É um software para tratamento de imagens Para se obter um bom desempenho e qualidade de trabalhos, é preciso: Utilizar a camada (LAYER) corretamente; Uma boa seleção no recorte de objetos, sem deixar falhas ou sobras; Conhecer as ferramentas, comandos e teclas de atalho das funções principais; Utilizar corretamente as ferramentas nas situações e momentos propícios

Versões: MX e 8 Flash MX Software desenvolvido pela Macomedia para a criação de filmes para páginas na Internet. Recurso poderosos de desenvolvimento de aplicativos, multimídia e vídeo permitem a criação de sofisticadas interfaces de usuário, publicidade on-line, cursosde aprendizagem eletrônica e front-ends de aplicativos empresariais. É considerado pelos Web Designers e desenvolvedores como o melhor e mais prático software para a criação de Web sites existentes no mercado.

Flash MX Versões: MX e 8 O QUE SE PODE FAZER COM O Com a infinidade de recursos que o Flash possui, pode-se desenvolver não só animações para páginas da Web como também poderosos filmes de desenhos animados independentes, sem falar nos jogos das mais diversas categorias, como também tutoriais para cursos com diversas finalidades. Exemplos: Páginas atraentes e dinâmicas – suas páginas ficarão bem mais atrativas utilizando os recursos de animação disponíveis no Flash. Filmes interativos - pode-se criar filmes interativos para divulgar um produto, uma alestra sobre um evento, um documentário, uma aula, um fluxograma, um organograma, entre outros, e executá-los independente dos browsers. Álbuns de família - pode-se utilizar fotos escaneadas e até filmes domésticos de uma viagem, um casamento, um aniversário, que poderão ser convertidos para a forma digital e criar verdadeiros álbuns de família.

Flash MX Versões: MX e 8 O QUE SE PODE FAZER COM O Jogos - através da linguagem ActionScript, criada especialmente para o Flash, pode-se desenvolver uma boa quantidade de categorias de jogos, como: tabuleiro, labirinto, ação, estratégia, ..., tanto para a Internet como independentes. Banners - o Flash permite-lhe criar uma infinidade de faixas interativas e animadas para deixar seu site bem mais atraente. Na sua grande maioria, são faixas publicitárias das empresas que patrocinam os sites. Botões e cursores animados – com os recursos do Flash pode-se criar uma infinidade de tipos de botões e cursores animados para cada finalidade.

F I M Boa Sorte !