caderno de info(edição e processamento de imagens 2015.2) (1).pdf

7/25/2019 Caderno de INFO(Edio e processamento de Imagens 2015.2) (1).pdf

1/87

Edio e Processamento de Imagens

Maicon Herverton Lino Ferreira da Silva

Curso Tcnico em Informtica

Educao a Distncia2015


2/87


3/87

EXPEDIENTE

Professor AutorMaicon Herverton Lino Ferreira da Silva

DesignInstrucionalDeyvid Souza Nascimento

Maria de Ftima Duarte AngeirasRenata Marques de Otero

Terezinha Mnica Sincio Beltro

Reviso de Lngua PortuguesaLetcia Garcia

DiagramaoIzabela Cavalcanti

CoordenaoJoo Ferreira

Coordenao ExecutivaGeorge Bento Catunda

Coordenao GeralPaulo Fernando de Vasconcelos Dutra

Contedo produzido para os Cursos Tcnicos da Secretaria Executiva de EducaoProfissional de Pernambuco, em convnio com o Ministrio da Educao

(Rede e-Tec Brasil).Agosto, 2015


4/87

A586e Silva, Maicon Herverton Lino Ferreira da.Edio e Processamento de Imagens: Curso Tcnico em

Informtica: Educao a distncia / Maicon Herverton LinoFerreira da Silva. Recife: Secretaria Executiva de EducaoProfissional de Pernambuco, 2015.

84 p.: il.

1. Educao distncia. 2. Editorao. 3. Processamentode imagens. I. Silva, Maicon Herverton Lino Ferreira da. II.Ttulo. III. Secretaria Executiva de Educao Profissional dePernambuco. IV. Ministrio da Educao. V. Rede e-TecBrasil.

CDU006.42


5/87

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


6/87

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


7/87

5

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/


8/87

6

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

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


9/87

7

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 noindicado 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 WhatsAppela 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 acompresso em duas grandes famlias, que so mtodos do tipo Lossye Lossless. Os dois mtodos

Competncia 01


10/87

8

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


11/87

9

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 Lossye, 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 Lossyso 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
http://inf.ufrgs.br/~mkbahy/26compressaoimagens.pdfhttp://pt.wikipedia.org/wiki/Compress%C3%A3o_com_perda_de_dadoshttp://pt.wikipedia.org/wiki/Compress%C3%A3o_com_perda_de_dadoshttp://inf.ufrgs.br/~mkbahy/26compressaoimagens.pdf


12/87

10

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 eao 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 Losslesse 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

Competncia 01


13/87

11

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,

Competncia 01


14/87

12

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.1Mistura em RGBFonte: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)

Competncia 01
http://www.youtube.com/watch?v=rGY_cwDrMEghttp://www.youtube.com/watch?v=qF9AoCUcDGghttp://pt.wikipedia.org/wiki/Ficheiro:Synthese%2B.svghttp://pt.wikipedia.org/wiki/Ficheiro:Synthese%2B.svghttp://www.youtube.com/watch?v=qF9AoCUcDGghttp://www.youtube.com/watch?v=rGY_cwDrMEg


15/87

13

Esse formato utilizado em ambientes de impresso e corresponde, exatamente, s coresexistentes 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.2Mistura em CMYKFonte: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

Competncia 01
http://pt.wikipedia.org/wiki/Ficheiro:SubtractiveColorMixing.pnghttp://pt.wikipedia.org/wiki/Ficheiro:SubtractiveColorMixing.png


16/87

14

ou 24-bits de capacidade.

O que isso significa? Para fins de reproduo de cores, possvel identificar a quantidade de coresque 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 28cores. 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

Competncia 01


17/87

15

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 oschamados 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% dequalidade 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

Competncia 01


18/87

16

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 ospixels. A imagem fica borrada, com blocos visveis resultantes do algoritmo de compresso.

Figura 1.3Compresso em JPGFonte: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 dosseguintes 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;

Competncia 01
http://pt.wikipedia.org/wiki/Ficheiro:Texel_Landscape.jpghttp://www.infowester.com/imagens.phphttp://www2.dcc.ufmg.br/disciplinas/ii/ii05-1/seminario/jpeg.pdfhttp://www.slideshare.net/sergioviniciuss/apresentacao-jpeg-smuhttp://www.slideshare.net/creaktive/codificacao-lossy-do-jpeghttp://www.slideshare.net/creaktive/codificacao-lossy-do-jpeghttp://www.slideshare.net/sergioviniciuss/apresentacao-jpeg-smuhttp://www2.dcc.ufmg.br/disciplinas/ii/ii05-1/seminario/jpeg.pdfhttp://www.infowester.com/imagens.phphttp://pt.wikipedia.org/wiki/Ficheiro:Texel_Landscape.jpg


19/87

17

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.4JPG com cores slidasFonte: O Autor

Competncia 01


20/87

18

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.

Competncia 01


21/87

19

Ateno:Com esse tipo de arquivo possvel utilizar pixels transparentes, permitindo a organizao de arquivosGIF 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 ousoftwares adicionais, nos navegadores, para exibio do seu contedo, como acontece com

animaes geradas usando Flashou 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.5Exemplo de representao em GIFFonte:http://pt.wikipedia.org/wiki/Ficheiro:Sunflower_as_GIF.gif,2012.

Competncia 01
http://pt.wikipedia.org/wiki/Ficheiro:Sunflower_as_GIF.gifhttp://pt.wikipedia.org/wiki/Ficheiro:Sunflower_as_GIF.gif


22/87

20

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

Competncia 01
http://www.infowester.com/imagens.phphttp://www.infowester.com/imagens.phphttp://pt.wikipedia.org/wiki/Graphics_Interchange_Formathttp://pt.wikipedia.org/wiki/Graphics_Interchange_Formathttp://pt.wikipedia.org/wiki/Graphics_Interchange_Formathttp://www.infowester.com/imagens.php


23/87

21

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 comque 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.6cone salvo em PNGFonte:http://pt.wikipedia.org/wiki/Ficheiro:Truck_icon.png,2012.

Competncia 01
http://pt.wikipedia.org/wiki/Ficheiro:Truck_icon.pnghttp://pt.wikipedia.org/wiki/Ficheiro:Truck_icon.png


24/87

22

Figura 1.7cone salvo em PNGFonte: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.phphttp://pt.wikipedia.org/wiki/PNG

Competncia 01
http://pt.wikipedia.org/wiki/Ficheiro:Miro_icon.pnghttp://www.infowester.com/imagens.phphttp://pt.wikipedia.org/wiki/PNGhttp://pt.wikipedia.org/wiki/PNGhttp://www.infowester.com/imagens.phphttp://pt.wikipedia.org/wiki/Ficheiro:Miro_icon.png


25/87

23

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

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

Competncia 02


26/87

24

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

Competncia 02


27/87

25

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 paraenvio 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;

Competncia 02


28/87

26

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 GIMPFonte: 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 ->

Competncia 02


29/87

27

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

Figura 2.2 - Menu JanelaFonte: O autor

Figura 2.3 - Modo de janela nicaFonte: O autor

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

Competncia 02


30/87

28

assistir aos primeiros vdeos no ambiente para essa competncia, que chamado de Interface GIMP

e Idioma do GIMP.

Janelas do GIMP -https://vimeo.com/50604751Interface 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 como tema sobre Zoom.

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

Competncia 02
https://vimeo.com/50604751https://vimeo.com/50604751


31/87

29

Figura2.4 - Controles de Zoom do GIMPFonte: 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

Competncia 02


32/87

30

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 pixelsresultante 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 pixelssendo 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

Competncia 02


33/87

31

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 imagensFonte: 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

Competncia 02


34/87

32

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.

Competncia 02


35/87

33

Figura 2.6TransformaesFonte: 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

Competncia 02


36/87

34

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 GIMPFonte: 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.

Competncia 02


37/87

35

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 corFonte: O autor

Competncia 02


38/87

36

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

Competncia 02


39/87

37

suportavam canais alpha.

Para aprender como gerar esse tipo de imagem no GIMP para uso em apresentaes, voc deveassistir 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 apresentaesFonte: 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.

Competncia 02


40/87

38

Figura 2.10 - Exportando imagensFonte: O autor

E nos casos em que voc deseje armazenar uma imagem com os recursos usados no GIMP comocamadas, 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

Competncia 02


41/87

39

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.

Competncia 03


42/87

40

CSS3:Entenda o que o CSS3 lendo esses textos:

http://pt.wikipedia.org/wiki/CSS3http://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 nodevemos 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 umafotografia 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.

Competncia 03
http://pt.wikipedia.org/wiki/CSS3http://pt.wikipedia.org/wiki/Cascading_Style_Sheetshttp://pt.wikipedia.org/wiki/Cascading_Style_Sheetshttp://pt.wikipedia.org/wiki/CSS3


43/87

41

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:

Competncia 03


44/87

42

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 finalizadoFonte: 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.

Competncia 03


45/87

43

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 nossobanner, a escolha da dimenso o do anncio do tipo largerectanglecom 336pixelde largura por

280pixelde 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 280pixel, como mostram as figuras 3.2 e 3.3.

Figura 3.2 - Criando um arquivo novo no GIMPFonte: O autor

Competncia 03


46/87

44

Figura 3.3 - Dimenses da imagemFonte: 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 bannerdevidamente 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.

Competncia 03


47/87

45

Figura 3.4 - Imagem originalFonte: 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

Competncia 03


48/87

46

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

Figura 3.6 - Configurando o tamanho da imagemFonte: O autor

Com imagem na dimenso correta, podemos selecionar a mesma com a tecla CTRL+A ou ento

acionando o menu SeleoSelecionar, tudo como mostra a Figura 3.7.

Figura 3.7 - Selecionar tudoFonte: O autor

Competncia 03


49/87

47

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 seucomputador podemos voltar para o nosso projeto, com o menu janela, como mostra a Figura 3.8.

Figura 3.8 - Alternando entre projetosFonte: 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 colarFonte: O autor

Competncia 03


50/87

48

Figura 3.10 - Resultado da edioFonte: O autor

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

Competncia 03


51/87

49

Figura 3.11 - Ferramenta moverFonte: 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.

Competncia 03


52/87

50

Figura 3.12 - Ferramenta de textos do GIMPFonte: 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

Competncia 03


53/87

51

Figura 3.13 - Escolha da fonteFonte: 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 noposicionamento do texto possvel usar, a qualquer momento, a ferramenta mover, como mostra a

Figura 3.15.

Figura 3.14 - Posio do textoFonte: O autor

Competncia 03


54/87

52

Figura 3.15 - Ferramenta moverFonte: 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 camadaFonte: O autor

Competncia 03


55/87

53

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

Competncia 03


56/87

54

Figura 3.18 - Ajustes da nova camadaFonte: 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 lassoFonte: O autor

Competncia 03


57/87

55

Figura 3.20 - SeleoFonte: O autor

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

Figura 3.21.

Figura 3.21 - Resultado da seleoFonte: O autor

Competncia 03


58/87

56

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 gradienteFonte: 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 maissuave.

Competncia 03


59/87

57

Figura 3.23 - Pintura do gradienteFonte: 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 pinturaFonte: O autor

Competncia 03


60/87

58

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 layoutque temos na Figura 3.25.

Figura 3.25 - Layout com textos na barra inferiorFonte: 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.

Competncia 03


61/87

59

Figura 3.26 - Resultado final do bannerFonte: 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 layoutspara 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

layoutspara 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

Competncia 03


62/87

60

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

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

Competncia 03


63/87

61

O layoutapresenta 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 arquivoFonte: O autor

Competncia 03


64/87

62

Figura 3.29 - Configurando a molduraFonte: 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.

Competncia 03


65/87

63

Figura 3.30 - Configurando a gradeFonte: 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 gradeFonte: O autor

Competncia 03


66/87

64

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 naFigura 3.33.

Figura 3.32 - Ajustes na gradeFonte: O autor

Competncia 03


67/87

65

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.

Competncia 03


68/87

66

Figura 3.34 - Configurao da camadaFonte: 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

Competncia 03


69/87

67

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 GIMPFonte: 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.

Competncia 03


70/87

68

Figura 3.37 - Contornar seleoFonte: 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.

Competncia 03


71/87

69

Figura 3.38 - Configuraes do contornoFonte: O autor

Figura 3.39 - Linha de contornoFonte: O autor

Competncia 03


72/87

70

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 layoute 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 superiorFonte: 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.

Competncia 03


73/87

71

Figura 3.41 - Barra de navegaoFonte: O autor

Figura 3.42 - Pintura da barraFonte: 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,


Competncia 03


74/87

72

Figura 3.43 - Barra de destaqueFonte: O autor

Figura 3.44 - Barra socialFonte: O autor

Competncia 03


75/87

73

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 linhaFonte: O autor

Competncia 03


76/87

74

Figura 3.46 - Resultado da linhaFonte: 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,


Competncia 03


77/87

75

Figura 3.47 - Primeiros textos no layoutFonte: O autor

Dica:Na rea de design, usado com frequncia um texto em latim chamado de LoremIpsum. 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:

Competncia 03
http://br.lorem.com/http://br.lorem.com/


78/87

76

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 noexerccio do banner. O resultado dessa configurao pode ser conferido na Figura 3.48.

Figura 3.48 - Layout com coneFonte: O autor

Os ltimos textos do nosso layoutso as opes de navegao e os textos resumidos que devem ser

adicionados na parte esquerda da interface, como mostra a Figura 3.49.

Competncia 03


79/87

77

Figura 3.49 - ltimos textosFonte: 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

Competncia 03


80/87

78

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 ocarregamento 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 esquerdopressio

caderno de info(edição e processamento de imagens 2015.2) (1).pdf

Documents