apostila comunicação visual para web

Comunicação Visual Para WebEdição nº1 - 2007

Prof. Giu Vicente

Apoio Gestão e Execução Conteúdo e Tecnologia

Comunicação Visual Para WEB

SOCIESC - Sociedade Educacional de Santa Catarina

2

Apresentação

Este livro didático contém a disciplina de Comunicação Visual Web, cujo con-

teúdo, ora apresentado, coloca você diante de um novo desafio: obter conhecimentos

para desenvolver comunicação visual para a Internet.

Comunicar é um ato comum a todos os seres humanos. Você se comunica a

todo o momento e não é só falar com os outros, é expressar-se, é fazer-se entender.

Comunicação é interação. Se formos pensar em todo o processo (e resumir o que

estudiosos dizem) a comunicação não acontece sozinha, precisa de um emissor, um

meio, uma mensagem e um receptor.

Você se comunica pelas roupas, cabelo, olhar ou não olhar, tipos de comuni-

cação mais comuns que conhecemos.

Neste livro você encontrará um tipo de comunicação considerado novíssimo,

no mercado de trabalho, o visual – linha do design gráfico que hoje assume o papel

de designer de interação, mas vai além disso. Um designer de interação planeja como

as informações serão agrupadas e apresentadas para o internauta. Discute quais as

ações de uma página, quais os eventos, o que será apresentado, entre outras tantas

coisas relacionadas ao internauta.

É importante ressaltar que o livro foi desenvolvido com o objetivo de oferecer

um aprendizado independente, inerente aos estudos do EAD, e o conteúdo foi revi-

sado com o intuito de oferecer uma linguagem simples, objetiva e estimulante.

Lembre-se de que a sua passagem por esta disciplina será também acompa-

nhada pelo Sistema de Ensino Tupy Virtual, seja por correio postal, fax, telefone, e-

mail ou Ambiente Virtual de Aprendizagem.

Entre sempre em contato conosco quando surgir alguma dúvida ou dificulda-

de. Toda a equipe terá a maior alegria em atendê-lo(a), pois o seu aprendizado nessa

jornada é o nosso maior objetivo.

Acredite no seu sucesso e bons momentos de estudo!

Equipe Tupy Virtual.



3

SUMÁRIO

CARTA DO PROFESSOR ............................................................................................. 4

CRONOGRAMA DE ESTUDOS .................................................................................... 5

PLANO DE ESTUDOS ................................................................................................... 6

1. PRIMEIROS PASSOS DE UM PROJETO DE WEBSITE .............................................. 7

2. PROJETO GRÁFICO ............................................................................................... 23

3. FUNDAMENTOS SOBRE IMAGEM ......................................................................... 34

4. FIREWORKS ........................................................................................................... 47

5. DESENVOLVENDO UMA SOLUÇÃO REAL ............................................................ 69

REFERÊNCIAS .......................................................................................................... 79



4

Carta do Professor“O único local onde

o ‘sucesso’ vem antes do ‘trabalho’

é no dicionário.”

Albert Einstein

Caro aluno “designer”,

Trabalhar com Internet, desenvolver para Internet, é uma atividade de grande

atuação no mercado hoje. Você está entrando em uma profissão do futuro, e pessoas

assim devem estar sempre atentas ao seu redor.

Não aprendemos somente em uma sala de aula, com um livro, ou com um pro-

fessor (mesmo que sejam ótimos e importantes). Também é possível aprender pela

observação e análise. Observe as pessoas acessando a Internet, você vai aprender

muito: verá onde elas clicam, que caminho percorrem, se demoram em mudar de pá-

gina, etc. Observe outros sites, navegue como observador. Na maior parte das vezes,

você vai captar coisas interessantes; em outras, coisas que não vai querer repetir de

forma alguma. Afinal desenvolver para a Internet é, na verdade, desenvolver para o

internauta, em quem se deve pensar a maior parte do tempo.

Espero que você se conecte neste mundo de web design e que possa se de-

senvolver.

Professor Giu Vicente



5

Cronograma de Estudos

Acompanhem no cronograma abaixo os conteúdos das aulas, e atualize as

possíveis datas de realização de aprendizagem e avaliações.

Semanas Horas/aula Conteúdos Data/Avaliação

1 10

PRIMEIROS PASSOS DE UM PROJETO DE WEBSITE: brie-fing; arquitetura da informação; wireframes; usabilidade; naveg-abilidade.

_/_ a _/_

1 5PROJETO GRÁFICO: Identida-de Visual; Cores; Tipografia; Gráficos.

_/_ a _/_

2 10

FUNDAMENTOS SOBRE IMA-GENS: Raster vs Vetorial; Ima-gens na Web; GIF; JPG; PNG; Utilização das imagens; Profun-didade de cor; Formato de Ar-quivos.

_/_ a _/_

2 15

• FIREWORKS: Conhecendo o software; Criando e exportando documentos; Ferramentas de criação e edição.• DESENVOLVENDO UMA SOLUÇÃO REAL: Criando ele-mentos; Exportando/Importando imagens; Criando o HTML.

_/_ a _/_



6

Plano de Estudos

Bases Tecnológicas

Arquitetura da informação; Wireframe; Navegabilidade; Usabilidade; Identidade

Visual; Imagens digitais; Software gráfico.

Objetivo Geral

• Desenvolver web sites com metodologia e conceitos de design e usabilidade.

Objetivos Específicos

• Estudar a organização de sites

• Compreender a importância da usabilidade e navegabilidade

• Projetar o design de web sites

• Interpretar elementos de identidade visual

• Trabalhar com tipos de arquivos de imagem

• Desenvolver “interfaces” de web sites em software gráfico.

Carga Horária: 40 horas/aula



7

Aula 1

Primeiros Passos de Um Projeto deWebsite

Objetivos da aula

Ao final desta aula, você deverá ser capaz de:

• Verificar a necessidade do planejamento de web sites;

• Identificar a prática de um projeto de arquitetura da informação;

• Desenvolver wireframes para aprovação e testes;

• Constatar a existência e a importância da usabilidade e da

navegabilidade.

Conteúdos da aula

Acompanhe os conteúdos desta aula. Se você preferir, as-

sinale-os à medida em que for estudando.

• Briefing

• Arquitetura da Informação

• Wireframes

• Usabilidade

• Navegabilidade

Prezado(a) aluno(a)!

Antes de partirmos para a execução técnica do Layout,

temos alguns passos fundamentais para analisar que

trarão resultados mais eficientes para o nosso produto final.

“Mãos à obra” e boa Aula!



8

1 BRIEFING

Esta estranha palavra, Briefing, é mais utilizada pelos publicitários, que gostam

de estrangeirismos. Nós, do meio de informática, também utilizamos muitos deles,

inclusive briefing. Para simplificar a história, poderíamos chamar o briefing de: Ques-

tionário para definição de objetivos.

São informações que você irá obter em uma entrevista com o cliente, e nin-

guém, além dele, pode responder às perguntas.

Entre outras perguntas podemos partir para o básico:

» Qual o segmento da empresa e quais serviços/produtos oferece?

» Quem é o público-alvo?

» Qual o objetivo do site? (Comunicar / vender / ensinar)

» Qual a identidade da empresa? Como quer ser vista? (apropriar-se da identidade

existente)

» Índice do conteúdo. (Tópicos gerais e específicos para se poder construir a arqui-

tetura)

Algumas empresas partem para o marketing digital, o que deve ser previsto

aqui, mas para nosso estudo isso é outra fase.

1.1 Arquitetura de Informação (AI)

Temos grande parte das informações, mas: como vamos organizá-las?

1.1.1 Arquitetura? Isso é informática?

No dicionário, a palavra arquitetura significa: “arte de edificar ou de projetar e

traçar planos”. Exatamente o que faremos: estruturar e planejar a informação do site,

conteúdos relacionados entre si e a estruturação dos fluxos de navegação.

Aqui faremos o possível para que o usuário não se perca, navegando sem ter

que pensar muito, de modo fácil e intuitivo.



9

Alguns dos resultados da Arquitetura da Informação (AI) são os wireframes e o mapa

do site.

1.1.2 Como faço isso? – O mapa

Com as respostas do briefing em mão, vamos definir como deve ser o site. Va-

mos partir de uma empresa que queira:

• mostrar sua história, abrangência, etc. - (A empresa);

• mostrará também seus serviços e produtos - (Serviços);

• deseja dar destaque para os clientes e os casos já realizados - (Clientes);

• quer deixar um espaço para que o cliente entre em contato - (Fale conosco).

De maneira bem simples, descrevi e organizei o que seria um agrupamento

dos assuntos relacionados. Agora vamos ver esses mesmos procedimentos sob uma

nova estrutura, observe a figura 1.

Figura 1 – Mapa do site.

Construa sempre um mapa, pense num esquema estrutural, como um fluxo-

grama, por exemplo, o que ajudará você a entender melhor o todo do site.

Perceba que as ligações principais são feitas sob a forma de agrupamentos e

as linhas tracejadas são links existentes entre os núcleos – no exemplo da figura 1, a



10

página contato. Essa é uma página importante para que o cliente tenha aproximação

com a empresa, por isso, muitas páginas têm links diretos com ela.

Lembre-se: quanto maior o website, mais complexa será sua arquitetura de

informação.

1.2 Wireframes: o esqueleto do site

Arame – essa é a definição mais próxima do que significa wireframe. Com esse

método desenha-se o conceito, estrutura-se o resultado do briefing. Você deve pensar

e esquematizar em que posição estará o menu, a busca, o conteúdo, a logo. É a fase

em que você testará a organização do conteúdo a ser apresentado na página, o todo.

Ainda não estamos falando de estilo visual, nem de cores, nem de imagens, mas de

disposição de conteúdo. Esse é o primeiro passo antes de iniciarmos o desenvolvim-

ento do design gráfico da página.

Para esse procedimento, podemos utilizar papel e lápis (figura 2). Como nes-

sa fase não estamos falando de cores, mas de conteúdo, devemos utilizar tons de

cinza (variação do preto até o branco) para destacar a importância das áreas (figura

3). Quanto mais escuro, mais importante. (Isso não é uma regra, mas pode ajudar).

Na criação das propostas, logo após, criamos os melhores desenhos em

qualquer ferramenta gráfica (figura 4). Se você achar melhor, pode ser o Paint

Brush, o Corel Draw, o Fire Works. Na verdade, você deve utilizar uma ferramen-

ta em que possa desenhar linhas, textos e posicioná-los da forma que quiser.



11

Figura 2 – Wireframe – Caneta e Papel

Fonte: site www.radiouniao.fm.br

Figura 3 – Wireframe Digital

Fonte: site www.radiouniao.fm.br



12

Figura 4 – Site Final

Fonte: www.radiouniao.fm.br

Dicas para projetar um bom “arame”

» Desenhe sempre pensando no tamanho das áreas em pixel, ou seja, pro-

porcional ao layout final, pois estamos falando de websites;

» Use textos o mais próximo possível do conteúdo, não escreva nononononon ou

xxxxxxxx, isso fará com que o texto pareça falso. Existe um texto muito utilizado pe-

los designers que é o “Lorem ipsum dolor set amet”, utilize-o para conteúdo de texto,

não para títulos, que devem se aproximar ao máximo do real;

» Cuidado com a rolagem vertical, se você definiu áreas mais importantes na pági-

na inicial, não as deixe abaixo da rolagem.

Felipe Memória - o designer que reformulou todo o site da globo.com - em seu livro

Design: projetando a experiência perfeita (2006), comenta que a estrutura mais uti-

lizada no mundo ocidental se aproxima do que mostramos na Figura 5.



13

Figura 5 - Padrão de layout definido por Felipe Memória

Preste atenção: isto é uma convenção não uma regra, mas para sites cujo

objetivo seja a simplicidade e a correta comunicação, serve como uma luva.

Para mostrar que nem tudo que é fora das convenções é ruim, seguem ima-

gens de sites fantásticos, cuja estrutura convencional pode ser muito bem explorada

com um projeto gráfico diferenciado.

A Figura 6 mostra o site da Selbetti Gestão de Documentos, cuja navegação

interna, do lado direito, e o menu, do lado esquerdo, fogem ao padrão tradicional, mas

não comprometem a navegação e a organização. A logomarca, assinatura e o con-

teúdo do site mantêm o padrão.



14

Figura 6 - Site da empresa Selbetti

Fonte – www.selbetti.com.br

Figura 7 - Site do Cantor Cubano Odín

Fonte - www.odinmudic.com



15

A Figura 7 demonstra que a navegação horizontal, no topo, permite liberdade ao con-

teúdo exposto, com a logomarca centralizada. A navegação interna das páginas segue

pelo lado esquerdo.

Figura 8 - Adobe

Fonte – www.adobe.com.br

A Adobe (Figura 8), hoje uma das maiores empresas de software para com-

putação gráfica e desenvolvimento web, tem o seu layout como padrão estabelecido.

A logo, navegação vertical e a área de pesquisa seguem o padrão. Mostra a barra su-

perior completa, assinatura no rodapé, os links principais do site, além de informações

sobre a empresa.



16

Figura 9 - Café Colombo

Fonte – www.cafecolombo.com.br

O Café Colombo é um site mais voltado ao cultural, com artigo e podcasts (Pod-

cast é uma publicação de uma entrevista, programa de rádio, leitura, etc. em formato de áudio.) (Figura

9) Apresenta-se graficamente com um estilo diferente, mas a sua estrutura é a mesma

do padrão definido por Memória. Perceba, em suas navegações, que esse padrão fa-

cilita a navegação do usuário que não precisa “tentar” entender o site, apenas busca

nas áreas convencionadas o que realmente deseja.



17

Figura 10 - Ipod Nano

Fonte - http://www.apple.com/br/ipodnano/

Podemos observar, na figura 10, que a Apple, uma das empresas vanguardistas

em tecnologia, também não foge à regra. A logo, navegação e assinatura se mantêm

com as funções padrão. Além do posicionamento clássico, a grande diferença do site

é o conteúdo, sempre diferente em cada categoria. A formatação da página permite

desvincular o topo e a assinatura do “miolo” (centro da página), totalmente liberado

para a criatividade.



18

Dicas »

O logotipo da empresa deve, preferencialmente, ser mantido à esquerda, pois

deve ser o primeiro elemento que o usuário verá, identificando onde ele está;

» A navegação deve estar em locais acessíveis.

» Repito: Não é uma regra! Todos esses estudos são as melhores práticas que

conhecemos hoje. O que faremos é uma convenção, mas fique à vontade para

ser criativo a cada projeto, com os devidos cuidados.

2 USABILIDADE

A usabilidade é um termo relacionado ao universo da Arquitetura da informa-

ção, pois é uma das formas de realizar um bom projeto de AI.

A usabilidade pode ser definida como:

“ a medida de qualidade e eficiência da experiência do usuário com um de-

terminado produto, que pode ser desde um rádio-relógio até uma página da Internet.

No conceito Web, define-se por um design que ajuda o internauta a encontrar infor-

mações, serviços e produtos de forma intuitiva.”

HP (http://h30091.www3.hp.com/pyme/dicas/glosario_2.html)

Para conseguirmos boa usabilidade, temos que ter em mente quem vai utilizar

o sistema, em qual mídia, com qual tecnologia e de que maneira. A usabilidade serve

para todos os produtos que têm interface com o usuário. Chamo de interface o painel

de botões de um liquidificador, por exemplo. A usabilidade está atrelada à ergonomia,

outro assunto bem interessante.

Vamos exemplificar a usabilidade com um celular. Para que tenham noção do

que estamos falando, peguem o celular ou circulem os celulares entre vocês e nave-

guem pela agenda - chamadas recebidas. Verifique as mensagens enviadas. Todos os

acessos são diferentes entre aparelhos e fabricantes. Pensar nesse acesso é pensar

em usabilidade, pensar que normalmente utilizamos uma das mãos, ou menos, utiliza-

mos um dedo apenas. Essa dificuldade ou facilidade é um exemplo de usabilidade.



19

Pensemos em quantos botões utilizamos para chegar a cada item desses,

quantas informações úteis vemos em tela ao mesmo tempo?

Agora você tem idéia do que é usabilidade. Logo entraremos em mais detalhes

para a Internet.

3 NAVEGABILIDADE

Como vimos, a usabilidade é o modo como utilizamos os sistemas e a nave-

gabilidade é principalmente voltada para a Internet, para a navegação entre as pági-

nas.

Para alguns gurus, citemos dentre eles Jackob Nielsen, se o usuário tiver que

clicar mais do que duas vezes para chegar ao destino a navegabilidade é regular, e se

só depois de três cliques o usuário chegar ao destino, a navegabilidade é ruim. Vamos

ser menos rigorosos, mas continuar atentos.

Como fórmula geral e básica para uma boa navegabilidade, o usuário deve

responder rapidamente três perguntas:

» Onde estou?

» De onde vim?

» Para onde vou?

Vamos voltar ao celular para confirmarmos os exemplos reais. Façam as mes-

mas navegações anteriores e verifiquem se há outras formas de acessar a mesma

informação e se você sabe onde está e para onde vai. Um bom exercício é que o co-

lega da direita ou da esquerda pegue o celular e navegue por alguns menus internos

e passe o celular para outro colega de classe. Façam estas três perguntas e vejam

as respostas que conseguem e apresentem para os outros, ou ainda, elejam o celular

com a melhor usabilidade e navegabilidade da classe (enviem para mim, vou adorar

saber qual o veredicto de vocês). Vocês verão coisas muito interessantes.

Observe os erros mais comuns cometidos pelos desenvolvedores de sites, se-

gundo Jackob Nielsen:



20

Os principais erros que dificultam a experiência do usuário

» Áreas saturadas com objetos rolantes e animados, que sobrecarregam a

visão do usuário;

» Scroll longo;

» Cores de links não-padrão;

» Longo tempo de download do website;

» Longos níveis hierárquicos dos diretórios de websites;

» Páginas órfãs, que não estão relacionadas a outras páginas;

» Quebra de consistência;

» Oferta de um link de “mailto:” ao invés de links para uma página com informações

de contato;

» Grandes blocos de texto;

» Páginas linkadas a si próprias;

» Informação excessiva ou desnecessária;

» Incompatibilidade de browsers.

www.useit.com é o site de Nielsen.

Nielsen ainda sugere algumas práticas para quem não quer falhar:

Melhores Práticas e Regras

» Mantenha todos os links com um estilo padrão. Eles não precisam ser azuis

(cor padrão do navegador) e sublinhados, como sugere Jakob Nielsen, mas devem

ser diferenciados, possuir cores e estilo que os identifiquem e os torne de fácil visu-

alização;

» Os títulos dos links devem ser auto-explicativos. Coloque os links em palavras

significativas, evitando termos genéricos como “Clique aqui” e “Mais”;

» Ofereça design leve e agradável, use poucas imagens: as pessoas procuram con-

teúdo;

» Evite textos longos e redundantes. O conteúdo deve conter parágrafos curtos e

sentenças simplificadas;

» Não ofereça muitas áreas de navegação, principalmente se os links forem seme-

lhantes;



21

» Evite menus suspensos;

» As opções e informações mais importantes devem estar acima da primeira

rolagem de tela;

» As caixas de entrada de busca devem possuir um tamanho adequado para que os

usuários possam ver e editar mais facilmente a sua consulta;

» Não surpreenda os usuários: não abra janelas pop-ups automaticamente;

» Não coloque links para “Voltar a Página Anterior”. Não tente reproduzir controles

do navegador;

» Os usuários não devem clicar em mais de três links para chegar até a infor-

mação que desejam;

» O usuário precisa saber: de onde veio, por onde andou e por onde pode navegar.

Síntese da Aula

Nesta aula iniciamos os assuntos gerais e introdutórios para um projeto de

arquitetura da informação, para que você possa entender melhor os conceitos das

aulas.

Vimos como são construídos os sistemas para serem utilizados pelo usuário.

Analisamos sites que trabalham com diferentes disposições e vimos o padrão

de layout utilizado na grande maioria dos sites.

Na próxima aula veremos os elementos dos projetos gráficos.



22

Exercícios Propostos

1) Vamos partir para estudos práticos e ligados à teoria. Escolha duas das figuras

apresentadas (entre a Fig. 6 e a Fig. 10) e faça análises das dicas de erros e acertos

apresentados por Nielsen.

2) Construa um mapa do site de três empresas:

1 – Da instituição de ensino que você estuda

2 – Do grupo musical que você mais gosta

3 – De algo que você tenha conhecimento e interesse. (Esporte, entretenimen-

to, família, etc.)

3) Eleja um dos três mapas criados acima e desenvolva um exemplo de WIREFRAME

de como poderia ser apresentado o conteúdo dessa empresa.



23

Aula 2

Projeto Gráfico (Design)

Objetivos da aula


• Reconhecer e interpretar elementos de uma identidade visual;

• Identificar a aplicabilidade de diferentes tipografias;

• Distinguir elementos gráficos.

Conteúdos da aula



• Identidade Visual

• Cores

• Tipografia

• Gráficos

Prezado(a) aluno(a)!

Já temos o esqueleto – o wireframe. Temos os órgãos

– o briefing. Agora precisamos da musculatura e da pele.

Parece papo de cientista maluco, tipo Frankenstein ou Eduard´s-

mãos-de-tesoura, mas vamos realmente dar uma cara adequada

ao projeto, vamos dar vida ao que já planejamos.

Boa aula!



24

1 IDENTIDADE VISUAL

Assim como o seu documento de identidade – o RG – o(a) identifica, a marca,

ou conceito gráfico é a identidade da empresa, organização, instituição de ensino,

etc. A identidade visual é importante para o projeto web, pois trata da adequação aos

padrões da empresa e permite que o cliente, ao acessar o site, não encontre outra

empresa e que faça a ligação do mundo real com o virtual.

A maioria das empresas possui marcas e elementos definidores de sua iden-

tidade visual – representação constante nos sites –, indicativo de que a empresa que

está no site é a empresa que está na rua.

Veja-se o exemplo da Tim, Fiat, Ipiranga ou Nike. Todas têm a sua marca e um

identidade que se compõe de elementos diferentes, mas com uma gama de possibili-

dades muito parecidas.

Alguns elementos que formam essa identidade vão ser abordados, ainda que

superficialmente, a seguir:

1.1 Cor

Cores são elementos de identificação, mas, algumas vezes, podem fazer com

que seus usuários fujam do site.

Inconscientemente nos sentimos bem com algumas cores e mal com outras,

depende do usuário, porém, podemos criar algumas regras para que isso não fuja

tanto dos padrões.

Verifique nesses dois sites possibilidades de combinação de cores interes-

santes para se utilizar.

» http://wellstyled.com/tools/colorscheme2/

» http://kuler.adobe.com/



25

Significados de cores (Convenções)

» Preto: muito mórbido para ser usado como plano de fundo na Internet, mas

é válido de acordo com a idéia que será transmitida. De certa maneira representa

requinte, se combinado a outras cores como tons pastéis, mas ainda assim é muito

pesado.

» Branco: cor básica, suaviza o layout e combina muito bem com cores claras ou

escuras. Ideal para plano de fundo.

» Vermelho: transmite calor, vida, inovação. Chama a atenção para o tema.

» Azul: passa certa seriedade, confiança, calma e é uma cor que consegue expres-

sar “tecnologia”.

» Pastel: cores delicadas, ideal para sites femininos, de culinária, ou sites sobre

antiguidades.

» Laranja: jovialidade, positividade, vida, muito bom para sites teen e lazer, assim

como o amarelo e o rosa.

» Verde: ideal para sites de saúde, medicina, natureza.

Nos computadores, as cores são representadas por números hexadecimais e

podem ser RGB, CMYK (figura 11) e tabelas específicas como a PANTONE.

Figura 11 - Cores aditivas [a] e Subtrativas [b]

As cores que utilizamos para a Internet são RGB – cores aditivas. Com a soma

das três cores (red, green, blue) chega-se ao branco, ao contrário do CMYK – cores

subtrativas (cyan, magenta, yellow) – cuja soma nos dá o preto (K).

Cores aditivas são aquelas cuja soma de TODAS as cores do espectro nos dá



26

a cor branca, ou seja, essas cores são emissoras de luz, pois são utilizadas em moni-

tores, televisões, celulares e todos os tipos de monitores de imagem. As subtrativas

são as reflexivas, pois somadas chegam à cor preta. São utilizadas em impressões

como livros, revistas, cartazes, etc.

Pense nos sistemas de cores aditivos como as cores que são luz e as sub-

trativas, que não são luz. Se você estiver em uma sala sem nenhuma luz, nenhuma

mesmo, e estiver vendo uma cor, ela está num sistema aditivo. Caso você nada veja,

então é subtrativo, pois precisam de luz para poder existir.

Falando em luz, você já viu uma luz negra?

Observe:

» PRETO = RGB #000000 e CMYK 100,100,100,100

» BRANCO = RGB #FFFFFF e CMYK 0,0,0,0

» VERDE = RGB #00FF00 e CMYK 100,0100,0

» ROSA = RGC #CC6666 e CMYK 0, 40, 20, 0

Definição

» RGB = Red, Green & Blue – Vermelho, Verde e Azul

» CMYK = Cian, Magent, Yellow & Black – Ciano, Magenta, Amarelo e Preto

1.2 TIPOGRAFIA

Conhecidas como fontes, a tipografia é uma família de caracteres com um de-

senho particular, ou seja, todas as letras são representadas seguindo um mesmo

estilo.

Para a Internet, temos que tomar cuidado, pois fontes “diferentes” podem não

estar instaladas no computador do usuário, o que implica na utilização de fontes con-

sideradas padrão como a Arial, Verdana, Tahoma e Times New Roman.

As fontes podem ser encontradas em sites, mas a maioria das fontes de qua-

lidade é paga, você precisa comprá-las para poder utilizá-las.



27

Seguem alguns links para encontrar fontes interessantes:

» www.dafont.com

» www.fontface.com

» www.1000fonts.com

Principais famílias de fontes:

» Serifadas (ex.: Times new Roman, Geórgia, Courrier New): possuem ares-

tas nas extremidades das letras. São adequadas para impressão, mas não para

corpo de texto na web. No caso de títulos ou textos de tamanhos grandes, oferecem

elegância.

» Não serifadas (ex.: Arial, Tahoma, Verdana, Trebuchet MS): são as mais adequa-

das para a leitura on-line, a maioria possui alta legibilidade.

» Cursivas (ex.: Monotype Cursiva, Staccato): são fontes que apresentam o estilo

manuscrito;

» Fantasy (ex.: Comic Sans): são fontes decorativas, com o intuito apenas de en-

feitar. Cuidado ao usá-las. Normalmente são mais usadas para desenvolver logoti-

pos.

A figura 12 apresenta algumas tipografias que se enquadram nas nossas de-

finições:

Podemos observar que os números 1 e 2 são fontes serifadas, comparadas,

apresentam uma diferença bem acentuada. Já os números 6 e 7 são fontes sem se-

rifa, ou ainda, bastões.

As fontes 3 e 4 são semiserifadas, têm elementos de serifa, mas não se com-

portam totalmente assim.

Como forma script temos as de número 4 e 5. Veja que a 5 deriva da marca de

um seriado para TV, você adivinha qual?



28

As tipografias são opostas, mas do mesmo grupo. Elas são decorativas e a

primeira é relacionada ao passado e a segunda ao futuro.

1.3 GRÁFICOS

Nem só de textos vivem os sites, afinal, imagens também são conteúdo. O uso

de gráficos deve ser adequado ao contexto. Imagens usadas como detalhes de layout

devem ajudar a ilustrar a interface e envolver as pessoas. Ícones e símbolos ajudam a

referenciar e a identificar a informação visualizada ou requerida. Por exemplo: ícones

de impressão, botão fechar, “casinha” (ir para a página principal), ícone de áudio e/ou

vídeo, marcadores de listas, etc.

1.3.1 Estrutura Gráfica

A “Gestalt”, ramo da psicologia que compreende a teoria da percepção visual,

baseia-se na psicologia da forma e é uma fonte de estudos bem interessante, talvez

a única, que nos sugere um conceito mais próximo de como devemos criar padrões

visuais. Alguns deles podem parecer óbvios, mas muita gente esquece, portanto



29

seguem alguns deles:

a) Proximidade - Se algo é da mesma família, assuntos, imagens etc., devemos

aproximá-los. Caso contrário, se forem assuntos diferentes, devemos separá-los.

b) Alinhamento - Para alguns estudiosos devemos criar uma malha (como uma ma-

triz) para distribuir logicamente o conteúdo. É um exercício bem útil para você que

está iniciando. Veja exemplos de malhas em sites conhecidos:

c) Repetição - A repetição faz com que você referencie rapidamente algo da mesma

família. Por exemplo, se temos um ícone para fotos – uma máquina digital – que se

repete várias vezes, já clicamos em um ou dois deles e sabe-mos que nos leva a uma

página só de fotos. Claro que, se eu observar mais vezes esse ícone, sempre associa-

rei com a página extra de fotos, por isso, cuidado com a similaridade dos ícones para

não causar o que chamamos de ruído na comunicação.

d) Proporção - Se você colocar um título em tamanho 15px, o link ao lado – próximo,

com a mesma cor e tamanho 15px – o usuário vai acreditar que os dois são links, ou

os dois são títulos.

Portanto, tamanhos de áreas, fontes, imagens, etc., são sim uma forma de i-

dentificar famílias. Cuidado para não confundir o seu usuário.

1.3.2 Estudo de aplicação dos conceitos gráficos

Vamos verificar o site a seguir (figuras 13 e 14) e a análise que podemos faz-

er:



30

Figura 13 - Globo Esporte – Site do portal globo.com



31

Figura 14 - Portal G1 – Globo.com e seu portal de notícias



32

Analisando as figuras 13 e 14, podemos observar, em duas páginas diferen-

tes, uma de esportes e outra de notícias gerais, que a estrutura é igual, muda a iden-

tidade de cada uma.

Vamos analisar os pontos enumerados nas imagens:

» 0 – A logomarca da página está na mesma área, ou seja, ao mudar de página, o

usuário sabe exatamente onde está.

» 1 – A Busca está EXATAMENTE no mesmo formato e posição, fazendo com que o

usuário se familiarize com o ambiente.

» 2 – O menu interno sofre pequenas alterações. Na página de notícias se torna

complicado criar muitos níveis de diferenciação, já na página de esportes as funções

são agrupadas – no exemplo, um dos grupos é de campeonatos.

» 3 – A barra principal de navegação é horizontal e padrão. Tem a função de mostrar

ao usuário onde ele está. Lembram-se quando comentamos sobre onde estou? Pois

bem, as cores dos botões dessa navegação vão dar o tom das páginas internas.

Como você pode perceber, o link da página de notícias é vermelho, e o fundo da

página é vermelho. Na página de esportes é verde, como no link.

» 4 – O conteúdo encontra-se na mesma posição e com as mesmas dimensões. O

conteúdo sofre alterações, mas o formato não.

» 5 – A área do plantão segue a mesma estrutura e posicionamento e se adapta à

cor de cada área. Quando olhamos para esse tipo de estrutura, sabemos que se tra-

ta das últimas notícias.

Síntese da Aula

Nesta aula verificamos a existência de elementos da identidade visual e anali-

samos os diferentes tipos de reprodução das cores, o significado psicológico e sua

aplicação em códigos.

Analisamos também as variações que existem entre as diferentes tipografias

e conhecemos características gráficas, que auxiliam na estruturação de um layout,

analisando todos os tópicos em dois sites de grande acesso.

Na próxima aula estudaremos sobre arquivos e tipos de imagens.



33


1) Defina o que é identidade visual.

2) Quais são os tipos de sistemas de cores e onde usá-los?

3) O que são Serifas?

4) Com base no item 2.2, encontre um site e faça as análises e encontre os números

de 0 a 5 (se existirem todos).



34

Aula 3

Fundamentos Sobre Imagens

Objetivos da aula


• Identificar imagens raster;

• Identificar imagens vetoriais;

• Investigar sobre a utilização dos diferentes tipos de arquivo de

imagens;

• Produzir imagens adequadas a diversas finalidades.

Conteúdos da aula



• Raster vs Vetorial;

• Imagens na Web;

• GIF;

• JPG;

• PNG;

• Utilização das imagens;

• Profundidade de cor;

• Formato de Arquivos.

Prezado(a) Aluno(a)!

Vamos definir algumas premissas para o nosso trabalho:

Partamos do ponto que para se trabalhar com computação gráfica

é necessário conhecer, no mínimo, como funcionam as imagens e

seus tipos. Pronto, agora você entendeu por que vamos estudar os

temas seguintes.

Boa Aula!



35

1 INTRODUÇÃO

Anos atrás, a Web não passava de texto na cor preta sobre um fundo cinza. As

poucas imagens demoravam “três semanas” para carregar, um pão francês custava

dois centavos e eu tinha que caminhar na lama quando chovia para ir à escola. Os

tempos mudaram, o pãozinho se cobra pelo peso e a Web tornou-se um lugar onde

os visitantes esperam encontrar imagens profissionais.

Se você não souber como tirar vantagem do potencial da Web, a história vai se

repetir: Sua página levará três semanas para carregar e você vai receber um bilhete

para ser entregue aos seus pais convidando-os a uma reunião de pais e mestres, para

falar sobre o seu “mau rendimento em aula”, pois não assimilou nada do que deveria

aprender sobre os assuntos até aqui ministrados!

O primeiro passo para você entender como criar e gerenciar gráficos para a

Web é compreender o que propriamente são as imagens. As imagens eletrônicas são

feitas de milhares de pequenos pontinhos coloridos chamados de “pixels”. Os pixels

são tão pequenos que um deles sozinho não pode ser captado pelo olho humano, por

isso eles dão a ilusão de uma imagem contínua. É assim que todas as imagens que

você vê em seu computador funcionam. Claro, você já olhou na tela da TV com uma

lupa quando era criança. Se não, vá e faça isso agora mesmo.

Algumas telas têm pontos, outras têm linhas, mas o princípio é o mesmo. En-

tão, continue lendo e eu vou ajudar a preparar você para manejar seus pixels corre-

tamente.

2 RASTER X VETORIAL

A possibilidade de utilizarmos imagens, gráficos, desenhos e textos artísticos

nas nossas publicações revolucionaram a forma da escrita tradicional. Uma publica-

ção, atualmente, cativa o leitor pelo seu charme natural, sua descontração para a

leitura e a facilidade de assimilação do conteúdo. As imagens ajudam muito para esta

nova atitude. A qualidade do gráfico depende da sua resolução.



36

Resolução. A resolução ou nitidez gráfica é medida pelo número de pon-

tos ou pixels - elementos de figura - que podem ser colocados em uma polegada

quadrada (dots per inch, ou DPI).

Apesar da variedade de formatos de arquivos gráficos, todos caem em uma

dentre duas categorias: mapas de bits ou imagens e gráficos de vetor ou line art.

A arte de mapa de bits é composta de milhares de pequenos pontos e os de-

senhos de vetor compreendem linhas calculadas por fórmulas matemáticas. Os grá-

ficos de mapas de bits são geralmente produzidos por programas de pintura e scan-

ners, os gráficos de vetores são produzidos por programas de desenho.

Como você pode conferir na figura 15, as imagens de mapa de bits têm uma

limitação de ampliação, diretamente ligada a sua resolução.

Figura 15 – Imagem no formato Mapa de Bits de 72dpi. Com zoom de 8x.

A resolução e a capacidade da impressora são interativas. Se você tiver uma

imagem de mapas de bits com 180 dpi, ela nunca poderá ser impressa em uma re-

solução melhor do que 180 dpi, mesmo que saia em uma impressora a laser de 300

dpi. Os gráficos de mapas de bits não se tornam gráficos de alta resolução só porque

se usa uma impressora melhor.

Um gráfico de vetor ou baseado em objetos, por outro lado, é composto de



37

linhas retas e curvas, calculadas matematicamente. A resolução dos gráficos de vetor

segue a capacidade da impressora. Uma figura de vetor é impressa em 600 dpi em

uma impressora a laser de 600 dpi e em 1.200 dpi em uma fotocompositora de 1.200

dpi. Com gráficos de vetor, quanto melhor a impressora, melhor a resolução (Figura

16). A Arte em Postscript, arquivos EPS, CGM e GEM são gráficos de vetor. A Arte

BITMAP, arquivos BMP, TIF, GIF, JPG são gráficos raster.

Figura 16 - Imagem vetorial. Zoom de 10x.

3 Formatos da Web

Os Navegadores da Web (browsers) podem exibir apenas imagens salvas em

tipos especiais de arquivos. Os dois principais tipos usados são GIF e JPG.

As imagens devem aparecer na tela do visitante com rapidez e qualidade ne-

cessárias. Para isso, é muito importante saber as diferenças e escolher o melhor for-

mato para cada imagem. Quanto mais compactas, mais eficazes serão as figuras.

Quanto tempo? Para estimar quanto tempo vai levar para alguém ver uma ima-

gem usando um modem de 28.8, divida o tamanho da imagem por dois. Assim, um

arquivo com 12K vai normalmente demorar 6 segundos para carregar e aparecer.



38

3.1 GIF: GRAPHIC INFORMATION FORMAT (LEIA “GUIFI”)

Arquivos GIF são melhores para imagens com poucas camadas de cores (fi-

gura 17). Use-os para “imagens de apresentação”: gráficos, figuras ou imagens de

texto. Quanto menos cores você usar, mais eficiente será o arquivo GIF. Um arquivo

do tipo GIF pode conter no máximo 256 cores.

Figura 17 - Imagem GIF

Arquivos GIF podem ser “entrelaçados” assim eles parecem “fade in” (vão a-

parecendo aos poucos), de uma menor para uma maior qualidade enquanto estão

carregando. Isso proporciona aos visitantes algo para ser visto enquanto esperam.

Arquivos GIF podem ser transparentes. Significa que você pode escolher uma

ou mais cores para “não serem” mostradas, permitindo que as cores do fundo da sua

página apareçam através delas. Isso evita que os gráficos dêem a impressão de es-

tar em caixas, causando, visualmente, a impressão de que estão mais integrados com

a página.

Os arquivos GIF são “lossless”, significa que a qualidade da imagem não é

degradada pelo processo de compressão.

Podem ser animados, como filmes, só que bem mais simples. As GIF’s anima-

das simulam movimento usando uma série de imagens individuais.

Os arquivos GIF não são bons para fotografias – perdem qualidade e os arqui-

vos não serão compactos. Use arquivos JPG para fotos.

3.2 JPG: Joint Photographic Experts Group

Arquivos JPG (lê-se “jota-pégue” OU “Jota-Pê-Gê”) são melhores para ima-

gens com muitas cores, como fotografias e arte digitalizada (figura 18). O JPG admite

16 milhões de cores. A compressão é variável e você pode aplicar maior ou menor



39

compressão a cada imagem, individualmente.

Figura 18 - Imagem JPG

O sistema JPG é do tipo “lossey”, quanto maior a compressão, menor será a

qualidade. O tamanho do arquivo pode diminuir bastante nesse sistema, mas você

deve balancear o tamanho do arquivo com a qualidade da imagem. Os novos soft-

wares gráficos (Macromedia Fireworks ou Adobe Photoshop) permitem pré-visualizar

suas imagens JPG, assim você pode escolher o melhor balanço entre tamanho e

qualidade.

As novas versões desse tipo de imagem introduzem a possibilidade de salvar

seu JPG como um arquivo entrelaçado, causando a impressão de que ele vai “apa-

recendo” de uma menor para uma maior qualidade, enquanto vai sendo carregado,

mas browsers antigos não suportam este formato.

Arquivos JPG não são bons para imagens com poucas cores, elas serão mai-

ores que o necessário e parecerão embaçadas.

JPG também não tem transparência.

3.3 PNG: Progressive Network Graphics

PNG é o mais novo formato de arquivo gráfico para a Web, por isso, só é su-

portado pelos navegadores mais novos. Esses arquivos não aparecerão em nave-

gadores antigos, por essa razão, ao usar o formato PNG, você pode fazer com que

visitantes do seu site não consigam ver as suas imagens. Em alguns testes, os na-

vegadores FireFox e o IE7 já aceitam esse formato.

Arquivos PNG são compactos e versáteis e podem combinar as melhores



40

características do GIF e JPG, como a capacidade de ter um fundo transparente ou

conter imagens com milhões de cores.

Embora esse formato seja útil e eficiente, você deve ter prudência na sua uti-

lização.

3.4 Quando usar um deles?

O erro mais comum que as pessoas cometem, quanto às imagens para a Web,

é usar o formato errado para essas imagens, mas a escolha é simples:

DICAS

» Se a imagem tem poucas cores, escolha GIF;

» Se a imagem tem muitas cores (como uma foto), escolha JPG;

» Se o público do seu site utiliza FireFox ou IE 7, use PNG quando necessário.

Nada de segredos e cálculos complicados. Escolhendo o formato correto, su-

as imagens terão boa aparência e carregarão rápido no computador do visitante. Es-

colhendo o formato errado, as imagens terão péssima aparência e levarão uma eterni-

dade para carregar. Se você não for capaz de lembrar-se dessas regras simples, faça

uma tatuagem com elas em algum lugar do seu corpo que seja bem visível.

Para encerrar a discussão, vamos separar 2 tipos de imagem por categorias:

fotografias e simples. Uma imagem simples geralmente é composta por texto, gráfi-

cos e diagramas, tudo com contornos definidos e grandes formas com cores contí-

nuas.

Uma imagem fotográfica pode ser qualquer coisa, desde uma fotografia de seu

cachorro, a Bolinha, a uma pintura de Leonardo DaVinci. Basicamente qualquer coisa

com uma grande quantidade de cores. Como regra geral, conteúdo “simples” deve ser

salvo como GIF e fotográfico como JPG.

Saiba mais sobre os formatos aqui

http://rodrigomuniz.com/go/experimentos/formatos-imagem/



41

3.5 A compressão e o tamanho do arquivo

Existem alguns problemas relacionados com as compactações de imagens,

claro que a dica anterior é de grande valia, porém não se resume a isso, pois, para

cada JPG, existem tipos de compressões utilizadas.

Vejamos agora alguns estudos de caso relacionando TAMANHO (bytes) VS

QUALIDADE (resolução) com o nosso amigo “Sr. Stress Anty”.

Vamos analisar os fatos:

Imagem Inicial (A)Tamanho : 51,7 Kb

Imagem com compacta-ção 20% (B)Tamanho : 15,0 Kb

Imagem com compacta-ção 70% (C)Tamanho : 7,0 Kb

Observando atentamente a imagem B e comparando-a com a imagem A pode-

se notar uma pequena diferença na qualidade, porém é mínima e o arquivo diminui de

tamanho, consideráveis (para a WEB) 35Kbytes.

Na imagem C, o nosso amigo Stress Anty está um pouco fosco ou fora de foco,

todavia o tamanho do arquivo é bem pequeno, apenas 7 Kbytes, tornando-o muito

bom para a web.

Continuando o estudo do Sr. Stress Anty veremos três tipos de resoluções que

não são de boa utilização.



42

Imagem com compacta-ção 90% (D)Tamanho : 3,9 Kb

JPG convertida em GIF256 (E)Tamanho : 44,1 Kb

JPG convertida em GIF Uniforme (F)Tamanho : 18,2 Kb

Na imagem D, nota-se perfeitamente a má resolução da imagem e, conse-

qüentemente, o tamanho reduzido do arquivo, apenas 3,9 Kbytes. Em contrapartida,

temos a mesma imagem, só que exportada como um arquivo GIF, com 256 Optimized,

uma boa resolução e um tamanho grande, novamente ressaltando, para a WEB.

Para terminar o nosso trabalho com o Sr. Stress Anty, vemos uma GIF com

compactação Uniforme, indubitavelmente horrível.

Resumindo, os diferentes programas usam diferentes números para a com-

pressão JPG, mas, geralmente, quanto maior o número, maior a qualidade da ima-

gem e seu tamanho. Você deve procurar na documentação de seu software para

saber como ele faz esse tratamento. Para cada trabalho existe uma configuração

adequada, seja para WEB ou para impressão. Se você precisa de uma imagem com

excelente qualidade, não irá fugir de um arquivo de bom tamanho em Kbytes.

DICA:

Embora você deva usar GIF ou JPG como gráficos para a web, salve o seu arquivo

original em um formato como TIF (Tagged Image File Format) ou o formato nativo de

seu software gráfico. Por quê? Porque você preserva a resolução e a qualidade da

imagem original, para novamente usá-la ou não na web!



43

3.6 Resolução de Tela

No Brasil, como temos preços elevados para artigos tecnológicos, ainda não há

(a grande maioria) monitores e placas de vídeo que nos permitam trabalhar com uma

resolução de tela de 1024x768px, mas grande parte dos designers está fazendo seus

layouts fluidos. O que quer dizer isso?

Normalmente os usuários domésticos utilizam resolução de 800 x 600px, mas

com CSS e outras tecnologias, você consegue utilizar layouts que podem se adaptar

para telas maiores ou menores. Esse é um tópico específico, que você deve procurar

quando dominar os itens básicos.

IMPORTANTE

Para desenvolver um site para a resolução de 800x600, NUNCA CRIE O LAYOUT

COM 800x600, pois a área útil desta resolução é de 770x440px aproximadamente,

ou seja, você sempre perderá espaço para menus do seu navegador e da barra ini-

ciar do Windows, por exemplo.

No mundo digital, os gráficos podem ser divididos em dois grupos, os vetoriais

e os bitmaps. A diferença principal entre eles é a resolução.

Os gráficos vetoriais são feitos por cálculos matemáticos, portanto, se fizermos

alterações em seu tamanho, ele irá adaptar-se e não terá problemas de definição.

Os mapas de bits, como seu nome diz, são quadradinhos de cores diversas,

que montam uma imagem maior. Este sim, dependendo da resolução, sofre com o di-

mensionamento.

3.7 Cor em “profundidade”

Cada pixel da imagem é mostrado pelo monitor usando-se uma combinação

de três sinais de cores: vermelho, verde e azul. A intensidade de cada um desses

sinais determina a sua aparência. Em um monitor de TV preto e branco, os pixels

têm apenas duas cores possíveis: preto ou braço. O que é chamado de “1-bit” porque



44

o pixel está ligado ou está desligado.

Imagem com Profundidade de bits

Sem profundidade. Preto e Branco

Em monitores coloridos, cada pixel pode exibir certo número de cores, que

vão de 16 (4-bit) a 16 milhões. A maioria dos computadores, hoje em dia, pode exibir

65.000(16 bits) cores. Novos computadores exibem de 65.000. (16-bit) a 16 milhões

de cores.

3.8 Formato de Arquivos

Como em todos os programas de qualquer funcionalidade, desenho, texto, som

ou vídeo há vários tipos de imagens com a mesma funcionalidade, mas com caracter-

ísticas diferentes. Para Exemplificar vamos aos conhecidos arquivos de som:

» WAV – Arquivo de som extraído de algum dispositivo de entrada (Microfone – CD

– Teclado Musical – ETC) outro arquivo

» MP3 – Arquivo de som extraído de algum dispositivo de entrada (Microfone – CD

– Teclado Musical – ETC)



45

Mas qual a diferença? Assim analisando, NENHUMA! Porém, quem conhece

os arquivos, sabe que o mp3 tem uma compactação melhor e a qualidade superior

que o WAV. Mas isso é apenas um exemplo de arquivos quaisquer.

Vamos agora para os arquivos de Imagens.Tipo de Arquivo Pacote de Software

Postscript EPS

Muitos aplicativos para PC e MAC pro-duzem arquivos Posts-cript. Postscript é uma rica linguagem de descrição de grá-ficos, mas, como um arquivo EPS é, na realidade, apenas texto com instruções para uma impressora Postscript indicando como imprimir a imagem. Nenhuma ima-gem Postscript será mostrada na tela, salvo se uma imagem de mapas de bits (TIFF ou WMF) estiver incluída com o arquivo EPS.

CompuServe GIF

Arquivos GIF são usados para criar imagens comprimidas para facilitar o uploading e o downloading das electronic Bul-letin Board Systems (BBS) e da INTERNET.

BMPArquivos BMP: Os BMP’s podem ser cria-dos no Windows’ Paintbrush e usados como “wallpaper” no background quando rodamos o Windows.

WMF

Os arquivos Windows Meta File geralmente são gerados no formato Aldus Placeable Metafile (que contém um cabeçalho com in-formações org e ext). A Aldus e a Micrografx criaram uma versão estendida do Formato de Meta-arquivo do Win-dows chamada “Placeable Metafile Format.” Nesse formato estendido, 22 bytes de informações foram adicionados ao cabeçalho padrão do meta-arquivo.

TIF

O Formato Tagged Image File (.TIF) é usado por muito scanners. Nem todos os arquivos TIF são idênticos, obedecem a uma série de especificações (Revisão TIFF 5.0. Revisão TIFF 6.0, etc.). Tais tipos podem ser muito grandes e consumir mui-to espaço em disco, pois incluem informações de escala de cinza. No entanto, os formatos TIF, comprimidos, podem usar apenas 10% do não-comprimi-do.



46

Síntese da Aula

Estudamos nesta aula os diferentes tipos de representação gráfica digital.

Estudamos os tipos de imagens, como funcionam e quais as melhores para

finalidades específicas. Aprofundamos o conhecimento entre as imagens vetoriais e

raster juntamente com outras extensões de arquivos.

Comparamos também as formas de exportação de imagens raster.

No próximo capítulo veremos a ferramenta fireworks.


1) Descreva a diferença entre imagens Raster e Vetorial, justificando.

____________________________________________________________________

____________________________________________________________________

_____________________________________________________________________________________________

____________________________________________________________________________________________

2) Imagens PNG são utilizadas para fotografia? Justifique.

____________________________________________________________________

____________________________________________________________________

________________________________________________________________________

_______________________________________________________________________

3) Lendo as características deste capítulo, você utilizaria arquivos GIF para fotogra-

fias? Por quê?

___________________________________________________________________

___________________________________________________________________

___________________________________________________________________

____________________________________________________________________



47

Aula 4

Fireworks

Objetivos da aula


• Familiarizar-se com a ferramenta;

• Manipular documentos nativos da ferramenta;

• Exportar arquivos de imagens;

• Utilizar as ferramentas-padrão.

Conteúdos da aula



• Conhecendo o software;

• Criando e exportando documentos;

• Ferramentas de criação e edição.


Nesta etapa, serão apresentados os principais recur-

sos utilizados para desenhar páginas Web, usando

como ferramenta o software Fireworks. Embora possua uma in-

finidade de recursos e de funcionalidades, os tópicos abordados

proporcionarão conhecimento necessário ao desenvolvimento de

soluções gráficas para Web.

Familiarizado(a) com o software, será proposto o desen-

volvimento de Layout para um Hotsite, baseado no Caso de Uso

da empresa Salvador Móveis.

Boa aula!



48

1 VISÃO GERAL

Fireworks é uma eficiente ferramenta de edição de imagens para web. Con-

sagrada mundialmente entre Webdesigners, vem ganhando cada vez mais adeptos

assim como novos recursos lançados a cada versão.

Projetado especificamente para criar e editar figuras da Web, o Fireworks for-

nece recursos que tornam mais fácil inserir gráficos dentro de páginas da Web, de-

pois que elas foram criadas, além de disponibilizar ferramentas sob medida para a-

perfeiçoar e otimizar imagens para o uso na Web.

O Fireworks é totalmente compatível com imagens vetoriais e bitmap, ou seja,

é possível criar e manipular imagens em ambos os formatos no mesmo Ambiente de

Trabalho, possibilitando, inclusive, exportar facilmente as imagens para páginas em

HTML, assim como códigos JavaScript para os elementos Rollover.

Nota: Foi utilizada a versão 8.0 (inglês) do Fireworks para esta apostila. A

apresentação a seguir pode exibir um ambiente ligeiramente diferente dependendo

de qual versão do software você está praticando. No entanto, o conceito deve seguir

o mesmo contexto.

2 CONHECENDO O BÁSICO

Características da Área de Trabalho do Fireworks e seus principais recursos.

2.1 Criando um Novo Documento

1. Ative o Fireworks;

2. Escolha File > New na barra de menus (figura 19);

3. Na caixa de diálogo, informe o Width e Height. Esses valores correspondem à Lar-

gura e à Altura em pixels, polegadas ou centímetros;

4. Ative a opção White para selecionar a cor Branca de fundo para a nova imagem;



49

defina Transparent para deixar o fundo sem nenhuma cor ou selecione Custom para

escolher uma cor personalizada.

Figura 19 - Propriedades de um Novo Documento.

2.2 Área de Trabalho do Fireworks

O Fireworks possui três sessões principais em sua Área de Trabalho, conforme

mostra a figura 20.

» Caixa de Ferramentas Expansível (Tools): A Caixa de Ferramentas (exibida no

lado esquerdo da figura) contém diversas ferramentas de desenho, algumas das

quais estão contidas em Grupo de Ferramentas. Para Exibir um Grupo de Ferra-

mentas, pressione e segure qualquer ferramenta com um triângulo no canto inferior

direito.

» Layers (Camadas): O Painel Layer, localizado no lado direito da figura, armazena

todas as camadas que existem em um documento do Fireworks. Dessa forma, os

elementos gráficos podem ser agrupados ou sobrepostos individualmente conforme

o desejado.

» Properties (Propriedades): O Painel Properties - também chamado de Inspetor



50

de Propriedades -, é utilizado toda vez que é preciso configurar as propriedades de

um objeto selecionado, assim como a propriedades globais do documento.

Figura 20 - Área de Trabalho do Fireworks.

2.3 Navegando entre documentos

O Fireworks permite trabalhar com diversos documentos ao mesmo tempo,

estejam maximizados ou minimizados dentro da Área de Trabalho. Para gerenciá-los,

o Fireworks agrupa todos em uma estrutura de abas que contém o nome de cada

documento em edição.

Para navegar entre os documentos, basta selecionar uma aba respectiva para

ativar sua visualização. No exemplo da Figura 21, existem três documentos em edição,

mas só o primeiro documento está sendo visualizado.

Figura 21 - Abas dos documentos em edição.



51

3 EXPORTAÇÃO DE DOCUMENTOS

O assistente para exportar imagem é um eficiente recurso que possibilita ge-

rar a imagem mais adequada para sua aplicação. É possível definir o formato final

e acompanhar o tamanho do arquivo, assim como ter uma pré-visualização, no mo-

mento de edição (Figura 22). Para ativar o assistente, selecione File > Export Wi-

zard.

Os dois formatos mais comuns utilizados em Figuras da Web, são o JPG e o

GIF. Ambos têm finalidades específicas, como já foi abordado anteriormente. Neste

exemplo, é possível observar as configurações de uma imagem no formato JPG. Op-

tou-se pela escolha da qualidade da imagem, através da opção Quality.

Dica importante: sempre ativar a opção Progressive browser display. Ela faz

com que a imagem seja carregada dinamicamente pelo browser, do contrário, o na-

vegador só irá exibir a imagem quando estiver totalmente carregada.

Figura 22 - Assistente para exportar imagens.



52

Para selecionar outros formatos, com a finalidade de exportar, basta informar o

formato desejado, através da opção Format. A Figura 23 demonstra as configurações

para uma imagem no formato GIF. A principal característica desse formato é a pos-

sibilidade de definir uma ou mais cores para serem tratadas como transparentes na

imagem. Perceba no exemplo da figura que o fundo, anteriormente branco, passou

para transparente.

Para Selecionar uma área transparente na imagem, basta selecionar a ferra-

menta conta-gota, e clicar sobre a área desejada na imagem. Dessa forma, a imagem

final em GIF assumirá a cor de fundo na qual ela for sobreposta.

Quando a imagem tiver que ser transparente, ainda que não for preciso alta

definição e qualidade, escolha o formato GIF. O JPG permite gerar imagens de alta

qualidade com um alto nível de compressão, ou seja, o arquivo final terá sempre pou-

cos kilobytes.

Figura 23 - Exportando imagens com fundo transparente



53

3.1 Controle de ampliação

É possível controlar a ampliação do documento original, usando-se um recur-

so rápido, localizado logo abaixo da imagem em edição, conforme o detalhe da Figu-

ra 24. Basta pressionar sobre o valor de ampliação e selecionar o nível desejado.

Também é possível consultar nessa área a resolução atual utilizada no docu-

mento. Ao clicar sobre o valor atual, será exibida a dimensão aplicada em pixels ou

centímetros por polegada.

Figura 24 - Controle de Ampliação

3.2 Barra de Ação Principal

Por padrão, o Fireworks não traz ativa a Barra de Ação Principal, que possibi-

lita o acesso rápido à função para criar novos documentos, salvar e imprimir. Similar

a diversos outros aplicativos, está disponível o recurso para Desfazer ou Refazer um

ponto de edição.

Para ativar a Barra de Ação Principal, selecione na Barra de Menus Windows

> Toolbars > Main (figura 25).

Figura 25 - Barra de Ação Principal



54

4 EXPORTAR PARA OUTROS APLICATIVOS

O Fireworks permite exportar rapidamente seu trabalho para diversos forma-

tos e aplicativos. Utilizando o botão localizado no topo direito do documento de edi-

ção (Figura 26), é possível exportar para HTML assim como Flash. A opção Visualizar

nos Browsers dá idéia de como o Layout se comporta em uma página da Web.

Entre os formatos suportados, estão o Microsoft FrontPage e Adobe GoLive®,

além de outras ferramentas da família Macromedia e Adobe.

Figura 26 - Opção exportar para outros formatos e softwares.

4.1 Utilizando a Caixa de Ferramentas

A Caixa de Ferramentas (Figura 27), está separada em seis categorias:

» Seleção,

» Bitmap,

» Vetor,

» Web,

» Cores,

» Visualização.

Para selecionar uma ferramenta ou subferramenta, basta clicar sobre o ícone

desejado ou pressioná-lo quando estiver dentro de um Grupo de Ferramentas (Figura

28).



55

Figura 27 - Caixa de Ferramentas

Figura 28 - Grupo de Ferramentas

4.2 Selecionando e cortando objetos

Antes de fazer qualquer edição em um objeto, é necessário fazer sua seleção.

Para isto, existem duas ferramentas específicas que podem ser usadas para sele-

cionar objetos, pontos de um vetor, um bloco de texto ou uma palavra simplesmente.

Ferramenta Pointer seleciona e arrasta objetos;



56

Ferramenta Subselection seleciona apenas alguns pontos do objeto;

Ferramenta Crop seleciona a área da imagem que será cortada.

Na Figura 29, é possível observar na prática o uso de cada ferramenta citada

anteriormente. Enquanto a Ferramenta Pointer seleciona o objeto por inteiro, a Fer-

ramenta Subselection permite selecionar pontos específicos do objeto. Dessa forma,

é possível editar pontos sem alterar o restante da imagem.

A Ferramenta Crop, delimita a área onde será efetuado o corte da imagem.

Feita a seleção, basta dar um Double-Click sobre a área marcada para descartar o

restante da imagem.

Figura 29 - Uso das Ferramentas Pointer, Subselection e Crop.

4.3 Selecionando Pixels

Assim como as ferramentas de seleção para objetos, há duas ferramentas

específicas que auxiliam na seleção de pixels. Para marcar uma área de edição, basta

selecionar a ferramenta mais adequada.

Ferramenta Marquee - faz a seleção no formato retangular na imagem;

Ferramenta Lasso - faz uma seleção livre;

Ferramenta Eraser - remove os pixels da imagem.



57

Conforme a Figura 30, é possível perceber o uso das duas ferramentas de se-

leção de pixels - Marquee e Lasso -, assim como a Ferramenta Erase, após remover

os pixels da área apontada.

Figura 30 - Uso das Ferramentas Marquee, Lasso e Erase.

4.4 Edição de objetos Vetoriais e Texto

O Fireworks possui ferramentas para criar e editar vetores. São ferramentas

extremamente eficientes para gerar desenhos complexos, cujos objetos são editados

manualmente, nos mínimos detalhes. A ferramenta texto destaca-se por uma vasta

gama de opções de configuração, accessível no Painel Inspetor de Propriedades, que

será exibido mais adiante.

Veja na Figura 31 o exemplo de uso de ferramentas vetoriais. É possível ob-

servar diversos estilos de linha gerados pela Ferramenta Line. Para explorar todas as

propriedades dessa, assim como as possibilidades de ajuste de outras ferramentas,

basta utilizar o Painel Properties.

Ferramenta Line - desenha linhas retas;

Ferramenta Pen - desenha através de pontos de ancoragem;

Ferramenta Rectangle - desenha retângulos, quadrados e arredondados;

Ferramenta Text - cria blocos de texto.



58

Figura 31 - Uso das Ferramentas Line, Pen, Retangle e Text.

No exemplo da Figura 32, podemos verificar o processo de seleção do estilo de

linha com todas as variedades existentes, dentre as quais foram utilizadas quatro no

exemplo da Figura anterior.

Além do estilo de linha, é possível definir outras propriedades como cor da

borda entre outros efeitos.

Figura 32 - Propriedades da Ferramenta Line

A Ferramenta Text possui diversas opções de configuração assim como a

Ferramenta Line.

Para obter efeito similar ao exemplo da Figura 31, basta explorar a seleção de

fontes através do painel de Ferramentas conforme mostra a Figura 33.



59

Figura 33 - Propriedades da Ferramenta Text ao selecionar um estilo de Fonte

5 PREPARAR DOCUMENTO PARA HTML (SLICING)

Uma das grandes vantagens do Fireworks é a facilidade em exportar o Layout

para HTML em páginas da Web. No entanto, para que o Fireworks saiba qual fatia

do Layout deve recortar, ou simplesmente ignorar preenchendo com cores HTML ao

invés de imagem, é preciso informar adequadamente a seleção do documento.

Ferramenta Slice - indica as áreas do documento que serão recordadas para

HTML.

Na Figura 34 é possível analisar um exemplo de Banner. A primeira imagem

é a original e logo em seguida são exibidas as quatro áreas selecionadas, utilizando

a Ferramenta Slice. Dessa forma, ao ativar o recurso exportar, o Fireworks recortará

apenas as áreas selecionadas descartando o restante da imagem.



60

Figura 34 - Exemplo de uso das Ferramentas Slice.

Para exportar esse tipo de seleção, selecione o menu File > Export e informe

o formato HTML para gerar uma página da Web como resultado do Layout.

5.1 Aplicando cor e borda a objetos vetoriais

Objetos vetoriais possuem entre suas propriedades a cor de fundo assim co-

mo cor da borda. Para editar um dessas configurações, basta selecionar o objeto

desejado e escolher uma cor usando a Paleta de Cor Padrão do Fireworks, similar

à Figura 35. Também é possível fazer uma sintonia fina da seleção de cor, usando a

Seleção Avançada conforme ilustra a Figura 36.

Define uma cor para a borda do objeto selecionado;

Define a cor de fundo para o objeto selecionado.



61

Figura 35 – Paleta de Cores

Figura 36 – Sintonia fina de cores

5.2 Utilizando o Inspetor de Propriedades

Todas as ferramentas da Caixa de Ferramentas que acabamos de ver possu-

em configurações que podem ser acessadas e modificadas manualmente, possibili-

tando efetuar a sintonia fina de um Filtro ou Efeito de Sombra, por exemplo. Essas

configurações são centralizadas em um Painel específico chamado Inspetor de Pro-

priedades.



62

Observe na figura 37, a visualização do Painel Inspetor de Propriedades quan-

do a ferramenta Texto está selecionada na Caixa de Ferramentas:

Figura 37 - Painel Inspetor de Propriedade exibindo opções da Ferramenta Texto

O Painel Inspetor de Propriedade é um modo rápido e eficiente para aplicar

efeitos e filtros aos objetos suportados. No lado esquerdo superior é exibido o forma-

to de edição do objeto.

5.3 Alinhando objetos

Os comandos de alinhamento disponibilizam diversas opções prontas, permi-

tindo alinhar objetos ao longo de uma linha central, horizontal ou vertical, entre ou-

tras opções. Para acessar os comandos de alinhamento, selecione a opção mais

adequada em Modify > Align:

• Left: Alinha o objeto à esquerda;

• Center Vertical: Alinha o objeto no centro ao logo de uma linha vertical;

• Right: Alinha o objeto à esquerda;

• Top: Alinha o objeto ao topo;

• Center Horizontal: Alinha o objeto no centro ao logo de uma linha horizontal;

• Bottom: Alinha o objeto à base;

• Distribute Widths: Distribui uniformemente a largura dos objetos selecionados;

• Distribute Heights: Distribui uniformemente a altura dos objetos selecionados.

5.4 Girar, inverter e transformar objetos

O Fireworks disponibiliza várias opções para transformar objetos. Além da

transformação livre, é possível gira um objeto e invertê-lo conforme for necessário.



63

Para acessar este recurso, selecione Modify > Transform:

• Free Transform: Permite transformar livremente as dimensões do objeto;

• Rotate 180º: Gira o objeto 180º;

• Rotate 90º CW: Gira o objeto 90º no sentido horário;

• Rotate 90º CCW: Gira o objeto 90º no sentido anti-horário;

• Flip Horizontal: Inverte o objeto na horizontal;

• Flip Vertical: Inverte o objeto na vertical.

Observe na Figura 38 o uso da Ferramenta Free Transform, que possibilita edi-

tar livremente os pontos de dimensão do objeto. Em seguida, a ferramenta de rotação,

Rotate 180º, gira o objeto em um intervalo específico. Também é possível aplicar rota-

ções diferentes usando as variações da ferramenta no sentido horário ou anti-horário,

dentro do intervalo de 90º.

A Ferramenta Flip Vertical altera a perspectiva da imagem, invertendo sua o-

rientação na posição horizontal. Também é possível realizar a inversão na posição

vertical, usando a ferramenta Flip Vertical.

Esse recurso deve ser aplicado com cautela a imagens ou objetos que conte-

nham texto, pois, ao inverter uma frase na horizontal, por exemplo, ela se apresenta-

rá semelhante ao texto visto por meio de um espelho.

Figura 38 - Edição utilizando Free Transform, Rotate 180º e Flip Horizontal



64

5.5 Redimensionar área de desenho, dimensão e cor da de fundo

Comumente, é necessário alterar as dimensões do documento, liberar mais

espaço de edição ou realizar o contrário, diminuir a área de desenho para somente o

espaço utilizado. O Firewoks permite configurar facilmente essas e outras proprieda-

des, selecionando Modify > Calvas:

• Emane Size: Altera a dimensão original da imagem;

• Calvas Size: Altera a dimensão da área de desenho;

• Canvas Color: Define uma cor de fundo ou transparência para imagem;

• Trim Canvas: Elimina a área de desenho não utilizada na edição;

• Fit Canvas: Ajusta a área de desenho para o tamanho da imagem.

É possível acompanhar, na Figura 39, a imagem original na área de desenho

transparente, sem nenhuma cor de fundo presente. Em seguida, após aplicar a Ferra-

menta Trim Canvas, a área de imagem foi recorta, diminuindo para a máxima área da

imagem utilizada. Logo após, o fundo recebeu uma cor selecionada por meio da fer-

ramenta Canvas Color.

Figura 39 - Fundo de imagem transparente, seguido do afeito da Trim Canvas Canvas

Color

5.6 Utilizando Camadas (Layers)

Camada ou Layers é um recurso eficiente para organizar os elementos

distribuídos na edição de uma imagem. Através desse Painel, é possível seqüenciar



65

os objetos em subníveis, semelhante à organização de pasta/subpasta, conforme ilus-

tra a Figura 40.

Também é possível mover os objetos para cima ou para baixo de outro, con-

forme for necessário, basta selecionar o objeto desejado e aplicar uma das seguintes

opções no menu Modify > Arranje:

• Bring to Front: Trazer para frente de todas das camadas;

• Bring to Forward: Avançar sobre uma camada;

• Send Backward: Recuar sobre uma camada;

• Send to back: Enviar para traz de todas as camadas.

Figura 40 - Painel Gerenciador de Camadas

O Painel Layer gerencia todas as camadas do documento, possui recursos

eficientes que permitem ocultar algumas camadas ou simplesmente bloquear tempo-

rariamente sua edição. Também é possível informar um nome para cada camada, de

forma a facilitar a organização dos objetos.

É um recurso eficiente na edição de documentos que possuem uma infinidade

de camadas, no entanto, muitas vezes se torna necessário agrupá-los em estrutura de

pasta. Dessa forma, se torna fácil selecionar visualmente o objeto desejado.

O Fireworks permite agrupar objetos em uma única camada. Para agrupar duas ou

mais camadas, selecione Modify > Group, ou faça o processo inverso Modify >

Ungoup.

Perceba, na Figura 41, que a visualização da camada não é alterada mesmo

depois de agrupadas, quando os objetos passaram a ser editados como apenas um

único objeto.



66

No Painel Layer é possível acompanhar o número de objetos agrupados que

seguem, após a intitulação Group.

Figura 41 - Painel Gerenciador de Camadas exibindo os objetos agrupados

5.7 Utilizando Mascara (Mask)

Mascara é um recurso versátil para criar efeitos utilizando mais de dois obje-

tos. Com esse recurso, é possível mesclar duas imagens e manter algumas proprie-

dades entre elas. Para aplicar esse efeito, selecione um grupo de objetos, em segui-

da, selecione Modify > Mask > Group as Mask.

Veja o exemplo da Figura 42.

Figura 42 - Antes e depois de ser aplicado mascara aos objetos

5.8 Trabalhando com formas e objetos

O Fireworks disponibiliza diversas opções para combinar objetos em apenas

um. É possível conectar os pontos da extremidade de dois objetos abertos para criar



67

um único trajeto fechado, ou é possível juntar objetos múltiplos para criar um único

objeto.

Podemos observar, na figura 43, à esquerda, dois objetos sobrepostos, um

quadrado e um circulo. Logo em seguida vemos o resultado, ao aplicar o efeito union

que descartou toda a área que unia os dois objetos. Ao contrário da union, o efeito

intersect é excelente para realizar o inverso e manter apenas as áreas comuns entre

os objetos. Finalmente, o efeito punch remove apenas uma parcela do objeto sele-

cionado, utilizando como orientação o objeto que está imediatamente sobreposto ao

primeiro.

Para utilizar esses efeitos, selecione os objetos cuja forma deseja modificar,

selecione Modify > Combine Paths e aplique o efeito desejado: Union, Intersect ou

Punch.

Figura 43 - Duas formas (quadrado e circulo) seguidas do efeito union, intersect e

punch

Na Figura 44, podemos verificar um exemplo melhor do efeito Punch. Perceba

que, ao selecionar os três círculos, o efeito descarta um dos objetos e unifica todas as

trajetórias, formando um novo objeto.

Figura 44 - Exemplo do efeito punch



68

Síntese da Aula

Nesta aula, conhecemos a ferramenta Fireworks e suas ferramentas de edição

e criação básicas.

Praticamos também a exportação de arquivos para a utilização em páginas.

Na próxima aula, construiremos um site, do início ao fim.


1) Encontre imagens de tipos diferentes, como fotos pessoais, desenhos de filmes,

logomarcas, etc., e exporte-os com as propriedades apresentadas nesta aula.]

2) Reproduza estas imagens no Fireworks:



69

Aula 5

Desenvolvendo Uma Solução Real

Objetivos da aula


• Aplicar os estudos das cinco aulas;

• Pôr em prática a teoria apresentada;

• Criar um projeto que integre todas as áreas.

Conteúdos da aula



• Criando elementos;

• Exportando / Importando imagens;

• Criando o HTML.


Após familiarizar-se com o ambiente do Fireworks e

seus principais recursos, será apresentado, passo-a-

passo, o desenvolvimento de um Layout para um Hotsite baseado

no Caso de Uso da empresa Salvador Móveis.

Boa aula!



70

1 CASO DE USO SALVADOR MÓVEIS

Hotsites, geralmente, são sites pequenos (com poucas páginas), criados

com propósito específico e provisório. É nesse momento que o Fireworks demonstra

suas vantagens, como o ganho de tempo e produtividade, pois a própria ferramenta

permite exportar todo o Layout diretamente para HTML.

1.1 Criando um Novo Documento

1. Escolha File > New na barra de menus;

2. Na caixa de diálogo, informe o Width 800 e Height 600;

3. Selecione a opção Custom e escolha a cor de fundo Preta para a nova imagem

(figura 45).

Figura 45 - Propriedades de um Novo Documento

1.2 Importando imagens

Neste exemplo foram importadas duas imagens para o ambiente de edição do

Fireworks. O logo da empresa Selbetti e a imagem de uma cadeira. Esse processo



71

pode ser feito seguindo os passos seguintes:

1. Escolha File > Import na barra de menus;

2. Selecione a imagem que deseja importar;

3. Clique e arraste o mouse na Área de Desenho do Fireworks para colar a imagem

(figura 46).

Figura 46 - Importando imagens

1.3 Inserindo texto

Teremos duas chamadas em texto: uma principal e outra que será a assinatura

da página.

Para esse procedimento, utilize a Ferramenta de Text , modificando suas

propriedades pelo Painel Inspetor de Propriedades.

Veja o resultado na Figura 47.



72

Figura 47 - Criando chamada em texto e assinatura

1.4 Cortando a imagem

O processo de desenho do Layout está completo, agora será usada uma fer-

ramenta especial para cortar a imagem.

Na Caixa de Ferramenta, selecione o recurso Crop , e defina a área da i-

magem que deve ser cortada. A Figura 48 ilustra os dois momentos, da seleção até a

imagem já cortada.

Figura 48 - Selecionando e cortando a imagem



73

1.5 Selecionando área para exportar

Utilizando a Ferramenta Slicing , delimite todas as áreas do documento que

deseja exportar. Veja, no exemplo da figura 49, os blocos em tom verde após definidas

as imagens que serão recortadas pelo Fireworks.

Figura 49 - Selecionando área com a Ferramenta Slicing

1.6 Exportar para HTML

Neste momento, é possível exportar o Layout diretamente para o formato HTML

(figura 50). É possível observar, em seguida, na Figura 51, as imagens que foram

criadas automaticamente pelo Fireworks.

1. Escolha File > Export na barra de menus;

2. Informe um nome para o arquivo;

3. Selecione logo abaixo a opção HTML and Images.

4. Clique no botão Export.



74

Figura 50 - Exportando para HTML

Figura 51 - Imagens criadas pelo Fireworks



75

1.7 Editando a página HTML

Ao exportar, o Fireworks gera uma série de código HTML desnecessário. Para

tornar a página mais leve, clique com o botão direito sobre a página HTML e selecione

abrir com Bloco de Notas. Se desejar, utilize seu editor de texto preferido.

Inicialmente, iremos retirar todas as imagens na cor preta, pois não são ne-

cessárias em nossa página HTML, uma vez que a tela já possui fundo preto. Traba-

lhando com Wight e Height, das cédulas de nossa tabela, é possível obter o mesmo

resultado, porém a página irá carregar muito mais rápido.

Você aprenderá a trabalhar com o código HTML em uma aula específica. Veja

na figura 52 como terminou a edição do HTML 52 e o resultado final, visualizado no

navegador, conforme mostra a Figura 53.

Figura 52 - Editando código HTML



76

Figura 53 - Visualização do Hotsite no navegador

1.8 Considerações Finais

Além de reunir diversos recursos em um único aplicativo, o Fireworks interage

com o usuário através de uma interface intuitiva que diminui o grau de aprendizagem,

ao mesmo tempo em que é possível desenvolver soluções profissionais em poucas

horas trabalho.

O Fireworks suporta a integração de extensions, desenvolvidos para soluções

específicas. Extensions é um poderoso recurso que adiciona novas funcionalidades

não existentes nativamente

Para gerenciar extensions, ative o aplicativo Macromedia Extension Manager

(Figura 54), que acompanha a instalação padrão da ferramenta. Com essa interfa-

ce, é possível localizar novas extensions na Internet, muitas delas disponíveis gratui-

tamente para download.



77

Figura 54 - Gerenciador de Extension

Síntese da Aula

Nesta quinta e última aula verificamos como se cria uma estrutura visual no

Fireworks, passando por várias ferramentas e chegando até a sua exportação para

sites, com o cuidado de otimizar o tempo de download para o usuário.

Concluímos este módulo, você chegou lá!

Parabéns!



78


1) Agora que você já fez todas as aulas, sugiro que utilize tudo o que aprendeu para o

seu proveito, em um exercício possível de utilizar em outras aulas: fazer o seu site.

Hoje quem tem um currículo bem feito e com conteúdo de qualidade se destaca no

mercado. Imagine se você tiver uma página na internet?

A idéia é você criar nesse exercício, uma página com o seu currículo. Elabore a iden-

tidade visual, estruture o que quer apresentar, se quer colocar algo mais do que suas

aulas, fale do curso de EAD, fale das atividades que realiza, os livros que leu, etc.

Utilize tudo o que você aprendeu até agora. Se o resultado for bom, quer dizer que

você tem um bom currículo nas mãos e que realmente aprendeu.

Guarde esses arquivos, pois em outras disciplinas você pode utilizar para programar,

linkar e publicar.

Aproveite.



79

REFERÊNCIAS

KRUG, S. Não me faça pensar: Uma abordagem de Bom Senso à Usabilidade na

Web. 3. ed. Alta Books, 2006. 144p.

LEMAY, L. Aprenda a Criar páginas Web com HTML e XHTML em 21 dias. Makron

Books 2002. 1110p.

MEMÓRIA, F. Design para a Internet: projetando a experiência perfeita. Rio de

Janeiro: Elsevier, 2005. 171 p.

NIELSEN, J.; TAHIR, M. Homepage Usabilidade: 50 websites desconstruídos.

EUA: New Riders Pub, 2002. 315 p.

WILLIAMS, R. Design para quem não é designer. 2. ed. [S.l.]: CALLIS, 2005.191 p.



80

Sobre o Autor

Professor por acaso, mas com paixão. Pós-graduado em Comunicação Empresarial e

Relações Públicas e Graduado em Design Gráfico pas-

sando pela Escola Técnica, como aluno do curso de Pro-

cessamento de Dados. Essas várias áreas permitiram-

me ser um empreendedor. Trabalhei como designer, no

meu escritório, paralelamente, lecionei na SOCIESC as

disciplinas de computação gráfica, multimídia, desenho

de observação, análise de sistemas entre outras. Por um tempo, afastei-me do Bra-

sil, buscando horizontes mais distantes, trabalhando na Espanha, em Madrid, como

analista de mercado na Dell Computers e, logo após, como Web Designer em uma

agência de internet.

Atualmente trabalho como coordenador de comunicação na Selbetti Gestão de

Documentos e, além disso, sou o arquiteto de informação dos sistemas desenvolvidos

internamente.

Sou um estudioso dos meios digitais de comunicação e interação, além de

projetos pessoais atuo como freelancer. Meu site tem todos os meus contatos e in-

formação, basta acessar www.giuvicente.com.



81

Copyright © Tupy Virtual 2007

Nenhuma parte desta publicação pode ser reproduzida por qualquer meio sem a prévia autorização desta instituição.

Autor: Giuliano Vicente

Comunicação Visual Para WEB: Material didático / Giuliano Vicente

Design institucional: Thiago Vedoi de Lima; Cristiane de Oliveira - Joinville: Tupy Virtual, 2007

Ficha catalográfica elaborada pela Biblioteca Universitária Tupy Virtual

Créditos

SOCIESC – Sociedade Educacional de Santa Catarina

Tupy Virtual – Ensino a Distância

Rua Albano Schmidt, 3333 – Joinville – SC – 89206-001Fone: (47)3461-0166E-mail: [email protected]: www.sociesc.org.br/portalead

Diretor GeralSandro Murilo Santos

Diretor de AdministraçãoVicente Otávio Martins de Resende

Diretor de Ensino, Pesquisa e ExtensãoRoque Antonio Mattei

Diretor do Instituto Superior TupyWesley Masterson Belo de Abreu

Diretor da Escola Técnica TupyLuiz Fernando Bublitz

Coordenador da Escola Técnica TupyAlexssandro FossileAlan Marcos Blenke

Coordenador do CursoJuliano Prim

Coordenador de ProjetosJosé Luiz Schmitt

Revisora PedagógicaNádia Fátima de Oliveira

EQUIPE TUPY VIRTUAL

Raimundo Nonato Gonçalves RobertWilson José MafraThiago Vedoi de LimaCristiane Oliveira

Design GráficoThiago Vedoi de Lima

Equipe Didático-PedagóciaGiuliano Vicente

EDIÇÃO – MATERIAL DIDÁTICO

Professor ConteudistaGiuliano Vicente

Design InstitucionalThiago Vedoi de Lima

Cristiane Oliveira

Ilustração CapaThiago Vedoi de Lima

Projeto GráficoEquipe Tupy Virtual

Revisão OrtográficaNádia Fátima de Oliveira

apostila comunicação visual para web

Documents