DS - Edição e Processamento de Imagens (2022)

Edição e Processamento
de Imagens
Rebecca Cristina Linhares de Carvalho
Curso Técnico em
Desenvolvimento de
Sistemas
Edição e Processamento
de Imagens
Curso Técnico em
Desenvolvimento de Sistemas
Escola Técnica Estadual Professor Antônio Carlos Gomes da Costa
Educação a Distância
Recife
1.ed. | Agosto 2022

Professor(es) Autor(es) Catalogação e Normalização
Rebecca Cristina Linhares de Carvalho Hugo Cavalcanti (Crb-4 2129)
Revisão Diagramação
Rebecca Cristina Linhares de Carvalho Jailson Miranda
Coordenação de Curso Coordenação Executiva

José Américo Teixeira de Barros George Bento Catunda
Renata Marques de Otero
Coordenação Design Educacional Manoel Vanderley dos Santos Neto
Deisiane Gomes Bazante
Coordenação Geral
Design Educacional Maria de Araújo Medeiros Souza
Ana Cristina do Amaral e Silva Jaeger Maria de Lourdes Cordeiro Marques
Helisangela Maria Andrade Ferreira
Izabela Pereira Cavalcanti Secretaria Executiva de
Jailson Miranda Educação Integral e Profissional
Roberto de Freitas Morais Sobrinho
Escola Técnica Estadual
Descrição de imagens Professor Antônio Carlos Gomes da Costa
Helisangela Maria Andrade Ferreira
Gerência de Educação a distância
Sumário
Introdução .................................................................................................................................... 5
1.Competência 01 | Conhecer os Principais Formatos de Armazenamento de Imagens para Web . 6
1.1 Compressão de imagens ........................................................................................................................... 6

1.1.1 Compressão do tipo Lossy (Perda de Dados) ......................................................................................... 7
1.1.2 Compressão do tipo Lossless (Sem Perdas)............................................................................................ 9
1.2 Formatos de Imagens .............................................................................................................................. 10
1.2.1 Formato JPG/JPEG ................................................................................................................................ 11
1.2.2 Formato GIF.......................................................................................................................................... 12
1.2.3 Formato PNG ........................................................................................................................................ 13
1.3 Cores nas imagens ................................................................................................................................... 14
1.3.1 Cores RGB e CMYK................................................................................................................................ 14
2.Competência 02 | Formatar Imagens para utilização na Web ou em Aplicativos de Editoração de
Textos ou Apresentações............................................................................................................. 21
2.1 O GIMP .................................................................................................................................................... 22

2.1.1 Edição e manipulação de imagens no GIMP ........................................................................................ 23
2.1.2 Interface do GIMP ................................................................................................................................ 24
2.1.2.1 Caixa de Ferramentas ........................................................................................................................ 26
2.1.2.2 Submenus: Camadas ......................................................................................................................... 31
2.1.3 Tarefas comuns .................................................................................................................................... 35
3.Competência 03 | Técnicas de Edição e Montagem de Layouts para Web com Base em Imagens
................................................................................................................................................... 42
3.1 Layout para web ...................................................................................................................................... 42

3.2 Banners para web .................................................................................................................................... 44
3.3 Montando um banner para web ............................................................................................................. 47
Conclusão .................................................................................................................................... 61
Referências ................................................................................................................................. 62
Minicurrículo do Professor .......................................................................................................... 63

Introdução
Estamos iniciando nossa jornada na disciplina de Edição e Processamento de Imagens
(EPI). O objetivo geral desta disciplina é, por meio de uma linguagem simples e descomplicada,
facilitar seu caminho para uma melhor compreensão das noções iniciais e essenciais de edição e
manipulação de imagens.
Para tal, a competência 01, iniciará com os tipos de compressão de imagem, bem como
os formatos de imagens e os sistemas de cor: RGB e CMYK. Já na competência 02, você irá conhecer
o principal software de edição e manipulação de imagens, aprendendo os pormenores de sua
interface, a caixa de ferramentas principais, as camadas e as tarefas comuns. Também aprenderá a
identificar e a trabalhar com termos como: dimensão, pixel, camadas, transparências, vetores,
redimensionar, rotacionar, e etc. Para finalizar, na competência 03, inicialmente, você irá aprender
sobre layouts para web e banners. E em seguida, o foco será trabalhar com a edição e manipulação
de imagens para web, desta forma, você irá aprender a montar um banner para redes sociais
(instagram).
Espero que o conteúdo discutido lhe sirva como uma primordial ferramenta em sua busca
por um amplo universo de conhecimentos, e que você alce um voo muito além das disciplinas deste
curso.
Cordialmente, Rebecca Linhares.
5
1.Competência 01 | Conhecer os Principais Formatos de Armazenamento
de Imagens para Web
Caro estudante, a primeira competência tem o objetivo de apresentá-lo aos formatos de
imagem utilizados na web. Nesta competência, você vai conhecer os tipos de compressão de imagem,
bem como os formatos de imagens. E por fim, e não menos importante, os sistemas de cor RGB e
CMYK.
Acesse o AVA, ouça o podcast e já inicie com spoilers da competência 01. Lets
Go!
1.1 Compressão de imagens

Imagens grandes têm um tempo de carregamento maior, isso
pode retardar o desempenho de um site, ou, na pior das hipóteses, também pode deixar o seu site
sem resposta ou completamente inacessível. Isso pode afetar diretamente na experiência dos
visitantes e no ranqueamento do SEO (search engine optimization).
O que é SEO?
https://www.hostinger.com.br/tutoriais/o-que-e-seo
No estudo “por que ótimas experiências móveis devem ser uma prioridade para os
profissionais de marketing”, a empresa Google descobriu que 45% dos visitantes têm menor
probabilidade de visitar um mesmo site se tiverem uma experiência ruim. Além disso, o Google já
confirmou que a velocidade de carregamento contribui para uma boa experiência, e
consequentemente contribuiu para um dos principais fatores de classificação do SEO.
6
Leia o estudo do Google “por que ótimas experiências móveis devem ser uma
prioridade para os profissionais de marketing”
https://www.thinkwithgoogle.com/intl/en-145/marketing-strategies/app-and-
mobile/why-great-mobile-experiences-should-be-priority-marketers/
Leia “Does site speed influence SEO?”

https://yoast.com/does-site-speed-influence-seo/
A compressão de imagens é uma técnica usada para reduzir o tamanho das imagens, o
que pode melhorar a velocidade de carregamento e o desempenho geral de um site. A compressão
independente de ser com ou sem perdas reduz os tamanhos dos arquivos de imagem, mas diferem
em métodos e resultados.
A principal diferença entre a compressão de imagem com perdas e sem perdas é que a
compressão com perdas remove alguns dos dados da imagem permanentemente, enquanto a sem
perdas não reduz a qualidade da imagem e remove apenas dados não essenciais. Para ajudá-lo a
saber mais sobre a compressão de imagens veremos a seguir as técnicas com e sem perdas.
1.1.1 Compressão do tipo Lossy (Perda de Dados)
A compressão do tipo Lossy ou compressão de imagens com perda é um processo que

remove alguns dados do arquivo de imagem, reduzindo o tamanho geral do arquivo. Essa remoção
de dados é permanente, o que significa que as informações do arquivo de imagem serão removidas
permanentemente, ou seja, é um processo irreversível. Essa compressão usa algoritmos que podem
reduzir o tamanho do arquivo, porém não restaura os dados em sua forma original após a
descompactação, isso significa que a imagem será degradada. Alguns dos algoritmos usados para
compressão com perdas incluem o discrete wavelet transform, fractal compression e transform
encryption.
7
Algoritmo discrete wavelet transform
https://www.geeksforgeeks.org/discrete-cosine-transform-algorithm-
program/
Algoritmo fractal compression
https://ieeexplore.ieee.org/document/8620735
Algoritmo transform encryption
https://www.worldscientific.com/doi/10.1142/S0219691318500248
O formato .JPEG é um excelente exemplo de compressão com perdas. Arquivos no

formato JPEG é adequado para imagens e fotografias sem transparência. Este formato é ótimo para
um site que precisa de tempos de carregamento mais rápidos, pois você pode ajustar as taxas de
compactação enquanto mantém o equilíbrio certo.
Figura 1.1 – imagem com comparação das taxas de compressão com perdas.
fonte: https://kinsta.com/pt/blog/compressao-com-perda/
Descrição de imagem: a imagem apresenta o conjunto de três imagens com comparação das taxas de compressão de
forma progressiva, bem como a perda de qualidade. A primeira imagem tem a taxa com perda de 50%, a segunda
imagem tem a a taxa com perda de 67% e a terceira imagem tem a taxa com perda de 95%.
Se você fizer uma pequena comparação das taxas de compressão com perdas na figura
1.1, pode ver que 50% parece ótimo. 33% está começando a ficar um pouco borrado em alguns dos
detalhes do fundo (mas não será notado), e 5%, obviamente, não é aceitável.
8
1.1.2 Compressão do tipo Lossless (Sem Perdas)
Diferente da compressão de imagens com perdas, compressão do tipo Lossless ou

compressão de imagens sem perda não reduz a qualidade da imagem. Isso ocorre porque na
compressão sem perdas é removido apenas os dados adicionais e não essenciais, pois foram
adicionados automaticamente pelo dispositivo usado para tirar a foto. Como resultado,
provavelmente não economizará muito espaço de armazenamento. Desta forma, você não verá uma
redução tão significativa no tamanho do arquivo de imagem.
Alguns dos algoritmos usados para compressão com perdas incluem o Huffman coding,
arithmetic encoding, e run-length encoding.
Algoritmo Huffman coding

https://www.geeksforgeeks.org/huffman-coding-greedy-algo-3/
Algoritmo arithmetic encoding
https://www.sciencedirect.com/topics/computer-science/arithmetic-coding
Algoritmo run-length encoding
http://theteacher.info/index.php/computing-principles-01/1-3-exchanging-
data/1-3-1-compression-encryption-and-hashing/2183-run-length-encoding-
rle-for-lossless-compression
A técnica de compactação sem perdas é melhor para imagens com muito texto e imagens
com fundo transparente. Os tipos de formato que podem se beneficiar da compressão de imagem
sem perdas são .RAW, .BMP, .GIF e .PNG .
Os formatos .PNG, .GIF e .BMP, são excelentes exemplos de compressão sem perdas. Está
técnica é melhor para imagens com muito texto e imagens com fundo transparente. Estes formatos
são ótimos, por exemplo, para sites de fotografia. Pois, nesses sites há a necessidade de priorizar a
alta qualidade em detrimento da redução do tamanho, o que significa que você pode exibir suas fotos
com mais detalhes.
9
Figura 1.2 – imagem com comparação das taxas de compressão sem perdas.
fonte: https://kinsta.com/pt/blog/compressao-com-perda/
Descrição de imagem: a imagem apresenta o conjunto de duas imagens, uma imagem original e uma imagem com a
compressão lossless, com a perda mínima de qualidade. A primeira imagem é a original .JPG, com o tamanho 227 KB
(2.000 px por 1463 px). Já na segunda imagem foi usada a compressão lossless JPG, com o tamanho 203 KB (2.000 px
por 1463 px).
Na figura 1.2, você pode ver que ao usar a compressão sem perdas, não há perda
nenhuma da qualidade. A primeira imagem, a original, tem o tamanho 227 KB (2.000 px por 1463 px).
Já a segunda imagem, mostra o resultado da compressão lossless, com o tamanho 203 KB (2.000 px
por 1463 px). Desta forma, o tamanho da imagem foi reduzido apenas em 10,84% e não há perda de
qualidade identificável.
1.2 Formatos de Imagens
Os formatos de arquivo de imagem são meios padronizados de organizar e armazenar

imagens digitais. Um formato de arquivo de imagem pode armazenar dados em um formato não
compactado, um formato compactado (que pode ser sem perdas ou com perdas) ou um formato
vetorial.
Incluindo tipos proprietários, existem centenas de tipos de arquivos de imagem. Os
formatos PNG, JPEG e GIF são mais usados para exibir imagens na Internet. Alguns desses formatos
gráficos serão brevemente descritos das seções a seguir.
10
1.2.1 Formato JPG/JPEG
JPG é um formato de arquivo de computador para armazenar figuras ou imagens

fotográficas, cuja a sigla significa “Joint Photografic Group”, e foi criado em 1990 pelo grupo que leva
o mesmo nome da sigla. É o formato de imagem considerado padrão e o mais utilizado no ambiente
digital. Geralmente é usado por câmeras digitais para armazenar fotos, pois utiliza o esquema de
cores de 24 bits ou 16.8 milhões cores distintas. O formato também suporta vários níveis de
compactação, o que o torna ideal para gráficos para web.
A compressão utilizada no formato de imagens .JPG é do tipo Lossy. O JPG possui uma
taxa de compressão bastante alta, podendo fazer com que uma imagem de resolução Full HD
(1920×1080 pixels) ocupe muito pouco espaço no disco rígido – cerca de 100 Kb. Contudo, isso só
acontece devido à perda da qualidade.
Vantagens do formato JPG/JPEG:

• As imagens em JPEG são bem menores, portanto, consomem muito menos espaço
de armazenamento.
• A maioria dos dispositivos e softwares modernos suporta imagens JPG/JPEG,
tornando o formato extremamente compatível e prático.
• O tamanho menor também se traduz em backups mais rápidos e eficientes. *Inclusive
meus backups na nuvem são todos em JPEG
Desvantagens do formato JPG/JPEG:

• O algoritmo de compressão de imagem com "perda" significa que você perderá
alguns dados de suas imagens, ou seja, perderá detalhes na foto, como cores,
contraste entre outros.
• O formato da imagem JPEG é limitado a 8 bits, o que coloca uma forte limitação de
16,8 milhões de cores possíveis. Isso significa que todas as outras cores que sua
câmera é capaz de gravar e reproduzir são basicamente descartadas quando a
imagem é feita em JPEG.
11
• As imagens JPEG contêm muito menos dados, o que limita significativamente sua
faixa dinâmica e potencial de recuperação. Isso significa que, se você errou na
exposição da sua foto, deixou ela super-exposta ou sub-exposta, será muito difícil, se
não impossível, recuperar esses detalhes.
Qual a diferença entre JPG e JPEG?

Não há diferenças entre os formatos JPG e JPEG. A única diferença é o número
de caracteres usados. O JPG existe apenas porque nas versões anteriores do
Windows (sistemas de arquivos MS-DOS 8.3 e FAT-16) eles exigiam uma
extensão de três letras para os nomes dos arquivos. Então .JPEG foi reduzido
para .JPG.
1.2.2 Formato GIF
GIF (Graphics Interchange Formats ou Formato de Intercâmbio de Gráficos) é um formato

de arquivo de computador para armazenar imagens, e foi criado pela Compuserve em maio de 1987
a partir da necessidade de se ter um arquivo gráfico que fosse rápido, compacto, versátil e que
previsse inovações tecnológicas. Na prática, ele pode ser utilizado tanto para imagens estáticas
quanto para imagens animadas. Isso mesmo o GIF não é um vídeo, trata-se de uma junção de imagens
que, quando vistas, dão uma sensação de movimento.
Ao lado dos emojis e stickers, o GIF é um grande protagonista na comunicação moderna.
Frequentemente utilizado em aplicativos de mensagens e publicações nas redes sociais. Desta forma,
o .GIF deixou de ser apenas uma "imagem animada" que conhecemos para virarem uma ferramenta
bastante útil na comunicação de emoções, ideias e, sobretudo, piadas.
A compressão utilizada no formato de imagens GIF é do tipo Lossless. O GIF é uma
extensão aplicada à imagens comprimidas e codificadas pelo algoritmo LZW (Lempel-Ziv-Welch),
método que não acarreta perda de informação, ou seja, uma imagem GIF pode ser lida e gravada
infinitas vezes e sempre será idêntica à original.
Vantagens do formato GIF:
• É o melhor formato para imagens em movimento;
12
• Algoritmo LZW, permite o download das imagens em aparelhos antigos ou conexões
lentas.
• Desvantagens do formato GIF:
• O formato guarda as imagens em resolução máxima de 256 cores, 8 bits, o que limita
variação de tonalidade para imagens complexas;
• Só tem suporte para um máximo de 256 cores suficiente para gráficos, mas
insuficiente para vídeos e fotografias;
• Podem apresentar cores pouco fiéis e imagem granulada.
1.2.3 Formato PNG
PNG é um formato de arquivo de computador para armazenar imagem digital, cuja a sigla
significa Portable Network Graphics ou Gráficos Portáteis de Rede. O formato PNG foi desenvolvido
pela primeira vez em outubro de 1996 pela W3C Recommendation, e atualizada para uma segunda
edição em novembro de 2003. Apesar do formato GIF já está bem estabelecido, se fazia necessário
um formato de arquivo mais moderno para acompanhar a tecnologia da tela, que estava se tornando
capaz de suportar um espectro de cores muito mais amplo. Desta forma, este formato foi
desenvolvido para superar as limitações de outros formatos, como o GIF, em espectros como cores e
licenciamento.
PNG geralmente é usado em web design para fornecer um plano de fundo transparente
e/ou uma imagem semitransparente. Os PNGs costumam ser usados quando partes da imagem
precisam ser transparentes, o que pode ser útil ao fazer ilustrações, projetar um site, criar fotografia,
e etecetera. Por exemplo, na criação de logotipos, ao deixar os pixels transparentes ao redor dele, a
imagem poderá ser facilmente colocada sobre o plano de fundo de uma imagem.
A compressão utilizada no formato de imagens PNG é do tipo Lossless, ou seja,
compressão sem perdas de qualidade e não patenteada. Isso significa que o formato PNG fornece
como substituto algoritmo de compressão não patenteado, ao contrário do formado GIF que inclui
algoritmos patenteados. Desta forma o PNG é um formato livre de licenciamento e com suporte a
canal alfa (define a opacidade de um pixel numa imagem).
Vantagens do formato PNG:
13
• Compactação sem perdas, tanto sob o aspecto da cor quanto em qualidade.
• Ideal para quem precisa compartilhar o mesmo arquivo para inúmeras pessoas – um
logo, por exemplo.
• Única alternativa que permite a visualização de transparência da imagem.
Desvantagens do formato PNG:
• Tamanho de arquivo maior do que JPG.
• Pode causar lentidão de carregamento de imagem se usada em websites.
• Não possui suporte EXIF nativo.
O que são dados EXIF de fotos?

https://tecnoblog.net/responde/o-que-sao-dados-exif-de-fotos-e-como-
encontra-los-ou-esconde-los/
1.3 Cores nas imagens

As cores estão presentes no nosso dia-a-dia, mas por ser uma convivência orgânica mal
lhes damos importância. As cores permeiam várias esferas que vão desde da ciência à arte. Neste e-
book veremos algumas relações técnicas que envolvem a cor. Iremos conhecer os Sistemas de Cor
RGB ( Red, Green and Blue – Vermelho Verde e Azul ) e CMYK ( Cyan, Magenta and Yellow- Ciano,
Magenta e Amarelo ).
O que é e para que é usado o círculo cromático?

https://www.domestika.org/pt/blog/6040-o-que-e-e-para-que-e-usado-o-
circulo-cromatico
1.3.1 Cores RGB e CMYK

Existem duas formas de se lidar com a cor, desta forma, foram elaborados dois sistemas:
um para cores oriundas de corpos que emitiam luz, o sistema RGB ( Red, Green and Blue – Vermelho
Verde e Azul ) e outro para corpos opacos que refletiam a luz, o sistema CMYK ( Cyan, Magenta and
Yellow- Ciano, Magenta e Amarelo ).
14
O RGB é também conhecido como sistema de Cor Luz, e trabalha por adição ou seja, se
somarmos as três cores básicas, nas proporções corretas, obteremos a cor branca. Desta forma, o
sistema de cor RGB é uma soma das seguintes cores:
1. R – Red (Vermelho);
2. G – Green (Verde);
3. B – Blue (Azul).
A soma destas três tonalidades de cores resultam em diversas outras cores.
Figura 1.3 – Circulos Cromáticos RGB.

Fonte: corel.com.
Audiodescrição da Figura: a imagem apresenta três círculos na cor vermelho, verde e azul, que fundidos formam novas
cores.
Na escala de cor RGB são usados valores que começam no 0 e podem ir até o 255. Por
exemplo, a cor preta é identificada como sendo R=0, G=0 e B=0. Já a cor branca é identificada como
R=255, G=255 e B=255. Assim, as cores no sistema RGB seguem a seguinte proporção:
RGB
Branco 100%
Amarelo 89%
Ciano 70%
15
Verde 59%
Magenta 41%
Vermelho 30%
Azul 11%
Preto 0%
Tabela 1.1 – Proporções das cores no sistema RGB.

Fonte: o autor
Sendo:
RGB Percentual
Branco = 30% de vermelho + 59% de verde + 11 de azul – cor terciária
Amarelo = 30% de vermelho + 59% de verde – cor secundária
Ciano = 59% de verde + 11% de azul – cor secundária
Verde = 59% - cor primária
Magenta = 41% - cor secundária
Vermelho = 30% - cor primária
Azul = 11% - cor primária
Preto = 0% (é considerado ausência de informação no RGB)
Tabela 1.2 – RGB percentual.

Fonte: o autor
O RGB é usado em Fotografia, Cinema, Vídeo, Televisão, Fotografia Digital e na tela dos
computadores, é sistema de cor mais usado nos ambientes digitais. Diferentemente do sistema de
16
cor CMYK que é empregado para impressão em baixa escala, ou seja, uso nas impressoras domésticas,
impressões gráficas em médias e grandes tiragens e também nas artes plásticas.
O CMYK é conhecido o sistema de Cor Pigmento, e trabalha por subtração, ou seja, se
somarmos as três cores nas proporções corretas obteremos preto (desde que se use pigmentos
apropriados e de boa qualidade). Desta forma, o sistema de cor CMYK é uma subtração das seguintes
cores:
1. C – Cyan (Ciano);
2. M – Magenta (Magenta);
3. Y – Yellow (Amarelo);
4. K – Black (Preto).
A subtração destas três tonalidades de cores resulta em diversas outras cores.
Figura 1.4 – Círculos Cromáticos CMYK.

Fonte: pt.wikipedia.org
Audiodescrição da Figura: a imagem apresenta três círculos na cor ciano, magenta, amarelo e preto, que subtraídas
formam novas cores.
As cores no sistema CMYK seguem a seguinte proporção:
CMYK
Preto 100%
Azul 89%
17
Vermelho 70%
Magenta 59%
Verde 41%
Ciano 30%
Amarelo 11%
Branco 0%
Tabela 1.3 – Proporções das cores no sistema CMYK.

Fonte: o autor
Sendo:
CMYK Percentual
Preto = 30% de vermelho + 59% de verde + 11 de azul – cor terciária
Azul = 30% de vermelho + 59% de verde – cor secundária
Vermelho = 59% de verde + 11% de azul – cor secundária
Magenta = 59% - cor primária
Verde = 41% - cor secundária
Ciano = 30% - cor primária
Amarelo = 11% - cor primária
Branco = 0% (é considerado ausência de informação no CMYK)
Tabela 1.4 – CMYK percentual.

Fonte: o autor
18
Na figura é visível a diferença dos círculos cromáticos do CMYK para o círculo cromático RGB.
Observe as cores primárias num sistema são secundárias no outro e vice-versa.
Figura 1.5 – Círculos Cromáticos CMYK e RGB.

Fonte: mundopauta.wordpress.com
Audiodescrição da Figura: a imagem apresenta dois círculos cromáticos. Na esquerda apresenta três círculos na cor
ciano, magenta, amarelo e preto, que subtraidas formam novas cores. Na direita apresenta três círculos na cor
vermelho, verde e azul, que fundidos formam novas cores.
Como o CMYK é voltado para sistemas de impressão e arte, se faz necessário partir da cor
branca, nesse caso a base das folhas em impressão. E, desse ponto, é necessário subtrair as tonalidades
até chegar à cor preta. Por isso, o CMYK é conhecido como um sistema baseado em subtração de cores.
Ao contrário do sistema RGB, baseado em soma de cores.
Você sabia?
O ensino e a aprendizagem ocorrem devido aos estímulos de diferentes
recursos pedagógicos que auxiliam no nosso processo cognitivo. Sabendo disso,
você já pode utilizar nesse momento a videoaula, junto ao e-book.
19
Agora, acesse o AVA, e veja a videoaula da competência 01.
E aí, estudante, foi legal o caminho até aqui?! O bom é que nesta parte da jornada você
aprendeu sobre:
• Os tipos de compressão de imagens: Lossy e Lossless;
• Os formatos de imagem: JPG/JPEG, GIF e PNG;
• Os sistemas de cor: RGB e CMYK.
Ah! E antes de seguir a diante pergunte-se:

- Será que captei as lições corretamente?
Caso não, é melhor revisar o conteúdo abordado antes de seguir para os próximos passos.
Agora que você já inseriu as informações no seu banco de dados, chegou o

momento de fazer a atividade semanal e a atividade prática da competência 1.
Vamos lá!
Ficou com alguma dúvida na competência 1? Acesse o Fórum -

“Competência 1” para saná-las e discutir com seus colegas sobre os assuntos
estudados.
Agora, o nosso próximo passo é mergulhar na competência 2, que trata do software de

edição e criação de imagens GIMP. E então, vamos nessa?
20
2.Competência 02 | Formatar Imagens para utilização na Web ou em
Aplicativos de Editoração de Textos ou Apresentações
Caro estudante, vamos iniciar a segunda competência!?! Na última competência você
aprendeu sobre compressão de imagens, formatos de imagens e sistemas de cor. Mas, agora você irá
poder, efetivamente, iniciar a tão esperada manipulação de imagens já que esta competência será
totalmente pautada por prática. Iniciaremos com o GIMP, ou seja, com o software de edição e
manipulação de imagens desta disciplina. Além disso, você irá conhecer a interface do GIMP, bem
como a caixa de ferramentas principais, as camadas e as tarefas comuns.
Acesse o AVA, ouça o podcast e já inicie com spoilers da competência 02.

Lets Go!
Para você começar a estudar a “Edição e Processamento de Imagens” é necessário instalar

o software GIMP (GNU Image Manipulation Program) no seu computador ou no computador onde
você irá fazer nossos exercícios práticos.
Figura 2.1 – GIMP 2.10.

Fonte: o autor.
Audiodescrição da Figura: a imagem apresenta uma arte digital de plantas e de cogumelos. Na direita apresenta o
texto: GIMP 2.10 GNU IMAGE MANIPULATION PROGRAM.
21
A versão do GIMP que iremos instalar será 2.10.30 (figura 2.1), a qual está disponível no
site oficial do GIMP, para fazer o download do software acesse o link abaixo:
GIMP Version 2.10.30

https://www.gimp.org/downloads/
2.1 O GIMP
GNU Image Manipulation Program (GIMP) é um software de edição e manipulação de
imagens, criado em 1995 como projeto pessoal por Spencer Kimball e Peter Mattis, em uma proposta
de ferramenta alternativa ao Adobe Photoshop. Atualmente, o GIMP é distribuído gratuitamente sob
a licença General Public License (GNU), sendo este o motivo da sigla GIMP, de GNU Image
Manipulation Program. Hoje o software é atualizado e mantido pela The GIMP Team, time de
desenvolvedores voluntários. Além de software completamente livre, é Open Source. O termo em
inglês “open source” significa “código aberto” e se refere ao código-fonte de um site ou aplicativo.
Nesse sentido, sua linguagem de programação pode ser vista por qualquer um, que pode adaptá-la
para objetivos variados. Desta forma, plataformas com código aberto podem ser acessadas,
modificadas e distribuídas de forma independente, pois se tratam de softwares abertos ao público.
Além de ser completamente livre e de código aberto, o GIMP apresenta vantagens para
quem resolve escolher o software como ferramenta:
• O software é gratuito, assim como as atualizações também são gratuitas. Desta
forma, você poderá baixar o software gratuitamente e também terá direito a todos
os upgrades que estiverem disponíveis;
• O Gimp possui uma versão portátil, que não necessita instalação, e é igualmente
gratuita. Sim, mesmo sendo pequeno, ainda é possível ter uma versão rodando em
seu pendrive para se utilizar em qualquer computador.
• O GIMP possui uma versão para celular, com funções mais reduzidas, específicas para
ajustes de fotografias.
• É pequeno (245.34 MB);
• É multiplataforma, ou seja, pode ser executado no Windows, no Linux e no Mac.
22
Um diferencial no Gimp é que ele consegue abrir e editar arquivos em extensão PSD,
formato originário do Adobe Photoshop. Outro destaque do Gimp é a possibilidade de baixar
plugins/filtros criados por sua comunidade, além de você poder criar os seus e disponibilizar ao
público.
Visite o GIMP Brasil, que é uma comunidade de usuário brasileiros de GIMP:

https://www.gimpbrasil.org/
2.1.1 Edição e manipulação de imagens no GIMP
As próximas seções envolvem os processos de edição e manipulação de imagens para uso

na web, documentos ou apresentações. Desta forma, antes de iniciar a parte prática, você vai
conhecer a lista de algumas das edições e manipulações mais usadas em imagens:
• Formatação de dimensões: envolve o redimensionamento da imagem para
tamanhos compatíveis com a mídia final, em que a mesma será usada. Por exemplo,
você pode ter uma fotografia tirada em alta resolução, algo excelente para
impressão, mas para web site acaba ficando muito grande. Para web esse tipo de
edição é fundamental, pois nos layouts e web sites o espaço para imagens costuma
ser bem definido e pequeno.
• Transformações: algumas imagens precisam de transformações simples para se
encaixar em contextos específicos. Por exemplo, a rotação da imagem para ajustar a
orientação de algo que está presente na imagem, ou mesmo do conteúdo em espaços
definidos de layouts.
• Cortes nas imagens: as imagens podem apresentar partes indesejadas que precisam
ser removidas, e nesse tipo de situação é perfeitamente possível fazer um corte na
imagem para ajustar o que se deseja exibir, e excluir as partes desnecessárias.
• Transparência: a natureza quadrada ou retangular das imagens nem sempre é
suficiente para uso em apresentações e layouts na web. Com o uso de ferramentas
de seleção nos softwares de edição, é possível excluir partes específicas de uma
23
imagem salvando o arquivo em formatos que suportam canais alpha, podemos gerar
uma imagem que aparenta ter moldura irregular e não mais quadrada ou retangular.
Por exemplo, na criação de logotipos, ao deixar os pixels transparentes ao redor dele,
a imagem poderá ser facilmente colocada sobre o plano de fundo de uma imagem.
• Cores: As cores de uma imagem podem não representar, com exatidão, o que
desejamos para uso em layouts na web ou apresentações, e por isso, algumas vezes
é necessário alterar detalhes como brilho, contraste, saturação da cor e outros.
• Alteração no tipo de arquivo: lembra dos diferentes tipos de formato de arquivo que
aprendemos na competência 01, veremos na prática, como é possível salvar uma
imagem em diferentes formatos.
Essas são algumas das edições/manipulações de imagens que serão abordadas. Algumas
situações exigem que mais de uma tarefa/ferramenta de edição seja aplicada na imagem. Para isso,
basta combinar as edições abordadas para gerar o efeito desejado. Por exemplo, se uma imagem
precisar ser:
• Redimensionada;
• Rotacionada em 90 graus no sentido horário;
• Recortada.
Todas essas edições podem ser realizadas no GIMP, basta utilizar as ferramentas de
edição em sequência.
2.1.2 Interface do GIMP
E agora... com o GIMP devidamente instalado, você vai começar a estudar a “Edição e
Processamento de Imagens” na prática. Na área de trabalho do seu computador, você irá perceber a
imagem do ícone do programa GIMP (figura 2.2), clique duas vezes no ícone, após isso o software
abrirá.
24
Figura 2.2: Ícone do GIMP na área de trabalho do computador em que abre o programa GIMP 2.10.30.
Fonte: www.itsfoss.net.
Audiodescrição da Figura: a figura apresenta um retângulo na cor cinza, e no centro há o Wilber, o mascote do GIMP.
Em seguida, irá aparecer na tela a janela principal do GIMP:
Figura 2.3: Interface da janela principal do GIMP 2.10.30.

Fonte: o autor.
Audiodescrição da Figura: a imagem apresenta um fundo cinza-escuro em que na parte superior tem-se o menu
textual. Na esquerda, têm-se a caixa de ferramentas e a opção de ferramenta. E na direita, tem-se os submenus.
25
A interface da janela principal do GIMP se apresenta com essa disposição em que se
encontra na figura 2.3, mas você pode modificar tanto as suas abas, caixas de diálogo e caixa de
ferramentas, assim como a sua visibilidade, pois todas as janelas do GIMP são removíveis. Lembre-se
que a interface é a forma como o usuário interage com o software, e você pode adequá-la da melhor
forma.
Agora, você irá conhecer cada área destacada na janela principal do GIMP (Figura 2. 3):
1) Menu textual: onde os comandos e controles são exibidos de forma textual.
2) Caixa de ferramentas: contém um conjunto de ícones usados para selecionar as
principais ferramentas do GIMP. São ferramentas com funções diversas para criação de formas,
textos, recortes e zoom. Por padrão, ela também contém as cores de frente e de fundo.
3) Opção de ferramentas: encaixada logo abaixo da caixa de ferramentas está a opção de
ferramentas, está barra mostra as opções para a ferramenta selecionada. No caso da figura 2.3, é
mostrada as opções para a ferramenta de preenchimento.
4) Submenus: do lado direito da tela, estão localizados os encaixes de camadas, caminhos,
canais, pincéis, texturas e opções de fontes. Todos dispostos em abas com suas devidas funções.
4.1) Submenus - Pincéis/Texturas/Degradês: exibe nas guias ou abas as opções para o
gerenciamento dos pincéis, texturas e degradês.
4.2) Submenus – Camadas/Canais/Caminhos/Historico do Desfazer: encaixada logo
abaixo do Submenus - Pincéis/Texturas/Degradês está o submenus com as guias ou abas para o
gerenciamento das camadas, canais e etecetera.
2.1.2.1 Caixa de Ferramentas
Considerado o coração do GIMP, a caixa de ferramentas permite completar rapidamente

tarefas básicas. Existem várias ferramentas contidas na caixa de ferramentas, as quais são
apresentadas abaixo de forma breve:
26
Seleção retangular: seleciona uma região retangular.
Seleção livre: desenha a mão livre a área ser selecionada.
Seleção por cor: seleciona regiões da imagem com cores similares.
Ferramenta de corte: guilhotina a imagem, removendo as laterais de uma imagem ou

camada.
Ferramenta de redimensionar: altera o tamanho da camada, seleção ou vetor.
Transformação com gaiola: deforma uma seleção usando uma gaiola, ou seja, permite
que você selecione uma área de transformação selecionado vários pontos de âncora a mão livre.
27
Ferramenta de preenchimento: pinta uma área com uma cor ou textura.
Ferramenta de tinta: pintura em estilo caligráfico, ou seja, a ferramenta simula uma

caneta-tinteiro com uma ponta controlável para pintar traços sólidos com bordas suavizadas.
Ferramenta borracha: para apagar ou remover as áreas de cores da camada ativa ou para
transparência, usando um pincel.
Ferramenta de clonagem: copia seletivamente trechos de uma imagem, ou textura,

usando um pincel.
28
Ferramenta de borrar: permite borrar a imagem usando pinceladas.
Ferramenta de vetores: cria e edita curvas vetoriais.
Ferramenta de texto: criar ou edita camadas de texto.
29
Ferramenta de seleção de cores: é usada para selecionar uma cor em uma imagem aberta
na sua tela.
Ferramenta de zoom: ajusta o nível de zoom, ou seja, alterar o nível de ampliação da

imagem em que você está trabalhando.
Saiba Mais:
Conheça detalhadamente cada ferramenta contida na caixa de ferramentas.
Manual do usuário oficial do GIMP:
https://docs.gimp.org/2.10/pt_BR/gimp-tools.html
Saiba Mais:
Conheça a área de indicação e cores da caixa de ferramentas.
https://docs.gimp.org/2.8/pt_BR/gimp-tools.html#gimp-toolbox-areas
30
2.1.2.2 Submenus: Camadas
Uma boa maneira de visualizar uma imagem no GIMP é imaginá-la como uma pilha de
transparências: na terminologia GIMP, cada transparência individual é chamada de camada. Usando
camadas você poderá construir uma imagem a partir de várias partes conceituais, cada uma poderá
ser manipulada sem afetar nenhuma outra parte da imagem (Figura 2.4).
Figura 2.4: Pilhas de camadas do GIMP. A partir de várias partes conceituais é construída uma imagem.
Fonte: docs.gimp.org/2.10.
Audiodescrição da Figura: a imagem apresenta um fundo branco, na esquerda, têm-se uma pilha de camadas da
imagem representando várias partes conceituais. E na direita, tem-se a imagem.
Nesta pilha de partes conceituais, a camada inferior será o plano de fundo da imagem e
os componentes no primeiro plano da imagem vêm acima dela. A organização das camadas em uma
imagem é mostrada pela caixa de diálogo de Camadas (Figura 2.5), que é a segunda janela mais
importante do GIMP, logo depois da Caixa de Ferramentas.
31
Figura 2.5: caixa de diálogos de camadas na interface da janela principal do GIMP.
Fonte: o autor.
Audiodescrição da Figura: a imagem apresenta na esquerda a caixa de diálogos de camadas.
Se uma camada está ativa no momento, ela é mostrada em destaque na caixa de diálogo
de Camadas, e seu nome é mostrado na área de status da janela da imagem. Se não, você pode ativá-
la, clicando sobre ela. Se nenhuma das camadas está em destaque, isso significa que o desenhável
ativo no momento é algo diferente de uma camada.
Cada camada em uma imagem tem algumas propriedades importantes como:
• Nome: cada camada tem um nome.
• Presença ou ausência de um canal alfa: um canal alfa codifica informações sobre
quanto uma camada é transparente em cada pixel. É visível na caixa de diálogo de
“Canais”: no canal alfa, o branco representa opacidade total, preto é a transparência
total, e níveis de cinza são transparências parciais.
• Visibilidade: é possível remover temporariamente uma camada de uma imagem,
sem destruí-la, clicando sobre o ícone de “olho” na caixa de diálogo Camadas. Isso é
chamado de “alternar a visibilidade” da camada.
32
Saiba Mais:
Conheça detalhadamente as propriedades das Camadas:
https://docs.gimp.org/2.8/pt_BR/gimp-image-combining.html#gimp-layer-
properties
Existem algumas formas de se obter novas camadas em uma imagem. Aqui seguem as
mais importantes:
1. Nova camada: selecionando no menu textual Camada → Nova camada no menu da
janela de imagem. Isso faz aparecer uma caixa de diálogo (Figura 2.6) que permite que você escolha
as propriedades da nova camada.
Figura 2.6: caixa de diálogos “criar uma nova camada”.

Fonte: o autor.
Audiodescrição da Figura: a imagem apresenta no centro a caixa de diálogos “criar uma nova camada”.
Na caixa de diálogo Nova camada, sob o título “Criar uma nova camada” pode-se ver o
nome da imagem para a qual você vai criar essa nova camada e próximo ao título uma miniatura da
imagem. Em “Nome da camada” será inserido no nome da nova camada. Já em “Largura/Altura”
33
serão inseridas as dimensões da nova camada. Quando surge a caixa de diálogo, os valores são
inicializados com as dimensões da imagem, mas você pode alterá-los usando as duas caixas de texto.
Por último, em “Preencher com” existem cinco opções de cor sólida para preencher a camada: a cor
atual do primeiro plano, a cor atual do plano de fundo, branco, transparência e padrão.
2. Duplicar camada: selecionando no menu textual Camada → Duplicar camada no menu
da janela de imagem. Isso cria uma nova camada (Figura 2.7) que é uma cópia perfeita da camada
ativa atual, logo acima da mesma.
Figura 2.7: caixa de diálogos de camadas com uma camada duplicada ou nova camada.
Fonte: o autor.
Audiodescrição da Figura: a imagem apresenta uma caixa de diálogos com uma camada duplicada ou nova camada.
3. Copia/Corta e cola: quando você “corta” ou “copia” algo, e então cola usando Ctrl+V
ou Editar → Colar, o resultado é uma “seleção flutuante”, que é um tipo de camada temporária. Antes
que você possa fazer qualquer outra coisa, você deve ou ancorar a seleção flutuante em uma camada
existente, ou converte-la em uma camada normal. Se você optar por essa conversão, o tamanho da
nova camada será o menor possível para acomodar o que foi colado.
Assim como existem algumas formas de se obter novas camadas, também existem
algumas formas de se excluir camadas em uma imagem. Aqui seguem as mais importantes:
34
1. Remover camada: selecionando no menu textual Camada → Remover camada no
menu da janela de imagem. Isso exclui a camada ativa atual.
2. Remover camada na caixa de diálogos: selecionando na caixa de diálogos de camadas
a camada a ser removida, clique com o botão direito do mouse e selecione Remover camada.
Você sabia?
recursos pedagógicos que auxiliam no nosso processo cognitivo. Sabendo
disso, você já pode utilizar nesse momento a videoaula sobre camadas, junto
ao e-book.
2.1.3 Tarefas comuns
Como já é sabido, o GIMP é um software de edição e manipulação de imagens poderoso

com muitas opções e ferramentas. Porém, ele também é bem adequado para tarefas menores. As
tarefas a seguir são destinadas para aqueles que querem alcançar essas tarefas comuns e necessárias
sem ter que aprender todos os meandros do GIMP e computação gráfica em geral.
Redimensionar Imagem
O comando Redimensionar Imagem aumenta ou diminui o tamanho físico de uma
imagem alterando o número de pixels que ela contém. Ele altera o tamanho de todos os conteúdos
da imagem e redimensiona a tela de pintura de acordo.
Você pode acessar esse comando no menu textual Imagem → Redimensionar Imagem.
35
Saiba Mais:
Conheça detalhadamente o comando Redimensionar Imagem :
https://docs.gimp.org/2.10/pt_BR/gimp-tutorial-quickie-scale.html
Corte de Imagem
O comando Cortar é usado para cortar uma imagem. Ele afeta todas as camadas da
imagem, visíveis ou não (opcionalmente pode se restringir a uma camada). Há muitas razões para
cortar uma imagem, por exemplo, a remoção de uma parte de fundo para enfatizar um
assunto/elemento.
Você pode ativar esta ferramenta de várias formas:
1. A partir do menu textual, em: Ferramentas → Ferramentas de transformação →
Cortar,
2. Ao clicar no ícone da ferramenta: na Caixa de ferramentas,

3. Usando o atalho de teclado Shift + C.
Saiba Mais:
Conheça detalhadamente o comando Cortar:
https://docs.gimp.org/2.10/pt_BR/gimp-tutorial-quickie-crop.html
https://docs.gimp.org/2.8/pt_BR/gimp-tool-crop.html
Salvar Imagem
O comando Salvar salva sua imagem no computador. Ele salva apenas imagens no
formato XCF. Se você tentar salvar em outro formato de imagem, receberá uma mensagem de erro,
e um link direto para a caixa de diálogo de Exportar, onde poderá gravar imagens nos outros
formatos.
1. A partir do menu textaul, em: Arquivo → Salvar,
2. Usando o atalho de teclado Ctrl + S.
36
Saiba Mais:
Conheça detalhadamente o comando Salvar:
https://docs.gimp.org/2.10/pt_BR/gimp-images-out.html#save-export-image
https://docs.gimp.org/2.8/pt_BR/gimp-save-dialog.html
Espelhar uma Imagem

O comando Espelhar é uma opção a ser usada quando você precisar da pessoa na foto
olhando em outra direção, ou você precisar que a parte superior da imagem fique embaixo. Depois
de selecionar a ferramenta de Espelhar da caixa de ferramentas, clique dentro da tela. Os controles
nas opções de ferramentas encaixáveis permitem alternar entre os modos Horizontal e Vertical.
1. A partir do menu textaul, em: Ferramentas → Ferramentas de transformação →
Espelhar,
2. Ao clicar no ícone da ferramenta: na Caixa de ferramentas.
Saiba Mais:
Conheça detalhadamente o comando Espelhar:
https://docs.gimp.org/2.10/pt_BR/gimp-tutorial-quickie-flip.html
Rotacionar uma Imagem

O comando Rotacionar é uma opção a ser usada quando a imagem precisa ser
rotacionada.
1. A partir do menu textaul, em: Ferramentas → Ferramentas de transformação →
Rotacionar 90 horário (ou anti-horário),
2. Usando o atalho de teclado Shift + R.
37
Saiba Mais:
Conheça detalhadamente o comando Rotacionar:
https://docs.gimp.org/2.10/pt_BR/gimp-tutorial-quickie-rotate.html
Ferramentas de Cor
Com a ferramenta de cores você pode manipular as cores das imagens de diversas
maneiras:
• Modificando o equilíbrio de cores: a ferramenta de equilíbrio de cores modifica o
equilíbrio das cores da camada ativa ou seleção. Essa ferramenta é adequada para
corrigir a predominância de cores em fotos digitais.
Acesse no Manual do usuário oficial do GIMP a Seção 5.2, “Equilíbrio de cores”:
https://docs.gimp.org/2.8/pt_BR/gimp-tool-color-balance.html
• Ajustar o nível de matiz, saturação e luminosidade: a ferramenta de Matiz-saturação
é usada para ajustar os níveis da matiz, saturação e luminosidade de uma
determinada cor de uma área selecionada ou da camada ativa.
Acesse no Manual do usuário oficial do GIMP a Seção 5.3, “Matiz-saturação”:
https://docs.gimp.org/2.8/pt_BR/gimp-tool-hue-saturation.html
• Representar uma imagem em tons de cinza vista através de um vidro colorido: a
ferramenta de colorizar transforma a camada ativa ou seleção em uma imagem em
tons de cinza sendo vista por um vidro colorido.
Acesse no Manual do usuário oficial do GIMP a Seção 5.4, “Colorizar”:
https://docs.gimp.org/2.8/pt_BR/gimp-tool-colorize.html
• Ajustar os níveis de brilho e contraste: a ferramenta de brilho e contraste ajusta os
níveis de brilho e contraste da camada ativa ou seleção.
Acesse no Manual do usuário oficial do GIMP a Seção 5.5, “Brilho e contraste”:
https://docs.gimp.org/2.8/pt_BR/gimp-tool-brightness-contrast.html
• Transformar uma imagem em preto e branco de acordo com os valores dos seus
pixels: a ferramenta de limiar transforma a camada ativa ou seleção em uma imagem
preto e branco, em que os pixels brancos representam os pixels da imagem imagem
38
cujo valor está dentro da faixa de tons selecionada, e pixels pretos representam pixels
com valores fora da faixa marcada.
Acesse no Manual do usuário oficial do GIMP a Seção 5.6, “Limiar”:
https://docs.gimp.org/2.8/pt_BR/gimp-tool-threshold.html
• Alterar o nível de intensidade em um canal: a ferramenta de nível possui
características similares ao da janela de Histograma mas também permite alterar a
intensidade do nível de cores da camada ativa ou seleção em cada canal. Esta
ferramenta é útil para deixar uma imagem mais clara ou escura, para alterar o
contraste ou corrigir uma tonalidade predominante na imagem.
Acesse no Manual do usuário oficial do GIMP a Seção 5.7, “Níveis”:
https://docs.gimp.org/2.8/pt_BR/gimp-tool-levels.html
• Alterar a cor, brilho, contraste ou transparência de uma forma sofisticada: a
ferramenta de Curvas é uma das ferramentas mais sofisticadas para mudar a cor,
brilho, contraste ou transparência da camada ativa ou seleção. Enquanto que a
ferramenta de níveis permite trabalhas com tons escuros e claros, a ferramenta de
curvas permite trabalhar com qualquer tonalidade.
Acesse no Manual do usuário oficial do GIMP a Seção 5.8, “Curvas”:
https://docs.gimp.org/2.8/pt_BR/gimp-tool-curves.html
• Reduzir o número de cores: essa ferramenta foi criada para ponderar as cores dos
pixels de uma seleção ou camada ativa de forma inteligente e reduzir o número de
cores enquanto mantém a aparência e características da imagem original.
Acesse no Manual do usuário oficial do GIMP a Seção 5.9, “Posterizar”:
https://docs.gimp.org/2.8/pt_BR/gimp-tool-posterize.html
• Converter todas as cores ao seu tom de cinza correspondente: usando o comando
Dessaturar, você poderá converter todas as cores da camada ativa para o seus tons
de cinza correspondentes.
Acesse no Manual do usuário oficial do GIMP a Seção 5.10, “Dessaturar”:
https://docs.gimp.org/2.8/pt_BR/gimp-tool-desaturate.html
39
Saiba Mais:
Conheça detalhadamente as Ferramentas de cor:
https://docs.gimp.org/2.8/pt_BR/gimp-tools-color.html#gimp-tools-color-
overview
Conheça detalhadamente o menu Cores:

https://docs.gimp.org/2.8/pt_BR/gimp-colors-menu.html
E aí, estudante, foi legal o caminho até aqui! O bom é que nesta parte da jornada você
aprendeu sobre:
• O GIMP;
• A interface do GIMP;
• Caixa de Ferramentas;
• Camadas;
• Tarefas comuns.


Vamos lá!
Ficou com alguma dúvida na competência 2? Acesse o Fórum - “Competência

2” para saná-las e discutir com seus colegas sobre os assuntos estudados.
40
Agora, o nosso próximo passo é mergulhar na competência 3, que trata sobre layouts para
web, banners para web e a montagem de um banner para web.
Vamos juntos?
41
3.Competência 03 | Técnicas de Edição e Montagem de Layouts para Web
com Base em Imagens
Caro estudante, vamos iniciar a terceira competência! Na última competência você
conheceu a ferramenta de manipulação e edição de imagens GIMP, bem como a sua interface e a sua
caixa de ferramentas, além disso você aprendeu sobre as camadas e algumas tarefas comuns. Apesar
de já termos estudado como trabalhar com edição de imagens para web, ainda é necessário somar
mais alguns tópicos para segurança na edição e manipulação de imagens para web.
Nesta competência, você irá aprender a montar um banner para web. Porém, antes disso,
você vai conhecer um pouco sobre layouts para web. E em seguida, conhecerá o banner para web.
Acesse o AVA, ouça o podcast e já inicie com spoilers da competência 03.

Lets Go!
3.1 Layout para web
Antes de você iniciar a parte prática, se faz necessário expor o papel das imagens dentro
do ambiente web, e obviamente, nos dias atuais. Há poucos anos, era compreensível utilizar imagens
como base para criação de interfaces para a web. O uso de elementos visuais como sombras, reflexos
e outros era o que havia de melhor, em termos de montagem de layouts para a web. Mas, com o
passar dos anos, o uso de imagens como base para esse tipo de criação acabou sendo substituído por
técnicas mais modernas e baseadas em codificação. Isso significa que hoje, já é possível utilizar muitos
desses efeitos como sombras, reflexos e principalmente controle de formas usando o CSS5 (Cascading
Style Sheets). Como já é sabido, o uso intenso de imagens acaba sendo prejudicial para sites, no
aspecto de retardar o seu desempenho. Além disso, o uso intenso de imagens é prejudicial no que
concerne também à melhora desses sites, para mecanismos de busca. Como os mecanismos de busca
baseiam seus índices e classificação muito em informações textuais, o uso de imagens é encarado por
muitos especialistas em otimização como sendo prejudicial para o website como um todo.
42
Isso significa que não devemos usar imagens? mas é claro que não!
No final, isso apenas significa que você deve usar imagens apenas quando for
indispensável para o projeto. Por exemplo: a criação de um banner para
anúncios. É um caso clássico em que o uso da imagem é necessário e
recomendado.
Ainda está com dúvidas em relação a quais situações é recomendado utilizar imagens?
Segue uma lista que mostra situações em que é recomendado utilizar imagens:
• Exibir publicidade;
• Mostrar áreas de layout que são impossíveis de reproduzir com CSS5;
• Adicionar fotografias no layout de sites;
• Planejar o layout para conversão em CSS5.
Para finalizar, e não ficar nenhuma dúvida, segue uma lista que mostra algumas situações
em que não devemos utilizar imagens:
• Menus de navegação;
• Layouts com muitos efeitos baseados apenas em imagens;
• Utilizar imagens para construir interfaces.
Para casos especiais como hotsites publicitários ou divulgação de produtos e serviços, é
perfeitamente aceitável que se direcione a criação de layouts para uso mais intenso de imagens, mas
a longo prazo isso pode ser prejudicial para o site. Como o maior desafio na internet é atrair visitantes
para os sites, a possibilidade de trazer pessoas por meio de mecanismos de busca, que é o chamado
tráfego orgânico, acaba moldando o mercado de trabalho e os padrões usados para construir sites.
Saiba mais:
CCS5 (Cascading Style Sheets)
https://tecnoblog.net/responde/o-que-e-css-cascading-style-sheets/
O planejamento de layouts, com base em imagens, é amplamente usado entre designers

de interface, pois permite o nível de controle e resposta visual imediata para quem está executando
43
a interface. Mas, quando todo o trabalho é gerado apenas com os códigos do CSS, a resposta visual é
limitada, pois o designer precisa primeiro escrever o código para depois visualizar o resultado.
E para fazer com que o conhecimento relacionado à produção de conteúdo para web
esteja alinhado com as exigências do mercado, o foco da terceira competência desta disciplina será,
exatamente, na construção de um artefato muito usado nos dias de hoje na web, o banner. Um
banner publicitário, mescla imagens com informações de texto, para ser inserido dentro de sites.
3.2 Banners para web
Um banner para web ou banner é uma forma de publicidade na internet. Esta forma de
publicidade on-line envolve a incorporação de um anúncio em uma página da web. Assim como os
anúncios tradicionais, os banners têm o objetivo de funcionar notificando os consumidores sobre o
produto ou serviço e apresentando os motivos pelos quais o consumidor deve escolher o produto em
questão.
O anúncio em banner desempenhou um papel significativo ao possibilitar o rápido
desenvolvimento da publicidade paga na Internet. Com os formatos padrão, operação (link clicável
para um destino) e sistema de preços (impressões), o anúncio em banner permitia a qualquer site
vender publicidade e fornecia os requisitos operacionais para empresas de servidores de anúncios,
como NetGravity, desenvolverem os sistemas necessários para operar e rastrear a publicidade
baseada na web. O banner também era único, se comparado à propaganda veiculada em mídias
comparáveis, como jornais e revistas.
Além dos sites, os banners também se tornaram uma grande forma de publicidade nas
redes sociais de entretenimento. Por exemplo, em 2022 o instagram criou um espaço para banners
nos perfis de criadores de conteúdo. Nesse caso, a função do banner no instagram será auxiliar os
criadores de conteúdo a ter mais engajamento nas suas lives (Figura 3.1). Além de poder agendar as
transmissões, agora eles poderão utilizar os banners para que os seguidores saibam das próximas
lives e ativem uma notificação ao clicar no anúncio.
44
Figura 3.1: Banner da live do Omelete TV, conteúdo disponível no perfil Omelete do instagram. O foco principal do
conteúdo do banner é promover mais engajamento nas suas lives.
Fonte:instagram.com/omelete/.
Audiodescrição da Figura: a imagem apresenta uma arte gráfica do Banner da live do Omelete TV com o texto: sexta –
19hs, veredito: o homem do norte com Hessel, Diego Lima, Caio Coletti e Dane Taranha.
Outro exemplo é uso de banners para vídeos, o Youtube, que é a maior plataforma de
compartilhamento de vídeos do mundo, utiliza o Thumbnail, um dos mais importantes elementos
desta plataforma. A YouTube thumbnail (Figura 3.2) é o recurso responsável pelo primeiro contato
do usuário com o vídeo. Por isso, é um importante recurso de marketing digital.
45
Figura 3.2: Thumbnail do vídeo com o conteúdo focado na gameplay do jogo Assassin’s Creed Valhalla, disponível no
canal RajmanGaming HD do Youtube. O foco principal do conteúdo é promover o primeiro contato do usuário com o
vídeo e consequentemente mais engajamento.
Fonte: https://www.youtube.com/watch?v=vc9Ij-FBjXw&ab_channel=RajmanGamingHD
Audiodescrição da Figura: a imagem apresenta uma arte gráfica do Thumbnail do vídeo gameplay do jogo Assassin’s
Creed Valhalla com o texto: Assassin´sCreeed Valhalla, PC 4K 60 FPS, Parte 1.
Saiba mais:
Thumbnail: o que é e por que ela é importante para seus vídeos?
https://rockcontent.com/br/blog/thumbnail/
O uso de banners web não se restringe à publicidade on-line. As imagens da heroína da

Marvel Comics (Figura 3.3) é um exemplo comum de aplicação não publicitária de banners nas redes
sociais. Os banners desse tipo fazem parte do design de sites e de redes sociais, e são normalmente
usados por razões estéticas. As imagens do herói são representadas por grandes fotos, gráficos ou
vídeos colocados nas seções proeminentes de um site/redes sociais.
Figura 3.3: Banner da She-Hulk, conteúdo disponível no perfil Marvel Brasil do instagram.
Fonte:instagram.com/marvelbrasil/.
Audiodescrição da Figura: a imagem apresenta uma arte gráfica do Banner da heroína She-Hulk.
Os banners da web podem ser conduzidos por diferentes tipos de tecnologias e, portanto,
oferecem diferentes níveis de usabilidade. Os principais tipos de banners da web são:
46
• Banner estático: uma imagem simples embutida.
• Banner ao vivo: um banner criado dinamicamente.
• Banner interativo: conduzido por IA (Intelligence Artificial), permite que os
visualizadores interajam com o banner.
O primeiro anúncio da web clicável (que mais tarde veio a ser conhecido pelo
termo "anúncio em banner") foi vendido pela Global Network Navigator (GNN)
em 1993 para Heller, Ehrman, White, & McAuliffe, um escritório de advocacia
extinto. GNN foi a primeira publicação na web com suporte comercial e um
dos primeiros sites comerciais.
3.3 Montando um banner para web
O projeto desta disciplina é a produção de um artefato muito usado nos dias de hoje na
web, isso será feito através da criação de um banner. E é lógico que esta produção estará alinhada
com as atuais exigências do mercado. Como já é sabido, o banner é uma forma de publicidade na
internet. E esta forma de publicidade mescla imagens com informações de texto, para ser inserido
dentro de sites, redes sociais, vídeos (Thumbnail), e etc.
A produção do banner a seguir irá aplicar o conhecimento já adquirido em relação ao
GIMP. Isso irá permitir que você crie outras peças gráficas semelhantes. Desta forma, com todos esses
conhecimentos será gerado o banner a seguir:
Figura 3.4: Projeto final, banner padrão de uma imagem quadrada do feed para posts no instagram com as dimensões:
47
1080 pixel de largura por 1080 pixel de altura.
Fonte: o autor.
Audiodescrição da Figura: a imagem apresenta Projeto final, um banner padrão do feed para posts no instagram, com o
texto: “Bateu aquela fome? Ta-Ta-Tapioca RECHEADA, vários sabores.
Antes de iniciar o primeiro passo para criar o nosso banner você deverá:
1. Fazer o download das imagens circle-black e tapioca nos links a seguir:
https://image.freepik.com/free-vector/circle-black-halftone-vector-
background_1017-14239.jpg
https://pngimage.net/wp-content/uploads/2018/06/tapioca-png-8.png
2. Fazer o download de novos pincéis para o GIMP no link a seguir:

https://www.freeject.net/2019/03/free-download-memphis-element-brush-
abr.html
3. Adicionar novos pincéis ao GIMP, segue o link do “adicionando novos pincéis" no

manual do usuário:
https://docs.gimp.org/2.10/pt_BR/gimp-using-brushes.html
https://www.youtube.com/watch?v=1OcZWSTNSCY
4. Adicionar novas fontes (Fair Prosper e Futura Black Narrow) ao GIMP, segue o link do
“adicionando novos pincéis" no manual do usuário:
https://www.dafont.com/pt/fair-prosper.font
https://br.maisfontes.com/futura-black-narrow.fonte?utm_source=similar
5. Instalar a nova fonte (Fair Prosper e Futura Black Narrow), segue o link do “Como
instalar fontes no GIMP: https://daviesmediadesign.com/pt/como-instalar-fontes-
no-gimp/
48
DICA: Depois de extrair os arquivos da fonte baixada, clique duas vezes ou no
arquivo com a extensão .OTF ou no arquivo com a extensão .TTF para realizar
a instalação.
O primeiro passo para criar o nosso banner é definir as suas dimensões, ou seja, o seu
tamanho. As dimensões de todas as peças publicitárias na web devem seguir um padrão. Isso
acontece porque todas as imagens, precisam, em algum momento, ter suas dimensões ajustadas para
se enquadrar em projetos ou layouts, principalmente, dentro do contexto da web.
Os tamanhos das imagens na web são bem menores do que esses que comentamos e isso
fica bem claro quando consultamos a tabela da Abraweb (Associação brasileira de Web Designers)
para padronização de publicidade em sites.
Saiba mais
Padrões de banners da Abraweb
https://abraweb.com.br/banners.php
Na tabela do site da Abraweb encontramos a dimensão do tipo large rectangle com 336
pixel de largura por 280 pixel de altura. Esse é um tipo de banner comum em layouts na web, e que
oferece um espaço bem razoável para apresentar elementos visuais.
Os tamanhos das imagens nas redes sociais, vídeos (Thumbnail), e etc também seguem
um padrão. Segundo a Adobe Inc., o padrão de uma imagem quadrada do feed para posts no
instagram é de 1080 pixel de largura por 1080 pixel de altura, e o padrão de uma imagem para
instagram Stories é de 1080 pixel de largura por 1920 pixel de altura, já que são verticais.
Saiba mais
O guia completo dos tamanhos de imagens para Redes Sociais em 2022
https://rockcontent.com/br/blog/tamanho-imagens-redes-sociais/
49
A escolha da dimensão do nosso banner é o padrão de uma imagem quadrada do feed
para posts no instagram com 1080 x 1080 px. Então, para começar a fazer o nosso banner, é
necessário iniciar um novo projeto no GIMP ou a partir do menu textual: Arquivo → Nova ou usando
o atalho de teclado com o Ctrl+N com as dimensões de largura: 1080 por altura 1080 pixel. Finalizado
o processo, é exibido um novo projeto na janela principal do GIMP (Figura 3.5):
Figura 3.5: Novo projeto banner.

Fonte:instagram.com/marvelbrasil/.
Audiodescrição da Figura: a imagem apresenta Interface da janela principal do GIMP, no centro o novo projeto criado.
Na caixa de diálogos de camadas, clique em criar uma nova camada em transparência.

Em seguida, na caixa de ferramentas selecione a ferramenta de vetores, e crie um vetor igual ao da
Figura 3.6. Para fechar o vetor segura o Crtl do teclado, em seguida, o Enter.
50
Figura 3.6: Início do background no novo projeto de um banner no GIMP utilizando a ferramenta de vetores.
Fonte: instagram.com/marvelbrasil/.
Audiodescrição da Figura: a imagem apresenta Interface da janela principal do GIMP, no centro o início do background
do projeto criado com a ferramenta de vetores.
Na caixa de ferramentas, selecione a cor de primeiro plano ativa, no menu alterar cor de
frete em notação HTML digitar 3b0303, esta será a cor utilizada. No menu textual:
editar → preencher com cor de frente para preencher a seleção com a cor. Finalize com o atalho de
teclado Ctrl+Shitf+A para poder finalizar a seleção. Agora já temos o início do nosso background
(Figura 3.7).
51
Figura 3.7: Início do background no novo projeto de um banner no GIMP.
Fonte: o autor.
do projeto criado com preenchimento de cor do vetor criado.
Na caixa de ferramentas, selecione a ferramenta pincel, e na caixa de diálogos de

camadas, clique em criar uma nova camada em transparência. Feito isso, no Submenus -
Pincéis/Texturas/Degradês, na aba Pincéis, vamos selecionar o pincel do memphis, com o ângulo de
132. Na caixa de ferramentas, em a cor de primeiro plano ativa, no menu alterar cor de frete em
notação HTML digitar 7b3232, esta será a cor utilizada no pincel. Em seguida, seleciona o ângulo -
132 (Figura 3.8).
52
Figura 3.8: Uso do pincel do memphis no background do novo projeto de um banner no GIMP.
Fonte: o autor.
do projeto criado com o uso do pincel do memphis.
Para finalizar, na caixa de diálogos de camadas, clique em modo e selecione tela, e

diminua a opacidade para 10% (Figura 3.9).
53
Figura 3.9: Uso do pincel do memphis com opacidade 10% no background do novo projeto de um banner no GIMP.
Fonte: o autor.
do projeto criado com o uso da opacidade 10% no pincel do memphis.
Na caixa de diálogos de camadas, clique em criar uma nova camada em transparência.

Ainda com a ferramenta pincel selecionada, na caixa de ferramentas, em a cor de primeiro plano
ativa, no menu alterar cor de frete em notação HTML digitar 3b0303, esta será a cor utilizada no
pincel. Feito isso, no Submenus - Pincéis/Texturas/Degradês, na aba Pincéis, vamos selecionar o
pincel do memphis (Figura 3.10).
54
Figura 3.10: Uso do pincel do memphis no background do novo projeto de um banner no GIMP.
Fonte: o autor.
Audiodescrição da Figura: a imagem apresenta Interface da janela principal do GIMP, no centro o background do
projeto criado com o uso do pincel do memphis.
Em seguida, no Submenus - Pincéis/Texturas/Degradês, na aba Pincéis, vamos selecionar

o pincel do memphis de círculo, na caixa de diálogos de camadas, clique em modo e selecione
somente escurecer, e diminua a opacidade para 50% (Figura 3.11).
55
Figura 3.11: Uso do pincel do memphis de círculo no background do novo projeto de um banner no GIMP.
Fonte: o autor.
projeto criado com o uso do pincel do memphis de círculo.
Como já é sabido, duas imagens serão utilizadas nesse projeto: a imagem cicle-black-
halftone e a imagem tapioca. A imagem cicle-black-halftone será utilizada no background. Para abrir
a imagem no projeto utilize o atalho do teclado Crtl + o, selecione a imagem cicle-black-halftone e
clique em Abrir. Utilize o atalho do teclado Ctrl + A para “selecionar a tudo”, e em seguida o atalho
Crtl + C para “copiar a seleção”. Após isso, selecione o seu projeto e utilize o atalho do teclado Ctrl+V
para colar a seleção, e na caixa de diálogos de camadas, clique em criar uma nova camada em
transparência. Feito isso, utilize o atalho do teclado Shift+S para redimensionar a imagem. Faça o
redimensionamento da imagem para o tamanho do background do projeto e clique em
redimensionar. clique em modo e selecione superexposição linear, e diminua a opacidade para 20%
(Figura 3.12).
Dica: Mova esta camada com a imagem cicle-black-halftone para antes das camadas #1 e
#2 (Figura 3.12).
56
Figura 3.12: Uso da imagem circle-black no background do novo projeto de um banner no GIMP.
Fonte: o autor.
projeto criado com o uso da imagem circle-black.
Agora a imagem tapioca é o tema do banner e será utilizada no projeto. Para abrir a
imagem no projeto utilize o atalho do teclado Crtl + o, selecione a imagem tapioca e clique em Abrir.
Utilize o atalho do teclado Ctrl + A para “selecionar a tudo”, e em seguida o atalho Crtl + C para “copiar
a seleção”. Após isso, selecione o seu projeto e utilize o atalho do teclado Ctrl+V para colar a seleção,
e na caixa de diálogos de camadas, clique em criar uma nova camada em transparência.
Feito isso, utilize o atalho do teclado Shift+S para redimensionar a imagem. Faça o
redimensionamento da imagem (Figura 3.13) e clique em redimensionar. Utilize o atalho do teclado
Shift+R para rotacionar a imagem, faça a rotação da imagem e clique em rotacionar (Figura 3.13).
57
Figura 3.13: Uso da imagem tapioca no background do novo projeto de um banner no GIMP.
Fonte: o autor.
projeto criado com o uso da imagem tapioca.
O último passo para finalizar o banner é o texto. Na caixa de ferramentas, selecione a

ferramenta de texto. Você irá inserir três caixas de texto, a primeira caixa de texto será inserida acima
da imagem da tapioca, com o texto "Bateu aquela fome?", com a fonte Fair Prosper, tamanho 130 e
na cor branco (Figura 3.14).
Em seguida, você irá inserir a segunda caixa de texto, na caixa de diálogos de camadas
clique em duplicar a camada atual em transparência, essa ação irá duplicar a caixa de texto criada.
Com a ferramenta mover, mova a segunda caixa de texto para baixo da imagem da tapioca. Clique
na ferramenta de texto, selecione todo o texto e insira o texto "Ta-Ta-Tapioca RECHEADA" com a
fonte Futura Black Narrow, tamanho 122 e na cor 3B0303 (Figura 3.14).
Por último, você irá inserir a terceira caixa de texto, na caixa de diálogos de camadas
clique em duplicar a camada atual em transparência, essa ação irá duplicar a caixa de texto criada.
Com a ferramenta mover, mova a segunda caixa de texto para baixo do texto "Ta-Ta-Tapioca
RECHEADA". Clique na ferramenta de texto, selecione todo o texto e insira o texto "Vários Sabores"
com a fonte Fair Prosper, tamanho 100 e na cor 7b3232 (Figura 3.14).
O resultado final do projeto banner é apresentado na Figura 3.14.
58
Figura 3.14: Uso da imagem tapioca no background do novo projeto de um banner no GIMP.
Fonte: o autor.
projeto criado com o uso da imagem tapioca e com o texto: “Bateu aquela fome? Ta-Ta-Tapioca RECHEADA, vários
sabores.
Com o banner finalizado, você pode agora exportar o arquivo no formato PNG para postar
no feed do instagram.

recursos pedagógicos que auxiliam no nosso processo cognitivo. Sabendo
disso, você já pode utilizar nesse momento a videoaula do projeto de um
banner no GIMP, junto ao e-book.
Caro estudante, chegamos ao final de nosso e-Book, espero que tenha sido M-U-I-T-O
proveitoso o conteúdo apresentado!
59
E aí, estudante, foi legal o caminho até aqui! O bom é que nesta parte da jornada você
aprendeu sobre:
• Layout para web;
• Banner para web;
• Montar um banner para web.

Caso siiiim, acesse o AVA e ouça o podcast desta competência.

Vamos lá!
Ficou com alguma dúvida na competência 6? Acesse o Fórum - “Competência

3” para saná-las e discutir com seus colegas sobre os assuntos estudados.
Agora, o nosso próximo passo é focar na avaliação da disciplina de EPI. Lets Go?
60
Conclusão
Olá novamente, desenvolvedor!
Chegamos ao final de nossa jornada! Espero que os conhecimentos acumulados em nosso
passeio tenham lhe ajudado a alcançar a compreensão das noções iniciais e essenciais e edição e
manipulação de imagens no GIMP e sejam a base para eventuais experiências.
Não se acanhe em retornar para este caderno caso você tenha dúvidas em relação às
noções iniciais do software GIMP, pois o conhecimento necessário em lições futuras é cumulativo,
ou seja, o que foi visto aqui não pode ser tratado de forma isolada: servirá como base no processo da
próxima disciplina e em outras art social media que você talvez queira experimentar fora das lições
abarcadas neste material didático.
Falando em experimentação, lhe incentivo a tentar de forma criativa utilizar os
conhecimentos deste caderno para criar art social media com propostas diferentes do projeto
construído aqui neste conteúdo. Desafie-se ir além!
Cordialmente, Rebecca Linhares.
61
Referências
Gomes, Alexandra and Aline Costa. “JPEG – Formato de arquivo de imagens.” UFMG – Escola de
Ciência da Informação, Curso de Biblioteconomia, Disciplina de Introdução à Informática.
Matos, Luciana de Oliveira and Rosilene Moreira Coelho. “GIF – Graphics Interchange Format.” UFMG
– Escola de Ciência da Informação, Curso de Biblioteconomia, Disciplina de Introdução à Informática.
Rocha, João Carlos. "Cor luz, cor pigmento e os sistemas RGB e CMY." Revista Belas Artes 3.2 (2010).
https://www.hostinger.com/tutorials/lossy-vs-lossless
https://imagify.io/blog/lossless-vs-lossy-image-compression/
https://www.eduardo-monica.com/new-blog/o-que-e-jepg-jpg-vantagens-desvantagens
https://www.tecmundo.com.br/internet/219225-gif-descubra-usar-o-formato.htm
https://www.eduardo-monica.com/new-blog/o-que-png?rq=png
https://www.w3.org/Graphics/PNG/
http://www.libpng.org/pub/png/slashpng-1999.html
https://docs.gimp.org/2.10/pt_BR/
https://docs.gimp.org/2.8/pt_BR/
https://abraweb.com.br/banners.php
https://www.adobe.com/br/creativecloud/photography/discover/standard-photo-sizes.html
62
Minicurrículo do Professor

Mestre em Ciências da Computação no Centro de Informática (CIn) na universidade
Federal de Pernambuco (UFPE). Possui graduação em Bacharelado em Sistemas de Informação pela
Faculdades Integradas Barros Melo (2009). Atualmente é professora do curso técnico de
Desenvolvimento de Sistemas, na modalidade EAD, na Secretaria de Educação do estado de
Pernambuco, professora formadora das disciplinas: Edição e Processamento de Imagens e
Programação para Dispositivos Móveis, e conteudista da disciplina de Edição e Processamento de
Imagens e de Introdução a Programação para Dispositivos Móveis.
63

DS - Edição e Processamento de Imagens (2022)

Enviado por

Dados do documento

Descrição original:

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

DS - Edição e Processamento de Imagens (2022)

Enviado por

Direitos autorais:

Formatos disponíveis

Edição e Processamento

Escola Técnica Estadual Professor Antônio Carlos Gomes da Costa

1.ed. | Agosto 2022

Coordenação de Curso Coordenação Executiva

1.Competência 01 | Conhecer os Principais Formatos de Armazenamento de Imagens para Web . 6

1.1 Compressão de imagens ........................................................................................................................... 6

2.1 O GIMP .................................................................................................................................................... 22

3.1 Layout para web ...................................................................................................................................... 42

Minicurrículo do Professor .......................................................................................................... 63

1.1 Compressão de imagens

Leia “Does site speed influence SEO?”

1.1.1 Compressão do tipo Lossy (Perda de Dados)

A compressão do tipo Lossy ou compressão de imagens com perda é um processo que

O formato .JPEG é um excelente exemplo de compressão com perdas. Arquivos no

Diferente da compressão de imagens com perdas, compressão do tipo Lossless ou

Algoritmo Huffman coding

1.2 Formatos de Imagens

Os formatos de arquivo de imagem são meios padronizados de organizar e armazenar

JPG é um formato de arquivo de computador para armazenar figuras ou imagens

Vantagens do formato JPG/JPEG:

Desvantagens do formato JPG/JPEG:

Qual a diferença entre JPG e JPEG?

1.2.2 Formato GIF

GIF (Graphics Interchange Formats ou Formato de Intercâmbio de Gráficos) é um formato

1.2.3 Formato PNG

O que são dados EXIF de fotos?

1.3 Cores nas imagens

O que é e para que é usado o círculo cromático?

1.3.1 Cores RGB e CMYK

Figura 1.3 – Circulos Cromáticos RGB.

Tabela 1.1 – Proporções das cores no sistema RGB.

Branco = 30% de vermelho + 59% de verde + 11 de azul – cor terciária

Amarelo = 30% de vermelho + 59% de verde – cor secundária

Ciano = 59% de verde + 11% de azul – cor secundária

Verde = 59% - cor primária

Magenta = 41% - cor secundária

Vermelho = 30% - cor primária

Azul = 11% - cor primária

Preto = 0% (é considerado ausência de informação no RGB)

Tabela 1.2 – RGB percentual.

A subtração destas três tonalidades de cores resulta em diversas outras cores.

Figura 1.4 – Círculos Cromáticos CMYK.

As cores no sistema CMYK seguem a seguinte proporção:

Tabela 1.3 – Proporções das cores no sistema CMYK.

Preto = 30% de vermelho + 59% de verde + 11 de azul – cor terciária

Azul = 30% de vermelho + 59% de verde – cor secundária

Vermelho = 59% de verde + 11% de azul – cor secundária

Magenta = 59% - cor primária

Verde = 41% - cor secundária

Ciano = 30% - cor primária

Amarelo = 11% - cor primária

Branco = 0% (é considerado ausência de informação no CMYK)

Tabela 1.4 – CMYK percentual.

Figura 1.5 – Círculos Cromáticos CMYK e RGB.

Ah! E antes de seguir a diante pergunte-se:

Agora que você já inseriu as informações no seu banco de dados, chegou o

Ficou com alguma dúvida na competência 1? Acesse o Fórum -

Agora, o nosso próximo passo é mergulhar na competência 2, que trata do software de

Acesse o AVA, ouça o podcast e já inicie com spoilers da competência 02.

Para você começar a estudar a “Edição e Processamento de Imagens” é necessário instalar

Figura 2.1 – GIMP 2.10.

GIMP Version 2.10.30