Caderno DS Edição e Processamento de Imagens ETEPAC 2019.1 PDF

Edição e Processamento de
Imagens
Maicon Herverton Lino Ferreira da Silva
Curso Técnico em Informática

Educação a Distância
2019
EXPEDIENTE
Professor Autor
Maicon Herverton Lino Ferreira da Silva
Design Educacional
Deyvid Souza Nascimento
Renata Marques de Otero
Revisão de Língua Portuguesa

Letícia Garcia
Diagramação (2.ed. 2019)

Jailson Miranda
Coordenação
Anderson Elias
Coordenação Executiva
George Bento Catunda
Terezinha Mônica Sinício Beltrão
Coordenação Geral
Paulo Fernando de Vasconcelos Dutra
Conteúdo produzido para os Cursos Técnicos da Secretaria Executiva de Educação

Profissional de Pernambuco, em convênio com o Ministério da Educação
(Rede e-Tec Brasil).
Março, 2017
Dados Internacionais de Catalogação na Publicação (CIP) de acordo com ISDB
S586e
Silva, Maicon Herverton Lino Ferreira da.
Edição e Processamento de Imagens: Curso Técnico em Informática: Educação a distância /
Maicon Herverton Lino Ferreira da Silva. – 2.ed. – Recife: Escola Técnica Estadual Professor
Antônio Carlos Gomes da Costa [ETEPAC], 2019.
80 p.: il.
Inclui referências bibliográficas.

Material produzido em março de 2017 através de convênio com o Ministério da Educação
(Rede e-Tec Brasil) e a Secretaria de Educação de Pernambuco.
1. Editoração eletrônica. 2. Processamento de imagens - Técnicas digitais. I. Título.
CDU – 070.50285
Elaborado por Hugo Carlos Cavalcanti | CRB-4 2129

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 ............................................................................................................................ 7
1.1.1 Compressão do tipo Lossy (Perda de Dados) .......................................................................................... 8
1.1.2 Compressão do tipo Lossless (Sem Perdas) ............................................................................................ 9
1.2 Cores nas imagens.................................................................................................................................... 10
1.2.1 Cores RGB e CMYK ................................................................................................................................ 10
1.2.2 Capacidade de reproduzir cores ........................................................................................................... 13
1.3 Efeitos e animação ................................................................................................................................... 14
1.4 Formato JPG ............................................................................................................................................. 14
1.4.1 Quando usar o JPG? .............................................................................................................................. 16
1.4.2 Quando não usar o JPG? ....................................................................................................................... 16
1.5 Formato GIF.............................................................................................................................................. 17
1.5.1 Quando usar arquivos GIF? ................................................................................................................... 19
1.6 Formato PNG ............................................................................................................................................ 19
1.6.1 Quando usar arquivos PNG? ................................................................................................................. 21
2. Competência 02| Formatar Imagens para Utilização na Web ou em Aplicativos de Editoração de

Textos ou Apresentações ..................................................................................................................... 22
2.1 Formatando imagens com o GIMP .......................................................................................................... 23
2.2 Interface do GIMP .................................................................................................................................... 24
2.3 Controle do Zoom .................................................................................................................................... 27
2.4 Dimensões das imagens ........................................................................................................................... 28
2.5 Exclusão de camadas................................................................................................................................ 31
2.6 Transformações em imagens ................................................................................................................... 31
2.7 Corte de imagens ..................................................................................................................................... 33
3
2.8 Cores ........................................................................................................................................................ 34
2.9 Transparência ........................................................................................................................................... 35
2.10 Salvando imagens................................................................................................................................... 36
3.Competência 03| Técnicas de Edição e Montagem de Layouts para Web com Base em Imagens . 38
3.1 Layouts para web ..................................................................................................................................... 39
3.2 Montando banners para web................................................................................................................... 40
3.2.1 Dimensões do banner ........................................................................................................................... 41
3.2.2 Fotografia como fundo.......................................................................................................................... 43
3.2.3 Adicionando textos ............................................................................................................................... 48
3.2.4 Barra inferior ......................................................................................................................................... 51
3.2.5 Textos adicionais ................................................................................................................................... 56
3.3 Planejando web sites com base em imagens........................................................................................... 57
3.3.1 Criando a moldura................................................................................................................................. 59
3.3.2 Preparando a área de desenho ............................................................................................................. 60
3.3.3 - Preparando as camadas ...................................................................................................................... 62
3.3.4 Contorno do layout ............................................................................................................................... 63
3.3.5 Pintura das áreas do layout................................................................................................................... 67
3.3.6 Desenho de linhas ................................................................................................................................. 70
3.3.7 Adicionando textos no layout ............................................................................................................... 71
3.3.8 Preparando o layout para a web........................................................................................................... 74
Referências ........................................................................................................................................... 79
Minicurrículo do Professor ................................................................................................................... 80
4
Introdução
Seja bem-vindo a nossa disciplina sobre Edição de imagens para Web!
Aqui, teremos a oportunidade de aprender sobre manipulação de imagens para aplicação
em web sites. Os assuntos estão divididos em três competências:
Conhecer os principais formatos de armazenamento de imagens para Web;
Formatar imagens para utilização na web ou em aplicativos de editoração de textos ou
apresentações;
Conhecer as técnicas de edição e montagem de layouts para web, com base em imagens.
Ao longo de cada uma das competências você aprenderá muito sobre como funcionam
as imagens em meios digitais e como você pode aproveitar os recursos dos diferentes formatos e
tipos de imagens para determinadas situações em projetos web. É muito importante que você não se
atenha apenas ao conteúdo deste caderno, pois o mesmo serve apenas de guia para estimular seus
conhecimentos.
Esse aprendizado é muito importante para a criação de layouts ou então para preparar
imagens para uso em sistemas de publicidade online. Um dos aspectos que você vai perceber nos
próximos capítulos é que existem diversos recursos extras valiosos para desenvolver os seus
conhecimentos no assunto e, vários deles aparecem em formato de hyperlinks ao longo do texto.
Para começar as nossas recomendações, gostaria que você realizasse uma pesquisa no
fórum brasileiro sobre novidades e atualizações sobre o GIMP, além de também acessar o manual
oficial do GIMP em português. Os links estão disponíveis na caixa de texto abaixo.
Recomendação de Leitura:
Fórum do GIMP - –Site oficial da ferramenta www.gimpbrasil.org/
Manual Oficial do GIMP - http://docs.gimp.org/2.8/pt_BR/
5
Competência 01
1. Competência 01 | Conhecer os Principais Formatos de Armazenamento

de Imagens para Web
A nossa primeira competência na disciplina aborda quais os formatos de imagem

utilizados na web e as principais opções relacionadas ao armazenamento dessas imagens, dentro
desse contexto. O conhecimento desses formatos de imagem é de extrema importância para
qualquer pessoa interessada em produzir conteúdo para a web, pois com o formato certo de imagem
é possível integrar elementos como efeitos, compressão e inserir as imagens dentro de um contexto
específico.
Os formatos de imagem para web podem ser classificados de várias maneiras. Os
principais exemplos são:
• Quanto à compressão;
• Quanto à qualidade da imagem;
• Quanto ao suporte a efeitos;
• Quanto ao suporte a animações.
• Quanto ao suporte a animações.
Entenda os formatos de arquivos de imagens:
https://rockcontent.com/blog/formatos-de-imagem/
Antes de continuar, é importante ressaltar que, ao mencionar as imagens para web, o

foco é exclusivo para imagens do tipo bitmap (raster) e não nas imagens vetoriais. Além da diferença
conceitual que existe, em termos de funcionamento interno entre imagens vetoriais e do tipo bitmap,
o nosso propósito específico nessa disciplina é abordar apenas o funcionamento de imagens do tipo
bitmap, sendo as imagens vetoriais tema de outra disciplina.
Para conseguir efetivamente entender quais os principais formatos de imagem usados na
web, devemos, portanto, falar de compressão, qualidade de imagens, cores e efeitos. Depois que
você entender bem o impacto que cada uma dessas características das imagens exerce sobre o
6
Competência 01
resultado final, será muito mais fácil de entender os motivos que fazem um formato de imagem ser
ou não indicado para determinadas situações em projetos na web.
1.1 Compressão de imagens
A compressão das imagens é algo fundamental para que possamos manipular esse tipo
de arquivo, em ambientes digitais, sem a necessidade de trabalhar com grandes volumes de
informação. As imagens no formato Bitmap são formadas por mapas de pixels, que são os pequenos
pontos formadores das imagens. É tudo baseado em uma grande matriz que, se for armazenada sem
nenhum tipo de compressão, acaba gerando enormes quantidades de dados.
Já pensou receber uma fotografia no seu e-mail com 15Mb? Algo muito comum hoje em
dia, com o aumento das resoluções das câmeras digitais e inclusive dos próprios celulares
Smartphones. Essa mesma imagem, se estiver com bons níveis de compressão, pode, tranquilamente,
ser armazenada com 500 kilobytes.
Você acredita que, por exemplo, quando você seleciona no seu Smartphone uma imagem
que fotografou e a envia por meio do aplicativo WhatsApp ela irá chegar ao destinatário com a mesma
qualidade com a qual você enviou? A resposta é óbvia, não, com milhões de usuários utilizando o
serviço de comunicação seriam necessários robustos servidores com capacidade de armazenamento
gigantesca para enviar a foto com a qualidade original, e além disso, o seu plano de dados da sua
operadora seria ligeiramente consumido.
Por isso, o que o aplicativo faz é a compressão dos arquivos de imagens que você envia,
com uma redução de aproximadamente 70% na qualidade final da imagem. Ou seja, uma imagem
que antes possuía o tamanho de 1,5mb, quando chega no destinatário o tamanho será 478kb.
As técnicas e algoritmos de compressão de imagens são bem variados, mas podemos
classificar a compressão em duas grandes famílias, que são métodos do tipo Lossy e Lossless. Os dois
métodos são usados não apenas para compressão de dados em imagens, mas em todo tipo de
armazenamento de informações, inclusive arquivos no formato ZIP, RAR e outros.
7
Competência 01
1.1.1 Compressão do tipo Lossy (Perda de Dados)
O formato conhecido como Lossy é baseado em uma premissa simples, que é a

compressão direcionada para a informação visual e não para a fidelidade dos dados. A compressão
do tipo Lossy usa algoritmos que excluem informações das imagens, com o objetivo de reduzir o seu
tamanho e mantendo um mínimo de fidelidade visual na imagem.
Esse formato de compressão apresenta os seguintes benefícios para quem escolhe o
método para armazenar imagens:
• Arquivos com tamanho reduzido;
• Fidelidade visual;
• Fácil armazenamento;
• Boas taxas de download e upload em ambiente web.
Para saber mais sobre compressão do tipo Lossy e complementar
essas explicações, recomendo a leitura dos seguintes artigos:
https://focusfoto.com.br/compressao-tipo-lossy/
Os benefícios do formato Lossy são bem atraentes, mas apesar de todas essas vantagens,
precisamos tomar cuidado com uma coisa importante: as informações das imagens são excluídas
gradativamente, para que sejam gerados arquivos com tamanhos reduzidos. Isso é bom para
armazenamento e transmissão, mas para quem produz conteúdo na web é muito prejudicial perder
informações nas imagens. Por exemplo, ao comprimir uma imagem usando o método Lossy perdemos
características das imagens como:
• Gradientes de cor;
• Definição de bordas e contornos.
Apesar desse ponto negativo em relação à compressão de imagens no formato Lossy, os
arquivos de imagem nesse formato são largamente usados na web, devido ao seu tamanho reduzido.
Fora da web, temos a maioria das máquinas fotográficas voltadas para consumidores armazenando
8
Competência 01
imagens com compressão Lossy e, até mesmo o seu celular, caso ele possua uma câmera, poderá
armazenar as fotografias em Lossy, para economizar espaço.
Como você já deve ter percebido, quando o objetivo da compressão é realmente reduzir
o tamanho do arquivo, os arquivos no formato Lossy são os mais indicados. O objetivo dos arquivos
salvos com compressão do tipo Lossy é a entrega para o usuário final, e não a produção dos layouts.
Portanto, você deve sempre ter em mente que o uso desse tipo de compressão deve ser aplicado
apenas no momento da criação dos arquivos base para o layout que ficará hospedado no servidor
web e será transmitido para os usuários finais.
1.1.2 Compressão do tipo Lossless (Sem Perdas)
Para os casos em que a perda de dados é problema, existe a compressão do tipo Lossless,
que é usada em vários contextos, assim como acontece com o Lossy. Por exemplo, quando
comprimimos um arquivo em ZIP, para envio por e-mail ou armazenamento, podemos extrair o
conteúdo desse arquivo para o seu estado original, sem nenhum tipo de perda.
Atenção:
As imagens no formato Lossless acabam possuindo tamanhos maiores do
que as geradas pela compressão Lossy, mas temos como benefício a
fidelidade de dados em relação ao arquivo original e ao resultado da
compressão.
Já pensou como seria complicado compactar um texto e, ao extrair as informações,

percebermos partes do texto faltando?
Esse tipo de arquivo não é o mais indicado para fins de transmissão pela web, pois o
mesmo acaba tendo tamanhos bem superiores às imagens Lossy. Mas, para criação de layouts e
edição em altas resoluções o formato é perfeito para profissionais interessados em manter versões,
em grande resolução de imagens, com todos os dados originais.
9
Competência 01
Na maioria das situações é indicado trabalhar com os dois formatos, quando é possível,
sendo o trabalho relacionado com imagens editado e montado usando compressão Lossless e
distribuído na web depois em formatos Lossy. A separação é simples:
• Lossless: Tipo de compressão usada nos arquivos base da plataforma de autoria. Eles são maiores
e retém todas as informações das imagens, o que permite manipular e editar o material com
mais flexibilidade e qualidade.
• Lossy: Tipo de compressão que deve ser gerada a partir dos arquivos Lossless, pois seu tamanho
é reduzido devido à exclusão de informações. É o arquivo usado para hospedagem nos servidores
web para transmissão ao usuário final.
Mesmo sem ter mencionado nenhum algoritmo, quando abordamos a compressão do
tipo Lossy, podemos destacar um método de compressão em Lossless chamado de LZW (Lempel-Ziv-
Welch). Esse algoritmo é usado em vários casos como arquivos ZIP e imagens, sendo a base para
muitos formatos de arquivos que usam o método para reduzir o tamanho.
Para saber mais sobre compressão do tipo Lossless e complementar
essas explicações, recomendo a leitura do seguinte artigo:
www.dpi.inpe.br/~carlos/Academicos/Cursos/Pdi/SemPerdas.htm
1.2 Cores nas imagens
Com a parte relacionada à compressão das imagens bem entendida, podemos avançar
para outro aspecto que interfere bastante nas características das imagens. Existem diversos espaços
de cor e capacidades para reproduzir cores diferentes, que devem ser levadas em consideração no
armazenamento e uso das imagens.
1.2.1 Cores RGB e CMYK
O método mais comum para gerar diferentes tonalidades de cor é com base em mistura
de cores simples, que acabam gerando tonalidades das mais diversas. Em ambientes digitais, isso não
10
Competência 01
é diferente. E, para as imagens na web, devemos prestar atenção no formato de cor usado para gerar
as tonalidades.
Nos ambientes digitais, o modelo de cor mais usado é o RGB, que é uma mistura das
seguintes cores:
R - Red (Vermelho)
G - Green (Verde)
B - Blue (Azul)
A mistura dessas três tonalidades resulta em várias outras 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. Além do
RGB, existem inúmeras variações desse formato como os RGB e o RGBA, que suportam pixels
transparentes.
Video
Assista a alguns vídeos interessantes sobre o uso e composição de
cores em RGB para Web:
Sistema de cores RGB (6:51) -

www.youtube.com/watch?v=rGY_cwDrMEg
Composição das cores (14:20) -

www.youtube.com/watch?v=qF9AoCUcDGg
A Figura 1.1 mostra, de maneira visual, essa mistura de cores das tonalidades em RGB. É
interessante notar como a base para as misturas do RGB é o preto, pois nos monitores de vídeo é
preciso sempre partir dessa cor, que representa a ausência de luz. Por isso, é que o RGB é conhecido
como um método de mistura, baseado em soma, pois adicionamos cores, até chegar ao máximo, que
é o preto.
11
Competência 01
Figura 1.1 – Mistura em RGB

Fonte: http://pt.wikipedia.org/wiki/Ficheiro:Synthese%2B.svg, 2012
Descrição: fundo preto e três círculos interligados (vermelho, verde e azul) e as respectivas cores que formam quando
as cores são mescladas.
Outro formato muito usado para gerar cores em imagens é o CMYK, que é a mistura das
seguintes cores:
• C - Cyan (Ciano)
• M - Magenta (Magenta)
• Y - Yellow (Amarelo)
• K - Black (Preto)
Esse formato é utilizado em ambientes de impressão e corresponde, exatamente, às cores
existentes em cartuchos de tinta de impressoras, somando ao cartucho preto. É necessário o uso da
cor preta, pois, em teoria, a mistura de ciano, magenta e amarelo resultaria em preto, mas, na prática,
temos um marrom escuro. Por isso, é necessário adicionar a cor preta na escala.
O uso do espaço de cor CMYK é restrito ao ambiente de impressão. E, do ponto de vista
da produção de material para web, é preciso apenas ter ciência da existência dele, para evitar,
inadvertidamente, enviar material para web nesse formato. O resultado do uso de imagens CMYK na
web são cores levemente distorcidas, como tons escuros ou claros em demasia.
A representação da mistura do CMYK pode ser visualizada na Figura 1.2, e mostra como
o esquema de mistura é diferente do RGB. Como o CMYK é voltado para sistemas de impressão, é
necessário partir da cor branca, 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.
12
Competência 01
Figura 1.2 – Mistura em CMYK

Fonte: http://pt.wikipedia.org/wiki/Ficheiro:SubtractiveColorMixing.png, 2012
Descrição: o fundo branco e três círculos interligados formando as cores azul claro, azul escuro, verde, amarelo, preto,
vermelho e rosa.
1.2.2 Capacidade de reproduzir cores
A quantidade de tonalidades que podemos reproduzir em imagens é determinante para

controlar o tamanho dos arquivos. No nosso caso, iremos usar imagens que são classificadas como
tendo 8-bits ou 24-bits de capacidade.
O que isso significa? Para fins de reprodução de cores, é possível identificar a quantidade
de cores que um formato de imagem pode reproduzir pelo número de bits.
É preciso recordar que dados em ambientes digitais são sempre armazenados em formato
binário, mesmo que não tenhamos contato com esse tipo de informação no nosso cotidiano. Para
entender a quantidade de cores que cada tipo de imagem é capaz de reproduzir, precisamos elevar
o número dois (valores binários) à potência equivalente aos bits.
Por exemplo, uma imagem com 8-bits é capaz de exibir 28 cores. Isso resulta em 256
tonalidades diferentes para uma cor em 8-bits. Já uma imagem em 24-bits é capaz de exibir 224 cores,
que é equivalente a 16.777.216 tonalidades. Sim, são mais de 16 milhões de cores em comparação a
apenas 256 das imagens em 8-bits.
Toda essa quantidade de cores apresenta impacto em duas características das imagens:
• Armazenamento: são necessários arquivos maiores para armazenar grandes quantidades de
cores.
• Qualidade visual: imagens em 24-bits são mais indicadas para armazenar imagens de qualidade
fotográfica.
13
Competência 01
1.3 Efeitos e animação
Para imagens na web, podemos usar, basicamente, um efeito importante, que é o uso de
pixels transparentes. Os chamados canais alpha, em imagens, permitem criar diversos tipos de
composições diferentes para web. Por exemplo, existem muitos ícones em painéis de navegação de
web sites que utilizam pixels transparentes para conseguir integração perfeita com o fundo do layout.
Apesar de conhecer a existência desse tipo recurso, é necessário escolher um formato de
imagem compatível com ele para que possamos aproveitar as vantagens de ter pixels transparentes
em imagens. Nos próximos tópicos, já abordaremos alguns desses formatos, que suportam os
chamados canais alpha.
Para completar a lista de efeitos existentes em imagens na web, podemos utilizar,
também, animações em imagens. As animações nada mais são do que uma sequência de imagens
exibidas de modo a gerar a ilusão de movimento. Nos dias de hoje, é mais difícil encontrar projetos
ou propostas de interfaces na web que utilizem imagens para fins de animação, pois tecnologias como
o HTML 5 (HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto)
permitem integrar vídeos em web sites de maneira muito fácil.
1.4 Formato JPG
Um dos formatos de imagem mais famosos e utilizados na web, o JPG, foi criado pelo Joint
Photographic Group, com o objetivo de proporcionar a fotógrafos profissionais uma maneira de
armazenar imagens com qualidade e tamanho reduzidos. A compressão das imagens JPG é Lossy, o
que significa que todos os dados salvos nesse formato tiveram informações descartadas para que
fosse possível reduzir o tamanho dos arquivos.
Atenção:
A compressão de imagens em JPG é identificada por uma escala que vai de
0% até 100% de qualidade nas imagens.
Essa compressão do arquivo resulta na redução do tamanho por meio da criação de

blocos de pixels, que tentam agrupar informações comuns nas imagens. O algoritmo de compressão
14
Competência 01
do JPG é muito bom, sendo capaz de gerar e comprimir de maneira significativa um arquivo de
imagem, a custo da sua qualidade visual.
Para saber mais sobre os arquivos JPG e complementar essas explicações,
recomendo a leitura dos seguintes artigos:
www.infowester.com/imagens.php
www2.dcc.ufmg.br/disciplinas/ii/ii05-1/seminario/jpeg.pdf
www.slideshare.net/sergioviniciuss/apresentacao-jpeg-smu
www.slideshare.net/creaktive/codificacao-lossy-do-jpeg
Arquivo RAW e JPG (31:18) -
Sobre as cores, o JPG tem suporte para cores em 24-bits, tanto na escala RGB como CMYK.
É possível usar 8-bits de cor, quando usamos apenas em tons de cinza para a imagem. A Figura 2.3
mostra uma comparação entre diferentes níveis de compressão em arquivos no formato JPG. Quanto
maior é o nível de compressão, menos qualidade de imagem se tem para representar os pixels. A
imagem fica borrada, com blocos visíveis resultantes do algoritmo de compressão.
Figura 1.3 – Compressão em JPG

Fonte: http://pt.wikipedia.org/wiki/Ficheiro:Texel_Landscape.jpg, 2012.
Descrição: vaca da cor preta com patas brancas num pasto de grama verde.
15
Competência 01
1.4.1 Quando usar o JPG?
O uso dos arquivos JPG é indicado nas seguintes situações na web:

• Arquivos de imagem com grande quantidade de cores;
• Armazenar fotografias na web;
• Arquivos que precisam ter tamanho reduzido.
1.4.2 Quando não usar o JPG?
Apesar de excelente qualidade, existem situações em que não é indicado usar arquivos
JPG:
• Arquivos originais de layouts para web;
• Imagens com cores sólidas;
• Imagens com tipografia.
A última situação ilustra bem um contexto em que o JPG não é indicado para armazenar
os arquivos de imagem. Quando representamos pixels com cores sólidas, sem gradientes, o algoritmo
do JPG tende a borrar as áreas de transição entre duas cores diferentes. Esse é um efeito desejado
quando se precisa criar blocos para compressão de dados, mas pode atrapalhar a representação
desse tipo de imagem.
Na Figura 1.4, podemos perceber bem essa dificuldade do algoritmo dos arquivos JPG em
representar cores sólidas. O lado direito da imagem mostra as bordas da imagem borradas em
decorrência da existência de bordas com cores sólidas.
16
Competência 01
Figura 1.4 – JPG com cores sólidas

Fonte: o autor
Descrição: fundo verde com parte da letra A na cor preta.
1.5 Formato GIF
Os arquivos no formato GIF (Graphics Interchange Format, que significa formato para
intercâmbio de gráficos) já são bem diferentes dos JPG, pois, em primeiro lugar, é um formato de
imagem que utiliza algoritmos Lossless, permitindo armazenar imagens sem nenhum tipo de perda
em relação aos dados e pixels. Os arquivos GIF são bem antigos em termos de uso na internet,
remontam aos primórdios do uso de imagens na web.
Mas, apesar de serem bem conhecidos entre produtores de conteúdo para Web, os
arquivos do tipo GIF não são hoje usados com a mesma frequência de antigamente. Existem vários
motivos que fizeram do GIF um formato menos usado na Web. O mais evidente foi uma disputa pela
patente do software. A Unisys foi a empresa que adquiriu os direitos de uso sobre essa patente. A
partir daí, qualquer desenvolvedor ou empresa interessado em adicionar suporte à criação de
arquivos GIF em seus softwares, precisava pagar para a Unisys. O algoritmo em questão é o LZW, que
é usado em outros sistemas de compressão, além do GIF.
O resultado dessa ação foi muito negativo para o formato GIF, pois surgiu o formato PNG
(Portable Network Graphics), que será abordado no próximo tópico. Hoje, esse tipo de disputa não é
mais problema, já que em 2003 a patente expirou, sendo de domínio público atualmente.
Com relação às cores, os arquivos GIF suportam apenas 8-bits, resultando em paletas de
256 cores no máximo. Para representar imagens com qualidade fotográfica os arquivos em GIF não
são a melhor opção, resultando em fotografias com níveis altos de granulação devido à limitação das
cores. A restrição de cores é uma vantagem para os arquivos em GIF quando precisamos representar
17
Competência 01
imagens com cores sólidas apenas. A exibição de elementos tipográficos, como fontes e palavras nas
imagens, é um exemplo.
Atenção:
Com esse tipo de arquivo é possível utilizar pixels transparentes,
permitindo a organização de arquivos GIF em várias camadas de layouts na
web.
Mas será que essa é a única vantagem dos arquivos GIF? O uso do GIF em layouts que
necessitam de boa definição em termos de imagem com cores sólidas é apenas um dos pontos
positivos do GIF. Se formos comparar com os arquivos JPG, ainda teremos o suporte ao canal alpha
em imagens GIF.
A transparência não é o único diferencial do GIF, pois ainda temos a possibilidade de
trabalhar com animações nos arquivos GIF. O termo "GIF animado" é muito comum em ambientes
Web, sendo sinônimo de imagens animadas. As soluções de animação com GIF sofrem um pouco
quando é necessário reproduzir elementos com grande quantidade de cores, mas são uma das formas
mais eficientes de apresentar textos e elementos animados na Web, pois não necessitam de plug-ins
ou softwares adicionais, nos navegadores, para exibição do seu conteúdo, como acontece com
animações geradas usando Flash ou Silverlight.
Um exemplo da representação de imagens usando GIF pode ser conferido na Figura 1.5
em que a fotografia da flor foi salva em GIF. O resultado é a perda de definição na imagem devido à
limitação de cores.
18
Competência 01
Figura 1.5 – Exemplo de representação em GIF

Fonte: http://pt.wikipedia.org/wiki/Ficheiro:Sunflower_as_GIF.gif, 2012.
Descrição: um girassol amarelo com folhas verdes
Para saber mais sobre os arquivos GIF e complementar essas
explicações, recomendo a leitura dos seguintes artigos:
https://www.infowester.com/imagens.php#gif
http://www.ic.uff.br/~aconci/GIF.htm
1.5.1 Quando usar arquivos GIF?
Portanto, os arquivos GIF são indicados para uso quando:

• Precisamos representar imagens com cores sólidas;
• Precisamos criar layouts compostos usando pixels transparentes;
• É necessário criar animações com base em imagens;
• É preciso armazenar arquivos sem perda de informações, mas com limite de cores
estipulado pela paleta do GIF.
1.6 Formato PNG
Para finalizar a nossa lista de formatos usados na web, temos o PNG, que agrega diversos
pontos positivos em relação ao JPG e ao GIF. A motivação para a criação dos arquivos PNG assurgiu a
partir da questão das patentes dos arquivos GIF usando algoritmos LZW. Para competir com o GIF, o
PNG utiliza compressão do tipo Lossless, semelhante à usada no GIF, permitindo que os arquivos
salvos nesse formato mantenham todos os seus dados.
A primeira grande vantagem do PNG em relação ao GIF é que o mesmo suporta armazenar
cores em 8 e 24 bits, permitindo criar arquivos relativamente pequenos, para situações em que é
preciso representar apenas cores sólidas em 8-bits. Também, podemos utilizar as 16 milhões de cores
dos arquivos em 24-bits para armazenar imagens com qualidade fotográfica.
Ainda é possível representar pixels transparentes com arquivos no formato PNG. É só
mesclar a qualidade fotográfica das cores em 24-bits com pixels transparentes, sendo isso
considerado algo impossível de ser realizada com arquivos GIF ou JPG. Esse é um dos grandes
diferenciais dos arquivos PNG, e faz com que ele seja a escolha da maioria dos produtores de
19
Competência 01
conteúdo para a web quando é preciso criar ícones e outros elementos com grande riqueza de cores
e perfeitamente integrados em layouts.
Atenção:
Dentro do contexto de layouts para a web, o uso de arquivos PNG é muito
comum na representação de ícones.
Tudo isso, somado ao fato da compressão lossless, faz os arquivos PNG serem pouco
indicados para transmissão de imagens na web, pois os mesmos tendem a ficarem maiores do que as
Competência 01
imagens em JPG, mas se a transparência dos pixels for fator determinante, o PNG é a melhor opção.
As figuras 1.6 e 1.7 mostram exemplos de uso do PNG para representar imagens com
grande quantidade de cores e que ainda possuem o plano de fundo transparente, para que possam
ser integradas em interfaces.
Figura 1.6 – Ícone salvo em PNG

Fonte: http://pt.wikipedia.org/wiki/Ficheiro:Truck_icon.png, 2012.
Descrição: desenho de um caminhão da cor cinza com um baú preto
20
Competência 01
Figura 1.7 – Ícone salvo em PNG

Fonte: http://pt.wikipedia.org/wiki/Ficheiro:Miro_icon.png, 2012.
Descrição: a letra M na cor branca dentro de uma figura oval vermelha
Para saber mais sobre os arquivos PNG e complementar essas
explicações, recomendo a leitura dos seguintes artigos:
https://br.ccm.net/contents/724-o-formato-png
http://www.ic.uff.br/~aconci/GIF.htm
1.6.1 Quando usar arquivos PNG?
Depois de analisar as características dos arquivos PNG, podemos dizer que é indicado usar
PNG nas seguintes situações:
• Quando é preciso armazenar arquivos de imagem sem perda de informações;
• Quando precisamos criar layouts que dependem de pixels transparentes;
• Quando é necessário enviar imagens pela web com fidelidade em termos de cor e
sem perda de informações.
21
Competência 02
2. Competência 02| Formatar Imagens para Utilização na Web ou em

Aplicativos de Editoração de Textos ou Apresentações
Agora, que você já conhece os principais formatos de imagem utilizados na web, como
estudamos na competência 01 dessa disciplina, podemos, efetivamente, "colocar a mão na massa",
na nossa segunda competência e, efetivamente, manipular imagens. Caso você tenha sentido falta
de algo mais prático em nossa primeira semana, pode ficar tranquilo, pois a segunda semana será
totalmente pautada por prática, inclusive, com vários vídeos que devem ser consultados, em paralelo,
com o seu caderno de estudos.
Para os nossos exercícios práticos, iremos utilizar um software muito conhecido entre os
adeptos do software livre que é o GIMP. O nome do software é um acrônimo para a frase GNU Image
Manipulation Program. Dentro do universo dos softwares livres, o GIMP é o substituto natural para
o Photoshop, que é a ferramenta comercial utilizada por muitos profissionais e artistas, ao redor do
mundo, para editar, montar e finalizar trabalhos relacionados com imagens.
Nesse ponto, você pode estar se perguntando: é possível substituir plenamente o
Photoshop pelo GIMP? Em boa parte das tarefas diárias de edição é possível, sim, substituir
plenamente o Photoshop pelo GIMP.
O GIMP apresenta inúmeras vantagens para quem resolve escolher o software como
ferramenta:
• É gratuito;
• É pequeno (73 MB);
• É multiplataforma (Windows, Linux e Mac).
A versão que utilizamos para essa disciplina é a 2.8.0, que pode ser copiada de maneira
gratuita dos seguintes endereços: https://download.gimp.org/mirror/pub/gimp/v2.8/windows/
Saiba Mais:
Visite o GIMP Brasil, que é uma comunidade de usuários brasileiros de GIMP em
www.gimpbrasil.org/
22
Competência 02
O último endereço apresenta, inclusive, uma opção de instalação do GIMP que pode ser
usada no formato portátil, sendo executado diretamente de um Pendrive ou HD Portátil. Nesse caso,
o fato do software ser executado na versão portátil, é bem diferente das versões portáteis
"alternativas" de softwares comerciais, que são ilegais. Trata-se, aqui, de uma versão totalmente
legalizada do GIMP.
Já existem versões mais recentes do GIMP como a 2.10.8, lançada em novembro de 2018.
Porém como já foi dito a versão que iremos utilizar para essa disciplina será a 2.8.0.
2.1 Formatando imagens com o GIMP
Os próximos tópicos já envolvem os processos de formatação das imagens para uso na

web, documentos ou apresentações. Antes de passar para a parte prática, é importante listar e
explicar quais são os tipos de formatação que são necessários para esse tipo de contexto.
Segue abaixo, a lista de algumas das edições e formataçõ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 com 5000 por 3000 pixels, que pode ficar excelente para impressão, mas para
envio por e-mail 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 como, por exemplo, o espelhamento da imagem na horizontal ou vertical.
Outro tipo comum de transformação é 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, algumas vezes, 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.
• 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.
• 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
23
Competência 02
edição, é possível excluir partes específicas de uma 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.
• Alteração no tipo de arquivo: Os diferentes tipos de formato de arquivo que aprendemos na
semana passada, aparecem aqui, novamente, mas agora veremos na prática, como é possível
salvar uma imagem em diferentes formatos.
Esses são os tópicos que iremos abordar na formatação de imagens para web,
apresentações e documentos. Algumas situações exigem que mais de uma tarefa de edição seja
aplicada na imagem. Para isso, basta misturar as ferramentas abordadas para gerar o efeito desejado.
Por exemplo, se uma imagem precisar ser:
• Redimensionada;
• Rotacionada em 90 graus no sentido horário;
• Ter partes recortadas.
Tudo isso pode ser aplicado ao mesmo tempo em imagens no GIMP, basta utilizar as
ferramentas em sequência.
2.2 Interface do GIMP
Antes de partir para o trabalho com as imagens, é interessante conhecer um pouco da

interface do GIMP. Depois de fazer o download do software ou utilizar as versões instaladas nos
laboratórios dos polos, podemos começar a usar esse software.
A instalação do software é simples e não requer nenhum tipo de configuração especial.
Depois que o GIMP é aberto pela primeira vez, você encontra a interface exibida na Figura 2.1.
24
Competência 02
Figura 2.1 - Interface do GIMP

Fonte: O autor
Descrição: tela inicial do software GIMP e atrás a área de trabalho do Windows.
Na interface padrão do GIMP as janelas são flutuantes e podem deixar algumas pessoas
confusas. Por isso, iremos adotar o modo de janela única do software. Isso é realizado no menu Janela
-> Modo janela única, como mostram as figuras 2.2 e 2.3.
Figura 2.2 - Menu Janela

Fonte: O autor
Descrição: opções contidas no menu janelas
25
Competência 02
Figura 2.3 - Modo de janela única

Fonte: o autor
Descrição: interface do GIMP no modo de janela única
Janelas do GIMP
https://vimeo.com/50604751
Janelas do GIMP
https://www.youtube.com/watch?v=kQNe6pjFgj0
Interface do GIMP
Interface do GIMP -
https://www.youtube.com/watch?v=lyeeQMNt8Zc
Com o modo de janela única, teremos todas as janelas agrupadas em uma única janela,
facilitando o processo de edição. E, para a explicação de como funciona a interface do GIMP, você
deve agora assistir aos primeiros vídeos no ambiente para essa competência, que é chamado de
Interface GIMP e Idioma do GIMP.
26
Competência 02
Depois de assistir aos vídeos, retorne para esse ponto no caderno para que possamos
continuar.
A explicação sobre o idioma da interface do GIMP é importante, pois em alguns casos o
software acaba erroneamente configurando a linguagem para o português de Portugal. Se você não
tem problemas em chamar arquivos de ficheiros ou seleções, pode manter os ajustes de linguagem,
mas, caso contrário, é recomendável mudar a linguagem para português do Brasil.
2.3 Controle do Zoom
A primeira tarefa para a qual devemos focar a nossa atenção na interface do GIMP quando
abrimos uma imagem é a manipulação do Zoom. Dependendo do tamanho em pixels da imagem
escolhida para edição dentro do GIMP, pode ser necessário ajustar o quanto dessa imagem queremos
visualizar na tela. Isso pode ser realizado ou com teclas de atalho e ou com opções na interface.
Para aprender a usar esse recurso, você deve assistir ao vídeo “Vídeo Aula GIMP – Aula 2
– Navegação”. O link está disponível na caixa de informação abaixo.
Como trabalhar com Zoom

https://www.gimpbrasil.org/video-aulas
Os controles de Zoom do GIMP estão no menu Visualizar como mostra a Figura 2.4.
27
Competência 02
Figura 2.4 - Controles de Zoom do GIMP

Fonte: O autor
Descrição: menu visualizar mostrando as opções da aba Zoom.
2.4 Dimensões das imagens
O ajuste das dimensões nas imagens é a primeira tarefa efetiva que iremos abordar
dentro do GIMP. Para entender a importância desse tipo de alteração para o uso de imagens em
layouts para web, apresentações e documentos, temos que compreender também o que
representam as dimensões das imagens.
As imagens baseadas em pixels que visualizamos todos os dias nos nossos monitores,
celulares e até mesmo no cinema são formadas por uma matriz de pequenos pontos, que são os
pixels. A quantidade de pixels na horizontal (width) e na vertical (height) determinam as dimensões
dessas imagens. Se você nunca teve experiência alguma com manipulação de imagens, basta fazer
uma analogia com a resolução dos monitores que usamos todos os dias. Você sabe qual é a resolução
do seu monitor? Talvez sejam 1440 por 960 pixels ou mesmo nos monitores mais modernos 1920 por
1080 pixels, que é a chamada resolução FullHD usada em televisores de LCD, LED e Plasma modernos.
Observação: Essas resoluções são sempre escritas com o valor da largura

primeiro, seguido pela altura.
28
Competência 02
A quantidade de pixels resultante de uma fotografia digital também é medida da mesma

forma, e temos com isso inclusive uma unidade de medida muito usada por fabricantes que é o
megapixel. Por exemplo, uma imagem com 10 megapixels tem 3872 por 2592 pixels sendo bem
superior ao tamanho de monitores e televisores comerciais.
Para saber mais sobre como funcionam os megapixels, recomendo

a leitura do seguinte documento:
https://www.zoom.com.br/camera-digital/deumzoom/o-que-e-
megapixel
Todas essas imagens, com grandes tamanhos, precisam, em algum momento, ter suas
dimensões ajustadas para se enquadrar em projetos ou layouts, principalmente, dentro do contexto
da web. O motivo para isso é bem simples: quanto mais pixels uma imagem possui, maior será o
arquivo necessário para armazenar essa imagem em disco e consequentemente transferir pela
internet.
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 web sites.
Padrões de banners da Abraweb:

http://abraweb.com.br/banners.php
Na tabela, encontramos resoluções como 250 por 250 pixels, que é bem menor do que as
citadas anteriormente. Nesse tipo de situação, é necessário redimensionar as imagens para fazer com
que as mesmas sejam reduzidas para que se enquadrem nesse tipo de resolução.
Como podemos redimensionar uma imagem no GIMP? Isso é feito no menu imagem, na
opção redimensionar imagem, como mostra a Figura 2.5.
29
Competência 02
Figura 2.5 - Redimensionando imagens

Fonte: O autor
Descrição: menu imagem marcando a opção Redimensionar Imagem.
Redimensionando Imagens:
Redimensionando Imagens:
https://www.youtube.com/watch?v=bNUPS0SvtRw
A explicação completa sobre o funcionamento do ajuste das dimensões nas imagens, você
encontra nos vídeos “Redimensionamento de imagens”. Os links estão disponíveis na caixa de
informação acima.
O ajuste das dimensões nas imagens é uma das tarefas mais comuns que podemos
realizar no GIMP e, ao mesmo tempo, também é a mais útil, pois, geralmente, as dimensões de uma
imagem precisam ser ajustadas para uso na web, apresentações ou documentos.
30
Competência 02
2.5 Exclusão de camadas
Com as imagens em tamanhos diferentes, podemos começar a explorar mais recursos do

GIMP, como a adição de textos nas imagens. Já que o uso de publicidade na web foi citado como uma
das aplicações mais práticas do recurso, podemos ter esse tipo de criação em mente. Os recursos
para trabalhar, mesmo que resumidamente, com imagens são explicados nos vídeos Camadas do
GIMP e Exclusão de Camadas do GIMP. Os links estão disponíveis na caixa de informação abaixo.
Os vídeos Camadas do GIMP e Exclusão de Camadas do GIMP mostram um pouco sobre
como funciona a adição de textos e, depois, como é possível remover esses textos das imagens
excluindo a camada resultante. Os vídeos mostram também como funcionam as camadas do GIMP.
Os vídeos não foram produzidos para esse curso, mas explicam bem o funcionamento e utilidade das
camadas.
Camadas do GIMP:
https://www.youtube.com/watch?v=xcnAy0ezx3o
Exclusão de Camadas do GIMP:
2.6 Transformações em imagens
As imagens, algumas vezes, precisam de outros tipos de ajustes, além do

redimensionamento. Para trabalhar com esse tipo de transformação nas imagens, usamos o menu
imagem e a opção transformações no GIMP como mostra a Figura 2.6.
31
Competência 02
Figura 2.6 – Transformações

Fonte: O autor
Descrição: menu imagem mostrando as opções da aba Transformar.
Nesse caso, as transformações disponíveis para as imagens são as seguintes:

• Espelhamento horizontal e vertical;
• Rotação da imagem.
Os procedimentos necessários para usar esses recursos no GIMP são explicados no vídeo
Transformações em Imagens, o link está disponível na caixa de informação abaixo.
Transformações em Imagens:
32
Competência 02
2.7 Corte de imagens
As imagens que recebemos para edição podem, eventualmente, possuir partes

indesejadas ou áreas específicas que devem ser exibidas em apresentações. Nesse tipo de situação,
é interessante cortar essas imagens, para exibir somente o que se deseja. Em termos de edição para
imagens, a técnica de corte é conhecida como Crop, e podemos realizar esse corte na imagem usando
a ferramenta equivalente do GIMP chamada de "Ferramenta corte" como mostra a Figura 2.7.
Figura 2.7 - Ferramenta de corte do GIMP

Fonte: O autor
Descrição: tela do GIMP mostrando os menus e a ferramenta de corte.
Corte em Imagem:
33
Competência 02
A explicação sobre o funcionamento da ferramenta pode ser encontrada no vídeo Corte

em Imagem. O link está disponível na caixa de informação acima.
Depois de cortada, a imagem pode ser editada e finalizada, com outras ferramentas do
GIMP. É interessante que esse corte, caso necessário, seja realizado antes do redimensionamento da
imagem, para evitar problemas com poucos pixels para a largura ou altura da imagem.
2.8 Cores
As cores de uma imagem podem precisar de ajustes, assim como acontece com suas
dimensões. E isso também pode ser objeto de ajustes dentro do GIMP. Existe um menu específico
para fazer ajustes em cores que é o menu cor mostrado na Figura 2.8. Nesse menu, é possível
encontrar opções para fazer ajustes diversos nas cores de uma imagem como:
• Ajuste de brilho;
• Ajuste de contraste;
• Balanço de cor;
• Saturação;
• Luminosidade.
Figura 2.8 - Menu cor

Fonte: O autor
Descrição: selecionando o menu cores e mostrado as opções
contidas nele
34
Competência 02
Assim como aconteceu com outros parâmetros relacionados com as ferramentas do

GIMP, a explicação sobre como usar os ajustes de cor do GIMP está disponível na caixa de informação
abaixo, nos vídeos Ajustes de cor.
Ajustes de cor:
https://www.youtube.com/watch?v=4IAJ0sVC7nk
Ajustes de cor:
Atenção:
Esse tipo de modificação nas imagens deve ser aplicado com cuidado, pois
envolve a manipulação de pixels usando a sua percepção sobre as cores,
luminosidade e contraste da imagem.
Caso você não tenha experiência com esse tipo de detalhe estético das imagens, é melhor
não fazer alterações drásticas nas imagens, para evitar ter como resultado imagens com cores ou
modificações cromáticas. Sempre salve as imagens que recebem modificações nas cores, com outros
nomes, para ter acesso às imagens originais posteriormente.
2.9 Transparência
O último tipo de ajuste que faremos em termos de edição nas imagens é muito útil nos
casos do uso de fotografias, em apresentações e documentos. Algumas vezes, é preciso aplicar uma
imagem em layouts, mas com formas diferentes do tradicional quadrado ou retângulo, os quais são
os padrões das imagens. Nesse tipo de situação, é perfeitamente possível e útil excluir partes da
imagem deixando a área em que os pixels foram excluídos com transparência.
Na semana passada, abordamos os tipos de imagens utilizados na web, e dois desses
formatos suportavam canais alpha.
35
Competência 02
Para aprender como gerar esse tipo de imagem no GIMP para uso em apresentações,
você deve assistir ao vídeo chamado Transparência em imagens, disponíveis na caixa de informação
abaixo.
Atenção:
PNG é o formato mais indicado para representar fotografias em
apresentações que precisem de algum tipo de canal alpha.
Transparência em Imagens:
https://www.youtube.com/watch?v=-ELNbklB2ZM
2.10 Salvando imagens
O passo final de qualquer edição de imagens no GIMP é a criação de um arquivo de

imagem com o resultado do processo de edição. Para criar novos arquivos de imagem, basta usar o
menu Arquivo e a opção exportar para gerar imagens nas extensões JPG, GIF ou PNG como mostra a
Figura 2.10.
36
Competência 02
Figura 2.10 - Exportando imagens

Fonte: O autor
Descrição: tela do GIMP marcada na opção de exportar imagem no formato GIF
E nos casos em que você deseja armazenar uma imagem com os recursos usados no GIMP
como camadas, textos editáveis e outros elementos, o formato indicado é o XCF (eXperimental
Computing Facility). Esse formato é o que o GIMP usa nativamente para armazenar a estrutura das
imagens e permitir edições futuras. Nos casos em que você deseja ter a possibilidade de editar os
textos, camadas e outros elementos das imagens, é recomendável, salvar os arquivos em XCF e
também no formato de saída seja ele JPG, GIF ou PNG.
O vídeo chamado “Salvando uma imagem” mostra todos os detalhes sobre como é
possível salvar essas imagens no GIMP, e você encontra o link desse vídeo na caixa de informação
abaixo.
Salvando imagens:
https://www.youtube.com/watch?v=mCKe8WiCalk
37
3.Competência 03| Técnicas de Edição e Montagem de Layouts para Web
com Base em Imagens
A terceira parte da nossa disciplina aborda a criação de peças gráficas para a Web usando
o que já aprendemos sobre manipulação de imagens com o GIMP. O conteúdo que já estudamos é
suficiente para trabalhar com edição de imagens para a Web? Apesar de já termos abordado uma
boa quantidade de temas, ainda é necessário somar mais alguns tópicos a nossa lista de assuntos,
para que você tenha mais segurança na edição e manipulação de imagens para a web.
Por isso, ao mesmo tempo em que conhecemos as características desses layouts para a
web, também aprenderemos mais sobre as ferramentas que o GIMP nos proporciona, e que estão
disponíveis na maioria dos editores de imagem. Isso é importante, pois habilita você a trabalhar com
praticamente qualquer software que seja capaz de criar layouts ou montagens para a web. E nesse
caso existem muitas opções no mercado como o Photoshop e o Fireworks, ambos da Adobe e que
também são usados para esse tipo de propósito.
Antes de partirmos para a parte prática é interessante abordar o papel das imagens
dentro do ambiente web, 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 máximo em termos de montagem de layouts para a web.
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. Hoje, é possível utilizar
muitos desses efeitos como sombras, reflexos e principalmente controle de formas usando o CSS3
(Cascading Style Sheets). O uso intenso de imagens acaba sendo prejudicial para websites 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.
CSS3
Entenda o que é o CSS3 lendo esses textos:
http://www.w3c.br/pub/Cursos/CursoCSS3/css-web.pdf
http://www.linhadecodigo.com.br/artigo/3566/introducao-as-
novidades-do-css3.aspx
38
Atenção:
Isso significa que não devemos usar imagens? Claro que não! O significado
disso é simples: você deve usar imagens apenas quando for indispensável
para o projeto. Por exemplo, a exibição de uma fotografia ou a criação de
um banner para anúncios. Esses são casos clássicos em que o uso de
imagens é recomendado.
A lista a seguir mostra situações em que é recomendado utilizar imagens:

• Exibir publicidade;
• Mostrar áreas de layout que são impossíveis de reproduzir com CSS3;
• Adicionar fotografias no layout de web sites;
• Planejar o layout para conversão em CSS3.
Para completar a lista, agora 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 website. Como o maior desafio na internet é atrair
visitantes para os websites, 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 websites.
3.1 Layouts para web
E para fazer com que os nossos conhecimentos relacionados à produção de conteúdo

para web estejam alinhados com as exigências do mercado, o foco da terceira parte da disciplina será,
exatamente, na construção de dois artefatos muito usados nos dias de hoje na web. O primeiro é um
39
banner publicitário, que mescla imagens com informações de texto, para ser inserido dentro de
websites. A segunda peça é o planejamento de um layout, usando recursos do GIMP, para posterior
transformação desse layout em uma estrutura baseada apenas em CSS.
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
a interface. 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.
Caso você ainda não conheça o CSS3, existem diversos tutoriais e dicas na própria web
que mostram o poder desse recurso em termos de representação visual. A seguir, na caixa de
informação, existem alguns endereços com recursos interessantes para quem quiser expandir ou
conhecer mais sobre o assunto.
Layout para Web utilizando CSS:

https://tableless.com.br/css3-modulo-template-layout
www.maujor.com/tutorial/css3-modulo-template-layout.php
3.2 Montando banners para web
O nosso primeiro projeto que aplica o que conhecemos em relação ao GIMP na produção
de artefatos para a web é a criação de um banner. Esse banner tem como objetivo mostrar os
seguintes recursos do GIMP que devem permitir que você crie outras peças gráficas semelhantes para
a web:
• Formatação de textos;
• Uso de camadas;
• Aplicação de efeitos;
• Desenho de formas;
• Ferramentas de pintura;
• Dimensionamento de imagens.
40
Todos esses conhecimentos são necessários para conseguir gerar o banner que é exibido
já na sua forma final na Figura 3.1.
Figura 3.1 - Banner finalizado

Fonte: o autor
Descrição: banner mostrando uma praia, contendo as informações de contato, site, número de telefone e e-mail, além
da frase “praias do Nordeste”.
3.2.1 Dimensões do banner
A primeira coisa que precisamos fazer para criar o nosso banner é definir o seu tamanho.
As dimensões de peças publicitárias na web devem seguir o padrão já apresentado anteriormente e
que está bem documentado no site da Abraweb. Essas dimensões são usadas pelos maiores
provedores de publicidade online como o Google Adwords, OpenX e outros. Isso significa que, ao
escolher um desses formatos, você estará criando uma peça publicitária que pode ser usada em
praticamente qualquer layout.
Como essas dimensões são padronizadas, a maioria esmagadora das interfaces na web
reserva espaços para banner que são compatíveis com ao menos uma dessas dimensões. E para nosso
banner, a escolha da dimensão é o do anúncio 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.
Então, para começar a fazer o banner, é necessário abrir o GIMP e criar um novo arquivo
com dimensões de 336 por 280 pixel, como mostram as figuras 3.2 e 3.3.
41
Figura 3.2 - Criando um arquivo novo no GIMP
Fonte: o autor
Descrição: tela do GIMP com uma seta vermelha apontando para a opção “nova”, para criar um novo arquivo.
42
Figura 3.3 - Dimensões da imagem
Fonte: o autor
Descrição: tela do GIMP para criar uma nova imagem com duas setas vermelhas marcando as opções de largura e
solução.
O espaço de cor deve ser mantido no formato RGB, pois a nossa imagem será usada em
dispositivos de vídeo, assim como a resolução para imagens, que deve permanecer em 72 dpi.
3.2.2 Fotografia como fundo
Com o banner devidamente dimensionado, podemos agora trabalhar na adição da

fotografia que representará o fundo do banner. Para adicionar a imagem é interessante criar uma
camada exclusiva para essa imagem. O GIMP possibilita criar automaticamente uma camada para a
imagem, caso a mesma seja copiada e colada de outro arquivo. Então, o primeiro passo é abrir o
arquivo da imagem que é identificada como IMG_banner.jpg como mostra a Figura 3.4.
43
Figura 3.4 - Imagem original
Fonte: o autor
Descrição: tela do GIMP com a imagem de uma praia.
Essa imagem está com uma dimensão muito

maior do que a que precisamos para trabalhar no banner.
Por isso, a primeira coisa a fazer antes de copiar e colar a
mesma no nosso banner é redimensionar a mesma, para
que a sua largura seja de no máximo 336 pixels. No menu
imagem, escolha a opção redimensionar imagem, como
mostra a Figura 3.5.
Figura 3.5 - Redimensionar imagem

Fonte: o autor
Descrição: menu imagem com uma seta
vermelha apontando para a opção
Redimensionar imagem.
44
E determine que a mesma tenha largura de 336 pixels, como mostra a Figura 3.6.
Figura 3.6 - Configurando o tamanho da imagem

Fonte: o autor
Descrição: tela de Redimensionar Imagem com uma seta vermelha apontando para a opção largura/altura.
Com imagem na dimensão correta,

podemos selecionar a mesma com a tecla
CTRL+A ou então acionando o menu Seleção –
Selecionar, tudo como mostra a Figura 3.7.
Figura 3.7 - Selecionar tudo

Fonte: o autor
Descrição: menu selecionar com uma seta vermelha
apontando para a opção “ver todas”.
45
Com a imagem devidamente
selecionada, você pode acionar um dos atalhos mais
usados no mundo da informática, o comando
CTRL+C. E com a imagem copiada para a área de
transferência do seu computador, podemos voltar
para o nosso projeto, com o menu janela, como
Figura 3.8 - Alternando entre projetos

Fonte: o autor
Descrição: menu “janelas” com o ponteiro do mouse
em cima da opção “sem título”.
Agora, escolha a opção colar como nova camada. Isso fará com que a imagem seja colada
no nosso banner, como se fosse uma nova camada do GIMP já configurada. O menu é mostrado na
Figura 3.9 e o resultado do processo na Figura 3.10.
Figura 3.9 - Opção para colar

Fonte: o autor
Descrição: menu “editar” com uma seta vermelha apontando para a opção “nova camada” contida na aba “colar
como”.
46
Figura 3.10 - Resultado da edição
Fonte: o autor
Descrição: tela do GIMP com a imagem de uma praia e duas setas vermelhas, uma apontando para a imagem e a outra
para a opção “área de transferência”
Para mover a imagem no banner, podemos usar a ferramenta mover do GIMP, que é
exibida na Figura 3.11.
Figura 3.11 - Ferramenta mover

Fonte: o autor
Descrição: tela do GIMP com a imagem de uma praia e duas setas vermelhas, uma apontando para a imagem da praia e
a outra para a opção “área de transferência”
47
3.2.3 Adicionando textos
O plano de fundo do banner já está configurado

corretamente, diante disso podemos partir para a criação
dos elementos textuais. Nesse caso, o objetivo é adicionar o
texto que fica na parte superior do banner. Para adicionar
textos ao nosso banner, utilizamos a ferramenta de textos
do GIMP que é mostrada na Figura 3.12.
Figura 3.12 - Ferramenta de textos do GIMP

Fonte: o autor
Descrição: ícones das ferramentas do GIMP
com uma seta vermelha apontando para a
opção da ferramenta de texto, representada
pela letra A.
Ao acionar essa ferramenta e clicar em qualquer parte da imagem, podemos adicionar

textos na nossa imagem. Antes de começar a digitar no nosso texto, é importante configurar alguns
aspectos dos caracteres usados como a fonte. Isso pode ser realizado na barra de opções do GIMP,
em que escolhemos o tipo de fonte. Nesse caso, a fonte escolhida foi a Arial, que é uma fonte comum,
mais indicada para uso em dispositivos de vídeo, pois não apresenta serifa. O local de seleção das
fontes pode ser visualizado na Figura 3.13.
Saiba mais sobre fontes com serifa:

http://tutano.trampos.co/12742-infografico-tipografia-serifa/
48
Figura 3.13 - Escolha da fonte
Fonte: o autor
Descrição: menu do GIMP com uma seta vermelha apontando para a opção de escolher a fonte.
No mesmo local em que alteramos a fonte, podemos também modificar aspectos como
o tamanho dos caracteres, cor e outras informações do texto. Com tudo devidamente ajustado,
podemos agora clicar no local indicado pela Figura 3.14 e digitar o texto "Praias do Nordeste". Para
fazer ajustes no posicionamento do texto, é possível usar, a qualquer momento, a ferramenta mover,
como mostra a Figura 3.15.
Figura 3.14 - Posição do texto

Fonte: O autor
Descrição: tela do GIMP com a imagem de uma praia sendo editada. Nela, consta a inserção do texto “praias do
Nordeste”.
49
Figura 3.15 - Ferramenta mover
Fonte: o autor
Descrição: tela do GIMP com a imagem de uma praia e nela está sendo movido o texto inserido “praias do Nordeste”
Um aspecto interessante que deve ser notado em relação à criação de textos no GIMP é
que, ao criar textos, o resultado será a adição automática de uma nova camada na lista de camadas.
Essa nova camada permite utilizar controles específicos sobre o texto, como mostra a Figura 3.16.
Figura 3.16 - Nova camada

Fonte: o autor
Descrição: tela do GIMP onde está sendo editada a imagem de uma praia.
50
3.2.4 Barra inferior
Com o texto posicionado na parte superior do banner, podemos partir para a criação da
barra inferior do nosso banner. Essa barra inferior deve ser desenhada na posição final, usando as
ferramentas do GIMP. Esse tipo de desenho é realizado da mesma forma na maioria dos softwares
que fazem edição de imagens, que é por meio da ferramenta de seleção. Ao delimitar uma área na
imagem, podemos adicionar cores que resultam na pintura do espaço delimitado.
Para adicionar essa parte inferior no nosso banner, precisamos adicionar uma nova
camada que será chamada de "barra inferior", como mostram as figuras 3.17 e 3.18.
Figura 3.17 - Criando uma nova camada

Fonte: o autor
Descrição: tela do GIMP com uma seta vermelha apontando para a opção “criar nova camada”.
51
Figura 3.18 - Ajustes da nova camada
Fonte: o autor
Descrição: tela do GIMP onde está sendo inserido o nome da camada.
A seleção dessa área, que deve ser pintada, é feita

com a ferramenta lasso, como mostra a Figura 3.19. Depois de
acionar a ferramenta lasso, é necessário marcar uma seleção
parecida com a da Figura 3.20. Para fazer esse tipo de seleção,
você deve clicar e soltar o botão esquerdo do mouse, sem a
necessidade de arrastar. Para fazer uma seleção ortogonal,
basta usar a tecla CTRL ao mover o mouse que as linhas da
seleção são criadas de maneira ortogonal. Nessa seleção, você
deve clicar no primeiro ponto para finalizar o processo.
Figura 3.19 - Ferramenta lasso
Fonte: o autor
Descrição: tela do GIMP que mostra as
ferramentas para edição de imagens.
52
Figura 3.20 - Seleção
Fonte: o autor
Descrição: imagem de uma praia, com o texto “praias do Nordeste”, sendo editada no GIMP.
Como resultado da seleção veremos uma forma geométrica marcada na imagem como
Figura 3.21 - Resultado da seleção

Fonte: o autor
53
Com a seleção realizada, podemos adicionar a cor. Tenha certeza de que a camada que
criamos para a barra inferior está selecionada e acione a ferramenta de pintura em gradiente do
GIMP, como mostra a Figura 3.22. Essa mesma imagem mostra o tipo de gradiente que deve ser usado
para preencher a seleção, que é o chamado Deep Sea. As cores desse gradiente utilizam azul e preto,
e contrastam muito bem com a paisagem de fundo do banner.
Figura 3.22 - Configurando o gradiente

Fonte: o autor
Descrição: tela do GIMP que mostra as ferramentas para edição de imagens.
A pintura do gradiente deve ser realizada com uma boa amplitude, clicando na parte
superior da imagem e com o botão esquerdo do mouse pressionado, você deve arrastar o cursor para
a parte inferior do banner, como mostra a Figura 3.23. Isso fará com que o gradiente criado seja mais
suave.
54
Figura 3.23 - Pintura do gradiente
Fonte: o autor
O resultado pode ser conferido na Figura 3.24, em que apenas a área selecionada recebeu
a pintura do gradiente.
Figura 3.24 - Resultado da pintura

Fonte: o autor
55
3.2.5 Textos adicionais
Agora, podemos finalizar a criação do banner, usando novamente a ferramenta de textos

do GIMP, mas, nesse caso, você já conhece o funcionamento. O objetivo é adicionar os textos no
banner para conseguir como resultado o layout que temos na Figura 3.25.
Figura 3.25 - Layout com textos na barra inferior

Fonte: o autor
Descrição: imagem de uma praia, com o texto “praias do Nordeste”, sendo editada no GIMP. Está sendo inserido uma
caixa de teto com informações: site, número de telefone e e-mail.
Um último ajuste no nosso banner envolve o deslocamento do texto superior para que o
mesmo fique centralizado e um pouco maior do que havíamos configurado. O resultado final é
apresentado na Figura 3.26.
56
Figura 3.26 - Resultado final do banner
Fonte: o autor
Descrição: imagem de uma praia com as informações do site (ww.praias.com.br), número de telefone e e-mail.
Com o banner finalizado, você pode agora exportar o arquivo no formato JPG para usar
em web sites.
3.3 Planejando web sites com base em imagens
A criação de layouts para Web no GIMP utiliza muito do que já abordamos no desenho
do banner, principalmente a parte final, em que foi elaborada uma barra inferior para o banner. Nesse
caso, os layouts para a web usam a pintura de partes determinadas da imagem na moldura do GIMP.
Atenção:
Nesse tipo de situação, os layouts podem tanto servir como
referência para a criação dos websites ou mesmo funcionar como
base para a futura codificação da estrutura usando HTML e CSS.
57
Nos dias de hoje, o mais correto é usar o software de edição como base para criação do
layout, pela facilidade de poder visualizar a interface de maneira instantânea em relação ao que é
feito diretamente no código. Depois que o layout está concluído, podemos passar o mesmo para o
processo de codificação. Outra opção é gerar um mapa de imagem em HTML diretamente no GIMP,
que apesar de não ser muito usado hoje em dia, pode ser a solução para o design rápido de web sites.
Como base no nosso estudo sobre desenho de layout para web, vamos trabalhar com o
desenho do layout exibido na Figura 3.27.
Figura 3.27 - Layout web

Fonte: o autor
Descrição: tela do GIMP mostrando um layout de um banner
58
Esse layout para web apresenta partes com conteúdo, logomarca, navegação e outros
elementos. Sendo esses elementos desenhados no GIMP, usando as ferramentas de pintura.
3.3.1 Criando a moldura
Para começar a criar o nosso layout para web, precisamos, evidentemente, adicionar uma
nova moldura no GIMP como mostra a Figura 3.28. Depois que acionamos a opção Arquivo -> Novo,
precisamos configurar a nossa moldura como tendo 700 pixels de largura e 850 pixels de altura. A
Figura 3.29 mostra a configuração do menu de criação.
Figura 3.28 - Criando um novo arquivo

Fonte: o autor
Descrição: tela do GIMP criando um novo arquivo.
59
Figura 3.29 - Configurando a moldura
Fonte: o autor
Descrição: tela do GIMP criando um novo arquivo.
3.3.2 Preparando a área de desenho
O GIMP oferece várias ferramentas de controle para desenho de layouts, que facilitam
muito o trabalho de qualquer designer. Entre essas opções, está a chamada grade, que nada mais é
do que um conjunto de linhas horizontais e
verticais que ajudam no desenho regular
de elementos na área de desenho. É como
se fôssemos trabalhar sobre uma folha de
papel “milimetrado”. Para ajustar esse
recurso extra de desenho, precisamos
acionar o menu Imagem -> Configurar
Grade como mostra a Figura 3.30.
Figura 3.30 - Configurando a grade

Fonte: o autor
Descrição: menu “imagem” com uma seta vermelha apontando
para a opção “configurar grade.”
60
A melhor configuração para a grade é um
espaçamento de 25 pixels na horizontal e vertical,
seguidos por um tipo de linha sólido. Na cor da
grade, você deve escolher uma tonalidade cinza,
como mostra a Figura 3.31.
Figura 3.31 - Configuração da grade

Fonte: o autor
Descrição: menu configurar grade com três setas vermelhas apontando
para as opções: estilo das linhas, cor da fonte e altura.
Depois disso,
podemos exibir a grade na
área de desenho do GIMP,
com a opção do menu
visualizar chamada de "Exibir
Grade", como mostra a Figura
3.32. O resultado da
configuração é exibido na
Figura 3.33.
Figura 3.32 - Ajustes na grade

Fonte: o autor
Descrição: menu “visualizar” selecionado com uma seta vermelha apontando
para a opção “exibir grade”.
61
Figura 3.33 - Resultado da grade
Fonte: o autor
Descrição: tela do GIMP com o fundo branco.
3.3.3 - Preparando as camadas
Com a grade devidamente criada, podemos partir para a configuração das camadas
usadas no nosso layout. É muito importante configurar e
separar os elementos da interface em camadas, pois isso
permitirá no futuro que os elementos visuais das camadas
sejam editados. Portanto, sempre comece qualquer
ilustração envolvendo elementos gráficos no GIMP criando
a sua própria camada para esse elemento em particular.
A primeira camada criada deve ser chamada de
"borda geral" como mostra a Figura 3.34, sendo a camada
usada para delimitar o contorno do nosso layout.
Figura 3.34 - Configuração da camada

Fonte: o autor
Descrição: menu “nova camada” onde está
sendo inserido o nome da camada.
62
Antes de continuar com o desenho, é importante acionar a opção "Atrair pela grade",
como mostra a Figura 3.35, para que, ao desenhar qualquer elemento no GIMP, o mesmo seja atraído
pelas linhas da grade.
Figura 3.35 - Configurando a grade

Fonte: o autor
Descrição: menu “visualizar” com uma seta vermelha apontando para a opção “atrair para a grade”.
3.3.4 Contorno do layout
Agora, precisamos fazer a marcação de um contorno retangular ao redor da nossa

moldura, como mostra a Figura 3.36. Esse contorno é feito com a ferramenta de seleção, em forma
de quadrado do GIMP. As opções que já acionamos em relação à grade do GIMP devem ajudar a criar
a seleção de maneira muito próxima à exibida na Figura 3.36.
63
Figura 3.36 - Seleção no GIMP
Fonte: o autor
Descrição: tela do GIMP com duas setas vermelhas, uma pontando para as ferramentas de edição e a outra para a
moldura.
Essa opção de seleção não é necessariamente uma ferramenta de desenho, por isso é
necessário usar outros meios para adicionar linhas de contorno na seleção que acabamos de realizar.
O método de desenho, com base em seleção, é muito comum em ferramentas de ilustração como o
GIMP. Nesse caso, devemos usar a opção do menu editar, chamada de "contornar seleção", como
64
Figura 3.37 - Contornar seleção
Fonte: o autor
Descrição: menu “editar” com uma seta vermelha apontando para a opção “contornar seleção”.
A opção de contornar a seleção deve receber duas configurações, que são a sua espessura
e também a cor usada no contorno, que nesse caso deve ser cinza como mostra a Figura 3.38. O
resultado disso pode ser conferido na Figura 3.39, com a linha de contorno delimitando a área do
nosso layout.
65
Figura 3.38 - Configurações do contorno
Fonte: o autor
Descrição: menu “controlar seleção” com uma seta vermelha apontando para a opção “largura da
linha”.
Figura 3.39 - Linha de contorno

Fonte: o autor
Descrição: tela do GIMP, fundo branco.
66
3.3.5 Pintura das áreas do layout
Como já conhecemos as ferramentas de desenho do GIMP com base nos assuntos

abordados na criação do banner, podemos pular alguns estágios na elaboração do layout. O objetivo
agora é criar uma nova camada, para separar a barra superior do layout e, com essa camada
selecionada, podemos marcar uma área retangular na parte superior do layout e pintar essa área com
uma cor em gradiente. O resultado dessa pintura e configuração pode ser visualizado na Figura 3.40.
Figura 3.40 - Barra superior

Fonte: o autor
Descrição: tela do GIMP onde uma parte está sendo colorida na cor verde.
Logo depois de pintar a barra superior, podemos marcar uma seleção idêntica à usada
anteriormente, em termos de ferramentas, mas agora com um tamanho um pouco menor. Dessa vez,
o objetivo é marcar apenas uma pequena barra inferior ao layout da parte superior. É importante
criar uma nova camada antes desse procedimento para manter a interface organizada (Figura 3.41).
Essa barra deve ser pintada com a ferramenta "balde de tinta", usando tonalidade cinza, como mostra
a Figura 3.42.
67
Figura 3.41 - Barra de navegação
Fonte: o autor
Descrição: tela do GIMP onde uma parte está sendo colorida usando a tonalidade cinza.
Figura 3.42 - Pintura da barra

Fonte: o autor
Descrição: tela do GIMP na coloração de um banner.
O mesmo procedimento deve ser usado para criar uma barra em uma nova camada, agora
chamada de "destaque" como mostra a Figura 3.43. E logo depois outra área criada chamada de
social, como mostra a Figura 3.44.
68
Figura 3.43 - Barra de destaque
Fonte: o autor
Descrição: tela do GIMP criando uma nova camada para um banner.
Figura 3.44 - Barra social

Fonte: o autor
Descrição: tela do GIMP, menu “camadas”.
69
3.3.6 Desenho de linhas
O nosso layout também apresenta uma linha que divide a parte do conteúdo do que seria
uma área para listar pequenos textos. Essa linha pode ser desenhada com uma ferramenta do GIMP
chamada de lápis. A ferramenta deve ser configurada com uma espessura de 2 pixels e, depois
ajustada para a cor cinza. O desenho da linha deve ser realizado com base nos pontos exibidos na
Figura 3.45 e o resultado final é exibido na Figura 3.46. Par criar uma linha reta mantenha a tecla CTRL
ao marcar os pontos.
Figura 3.45 - Configuração da linha

Fonte: o autor
Descrição: tela do GIMP na fase inicial da construção de um banner.
70
Figura 3.46 - Resultado da linha
Fonte: o autor
Descrição: tela do GIMP iniciando a construção de um banner.
3.3.7 Adicionando textos no layout
A adição de textos no layout não apresenta nenhum mistério, sendo necessários apenas
ajustes em relação às configurações de como o texto será exibido. No primeiro estágio da
configuração dos textos, podemos adicionar um título na barra superior, seguido por uma amostra
de conteúdo, como mostra a Figura 3.47.
71
Figura 3.47 - Primeiros textos no layout
Fonte: o autor
Descrição: tela do GIMP onde está sendo inserido um texto num banner.
Dica: Na área de design, é usado com frequência um texto em latim chamado de Lorem
Ipsum. Esse texto é usado apenas para compor visualmente um layout enquanto não temos o
conteúdo final definido. Você pode gerar esses textos em latim em vários websites, como o Lorem
BR.
Gerador de textos: https://br.lipsum.com/
72
O próximo passo é adicionar um texto na área de destaque e, também, um ícone para o
Twitter. Esse ícone para o Twitter pode ser copiado no link disponível na caixa de informação abaixo.
O processo para adicionar o ícone no layout é idêntico ao que já realizamos anteriormente
no exercício do banner. O resultado dessa configuração pode se conferido na Figura 3.48.
Figura 3.48 - Layout com ícone

Fonte: o autor
Descrição: tela do GIMP criando um banner nas cores verde, branca e cinza.
Ícone: https://www.saporedivino.com.br/icone-twitter/
73
Os últimos textos do nosso layout são as opções de navegação e os textos resumidos que devem ser
adicionados na parte esquerda da interface, como mostra a Figura 3.49.
Figura 3.49 - Últimos textos

Fonte: o autor
Descrição: tela do GIMP construindo um banner.
3.3.8 Preparando o layout para a web
Com o nosso layout visualmente terminado, podemos preparar o mesmo para a

publicação na web. Até alguns anos atrás, era comum encontrar websites e sistemas totalmente
criados com base em imagens, mas isso já não é o padrão de criação entre designers nos dias de hoje.
O motivo já foi mencionado anteriormente, estando relacionado com a otimização do conteúdo e do
website para mecanismos de busca.
74
Mas, nada impede que você conheça a ferramenta que publica esse tipo de layout
diretamente do GIMP. A técnica consiste no "fatiamento" da imagem em vários pedaços que resultam
na criação de uma tabela em HTML. Cada uma das células da tabela recebe uma das imagens em
separado para formar o layout. Isso evita que tudo seja publicado como sendo uma imagem única, e
acelera o carregamento em navegadores web. O único problema desse procedimento é o uso de uma
tabela que, do ponto de vista semântico, está fora dos padrões da web contemporânea. Uma tabela
deve ser usada para exibir dados tabulados, e não montar layout.
Para gerar a tabela no GIMP e publicar o nosso layout como um arquivo HTML,
precisamos, primeiro, fazer a marcação com linhas guia. Essas linhas podem ser facilmente criadas ao
clicar em uma das réguas nas laterais de um layout no GIMP e arrastar o mouse, mantendo o botão
esquerdo pressionado. O posicionamento das réguas é a parte complexa. Mas, existe uma ferramenta
que ajuda a criar essas guias de maneira mais ordenada. Basta fazer uma seleção nas áreas de
desenho que criamos no nosso layout e acionar a opção no menu Imagem -> Guias -> Novas guias a
partir da seleção, como mostra a Figura 3.50.
Figura 3.50 - Ferramenta para criar guias

Fonte: o autor
Descrição: menu “imagem” com uma seta vermelha apontando para a opção “novas guias a partir da seleção” contida
na aba “guias”.
75
Você deve criar seleções nas áreas do layout e acionar essa opção várias vezes até que a
interface esteja com um esquema de guias semelhante ao que é mostrado na Figura 3.51.
Figura 3.51 - Guias na interface

Fonte: o autor
Descrição: banner nas cores verde, branco e cinza
Para exportar o layout como um arquivo HTML agora, podemos acionar os filtros do GIMP
no menu Filtros e escolher no subconjunto web a opção fatiar, como mostra a Figura 3.52.
76
Figura 3.52 - Opção fatiar
Fonte: o autor
Descrição: menu “filtros” mostrando a opção “fatiar” contida na aba “web”.
Nessa opção, devemos configurar o nome do arquivo HTML e do diretório que receberá
as imagens como mostra a Figura 3.53.
Figura 3.53 - Opções para exportar em HTML

Fonte: o autor
Descrição: menu do GIMP com duas setas vermelhas apontando para as opções “caminho para a exportação de HTML”
e “nome do arquivo para exportação”.
77
Além dessas opções, ainda é possível determinar o diretório em que todo o conjunto de
imagens e arquivo HTML será gravado, e o tipo de arquivo usado para gerar o layout. Nesse tipo de
situação, em que temos apenas cores simples no layout, a melhor opção é o GIF.
Pessoal, chegamos ao final de nosso caderno, espero que tenham gostado do conteúdo
apresentado!
78
Referências
GONZALES, Rafael C.; WOODS, Richard E. Processamento digital de imagens. 3.ed. São Paulo:
Pearson editora, 2015.
SOLOMON, Chris; BRECKON, Toby. Fundamentos de Processamento Digital de Imagens: Uma

Abordagem Prática com Exemplos em Matlab. São Paulo: Grupo GEN, Editora LTC, 2013.
79
Minicurrículo do Professor
Maicon Herverton Lino
É bacharel em Sistemas de Informação e mestre em Ciências da Computação pela UFRPE.

Hoje, é Sócio-Diretor da LIFE SOLUÇÕES EM TECNOLOGIA, já atuou como professor universitário em
cursos superiores e como analista de sistemas durante 6 anos.
80

Caderno DS Edição e Processamento de Imagens ETEPAC 2019.1 PDF

Enviado por

Dados do documento

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

Caderno DS Edição e Processamento de Imagens ETEPAC 2019.1 PDF

Enviado por

Direitos autorais:

Formatos disponíveis

Edição e Processamento de

Curso Técnico em Informática

Revisão de Língua Portuguesa

Diagramação (2.ed. 2019)

Conteúdo produzido para os Cursos Técnicos da Secretaria Executiva de Educação

Inclui referências bibliográficas.

1. Editoração eletrônica. 2. Processamento de imagens - Técnicas digitais. I. Título.

Elaborado por Hugo Carlos Cavalcanti | CRB-4 2129

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

1.1 Compressão de imagens ............................................................................................................................ 7

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

1.1.2 Compressão do tipo Lossless (Sem Perdas) ............................................................................................ 9

1.2 Cores nas imagens.................................................................................................................................... 10

1.2.1 Cores RGB e CMYK ................................................................................................................................ 10

1.2.2 Capacidade de reproduzir cores ........................................................................................................... 13

1.3 Efeitos e animação ................................................................................................................................... 14

1.4 Formato JPG ............................................................................................................................................. 14

1.4.1 Quando usar o JPG? .............................................................................................................................. 16

1.4.2 Quando não usar o JPG? ....................................................................................................................... 16

1.5 Formato GIF.............................................................................................................................................. 17

1.5.1 Quando usar arquivos GIF? ................................................................................................................... 19

1.6 Formato PNG ............................................................................................................................................ 19

1.6.1 Quando usar arquivos PNG? ................................................................................................................. 21

2. Competência 02| Formatar Imagens para Utilização na Web ou em Aplicativos de Editoração de

2.1 Formatando imagens com o GIMP .......................................................................................................... 23

2.2 Interface do GIMP .................................................................................................................................... 24

2.3 Controle do Zoom .................................................................................................................................... 27

2.4 Dimensões das imagens ........................................................................................................................... 28

2.5 Exclusão de camadas................................................................................................................................ 31

2.6 Transformações em imagens ................................................................................................................... 31

2.7 Corte de imagens ..................................................................................................................................... 33

2.9 Transparência ........................................................................................................................................... 35

2.10 Salvando imagens................................................................................................................................... 36

3.1 Layouts para web ..................................................................................................................................... 39

3.2 Montando banners para web................................................................................................................... 40

3.2.1 Dimensões do banner ........................................................................................................................... 41

3.2.2 Fotografia como fundo.......................................................................................................................... 43

3.2.3 Adicionando textos ............................................................................................................................... 48

3.2.4 Barra inferior ......................................................................................................................................... 51

3.2.5 Textos adicionais ................................................................................................................................... 56

3.3 Planejando web sites com base em imagens........................................................................................... 57

3.3.1 Criando a moldura................................................................................................................................. 59

3.3.2 Preparando a área de desenho ............................................................................................................. 60

3.3.3 - Preparando as camadas ...................................................................................................................... 62

3.3.4 Contorno do layout ............................................................................................................................... 63

3.3.5 Pintura das áreas do layout................................................................................................................... 67

3.3.6 Desenho de linhas ................................................................................................................................. 70

3.3.7 Adicionando textos no layout ............................................................................................................... 71

3.3.8 Preparando o layout para a web........................................................................................................... 74

Minicurrículo do Professor ................................................................................................................... 80

1. Competência 01 | Conhecer os Principais Formatos de Armazenamento

A nossa primeira competência na disciplina aborda quais os formatos de imagem

Antes de continuar, é importante ressaltar que, ao mencionar as imagens para web, o

1.1 Compressão de imagens

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

O formato conhecido como Lossy é baseado em uma premissa simples, que é a

1.1.2 Compressão do tipo Lossless (Sem Perdas)

Já pensou como seria complicado compactar um texto e, ao extrair as informações,

1.2 Cores nas imagens

1.2.1 Cores RGB e CMYK

Sistema de cores RGB (6:51) -

Composição das cores (14:20) -

Figura 1.1 – Mistura em RGB