Editoração de Imagens

0

Antony Rodrigues

03/01/2023

E aí, curtiu este material?

Ajude a incentivar outros estudantes a melhorar o conteúdo

Gostou desse material? Compartilhe! 🧡

Informática I

56.194 Materiais compartilhados

Baixe o app para aproveitar ainda mais

Leia os materiais offline, sem usar a internet. Além de vários outros recursos!

Prévia do material em texto

Técnico em Informática
Allan Rodrigo de Brito Soares

2014
Editoração de Imagens

Presidenta da República
Dilma Vana Rousseff

Vice-presidente da República
Michel Temer

Ministro da Educação
José Henrique Paim Fernandes

Secretário de Educação Profissional e
Tecnológica
Aléssio Trindade de Barros

Diretor de Integração das Redes
Marcelo Machado Feres

Coordenação Geral de Fortalecimento
Carlos Artur de Carvalho Arêas

Governador do Estado de Pernambuco
Eduardo Henrique Accioly Campos

Vice-governador do Estado de Pernambuco
João Soares Lyra Neto

Secretário de Educação
José Ricardo Wanderley Dantas de Oliveira

Secretário Executivo de Educação Profissional
Paulo Fernando de Vasconcelos Dutra

Gerente Geral de Educação Profissional
Luciane Alves Santos Pulça

Gestor de Educação a Distância
George Bento Catunda

Coordenação do Curso
João Ferreira da Silva Júnior

Coordenação de Design Instrucional
Diogo Galvão

Revisão de Língua Portuguesa
Letícia Garcia

Diagramação
Izabela Cavalcanti

3
Editoração de Imagens
INTRODUÇÃO ............................................................................................................................ 5
1.COMPETÊNCIA 01 | CONHECER OS PRINCIPAIS FORMATOS DE ARMAZENAMENTO DE
IMAGENS PARA WEB ................................................................................................................ 7
1.1 Compressão de Imagens ........................................................................................ 8
1.1.1 Compressão do Tipo Lossy (Perda de Dados) ..................................................... 8
1.1.2 Compressão do Tipo Lossless (Sem Perdas) ...................................................... 10
1.2 Cores nas Imagens ................................................................................................ 11
1.2.1 Cores RGB e CMYK ............................................................................................ 11
1.2.2 Capacidade de Reproduzir Cores ...................................................................... 13
1.3 Efeitos e Animação ............................................................................................... 14
1.4 Formato JPG ......................................................................................................... 15
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 ........................................................................................................ 20
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 ................................................................................................ 25
2.3 Controle do ZOOM ............................................................................................... 27
2.4 Dimensões das Imagens ....................................................................................... 28
2.5 Exclusão de Camadas ........................................................................................... 30
2.6 Transformações em Imagens ............................................................................... 31
2.7 Corte de Imagens ................................................................................................. 32
2.8 Cores ..................................................................................................................... 33
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

4
Técnico em Informática
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 ........................................................................................... 49
3.2.4 Barra Inferior ..................................................................................................... 53
3.2.5 Textos Adicionais ............................................................................................... 58
3.3 Planejando Web Sites com Base em Imagens ...................................................... 60
3.3.1 Criando a Moldura ............................................................................................ 62
3.3.2 Preparando a Área de Desenho ........................................................................ 63
3.3.3 - Preparando as Camadas .................................................................................. 66
3.3.4 Contorno do Layout .......................................................................................... 68
3.3.5 Pintura das Áreas do Layout.............................................................................. 71
3.3.6 Desenho de Linhas ............................................................................................ 74
3.3.7 Adicionando Textos no Layout .......................................................................... 75
3.3.8 Preparando o Layout para a Web ..................................................................... 78
REFERÊNCIAS .......................................................................................................................... 83
MINICURRÍCULO DO PROFESSOR ........................................................................................... 84

5
Editoração de Imagens
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.

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 percebernos 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 o
download de dois documentos em PDF, que são apostilas em português do
software GIMP. Essas apostilas foram desenvolvidas com o objetivo de
descrever as ferramentas do software e não possuem relação direta com as
nossas competências. Mas, ainda assim, são uma ótima fonte de informação
relacionada ao funcionamento das ferramentas do GIMP. Sempre que você

Recomendação de
Leitura:

 O GIMP -
Documentação
e ferramentas
por João
Calligaris -
www.ufpel.edu
.br/lpd/ferram
entas/gimp.pdf
 Treinamento
de GIMP -
software para
manipulação e
criação de
imagens por
Magali
Barcellos -
http://ftp.unica
mp.br/pub/apo
io/treinamento
s/internet/gim
p.pdf

http://www.ufpel.edu.br/lpd/ferramentas/gimp.pdf
http://www.ufpel.edu.br/lpd/ferramentas/gimp.pdf
http://www.ufpel.edu.br/lpd/ferramentas/gimp.pdf

6
Técnico em Informática
achar necessário, consulte essa apostila para explicações complementares às
que são apresentadas nesse caderno de estudos.

7
Editoração de Imagens
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 os formatos de imagem
utilizados na web e quais são 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,
como por exemplo:

 Quanto à compressão;
 Quanto à qualidade da imagem;
 Quanto ao suporte a efeitos;
 Quanto ao suporte a animações.

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 resultado final,
será muito mais fácil de entender os motivos que fazem um formato de

Recomendação de
Leitura:
Para saber mais
sobre imagens
digitais e ainda
complementar
essas explicações,
recomendo a leitura
dos seguintes
artigos:
http://pt.wikipedia.
org/wiki/Imagem_d
igital
http://pt.wikipedia.
org/wiki/Lista_de_f
ormatos_de_ficheir
os_de_imagem

http://pt.wikipedia.org/wiki/Imagem_digital
http://pt.wikipedia.org/wiki/Imagem_digital
http://pt.wikipedia.org/wiki/Imagem_digital
http://pt.wikipedia.org/wiki/Lista_de_formatos_de_ficheiros_de_imagem
http://pt.wikipedia.org/wiki/Lista_de_formatos_de_ficheiros_de_imagem
http://pt.wikipedia.org/wiki/Lista_de_formatos_de_ficheiros_de_imagem
http://pt.wikipedia.org/wiki/Lista_de_formatos_de_ficheiros_de_imagem

8
Técnico em Informática
Competência 01
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? Essa mesma
imagem, se estiver com bons níveis de compressão, pode, tranquilamente, ser
armazenada com 500 kilobytes. É algo muito mais interessante de receber por
e-mail, pois até mesmo algumas conexões de internet banda larga
demorariam bastante para carregar as informações. No contexto de vídeos
para web, a compressão chega a ser ponto crítico, mas no que se referem às
imagens podemos dizer que é fator importante quanto estamos em ambiente
de produção.

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.

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

9
Editoração de Imagens
Competência 01
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.

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 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ê

Atenção:
Para editar imagens
e criar layouts de
qualidade para
web, é necessário
possuir todas as
informações das
imagens, e com
arquivos salvos com
compressão Lossy,
isso não é possível.

Recomendação de
Leitura:
Para saber mais
sobre compressão
do tipo Lossy e
complementar
essas explicações,
recomendo a leitura
dos seguintes
artigos:
 http://inf.ufrgs.
br/~mkbahy/26
compressaoima
gens.pdf
 http://pt.wikip
edia.org/wiki/C
ompress%C3%
A3o_com_perd
a_de_dados

http://inf.ufrgs.br/~mkbahy/26compressaoimagens.pdf
http://inf.ufrgs.br/~mkbahy/26compressaoimagens.pdf
http://inf.ufrgs.br/~mkbahy/26compressaoimagens.pdf
http://inf.ufrgs.br/~mkbahy/26compressaoimagens.pdf
http://pt.wikipedia.org/wiki/Compress%C3%A3o_com_perda_de_dados
http://pt.wikipedia.org/wiki/Compress%C3%A3o_com_perda_de_dadoshttp://pt.wikipedia.org/wiki/Compress%C3%A3o_com_perda_de_dados
http://pt.wikipedia.org/wiki/Compress%C3%A3o_com_perda_de_dados
http://pt.wikipedia.org/wiki/Compress%C3%A3o_com_perda_de_dados

10
Técnico em Informática
Competência 01
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.

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.

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.

Atenção:
As imagens no
formato Lossless
acabam tendo
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.

11
Editoração de Imagens
Competência 01
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. 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.

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 é 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

Recomendação de
Leitura:
Para saber mais
sobre compressão
do tipo Lossless e
complementar
essas explicações,
recomendo a leitura
dos seguintes
artigos:
 http://inf.ufrgs.br/~
mkbahy/26compres
saoimagens.pdf
 http://pt.wikipedia.
org/wiki/Compress
%C3%A3o_sem_per
da_de_dados

http://inf.ufrgs.br/~mkbahy/26compressaoimagens.pdf
http://inf.ufrgs.br/~mkbahy/26compressaoimagens.pdf
http://inf.ufrgs.br/~mkbahy/26compressaoimagens.pdf
http://pt.wikipedia.org/wiki/Compress%C3%A3o_sem_perda_de_dados
http://pt.wikipedia.org/wiki/Compress%C3%A3o_sem_perda_de_dados
http://pt.wikipedia.org/wiki/Compress%C3%A3o_sem_perda_de_dados
http://pt.wikipedia.org/wiki/Compress%C3%A3o_sem_perda_de_dados

12
Técnico em Informática
Competência 01
inúmeras variações desse formato como os RGB e o RGBA, que suportam
pixels transparentes.

A Figura 2.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.

Figura 2.1 – Mistura em RGB
Fonte: http://pt.wikipedia.org/wiki/Ficheiro:Synthese%2B.svg, 2012

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,

Vídeo:
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_cwDr
MEg
Composição das
cores (14:20) -
http://www.yout
ube.com/watch?v
=qF9AoCUcDGg

http://pt.wikipedia.org/wiki/Ficheiro:Synthese%2B.svg
http://www.youtube.com/watch?v=rGY_cwDrMEg
http://www.youtube.com/watch?v=rGY_cwDrMEg
http://www.youtube.com/watch?v=rGY_cwDrMEg
http://www.youtube.com/watch?v=qF9AoCUcDGg
http://www.youtube.com/watch?v=qF9AoCUcDGg
http://www.youtube.com/watch?v=qF9AoCUcDGg

13
Editoração de Imagens
Competência 01
temos um marrom escuro. Por isso, é necessário adicionar a cor preta na
escala.

O uso do espaço de cor CMYK é restrito a 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 2.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.

Figura 2.2 – Mistura em CMYK
Fonte: http://pt.wikipedia.org/wiki/Ficheiro:SubtractiveColorMixing.png,
2012

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.
http://pt.wikipedia.org/wiki/Ficheiro:SubtractiveColorMixing.png

14
Técnico em Informática
Competência 01
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ãosempre 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.

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.

15
Editoração de Imagens
Competência 01
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 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.

Essa redução de tamanho, essa compressão dos arquivos acontece por meio
da criação de blocos de pixels, que tentam agrupar informações comuns nas
imagens. O algoritmo de compressão do JPG é muito bom, sendo capaz de
gerar e comprimir de maneira significativa um arquivo de imagem, a custo da
sua qualidade visual.

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.

Atenção:
A compressão de
imagens em JPG é
identificada por
uma escala que vai
de 0% até 100% de
qualidade nas
imagens.

16
Técnico em Informática
Competência 01
A imagem fica borrada, com blocos visíveis resultantes do algoritmo de
compressão.

Figura 2.3 – Compressão em JPG
Fonte: http://pt.wikipedia.org/wiki/Ficheiro:Texel_Landscape.jpg, 2012.

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.

Saiba Mais:
Recomendação de
leitura: Para saber
mais sobre os
arquivos JPG e
complementar
essas explicações,
recomendo a leitura
dos seguintes
artigos:
 www.infowester.co
m/imagens.php
 www2.dcc.
ufmg.br/disciplina
s/ii/ii05-
1/seminario/jpeg.
pdf
 www.slides
hare.net/sergiovin
iciuss/apresentac
ao-jpeg-smu
 www.slides
hare.net/creaktiv
e/codificacao-
lossy-do-jpeg
 Arquivo
RAW e JPG
(31:18) -
http://www.youtu
be.com/watch?v=
vTzSu_S33Qg

http://pt.wikipedia.org/wiki/Ficheiro:Texel_Landscape.jpg
http://www.infowester.com/imagens.php
http://www.infowester.com/imagens.php
http://www2.dcc.ufmg.br/disciplinas/ii/ii05-1/seminario/jpeg.pdf
http://www2.dcc.ufmg.br/disciplinas/ii/ii05-1/seminario/jpeg.pdf
http://www2.dcc.ufmg.br/disciplinas/ii/ii05-1/seminario/jpeg.pdf
http://www2.dcc.ufmg.br/disciplinas/ii/ii05-1/seminario/jpeg.pdf
http://www2.dcc.ufmg.br/disciplinas/ii/ii05-1/seminario/jpeg.pdf
http://www.slideshare.net/sergioviniciuss/apresentacao-jpeg-smu
http://www.slideshare.net/sergioviniciuss/apresentacao-jpeg-smu
http://www.slideshare.net/sergioviniciuss/apresentacao-jpeg-smu
http://www.slideshare.net/sergioviniciuss/apresentacao-jpeg-smu
http://www.slideshare.net/creaktive/codificacao-lossy-do-jpeg
http://www.slideshare.net/creaktive/codificacao-lossy-do-jpeg
http://www.slideshare.net/creaktive/codificacao-lossy-do-jpeg
http://www.slideshare.net/creaktive/codificacao-lossy-do-jpeg

17
Editoração de Imagens
Competência 01
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 2.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.

Figura 2.4 – JPG com cores sólidas
Fonte: O Autor

1.5 Formato GIF

Os arquivos no formato GIF 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

18
Técnico em Informática
Competência 01
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, 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
fotografiascom 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 imagens com cores sólidas apenas. A exibição de
elementos tipográficos, como fontes e palavras nas imagens, é um exemplo.

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

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.

19
Editoração de Imagens
Competência 01
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 2.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.

Figura 2.5 – Exemplo de representação em GIF
Fonte: http://pt.wikipedia.org/wiki/Ficheiro:Sunflower_as_GIF.gif, 2012.

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.

Saiba Mais:
Recomendação de
leitura: Para saber
mais sobre os
arquivos GIF e
complementar
essas explicações,
recomendo a leitura
dos seguintes
artigos:
 www.infoweste
r.com/imagens.
php
 http://pt.wikip
edia.org/wiki/G
raphics_Interch
ange_Format

http://pt.wikipedia.org/wiki/Ficheiro:Sunflower_as_GIF.gif
http://www.infowester.com/imagens.php
http://www.infowester.com/imagens.php
http://www.infowester.com/imagens.php
http://pt.wikipedia.org/wiki/Graphics_Interchange_Format
http://pt.wikipedia.org/wiki/Graphics_Interchange_Format
http://pt.wikipedia.org/wiki/Graphics_Interchange_Format
http://pt.wikipedia.org/wiki/Graphics_Interchange_Format

20
Técnico em Informática
Competência 01
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, coisa que é 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 conteúdo para a web quando é
preciso criar ícones e outros elementos com grande riqueza de cores e
perfeitamente integrados em layouts.

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 imagens em JPG, mas se a transparência
dos pixels for fator determinante, o PNG é a melhor opção.

As figuras 2.6 e 2.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.

Atenção:
Dentro do contexto
de layouts para a
web, o uso de
arquivos PNG é
muito comum na
representação de
ícones.

21
Editoração de Imagens
Competência 01

Figura 2.6 – Ícone salvo em PNG
Fonte: http://pt.wikipedia.org/wiki/Ficheiro:Truck_icon.png, 2012.

Figura 2.7 – Ícone salvo em PNG
Fonte: http://pt.wikipedia.org/wiki/Ficheiro:Miro_icon.png, 2012.

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.

Saiba Mais:
Recomendação de
leitura: Para saber
mais sobre os
arquivos PNG e
complementar
essas explicações,
recomendo a leitura
dos seguintes
artigos:
www.infowester.co
m/imagens.php
http://pt.wikipedia.
org/wiki/PNG

http://pt.wikipedia.org/wiki/Ficheiro:Truck_icon.png
http://pt.wikipedia.org/wiki/Ficheiro:Miro_icon.png
http://www.infowester.com/imagens.php
http://www.infowester.com/imagens.php
http://pt.wikipedia.org/wiki/PNG
http://pt.wikipedia.org/wiki/PNG

22
Técnico em Informática
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 (70 MB);
 É multiplataforma (Windows, Linux e Mac).

A versão que utilizamos para essa disciplina é a 2.8.2 que pode ser copiada de

23
Editoração de Imagens
Competência 02
maneira gratuita dos seguintes endereços:

 http://www.gimp.org
 http://portableapps.com

O último endereço apresenta, inclusive, uma opçãode 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.8.10, mas essas
representam geralmente apenas correções de bugs e segurança. A interface e
ferramentas abordadas ao longo da disciplina permanecem as mesmas.

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.

Abaixo, a lista de algumas das edições e formaçõ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.

Saiba Mais:
Visite o GIMP Brasil,
que é uma
comunidade de
usuários brasileiros
de GIMP em
www.gimpbrasil.org
/

24
Técnico em Informática
Competência 02
 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 edição, é possível excluir partes
específicas de uma imagem, e 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;

25
Editoração de Imagens
Competência 02
 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 3.1.

Figura 3.1 - Interface do GIMP
Fonte: O autor

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

26
Técnico em Informática
Competência 02
software. Isso é realizado no menu Janela -> Modo janela única, como
mostram as figuras 3.2 e 3.3.

Figura 3.2 - Menu Janela
Fonte: O autor

Figura 3.3 - Modo de janela única
Fonte: O autor

27
Editoração de Imagens
Competência 02
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.

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 e selecçõ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 com teclas de atalho e opções na interface.

Para aprender a usar esse recurso, você deve assistir ao vídeo, identificado no
ambiente virtual com o tema sobre Zoom.

Os controles de Zoom do GIMP estão no menu Visualizar como mostra a
Figura 3.4.

Janelas do GIMP -
https://vimeo.com/
50604751
Interface do GIMP -
https://vimeo.com/
50604753

https://vimeo.com/50604751
https://vimeo.com/50604751

28
Técnico em Informática
Competência 02

Figura 3.4 - Controles de Zoom do GIMP
Fonte: O autor

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,
entender é necessário 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 grande
matriz de pequenos pontos, que são os pixels. A quantidade de pixels na

29
Editoração de Imagens
Competência 02
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.

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.

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.

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.

Saiba Mais:
Para saber mais
sobre como
funcionam os
megapixels,
recomendo a leitura
do seguinte
documento:
www.clubedohardw
are.com.br/artigos/
Tudo-o-Que-Voce-
Precisa-Saber-
Sobre-
Megapixels/159

www.abraweb.com.
br/banners.php

30
Técnico em Informática
Competência 02
Como podemos redimensionar uma imagem no GIMP? Isso é feito no menu
imagem, na opção redimensionar imagem, como mostra a Figura 3.5.

Figura 3.5 - Redimensionando imagens
Fonte: O autor

A explicação completa sobre o funcionamento dessa ferramenta, você
encontra no vídeo chamado Redimensionamento de imagens, disponível no
ambiente virtual.

Essa é 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.

2.5 Exclusão de Camadas

Com as imagens em tamanhos diferentes, podemos começar a explorar mais

Redimensionando
Imagens:
https://vimeo.com/
50604754

https://vimeo.com/50604754
https://vimeo.com/50604754

31
Editoração de Imagens
Competência 02
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 práticas do recurso,
podemos já trabalhar com esse tipo de criação em mente. Os recursos para
trabalhar, mesmo que resumidamente, com imagens são explicados no vídeo
chamado Textos e camadas, no ambiente virtual.

O vídeo mostra um pouco sobre como funciona a adição de textos e, depois,
como é possível remover esses textos das imagens excluindo a camada
resultante.

Para saber mais sobre como funciona o sistema de camadas do GIMP, você
deve assistir ao seguinte vídeo que está hospedado fora do ambiente virtual.
O vídeo não foi produzido para esse curso, mas explica bem o funcionamento
e utilidade das camadas.

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 3.6.

Camadas do GIMP:
https://vimeo.com/
50604755

https://vimeo.com/50604755
https://vimeo.com/50604755

32
Técnico em Informática
Competência 02

Figura 3.6 - Transformações
Fonte: O autor

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, disponível no ambiente virtual, chamado de
transformações. (https://vimeo.com/50608019)

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

33
Editoração de Imagens
Competência 02
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 3.7.

Figura 3.7 - Ferramenta de corte do GIMP
Fonte: O autor

A explicação sobre o funcionamento da ferramenta pode ser encontrada no
ambiente virtual, usando o vídeo chamado de Corte em imagem.

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

Corte em Imagem:
https://vimeo.com/
50608020

34
Técnico em Informática
Competência 02
GIMP. Existe um menu específico para fazer ajustes em cores que é o menu
cor mostrado na Figura 3.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 3.8 - Menu cor
Fonte: O autor

35
Editoração de Imagens
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 no ambiente virtual, no vídeo chamado de Ajustes de
cor.

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, o padrão 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 imagem utilizados na web, e dois
desses formatos suportavam canais alpha.

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ível no ambiente virtual.

No final, você será capaz de gerar imagens para aplicar em apresentações no
PowerPoint ou Libre Office como mostra a Figura 3.9.

Ajustes de cor:
https://vimeo.com/
50608055

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.

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:
www.vimeo.com/5
553140

https://vimeo.com/50608055
https://vimeo.com/50608055

36
Técnico em Informática
Competência 02

Figura 3.9 - Imagens em apresentações
Fonte: O autor

2.10 Salvando Imagens

O passo final de qualquerediçã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 3.10.

37
Editoração de Imagens
Competência 02

Figura 3.10 - Exportando imagens
Fonte: O autor

E nos casos em que você deseje armazenar uma imagem com os recursos
usados no GIMP como camadas, textos editáveis e outros elementos, o
formato indicado é o XCF. Esse formato é o que o GIMP usa nativamente para
armazenar a estrutura das imagens e permitir edições futuras. Nos casos em
que você deseje 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 “Exportando e salvando imagens” mostra todos os detalhes
sobre como é possível salvar essas imagens no GIMP, e você encontra esse
vídeo no ambiente virtual.

Exportando
Imagens:
www.vimeo.com/5
62313

38
Técnico em Informática
Competência 03
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. O uso intenso de
imagens acaba sendo prejudicial para web sites 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

CSS3:
Entenda o que é o
CSS3 lendo esses
textos:
http://pt.wikipedia.
org/wiki/CSS3
http://pt.wikipedia.
org/wiki/Cascading
_Style_Sheets

http://pt.wikipedia.org/wiki/CSS3
http://pt.wikipedia.org/wiki/CSS3
http://pt.wikipedia.org/wiki/Cascading_Style_Sheets
http://pt.wikipedia.org/wiki/Cascading_Style_Sheets
http://pt.wikipedia.org/wiki/Cascading_Style_Sheets

39
Editoração de Imagens
Competência 03
uso de imagens é encarado por muitos especialistas em otimização como
sendo prejudicial para o web site como um todo.

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 web site. Como o maior desafio na internet é atrair visitantes para os web
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 web sites.

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 banner
publicitário, que mescla imagens com informações de texto, para ser inserido
dentro de web sites. A segunda peça é o planejamento de um layout, usando

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.

40
Técnico em Informática
Competência 03
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, existem alguns endereços com recursos interessantes para
quem quiser expandir ou conhecer mais sobre o assunto.

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.

Todos esses conhecimentos são necessários para conseguir gerar o banner
que é exibido já na sua forma final na Figura 4.1.

CSS3:
www.maujor.com/t
utorial/css3-
modulo-template-
layout.php
www.underworldm
agazines.com/12-
awesome-css3-
tutorials-for-you-to-
try/

41
Editoração de Imagens
Competência 03

Figura 4.1 - Banner finalizado
Fonte: O autor

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á criado 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 naweb reserva espaços para banners 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 pixels de largura por 280 pixels
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 pixels, como mostram as figuras
3.2 e 3.3.

42
Técnico em Informática
Competência 03

Figura 3.2 - Criando um arquivo novo no GIMP
Fonte: O autor

43
Editoração de Imagens
Competência 03

Figura 3.3 - Dimensões da imagem
Fonte: O autor

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.

44
Técnico em Informática
Competência 03

Figura 3.4 - Imagem original
Fonte: O autor

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

45
Editoração de Imagens
Competência 03
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

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.

46
Técnico em Informática
Competência 03

Figura 3.7 - Selecionar tudo
Fonte: O autor

Com a imagem devidamente selecionada, você pode acionar um dos atalhos
mais usados no mundo da informática, o famigerado 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 mostra a Figura 3.8.

Figura 3.8 - Alternando entre projetos
Fonte: O autor

47
Editoração de Imagens
Competência 03
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

48
Técnico em Informática
Competência 03

Figura 3.10 - Resultado da edição
Fonte: O autor

Para mover a imagem no banner, podemos usar a ferramenta mover do
GIMP, que é exibida na Figura 3.11.

49
Editoração de Imagens
Competência 03

Figura 3.11 - Ferramenta mover
Fonte: O autor

3.2.3 Adicionando Textos

O plano de fundo do banner já está configurado corretamente, e 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.

50
Técnico em Informática
Competência 03

Figura 3.12 - Ferramenta de textos do GIMP
Fonte: O autor

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.

Figura 3.13 - Escolha da fonte
Fonte: O autor

Saiba mais sobre
fontes com serifa:
http://pt.wikipedia.
org/wiki/Serifa

51
Editoração de Imagens
Competência 03
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

52
Técnico em Informática
Competência 03

Figura 3.15 - Ferramenta mover
Fonte: O autor

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

53
Editoração de Imagens
Competência 03
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

54
Técnico em Informática
Competência 03

Figura 3.18 - Ajustes da nova camada
Fonte: O autor

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 autor55
Editoração de Imagens
Competência 03

Figura 3.20 - Seleção
Fonte: O autor

Como resultado da seleção veremos uma forma geométrica marcada na
imagem como mostra a Figura 3.21.

Figura 3.21 - Resultado da seleção
Fonte: O autor

56
Técnico em Informática
Competência 03
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

57
Editoração de Imagens
Competência 03
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.

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.

58
Técnico em Informática
Competência 03

Figura 3.24 - Resultado da pintura
Fonte: O autor

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.

59
Editoração de Imagens
Competência 03

Figura 3.25 - Layout com textos na barra inferior
Fonte: O autor

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.

60
Técnico em Informática
Competência 03

Figura 4.26 - Resultado final do banner
Fonte: O autor

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.

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

Atenção:
Nesse tipo de
situação, os layouts
podem tanto servir
como referência
para a criação dos
web sites ou
mesmo funcionar
como base para a
futura codificação
da estrutura usando
HTML e CSS.

61
Editoração de Imagens
Competência 03
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 para o nosso estudo sobre desenho de layouts para web, iremos
trabalhar com o desenho do layout exibido na Figura 4.27.

Figura 4.27 - Layout web
Fonte: O autor

62
Técnico em Informática
Competência 03
layout apresenta partes bem definidas para conteúdo, logomarca, navegação
e outros elementos. Tudo foi desenhado 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 4.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 4.29 mostra
a configuração do menu de criação.

Figura 4.28 - Criando um novo arquivo
Fonte: O autor

63
Editoração de Imagens
Competência 03

Figura 4.29 - Configurando a moldura
Fonte: O autor

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 4.30.

64
Técnico em Informática
Competência 03

Figura 4.30 - Configurando a grade
Fonte: O autor

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 4.31.

Figura 4.31 - Configuração da grade
Fonte: O autor

65
Editoração de Imagens
Competência 03
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
4.32. O resultado da configuração é exibido na Figura 4.33.

Figura 4.32 - Ajustes na grade
Fonte: O autor

66
Técnico em Informática
Competência 03

Figura 4.33 - Resultado da grade
Fonte: O autor

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 4.34, sendo a camada usada para delimitar o contorno do nosso layout.

67
Editoração de Imagens
Competência 03

Figura 4.34 - Configuração da camada
Fonte: O autor

Antes de continuar com o desenho, é importante acionar a opção "Atrair pela
grade", como mostra a Figura 4.35, para que, ao desenhar qualquer elemento
no GIMP, o mesmo seja atraído pelas linhas da grade.

Figura 4.35 - Configurando a grade
Fonte: O autor

68
Técnico em Informática
Competência 03
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 4.36. Esse contorno é feito com a
ferramenta de seleção, em forma de quadrado do GIMP. As opções que já
acionamos em