Computação Gráfica e Editoração Eletrônica

renata.prado@estacio.br

Apresentação da disciplina

2

Ementa

3

Operações básicas no tratamento da informação, na computação gráfica e na linguagem visual. O computador como ferramenta do processo criativo. Estudos dos softwares aplicados na Publicidade e no Jornalismo. Manipulação de imagens. Diagramação.

Objetivos gerais

- Identificar a tecnologia como um importante fator de mudanças no atual modo de criação e produção.- Desenvolver competência tecnológica para uso dos softwares de apoio à criação de peças gráficas.

4

Objetivos específicos

- Trabalhar com os principais softwares de manipulação de imagem bitmap, vetorial e de diagramação.- Transmitir conhecimentos sobre o processamento de imagens digitais.- Transmitir conhecimentos sobre as técnicas necessárias para o desenvolvimento de artes gráficas.

5

Avaliações

AV1: Prova teórica (10 pontos) + Tutoriais (4 pontos) + Prova prática (6 pontos). O total será dividido por 2.AV2: Prova teórica (8 pontos) + Tutoriais (2 pontos) + Atividade Estruturada (10 pontos). O total será dividido por 2.AV3: Prova teórica (10 pontos).

6

Importante: todas as atividades estão agendadas desde o primeiro dia de aula. Não haverá flexibilização de datas, inclusive para a realização dos tutoriais. Os alunos ausentes no dia da realização das atividades perderão as notas referentes a elas.

Provas teóricas

Contemplam todo o conteúdo teórico (conteúdo dado em sala, material didático, biblioteca virtual e slides).Contemplam todo o conteúdo prático apresentado em sala via tutoriais (utilização dos softwares).

7

Provas práticas

Serão feitas individualmente com a separação da turma em dois grupos (cada grupo fará a prova em uma data).Será permitida a consulta ao material didático, aos tutoriais do professor e ao caderno.Não será permitida a comunicação entre alunos.

8

Tutoriais

Fornecidos pelo professor, os alunos devem realizar o tutorial nas datas determinadas do cronograma. Pontuação: ao final da aula, após a checagem do professor, será atribuída a pontuação prevista.Os tutoriais podem ser realizados individualmente ou em dupla.

9

A leitura prévia do tutorial é obrigatória. Só será aferida pontuação para o tutorial completo. Portanto, os alunos devem lê-lo antes da aula para facilitar o trabalho. Recomenda-se que os alunos realizem o tutorial em casa, como reforço. No entanto, só serão aferidas notas aos trabalhos realizados em sala sob supervisão do professor.

Frequência

Não haverá flexibilização na frequência. Cada aluno pode faltar a até 25% do total de aulas da disciplina (9).Tolerância de 30 minutos para a chegada ao laboratório na primeira aula (19h) e tolerância de 15 minutos para chegada ao laboratório na segunda aula (21h).

10

Material Didático

11

Biblioteca Virtual Estácio

12

O atraso causa tumulto à aula prática e atrapalha o andamento do curso. Os alunos que porventura chegarem após o horário de tolerância de atraso no dia de realização de tutorial deverão começá-lo do zero, sozinhos. Caso não haja disponibilidade de computadores, poderão realizar a atividade em dupla, mas terão apenas metade da pontuação referente àquele tutorial.

Unidade I

13

Conceitos básicos

O que é Computação Gráfica?

14

Bule de Utah, por Martin Newell e Jim Blinn, 1975.

Computação Gráfica é a disciplina que trata das técnicas e dos métodos computacionais que convertem dados para dispositivos gráficos e vice-versa.

O bule de Utah é um ícone do desenvolvimento precoce da computação gráfica 3D, tendo sido desenvolvido por Martin Newell e modificado por seu colega de trabalho, Jim Blinn em 1975.

O que é Editoração Eletrônica?

18

Para entender o computador

20

ENIAC (Electronic Numerical Integrator and Computer), criado em 1946. Pesava 27 toneladas .

A Editoração Eletrônica é também conhecida como Desktop Publishing. O MS Word é, por exemplo, um software para editoração eletrônica.

“Os computadores também foram concebidos pela mãe de todas as tecnologias, a Segunda Guerra Mundial, mas nasceram somente em 1946 na Filadélfia, se não considerarmos as ferramentas desenvolvidas com objetivos bélicos, como o Colossus britânico (1943) para decifrar códigos inimigos e o Z-3 alemão que, como dizem, foi criado em 1941 para auxiliar os cálculos das aeronaves. Todavia, os Aliados concentravam a maior parte de seus esforços em eletrônica nos programas de pesquisa do MIT (Instituto de Tecnologia de Massachusetts), e a verdadeira experiência da capacidade das calculadoras ocorreu na universidade da Pensilvânia com o patrocínio do exército norte-americano, onde Mauchly e Eckert desenvolveram o primeiro computador para uso geral, em 1946, o ENIAC (calculadora e integrador numérico eletrônico)” (CASTELLS, 1999).

O Altair 8800, da MITS, lançado em 1975.

Apple I, apresentado em uma feira em 1976.

Macintosh, da Apple, 1984, introduz uso de ícones e interface gráfica.

“O advento do microprocessador em 1971, com a capacidade de incluir um computador em um chip, pôs o mundo da eletrônica e, sem dúvida, o próprio mundo, de pernas para o ar. Em 1975, Ed Roberts, um engenheiro que criou uma pequena empresa fabricante calculadoras, a MITS, em Albuquerque, Novo México, construiu uma "caixa de computação" com o inacreditável nome de Altair, inspirado em um personagem da série de TV, Jornada nas Estrelas,que era admirado pela filha do inventor. A máquina era um objeto primitivo, mas foi construída como um computador de pequena escala com um microprocessador” (CASTELLS, 1999).

“O Altair foi a base para o design do Apple I e, posteriormente, do Apple II. Este último foi o primeiro microcomputador de sucesso comercial, idealizado pelos jovens Steve Wozniak e Steve Jobs (após abandonarem os estudos regulares), na garagem da casa de seus pais, em Menlo Park, Vale do Silício. Uma saga verdadeiramente extraordinária que acabou se tornando uma lenda sobre o começo da Era da Informação. Lançada em 1976, com três sócios e um capital de US$ 91 mil, a Apple Computers alcançou em 1982 a marca de US$ 583 milhões em vendas, anunciando a era da difusão do computador” (CASTELLS, 1999).

“O Macintosh da Apple, lançado em 1984, foi o primeiro passo rumo aos computadores de fácil utilização, com a introdução da tecnologia baseada em ícones e interfaces com o usuário, desenvolvida originalmente pelo Centro de Pesquisas Palo Alto da Xerox” (CASTELLS, 1999).

Bit e byte

O bit é a unidade mínima do computador (0 ou 1). 1 byte é uma palavra binária de 8 bits.Enquanto o sistema decimal vai de 0 a 9, o binário possui apenas combinações de 0 e 1.

25

Decimal Binário0 001 012 103 114 1005 1016 1107 1118 10009 1001

10 101011 101112 1100

Relação entre bytes e cores

São necessários 3 bytes para imagens em cores (1 para vermelho (R de red), 1 para Verde (G de green) e 1 para Azul (B de blue).Cada byte, em decimal, varia de 0 a 255. Ou seja, são 256 cores possíveis para cada um.2 (base) elevado ao número de posições (8) permite representar 256 números (em decimal).

27

O sistema binário ou de base 2 é um sistema de numeração posicional em que todas as quantidades se representam com base em dois números, ou seja, zero e um (0 e 1).Os computadores digitais trabalham internamente com dois níveis de tensão, pelo que o seu sistema de numeração natural é o sistema binário (aceso, apagado). Num sistema simples como este é possível simplificar o cálculo, com o auxílio da lógica booleana. Em computação, chama-se um dígito binário (0 ou 1) de bit, que vem do inglês Binary Digit. Um agrupamento de 8 bits corresponde a um byte (Binary Term). Leia mais: Wikipedia: Sistema de Numeração Binário.

Continue convertendo:13: ______14: ______15: ______

Pixels

Um pixel é o menor elemento de uma imagem digital. Quantos mais pixels uma imagem possuir, mais ela se aproximará do objeto original. Portanto, o número de pixels determina a resolução de uma imagem.

29

Um pixel

Descubra quais são estas cores:a) R130 G230 B130 = ___________b) R255 G100 B255 = ___________c) R100 G200 B255 = ___________

Imagens preto e brancoPara imagem preto e branco, só existe um pixel preto, branco, ou entre preto e branco. 0 é preto e 1 é branco. Para a representação binária, varia entre 0 (preto) e 255 (branco).

Imagens coloridasPara cores, cada pixel é descrito por um triplo de número representando a intensidade de vermelho, verde e azul (RGB).

Resolução de imagem

Nível de detalhe que uma imagem comporta. Quanto mais alta a resolução, melhor a qualidade e mais suave a transição de cores.

31

Câmeras e pixels

32

Os quadrados coloridos representam os megapixels. Ao redor, tamanho em polegadas em imagem com 300 ppi (pixels per inch / pixels por polegada).

Uma imagem que tem 2048 pixels de largura e 1536 pixels de altura tem um total de 2048 x 1536 = 3.145.728 pixels, ou 3.1 megapixels. Uma imagem que tem 1000 x 1000 pixel tem quantos megapixels? ________________

Uma câmera de 16 megapixels pode imprimir, em qualidade de 300ppi (ideal para impressão), uma imagem de aproximadamente 11 polegadas (largura) por 16 polegadas (altura).Lembrete:- 1 megapixel é igual a um milhão de pixels (resolução 1000 x 1000). - Uma polegada é igual a 2,54 centímetros. - 300 ppi (pixels por polegada) equivalem a 150dpi (dots ou pontos por polegada). A primeira refere-se ao tamanho da imagem digital e a segunda à impressão.

Imagens para impressão

Para descobrir a maior imagem em qualidade fotográfica que você pode imprimir, divida cada dimensão da imagem por 300.Por exemplo, uma imagem de 3266 x 2450.3266 / 300 = 10,89 polegadas (= 27,5cm)2450 / 300 = 8,17 polegadas (=20,7cm)

34

Resolução de imagens

Para saber qual resolução é necessária a uma imagem, é preciso saber antes qual é o seu destino (internet, visualização em tela, impressão, etc).- Para visualização no monitor (e para web): 72ppi- Para impressão: 300ppi

35

Bitmap (ou raster)

Estrutura de dados que representa uma grade de pixels, ou pontos de cor, que podem ser visualizados através de um monitor, de papel ou outro meio de exibição. As imagens raster são armazenadas em arquivos de imagens com formatos variados.

36

No Photoshop dá para aumentar o tamanho da imagem e até mesmo dobar o número de pixels nela. Neste caso, a qualidade da câmera e lente é ainda mais importante, já que cada detalhe é ampliado. Se uma imagem é ampliada exageradamente por este método, chamado interpolação, ela irá ficar embassada ou pixelada.

Incrementar a resolução de uma imagem de baixa resolução apenas aumenta o número de pixels e raramente melhora a qualidade.

Um mapa de bits é caracterizado pela largura e altura da imagem em pixels e pelo número de bits por pixel (que determina o número de cores que podem representar).

Resolução de imagens raster

Imagens raster são dependentes de sua resolução.Não podem ser escalonadas arbitrariamente sem perda de qualidade.

37

38

Formatos de imagens

JPEG: formato de compressão para a web, imagens enviadas por email.GIF: 256 cores ou menos. Web.PNG: Muito usada para trabalhar no flash. Comporta transparência.

EPS: para impressão (possui um JPEG como preview).TIFF: para impressão. Mais flexível que a EPS.

39

Quanto maior a resolução da imagem, mais quadrados que você pode encaixar em uma área e mais suaves as curvas aparecem. Um círculo de uma polegada por uma polegada foi reduzido de 600 dpi para 4 dpi em incrementos de 50% (600 -> 300 -> 150 -> 72 -> 36 -> 18 -> 9 -> 4). Note que o círculo manteve-se com 1"x 1" dimensão. Só reduzimos o número físico de pixels dentro área de 1".

Os arquivos de imagem são compostos por dados digitais. Um formato de arquivo de imagem pode armazenar dados descompactados, compactados ou formatos vetoriais.

Compressão de imagem

40

Vetor

Uso de primitivas geométricas como pontos, linhas, curvas e formas ou polígonos baseados em expressões matemáticas, para representar imagens em computação gráfica.Formatos mais comum: CDR (Corel) e Ai (Illustrator).

41

Bitmap Vetor

A imagem original, sem compressão (à esquerda) é de 11,6 MB. Após a compressão (à direita), o tamanho do arquivo é de 363.1K. A compressão diminui o tamanho do arquivo, mas tem o efeito adicional de perda de qualidade. Compare os destaques nas imagens da esquerda e da direita para ver a perda de detalhe. Compressão sem perda: nenhum dado da imagem original é descartado ou perdido. Compressão com perda: há queda da qualidade da imagem, mas em alguns casos não é perceptível ao olho humano.

Monitores modernos e impressoras são dispositivos de varredura. Formatos vetoriais devem ser convertidos para o formato raster (bitmaps - matrizes de pixels) para que possam ser renderizados (exibidos ou impressos).

Transformar um bitmap em um vetor é um processo chamado de vetorização de imagem.

44

Uma vez que a arte é feita a partir de uma série de curvas matemáticas, imprimirá com curvas nítidas mesmo quando redimensionada. Por exemplo, pode-se imprimir o vetor de um logotipo em uma pequena folha de papel, e, em seguida, ampliar o mesmo vetor para o tamanho outdoor e manter a mesma qualidade. Um raster/bitmap iria borrar ou “pixelar” excessivamente se fosse ampliada a partir do tamanho do cartão de visita para o tamanho outdoor.

É fácil converter um arquivo vetorial a um bitmap/raster, mas é muito mais difícil transformar um bitmap em um vetor. Na imagem, note que o telefone passou por um processo de vetorização a partir da foto. Quanto mais complexo o bitmap, mais complexo é o processo de vetorização.

Se olharmos detalhadamente, veremos que as imagens raster, ou bitmap, são mapas de pixels. Já os vetores são conjuntos de formas, curvas, linhas...

Cores

Ondas eletromagnéticas captadas pelo olho humano que causam impressões no cérebro. Para as enxergarmos, dependemos de luz.

46

Escala RGB

Síntese aditiva: a soma de todas as radiações nos transmite a sensação de ver a luz branca.Usada para arquivos e imagens voltadas para mídias digitais.

47

Escala CMYK

Síntese substrativa: cores são percebidas por radiações eletromagnéticas refletidas por corpos que absorvem determinados comprimentos de onda.

Escala usada para impressão.

48

Vermelho + Azul-violeta = MagentaVermelho + Verde = AmareloVerde + Azul-violeta = CianoVermelho + Verde + Azul-violeta = Branco

“Isaac Newton foi o responsável pelo desenvolvimento da teoria das cores. Em seus experimentos, verificou que a luz branca, quando incidida sobre um prisma, se divide em aproximadamente trinta cores, sendo predominantes o vermelho,o verde e o azul-violeta. O nomes dessas cores, na língua inglesa (Red, Green, Blue) geraram uma escala muito conhecida, a RGB. Se pintarmos um disco com faixas radiais nas cores do arco-íris e o girarmos muito rápido, enxergaremos o disco como se fosse branco” (COLARO, 2007).

C = ciano, M = magenta, Y = amarelo, K = preto.“... quando se somam cores substrativas, como ao pintarmos a mesma superfície com mais tintas, o resultado é reduzir a cor refletida por aquela superfície. Em teoria, se somarmos as três cores primárias da síntese substrativa (magenta, ciano e amarelo) obteríamos o preto. Isso só não acontece porque não existem pigmentos suficientemente puros, e então obtemos um cinza bem escuro. Por esse motivo, em produção gráfica utiliza-se a escala CMYK, que é a base de praticamente toda a reprodução gráfica” (COLLARO, 2007).

49

O círculo cromático

50

Preencha o padrão de cores correto

a) Um banner para um site( ) RGB ( ) CMYKb) Um flyer que será impresso em gráfica:( ) RGB ( ) CMYKc) Uma revista que será impressa:( ) RGB ( ) CMYKd) Uma revista digital (que será lida na tela):( ) RGB ( ) CMYKe) Uma foto que será impressa:( ) RGB ( ) CMYKf) Uma foto para o facebook:( ) RGB ( ) CMYK

51

Leia mais no livro que se encontra à disposição para leitura online na Biblioteca Virtual Estácio. O título é “Produção Gráfica: arte e técnica da mídia impressa”, da página 15 à 30.

“O círculo cromático originado do espectro visível dispõe as cores complementares diametralmente opostas de uma estrela de seis pontas. Se forem cores emitidas (escala RGB), a resultante da soma dessas cores complementares será o branco; se forem cores refletidas (escala CMYK), a soma será o preto. O domínio desse conceito é fundamental para operacionalizar cores, tanto técnica como psicologicamente, por as cores complementares são as que causam mais contraste quando combinadas (mas não misturadas)” (COLLARO, 2007).