editoração de imagens - sistema acadêmico - site · cada uma dessas características das imagens...

Técnico em Informática

Allan Rodrigo de Brito Soares

2014

Editoração de Imagens

Presidenta da República Dilma Vana Rousseff Vice-presidente da República Michel Temer Ministro da Educação José Henrique Paim Fernandes Secretário de Educação Profissional e Tecnológica Aléssio Trindade de Barros Diretor de Integração das Redes Marcelo Machado Feres Coordenação Geral de Fortalecimento Carlos Artur de Carvalho Arêas

Governador do Estado de Pernambuco Eduardo Henrique Accioly Campos

Vice-governador do Estado de Pernambuco

João Soares Lyra Neto

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

Secretário Executivo de Educação Profissional

Paulo Fernando de Vasconcelos Dutra

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

Gestor de Educação a Distância

George Bento Catunda

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

Coordenação de Design Instrucional

Diogo Galvão

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

Diagramação

Izabela Cavalcanti

3


INTRODUÇÃO ............................................................................................................................ 5

1.COMPETÊNCIA 01 | CONHECER OS PRINCIPAIS FORMATOS DE ARMAZENAMENTO DE

IMAGENS PARA WEB ................................................................................................................ 7

1.1 Compressão de Imagens ........................................................................................ 8

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

1.1.2 Compressão do Tipo Lossless (Sem Perdas) ...................................................... 10

1.2 Cores nas Imagens ................................................................................................ 11

1.2.1 Cores RGB e CMYK ............................................................................................ 11

1.2.2 Capacidade de Reproduzir Cores ...................................................................... 13

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

1.4 Formato JPG ......................................................................................................... 15

1.4.1 Quando Usar o JPG? .......................................................................................... 16

1.4.2 Quando Não Usar o JPG? .................................................................................. 16

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

1.5.1 Quando Usar Arquivos GIF? .............................................................................. 19

1.6 Formato PNG ........................................................................................................ 20

1.6.1 Quando Usar Arquivos PNG? ............................................................................ 21

2.COMPETÊNCIA 02 | FORMATAR IMAGENS PARA UTILIZAÇÃO NA WEB OU EM

APLICATIVOS DE EDITORAÇÃO DE TEXTOS OU APRESENTAÇÕES .......................................... 22

2.1 Formatando Imagens com o GIMP....................................................................... 23

2.2 Interface do GIMP ................................................................................................ 25

2.3 Controle do ZOOM ............................................................................................... 27

2.4 Dimensões das Imagens ....................................................................................... 28

2.5 Exclusão de Camadas ........................................................................................... 30

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

2.7 Corte de Imagens ................................................................................................. 32

2.8 Cores ..................................................................................................................... 33

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

2.10 Salvando Imagens ............................................................................................... 36

3.COMPETÊNCIA 03 | TÉCNICAS DE EDIÇÃO E MONTAGEM DE LAYOUTS PARA WEB COM

BASE EM IMAGENS ................................................................................................................. 38

3.1 Layouts para Web................................................................................................. 39

4


3.2 Montando Banners para Web .............................................................................. 40

3.2.1 Dimensões do Banner ....................................................................................... 41

3.2.2 Fotografia como Fundo ..................................................................................... 43

3.2.3 Adicionando Textos ........................................................................................... 49

3.2.4 Barra Inferior ..................................................................................................... 53

3.2.5 Textos Adicionais ............................................................................................... 58

3.3 Planejando Web Sites com Base em Imagens ...................................................... 60

3.3.1 Criando a Moldura ............................................................................................ 62

3.3.2 Preparando a Área de Desenho ........................................................................ 63

3.3.3 - Preparando as Camadas .................................................................................. 66

3.3.4 Contorno do Layout .......................................................................................... 68

3.3.5 Pintura das Áreas do Layout.............................................................................. 71

3.3.6 Desenho de Linhas ............................................................................................ 74

3.3.7 Adicionando Textos no Layout .......................................................................... 75

3.3.8 Preparando o Layout para a Web ..................................................................... 78

REFERÊNCIAS .......................................................................................................................... 83

MINICURRÍCULO DO PROFESSOR ........................................................................................... 84

5


INTRODUÇÃO

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

Aqui, teremos a oportunidade de aprender sobre manipulação de imagens

para aplicação em web sites. Os assuntos estão divididos em três

competências:

Conhecer os principais formatos de armazenamento de imagens para

Web;

Formatar imagens para utilização na web ou em aplicativos de editoração

de textos ou apresentações;

Conhecer as técnicas de edição e montagem de layouts para web, com

base em imagens.

Ao longo de cada uma das competências você aprenderá muito sobre como

funcionam as imagens em meios digitais e como você pode aproveitar os

recursos dos diferentes formatos e tipos de imagens para determinadas

situações em projetos web.

Esse aprendizado é muito importante para a criação de layouts ou então para

preparar imagens para uso em sistemas de publicidade online. Um dos

aspectos que você vai perceber nos próximos capítulos é que existem diversos

recursos extras valiosos para desenvolver os seus conhecimentos no assunto

e, vários deles aparecem em formato de hyperlinks ao longo do texto.

Para começar as nossas recomendações, gostaria que você realizasse o

download de dois documentos em PDF, que são apostilas em português do

software GIMP. Essas apostilas foram desenvolvidas com o objetivo de

descrever as ferramentas do software e não possuem relação direta com as

nossas competências. Mas, ainda assim, são uma ótima fonte de informação

relacionada ao funcionamento das ferramentas do GIMP. Sempre que você

Recomendação de

Leitura:

O GIMP - Documentação e ferramentas

por João Calligaris -

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

Treinamento de GIMP -

software para manipulação e

criação de imagens por

Magali Barcellos -

http://ftp.unicamp.br/pub/apoio/treinamentos/internet/gim

p.pdf

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



6


achar necessário, consulte essa apostila para explicações complementares às

que são apresentadas nesse caderno de estudos.

7


Competência 01

1.COMPETÊNCIA 01 | CONHECER OS PRINCIPAIS FORMATOS DE

ARMAZENAMENTO DE IMAGENS PARA WEB

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

utilizados na web e quais são as principais opções relacionadas ao

armazenamento dessas imagens, dentro desse contexto. O conhecimento

desses formatos de imagem é de extrema importância para qualquer pessoa

interessada em produzir conteúdo para a web, pois com o formato certo de

imagem é possível integrar elementos como efeitos, compressão e inserir as

imagens dentro de um contexto específico.

Os formatos de imagem para web podem ser classificados de várias maneiras,

como por exemplo:

Quanto à compressão;

Quanto à qualidade da imagem;

Quanto ao suporte a efeitos;

Quanto ao suporte a animações.

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

web, o foco é exclusivo para imagens do tipo bitmap (raster) e não nas

imagens vetoriais. Além da diferença conceitual que existe, em termos de

funcionamento interno entre imagens vetoriais e do tipo bitmap, o nosso

propósito específico nessa disciplina é abordar apenas o funcionamento de

imagens do tipo bitmap, sendo as imagens vetoriais tema de outra disciplina.

Para conseguir efetivamente entender quais os principais formatos de

imagem usados na web, devemos, portanto, falar de compressão, qualidade

de imagens, cores e efeitos. Depois que você entender bem o impacto que

cada uma dessas características das imagens exerce sobre o resultado final,

será muito mais fácil de entender os motivos que fazem um formato de

Recomendação de

Leitura: Para saber mais sobre imagens digitais e ainda complementar

essas explicações, recomendo a leitura

dos seguintes artigos:

http://pt.wikipedia.org/wiki/Imagem_d

igital http://pt.wikipedia.org/wiki/Lista_de_formatos_de_ficheir

os_de_imagem

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



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




8


Competência 01

imagem ser ou não indicado para determinadas situações em projetos na

web.

1.1 Compressão de Imagens

A compressão das imagens é algo fundamental para que possamos manipular

esse tipo de arquivo, em ambientes digitais, sem a necessidade de trabalhar

com grandes volumes de informação. As imagens no formato Bitmap são

formadas por mapas de pixels, que são os pequenos pontos formadores das

imagens. É tudo baseado em uma grande matriz que, se for armazenada sem

nenhum tipo de compressão, acaba gerando enormes quantidades de dados.

Já pensou receber uma fotografia no seu e-mail com 15Mb? Essa mesma

imagem, se estiver com bons níveis de compressão, pode, tranquilamente, ser

armazenada com 500 kilobytes. É algo muito mais interessante de receber por

e-mail, pois até mesmo algumas conexões de internet banda larga

demorariam bastante para carregar as informações. No contexto de vídeos

para web, a compressão chega a ser ponto crítico, mas no que se referem às

imagens podemos dizer que é fator importante quanto estamos em ambiente

de produção.

As técnicas e algoritmos de compressão de imagens são bem variados, mas

podemos classificar a compressão em duas grandes famílias, que são métodos

do tipo Lossy e Lossless. Os dois métodos são usados não apenas para

compressão de dados em imagens, mas em todo tipo de armazenamento de

informações, inclusive arquivos no formato ZIP, RAR e outros.

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

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

a compressão direcionada para a informação visual e não para a fidelidade

dos dados. A compressão do tipo Lossy usa algoritmos que excluem

9


Competência 01

informações das imagens, com o objetivo de reduzir o seu tamanho e

mantendo um mínimo de fidelidade visual na imagem.

Esse formato de compressão apresenta os seguintes benefícios para quem

escolhe o método para armazenar imagens:

Arquivos com tamanho reduzido;

Fidelidade visual;

Fácil armazenamento;

Boas taxas de download e upload em ambiente web.

Os benefícios do formato Lossy são bem atraentes, mas apesar de todas essas

vantagens, precisamos tomar cuidado com uma coisa importante: as

informações das imagens são excluídas gradativamente, para que sejam

gerados arquivos com tamanhos reduzidos. Isso é bom para armazenamento

e transmissão, mas para quem produz conteúdo na web é muito prejudicial

perder informações nas imagens. Por exemplo, ao comprimir uma imagem

usando o método Lossy perdemos características das imagens como:

Gradientes de cor;

Definição de bordas e contornos.

Apesar desse ponto negativo em relação à compressão de imagens no

formato Lossy, os arquivos de imagem nesse formato são largamente usados

na web, devido ao seu tamanho reduzido. Fora da web, temos a maioria das

máquinas fotográficas voltadas para consumidores armazenando imagens

com compressão Lossy e, até mesmo o seu celular, caso ele possua uma

câmera, poderá armazenar as fotografias em Lossy, para economizar espaço.

Como você já deve ter percebido, quando o objetivo da compressão é

realmente reduzir o tamanho do arquivo, os arquivos no formato Lossy são os

mais indicados. O objetivo dos arquivos salvos com compressão do tipo Lossy

é a entrega para o usuário final, e não a produção dos layouts. Portanto, você

Atenção:

Para editar imagens e criar layouts de qualidade para

web, é necessário possuir todas as informações das imagens, e com

arquivos salvos com compressão Lossy, isso não é possível.

Recomendação de

Leitura: Para saber mais

sobre compressão do tipo Lossy e complementar



http://inf.ufrgs.br/~mkbahy/26compressaoima

gens.pdf

http://pt.wikipedia.org/wiki/Compress%C3%A3o_com_perd

a_de_dados

http://inf.ufrgs.br/~mkbahy/26compressaoimagens.pdf




http://pt.wikipedia.org/wiki/Compress%C3%A3o_com_perda_de_dados





10


Competência 01

deve sempre ter em mente que o uso desse tipo de compressão deve ser

aplicado apenas no momento da criação dos arquivos base para o layout que

ficará hospedado no servidor web e será transmitido para os usuários finais.

1.1.2 Compressão do Tipo Lossless (Sem Perdas)

Para os casos em que a perda de dados é problema, existe a compressão do

tipo Lossless, que é usada em vários contextos, assim como acontece com o

Lossy. Por exemplo, quando comprimimos um arquivo em ZIP, para envio por

e-mail ou armazenamento, podemos extrair o conteúdo desse arquivo para o

seu estado original, sem nenhum tipo de perda.

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

informações, percebermos partes do texto faltando?

Esse tipo de arquivo não é o mais indicado para fins de transmissão pela web,

pois o mesmo acaba tendo tamanhos bem superiores às imagens Lossy. Mas,

para criação de layouts e edição em altas resoluções o formato é perfeito para

profissionais interessados em manter versões, em grande resolução de

imagens, com todos os dados originais.

Na maioria das situações é indicado trabalhar com os dois formatos, quando é

possível, sendo o trabalho relacionado com imagens editado e montado

usando compressão Lossless e distribuído na web depois em formatos Lossy.

A separação é simples:

Lossless: Tipo de compressão usada nos arquivos base da plataforma de

autoria. Eles são maiores e retém todas as informações das imagens, o que

permite manipular e editar o material com mais flexibilidade e qualidade.

Lossy: Tipo de compressão que deve ser gerada a partir dos arquivos

Lossless, pois seu tamanho é reduzido devido à exclusão de informações. É o

arquivo usado para hospedagem nos servidores web para transmissão ao

usuário final.

Atenção:

As imagens no formato Lossless

acabam tendo tamanhos maiores do que as geradas pela compressão Lossy, mas temos como benefício a

fidelidade de dados em relação ao

arquivo original e ao resultado da

compressão.

11


Competência 01

Mesmo sem ter mencionado nenhum algoritmo, quando abordamos a

compressão do tipo Lossy, podemos destacar um método de compressão em

Lossless chamado de LZW. Esse algoritmo é usado em vários casos como

arquivos ZIP e imagens, sendo a base para muitos formatos de arquivos que

usam o método para reduzir o tamanho.

1.2 Cores nas Imagens

Com a parte relacionada à compressão das imagens bem entendida, podemos

avançar para outro aspecto que interfere bastante nas características das

imagens. Existem diversos espaços de cor e capacidades para reproduzir cores

diferentes, que devem ser levadas em consideração no armazenamento e uso

das imagens.

1.2.1 Cores RGB e CMYK

O método mais comum para gerar diferentes tonalidades de cor é com base

em mistura de cores simples, que acabam gerando tonalidades das mais

diversas. Em ambientes digitais, isso não é diferente. E, para as imagens na

web, devemos prestar atenção no formato de cor usado para gerar as

tonalidades.

Nos ambientes digitais, o modelo de cor mais usado é o RGB, que é uma

mistura das seguintes cores:

R - Red (Vermelho)

G - Green (Verde)

B - Blue (Azul)

A mistura dessas três tonalidades resulta em várias outras cores. Na escala de

cor RGB são usados valores que começam no 0 e podem ir até o 255. Por

exemplo, a cor preta é identificada como sendo R=0, G=0 e B=0. Já a cor

branca é identificada como R=255, G=255 e B=255. Além do RGB, existem

Recomendação de

Leitura: Para saber mais

sobre compressão do tipo Lossless e

complementar essas explicações,

recomendo a leitura dos seguintes

artigos:

http://inf.ufrgs.br/~mkbahy/26compres

saoimagens.pdf

http://pt.wikipedia.org/wiki/Compress%C3%A3o_sem_per

da_de_dados




http://pt.wikipedia.org/wiki/Compress%C3%A3o_sem_perda_de_dados




12


Competência 01

inúmeras variações desse formato como os RGB e o RGBA, que suportam

pixels transparentes.

A Figura 2.1 mostra, de maneira visual, essa mistura de cores das tonalidades

em RGB. É interessante notar como a base para as misturas do RGB é o preto,

pois nos monitores de vídeo é preciso sempre partir dessa cor, que representa

a ausência de luz. Por isso, é que o RGB é conhecido como um método de

mistura, baseado em soma, pois adicionamos cores, até chegar ao máximo,

que é o preto.

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

Outro formato muito usado para gerar cores em imagens é o CMYK, que é a

mistura das seguintes cores:

C - Cyan (Ciano)

M - Magenta (Magenta)

Y - Yellow (Amarelo)

K - Black (Preto)

Esse formato é utilizado em ambientes de impressão e corresponde,

exatamente, às cores existentes em cartuchos de tinta de impressoras,

somando ao cartucho preto. É necessário o uso da cor preta, pois, em teoria, a

mistura de ciano, magenta e amarelo resultaria em preto, mas, na prática,

Vídeo:

Assista a alguns vídeos

interessantes sobre o uso e composição

de cores em RGB para Web:

Sistema de cores RGB (6:51) -

www.youtube.com/watch?v=rGY_cwDr

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

http://www.youtube.com/watch?v

=qF9AoCUcDGg

http://pt.wikipedia.org/wiki/Ficheiro:Synthese%2B.svg

http://www.youtube.com/watch?v=rGY_cwDrMEg



http://www.youtube.com/watch?v=qF9AoCUcDGg



13


Competência 01

temos um marrom escuro. Por isso, é necessário adicionar a cor preta na

escala.

O uso do espaço de cor CMYK é restrito a ambiente de impressão. E, do ponto

de vista da produção de material para web, é preciso apenas ter ciência da

existência dele, para evitar, inadvertidamente, enviar material para web nesse

formato. O resultado do uso de imagens CMYK na web são cores levemente

distorcidas, como tons escuros ou claros em demasia.

A representação da mistura do CMYK pode ser visualizada na Figura 2.2, e

mostra como o esquema de mistura é diferente do RGB. Como o CMYK é

voltado para sistemas de impressão, é necessário partir da cor branca, a base

das folhas em impressão. E, desse ponto, é necessário subtrair as tonalidades

até chegar à cor preta. Por isso, o CMYK é conhecido como um sistema

baseado em subtração de cores.

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

1.2.2 Capacidade de Reproduzir Cores

A quantidade de tonalidades que podemos reproduzir em imagens é

determinante para controlar o tamanho dos arquivos. No nosso caso, iremos

usar imagens que são classificadas como tendo 8-bits ou 24-bits de

capacidade.

http://pt.wikipedia.org/wiki/Ficheiro:SubtractiveColorMixing.png

14


Competência 01

O que isso significa? Para fins de reprodução de cores, é possível identificar a

quantidade de cores que um formato de imagem pode reproduzir pelo

número de bits.

É preciso recordar que dados em ambientes digitais são sempre armazenados

em formato binário, mesmo que não tenhamos contato com esse tipo de

informação no nosso cotidiano. Para entender a quantidade de cores que

cada tipo de imagem é capaz de reproduzir, precisamos elevar o número dois

(valores binários) à potência equivalente aos bits.

Por exemplo, uma imagem com 8-bits é capaz de exibir 28 cores. Isso resulta

em 256 tonalidades diferentes para uma cor em 8-bits. Já uma imagem em

24-bits é capaz de exibir 224 cores, que é equivalente a 16.777.216

tonalidades. Sim, são mais de 16 milhões de cores em comparação a apenas

256 das imagens em 8-bits.

Toda essa quantidade de cores apresenta impacto em duas características das

imagens:

Armazenamento: São necessários arquivos maiores para armazenar

grandes quantidades de cores.

Qualidade visual: Imagens em 24-bits são mais indicadas para armazenar

imagens de qualidade fotográfica.

1.3 Efeitos e Animação

Para imagens na web, podemos usar, basicamente, um efeito importante, que

é o uso de pixels transparentes. Os chamados canais alpha em imagens

permitem criar diversos tipos de composições diferentes para web. Por

exemplo, existem muitos ícones em painéis de navegação de web sites que

utilizam pixels transparentes para conseguir integração perfeita com o fundo

do layout.

15


Competência 01

Apesar de conhecer a existência desse tipo recurso, é necessário escolher um

formato de imagem compatível com ele para que possamos aproveitar as

vantagens de ter pixels transparentes em imagens. Nos próximos tópicos, já

abordaremos alguns desses formatos, que suportam os chamados canais

alpha.

Para completar a lista de efeitos existentes em imagens na web, podemos

utilizar, também, animações em imagens. As animações nada mais são do que

uma sequência de imagens exibidas de modo a gerar a ilusão de movimento.

Nos dias de hoje, é mais difícil encontrar projetos ou propostas de interfaces

na web que utilizem imagens para fins de animação, pois tecnologias como o

HTML 5 permitem integrar vídeos em web sites de maneira muito fácil.

1.4 Formato JPG

Um dos formatos de imagem mais famosos e utilizados na web, o JPG, foi

criado pelo Joint Photographic Group, com o objetivo de proporcionar a

fotógrafos profissionais uma maneira de armazenar imagens com qualidade e

tamanho reduzidos. A compressão das imagens JPG é Lossy, o que significa

que todos os dados salvos nesse formato tiveram informações descartadas

para que fosse possível reduzir o tamanho dos arquivos.

Essa redução de tamanho, essa compressão dos arquivos acontece por meio

da criação de blocos de pixels, que tentam agrupar informações comuns nas

imagens. O algoritmo de compressão do JPG é muito bom, sendo capaz de

gerar e comprimir de maneira significativa um arquivo de imagem, a custo da

sua qualidade visual.

Sobre as cores, o JPG tem suporte para cores em 24-bits, tanto na escala RGB

como CMYK. É possível usar 8-bits de cor, quando usamos apenas em tons de

cinza para a imagem. A Figura 2.3 mostra uma comparação entre diferentes

níveis de compressão em arquivos no formato JPG. Quanto maior é o nível de

compressão, menos qualidade de imagem se tem para representar os pixels.

Atenção:

A compressão de imagens em JPG é

identificada por uma escala que vai de 0% até 100% de

qualidade nas imagens.

16


Competência 01

A imagem fica borrada, com blocos visíveis resultantes do algoritmo de

compressão.

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

1.4.1 Quando Usar o JPG?

O uso dos arquivos JPG é indicado nas seguintes situações na web:

Arquivos de imagem com grande quantidade de cores;

Armazenar fotografias na web;

Arquivos que precisam ter tamanho reduzido.

1.4.2 Quando Não Usar o JPG?

Apesar de excelente qualidade, existem situações em que não é indicado usar

arquivos JPG:

Arquivos originais de layouts para web;

Imagens com cores sólidas;

Imagens com tipografia.

Saiba Mais:

Recomendação de leitura: Para saber

mais sobre os arquivos JPG e complementar



www.infowester.com/imagens.php

www2.dcc.ufmg.br/disciplina

s/ii/ii05-1/seminario/jpeg.

pdf

www.slideshare.net/sergioviniciuss/apresentac

ao-jpeg-smu

www.slideshare.net/creaktiv

e/codificacao-lossy-do-jpeg

Arquivo RAW e JPG

(31:18) - http://www.youtube.com/watch?v=

vTzSu_S33Qg

http://pt.wikipedia.org/wiki/Ficheiro:Texel_Landscape.jpg

http://www.infowester.com/imagens.php


http://www2.dcc.ufmg.br/disciplinas/ii/ii05-1/seminario/jpeg.pdf





http://www.slideshare.net/sergioviniciuss/apresentacao-jpeg-smu




http://www.slideshare.net/creaktive/codificacao-lossy-do-jpeg




17


Competência 01

A última situação ilustra bem um contexto em que o JPG não é indicado para

armazenar os arquivos de imagem. Quando representamos pixels com cores

sólidas, sem gradientes, o algoritmo do JPG tende a borrar as áreas de

transição entre duas cores diferentes. Esse é um efeito desejado quando se

precisa criar blocos para compressão de dados, mas pode atrapalhar a

representação desse tipo de imagem.

Na Figura 2.4, podemos perceber bem essa dificuldade do algoritmo dos

arquivos JPG em representar cores sólidas. O lado direito da imagem mostra

as bordas da imagem borradas em decorrência da existência de bordas com

cores sólidas.

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

1.5 Formato GIF

Os arquivos no formato GIF já são bem diferentes dos JPG, pois, em primeiro

lugar, é um formato de imagem que utiliza algoritmos Lossless, permitindo

armazenar imagens sem nenhum tipo de perda em relação aos dados e pixels.

Os arquivos GIF são bem antigos em termos de uso na internet, remontam

aos primórdios do uso de imagens na web.

Mas, apesar de serem bem conhecidos entre produtores de conteúdo para

Web, os arquivos do tipo GIF não são hoje usados com a mesma frequência de

antigamente. Existem vários motivos que fizeram do GIF um formato menos

18


Competência 01

usado na Web. O mais evidente foi uma disputa pela patente do software. A

Unisys foi a empresa que adquiriu os direitos de uso sobre essa patente. A

partir daí, qualquer desenvolvedor ou empresa interessado em adicionar

suporte à criação de arquivos GIF em seus softwares, precisava pagar para a

Unisys. O algoritmo em questão é o LZW, que é usado em outros sistemas de

compressão, além do GIF.

O resultado dessa ação foi muito negativo para o formato GIF, pois surgiu o

formato PNG, que será abordado no próximo tópico. Hoje, esse tipo de

disputa não é mais problema, já que em 2003 a patente expirou, sendo de

domínio público atualmente.

Com relação às cores, os arquivos GIF suportam apenas 8-bits, resultando em

paletas de 256 cores no máximo. Para representar imagens com qualidade

fotográfica os arquivos em GIF não são a melhor opção, resultando em

fotografias com níveis altos de granulação devido à limitação das cores. A

restrição de cores é uma vantagem para os arquivos em GIF quando

precisamos representar imagens com cores sólidas apenas. A exibição de

elementos tipográficos, como fontes e palavras nas imagens, é um exemplo.

Mas será que essa é a única vantagem dos arquivos GIF? O uso do GIF em

layouts que necessitam de boa definição em termos de imagem com cores

sólidas é apenas um dos pontos positivos do GIF. Se formos comparar com os

arquivos JPG, ainda teremos o suporte ao canal alpha em imagens GIF.

A transparência não é o único diferencial do GIF, pois ainda temos a

possibilidade de trabalhar com animações nos arquivos GIF. O termo "GIF

animado" é muito comum em ambientes Web, sendo sinônimo de imagens

animadas. As soluções de animação com GIF sofrem um pouco quando é

necessário reproduzir elementos com grande quantidade de cores, mas são

uma das formas mais eficientes de apresentar textos e elementos animados

na Web, pois não necessitam de plug-ins ou softwares adicionais, nos

Atenção:

Com esse tipo de arquivo é possível

utilizar pixels transparentes, permitindo a

organização de arquivos GIF em

várias camadas de layouts na web.

19


Competência 01

navegadores, para exibição do seu conteúdo, como acontece com animações

geradas usando Flash ou Silverlight.

Um exemplo da representação de imagens usando GIF pode ser conferido na

Figura 2.5 em que a fotografia da flor foi salva em GIF. O resultado é a perda

de definição na imagem devido à limitação de cores.

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

1.5.1 Quando Usar Arquivos GIF?

Portanto, os arquivos GIF são indicados para uso quando:

Precisamos representar imagens com cores sólidas;

Precisamos criar layouts compostos usando pixels transparentes;

É necessário criar animações com base em imagens;

É preciso armazenar arquivos sem perda de informações, mas com limite

de cores estipulado pela paleta do GIF.

Saiba Mais:

Recomendação de leitura: Para saber

mais sobre os arquivos GIF e complementar



www.infowester.com/imagens.

php

http://pt.wikipedia.org/wiki/Graphics_Interch

ange_Format

http://pt.wikipedia.org/wiki/Ficheiro:Sunflower_as_GIF.gif




http://pt.wikipedia.org/wiki/Graphics_Interchange_Format




20


Competência 01

1.6 Formato PNG

Para finalizar a nossa lista de formatos usados na web, temos o PNG, que

agrega diversos pontos positivos em relação ao JPG e ao GIF. A motivação

para a criação dos arquivos PNG assurgiu a partir da questão das patentes dos

arquivos GIF usando algoritmos LZW. Para competir com o GIF, o PNG utiliza

compressão do tipo Lossless, semelhante à usada no GIF, permitindo que os

arquivos salvos nesse formato mantenham todos os seus dados.

A primeira grande vantagem do PNG em relação ao GIF é que o mesmo

suporta armazenar cores em 8 e 24 bits, permitindo criar arquivos

relativamente pequenos, para situações em que é preciso representar apenas

cores sólidas em 8-bits. Também, podemos utilizar as 16 milhões de cores dos

arquivos em 24-bits para armazenar imagens com qualidade fotográfica.

Ainda é possível representar pixels transparentes com arquivos no formato

PNG. É só mesclar a qualidade fotográfica das cores em 24-bits com pixels

transparentes, coisa que é impossível de ser realizada com arquivos GIF ou

JPG. Esse é um dos grandes diferenciais dos arquivos PNG, e faz com que ele

seja a escolha da maioria dos produtores de conteúdo para a web quando é

preciso criar ícones e outros elementos com grande riqueza de cores e

perfeitamente integrados em layouts.

Tudo isso, somado ao fato da compressão lossless, faz os arquivos PNG serem

pouco indicados para transmissão de imagens na web, pois os mesmos

tendem a ficarem maiores do que as imagens em JPG, mas se a transparência

dos pixels for fator determinante, o PNG é a melhor opção.

As figuras 2.6 e 2.7 mostram exemplos de uso do PNG para representar

imagens com grande quantidade de cores e que ainda possuem o plano de

fundo transparente, para que possam ser integradas em interfaces.

Atenção:

Dentro do contexto de layouts para a

web, o uso de arquivos PNG é

muito comum na representação de

ícones.

21


Competência 01

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

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

1.6.1 Quando Usar Arquivos PNG?

Depois de analisar as características dos arquivos PNG, podemos dizer que é

indicado usar PNG nas seguintes situações:

Quando é preciso armazenar arquivos de imagem sem perda de

informações;

Quando precisamos criar layouts que dependem de pixels transparentes;

Quando é necessário enviar imagens pela web com fidelidade em termos

de cor e sem perda de informações.

Saiba Mais: Recomendação de leitura: Para saber

mais sobre os arquivos PNG e complementar



www.infowester.com/imagens.php

http://pt.wikipedia.org/wiki/PNG

http://pt.wikipedia.org/wiki/Ficheiro:Truck_icon.png

http://pt.wikipedia.org/wiki/Ficheiro:Miro_icon.png





22


Competência 02

2.COMPETÊNCIA 02 | FORMATAR IMAGENS PARA UTILIZAÇÃO NA

WEB OU EM APLICATIVOS DE EDITORAÇÃO DE TEXTOS OU

APRESENTAÇÕES

Agora, que você já conhece os principais formatos de imagem utilizados na

web, como estudamos na competência 01 dessa disciplina, podemos,

efetivamente, "colocar a mão na massa", na nossa segunda competência e,

efetivamente, manipular imagens. Caso você tenha sentido falta de algo mais

prático em nossa primeira semana, pode ficar tranquilo, pois a segunda

semana será totalmente pautada por prática, inclusive, com vários vídeos que

devem ser consultados, em paralelo, com o seu caderno de estudos.

Para os nossos exercícios práticos, iremos utilizar um software muito

conhecido entre os adeptos do software livre que é o GIMP. O nome do

software é um acrônimo para a frase GNU Image Manipulation Program.

Dentro do universo dos softwares livres, o GIMP é o substituto natural para o

Photoshop, que é a ferramenta comercial utilizada por muitos profissionais e

artistas, ao redor do mundo, para editar, montar e finalizar trabalhos

relacionados com imagens.

Nesse ponto, você pode estar se perguntando: é possível substituir

plenamente o Photoshop pelo GIMP? Em boa parte das tarefas diárias de

edição é possível, sim, substituir plenamente o Photoshop pelo GIMP.

O GIMP apresenta inúmeras vantagens para quem resolve escolher o software

como ferramenta:

É gratuito;

É pequeno (70 MB);

É multiplataforma (Windows, Linux e Mac).

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

23


Competência 02

maneira gratuita dos seguintes endereços:

http://www.gimp.org

http://portableapps.com

O último endereço apresenta, inclusive, uma opção de instalação do GIMP

que pode ser usada no formato portátil, sendo executado diretamente de um

Pendrive ou HD Portátil. Nesse caso, o fato do software ser executado na

versão portátil, é bem diferente das versões portáteis "alternativas" de

softwares comerciais, que são ilegais. Trata-se, aqui, de uma versão

totalmente legalizada do GIMP.

Já existem versões mais recentes do GIMP como a 2.8.10, mas essas

representam geralmente apenas correções de bugs e segurança. A interface e

ferramentas abordadas ao longo da disciplina permanecem as mesmas.

2.1 Formatando Imagens com o GIMP

Os próximos tópicos já envolvem os processos de formatação das imagens

para uso na web, documentos ou apresentações. Antes de passar para a parte

prática, é importante listar e explicar quais são os tipos de formatação que

são necessários para esse tipo de contexto.

Abaixo, a lista de algumas das edições e formações mais usadas em imagens:

Formatação de dimensões: Envolve o redimensionamento da imagem

para tamanhos compatíveis com a mídia final, em que a mesma será usada.

Por exemplo, você pode ter uma fotografia tirada com 5000 por 3000 pixels,

que pode ficar excelente para impressão, mas para envio por e-mail acaba

ficando muito grande. Para web esse tipo de edição é fundamental, pois nos

layouts e web sites o espaço para imagens costuma ser bem definido e

pequeno.

Saiba Mais: Visite o GIMP Brasil,

que é uma comunidade de

usuários brasileiros de GIMP em

www.gimpbrasil.org/

24


Competência 02

Transformações: Algumas imagens precisam de transformações simples

para se encaixar em contextos específicos como, por exemplo, o

espelhamento da imagem na horizontal ou vertical. Outro tipo comum de

transformação é a rotação da imagem para ajustar a orientação de algo que

está presente na imagem, ou mesmo do conteúdo em espaços definidos de

layouts.

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

indesejadas que precisam ser removidas, e nesse tipo de situação é

perfeitamente possível fazer um corte na imagem para ajustar o que se deseja

exibir, e excluir as partes desnecessárias.

Cores: As cores de uma imagem podem não representar, com exatidão, o

que desejamos para uso em layouts na web ou apresentações, e por isso,

algumas vezes é necessário alterar detalhes como brilho, contraste, saturação

da cor e outros.

Transparência: A natureza quadrada ou retangular das imagens nem

sempre é suficiente para uso em apresentações e layouts na web. Com o uso

de ferramentas de seleção nos softwares de edição, é possível excluir partes

específicas de uma imagem, e salvando o arquivo em formatos que suportam

canais alpha, podemos gerar uma imagem que aparenta ter moldura irregular

e não mais quadrada ou retangular.

Alteração no tipo de arquivo: Os diferentes tipos de formato de arquivo

que aprendemos na semana passada, aparecem aqui, novamente, mas agora

veremos na prática, como é possível salvar uma imagem em diferentes

formatos.

Esses são os tópicos que iremos abordar na formatação de imagens para web,

apresentações e documentos. Algumas situações exigem que mais de uma

tarefa de edição seja aplicada na imagem. Para isso, basta misturar as

ferramentas abordadas para gerar o efeito desejado. Por exemplo, se uma

imagem precisar ser:

Redimensionada;

Rotacionada em 90 graus no sentido horário;

25


Competência 02

Ter partes recortadas.

Tudo isso pode ser aplicado ao mesmo tempo em imagens no GIMP, basta

utilizar as ferramentas em sequência.

2.2 Interface do GIMP

Antes de partir para o trabalho com as imagens, é interessante conhecer um

pouco da interface do GIMP. Depois de fazer o download do software ou

utilizar as versões instaladas nos laboratórios dos polos, podemos começar a

usar esse software.

A instalação do software é simples e não requer nenhum tipo de configuração

especial. Depois que o GIMP é aberto pela primeira vez, você encontra a

interface exibida na Figura 3.1.

Figura 3.1 - Interface do GIMP Fonte: O autor

Na interface padrão do GIMP as janelas são flutuantes e podem deixar

algumas pessoas confusas. Por isso, iremos adotar o modo de janela única do

26


Competência 02

software. Isso é realizado no menu Janela -> Modo janela única, como

mostram as figuras 3.2 e 3.3.

Figura 3.2 - Menu Janela Fonte: O autor

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

27


Competência 02

Com o modo de janela única, teremos todas as janelas agrupadas em uma

única janela, facilitando o processo de edição. E, para a explicação de como

funciona a interface do GIMP, você deve agora assistir aos primeiros vídeos no

ambiente para essa competência, que é chamado de Interface GIMP e Idioma

do GIMP.

Depois de assistir aos vídeos, retorne para esse ponto no caderno para que

possamos continuar.

A explicação sobre o idioma da interface do GIMP é importante, pois em

alguns casos o software acaba erroneamente configurando a linguagem para

o português de Portugal. Se você não tem problemas em chamar arquivos de

ficheiros ou seleções e selecções, pode manter os ajustes de linguagem, mas,

caso contrário, é recomendável mudar a linguagem para português do Brasil.

2.3 Controle do ZOOM

A primeira tarefa para a qual devemos focar a nossa atenção na interface do

GIMP quando abrimos uma imagem é a manipulação do Zoom. Dependendo

do tamanho em pixels da imagem escolhida para edição dentro do GIMP,

pode ser necessário ajustar o quanto dessa imagem queremos visualizar na

tela. Isso pode ser realizado com teclas de atalho e opções na interface.

Para aprender a usar esse recurso, você deve assistir ao vídeo, identificado no

ambiente virtual com o tema sobre Zoom.

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

Figura 3.4.

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

50604751 Interface do GIMP -

https://vimeo.com/

50604753

https://vimeo.com/50604751


28


Competência 02

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

2.4 Dimensões das Imagens

O ajuste das dimensões nas imagens é a primeira tarefa efetiva que iremos

abordar dentro do GIMP. Para entender a importância desse tipo de alteração

para o uso de imagens em layouts para web, apresentações e documentos,

entender é necessário compreender também o que representam as

dimensões das imagens.

As imagens baseadas em pixels que visualizamos todos os dias nos nossos

monitores, celulares e até mesmo no cinema são formadas por uma grande

matriz de pequenos pontos, que são os pixels. A quantidade de pixels na

29


Competência 02

horizontal (width) e na vertical (height) determinam as dimensões dessas

imagens. Se você nunca teve experiência alguma com manipulação de

imagens, basta fazer uma analogia com a resolução dos monitores que

usamos todos os dias. Você sabe qual é a resolução do seu monitor? Talvez

sejam 1440 por 960 pixels ou mesmo nos monitores mais modernos 1920 por

1080 pixels, que é a chamada resolução FullHD usada em televisores de LCD,

LED e Plasma modernos.

Observação: Essas resoluções são sempre escritas com o valor da largura

primeiro, seguido pela altura.

A quantidade de pixels resultante de uma fotografia digital também é medida

da mesma forma, e temos com isso inclusive uma unidade de medida muito

usada por fabricantes que é o megapixel. Por exemplo, uma imagem com 10

megapixels tem 3872 por 2592 pixels sendo bem superior ao tamanho de

monitores e televisores comerciais.

Todas essas imagens, com grandes tamanhos, precisam, em algum momento,

ter suas dimensões ajustadas para se enquadrar em projetos ou layouts,

principalmente, dentro do contexto da web. O motivo para isso é bem

simples: quanto mais pixels uma imagem possui, maior será o arquivo

necessário para armazenar essa imagem em disco e consequentemente

transferir pela internet.

Os tamanhos das imagens na web são bem menores do que esses que

comentamos e isso fica bem claro quando consultamos a tabela da Abraweb

(Associação brasileira de Web Designers) para padronização de publicidade

em web sites.

Na tabela, encontramos resoluções como 250 por 250 pixels, que é bem

menor do que as citadas anteriormente. Nesse tipo de situação, é necessário

redimensionar as imagens para fazer com que as mesmas sejam reduzidas

para que se enquadrem nesse tipo de resolução.

Saiba Mais: Para saber mais

sobre como funcionam os megapixels,

recomendo a leitura do seguinte documento:

www.clubedohardware.com.br/artigos/Tudo-o-Que-Voce-

Precisa-Saber-Sobre-

Megapixels/159

www.abraweb.com.br/banners.php

30


Competência 02

Como podemos redimensionar uma imagem no GIMP? Isso é feito no menu

imagem, na opção redimensionar imagem, como mostra a Figura 3.5.

Figura 3.5 - Redimensionando imagens Fonte: O autor

A explicação completa sobre o funcionamento dessa ferramenta, você

encontra no vídeo chamado Redimensionamento de imagens, disponível no

ambiente virtual.

Essa é uma das tarefas mais comuns que podemos realizar no GIMP e, ao

mesmo tempo, também é a mais útil, pois, geralmente, as dimensões de uma

imagem precisam ser ajustadas para uso na web, apresentações ou

documentos.

2.5 Exclusão de Camadas

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

Redimensionando Imagens:




31


Competência 02

recursos do GIMP, como a adição de textos nas imagens. Já que o uso de

publicidade na web foi citado como uma das aplicações práticas do recurso,

podemos já trabalhar com esse tipo de criação em mente. Os recursos para

trabalhar, mesmo que resumidamente, com imagens são explicados no vídeo

chamado Textos e camadas, no ambiente virtual.

O vídeo mostra um pouco sobre como funciona a adição de textos e, depois,

como é possível remover esses textos das imagens excluindo a camada

resultante.

Para saber mais sobre como funciona o sistema de camadas do GIMP, você

deve assistir ao seguinte vídeo que está hospedado fora do ambiente virtual.

O vídeo não foi produzido para esse curso, mas explica bem o funcionamento

e utilidade das camadas.

2.6 Transformações em Imagens

As imagens, algumas vezes, precisam de outros tipos de ajustes, além do

redimensionamento. Para trabalhar com esse tipo de transformação nas

imagens, usamos o menu imagem e a opção transformações no GIMP como

mostra a Figura 3.6.

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

50604755



32


Competência 02

Figura 3.6 - Transformações Fonte: O autor

Nesse caso, as transformações disponíveis para as imagens são as seguintes:

Espelhamento horizontal e vertical;

Rotação da imagem.

Os procedimentos necessários para usar esses recursos no GIMP são

explicados no vídeo, disponível no ambiente virtual, chamado de

transformações. (https://vimeo.com/50608019)

2.7 Corte de Imagens

As imagens que recebemos para edição podem, eventualmente, possuir

partes indesejadas ou áreas específicas que devem ser exibidas em

33


Competência 02

apresentações. Nesse tipo de situação, é interessante cortar essas imagens,

para exibir somente o que se deseja. Em termos de edição para imagens, a

técnica de corte é conhecida como Crop, e podemos realizar esse corte na

imagem usando a ferramenta equivalente do GIMP chamada de "Ferramenta

corte" como mostra a Figura 3.7.

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

A explicação sobre o funcionamento da ferramenta pode ser encontrada no

ambiente virtual, usando o vídeo chamado de Corte em imagem.

Depois de cortada, a imagem pode ser editada e finalizada, com outras

ferramentas do GIMP. É interessante que esse corte, caso necessário, seja

realizado antes do redimensionamento da imagem, para evitar problemas

com poucos pixels para a largura ou altura da imagem.

2.8 Cores

As cores de uma imagem podem precisar de ajustes, assim como acontece

com suas dimensões. E isso também pode ser objeto de ajustes dentro do

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

50608020

34


Competência 02

GIMP. Existe um menu específico para fazer ajustes em cores que é o menu

cor mostrado na Figura 3.8. Nesse menu, é possível encontrar opções para

fazer ajustes diversos nas cores de uma imagem como:

Ajuste de brilho;

Ajuste de contraste;

Balanço de cor;

Saturação;

Luminosidade.

Figura 3.8 - Menu cor Fonte: O autor

35


Competência 02

Assim como aconteceu com outros parâmetros relacionados com as

ferramentas do GIMP, a explicação sobre como usar os ajustes de cor do

GIMP está disponível no ambiente virtual, no vídeo chamado de Ajustes de

cor.

Caso você não tenha experiência com esse tipo de detalhe estético das

imagens, é melhor não fazer alterações drásticas nas imagens, para evitar ter

como resultado imagens com cores ou modificações cromáticas. Sempre salve

as imagens que recebem modificações nas cores, com outros nomes, para ter

acesso às imagens originais posteriormente.

2.9 Transparência

O último tipo de ajuste que faremos em termos de edição nas imagens é

muito útil nos casos do uso de fotografias, em apresentações e documentos.

Algumas vezes, é preciso aplicar uma imagem em layouts, mas com formas

diferentes do tradicional quadrado ou retângulo, o padrão das imagens. Nesse

tipo de situação, é perfeitamente possível e útil excluir partes da imagem

deixando a área em que os pixels foram excluídos com transparência.

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

desses formatos suportavam canais alpha.

Para aprender como gerar esse tipo de imagem no GIMP para uso em

apresentações, você deve assistir ao vídeo chamado Transparência em

imagens, disponível no ambiente virtual.

No final, você será capaz de gerar imagens para aplicar em apresentações no

PowerPoint ou Libre Office como mostra a Figura 3.9.

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

50608055

Atenção: Esse tipo de

modificação nas imagens deve ser

aplicado com cuidado, pois

envolve a manipulação de

pixels usando a sua percepção sobre as cores, luminosidade

e contraste da imagem.

Atenção: PNG é o formato

mais indicado para representar

fotografias em apresentações que precisem de algum tipo de canal alpha.

Transparência em Imagens:

www.vimeo.com/5553140



36


Competência 02

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

2.10 Salvando Imagens

O passo final de qualquer edição de imagens no GIMP é a criação de um

arquivo de imagem com o resultado do processo de edição. Para criar novos

arquivos de imagem, basta usar o menu Arquivo e a opção exportar para

gerar imagens nas extensões JPG, GIF ou PNG como mostra a Figura 3.10.

37


Competência 02

Figura 3.10 - Exportando imagens Fonte: O autor

E nos casos em que você deseje armazenar uma imagem com os recursos

usados no GIMP como camadas, textos editáveis e outros elementos, o

formato indicado é o XCF. Esse formato é o que o GIMP usa nativamente para

armazenar a estrutura das imagens e permitir edições futuras. Nos casos em

que você deseje ter a possibilidade de editar os textos, camadas e outros

elementos das imagens, é recomendável, salvar os arquivos em XCF e também

no formato de saída seja ele JPG, GIF ou PNG.

O vídeo chamado “Exportando e salvando imagens” mostra todos os detalhes

sobre como é possível salvar essas imagens no GIMP, e você encontra esse

vídeo no ambiente virtual.

Exportando Imagens:

www.vimeo.com/562313

38


Competência 03

3.COMPETÊNCIA 03 | TÉCNICAS DE EDIÇÃO E MONTAGEM DE

LAYOUTS PARA WEB COM BASE EM IMAGENS

A terceira parte da nossa disciplina aborda a criação de peças gráficas para a

Web usando o que já aprendemos sobre manipulação de imagens com o

GIMP. O conteúdo que já estudamos é suficiente para trabalhar com edição

de imagens para a Web? Apesar de já termos abordado uma boa quantidade

de temas, ainda é necessário somar mais alguns tópicos a nossa lista de

assuntos, para que você tenha mais segurança na edição e manipulação de

imagens para a web.

Por isso, ao mesmo tempo em que conhecemos as características desses

layouts para a web, também aprenderemos mais sobre as ferramentas que o

GIMP nos proporciona, e que estão disponíveis na maioria dos editores de

imagem. Isso é importante, pois habilita você a trabalhar com praticamente

qualquer software que seja capaz de criar layouts ou montagens para a web. E

nesse caso existem muitas opções no mercado como o Photoshop e o

Fireworks, ambos da Adobe e que também são usados para esse tipo de

propósito.

Antes de partirmos para a parte prática, é interessante abordar o papel das

imagens dentro do ambiente web nos dias atuais. Há poucos anos, era

compreensível utilizar imagens como base para criação de interfaces para a

web. O uso de elementos visuais como sombras, reflexos e outros era o

máximo em termos de montagem de layouts para a web.

Com o passar dos anos, o uso de imagens como base para esse tipo de criação

acabou sendo substituído por técnicas mais modernas e baseadas em

codificação. Hoje, é possível utilizar muitos desses efeitos como sombras,

reflexos e principalmente controle de formas usando o CSS3. O uso intenso de

imagens acaba sendo prejudicial para web sites no que concerne também à

melhora desses sites, para mecanismos de busca. Como os mecanismos de

busca baseiam seus índices e classificação muito em informações textuais, o

CSS3: Entenda o que é o CSS3 lendo esses

textos: http://pt.wikipedia.

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

_Style_Sheets

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

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

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



39


Competência 03

uso de imagens é encarado por muitos especialistas em otimização como

sendo prejudicial para o web site como um todo.

A lista a seguir mostra situações em que é recomendado utilizar imagens:

Exibir publicidade;

Mostrar áreas de layout que são impossíveis de reproduzir com CSS3;

Adicionar fotografias no layout de web sites;

Planejar o layout para conversão em CSS3.

Para completar a lista, agora algumas situações em que não devemos utilizar

imagens:

Menus de navegação;

Layouts com muitos efeitos baseados apenas em imagens;

Utilizar imagens para construir interfaces.

Para casos especiais como hotsites publicitários ou divulgação de produtos e

serviços, é perfeitamente aceitável que se direcione a criação de layouts para

uso mais intenso de imagens, mas a longo prazo isso pode ser prejudicial para

o web site. Como o maior desafio na internet é atrair visitantes para os web

sites, a possibilidade de trazer pessoas por meio de mecanismos de busca,

que é o chamado tráfego orgânico, acaba moldando o mercado de trabalho e

os padrões usados para construir web sites.

3.1 Layouts para Web

E para fazer com que os nossos conhecimentos relacionados à produção de

conteúdo para web estejam alinhados com as exigências do mercado, o foco

da terceira parte da disciplina será, exatamente, na construção de dois

artefatos muito usados nos dias de hoje na web. O primeiro é um banner

publicitário, que mescla imagens com informações de texto, para ser inserido

dentro de web sites. A segunda peça é o planejamento de um layout, usando

Atenção: Isso significa que não devemos usar

imagens? Claro que não! O significado

disso é simples: você deve usar imagens apenas

quando for indispensável para

o projeto. Por exemplo, a exibição de uma fotografia ou a criação de um

banner para anúncios. Esses são casos clássicos em

que o uso de imagens é

recomendado.

40


Competência 03

recursos do GIMP, para posterior transformação desse layout em uma

estrutura baseada apenas em CSS.

O planejamento de layouts, com base em imagens, é amplamente usado

entre designers de interface, pois permite o nível de controle e resposta visual

imediata para quem está executando a interface. Quando todo o trabalho é

gerado apenas com os códigos do CSS, a resposta visual é limitada, pois o

designer precisa primeiro escrever o código para depois visualizar o resultado.

Caso você ainda não conheça o CSS3, existem diversos tutoriais e dicas na

própria web que mostram o poder desse recurso em termos de representação

visual. A seguir, existem alguns endereços com recursos interessantes para

quem quiser expandir ou conhecer mais sobre o assunto.

3.2 Montando Banners para Web

O nosso primeiro projeto que aplica o que conhecemos em relação ao GIMP

na produção de artefatos para a web é a criação de um banner. Esse banner

tem como objetivo mostrar os seguintes recursos do GIMP que devem

permitir que você crie outras peças gráficas semelhantes para a web:

Formatação de textos;

Uso de camadas;

Aplicação de efeitos;

Desenho de formas;

Ferramentas de pintura;

Dimensionamento de imagens.

Todos esses conhecimentos são necessários para conseguir gerar o banner

que é exibido já na sua forma final na Figura 4.1.

CSS3: www.maujor.com/t

utorial/css3-modulo-template-

layout.php www.underworldmagazines.com/12-

awesome-css3-tutorials-for-you-to-

try/

41


Competência 03

Figura 4.1 - Banner finalizado Fonte: O autor

3.2.1 Dimensões do Banner

A primeira coisa que precisamos fazer para criar o nosso banner é definir o

seu tamanho. As dimensões de peças publicitárias na web devem seguir o

padrão já apresentado anteriormente e que está bem documentado no site

da Abraweb. Essas dimensões são usadas pelos maiores provedores de

publicidade online como o Google Adwords, OpenX e outros. Isso significa

que, ao escolher um desses formatos, você estará criado uma peça

publicitária que pode ser usada em praticamente qualquer layout.

Como essas dimensões são padronizadas, a maioria esmagadora das

interfaces na web reserva espaços para banners que são compatíveis com ao

menos uma dessas dimensões. E para nosso banner, a escolha da dimensão é

o do anúncio do tipo large rectangle com 336 pixels de largura por 280 pixels

de altura. Esse é um tipo de banner comum em layouts na web, e que oferece

um espaço bem razoável para apresentar elementos visuais.

Então, para começar a fazer o banner, é necessário abrir o GIMP e criar um

novo arquivo com dimensões de 336 por 280 pixels, como mostram as figuras

3.2 e 3.3.

42


Competência 03

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

43


Competência 03

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

O espaço de cor deve ser mantido no formato RGB, pois a nossa imagem será

usada em dispositivos de vídeo. Assim como a resolução para imagens, que

deve permanecer em 72 dpi.

3.2.2 Fotografia como Fundo

Com o banner devidamente dimensionado, podemos agora trabalhar na

adição da fotografia que representará o fundo do banner. Para adicionar a

imagem é interessante criar uma camada exclusiva para essa imagem. O GIMP

possibilita criar automaticamente uma camada para a imagem, caso a mesma

seja copiada e colada de outro arquivo. Então, o primeiro passo é abrir o

arquivo da imagem que é identificada como IMG_banner.jpg como mostra a

Figura 3.4.

44


Competência 03

Figura 3.4 - Imagem original Fonte: O autor

Essa imagem está com uma dimensão muito maior do que a que precisamos

para trabalhar no banner. Por isso, a primeira coisa a fazer antes de copiar e

colar a mesma no nosso banner é redimensionar a mesma, para que a sua

largura seja de no máximo 336 pixels. No menu imagem, escolha a opção

redimensionar imagem, como mostra a Figura 3.5.

Figura 3.5 - Redimensionar imagem Fonte: O autor

45


Competência 03

E determine que a mesma tenha largura de 336 pixels, como mostra a Figura

3.6.

Figura 3.6 - Configurando o tamanho da imagem Fonte: O autor

Com imagem na dimensão correta, podemos selecionar a mesma com a tecla

CTRL+A ou então acionando o menu Seleção – Selecionar, tudo como mostra

a Figura 3.7.

46


Competência 03

Figura 3.7 - Selecionar tudo Fonte: O autor

Com a imagem devidamente selecionada, você pode acionar um dos atalhos

mais usados no mundo da informática, o famigerado CTRL+C. E com a imagem

copiada para a área de transferência do seu computador, podemos voltar

para o nosso projeto, com o menu janela, como mostra a Figura 3.8.

Figura 3.8 - Alternando entre projetos Fonte: O autor

47


Competência 03

Agora, escolha a opção colar como nova camada. Isso fará com que a imagem

seja colada no nosso banner, como se fosse uma nova camada do GIMP já

configurada. O menu é mostrado na Figura 3.9 e o resultado do processo na

Figura 3.10.

Figura 3.9 - Opção para colar Fonte: O autor

48


Competência 03

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

Para mover a imagem no banner, podemos usar a ferramenta mover do

GIMP, que é exibida na Figura 3.11.

49


Competência 03

Figura 3.11 - Ferramenta mover Fonte: O autor

3.2.3 Adicionando Textos

O plano de fundo do banner já está configurado corretamente, e podemos

partir para a criação dos elementos textuais. Nesse caso, o objetivo é

adicionar o texto que fica na parte superior do banner. Para adicionar textos

ao nosso banner, utilizamos a ferramenta de textos do GIMP que é mostrada

na Figura 3.12.

50


Competência 03

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

Ao acionar essa ferramenta e clicar em qualquer parte da imagem, podemos

adicionar textos na nossa imagem. Antes de começar a digitar no nosso texto,

é importante configurar alguns aspectos dos caracteres usados como a fonte.

Isso pode ser realizado na barra de opções do GIMP, em que escolhemos o

tipo de fonte. Nesse caso, a fonte escolhida foi a Arial, que é uma fonte

comum, mais indicada para uso em dispositivos de vídeo, pois não apresenta

serifa. O local de seleção das fontes pode ser visualizado na Figura 3.13.

Figura 3.13 - Escolha da fonte Fonte: O autor

Saiba mais sobre

fontes com serifa: http://pt.wikipedia.

org/wiki/Serifa

51


Competência 03

No mesmo local em que alteramos a fonte, podemos também modificar

aspectos como o tamanho dos caracteres, cor e outras informações do texto.

Com tudo devidamente ajustado, podemos agora clicar no local indicado pela

Figura 3.14 e digitar o texto "Praias do Nordeste". Para fazer ajustes no

posicionamento do texto, é possível usar, a qualquer momento, a ferramenta

mover, como mostra a Figura 3.15.

Figura 3.14 - Posição do texto Fonte: O autor

52


Competência 03

Figura 3.15 - Ferramenta mover Fonte: O autor

Um aspecto interessante que deve ser notado em relação à criação de textos

no GIMP é que, ao criar textos, o resultado será a adição automática de uma

nova camada na lista de camadas. Essa nova camada permite utilizar

controles específicos sobre o texto, como mostra a Figura 3.16.

Figura 3.16 - Nova camada Fonte: O autor

53


Competência 03

3.2.4 Barra Inferior

Com o texto posicionado na parte superior do banner, podemos partir para a

criação da barra inferior do nosso banner. Essa barra inferior deve ser

desenhada na posição final, usando as ferramentas do GIMP. Esse tipo de

desenho é realizado da mesma forma na maioria dos softwares que fazem

edição de imagens, que é por meio da ferramenta de seleção. Ao delimitar

uma área na imagem, podemos adicionar cores que resultam na pintura do

espaço delimitado.

Para adicionar essa parte inferior no nosso banner, precisamos adicionar uma

nova camada que será chamada de "barra inferior", como mostram as figuras

3.17 e 3.18.

Figura 3.17 - Criando uma nova camada Fonte: O autor

54


Competência 03

Figura 3.18 - Ajustes da nova camada Fonte: O autor

A seleção dessa área, que deve ser pintada, é feita com a ferramenta lasso,

como mostra a Figura 3.19. Depois de acionar a ferramenta lasso, é necessário

marcar uma seleção parecida com a da Figura 3.20. Para fazer esse tipo de

seleção, você deve clicar e soltar o botão esquerdo do mouse, sem a

necessidade de arrastar. Para fazer uma seleção ortogonal, basta usar a tecla

CTRL ao mover o mouse que as linhas da seleção são criadas de maneira

ortogonal. Nessa seleção, você deve clicar no primeiro ponto para finalizar o

processo.

Figura 3.19 - Ferramenta lasso Fonte: O autor

55


Competência 03

Figura 3.20 - Seleção Fonte: O autor

Como resultado da seleção veremos uma forma geométrica marcada na

imagem como mostra a Figura 3.21.

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

56


Competência 03

Com a seleção realizada, podemos adicionar a cor. Tenha certeza de que a

camada que criamos para a barra inferior está selecionada e acione a

ferramenta de pintura em gradiente do GIMP, como mostra a Figura 3.22.

Essa mesma imagem mostra o tipo de gradiente que deve ser usado para

preencher a seleção, que é o chamado Deep Sea. As cores desse gradiente

utilizam azul e preto, e contrastam muito bem com a paisagem de fundo do

banner.

Figura 3.22 - Configurando o gradiente Fonte: O autor

57


Competência 03

A pintura do gradiente deve ser realizada com uma boa amplitude, Clicando

na parte superior da imagem e com o botão esquerdo do mouse pressionado,

você deve arrastar o cursor para a parte inferior do banner, como mostra a

Figura 3.23. Isso fará com que o gradiente criado seja mais suave.

Figura 3.23 - Pintura do gradiente Fonte: O autor

O resultado pode ser conferido na Figura 3.24, em que apenas a área

selecionada recebeu a pintura do gradiente.

58


Competência 03

Figura 3.24 - Resultado da pintura Fonte: O autor

3.2.5 Textos Adicionais

Agora, podemos finalizar a criação do banner, usando novamente a

ferramenta de textos do GIMP, mas, nesse caso, você já conhece o

funcionamento. O objetivo é adicionar os textos no banner para conseguir

como resultado o layout que temos na Figura 3.25.

59


Competência 03

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

Um último ajuste no nosso banner envolve o deslocamento do texto superior

para que o mesmo fique centralizado e um pouco maior do que havíamos

configurado. O resultado final é apresentado na Figura 3.26.

60


Competência 03

Figura 4.26 - Resultado final do banner Fonte: O autor

Com o banner finalizado, você pode agora exportar o arquivo no formato JPG

para usar em web sites.

3.3 Planejando Web Sites com Base em Imagens

A criação de layouts para Web no GIMP utiliza muito do que já abordamos no

desenho do banner, principalmente a parte final, em que foi elaborada uma

barra inferior para o banner. Nesse caso, os layouts para a web usam a

pintura de partes determinadas da imagem na moldura do GIMP.

Nos dias de hoje, o mais correto é usar o software de edição como base para

criação do layout, pela facilidade de poder visualizar a interface de maneira

instantânea em relação ao que é feito diretamente no código. Depois que o

layout está concluído, podemos passar o mesmo para o processo de

codificação. Outra opção é gerar um mapa de imagem em HTML diretamente

Atenção:

Nesse tipo de situação, os layouts podem tanto servir

como referência para a criação dos

web sites ou mesmo funcionar como base para a futura codificação

da estrutura usando HTML e CSS.

61


Competência 03

no GIMP, que apesar de não ser muito usado hoje em dia, pode ser a solução

para o design rápido de web sites.

Como base para o nosso estudo sobre desenho de layouts para web, iremos

trabalhar com o desenho do layout exibido na Figura 4.27.

Figura 4.27 - Layout web Fonte: O autor

62


Competência 03

layout apresenta partes bem definidas para conteúdo, logomarca, navegação

e outros elementos. Tudo foi desenhado no GIMP, usando as ferramentas de

pintura.

3.3.1 Criando a Moldura

Para começar a criar o nosso layout para web, precisamos, evidentemente,

adicionar uma nova moldura no GIMP como mostra a Figura 4.28. Depois que

acionamos a opção Arquivo -> Novo, precisamos configurar a nossa moldura

como tendo 700 pixels de largura e 850 pixels de altura. A Figura 4.29 mostra

a configuração do menu de criação.

Figura 4.28 - Criando um novo arquivo Fonte: O autor

63


Competência 03

Figura 4.29 - Configurando a moldura Fonte: O autor

3.3.2 Preparando a Área de Desenho

O GIMP oferece várias ferramentas de controle para desenho de layouts, que

facilitam muito o trabalho de qualquer designer. Entre essas opções, está a

chamada grade, que nada mais é do que um conjunto de linhas horizontais e

verticais que ajudam no desenho regular de elementos na área de desenho. É

como se fôssemos trabalhar sobre uma folha de papel “milimetrado”. Para

ajustar esse recurso extra de desenho, precisamos acionar o menu Imagem ->

Configurar Grade como mostra a Figura 4.30.

64


Competência 03

Figura 4.30 - Configurando a grade Fonte: O autor

A melhor configuração para a grade é um espaçamento de 25 pixels na

horizontal e vertical, seguidos por um tipo de linha sólido. Na cor da grade,

você deve escolher uma tonalidade cinza, como mostra a Figura 4.31.

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

65


Competência 03

Depois disso, podemos exibir a grade na área de desenho do GIMP, com a

opção do menu visualizar chamada de "Exibir Grade", como mostra a Figura

4.32. O resultado da configuração é exibido na Figura 4.33.

Figura 4.32 - Ajustes na grade Fonte: O autor

66


Competência 03

Figura 4.33 - Resultado da grade Fonte: O autor

3.3.3 - Preparando as Camadas

Com a grade devidamente criada, podemos partir para a configuração das

camadas usadas no nosso layout. É muito importante configurar e separar os

elementos da interface em camadas, pois isso permitirá no futuro que os

elementos visuais das camadas sejam editados. Portanto, sempre comece

qualquer ilustração envolvendo elementos gráficos no GIMP criando a sua

própria camada para esse elemento em particular.

A primeira camada criada deve ser chamada de "borda geral" como mostra a

Figura 4.34, sendo a camada usada para delimitar o contorno do nosso layout.

67


Competência 03

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

Antes de continuar com o desenho, é importante acionar a opção "Atrair pela

grade", como mostra a Figura 4.35, para que, ao desenhar qualquer elemento

no GIMP, o mesmo seja atraído pelas linhas da grade.

Figura 4.35 - Configurando a grade Fonte: O autor

68


Competência 03

3.3.4 Contorno do Layout

Agora, precisamos fazer a marcação de um contorno retangular ao redor da

nossa moldura, como mostra a Figura 4.36. Esse contorno é feito com a

ferramenta de seleção, em forma de quadrado do GIMP. As opções que já

acionamos em relação à grade do GIMP devem ajudar a criar a seleção de

maneira muito próxima à exibida na Figura 4.36.

Figura 4.36 - Seleção no GIMP Fonte: O autor

Essa opção de seleção não é necessariamente uma ferramenta de desenho,

por isso é necessário usar outros meios para adicionar linhas de contorno na

seleção que acabamos de realizar. O método de desenho, com base em

seleção, é muito comum em ferramentas de ilustração como o GIMP. Nesse

caso, devemos usar a opção do menu editar, chamada de "contornar seleção",

como mostra a Figura 4.37.

69


Competência 03

Figura 4.37 - Contornar seleção Fonte: O autor

A opção de contornar a seleção deve receber duas configurações, que são a

sua espessura e também a cor usada no contorno, que nesse caso deve ser

cinza como mostra a Figura 4.38. O resultado disso pode ser conferido na

Figura 4.39, com a linha de contorno delimitando a área do nosso layout.

70


Competência 03

Figura 4.38 - Configurações do contorno Fonte: O autor

Figura 4.39 - Linha de contorno Fonte: O autor

71


Competência 03

3.3.5 Pintura das Áreas do Layout

Como já conhecemos as ferramentas de desenho do GIMP com base nos

assuntos abordados na criação do banner, podemos pular alguns estágios na

elaboração do layout. O objetivo agora é criar uma nova camada, para separar

a barra superior do layout e, com essa camada selecionada, podemos marcar

uma área retangular na parte superior do layout e pintar essa área com uma

cor em gradiente. O resultado dessa pintura e configuração pode ser

visualizado na Figura 4.40.

Figura 4.40 - Barra superior Fonte: O autor

Logo depois de pintar a barra superior, podemos marcar uma seleção idêntica

à usada anteriormente, em termos de ferramentas, mas agora com um

tamanho um pouco menor. Dessa vez, o objetivo é marcar apenas uma

pequena barra inferior ao layout da parte superior. É importante criar uma

nova camada antes desse procedimento para manter a interface organizada

72


Competência 03

(Figura 4.41). Essa barra deve ser pintada com a ferramenta "balde de tinta",

usando tonalidade cinza, como mostra a Figura 4.42.

Figura 4.41 - Barra de navegação Fonte: O autor

Figura 4.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 4.43. E logo

depois outra área criada chamada de social, como mostra a Figura 4.44.

73


Competência 03

Figura 4.43 - Barra de destaque Fonte: O autor

Figura 4.44 - Barra social Fonte: O autor

74


Competência 03

3.3.6 Desenho de Linhas

O nosso layout também apresenta uma linha que divide a parte do conteúdo

do que seria uma área para listar pequenos textos. Essa linha pode ser

desenhada com uma ferramenta do GIMP chamada de lápis. A ferramenta

deve ser configurada com uma espessura de 2 pixels e, depois ajustada para a

cor cinza. O desenho da linha deve ser realizado com base nos pontos exibidos

na Figura 4.45 e o resultado final é exibido na Figura 4.46. Par criar uma linha

reta mantenha a tecla CTRL ao marcar os pontos.

Figura 4.45 - Configuração da linha Fonte: O autor

75


Competência 03

Figura 4.46 - Resultado da linha Fonte: O autor

3.3.7 Adicionando Textos no Layout

A adição de textos no layout não apresenta nenhum mistério, sendo

necessários apenas ajustes em relação às configurações de como o texto será

exibido. No primeiro estágio da configuração dos textos, podemos adicionar

um título na barra superior, seguido por uma amostra de conteúdo, como


76


Competência 03

Figura 4.47 - Primeiros textos no layout Fonte: O autor

Dica: Na área de design, é usado com frequência um texto em latim chamado

de Lorem Ipsum. Esse texto é usado apenas para compor visualmente um

layout enquanto não temos o conteúdo final definido. Você pode gerar esses

textos em latim em vários web sites, como o Lorem BR.

O próximo passo é adicionar um texto na área de destaque e, também, um

ícone para o Twitter. Esse ícone para o Twitter pode ser copiado desse

endereço:

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

m

Ícone:

http://icons.iconarchive.com/icons/del

eket/social-networking/256/Tw

itter-icon.png

http://br.lorem.com/

http://br.lorem.com/

77


Competência 03

O processo para adicionar o ícone no layout é idêntico ao que já realizamos

anteriormente no exercício do banner. O resultado dessa configuração pode

se conferido na Figura 4.48.

Figura 4.48 - Layout com ícone Fonte: O autor

Os últimos textos do nosso layout são as opções de navegação e os textos

resumidos que devem ser adicionados na parte esquerda da interface, como


78


Competência 03

Figura 4.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 publicação na web. Até alguns anos atrás, era comum encontrar web sites e

sistemas totalmente criados com base em imagens, mas isso já não é o padrão

de criação entre designers nos dias de hoje. O motivo já foi mencionado

anteriormente, estando relacionado com a otimização do conteúdo e do web

site para mecanismos de busca.

Mas, nada impede que você conheça a ferramenta que publica esse tipo de

layout diretamente do GIMP. A técnica consiste no "fatiamento" da imagem

79


Competência 03

em vários pedaços que resultam na criação de uma tabela em HTML. Cada

uma das células da tabela recebe uma das imagens em separado para formar

o layout. Isso evita que tudo seja publicado como sendo uma imagem única, e

acelera o carregamento em navegadores web. O único problema desse

procedimento é o uso de uma tabela que, do ponto de vista semântico, está

fora dos padrões da web contemporânea. Uma tabela deve ser usada para

exibir dados tabulados, e não montar layouts.

Para gerar a tabela no GIMP e publicar o nosso layout como um arquivo

HTML, precisamos, primeiro, fazer a marcação com linhas guia. Essas linhas

podem ser facilmente criadas ao clicar em uma das réguas nas laterais de um

layout no GIMP e arrastar o mouse, mantendo o botão esquerdo pressionado.

O posicionamento das réguas é a parte complexa. Mas, existe uma

ferramenta que ajuda a criar essas guias de maneira mais ordenada. Basta

fazer uma seleção nas áreas de desenho que criamos no nosso layout e

acionar a opção no menu Imagem -> Guias -> Novas guias a partir da seleção,


Figura 4.50 - Ferramenta para criar guias Fonte: O autor

80


Competência 03

Você deve criar seleções nas áreas do layout e acionar essa opção várias vezes

até que a interface esteja com um esquema de guias semelhante ao que é

mostrado na Figura 4.51.

Figura 4.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 opção fatiar,


81


Competência 03

Figura 4.52 - Opção fatiar Fonte: O autor

Nessa opção, devemos configurar o nome do arquivo HTML e do diretório que

receberá as imagens como mostra a Figura 4.53.

Figura 4.53 - Opções para exportar em HTML Fonte: O autor

82


Competência 03

Além dessas opções, ainda é possível determinar o diretório em que todo o

conjunto de imagens e arquivo HTML será gravado, e o tipo de arquivo usado

para gerar o layout. Nesse tipo de situação, em que temos apenas cores

simples no layout, a melhor opção é o GIF.

Pessoal, chegamos ao final de nosso caderno, espero que tenham gostado do

conteúdo apresentado!

83


REFERÊNCIAS

WIKIPEDIA. Figura 2.1. Mistura em RGB. Disponível em http://pt.wikipedia

.org/wiki/Ficheiro:Synthese%2B.svg. Acesso em Outubro de 2012.

WIKIPEDIA. Figura 2.2. Mistura em CMYK. Disponível em http://pt.wikipedia

.org/wiki/Ficheiro:SubtractiveColorMixing.png. Acesso em Outubro de 2012.

WIKIPEDIA. Figura 2.3. Compressão em JPG. Disponível em http://pt.wikipe

dia.org/wiki/Ficheiro:Texel_Landscape.jpg. Acesso em Outubro de 2012.

WIKIPEDIA. Figura 2.5. Exemplo de representação em GIF. Disponível em http:

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

2012.

WIKIPEDIA. Figura 2.6. Icone salvo em PNG. Disponível em http://pt.wikipedia

.org/wiki/Ficheiro:Truck_icon.pn>. Acesso em Outubro de 2012.

WIKIPEDIA. Figura 2.7. Icone salvo em PNG. Disponível em http://pt.wikipedia

.org/wiki/Ficheiro:Miro_icon.png. Acesso em Outubro de 2012.



http://pt.wikipedia/

84


MINICURRÍCULO DO PROFESSOR

Allan Brito é arquiteto formado pela PUC-PR e com especialização em Design

de Informação pela UFPE. Hoje, atua como escritor e professor de assuntos

relacionados à computação gráfica e multimídia direcionados para educação à

distância. É supervisor de projetos relacionados com EAD e fundador do

Colaborativo Digital.

editoração de imagens - sistema acadêmico - site · cada uma dessas características das imagens...

Documents