Edio e Processamento de Imagens

Maicon Herverton Lino Ferreira da Silva

Curso Tcnico em Informtica

Educao a Distncia
2015

EXPEDIENTE
Professor Autor
Maicon Herverton Lino Ferreira da Silva
Design Instrucional
Deyvid Souza Nascimento
Maria de Ftima Duarte Angeiras
Renata Marques de Otero
Terezinha Mnica Sincio Beltro
Reviso de Lngua Portuguesa
Letcia Garcia
Diagramao
Izabela Cavalcanti
Coordenao
Joo Ferreira
Coordenao Executiva
George Bento Catunda
Coordenao Geral
Paulo Fernando de Vasconcelos Dutra

Contedo produzido para os Cursos Tcnicos da Secretaria Executiva de Educao

Profissional de Pernambuco, em convnio com o Ministrio da Educao
(Rede e-Tec Brasil).
Agosto, 2015

A586e

Silva, Maicon Herverton Lino Ferreira da.

Edio e Processamento de Imagens: Curso Tcnico em
Informtica: Educao a distncia / Maicon Herverton Lino
Ferreira da Silva. Recife: Secretaria Executiva de Educao
Profissional de Pernambuco, 2015.
84 p.: il.

1. Educao distncia. 2. Editorao. 3. Processamento

de imagens. I. Silva, Maicon Herverton Lino Ferreira da. II.
Ttulo. III. Secretaria Executiva de Educao Profissional de
Pernambuco. IV. Ministrio da Educao. V. Rede e-Tec
Brasil.

CDU 006.42

Sumrio
Introduo .............................................................................................................................................. 5
1.Competncia 01 | Conhecer os Principais Formatos de Armazenamento de Imagens para Web .... 6
1.1 Compresso de Imagens .............................................................................................................................7
1.1.1 Compresso do Tipo Lossy (Perda de Dados) ..........................................................................................8
1.1.2 Compresso do Tipo Lossless (Sem Perdas).............................................................................................9
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 Animao................................................................................................................................... 14
1.4 Formato JPG ............................................................................................................................................. 15
1.4.1 Quando Usar o JPG? .............................................................................................................................. 16
1.4.2 Quando No Usar o JPG? ...................................................................................................................... 17
1.5 Formato GIF ............................................................................................................................................. 18
1.5.1 Quando Usar Arquivos GIF? .................................................................................................................. 20
1.6 Formato PNG ............................................................................................................................................ 20
1.6.1 Quando Usar Arquivos PNG? ................................................................................................................ 22

2.Competncia 02 | Formatar Imagens para Utilizao na Web ou em Aplicativos de Editorao de

Textos ou Apresentaes ..................................................................................................................... 23
2.1 Formatando Imagens com o GIMP .......................................................................................................... 24
2.2 Interface do GIMP .................................................................................................................................... 26
2.3 Controle do Zoom .................................................................................................................................... 28
2.4 Dimenses das Imagens ........................................................................................................................... 29
2.5 Excluso de Camadas ............................................................................................................................... 32
2.6 Transformaes em Imagens ................................................................................................................... 32
2.7 Corte de Imagens ..................................................................................................................................... 33
2.8 Cores ........................................................................................................................................................ 35

2.9 Transparncia ........................................................................................................................................... 36

2.10 Salvando Imagens .................................................................................................................................. 37

3.Competncia 03 | Tcnicas de Edio e Montagem de Layouts para Web com Base em Imagens 39
3.1 Layouts para Web .................................................................................................................................... 41
3.2 Montando Banners para Web.................................................................................................................. 41
3.2.1 Dimenses do Banner ........................................................................................................................... 42
3.2.2 Fotografia como Fundo ......................................................................................................................... 44
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 ......................................................................................... 59
3.3.1 Criando a Moldura ................................................................................................................................ 61
3.3.2 Preparando a rea de Desenho ............................................................................................................ 62
3.3.3 - Preparando as Camadas ..................................................................................................................... 65
3.3.4 Contorno do Layout .............................................................................................................................. 67
3.3.5 Pintura das reas do Layout ................................................................................................................. 70
3.3.6 Desenho de Linhas ................................................................................................................................ 73
3.3.7 Adicionando Textos no Layout .............................................................................................................. 74
3.3.8 Preparando o Layout para a Web ......................................................................................................... 77

Consideraes Finais ............................................................................................................................ 82

Referncias ........................................................................................................................................... 83
Minicurrculo do Professor ................................................................................................................... 84

Introduo
Seja bem-vindo a nossa disciplina sobre Edio de imagens para Web!
Aqui, teremos a oportunidade de aprender sobre manipulao de imagens para aplicao em web
sites. Os assuntos esto divididos em trs competncias:

Conhecer os principais formatos de armazenamento de imagens para Web;

Formatar imagens para utilizao na web ou em aplicativos de editorao de textos ou

apresentaes;

Conhecer as tcnicas de edio e montagem de layouts para web, com base em imagens.

Ao longo de cada uma das competncias 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 situaes em projetos web. muito importante que voc no se atenha
apenas ao contedo deste caderno, pois o mesmo serve apenas de guia para estimular seus
conhecimentos.
Esse aprendizado muito importante para a criao de layouts ou ento para preparar imagens
para uso em sistemas de publicidade online. Um dos aspectos que voc vai perceber nos prximos
captulos que existem diversos recursos extras valiosos para desenvolver os seus conhecimentos
no assunto e vrios deles aparecem em formato de hyperlinks ao longo do texto.
Para comear as nossas recomendaes, gostaria que voc realizasse uma pesquisa no frum
brasileiro sobre novidades e atualizaes sobre o GIMP, alm de tambm acessar o manual oficial
do GIMP em portugus disponvel nos links ao lado.

Recomendao de Leitura:
Frum do GIMP - Site oficial da ferramenta www.gimpbrasil.org/

Manual Oficial do GIMP - http://docs.gimp.org/2.8/pt_BR/

Competncia 01

1.Competncia 01 | Conhecer os Principais Formatos de Armazenamento

de Imagens para Web
A nossa primeira competncia na disciplina aborda os formatos de imagem utilizados na web e
quais so as principais opes relacionadas ao armazenamento dessas imagens, dentro desse
contexto. O conhecimento desses formatos de imagem de extrema importncia para qualquer
pessoa interessada em produzir contedo para a web, pois com o formato certo de imagem
possvel integrar elementos como efeitos, compresso e inserir as imagens dentro de um contexto
especfico.

Os formatos de imagem para web podem ser classificados de vrias maneiras, como por exemplo:

Quanto compresso;

Quanto qualidade da imagem;

Quanto ao suporte a efeitos;

Quanto ao suporte a animaes.

Recomendao de Leitura:
Entenda os formatos de arquivos de imagens:
www.techtudo.com.br/artigos/noticia/2012/07/entenda-os-formatos-dos-arquivos-deimagem.html

Antes de continuar, importante ressaltar que, ao mencionar as imagens para web, o foco
exclusivo para imagens do tipo bitmap (raster) e no nas imagens vetoriais. Alm da diferena
conceitual que existe, em termos de funcionamento interno entre imagens vetoriais e do tipo
bitmap, o nosso propsito especfico 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 compresso, qualidade de imagens, cores e efeitos. Depois que voc

Competncia 01

entender bem o impacto que cada uma dessas caractersticas das imagens exerce sobre o resultado
final, ser muito mais fcil de entender os motivos que fazem um formato de imagem ser ou no
indicado para determinadas situaes em projetos na web.

1.1 Compresso de Imagens

A compresso das imagens algo fundamental para que possamos manipular esse tipo de arquivo,
em ambientes digitais, sem a necessidade de trabalhar com grandes volumes de informao. As
imagens no formato Bitmap so formadas por mapas de pixels, que so os pequenos pontos
formadores das imagens. tudo baseado em uma grande matriz que, se for armazenada sem
nenhum tipo de compresso, 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 resolues das cmeras digitais e inclusive dos prprios celulares smartphones. Essa
mesma imagem, se estiver com bons nveis de compresso, 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 destinatrio com a mesma
qualidade com a qual voc enviou? A resposta bvia, no, com milhes de usurios utilizando o
servio de comunicao seriam necessrios robustos servidores com capacidade de
armazenamento gigantesca para enviar a foto com a qualidade original, e alm disso, o seu plano de
dados da sua operadora seria ligeiramente consumido.

Por isso, o que o aplicativo faz a compresso dos arquivos de imagens que voc envia, com uma
reduo de aproximadamente 70% na qualidade final da imagem. Ou seja, uma imagem que antes
possua o tamanho de 1,5mb, quando chega ao destinatrio, o tamanho passa a ser de 478kb.

As tcnicas e algoritmos de compresso de imagens so bem variados, mas podemos classificar a

compresso em duas grandes famlias, que so mtodos do tipo Lossy e Lossless. Os dois mtodos

Competncia 01

so usados no apenas para compresso de dados em imagens, mas em todo tipo de

armazenamento de informaes, inclusive arquivos no formato ZIP, RAR e outros.

1.1.1 Compresso do Tipo Lossy (Perda de Dados)

O formato conhecido como Lossy baseado em uma premissa simples, que a compresso
direcionada para a informao visual e no para a fidelidade dos dados. A compresso do tipo Lossy
usa algoritmos que excluem informaes das imagens, com o objetivo de reduzir o tamanho e
mantendo um mnimo de fidelidade visual na imagem.

Ateno:
Para editar imagens e criar layouts de qualidade para web, necessrio possuir todas as
informaes das imagens, e com arquivos salvos com compresso Lossy isso no possvel.

Esse formato de compresso apresenta os seguintes benefcios para quem escolhe o mtodo para
armazenar imagens:

Arquivos com tamanho reduzido;

Fidelidade visual;

Fcil armazenamento;

Boas taxas de download e upload em ambiente web.

Os benefcios do formato Lossy so bem atraentes, mas apesar de todas essas vantagens
precisamos tomar cuidado com uma coisa importante: as informaes das imagens so excludas
gradativamente, para que sejam gerados arquivos com tamanhos reduzidos. Isso bom para
armazenamento e transmisso, mas para quem produz contedo na web muito prejudicial perder
informaes nas imagens. Por exemplo, ao comprimir uma imagem usando o mtodo Lossy
perdemos caractersticas das imagens como:

Competncia 01

Gradientes de cor;

Definio de bordas e contornos.

Recomendao de Leitura:
Para saber mais sobre compresso do tipo Lossy e complementar essas explicaes, 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

Apesar desse ponto negativo em relao compresso de imagens no formato Lossy, os arquivos
de imagem nesse formato so largamente usados na web, devido ao seu tamanho reduzido. Fora da
web, temos a maioria das mquinas fotogrficas voltadas para consumidores armazenando imagens
com compresso Lossy e, at mesmo o seu celular, caso ele possua uma cmera, poder armazenar
as fotografias em Lossy, para economizar espao.

Como voc j deve ter percebido, quando o objetivo da compresso realmente reduzir o tamanho
do arquivo, os arquivos no formato Lossy so os mais indicados. O objetivo dos arquivos salvos com
compresso do tipo Lossy a entrega para o usurio final, e no a produo dos layouts. Portanto,
voc deve sempre ter em mente que o uso desse tipo de compresso deve ser aplicado apenas no
momento da criao dos arquivos base para o layout que ficar hospedado no servidor web e ser
transmitido para os usurios finais.

1.1.2 Compresso do Tipo Lossless (Sem Perdas)

Para os casos em que a perda de dados problema, existe a compresso do tipo Lossless, que
usada em vrios 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 contedo desse
arquivo para o seu estado original, sem nenhum tipo de perda.

Competncia 01

Ateno:
As imagens no formato Lossless acabam tendo tamanhos maiores do que as geradas pela
compresso Lossy, mas temos como benefcio a fidelidade de dados em relao ao arquivo original e
ao resultado da compresso.

J pensou como seria complicado compactar um texto e, ao extrair as informaes, percebermos

partes do texto faltando?

Esse tipo de arquivo no o mais indicado para fins de transmisso pela web, pois o mesmo acaba
tendo tamanhos bem superiores s imagens Lossy. Mas, para criao de layouts e edio em altas
resolues o formato perfeito para profissionais interessados em manter verses, em grande
resoluo de imagens, com todos os dados originais.

Na maioria das situaes indicado trabalhar com os dois formatos, quando possvel, sendo o
trabalho relacionado com imagens editado e montado usando compresso Lossless e distribudo na
web depois em formatos Lossy. A separao simples:

Lossless: Tipo de compresso usada nos arquivos base da plataforma de autoria. Eles so

maiores e retm todas as informaes das imagens, o que permite manipular e editar o material
com mais flexibilidade e qualidade.

Lossy: Tipo de compresso que deve ser gerada a partir dos arquivos Lossless, pois seu

tamanho reduzido devido excluso de informaes. o arquivo usado para hospedagem nos
servidores web para transmisso ao usurio final.

Recomendao de Leitura:
Para saber mais sobre compresso do tipo Lossless e complementar essas explicaes, recomendo a
leitura do seguinte artigo:
www.dpi.inpe.br/~carlos/Academicos/Cursos/Pdi/SemPerdas.htm

10

Competncia 01

Mesmo sem ter mencionado nenhum algoritmo, quando abordamos a compresso do tipo Lossy,
podemos destacar um mtodo de compresso em Lossless chamado de LZW. Esse algoritmo
usado em vrios casos como arquivos ZIP e imagens, sendo a base para muitos formatos de
arquivos que usam o mtodo para reduzir o tamanho.

1.2 Cores nas Imagens

Com a parte relacionada compresso das imagens bem entendida, podemos avanar para outro
aspecto que interfere bastante nas caractersticas das imagens. Existem diversos espaos de cor e
capacidades para reproduzir cores diferentes, que devem ser levados em considerao no
armazenamento e uso das imagens.

1.2.1 Cores RGB e CMYK

O mtodo 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 no
diferente. E, para as imagens na web, devemos prestar ateno 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 trs tonalidades resulta em vrias outras cores. Na escala de cor RGB so usados
valores que comeam 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. Alm do RGB,

11

Competncia 01

existem inmeras variaes desse formato como os RGB e o RGBA, que suportam pixels
transparentes.

Vdeo:
Assista a alguns vdeos interessantes sobre o uso e composio de cores em RGB para Web:
Sistema de cores RGB (6:51) - www.youtube.com/watch?v=rGY_cwDrMEg
Composio 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 vdeo
preciso sempre partir dessa cor, que representa a ausncia de luz. Por isso, que o RGB
conhecido como um mtodo de mistura, baseado em soma, pois adicionamos cores, at chegar ao
mximo, que o preto.

Figura 1.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)

12

Competncia 01

Esse formato utilizado em ambientes de impresso e corresponde, exatamente, s cores

existentes em cartuchos de tinta de impressoras, somando ao cartucho preto. necessrio o uso da
cor preta, pois, em teoria, a mistura de ciano, magenta e amarelo resultaria em preto, mas, na
prtica, temos um marrom escuro. Por isso, necessrio adicionar a cor preta na escala.
O uso do espao de cor CMYK restrito ao ambiente de impresso. E, do ponto de vista da
produo de material para web, preciso apenas ter cincia da existncia dele, para evitar,
inadvertidamente, enviar material para web nesse formato. O resultado do uso de imagens CMYK
na web so cores levemente distorcidas, como tons escuros ou claros em demasia.

A representao 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 impresso, necessrio
partir da cor branca, a base das folhas em impresso. E, desse ponto, preciso subtrair as
tonalidades at chegar cor preta. Por isso, o CMYK conhecido como um sistema baseado em
subtrao de cores.

Figura 1.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 so classificadas como tendo 8-bits

13

Competncia 01

ou 24-bits de capacidade.
O que isso significa? Para fins de reproduo de cores, possvel identificar a quantidade de cores
que um formato de imagem pode reproduzir pelo nmero de bits.

preciso recordar que dados em ambientes digitais so sempre armazenados em formato binrio,
mesmo que no tenhamos contato com esse tipo de informao no nosso cotidiano. Para entender
a quantidade de cores que cada tipo de imagem capaz de reproduzir, precisamos elevar o nmero
dois (valores binrios) potncia 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, so mais de 16 milhes de cores em comparao a
apenas 256 das imagens em 8-bits.

Toda essa quantidade de cores apresenta impacto em duas caractersticas das imagens:

Armazenamento: So necessrios arquivos maiores para armazenar grandes quantidades de

cores.

Qualidade visual: Imagens em 24-bits so mais indicadas para armazenar imagens de

qualidade fotogrfica.

1.3 Efeitos e Animao

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
composies diferentes para web. Por exemplo, existem muitos cones em painis de navegao de
web sites que utilizam pixels transparentes para conseguir integrao perfeita com o fundo do
layout.

Apesar de conhecer a existncia desse tipo recurso, necessrio escolher um formato de imagem

14

Competncia 01

compatvel com ele para que possamos aproveitar as vantagens de ter pixels transparentes em
imagens. Nos prximos tpicos, j abordaremos alguns desses formatos, que suportam os
chamados canais alpha.

Para completar a lista de efeitos existentes em imagens na web, podemos utilizar, tambm,
animaes em imagens. As animaes nada mais so do que uma sequncia de imagens exibidas de
modo a gerar a iluso de movimento. Nos dias de hoje, mais difcil encontrar projetos ou
propostas de interfaces na web que utilizem imagens para fins de animao, pois tecnologias como
o HTML 5 permitem integrar vdeos em web sites de maneira muito fcil.

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 fotgrafos profissionais uma maneira de
armazenar imagens com qualidade e tamanho reduzidos. A compresso das imagens JPG Lossy, o
que significa que todos os dados salvos nesse formato tiveram informaes descartadas para que
fosse possvel reduzir o tamanho dos arquivos.

Ateno:
A compresso de imagens em JPG identificada por uma escala que vai de 0% at 100% de
qualidade nas imagens.

Essa reduo de tamanho, essa compresso dos arquivos acontece por meio da criao de blocos de
pixels, que tentam agrupar informaes comuns nas imagens. O algoritmo de compresso 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.
possvel usar 8-bits de cor, quando usamos apenas em tons de cinza para a imagem. A Figura 1.3

15

Competncia 01

mostra uma comparao entre diferentes nveis de compresso em arquivos no formato JPG.
Quanto maior o nvel de compresso, menos qualidade de imagem se tem para representar os
pixels. A imagem fica borrada, com blocos visveis resultantes do algoritmo de compresso.

Figura 1.3 Compresso em JPG

Fonte: http://pt.wikipedia.org/wiki/Ficheiro:Texel_Landscape.jpg, 2012.

Saiba Mais:
Recomendao de leitura:
Para saber mais sobre os arquivos JPG e complementar essas explicaes, 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) - www.youtube.com/watch?v=vTzSu_S33Qg

1.4.1 Quando Usar o JPG?

O uso dos arquivos JPG indicado nas seguintes situaes na web:

Arquivos de imagem com grande quantidade de cores;

Armazenar fotografias na web;

16

Competncia 01

Arquivos que precisam ter tamanho reduzido.

1.4.2 Quando No Usar o JPG?

Apesar de excelente qualidade, existem situaes em que no indicado usar arquivos JPG:

Arquivos originais de layouts para web;

Imagens com cores slidas;

Imagens com tipografia.

A ltima situao ilustra bem um contexto em que o JPG no indicado para armazenar os arquivos
de imagem. Quando representamos pixels com cores slidas, sem gradientes, o algoritmo do JPG
tende a borrar as reas de transio entre duas cores diferentes. Esse um efeito desejado quando
preciso criar blocos para compresso de dados, mas pode atrapalhar a representao desse tipo
de imagem.

Na Figura 1.4, podemos perceber bem essa dificuldade do algoritmo dos arquivos JPG em
representar cores slidas. O lado direito da imagem mostra as bordas da imagem borradas em
decorrncia da existncia de bordas com cores slidas.

Figura 1.4 JPG com cores slidas

Fonte: O Autor

17

Competncia 01

1.5 Formato GIF

Os arquivos no formato GIF j so 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 relao aos dados e pixels. Os arquivos GIF so bem antigos em termos de uso na
internet, remontam aos primrdios do uso de imagens na web.

Mas, apesar de serem bem conhecidos entre produtores de contedo para Web, os arquivos do
tipo GIF no so hoje usados com a mesma frequncia de antigamente. Existem vrios 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 criao de arquivos GIF em
seus softwares, precisava pagar para a Unisys. O algoritmo em questo o LZW, que usado em
outros sistemas de compresso, alm do GIF.
O resultado dessa ao foi muito negativo para o formato GIF, pois surgiu o formato PNG, que ser
abordado no prximo tpico. Hoje, esse tipo de disputa no mais problema, j que em 2003 a
patente expirou, sendo de domnio pblico atualmente.
Com relao s cores, os arquivos GIF suportam apenas 8-bits, resultando em paletas de 256 cores
no mximo. Para representar imagens com qualidade fotogrfica os arquivos em GIF no so a
melhor opo, resultando em fotografias com nveis altos de granulao devido limitao das
cores. A restrio de cores uma vantagem para os arquivos em GIF quando precisamos
representar imagens com cores slidas apenas. A exibio de elementos tipogrficos, 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 definio em termos de imagem com cores slidas apenas um dos pontos positivos do GIF.
Se formos comparar com os arquivos JPG, ainda teremos o suporte ao canal alpha em imagens GIF.

18

Competncia 01

Ateno:
Com esse tipo de arquivo possvel utilizar pixels transparentes, permitindo a organizao de arquivos
GIF em vrias camadas de layouts na web.

A transparncia no o nico diferencial do GIF, pois ainda temos a possibilidade de trabalhar com
animaes nos arquivos GIF. O termo "GIF animado" muito comum em ambientes Web, sendo
sinnimo de imagens animadas. As solues de animao com GIF sofrem um pouco quando
necessrio reproduzir elementos com grande quantidade de cores, mas so uma das formas mais
eficientes de apresentar textos e elementos animados na Web, pois no necessitam de plug-ins ou
softwares adicionais, nos navegadores, para exibio do seu contedo, como acontece com
animaes geradas usando Flash ou Silverlight.

Um exemplo da representao 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 definio na imagem devido limitao
de cores.

Figura 1.5 Exemplo de representao em GIF

Fonte: http://pt.wikipedia.org/wiki/Ficheiro:Sunflower_as_GIF.gif, 2012.

19

Competncia 01

Saiba Mais:
Recomendao de leitura: Para saber mais sobre os arquivos GIF e complementar essas
explicaes, recomendo a leitura dos seguintes artigos:
www.infowester.com/imagens.php
http://pt.wikipedia.org/wiki/Graphics_Interchange_Format

1.5.1 Quando Usar Arquivos GIF?

Portanto, os arquivos GIF so indicados para uso quando:

Precisamos representar imagens com cores slidas;

Precisamos criar layouts compostos usando pixels transparentes;

necessrio criar animaes com base em imagens;

preciso armazenar arquivos sem perda de informaes, mas com limite de cores

estipulado pela paleta do GIF.

1.6 Formato PNG

Para finalizar a nossa lista de formatos usados na web, temos o PNG, que agrega diversos pontos
positivos em relao ao JPG e ao GIF. A motivao para a criao dos arquivos PNG surgiu a partir
da questo das patentes dos arquivos GIF usando algoritmos LZW. Para competir com o GIF, o PNG
utiliza compresso 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 relao ao GIF que o mesmo suporta armazenar cores
em 8 e 24 bits, permitindo criar arquivos relativamente pequenos, para situaes em que preciso
representar apenas cores slidas em 8-bits. Tambm podemos utilizar as 16 milhes de cores dos
arquivos em 24-bits para armazenar imagens com qualidade fotogrfica.

Ainda possvel representar pixels transparentes com arquivos no formato PNG. s mesclar a

20

Competncia 01

qualidade fotogrfica das cores em 24-bits com pixels transparentes, coisa que impossvel 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 contedo 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 compresso lossless, faz os arquivos PNG serem pouco indicados para
transmisso de imagens na web, pois os mesmos tendem a ficarem maiores do que as imagens em
JPG, mas se a transparncia dos pixels for fator determinante, o PNG a melhor opo.

Ateno:
Dentro do contexto de layouts para a web, o uso de arquivos PNG muito comum na representao
de cones.

As figuras 1.6 e 1.7 mostram exemplos de uso do PNG para representar imagens com grande
quantidade de cores e que ainda possuem o plano de fundo transparente, para que possam ser
integradas em interfaces.

Figura 1.6 cone salvo em PNG

Fonte: http://pt.wikipedia.org/wiki/Ficheiro:Truck_icon.png, 2012.

21

Competncia 01

Figura 1.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 caractersticas dos arquivos PNG, podemos dizer que indicado usar PNG nas
seguintes situaes:

Quando preciso armazenar arquivos de imagem sem perda de informaes;

Quando precisamos criar layouts que dependem de pixels transparentes;

Quando necessrio enviar imagens pela web com fidelidade em termos de cor e sem perda

de informaes.
Saiba Mais:
Recomendao de leitura: Para saber mais sobre os arquivos PNG e complementar essas explicaes,
recomendo a leitura dos seguintes artigos:
www.infowester.com/imagens.php
http://pt.wikipedia.org/wiki/PNG

22

Competncia 02

2.Competncia 02 | Formatar Imagens para Utilizao na Web ou em

Aplicativos de Editorao de Textos ou Apresentaes
Agora que voc j conhece os principais formatos de imagem utilizados na Web, como estudamos
na competncia 01 dessa disciplina, podemos, efetivamente, "colocar a mo na massa", na nossa
segunda competncia e manipular imagens. Caso voc tenha sentido falta de algo mais prtico em
nossa primeira semana, pode ficar tranquilo, pois a segunda semana ser totalmente pautada por
prtica, inclusive, com vrios vdeos que devem ser consultados em paralelo com o seu caderno de
estudos.

Para os nossos exerccios prticos, iremos utilizar um software muito conhecido entre os adeptos do
software livre que o GIMP. O nome do software um acrnimo 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: possvel substituir plenamente o Photoshop pelo
GIMP? Em boa parte das tarefas dirias de edio possvel, sim, substituir plenamente o
Photoshop pelo GIMP.

O GIMP apresenta inmeras vantagens para quem resolve escolher o software como ferramenta:

gratuito;

pequeno (87.7 MB);

multiplataforma (Windows, Linux e Mac).

23

Competncia 02

A verso que utilizamos para essa disciplina a 2.8, que pode ser copiada de maneira gratuita dos
seguintes endereos:

www.gimp.org

http://portableapps.com

Saiba Mais:
Visite o GIMP Brasil, que uma comunidade de usurios brasileiros de GIMP em www.gimpbrasil.org/

O ltimo endereo apresenta, inclusive, uma opo de instalao do GIMP que pode ser usada no
formato porttil, sendo executada diretamente de um Pendrive ou HD Porttil. Nesse caso, o fato
do software ser executado na verso porttil bem diferente das verses portteis "alternativas"
de softwares comerciais, que so ilegais. Trata-se, aqui, de uma verso totalmente legalizada do
GIMP.

J existem verses mais recentes do GIMP como a 2.8.14, mas essas representam geralmente
apenas correes de bugs e segurana. A interface e ferramentas abordadas ao longo da disciplina
permanecem as mesmas.

2.1 Formatando Imagens com o GIMP

Os prximos tpicos j envolvem os processos de formatao das imagens para uso na web,
documentos ou apresentaes. Antes de passar para a parte prtica, importante listar e explicar
quais so os tipos de formatao que so necessrios para esse tipo de contexto.

Abaixo, a lista de algumas das edies e formaes mais usadas em imagens:

Formatao de dimenses: Envolve o redimensionamento da imagem para tamanhos

24

Competncia 02

compatveis com a mdia 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 impresso, mas para
envio por e-mail acaba ficando muito grande. Para web esse tipo de edio fundamental, pois nos
layouts e web sites o espao para imagens costuma ser bem definido e pequeno.

Transformaes: Algumas imagens precisam de transformaes simples para se encaixar em

contextos especficos como, por exemplo, o espelhamento da imagem na horizontal ou vertical.

Outro tipo comum de transformao a rotao da imagem para ajustar a orientao de algo que
est presente na imagem, ou mesmo do contedo em espaos definidos de layouts.

Cortes nas imagens: As imagens, algumas vezes, podem apresentar partes indesejadas que

precisam ser removidas, e nesse tipo de situao perfeitamente possvel fazer um corte na
imagem para ajustar o que se deseja exibir, e excluir as partes desnecessrias.

Cores: As cores de uma imagem podem no representar, com exatido, o que desejamos

para uso em layouts na web ou apresentaes, e por isso, algumas vezes necessrio alterar
detalhes como brilho, contraste, saturao da cor e outros.

Transparncia: A natureza quadrada ou retangular das imagens nem sempre suficiente

para uso em apresentaes e layouts na web. Com o uso de ferramentas de seleo nos softwares
de edio, possvel excluir partes especficas de uma imagem, e salvando o arquivo em formatos
que suportam canais alpha, podemos gerar uma imagem que aparenta ter moldura irregular e no
mais quadrada ou retangular.

Alterao no tipo de arquivo: Os diferentes tipos de formato de arquivo que aprendemos na

semana passada, aparecem aqui, novamente, mas agora veremos na prtica como possvel salvar
uma imagem em diferentes formatos.

Esses so os tpicos que iremos abordar na formatao de imagens para web, apresentaes e
documentos. Algumas situaes exigem que mais de uma tarefa de edio seja aplicada na imagem.
Para isso, basta misturar as ferramentas abordadas para gerar o efeito desejado. Por exemplo, se
uma imagem precisar ser:

Redimensionada;

25

Competncia 02

Rotacionada em 90 graus no sentido horrio;

Ter partes recortadas.

Tudo isso pode ser aplicado ao mesmo tempo em imagens no GIMP, basta utilizar as ferramentas
em sequncia.

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 verses instaladas nos laboratrios dos
polos, podemos comear a usar esse software.

A instalao do software simples e no requer nenhum tipo de configurao 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

Na interface padro do GIMP as janelas so flutuantes e podem deixar algumas pessoas confusas.
Por isso, iremos adotar o modo de janela nica do software. Isso realizado no menu Janela ->

26

Competncia 02

Modo janela nica, como mostram as figuras 2.2 e 2.3.

Figura 2.2 - Menu Janela

Fonte: O autor

Figura 2.3 - Modo de janela nica

Fonte: O autor

Com o modo de janela nica, teremos todas as janelas agrupadas em uma nica janela, facilitando o
processo de edio. E, para a explicao de como funciona a interface do GIMP, voc deve agora

27

Competncia 02

assistir aos primeiros vdeos no ambiente para essa competncia, que chamado de Interface GIMP
e Idioma do GIMP.

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

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

Depois de assistir aos vdeos, retorne para esse ponto no caderno para que possamos continuar.

A explicao sobre o idioma da interface do GIMP importante, pois em alguns casos o software
acaba erroneamente configurando a linguagem para o portugus de Portugal. Se voc no tem
problemas em chamar arquivos de ficheiros ou selees de seleces, pode manter os ajustes de
linguagem, mas, caso contrrio, recomendvel mudar a linguagem para portugus do Brasil.

2.3 Controle do Zoom

A primeira tarefa para a qual devemos focar a nossa ateno na interface do GIMP quando abrimos
uma imagem a manipulao do Zoom. Dependendo do tamanho em pixels da imagem escolhida
para edio dentro do GIMP, pode ser necessrio ajustar o quanto dessa imagem queremos
visualizar na tela. Isso pode ser realizado com teclas de atalho e opes na interface.

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

Os controles de Zoom do GIMP esto no menu Visualizar como mostra a Figura 2.4.

28

Competncia 02

Figura2.4 - Controles de Zoom do GIMP

Fonte: O autor

2.4 Dimenses das Imagens

O ajuste das dimenses nas imagens a primeira tarefa efetiva que iremos abordar dentro do
GIMP. Para entender a importncia desse tipo de alterao para o uso de imagens em layouts para
web, apresentaes e documentos, necessrio compreender tambm o que representam as
dimenses das imagens.

As imagens baseadas em pixels que visualizamos todos os dias nos nossos monitores, celulares e at
mesmo no cinema so formadas por uma grande matriz de pequenos pontos, que so os pixels. A
quantidade de pixels na horizontal (width) e na vertical (height) determinam as dimenses dessas
imagens. Se voc nunca teve experincia alguma com manipulao de imagens, basta fazer uma
analogia com a resoluo dos monitores que usamos todos os dias. Voc sabe qual a resoluo do
seu monitor? Talvez sejam 1440 por 960 pixels ou mesmo nos monitores mais modernos 1920 por
1080 pixels, que a chamada resoluo FullHD usada em televisores de LCD, LED e Plasma

29

Competncia 02

modernos.

Observao: Essas resolues so sempre escritas com o valor da largura primeiro, seguido pela
altura.

Saiba Mais:
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

A quantidade de pixels resultante de uma fotografia digital tambm 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 dimenses
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
necessrio para armazenar essa imagem em disco e consequentemente transferir pela internet.

Os tamanhos das imagens na web so bem menores do que esses que comentamos e isso fica bem
claro quando consultamos a tabela da Abraweb (Associao brasileira de Web Designers) para
padronizao de publicidade em web sites.

www.abraweb.com.br/banners.php

Na tabela, encontramos resolues como 250 por 250 pixels, que bem menor do que as citadas
anteriormente. Nesse tipo de situao, necessrio redimensionar as imagens para fazer com que

30

Competncia 02

as mesmas sejam reduzidas para que se enquadrem nesse tipo de resoluo.

Como podemos redimensionar uma imagem no GIMP? Isso feito no menu imagem, na opo
redimensionar imagem, como mostra a Figura 2.5.

Figura 2.5 - Redimensionando imagens

Fonte: O autor

A explicao completa sobre o funcionamento dessa ferramenta, voc encontra no vdeo chamado
Redimensionamento de imagens, disponvel no ambiente virtual.

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

Essa uma das tarefas mais comuns que podemos realizar no GIMP e, ao mesmo tempo, tambm
a mais til, pois, geralmente, as dimenses de uma imagem precisam ser ajustadas para uso na

31

Competncia 02

web, apresentaes ou documentos.

2.5 Excluso de Camadas

Com as imagens em tamanhos diferentes, podemos comear a explorar mais recursos do GIMP,
como a adio de textos nas imagens. J que o uso de publicidade na web foi citado como uma das
aplicaes prticas do recurso, podemos j trabalhar com esse tipo de criao em mente. Os
recursos para trabalhar, mesmo que resumidamente, com imagens so explicados no vdeo
chamado Textos e camadas, no ambiente virtual.

O vdeo mostra um pouco sobre como funciona a adio de textos e, depois, como possvel
remover esses textos das imagens excluindo a camada resultante.

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

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

2.6 Transformaes em Imagens

As imagens, algumas vezes, precisam de outros tipos de ajustes, alm do redimensionamento. Para
trabalhar com esse tipo de transformao nas imagens, usamos o menu imagem e a opo
transformaes no GIMP como mostra a Figura 2.6.

32

Competncia 02

Figura 2.6 Transformaes

Fonte: O autor

Nesse caso, as transformaes disponveis para as imagens so as seguintes:

Espelhamento horizontal e vertical;

Rotao da imagem.

Os procedimentos necessrios para usar esses recursos no GIMP so explicados no vdeo, disponvel
no ambiente virtual, chamado de transformaes. (https://vimeo.com/50608019)

2.7 Corte de Imagens

As imagens que recebemos para edio podem, eventualmente, possuir partes indesejadas ou
reas especficas que devem ser exibidas em apresentaes. Nesse tipo de situao, interessante
cortar essas imagens, para exibir somente o que se deseja. Em termos de edio para imagens, a

33

Competncia 02

tcnica 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

A explicao sobre o funcionamento da ferramenta pode ser encontrada no ambiente virtual,

usando o vdeo chamado de Corte em imagem.

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

Depois de cortada, a imagem pode ser editada e finalizada, com outras ferramentas do GIMP.
interessante que esse corte, caso necessrio, seja realizado antes do redimensionamento da
imagem, para evitar problemas com poucos pixels para a largura ou altura da imagem.

34

Competncia 02

2. 8 Cores
As cores de uma imagem podem precisar de ajustes, assim como acontece com suas dimenses. E
isso tambm pode ser objeto de ajustes dentro do GIMP. Existe um menu especfico para fazer
ajustes em cores que o menu cor mostrado na Figura 2.8. Nesse menu, possvel encontrar
opes para fazer ajustes diversos nas cores de uma imagem como:

Ajuste de brilho;

Ajuste de contraste;

Balano de cor;

Saturao;

Luminosidade.

Figura 2.8 - Menu cor

Fonte: O autor

35

Competncia 02

Assim como aconteceu com outros parmetros relacionados com as ferramentas do GIMP, a
explicao sobre como usar os ajustes de cor do GIMP est disponvel no ambiente virtual, no vdeo
chamado de Ajustes de cor.

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

Caso voc no tenha experincia com esse tipo de detalhe esttico das imagens, melhor no fazer
alteraes drsticas nas imagens, para evitar ter como resultado imagens com cores ou
modificaes cromticas. Sempre salve as imagens que recebem modificaes nas cores com outros
nomes para ter acesso s imagens originais posteriormente.

Ateno:
Esse tipo de modificao nas imagens deve ser aplicado com cuidado, pois envolve a manipulao de
pixels usando a sua percepo sobre as cores, luminosidade e contraste da imagem.

2.9 Transparncia

O ltimo tipo de ajuste que faremos em termos de edio nas imagens muito til nos casos do uso
de fotografias, em apresentaes e documentos. Algumas vezes, preciso aplicar uma imagem em
layouts, mas com formas diferentes do tradicional quadrado ou retngulo, o padro das imagens.
Nesse tipo de situao, perfeitamente possvel e til excluir partes da imagem deixando a rea em
que os pixels foram excludos com transparncia.

Ateno:
PNG o formato mais indicado para representar fotografias em apresentaes que precisem de algum
tipo de canal alpha.

Na semana passada, abordamos os tipos de imagem utilizados na web, e dois desses formatos

36

Competncia 02

suportavam canais alpha.

Para aprender como gerar esse tipo de imagem no GIMP para uso em apresentaes, voc deve
assistir ao vdeo chamado Transparncia em imagens, disponvel no ambiente virtual.

Transparncia em Imagens: www.vimeo.com/5553140

No final, voc ser capaz de gerar imagens para aplicar em apresentaes no PowerPoint ou Libre
Office como mostra a Figura 2.9.

Figura 2.9 - Imagens em apresentaes

Fonte: O autor

2.10 Salvando Imagens

O passo final de qualquer edio de imagens no GIMP a criao de um arquivo de imagem com o
resultado do processo de edio. Para criar novos arquivos de imagem, basta usar o menu Arquivo e
a opo exportar para gerar imagens nas extenses JPG, GIF ou PNG como mostra a Figura 2.10.

37

Competncia 02

Figura 2.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 editveis e outros elementos? O formato indicado o XCF. Esse formato o que o
GIMP usa nativamente para armazenar a estrutura das imagens e permitir edies futuras. Nos
casos em que voc deseje ter a possibilidade de editar os textos, camadas e outros elementos das
imagens, recomendvel salvar os arquivos em XCF e tambm no formato de sada seja ele JPG, GIF
ou PNG.

O vdeo chamado Exportando e salvando imagens mostra todos os detalhes sobre como
possvel salvar essas imagens no GIMP, e voc encontra esse vdeo no ambiente virtual.

Exportando Imagens: www.vimeo.com/562313

38

Competncia 03

3.Competncia 03 | Tcnicas de Edio e Montagem de Layouts para

Web com Base em Imagens
A terceira parte da nossa disciplina aborda a criao de peas grficas para a web usando o que j
aprendemos sobre manipulao de imagens com o GIMP. O contedo que j estudamos suficiente
para trabalhar com edio de imagens para a Web? Apesar de j termos abordado uma boa
quantidade de temas, ainda necessrio somar mais alguns tpicos a nossa lista de assuntos, para
que voc tenha mais segurana na edio e manipulao de imagens para a web.

Por isso, ao mesmo tempo em que conhecemos as caractersticas desses layouts para a web,
tambm aprenderemos mais sobre as ferramentas que o GIMP nos proporciona, e que esto
disponveis 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 opes no mercado como o Photoshop e o Fireworks, ambos da Adobe e
que tambm so usados para esse tipo de propsito.

Antes de partirmos para a parte prtica, interessante abordar o papel das imagens dentro do
ambiente web nos dias atuais. H poucos anos, era compreensvel utilizar imagens como base para
criao de interfaces para a web. O uso de elementos visuais como sombras, reflexos e outros era o
mximo em termos de montagem de layouts para a web.

Com o passar dos anos, o uso de imagens como base para esse tipo de criao acabou sendo
substitudo por tcnicas mais modernas e baseadas em codificao. Hoje, possvel utilizar muitos
desses efeitos como sombras, reflexos e principalmente controle de formas usando o CSS3. O uso
intenso de imagens acaba sendo prejudicial para websites no que concerne tambm melhora
deles, para mecanismos de busca. Como os mecanismos de busca baseiam seus ndices e
classificao muito em informaes textuais, o uso de imagens encarado por muitos especialistas
como sendo prejudicial para o website como um todo.

39

Competncia 03

CSS3:
Entenda o que o CSS3 lendo esses textos:
http://pt.wikipedia.org/wiki/CSS3
http://pt.wikipedia.org/wiki/Cascading_Style_Sheets

A lista a seguir mostra situaes em que recomendado utilizar imagens:

Exibir publicidade;

Mostrar reas de layout que so impossveis de reproduzir com CSS3;

Adicionar fotografias no layout de web sites;

Planejar o layout para converso em CSS3.

Para completar a lista, agora algumas situaes em que no devemos utilizar imagens:

Menus de navegao;

Layouts com muitos efeitos baseados apenas em imagens;

Utilizar imagens para construir interfaces.

Ateno:
Isso significa que no devemos usar imagens? Claro que no! O significado disso simples: voc deve
usar imagens apenas quando for indispensvel para o projeto. Por exemplo, a exibio de uma
fotografia ou a criao de um banner para anncios. Esses so casos clssicos em que o uso de
imagens recomendado.

Para casos especiais como hotsites publicitrios ou divulgao de produtos e servios,

perfeitamente aceitvel que se direcione a criao de layouts para uso mais intenso de imagens,
mas em 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 trfego orgnico, acaba moldando o mercado de trabalho e os padres
usados para construir websites.

40

Competncia 03

3. 1 Layouts para Web

E para fazer com que os nossos conhecimentos relacionados produo de contedo para web
estejam alinhados com as exigncias do mercado, o foco da terceira parte da disciplina ser,
exatamente, na construo de dois artefatos muito usados nos dias de hoje na web. O primeiro
um banner publicitrio, que mescla imagens com informaes de texto, para ser inserido dentro de
websites. A segunda pea o planejamento de um layout, usando recursos do GIMP, para posterior
transformao 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 nvel de controle e resposta visual imediata para quem est executando a
interface. Quando todo o trabalho gerado apenas com os cdigos do CSS, a resposta visual
limitada, pois o designer precisa primeiro escrever o cdigo para depois visualizar o resultado.

Caso voc ainda no conhea o CSS3, existem diversos tutoriais e dicas na prpria web que
mostram o poder desse recurso em termos de representao visual. Ao lado, existem alguns
endereos 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 relao ao GIMP na produo de
artefatos para a web a criao de um banner. Esse banner tem como objetivo mostrar os
seguintes recursos do GIMP que devem permitir que voc crie outras peas grficas semelhantes
para a web:

41

Competncia 03

Formatao de textos;

Uso de camadas;

Aplicao de efeitos;

Desenho de formas;

Ferramentas de pintura;

Dimensionamento de imagens.

Todos esses conhecimentos so necessrios para conseguir gerar o banner que exibido j na sua
forma final na Figura 3.1.

Figura 3.1 - Banner finalizado

Fonte: O autor

3.2.1 Dimenses do Banner

A primeira coisa que precisamos fazer para criar o nosso banner definir o seu tamanho. As
dimenses de peas publicitrias na web devem seguir o padro j apresentado anteriormente e
que est bem documentado no site da Abraweb. Essas dimenses so usadas pelos maiores
provedores de publicidade online como o Google Adwords, OpenX e outros. Isso significa que, ao
escolher um desses formatos, voc estar criando uma pea publicitria que pode ser usada em
praticamente qualquer layout.

42

Competncia 03

Como essas dimenses so padronizadas, a maioria esmagadora das interfaces na web reserva
espaos para banner que so compatveis com ao menos uma dessas dimenses. E para nosso
banner, a escolha da dimenso o do anncio 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 espao
bem razovel para apresentar elementos visuais.

Ento, para comear a fazer o banner, necessrio abrir o GIMP e criar um novo arquivo com
dimenses 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

43

Competncia 03

Figura 3.3 - Dimenses da imagem

Fonte: O autor

O espao de cor deve ser mantido no formato RGB, pois a nossa imagem ser usada em dispositivos
de vdeo. Assim como a resoluo para imagens, que deve permanecer em 72 dpi.

3.2.2 Fotografia como Fundo

Com o banner devidamente dimensionado, podemos agora trabalhar na adio 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. Ento, o primeiro passo abrir o arquivo da
imagem que identificada como IMG_banner.jpg como mostra a Figura 3.4.

44

Competncia 03

Figura 3.4 - Imagem original

Fonte: O autor

Essa imagem est com uma dimenso 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 mximo 336 pixel. No menu imagem,
escolha a opo redimensionar imagem, como mostra a Figura 3.5.

Figura 3.5 - Redimensionar imagem

Fonte: O autor

45

Competncia 03

E determine que a mesma tenha largura de 336 pixel, como mostra a Figura 3.6.

Figura 3.6 - Configurando o tamanho da imagem

Fonte: O autor

Com imagem na dimenso correta, podemos selecionar a mesma com a tecla CTRL+A ou ento
acionando o menu Seleo Selecionar, tudo como mostra a Figura 3.7.

Figura 3.7 - Selecionar tudo

Fonte: O autor

46

Competncia 03

Com a imagem devidamente selecionada, voc pode acionar um dos atalhos mais usados no mundo
da informtica, o famigerado CTRL+C. E com a imagem copiada para a rea de transferncia 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

Agora, escolha a opo 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 - Opo para colar

Fonte: O autor

47

Competncia 03

Figura 3.10 - Resultado da edio

Fonte: O autor

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

48

Competncia 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 criao 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.

49

Competncia 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 comear a digitar no nosso texto, importante configurar alguns aspectos
dos caracteres usados como a fonte. Isso pode ser realizado na barra de opes 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 vdeo, pois no apresenta serifa. O local de seleo das fontes
pode ser visualizado na Figura 3.13.

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

50

Competncia 03

Figura 3.13 - Escolha da fonte

Fonte: O autor

No mesmo local em que alteramos a fonte, podemos tambm modificar aspectos como o tamanho
dos caracteres, cor e outras informaes 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 possvel usar, a qualquer momento, a ferramenta mover, como mostra a
Figura 3.15.

Figura 3.14 - Posio do texto

Fonte: O autor

51

Competncia 03

Figura 3.15 - Ferramenta mover

Fonte: O autor

Um aspecto interessante que deve ser notado em relao criao de textos no GIMP que, ao
criar textos, o resultado ser a adio automtica de uma nova camada na lista de camadas. Essa
nova camada permite utilizar controles especficos sobre o texto, como mostra a Figura 3.16.

Figura 3.16 - Nova camada

Fonte: O autor

52

Competncia 03

3.2.4 Barra Inferior

Com o texto posicionado na parte superior do banner, podemos partir para a criao da barra
inferior do nosso banner. Essa barra inferior deve ser desenhada na posio final, usando as
ferramentas do GIMP. Esse tipo de desenho realizado da mesma forma na maioria dos softwares
que fazem edio de imagens, que por meio da ferramenta de seleo. Ao delimitar uma rea na
imagem, podemos adicionar cores que resultam na pintura do espao 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

53

Competncia 03

Figura 3.18 - Ajustes da nova camada

Fonte: O autor

A seleo dessa rea, que deve ser pintada, feita com a ferramenta lasso, como mostra a Figura
3.19. Depois de acionar a ferramenta lasso, necessrio marcar uma seleo parecida com a da
Figura 3.20. Para fazer esse tipo de seleo, voc deve clicar e soltar o boto esquerdo do mouse,
sem a necessidade de arrastar. Para fazer uma seleo ortogonal, basta usar a tecla CTRL ao mover
o mouse que as linhas da seleo so criadas de maneira ortogonal. Nessa seleo, voc deve clicar
no primeiro ponto para finalizar o processo.

Figura 3.19 - Ferramenta lasso

Fonte: O autor

54

Competncia 03

Figura 3.20 - Seleo

Fonte: O autor

Como resultado da seleo veremos uma forma geomtrica marcada na imagem como mostra a
Figura 3.21.

Figura 3.21 - Resultado da seleo

Fonte: O autor

55

Competncia 03

Com a seleo 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 seleo, 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

A pintura do gradiente deve ser realizada com uma boa amplitude. Clicando na parte superior da
imagem e com o boto 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.

56

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

Figura 3.24 - Resultado da pintura

Fonte: O autor

57

Competncia 03

3.2. 5 Textos Adicionais

Agora, podemos finalizar a criao do banner, usando novamente a ferramenta de textos do GIMP,
mas, nesse caso, voc j conhece o funcionamento. O objetivo adicionar os textos no banner para
conseguir como resultado o layout que temos na Figura 3.25.

Figura 3.25 - Layout com textos na barra inferior

Fonte: O autor

Um ltimo ajuste no nosso banner envolve o deslocamento do texto superior para que o mesmo
fique centralizado e um pouco maior do que havamos configurado. O resultado final apresentado
na Figura 3.26.

58

Competncia 03

Figura 3.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 criao 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.

Ateno:
Nesse tipo de situao, os layouts podem tanto servir como referncia para a criao dos websites ou
mesmo funcionar como base para a futura codificao da estrutura usando HTML e CSS.

Nos dias de hoje, o mais correto usar o software de edio como base para criao do layout, pela
facilidade de poder visualizar a interface de maneira instantnea em relao ao que feito
diretamente no cdigo. Depois que o layout est concludo, podemos passar o mesmo para o

59

Competncia 03

processo de codificao. Outra opo gerar um mapa de imagem em HTML diretamente no GIMP,
que apesar de no ser muito usado hoje em dia, pode ser a soluo para o design rpido de
websites.
Como base para o nosso estudo sobre desenho de layout para web, iremos trabalhar com o
desenho do layout exibido na Figura 3.27.

Figura 3.27 - Layout web

Fonte: O autor

60

Competncia 03

O layout apresenta partes bem definidas para contedo, logomarca, navegao e outros elementos.
Tudo foi desenhado no GIMP, usando as ferramentas de pintura.

3.3.1 Criando a Moldura

Para comear 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 opo Arquivo -> Novo,
precisamos configurar a nossa moldura como tendo 700 pixels de largura e 850 pixels de altura. A
Figura 3.29 mostra a configurao do menu de criao.

Figura 3.28 - Criando um novo arquivo

Fonte: O autor

61

Competncia 03

Figura 3.29 - Configurando a moldura

Fonte: O autor

3.3.2 Preparando a rea de Desenho

O GIMP oferece vrias ferramentas de controle para desenho de layouts, que facilitam muito o
trabalho de qualquer designer. Entre essas opes, 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 fssemos 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.

62

Competncia 03

Figura 3.30 - Configurando a grade

Fonte: O autor

A melhor configurao para a grade um espaamento de 25 pixels na horizontal e vertical,

seguidos por um tipo de linha slido. Na cor da grade, voc deve escolher uma tonalidade cinza,
como mostra a Figura 3.31.

Figura 3.31 - Configurao da grade

Fonte: O autor

63

Competncia 03

Depois disso, podemos exibir a grade na rea de desenho do GIMP, com a opo do menu visualizar
chamada de "Exibir Grade", como mostra a Figura 3.32. O resultado da configurao exibido na
Figura 3.33.

Figura 3.32 - Ajustes na grade

Fonte: O autor

64

Competncia 03

Figura 3.33 - Resultado da grade

Fonte: O autor

3.3.3 - Preparando as Camadas

Com a grade devidamente criada, podemos partir para a configurao 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 ilustrao envolvendo elementos grficos no GIMP, criando a sua prpria 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.

65

Competncia 03

Figura 3.34 - Configurao da camada

Fonte: O autor

Antes de continuar com o desenho, importante acionar a opo "Atrair pela grade", como mostra
a Figura 3.35, para que, ao desenhar qualquer elemento no GIMP, o mesmo seja atrado pelas
linhas da grade.

Figura 3.35 - Configurando a grade

Fonte: O autor

66

Competncia 03

3.3. 4 Contorno do Layout

Agora, precisamos fazer a marcao de um contorno retangular ao redor da nossa moldura, como
mostra a Figura 3.36. Esse contorno feito com a ferramenta de seleo, em forma de quadrado do
GIMP. As opes que j acionamos em relao grade do GIMP devem ajudar a criar a seleo de
maneira muito prxima exibida na Figura 3.36.

Figura 3.36 - Seleo no GIMP

Fonte: O autor

Essa opo de seleo no necessariamente uma ferramenta de desenho, por isso necessrio
usar outros meios para adicionar linhas de contorno na seleo que acabamos de realizar. O
mtodo de desenho, com base em seleo, muito comum em ferramentas de ilustrao como o
GIMP. Nesse caso, devemos usar a opo do menu editar, chamada de "contornar seleo", como
mostra a Figura 3.37.

67

Competncia 03

Figura 3.37 - Contornar seleo

Fonte: O autor

A opo de contornar a seleo deve receber duas configuraes, que so a sua espessura e
tambm 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.

68

Competncia 03

Figura 3.38 - Configuraes do contorno

Fonte: O autor

Figura 3.39 - Linha de contorno

Fonte: O autor

69

Competncia 03

3.3.5 Pintura das reas do Layout

Como j conhecemos as ferramentas de desenho do GIMP com base nos assuntos abordados na
criao do banner, podemos pular alguns estgios na elaborao 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 configurao pode ser visualizado na Figura 3.40.

Figura 3.40 - Barra superior

Fonte: O autor

Logo depois de pintar a barra superior, podemos marcar uma seleo idntica 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.

70

Competncia 03

Figura 3.41 - Barra de navegao

Fonte: O autor

Figura 3.42 - Pintura da barra

Fonte: O autor

O mesmo procedimento deve ser usado para criar uma barra em uma nova camada, agora chamada
de "destaque", como mostra a Figura 3.43. E, logo depois, outra rea criada chamada de social,
como mostra a Figura 3.44.

71

Competncia 03

Figura 3.43 - Barra de destaque

Fonte: O autor

Figura 3.44 - Barra social

Fonte: O autor

72

Competncia 03

3.3. 6 Desenho de Linhas

O nosso layout tambm apresenta uma linha que divide a parte do contedo do que seria uma rea
para listar pequenos textos. Essa linha pode ser desenhada com uma ferramenta do GIMP chamada
de lpis. 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. Para criar uma linha reta mantenha a tecla CTRL ao marcar
os pontos.

Figura 3.45 - Configurao da linha

Fonte: O autor

73

Competncia 03

Figura 3.46 - Resultado da linha

Fonte: O autor

3.3.7 Adicionando Textos no Layout

A adio de textos no layout no apresenta nenhum mistrio, sendo necessrios apenas ajustes em
relao s configuraes de como o texto ser exibido. No primeiro estgio da configurao dos
textos, podemos adicionar um ttulo na barra superior, seguido por uma amostra de contedo,
como mostra a Figura 3.47.

74

Competncia 03

Figura 3.47 - Primeiros textos no layout

Fonte: O autor

Dica: Na rea de design, usado com frequncia um texto em latim chamado de Lorem Ipsum. Esse
texto usado apenas para compor visualmente um layout enquanto no temos o contedo final
definido. Voc pode gerar esses textos em latim em vrios web sites, como o Lorem BR.

Gerador de textos: http://br.lorem.com

O prximo passo adicionar um texto na rea de destaque e, tambm, um cone para o Twitter.
Esse cone para o Twitter pode ser copiado dos endereos abaixo:

75

Competncia 03

cone: http://icons.iconarchive.com/icons/deleket/social-networking/256/Twitter-icon.png

O processo para adicionar o cone no layout idntico ao que j realizamos anteriormente no

exerccio do banner. O resultado dessa configurao pode ser conferido na Figura 3.48.

Figura 3.48 - Layout com cone

Fonte: O autor

Os ltimos textos do nosso layout so as opes de navegao e os textos resumidos que devem ser
adicionados na parte esquerda da interface, como mostra a Figura 3.49.

76

Competncia 03

Figura 3.49 - ltimos textos

Fonte: O autor

3.3.8 Preparando o Layout para a Web

Com o nosso layout visualmente terminado, podemos preparar o mesmo para a publicao na web.
At alguns anos atrs, era comum encontrar web sites e sistemas totalmente criados com base em
imagens, mas isso j no o padro de criao entre designers nos dias de hoje. O motivo j foi
mencionado anteriormente, estando relacionado com a melhoria do contedo e do website para
mecanismos de busca.
Mas, nada impede que voc conhea a ferramenta que publica esse tipo de layout diretamente do
GIMP. A tcnica consiste no "fatiamento" da imagem em vrios pedaos que resultam na criao de

77

Competncia 03

uma tabela em HTML. Cada uma das clulas 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 semntico, est fora dos padres da web contempornea. Uma tabela deve
ser usada para exibir dados tabulados, e no montar layout.
Para gerar a tabela no GIMP e publicar o nosso layout como um arquivo HTML, precisamos,
primeiro, fazer a marcao com linhas guia. Essas linhas podem ser facilmente criadas ao clicar em
uma das rguas nas laterais de um layout no GIMP e arrastar o mouse, mantendo o boto esquerdo
pressionado. O posicionamento das rguas a parte complexa. Mas, existe uma ferramenta que
ajuda a criar essas guias de maneira mais ordenada. Basta fazer uma seleo nas reas de desenho
que criamos no nosso layout e acionar a opo no menu Imagem -> Guias -> Novas guias a partir da
seleo, como mostra a Figura 3.50.

Figura 3.50 - Ferramenta para criar guias

Fonte: O autor

78

Competncia 03

Voc deve criar selees nas reas do layout e acionar essa opo vrias vezes at que a interface
esteja com um esquema de guias semelhante ao que mostrado na Figura 3.51.

Figura 3.51 - Guias na interface

Fonte: O autor

Para exportar o layout como um arquivo HTML, agora podemos acionar os filtros do GIMP no menu
Filtros e escolher no subconjunto web a opo fatiar, como mostra a Figura 3.52.

79

Competncia 03

Figura 3.52 - Opo fatiar

Fonte: O autor

Nessa opo, devemos configurar o nome do arquivo HTML e do diretrio que receber as imagens
como mostra a Figura 3.53.

Figura 3.53 - Opes para exportar em HTML

Fonte: O autor

80

Competncia 03

Alm dessas opes, ainda possvel determinar o diretrio 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 situao,
em que temos apenas cores simples no layout, a melhor opo o GIF.

81

Consideraes Finais
Em resumo, ns aprendemos como reconhecer os formatos ideias para criar nossas imagens e
disponibiliz-las para WEB, com isso, alm de entender como os sites modernos funcionam,
tambm podemos melhorar o desempenho dos sites que vocs possam a vir desenvolver em
prximas competncias.
Assim pessoal, chegamos ao final de nosso caderno, espero que tenham gostado do contedo
apresentado!

82

Referncias
WIKIPEDIA.

Figura

2.1.

Mistura

em

RGB.

Disponvel

em

http://pt.wikipedia

em

http://pt.wikipedia

.org/wiki/Ficheiro:Synthese%2B.svg. Acesso em Agosto de 2015.

WIKIPEDIA.

Figura

2.2.

Mistura

em

CMYK.

Disponvel

.org/wiki/Ficheiro:SubtractiveColorMixing.png. Acesso em Agosto de 2015.

WIKIPEDIA.

Figura

2.3.

Compresso

em

JPG.

Disponvel

em

http://pt.wikipe

dia.org/wiki/Ficheiro:Texel_Landscape.jpg. Acesso em Agosto de 2015.

WIKIPEDIA.

Figura

2.5.

Exemplo

de

representao

em

GIF.

Disponvel

em

http:

//pt.wikipedia.org/wiki/Ficheiro:Sunflower_as_GIF.gif. Acesso em Agosto de 2015.

WIKIPEDIA.

Figura

2.6.

cone

salvo

em

PNG.

Disponvel

em

http://pt.wikipedia

em

http://pt.wikipedia

.org/wiki/Ficheiro:Truck_icon.pn>. Acesso em Agosto de 2015.

WIKIPEDIA.

Figura

2.7.

cone

salvo

em

PNG.

Disponvel

.org/wiki/Ficheiro:Miro_icon.png. Acesso em Agosto de 2015.

83

Minicurrculo do Professor
Maicon Herverton Lino bacharel em Sistemas de Informao e mestre em Cincias da
Computao pela UFRPE. Hoje, scio-diretor da LIFE SOLUES EM TECNOLOGIA, j atuou como
professor universitrio em cursos superiores e como analista de sistemas durante seis anos.

84