Processamento de Imagens

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

Educação a Distância
2017
EXPEDIENTE
Professor Autor
Maicon Herverton Lino Ferreira da Silva
Design Instrucional
Deyvid Souza Nascimento
Maria de Fátima Duarte Angeiras
Renata Marques de Otero
Terezinha Mônica Sinício Beltrão
Revisão de Língua Portuguesa

Letícia Garcia
Diagramação
Izabela Cavalcanti
Coordenação
Anderson Elias
Coordenação Executiva
George Bento Catunda
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
Catalogação na fonte
Bibliotecário Hugo Carlos Cavalcanti, CRB4-2129
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. – Recife: Secretaria Executiva de Educação
Profissional de Pernambuco, 2017.
86 p.: il.
Inclui referências bibliográficas.
1. Editoração eletrônica. 2. Processamento de imagens -

Técnicas digitais. I. Silva, Maicon Herverton Lino Ferreira da.
II. Título.
CDD – 070.50285
Sumário
Introdução ........................................................................................................................................ 7
1.Competência 01 | Conhecer os Principais Formatos de Armazenamento de Imagens para Web .... 8
1.1 Compressão de imagens ....................................................................................................................... 9
1.1.1 Compressão do tipo Lossy (Perda de Dados) .....................................................................................10
1.1.2 Compressão do tipo Lossless (Sem Perdas) .......................................................................................11
1.2 Cores nas imagens ...............................................................................................................................12
1.2.1 Cores RGB e CMYK ............................................................................................................................13
1.2.2 Capacidade de reproduzir cores ........................................................................................................15
1.3 Efeitos e animação ..............................................................................................................................16
1.4 Formato JPG ........................................................................................................................................17
1.4.1 Quando usar o JPG? ..........................................................................................................................18
1.4.2 Quando não usar o JPG? ...................................................................................................................18
1.5 Formato GIF ........................................................................................................................................19
1.5.1 Quando usar arquivos GIF? ...............................................................................................................21
1.6 Formato PNG .......................................................................................................................................22
1.6.1 Quando usar arquivos PNG? .............................................................................................................24
2.Competência 02 | Formatar Imagens para Utilização na Web ou em Aplicativos de Editoração de

Textos ou Apresentações ................................................................................................................ 25
2.1 Formatando imagens com o GIMP .......................................................................................................26
2.2 Interface do GIMP ...............................................................................................................................28
2.3 Controle do Zoom ................................................................................................................................30
2.4 Dimensões das imagens.......................................................................................................................31
2.5 Exclusão de camadas ...........................................................................................................................34
2.6 Transformações em imagens ...............................................................................................................34
2.7 Corte de imagens.................................................................................................................................35
5
2.8 Cores ...................................................................................................................................................37
2.9 Transparência ......................................................................................................................................38
2.10 Salvando imagens ..............................................................................................................................39
3.Competência 03 | Técnicas de Edição e Montagem de Layouts para Web com Base em Imagens 41
3.1 Layouts para web ................................................................................................................................43
3.2 Montando banners para web...............................................................................................................43
3.2.1 Dimensões do banner .......................................................................................................................44
3.2.2 Fotografia como fundo .....................................................................................................................46
3.2.3 Adicionando textos ...........................................................................................................................51
3.2.4 Barra inferior ....................................................................................................................................54
3.2.5 Textos adicionais ..............................................................................................................................60
3.3 Planejando web sites com base em imagens ........................................................................................62
3.3.1 Criando a moldura ............................................................................................................................64
3.3.2 Preparando a área de desenho .........................................................................................................65
3.3.3 - Preparando as camadas ..................................................................................................................68
3.3.4 Contorno do layout ...........................................................................................................................70
3.3.5 Pintura das áreas do layout ...............................................................................................................73
3.3.6 Desenho de linhas ............................................................................................................................76
3.3.7 Adicionando textos no layout ...........................................................................................................77
3.3.8 Preparando o layout para a web .......................................................................................................80
Referências ..................................................................................................................................... 85
Minicurrículo do Professor .............................................................................................................. 86
6
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 disponível nos link’s ao lado.
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/
7
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.
Entenda os formatos de arquivos de imagens:
www.techtudo.com.br/artigos/noticia/2012/07/entenda-os-formatos-dos-arquivos-
de-imagem.html
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
8
Competência 01
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.
9
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:
 http://inf.ufrgs.br/~mkbahy/26compressaoimagens.pdf
 http://pt.wikipedia.org/wiki/Compress%C3%A3o_com_perda_de_dados
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.
10
Competência 01
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ê 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 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.
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
11
Competência 01
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.
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.
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.
12
Competência 01
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 inúmeras variações desse formato como os RGB e o RGBA, que suportam pixels
transparentes.
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_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.
13
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
14
Competência 01
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 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
15
Competência 01
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.
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.
16
Competência 01
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 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.
Recomendação de leitura:
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) - http://www.youtube.com/watch?v=vTzSu_S33Qg
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.
17
Competência 01
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.
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
18
Competência 01
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.
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 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
19
Competência 01
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 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 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.
20
Competência 01
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.
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
 www.infowester.com/imagens.php
http://pt.wikipedia.org/wiki/Graphics_Interchange_Format
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
21
Competência 01
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, 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.
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 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
22
Competência 01
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
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
www.infowester.com/imagens.php
http://pt.wikipedia.org/wiki/PNG
23
Competência 01
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.
24
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 (87.7 MB);
 É multiplataforma (Windows, Linux e Mac).
A versão que utilizamos para essa disciplina é a 2.8, que pode ser copiada de maneira gratuita dos
seguintes endereços:
 www.gimp.org
25
Competência 02
 http://portableapps.com
Saiba Mais:
Visite o GIMP Brasil, que é uma comunidade de usuários brasileiros de GIMP em
www.gimpbrasil.org/
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.8.14, 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.
 Transformações: Algumas imagens precisam de transformações simples para se encaixar em
26
Competência 02
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;
 Ter partes recortadas.
Tudo isso pode ser aplicado ao mesmo tempo em imagens no GIMP, basta utilizar as ferramentas
em sequência.
27
Competência 02
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.
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.
28
Competência 02
Figura 2.2 - Menu Janela

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

Fonte: o autor
Descrição: interface do GIMP no modo de janela única
29
Competência 02
Janelas do GIMP - https://vimeo.com/50604751

Interface do GIMP - https://vimeo.com/50604753
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, 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 2.4.
30
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, 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 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
31
Competência 02
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.
Para saber mais sobre como funcionam os megapixels, recomendo a leitura do

seguinte documento:
www.clubedohardware.com.br/artigos/Tudo-o-Que-Voce-Precisa-Saber-Sobre-
Megapixels/159
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.
www.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
32
Competência 02
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.
Figura 2.5 - Redimensionando imagens

Fonte: O autor
Descrição: menu imagem marcando a opção Redimensionar Imagem.
Redimensionando Imagens: https://vimeo.com/50604754
A explicação completa sobre o funcionamento dessa ferramenta, você encontra no vídeo chamado
Redimensionamento de imagens, disponível no ambiente virtual.
33
Competência 02
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 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.
Camadas do GIMP: https://vimeo.com/50604755
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.
34
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, 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 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
35
Competência 02
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: https://vimeo.com/50608020
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.
36
Competência 02
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
37
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.
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.
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
38
Competência 02
assistir ao vídeo chamado Transparência em imagens, disponível no ambiente virtual.
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/5553140
No final, você será capaz de gerar imagens para aplicar em apresentações no PowerPoint ou Libre
Office como mostra a Figura 2.9.
Figura 2.9 - Imagens em apresentações

Fonte: o autor
Descrição: tela do GIMP com uma imagem de vários quadrados cinzas sendo editada.
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
39
Competência 02
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.
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ê 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/562313
40
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 uso de imagens é encarado por muitos especialistas
em otimização como sendo prejudicial para o website como um todo.
41
Competência 03
CSS3:
Entenda o que é o CSS3 lendo esses textos:
http://pt.wikipedia.org/wiki/CSS3
http://pt.wikipedia.org/wiki/Cascading_Style_Sheets
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 web sites.
42
Competência 03
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 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.
CSS3:
www.maujor.com/tutorial/css3-modulo-template-layout.php
www.underworldmagazines.com/12-awesome-css3-tutorials-for-you-to-try/
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:
43
Competência 03
 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 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á criado uma peça publicitária que pode ser usada em
praticamente qualquer layout.
44
Competência 03
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.
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.
45
Competência 03
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.
46
Competência 03
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.
47
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
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”.
48
Competência 03
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
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”.
49
Competência 03
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.
50
Competência 03
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”
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.
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.
51
Competência 03
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://pt.wikipedia.org/wiki/Serifa
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
52
Competência 03
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”.
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”
53
Competência 03
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.
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.
54
Competência 03
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”.
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
55
Competência 03
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.
Figura 3.20 - Seleção

Fonte: o autor
Descrição: imagem de uma praia, com o texto “praias do Nordeste”, sendo editada no GIMP.
56
Competência 03
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
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.
57
Competência 03
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.
58
Competência 03
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.
59
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.
60
Competência 03
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.
61
Competência 03
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.
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
62
Competência 03
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
63
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 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.
64
Competência 03
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.
65
Competência 03
Figura 3.30 - Configurando a grade

Fonte: o autor
Descrição: menu “imagem” com uma seta vermelha apontando para a opção “configurar grade.”
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.
66
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 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”.
67
Competência 03
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.
68
Competência 03
Figura 3.34 - Configuração da camada

Fonte: o autor
Descrição: menu “nova camada” onde está sendo inserido o nome da camada.
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”.
69
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 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.
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
70
Competência 03
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.
71
Competência 03
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.
72
Competência 03
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.
73
Competência 03
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
74
Competência 03
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”.
75
Competência 03
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.
76
Competência 03
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,
77
Competência 03
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 web sites, como o Lorem BR.
Gerador de textos: http://br.lorem.com
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 desse endereço:
78
Competência 03
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: http://icons.iconarchive.com/icons/deleket/social-networking/256/Twitter-
icon.png
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.
79
Competência 03
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 web sites 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.
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
80
Competência 03
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”.
Você deve criar seleções nas áreas do layout e acionar essa opção várias vezes até que a interface
81
Competência 03
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.
82
Competência 03
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
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”.
83
Competência 03
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!
84
Referências
WIKIPEDIA. Figura 2.1. Mistura em RGB. Disponível em http://pt.wikipedia .org/wiki/Ficheiro:

Synthese%2B.svg. Acesso em Agosto de 2015.
WIKIPEDIA. Figura 2.2. Mistura em CMYK. Disponível em http://pt.wikipedia .org/wiki/Ficheiro:

SubtractiveColorMixing.png. Acesso em Agosto de 2015.
WIKIPEDIA. Figura 2.3. Compressão em JPG. Disponível em http://pt.wikipe dia.org/wiki/Ficheiro:

Texel_Landscape.jpg. Acesso em Agosto de 2015.
WIKIPEDIA. Figura 2.5. Exemplo de representação em GIF. Disponível em http:

//pt.wikipedia.org/wiki/Ficheiro: Sunflower_as_GIF.gif. Acesso em Agosto de 2015.
WIKIPEDIA. Figura 2.6. Ícone salvo em PNG. Disponível em http://pt.wikipedia .org/wiki/Ficheiro:

Truck_icon.pn>. Acesso em Agosto de 2015.
WIKIPEDIA. Figura 2.7. Ícone salvo em PNG. Disponível em http://pt.wikipedia .org/wiki/Ficheiro:

Miro_icon.png. Acesso em Agosto de 2015.
85
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.
86

Processamento de Imagens

Enviado por

Dados do documento

Descrição 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

Processamento de Imagens

Enviado por

Direitos autorais:

Formatos disponíveis

Edição e Processamento de Imagens

Maicon Herverton Lino Ferreira da Silva

Curso Técnico em Informática

Revisão de Língua Portuguesa

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 -

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

1.1 Compressão de imagens ....................................................................................................................... 9

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

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

1.2 Cores nas imagens ...............................................................................................................................12

1.2.1 Cores RGB e CMYK ............................................................................................................................13

1.2.2 Capacidade de reproduzir cores ........................................................................................................15

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

1.4 Formato JPG ........................................................................................................................................17

1.4.1 Quando usar o JPG? ..........................................................................................................................18

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

1.5 Formato GIF ........................................................................................................................................19

1.5.1 Quando usar arquivos GIF? ...............................................................................................................21

1.6 Formato PNG .......................................................................................................................................22

1.6.1 Quando usar arquivos PNG? .............................................................................................................24

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

2.2 Interface do GIMP ...............................................................................................................................28

2.3 Controle do Zoom ................................................................................................................................30

2.4 Dimensões das imagens.......................................................................................................................31

2.5 Exclusão de camadas ...........................................................................................................................34

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

2.7 Corte de imagens.................................................................................................................................35

2.9 Transparência ......................................................................................................................................38

2.10 Salvando imagens ..............................................................................................................................39

3.1 Layouts para web ................................................................................................................................43

3.2 Montando banners para web...............................................................................................................43

3.2.1 Dimensões do banner .......................................................................................................................44

3.2.2 Fotografia como fundo .....................................................................................................................46

3.2.3 Adicionando textos ...........................................................................................................................51

3.2.4 Barra inferior ....................................................................................................................................54

3.2.5 Textos adicionais ..............................................................................................................................60

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

3.3.1 Criando a moldura ............................................................................................................................64

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

3.3.3 - Preparando as camadas ..................................................................................................................68

3.3.4 Contorno do layout ...........................................................................................................................70

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

3.3.6 Desenho de linhas ............................................................................................................................76

3.3.7 Adicionando textos no layout ...........................................................................................................77

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

Minicurrículo do Professor .............................................................................................................. 86

Seja bem-vindo a nossa disciplina sobre Edição de imagens para Web!

 Conhecer os principais formatos de armazenamento de imagens para Web;

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

A nossa primeira competência na disciplina aborda os formatos de imagem utilizados na web e

1.1 Compressão de imagens

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

 Arquivos com tamanho reduzido;

1.1.2 Compressão do tipo Lossless (Sem Perdas)

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

resolução de imagens, com todos os dados originais.

1.2 Cores nas imagens

1.2.1 Cores RGB e CMYK

Figura 1.1 – Mistura em RGB

Esse formato é utilizado em ambientes de impressão e corresponde, exatamente, às cores