DS - Edição e Processamento de Imagens [2022]

Prévia do material em texto

Curso Técnico em 
Desenvolvimento de 
Sistemas 
 
Edição e Processamento 
de Imagens 
Rebecca Cristina Linhares de Carvalho 
 
 
 
 
 
 
 
 
 
 
 
Curso Técnico em 
Desenvolvimento de Sistemas 
 
Edição e Processamento 
de Imagens 
Rebecca Cristina Linhares de Carvalho 
Escola Técnica Estadual Professor Antônio Carlos Gomes da Costa 
 
Educação a Distância 
 
Recife 
 
1.ed. | Agosto 2022 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Catalogação e Normalização 
Hugo Cavalcanti (Crb-4 2129) 
 
Diagramação 
Jailson Miranda 
 
Coordenação Executiva 
George Bento Catunda 
Renata Marques de Otero 
Manoel Vanderley dos Santos Neto 
 
Coordenação Geral 
Maria de Araújo Medeiros Souza 
Maria de Lourdes Cordeiro Marques 
 
Secretaria Executiva de 
Educação Integral e Profissional 
 
Escola Técnica Estadual 
Professor Antônio Carlos Gomes da Costa 
 
Gerência de Educação a distância 
 
 
Professor(es) Autor(es) 
Rebecca Cristina Linhares de Carvalho 
 
Revisão 
Rebecca Cristina Linhares de Carvalho 
 
Coordenação de Curso 
José Américo Teixeira de Barros 
 
Coordenação Design Educacional 
Deisiane Gomes Bazante 
 
Design Educacional 
Ana Cristina do Amaral e Silva Jaeger 
Helisangela Maria Andrade Ferreira 
Izabela Pereira Cavalcanti 
Jailson Miranda 
Roberto de Freitas Morais Sobrinho 
 
Descrição de imagens 
Helisangela Maria Andrade Ferreira 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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 
 
 
 
 
 
 
 
 
 
 
5 
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. 
 
 
 
 
 
 
 
6 
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. 
 
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). 
 
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. 
Acesse o AVA,ouça o podcast e já inicie com spoilers da competência 01. Lets 
Go! 
O que é SEO? 
https://www.hostinger.com.br/tutoriais/o-que-e-seo 
 
 
 
 
 
 
7 
 
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. 
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/ 
 
 
 
 
 
 
8 
 
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. 
 
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 
 
 
 
 
 
 
9 
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. 
 
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. 
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 
 
 
 
 
 
 
10 
 
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. 
 
 
 
 
 
 
 
11 
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,8milhõ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. 
 
 
 
 
 
 
12 
• 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. 
 
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; 
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. 
 
 
 
 
 
 
13 
• 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: 
 
 
 
 
 
 
14 
• 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. 
 
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 ). 
 
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 ). 
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/ 
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 
 
 
 
 
 
 
15 
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% 
 
 
 
 
 
 
16 
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 
 
 
 
 
 
 
17 
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% 
 
 
 
 
 
 
18 
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 
 
 
 
 
 
 
 
19 
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. 
 
 
 
 
 
 
20 
 
 
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, 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? 
 
Agora, acesse o AVA, e veja a videoaula da competência 01. 
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. 
 
 
 
 
 
 
 
21 
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. 
 
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. 
 
Acesse o AVA, ouça o podcast e já inicie com spoilers da competência 02. 
Lets Go! 
 
 
 
 
 
 
22 
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: 
 
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. 
GIMP Version 2.10.30 
https://www.gimp.org/downloads/ 
 
 
 
 
 
 
23 
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. 
 
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 é 
suficientepara 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 
Visite o GIMP Brasil, que é uma comunidade de usuário brasileiros de GIMP: 
https://www.gimpbrasil.org/ 
 
 
 
 
 
 
24 
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á. 
 
 
 
 
 
 
25 
 
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. 
 
 
 
 
 
 
 
26 
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: 
 
 
 
 
 
 
 
 
 
 
 
27 
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. 
 
 
 
 
 
 
28 
 
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. 
 
 
 
 
 
 
29 
 
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. 
 
 
 
 
 
 
 
 
 
 
 
 
30 
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 
 
 
 
 
 
 
31 
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. 
 
 
 
 
 
 
 
32 
 
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 umcanal 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. 
 
 
 
 
 
 
33 
 
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” 
Saiba Mais: 
Conheça detalhadamente as propriedades das Camadas: 
https://docs.gimp.org/2.8/pt_BR/gimp-image-combining.html#gimp-layer-
properties 
 
 
 
 
 
 
34 
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: 
 
 
 
 
 
 
35 
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. 
 
 
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. 
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 sobre camadas, junto 
ao e-book. 
Agora, acesse o AVA, e veja a videoaula da competência 02. 
 
 
 
 
 
 
36 
 
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. 
 
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. 
Você pode ativar esta ferramenta de várias formas: 
1. A partir do menu textaul, em: Arquivo → Salvar, 
2. Usando o atalho de teclado Ctrl + S. 
 
Saiba Mais: 
Conheça detalhadamente o comando Redimensionar Imagem : 
https://docs.gimp.org/2.10/pt_BR/gimp-tutorial-quickie-scale.html 
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 
 
 
 
 
 
 
37 
 
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. 
Você pode ativar esta ferramenta de várias formas: 
1. A partir do menu textaul, em: Ferramentas → Ferramentas de transformação → 
Espelhar, 
2. Ao clicar no ícone da ferramenta: na Caixa de ferramentas. 
 
Rotacionar uma Imagem 
O comando Rotacionar é uma opção a ser usada quando a imagem precisa ser 
rotacionada. 
Você pode ativar esta ferramenta de várias formas: 
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. 
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 
Saiba Mais: 
Conheça detalhadamente o comando Espelhar: 
https://docs.gimp.org/2.10/pt_BR/gimp-tutorial-quickie-flip.html 
 
 
 
 
 
 
38 
 
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ção5.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 
Saiba Mais: 
Conheça detalhadamente o comando Rotacionar: 
https://docs.gimp.org/2.10/pt_BR/gimp-tutorial-quickie-rotate.html 
 
 
 
 
 
 
39 
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 
 
 
 
 
 
 
40 
 
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. 
 
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. 
 
 
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 
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 2. 
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. 
 
 
 
 
 
 
41 
 
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? 
 
 
 
 
 
 
 
42 
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. 
 
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. 
 
Acesse o AVA, ouça o podcast e já inicie com spoilers da competência 03. 
Lets Go! 
 
 
 
 
 
 
43 
 
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. 
 
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 
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. 
Saiba mais: 
CCS5 (Cascading Style Sheets) 
https://tecnoblog.net/responde/o-que-e-css-cascading-style-sheets/ 
 
 
 
 
 
 
44 
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ênciasdo 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. 
 
 
 
 
 
 
45 
 
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. 
 
 
 
 
 
 
 
46 
 
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. 
 
 
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: 
Saiba mais: 
Thumbnail: o que é e por que ela é importante para seus vídeos? 
https://rockcontent.com/br/blog/thumbnail/ 
 
 
 
 
 
 
47 
• 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. 
 
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: 
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. 
 
 
 
 
 
 
48 
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/ 
 
 
 
 
 
 
 
49 
 
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. 
 
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 quadradado 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. 
 
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. 
Saiba mais 
Padrões de banners da Abraweb 
https://abraweb.com.br/banners.php 
Saiba mais 
O guia completo dos tamanhos de imagens para Redes Sociais em 2022 
https://rockcontent.com/br/blog/tamanho-imagens-redes-sociais/ 
 
 
 
 
 
 
50 
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. 
 
 
 
 
 
 
51 
 
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). 
 
 
 
 
 
 
52 
 
Figura 3.7: Início do background no 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 início do background 
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). 
 
 
 
 
 
 
 
 
 
53 
 
Figura 3.8: 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 início do background 
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). 
 
 
 
 
 
 
 
54 
 
Figura 3.9: Uso do pincel do memphis com opacidade 10% 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 início do background 
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). 
 
 
 
 
 
 
 
55 
 
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). 
 
 
 
 
 
 
56 
 
Figura 3.11: Uso do pincel do memphis de círculo 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 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). 
 
 
 
 
 
 
57 
 
Figura 3.12: Uso da imagem circle-black 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 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). 
 
 
 
 
 
 
 
58 
 
Figura 3.13: Uso da imagem tapioca 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 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. 
Coma 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. 
 
 
 
 
 
 
59 
 
 
Figura 3.14: Uso da imagem tapioca 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 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. 
 
Caro estudante, chegamos ao final de nosso e-Book, espero que tenha sido M-U-I-T-O 
proveitoso o conteúdo apresentado! 
 
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 do projeto de um 
banner no GIMP, junto ao e-book. 
Agora, acesse o AVA, e veja a videoaula da competência 03. 
 
 
 
 
 
 
60 
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. 
 
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. 
Caso siiiim, acesse o AVA e ouça o podcast desta competência. 
 
 
 
Agora, o nosso próximo passo é focar na avaliação da disciplina de EPI. Lets Go? 
 
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 3. 
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. 
 
 
 
 
 
 
61 
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. 
 
 
 
 
 
 
 
62 
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 
 
 
 
 
 
 
 
63 
Minicurrículo do Professor 
 
Rebecca Cristina Linhares de Carvalho 
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.