SlideShare uma empresa Scribd logo
1 de 25
Baixar para ler offline
CONCEITOS
Prof.ª. Giorgia Barreto L. Parrião [2017]
APLICATIVOS GRÁFICOS
PIXEL
Profª Giorgia Barreto Lima Parrião 2
▪ Unidade básica de informação para um
monitor de computador ou imagem digital.
▪ Telas e imagens são divididas em grades
com quadrados, quanto maior o numero de
quadrados, maior será sua resolução
(qualidade).
O PIXEL E O PONTO
▪ O PPI significa “pixels por polegada” (pixels per inch) e o DPI significa “pontos por
polegada” (dots per inch). Os dois termos servem para definir a resolução.
▪ Ambos servem pra denominar a “resolução” de uma imagem, indicando quantos pixels ou
pontos existem em uma polegada, mas sem especificar proporções ou dimensões.
▪ Na hora de imprimir, o pixel deixa de existir e que o que vemos no papel são apenas
minúsculos pontos que compõem uma imagem. Assim como o pixel, o ponto não costuma ter
tamanho fixo, sendo que seu tamanho real é definido de acordo com a resolução.
Profª Giorgia Barreto Lima Parrião 3
DPI X PPI
▪ O PPI significa “pixels por polegada” (pixels per inch) e o DPI significa “pontos por
polegada” (dots per inch). Os dois termos servem para definir a resolução.
▪ Ambos servem pra denominar a “resolução” de uma imagem, indicando quantos
pixels ou pontos existem em uma polegada, mas sem especificar proporções ou
dimensões.
▪ Na hora de imprimir, o pixel deixa de existir e que o que vemos no papel são
apenas minúsculos pontos que compõem uma imagem. Assim como o pixel, o ponto
não costuma ter tamanho fixo, sendo que seu tamanho real é definido de acordo
com a resolução.
DPI – DOTCH PER INCH (PONTOS POR POLEGADA)
▪ O DPI é semelhante ao PPI, no DPI a
definição da imagem é determinada em
pontos por polegada, em vez de pixels,
ou seja, é a medida de resolução de
uma imagem impressa ou digital,
descrevendo seu grau de definição,
quanto mais pontos, maior a definição.
▪ já que estamos tratando da impressão
de imagens. Essa mudança de “unidade”
de medida é necessária, porque o pixel
é um elemento totalmente virtual, não
podendo ser impresso.
PPI – PIXELS PER INCH (PIXELS POR POLEGADA)
▪ indica a quantidade de pixels existentes em uma polegada quadrada de uma
imagem digital, independente se ela está na vertical ou na horizontal. reflete a
quantidade de informação contida na imagem.
Para calcular a densidade de uma determinada tela,
Use o site Pixel Density Calculator (Calculadora
densidade de pixels:
http://pixeldensitycalculator.com/), digite os valores
em pixels da altura e largura do display, informando o
tamanho em polegadas da diagonal do aparelho.
BITMAP
Profª Giorgia Barreto Lima Parrião 7
▪ Imagem formada por um numero fixo de pixels (pontos). Quanto mais frequentes e menores
foram os pontos, mais nítida e detalhada será a imagem.
▪ Suporta indexação ou TrueColor (mas não é compactado), mas não suporta canal alfa, nem
transparência.
▪ Podem ser facilmente coloridas para criar efeitos visuais intensos.
▪ A cor dos bitmaps (do fundo ou do objeto) pode ser alterada sem o uso de um programa de
manipulação de imagens (Photoshop).
FORMATOS DE ARQUIVOS - BITMAP
GIF - Graphics Interchange Format
▪ Formato de imagem de mapa de bits muito usado na web, quer para imagens fixas de baixa qualidade, quer para
animações. Foi um dos primeiros dois formatos de imagem comumente usado em sites da Web, sendo o outro a XBM
preto e branco. JPEG veio mais tarde com o navegador Mosaic.
▪ Suporta apenas imagens indexadas e transparência em lugar de canal alfa, ou seja, um pixel desta imagem pode
ser ou totalmente opaco ou totalmente transparente.
▪ Esse formato possibilita pequenas animações de forma simples , formadas por várias imagens GIF compactadas
numa só. É utilizado para compactar objetos em jogos eletrônicos, para usar como emoticon em mensageiros
instantâneos e para enfeitar sites na Internet.
Profª Giorgia Barreto Lima Parrião 8
JPG/JPEG - Joint Photographic Experts Group:
▪ É um método comum usado para comprimir imagens fotográficas seu grau de redução pode ser
ajustado permitindo o ajuste do tamanho de armazenamento sem perda de qualidade da
imagem na compressão .
▪ É indicado para imagens com gradação de pixel complexa(variação de cores, luz e sombras),
mas não para cores chapadas (para este caso é melhor GIF ou BMP).
Pontos negativos:
▪ A compactação causa perda de informação e isso se representa em danos à imagem, torna-o
inadequado quando não se trata da publicação do produto final.
▪ Também não suporta transparência nem canal alfa.
Profª Giorgia Barreto Lima Parrião 9
PNG - Portable Network Graphics:
▪ Formato de dados utilizado para imagens, criado para substituir o GIF, é livre e recomendado
pela W3C
▪ Suporta uma maior gama de profundidade de cores, alta compressão e é regulável. O que
permite comprimir imagens sem perda de qualidade e mantendo sua leveza.
▪ É possível retirar seu fundo (diferente da transparência do GIF), e definir o nível de opacidade
de cada pixel, o que permite sua adequação a background, sem serrilhamento, o que não se
consegue com os outros formatos.
▪ Suporta um grande número de informações: canal alfa, correção de gama, verificação de
integridade, suporte a imagens com paleta de cores ou truecolor e comprime com nível regulável
e sem perdas
Profª Giorgia Barreto Lima Parrião 10
VETOR
Profª Giorgia Barreto Lima Parrião 11
▪ É formado por coordenadas cartesianas (eixo X e Y) – cálculos matemáticos que definem
características à imagem e definido pelos seus atributos . Exemplo: direção, módulos e
sentidos.
▪ Podem ser ampliados sem perda de definição (qualidade) já que são alterados apenas os
atributos .
FORMATOS DE ARQUIVO - VETOR
Profª Giorgia Barreto Lima Parrião 12
PS – PostScript
▪ Linguagem de programação para visualização de informações, ou de descrição de páginas,
originalmente criada para impressão e posteriormente modificada para o uso com monitores
('display PostScript').
▪ Este formato é largamente suportado e pode, inclusive, ser enviado diretamente à maioria
das impressoras recentes o que permite uma melhor qualidade de impressão.
▪ não suporta canal alfa nem filtros e por este motivo não pode ser usado sempre como
formato intermediário para impressão.
EPS - Encapsulated PostScript :
▪ Formato digital para imagens que não contem representação direta de pixels, portanto, não
pode ser lido por programas de manipulação de imagens como o Photoshop (embora possa ser
lido por programas de editoração), mas apenas criado por eles para gerar saídas.
▪ É basicamente um PS com algumas restrições que ajudam na incorporação deste formato em
outros arquivos PostScript.
▪ Permitem redimensionamento, distorção e separação de cores.
Profª Giorgia Barreto Lima Parrião 13
TIFF - Tagged Image File Format:
▪ Formato de arquivo raster para imagens digitais, popularmente chamado de bitmap.
▪ Foi criado para uso no processo de impressão PostScript, é controlado pela Adobe.
▪ Transformou-se no formato padrão dos arquivos gráficos (32-bits) com elevada definição de
cores.
▪ É usado em softwares de manipulação de imagem: Photoshop, DTP e scanners .
▪ É o meio flexível para armazenar meios-tons e imagens fotográficas.
▪ Suporta canal alfa e tipos distintos de compactação. Também é possível usar sem compactação
e este é o uso mais comum.
Profª Giorgia Barreto Lima Parrião 14
VETOR X BITMAP
Profª Giorgia Barreto Lima Parrião 15
Profª Giorgia Barreto Lima Parrião 16
RASTERIZAÇÃO (CONVERSÃO)
▪ Processo de transformação de uma imagem vetorial em uma imagem bitmap (pixels),
também conhecida como raster. Neste caso, teremos uma imagem rasterizada.
▪ Em geral, isto é possível importando imagens, originalmente vetoriais, em programas que
trabalham com imagens bitmap.
▪ O Photoshop permite esse processo e, provavelmente, você utilizará muitas vezes, como, por
exemplo, para apresentar logotipos (usualmente concebidos como vetor) em páginas de
internet, como imagem jpg, gif ou png.
▪ Os programas vetoriais, como o CorelDraw, o InDesign e o Illustrator, também costumam
permitir a exportação para bitmap.
Profª Giorgia Barreto Lima Parrião 17
▪ Existem aplicativos que vetorizam automaticamente uma imagem bitmap, transformando-a em
vetor por um processo conhecido como auto-tracing.
▪ Funciona bem, em especial para elementos com contornos bem definidos.
▪ Designers, no entanto, trabalham muito com o que chamamos de: VETORIZAÇÃO MANUAL
▪ Como que decalcando um desenho (quando você coloca uma transparência sobre a imagem
original e desenha uma nova) e utilizando ferramentas adequadas de programas como
o Illustrator ou o CorelDraw, obtém-se uma imagem vetorizada mais perfeita e detalhada.
▪ Com este processo, você pode tanto obter uma ilustração realista (onde imagem vetorizada e
imagem bitmap parecem idênticas), ou uma simplificação (ilustração estilizada).
Profª Giorgia Barreto Lima Parrião 18
RGB (PROCESSO ADITIVO – LUZ – DIGITAL)
Cor = Luz
União = Branco
Ausência = Preto
▪ É o sistema aditivo de cores, ou seja, de
projeções de luz, como monitores e data shows,
em contraposição ao sistema subtrativo, que é o
das impressões(CMKY).
▪ A escala de RGB varia de 0 (mais escuro) a
255 (mais claro).
Profª Giorgia Barreto Lima Parrião 19
CORES DE 8 A 16 BITS
Utilizado para armazenar informações de imagens coloridas em um arquivo de imagem
digital.
No sistema 8 Bits, cada pixel é representado por 1 Byte de 8 Bits, fornecendo uma
exibição máxima de 256 cores.
Já o sistema de 16 bits, permite a exibição de até 65.536 cores.
Profª Giorgia Barreto Lima Parrião 20
CMYK (SUBTRATIVO – PIGMENTO – IMPRESSÃO )
▪ Sistema de cores baseado na síntese subtrativa,
segundo a qual, a mistura em partes iguais dos
três pigmentos primários subtrativos (ciano,
magenta e amarelo) resulta em preto.
▪ Funciona devido à absorção de luz. As cores
que são vistas vêm da parte da luz que não é
absorvida. Cor = Pigmento
União = Preto
Ausência = Branco
Profª Giorgia Barreto Lima Parrião 21
PANTONE (COR ESPECIAL – PIGMENTO – IMPRESSÃO )
Utilizado para reproduzir uma cor exata nos processos de impressão CMYK, permitindo
combinações de cores especificas utilizando a tabela de cor Pantone, que associa cada
tonalidade de cor a um código .
ATIVIDADE 1
1- Utilizando um software para ilustração vetorial, crie:
A. Pontos, linhas retas e curvas, polígonos, círculos e elipses.
B. Uma frase com no mínimo 4 palavras.
C. Aplique cores aos itens A e B.
2- Rasterize a imagem e em seguida exporte a ilustração produzida nos formatos: GIF, TIFF,
JPG, PNG.
3- Em seguida abra essas imagens exportadas em um softwares de edição de imagens, em
seguida salve 2 copias de cada imagem produzida aumentando (impressão) e diminuindo
(Web) sua DPI.
Profª Giorgia Barreto Lima Parrião 22
4- Faça o mesmo utilizando PPI.
5- Nomeei os arquivos conforme nomenclatura abaixo:
SeuNome_SuaTurma_Data(ddmmaa)_1
SeuNome_SuaTurma_Data(ddmmaa)_ 2
SeuNome_SuaTurma_Data(ddmmaa)_ 3
SeuNome_SuaTurma_Data(ddmmaa)_4
SeuNome_SuaTurma_Data(ddmmaa)_5
Ex: Giorgia_1an_100915_1
6- Salve-os como PNG ou JPG no doretório TEMP em seu compurador na pasta
AplicativosGraficos.
Profª Giorgia Barreto Lima Parrião 23
Profª Giorgia Barreto Lima Parrião 24
BIBLIOGRAFIA
▪ COLLARO, Antônio. Projeto Gráfico: teoria e prática da diagramação. São Paulo:
Summus, 2000.
▪ FALLEIROS, Dario Pimentel. O mundo gráfico da informática. São Paulo: Futura, 2003.
▪ HORIE, Ricardo Minoru; PEREIRA, Ricardo Pagemaker. 300 superdicas de editoração,
design e artes gráficas. São Paulo: Senac, 2004.
▪ Psicodinâmica das Cores em Comunicação. Modesto Farina. Editora Edgard Blücher,
1982
25
Obrigada!
Obrigada!!!
Prof.ª. Giorgia Barreto

Mais conteúdo relacionado

Mais procurados

Manual de Normas e Procedimentos
Manual de Normas e ProcedimentosManual de Normas e Procedimentos
Manual de Normas e Procedimentosdmazbnet
 
Aula 003 - Imagem, resolução e formatos
Aula 003 - Imagem, resolução e formatosAula 003 - Imagem, resolução e formatos
Aula 003 - Imagem, resolução e formatosOsmar Rios
 
Resumo Produção Grafica
Resumo Produção GraficaResumo Produção Grafica
Resumo Produção Graficadualpixel
 
Imagem Digital - VETOR E BITMAP
Imagem Digital - VETOR E BITMAPImagem Digital - VETOR E BITMAP
Imagem Digital - VETOR E BITMAPDaniel Soto
 
2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps
2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps
2014 - Multimídia e Internet - 04 Imagem Digital - BitmapsWillian Magalhães
 
Producao Grafica - Fundamentos
Producao Grafica - FundamentosProducao Grafica - Fundamentos
Producao Grafica - Fundamentosdualpixel
 
InDesign - Fechamento de Arquivo em PostScript e PDF
InDesign - Fechamento de Arquivo em PostScript e PDFInDesign - Fechamento de Arquivo em PostScript e PDF
InDesign - Fechamento de Arquivo em PostScript e PDFdualpixel
 
Formatos de arquivo - PNG
Formatos de arquivo - PNGFormatos de arquivo - PNG
Formatos de arquivo - PNGGabriel Bemfica
 
Manual Digital
Manual DigitalManual Digital
Manual Digitaldmazbnet
 
Fechamento de Arquivos para Impressão - PDF & PostScript
Fechamento de Arquivos para Impressão - PDF & PostScriptFechamento de Arquivos para Impressão - PDF & PostScript
Fechamento de Arquivos para Impressão - PDF & PostScriptdualpixel
 
Formatos Arquivos - Qual devo usar?
Formatos Arquivos - Qual devo usar?Formatos Arquivos - Qual devo usar?
Formatos Arquivos - Qual devo usar?dualpixel
 
2014 - Multimídia e Internet - 03 Imagem Digital - Vetores
2014 - Multimídia e Internet - 03 Imagem Digital - Vetores2014 - Multimídia e Internet - 03 Imagem Digital - Vetores
2014 - Multimídia e Internet - 03 Imagem Digital - VetoresWillian Magalhães
 

Mais procurados (20)

Formato Imagens
Formato ImagensFormato Imagens
Formato Imagens
 
Manual de Normas e Procedimentos
Manual de Normas e ProcedimentosManual de Normas e Procedimentos
Manual de Normas e Procedimentos
 
Imagens
ImagensImagens
Imagens
 
Aula 003 - Imagem, resolução e formatos
Aula 003 - Imagem, resolução e formatosAula 003 - Imagem, resolução e formatos
Aula 003 - Imagem, resolução e formatos
 
Bitmap ou vetor?
Bitmap ou vetor?Bitmap ou vetor?
Bitmap ou vetor?
 
Resumo Produção Grafica
Resumo Produção GraficaResumo Produção Grafica
Resumo Produção Grafica
 
Imagem Digital - VETOR E BITMAP
Imagem Digital - VETOR E BITMAPImagem Digital - VETOR E BITMAP
Imagem Digital - VETOR E BITMAP
 
2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps
2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps
2014 - Multimídia e Internet - 04 Imagem Digital - Bitmaps
 
Producao Grafica - Fundamentos
Producao Grafica - FundamentosProducao Grafica - Fundamentos
Producao Grafica - Fundamentos
 
Aula fotografia digital
Aula fotografia digitalAula fotografia digital
Aula fotografia digital
 
InDesign - Fechamento de Arquivo em PostScript e PDF
InDesign - Fechamento de Arquivo em PostScript e PDFInDesign - Fechamento de Arquivo em PostScript e PDF
InDesign - Fechamento de Arquivo em PostScript e PDF
 
Vetorizacao
Vetorizacao Vetorizacao
Vetorizacao
 
DigitalPrint
DigitalPrintDigitalPrint
DigitalPrint
 
Formatos de arquivo - PNG
Formatos de arquivo - PNGFormatos de arquivo - PNG
Formatos de arquivo - PNG
 
Manual Digital
Manual DigitalManual Digital
Manual Digital
 
07 pre impressao
07 pre impressao07 pre impressao
07 pre impressao
 
Fechamento de Arquivos para Impressão - PDF & PostScript
Fechamento de Arquivos para Impressão - PDF & PostScriptFechamento de Arquivos para Impressão - PDF & PostScript
Fechamento de Arquivos para Impressão - PDF & PostScript
 
Formatos Arquivos - Qual devo usar?
Formatos Arquivos - Qual devo usar?Formatos Arquivos - Qual devo usar?
Formatos Arquivos - Qual devo usar?
 
02 introducao pre_impressao
02 introducao pre_impressao02 introducao pre_impressao
02 introducao pre_impressao
 
2014 - Multimídia e Internet - 03 Imagem Digital - Vetores
2014 - Multimídia e Internet - 03 Imagem Digital - Vetores2014 - Multimídia e Internet - 03 Imagem Digital - Vetores
2014 - Multimídia e Internet - 03 Imagem Digital - Vetores
 

Semelhante a Aplicativos Gráficos Conceitos Introdutórios

Manual Infoglobo
Manual InfogloboManual Infoglobo
Manual Infoglobodmazbnet
 
Comunicação visual fatece - bkp 2
Comunicação visual   fatece - bkp 2Comunicação visual   fatece - bkp 2
Comunicação visual fatece - bkp 2edsonfgodoy
 
Representação de imagens em formato digital
Representação de imagens em formato digitalRepresentação de imagens em formato digital
Representação de imagens em formato digitalHelinton Bruce
 
Imagem Digital
Imagem DigitalImagem Digital
Imagem Digitalschool
 
Cores e Definições de Impressão - Produção Gráfica 2022
Cores e Definições de Impressão - Produção Gráfica 2022Cores e Definições de Impressão - Produção Gráfica 2022
Cores e Definições de Impressão - Produção Gráfica 2022Renato Melo
 
Palestra Digitalizacao e Preservacao Digital: uma introdução / relato de caso
Palestra Digitalizacao e Preservacao Digital: uma introdução / relato de casoPalestra Digitalizacao e Preservacao Digital: uma introdução / relato de caso
Palestra Digitalizacao e Preservacao Digital: uma introdução / relato de casoSIBiUSP
 
06 pre impressao_reticulagem_linguagens_problemas
06 pre impressao_reticulagem_linguagens_problemas06 pre impressao_reticulagem_linguagens_problemas
06 pre impressao_reticulagem_linguagens_problemasLeandro Canabrava
 
O uso de imagens na educação
O uso de imagens na educaçãoO uso de imagens na educação
O uso de imagens na educaçãoJaire Passos
 
Aula 03 - elementos-basicos
Aula 03 - elementos-basicosAula 03 - elementos-basicos
Aula 03 - elementos-basicosAlan Vasconcelos
 
Aula2_3_MTM.ppt
Aula2_3_MTM.pptAula2_3_MTM.ppt
Aula2_3_MTM.pptGumboScout
 

Semelhante a Aplicativos Gráficos Conceitos Introdutórios (20)

Aula resolução
Aula resoluçãoAula resolução
Aula resolução
 
ComputaçãO GráFica Para Designers
ComputaçãO GráFica Para DesignersComputaçãO GráFica Para Designers
ComputaçãO GráFica Para Designers
 
Manual Infoglobo
Manual InfogloboManual Infoglobo
Manual Infoglobo
 
Comunicação visual fatece - bkp 2
Comunicação visual   fatece - bkp 2Comunicação visual   fatece - bkp 2
Comunicação visual fatece - bkp 2
 
Representação de imagens em formato digital
Representação de imagens em formato digitalRepresentação de imagens em formato digital
Representação de imagens em formato digital
 
Apostila photoshop 7
Apostila photoshop 7 Apostila photoshop 7
Apostila photoshop 7
 
Imagem Digital
Imagem DigitalImagem Digital
Imagem Digital
 
Adeus Gordurinhas
Adeus GordurinhasAdeus Gordurinhas
Adeus Gordurinhas
 
Cores e Definições de Impressão - Produção Gráfica 2022
Cores e Definições de Impressão - Produção Gráfica 2022Cores e Definições de Impressão - Produção Gráfica 2022
Cores e Definições de Impressão - Produção Gráfica 2022
 
Tamanho resolução
Tamanho resoluçãoTamanho resolução
Tamanho resolução
 
Palestra Digitalizacao e Preservacao Digital: uma introdução / relato de caso
Palestra Digitalizacao e Preservacao Digital: uma introdução / relato de casoPalestra Digitalizacao e Preservacao Digital: uma introdução / relato de caso
Palestra Digitalizacao e Preservacao Digital: uma introdução / relato de caso
 
Edição de vídeos
Edição de vídeosEdição de vídeos
Edição de vídeos
 
06 pre impressao_reticulagem_linguagens_problemas
06 pre impressao_reticulagem_linguagens_problemas06 pre impressao_reticulagem_linguagens_problemas
06 pre impressao_reticulagem_linguagens_problemas
 
aula1_2.pdf
aula1_2.pdfaula1_2.pdf
aula1_2.pdf
 
Gerenciando a cor nos softwares da adobe - Maquiagem
Gerenciando a cor nos softwares da adobe - MaquiagemGerenciando a cor nos softwares da adobe - Maquiagem
Gerenciando a cor nos softwares da adobe - Maquiagem
 
O uso de imagens na educação
O uso de imagens na educaçãoO uso de imagens na educação
O uso de imagens na educação
 
Aula 03 - elementos-basicos
Aula 03 - elementos-basicosAula 03 - elementos-basicos
Aula 03 - elementos-basicos
 
Slide blog
Slide blogSlide blog
Slide blog
 
Slide blog
Slide blogSlide blog
Slide blog
 
Aula2_3_MTM.ppt
Aula2_3_MTM.pptAula2_3_MTM.ppt
Aula2_3_MTM.ppt
 

Mais de Giorgia Barreto Lima Parrião

059 - Sistema de coleta on-line do Censo Escolar da Educação Básica - Educace...
059 - Sistema de coleta on-line do Censo Escolar da Educação Básica - Educace...059 - Sistema de coleta on-line do Censo Escolar da Educação Básica - Educace...
059 - Sistema de coleta on-line do Censo Escolar da Educação Básica - Educace...Giorgia Barreto Lima Parrião
 
Avaliação da Interface do site da biblioteca do UniProjeção: Usabilidade e Ac...
Avaliação da Interface do site da biblioteca do UniProjeção: Usabilidade e Ac...Avaliação da Interface do site da biblioteca do UniProjeção: Usabilidade e Ac...
Avaliação da Interface do site da biblioteca do UniProjeção: Usabilidade e Ac...Giorgia Barreto Lima Parrião
 
Melhor idade conectada: um panorama da interação entre idosos e tecnologias m...
Melhor idade conectada: um panorama da interação entre idosos e tecnologias m...Melhor idade conectada: um panorama da interação entre idosos e tecnologias m...
Melhor idade conectada: um panorama da interação entre idosos e tecnologias m...Giorgia Barreto Lima Parrião
 

Mais de Giorgia Barreto Lima Parrião (20)

Conheça a Terapeuta Giorgia Barreto
Conheça a Terapeuta Giorgia BarretoConheça a Terapeuta Giorgia Barreto
Conheça a Terapeuta Giorgia Barreto
 
059 - Sistema de coleta on-line do Censo Escolar da Educação Básica - Educace...
059 - Sistema de coleta on-line do Censo Escolar da Educação Básica - Educace...059 - Sistema de coleta on-line do Censo Escolar da Educação Básica - Educace...
059 - Sistema de coleta on-line do Censo Escolar da Educação Básica - Educace...
 
CirculoCromático.pdf
CirculoCromático.pdfCirculoCromático.pdf
CirculoCromático.pdf
 
Semiótica em Design - Aula1
Semiótica em Design - Aula1Semiótica em Design - Aula1
Semiótica em Design - Aula1
 
Semiótica em Design - Aula4
Semiótica em Design - Aula4Semiótica em Design - Aula4
Semiótica em Design - Aula4
 
Semiótica em Design - Aula3
Semiótica em Design - Aula3Semiótica em Design - Aula3
Semiótica em Design - Aula3
 
Semiótica em Design - Aula 2
Semiótica em Design - Aula 2Semiótica em Design - Aula 2
Semiótica em Design - Aula 2
 
Semiótica - Aula 4
Semiótica - Aula 4Semiótica - Aula 4
Semiótica - Aula 4
 
Semiótica - Aula 3
Semiótica - Aula 3Semiótica - Aula 3
Semiótica - Aula 3
 
Semiótica - Aula 2
Semiótica - Aula 2Semiótica - Aula 2
Semiótica - Aula 2
 
Semiótica - Aula 1
Semiótica - Aula 1Semiótica - Aula 1
Semiótica - Aula 1
 
Avaliação da Interface do site da biblioteca do UniProjeção: Usabilidade e Ac...
Avaliação da Interface do site da biblioteca do UniProjeção: Usabilidade e Ac...Avaliação da Interface do site da biblioteca do UniProjeção: Usabilidade e Ac...
Avaliação da Interface do site da biblioteca do UniProjeção: Usabilidade e Ac...
 
Caderno de Referência - Pró-Conselho - MEC (2004)
Caderno de Referência - Pró-Conselho - MEC (2004)Caderno de Referência - Pró-Conselho - MEC (2004)
Caderno de Referência - Pró-Conselho - MEC (2004)
 
Melhor idade conectada: um panorama da interação entre idosos e tecnologias m...
Melhor idade conectada: um panorama da interação entre idosos e tecnologias m...Melhor idade conectada: um panorama da interação entre idosos e tecnologias m...
Melhor idade conectada: um panorama da interação entre idosos e tecnologias m...
 
Introdução ao Illustrator
Introdução ao IllustratorIntrodução ao Illustrator
Introdução ao Illustrator
 
Introdução ao Photoshop
Introdução ao PhotoshopIntrodução ao Photoshop
Introdução ao Photoshop
 
Agência de Publicidade: áreas e setores
Agência de Publicidade:  áreas e setoresAgência de Publicidade:  áreas e setores
Agência de Publicidade: áreas e setores
 
Processos de Comunicação
Processos de ComunicaçãoProcessos de Comunicação
Processos de Comunicação
 
Fundamentos imagem
Fundamentos imagemFundamentos imagem
Fundamentos imagem
 
O que é propaganda???
O que é propaganda???O que é propaganda???
O que é propaganda???
 

Aplicativos Gráficos Conceitos Introdutórios

  • 1. CONCEITOS Prof.ª. Giorgia Barreto L. Parrião [2017] APLICATIVOS GRÁFICOS
  • 2. PIXEL Profª Giorgia Barreto Lima Parrião 2 ▪ Unidade básica de informação para um monitor de computador ou imagem digital. ▪ Telas e imagens são divididas em grades com quadrados, quanto maior o numero de quadrados, maior será sua resolução (qualidade).
  • 3. O PIXEL E O PONTO ▪ O PPI significa “pixels por polegada” (pixels per inch) e o DPI significa “pontos por polegada” (dots per inch). Os dois termos servem para definir a resolução. ▪ Ambos servem pra denominar a “resolução” de uma imagem, indicando quantos pixels ou pontos existem em uma polegada, mas sem especificar proporções ou dimensões. ▪ Na hora de imprimir, o pixel deixa de existir e que o que vemos no papel são apenas minúsculos pontos que compõem uma imagem. Assim como o pixel, o ponto não costuma ter tamanho fixo, sendo que seu tamanho real é definido de acordo com a resolução. Profª Giorgia Barreto Lima Parrião 3
  • 4. DPI X PPI ▪ O PPI significa “pixels por polegada” (pixels per inch) e o DPI significa “pontos por polegada” (dots per inch). Os dois termos servem para definir a resolução. ▪ Ambos servem pra denominar a “resolução” de uma imagem, indicando quantos pixels ou pontos existem em uma polegada, mas sem especificar proporções ou dimensões. ▪ Na hora de imprimir, o pixel deixa de existir e que o que vemos no papel são apenas minúsculos pontos que compõem uma imagem. Assim como o pixel, o ponto não costuma ter tamanho fixo, sendo que seu tamanho real é definido de acordo com a resolução.
  • 5. DPI – DOTCH PER INCH (PONTOS POR POLEGADA) ▪ O DPI é semelhante ao PPI, no DPI a definição da imagem é determinada em pontos por polegada, em vez de pixels, ou seja, é a medida de resolução de uma imagem impressa ou digital, descrevendo seu grau de definição, quanto mais pontos, maior a definição. ▪ já que estamos tratando da impressão de imagens. Essa mudança de “unidade” de medida é necessária, porque o pixel é um elemento totalmente virtual, não podendo ser impresso.
  • 6. PPI – PIXELS PER INCH (PIXELS POR POLEGADA) ▪ indica a quantidade de pixels existentes em uma polegada quadrada de uma imagem digital, independente se ela está na vertical ou na horizontal. reflete a quantidade de informação contida na imagem. Para calcular a densidade de uma determinada tela, Use o site Pixel Density Calculator (Calculadora densidade de pixels: http://pixeldensitycalculator.com/), digite os valores em pixels da altura e largura do display, informando o tamanho em polegadas da diagonal do aparelho.
  • 7. BITMAP Profª Giorgia Barreto Lima Parrião 7 ▪ Imagem formada por um numero fixo de pixels (pontos). Quanto mais frequentes e menores foram os pontos, mais nítida e detalhada será a imagem. ▪ Suporta indexação ou TrueColor (mas não é compactado), mas não suporta canal alfa, nem transparência. ▪ Podem ser facilmente coloridas para criar efeitos visuais intensos. ▪ A cor dos bitmaps (do fundo ou do objeto) pode ser alterada sem o uso de um programa de manipulação de imagens (Photoshop).
  • 8. FORMATOS DE ARQUIVOS - BITMAP GIF - Graphics Interchange Format ▪ Formato de imagem de mapa de bits muito usado na web, quer para imagens fixas de baixa qualidade, quer para animações. Foi um dos primeiros dois formatos de imagem comumente usado em sites da Web, sendo o outro a XBM preto e branco. JPEG veio mais tarde com o navegador Mosaic. ▪ Suporta apenas imagens indexadas e transparência em lugar de canal alfa, ou seja, um pixel desta imagem pode ser ou totalmente opaco ou totalmente transparente. ▪ Esse formato possibilita pequenas animações de forma simples , formadas por várias imagens GIF compactadas numa só. É utilizado para compactar objetos em jogos eletrônicos, para usar como emoticon em mensageiros instantâneos e para enfeitar sites na Internet. Profª Giorgia Barreto Lima Parrião 8
  • 9. JPG/JPEG - Joint Photographic Experts Group: ▪ É um método comum usado para comprimir imagens fotográficas seu grau de redução pode ser ajustado permitindo o ajuste do tamanho de armazenamento sem perda de qualidade da imagem na compressão . ▪ É indicado para imagens com gradação de pixel complexa(variação de cores, luz e sombras), mas não para cores chapadas (para este caso é melhor GIF ou BMP). Pontos negativos: ▪ A compactação causa perda de informação e isso se representa em danos à imagem, torna-o inadequado quando não se trata da publicação do produto final. ▪ Também não suporta transparência nem canal alfa. Profª Giorgia Barreto Lima Parrião 9
  • 10. PNG - Portable Network Graphics: ▪ Formato de dados utilizado para imagens, criado para substituir o GIF, é livre e recomendado pela W3C ▪ Suporta uma maior gama de profundidade de cores, alta compressão e é regulável. O que permite comprimir imagens sem perda de qualidade e mantendo sua leveza. ▪ É possível retirar seu fundo (diferente da transparência do GIF), e definir o nível de opacidade de cada pixel, o que permite sua adequação a background, sem serrilhamento, o que não se consegue com os outros formatos. ▪ Suporta um grande número de informações: canal alfa, correção de gama, verificação de integridade, suporte a imagens com paleta de cores ou truecolor e comprime com nível regulável e sem perdas Profª Giorgia Barreto Lima Parrião 10
  • 11. VETOR Profª Giorgia Barreto Lima Parrião 11 ▪ É formado por coordenadas cartesianas (eixo X e Y) – cálculos matemáticos que definem características à imagem e definido pelos seus atributos . Exemplo: direção, módulos e sentidos. ▪ Podem ser ampliados sem perda de definição (qualidade) já que são alterados apenas os atributos .
  • 12. FORMATOS DE ARQUIVO - VETOR Profª Giorgia Barreto Lima Parrião 12 PS – PostScript ▪ Linguagem de programação para visualização de informações, ou de descrição de páginas, originalmente criada para impressão e posteriormente modificada para o uso com monitores ('display PostScript'). ▪ Este formato é largamente suportado e pode, inclusive, ser enviado diretamente à maioria das impressoras recentes o que permite uma melhor qualidade de impressão. ▪ não suporta canal alfa nem filtros e por este motivo não pode ser usado sempre como formato intermediário para impressão.
  • 13. EPS - Encapsulated PostScript : ▪ Formato digital para imagens que não contem representação direta de pixels, portanto, não pode ser lido por programas de manipulação de imagens como o Photoshop (embora possa ser lido por programas de editoração), mas apenas criado por eles para gerar saídas. ▪ É basicamente um PS com algumas restrições que ajudam na incorporação deste formato em outros arquivos PostScript. ▪ Permitem redimensionamento, distorção e separação de cores. Profª Giorgia Barreto Lima Parrião 13
  • 14. TIFF - Tagged Image File Format: ▪ Formato de arquivo raster para imagens digitais, popularmente chamado de bitmap. ▪ Foi criado para uso no processo de impressão PostScript, é controlado pela Adobe. ▪ Transformou-se no formato padrão dos arquivos gráficos (32-bits) com elevada definição de cores. ▪ É usado em softwares de manipulação de imagem: Photoshop, DTP e scanners . ▪ É o meio flexível para armazenar meios-tons e imagens fotográficas. ▪ Suporta canal alfa e tipos distintos de compactação. Também é possível usar sem compactação e este é o uso mais comum. Profª Giorgia Barreto Lima Parrião 14
  • 15. VETOR X BITMAP Profª Giorgia Barreto Lima Parrião 15
  • 16. Profª Giorgia Barreto Lima Parrião 16 RASTERIZAÇÃO (CONVERSÃO) ▪ Processo de transformação de uma imagem vetorial em uma imagem bitmap (pixels), também conhecida como raster. Neste caso, teremos uma imagem rasterizada. ▪ Em geral, isto é possível importando imagens, originalmente vetoriais, em programas que trabalham com imagens bitmap. ▪ O Photoshop permite esse processo e, provavelmente, você utilizará muitas vezes, como, por exemplo, para apresentar logotipos (usualmente concebidos como vetor) em páginas de internet, como imagem jpg, gif ou png. ▪ Os programas vetoriais, como o CorelDraw, o InDesign e o Illustrator, também costumam permitir a exportação para bitmap.
  • 17. Profª Giorgia Barreto Lima Parrião 17 ▪ Existem aplicativos que vetorizam automaticamente uma imagem bitmap, transformando-a em vetor por um processo conhecido como auto-tracing. ▪ Funciona bem, em especial para elementos com contornos bem definidos. ▪ Designers, no entanto, trabalham muito com o que chamamos de: VETORIZAÇÃO MANUAL ▪ Como que decalcando um desenho (quando você coloca uma transparência sobre a imagem original e desenha uma nova) e utilizando ferramentas adequadas de programas como o Illustrator ou o CorelDraw, obtém-se uma imagem vetorizada mais perfeita e detalhada. ▪ Com este processo, você pode tanto obter uma ilustração realista (onde imagem vetorizada e imagem bitmap parecem idênticas), ou uma simplificação (ilustração estilizada).
  • 18. Profª Giorgia Barreto Lima Parrião 18 RGB (PROCESSO ADITIVO – LUZ – DIGITAL) Cor = Luz União = Branco Ausência = Preto ▪ É o sistema aditivo de cores, ou seja, de projeções de luz, como monitores e data shows, em contraposição ao sistema subtrativo, que é o das impressões(CMKY). ▪ A escala de RGB varia de 0 (mais escuro) a 255 (mais claro).
  • 19. Profª Giorgia Barreto Lima Parrião 19 CORES DE 8 A 16 BITS Utilizado para armazenar informações de imagens coloridas em um arquivo de imagem digital. No sistema 8 Bits, cada pixel é representado por 1 Byte de 8 Bits, fornecendo uma exibição máxima de 256 cores. Já o sistema de 16 bits, permite a exibição de até 65.536 cores.
  • 20. Profª Giorgia Barreto Lima Parrião 20 CMYK (SUBTRATIVO – PIGMENTO – IMPRESSÃO ) ▪ Sistema de cores baseado na síntese subtrativa, segundo a qual, a mistura em partes iguais dos três pigmentos primários subtrativos (ciano, magenta e amarelo) resulta em preto. ▪ Funciona devido à absorção de luz. As cores que são vistas vêm da parte da luz que não é absorvida. Cor = Pigmento União = Preto Ausência = Branco
  • 21. Profª Giorgia Barreto Lima Parrião 21 PANTONE (COR ESPECIAL – PIGMENTO – IMPRESSÃO ) Utilizado para reproduzir uma cor exata nos processos de impressão CMYK, permitindo combinações de cores especificas utilizando a tabela de cor Pantone, que associa cada tonalidade de cor a um código .
  • 22. ATIVIDADE 1 1- Utilizando um software para ilustração vetorial, crie: A. Pontos, linhas retas e curvas, polígonos, círculos e elipses. B. Uma frase com no mínimo 4 palavras. C. Aplique cores aos itens A e B. 2- Rasterize a imagem e em seguida exporte a ilustração produzida nos formatos: GIF, TIFF, JPG, PNG. 3- Em seguida abra essas imagens exportadas em um softwares de edição de imagens, em seguida salve 2 copias de cada imagem produzida aumentando (impressão) e diminuindo (Web) sua DPI. Profª Giorgia Barreto Lima Parrião 22
  • 23. 4- Faça o mesmo utilizando PPI. 5- Nomeei os arquivos conforme nomenclatura abaixo: SeuNome_SuaTurma_Data(ddmmaa)_1 SeuNome_SuaTurma_Data(ddmmaa)_ 2 SeuNome_SuaTurma_Data(ddmmaa)_ 3 SeuNome_SuaTurma_Data(ddmmaa)_4 SeuNome_SuaTurma_Data(ddmmaa)_5 Ex: Giorgia_1an_100915_1 6- Salve-os como PNG ou JPG no doretório TEMP em seu compurador na pasta AplicativosGraficos. Profª Giorgia Barreto Lima Parrião 23
  • 24. Profª Giorgia Barreto Lima Parrião 24 BIBLIOGRAFIA ▪ COLLARO, Antônio. Projeto Gráfico: teoria e prática da diagramação. São Paulo: Summus, 2000. ▪ FALLEIROS, Dario Pimentel. O mundo gráfico da informática. São Paulo: Futura, 2003. ▪ HORIE, Ricardo Minoru; PEREIRA, Ricardo Pagemaker. 300 superdicas de editoração, design e artes gráficas. São Paulo: Senac, 2004. ▪ Psicodinâmica das Cores em Comunicação. Modesto Farina. Editora Edgard Blücher, 1982