Apostila comunicação visual para web

Comunicação Visual Para Web
Edição nº1 - 2007

Prof. Giu Vicente
Apoio

Gestão e Execução

Conteúdo e Tecnologia

Comunicação Visual Para WEB

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 revisado 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, email 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.

SOCIESC - Sociedade Educacional de Santa Catarina


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

1

10

1

5

2

10

2

15

Conteúdos
PRIMEIROS PASSOS DE UM
PROJETO DE WEBSITE: briefing; arquitetura da informação;
wireframes; usabilidade; navegabilidade.
PROJETO GRÁFICO: Identidade Visual; Cores; Tipografia;
Gráficos.
FUNDAMENTOS SOBRE IMAGENS: Raster vs Vetorial; Imagens na Web; GIF; JPG; PNG;
Utilização das imagens; Profundidade de cor; Formato de Arquivos.
• FIREWORKS: Conhecendo o
software; Criando e exportando
documentos; Ferramentas de
criação e edição.
• DESENVOLVENDO UMA
SOLUÇÃO REAL: Criando elementos; Exportando/Importando
imagens; Criando o HTML.

Data/Avaliação
_/_ a _/_

_/_ a _/_

_/_ a _/_

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



Aula 1

Primeiros Passos de Um Projeto de
Website
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!


7


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: Questioná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 arquitetura)

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 desenvolvimento 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 ferramenta em que possa desenhar linhas, textos e posicioná-los da forma que quiser.



Figura 2 – Wireframe – Caneta e Papel
Fonte: site www.radiouniao.fm.br

Figura 3 – Wireframe Digital

Fonte: site www.radiouniao.fm.br


11


Figura 4 – Site Final

12

Fonte: www.radiouniao.fm.br

Dicas para projetar um bom “arame”
» Desenhe sempre pensando no tamanho das áreas em pixel, ou seja, proporcional 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 pelos 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ágina 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 utilizada 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 conteúdo do site mantêm o padrão.



Figura 6 - Site da empresa Selbetti

Fonte – www.selbetti.com.br

Figura 7 - Site do Cantor Cubano Odín

Fonte - www.odinmudic.com


14


15

A Figura 7 demonstra que a navegação horizontal, no topo, permite liberdade ao conteú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 superior 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 facilita a navegação do usuário que não precisa “tentar” entender o site, apenas busca
nas áreas convencionadas o que realmente deseja.



Figura 10 - Ipod Nano

17

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 informaçõ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 naveguem 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, utilizamos 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áginas.

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 colega 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 visualizaçã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 conteú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 semelhantes;


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 informaçã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.



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´smãos-de-tesoura, mas vamos realmente dar uma cara adequada
ao projeto, vamos dar vida ao que já planejamos.
Boa aula!


23


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 possibilidades 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 interessantes 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 expressar “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 monitores, 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 consideradas 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 arestas 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 adequadas 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 enfeitar. Cuidado ao usá-las. Normalmente são mais usadas para desenvolver logotipos.

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 serifa, 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 matriz) 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 associarei 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:



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


30


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


31


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



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!


34


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 corretamente.
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 pontos 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 scanners, 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 resoluçã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 formato 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 estar 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 softwares 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 “aparecendo” 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 navegadores 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 navegadores 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. Escolhendo o formato errado, as imagens terão péssima aparência e levarão uma eternidade 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áficos 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.



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

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

42

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 imagem 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 iniciar 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 dimensionamento.
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

CompuServe GIF

BMP

WMF

TIF

Muitos aplicativos para PC e MAC produzem 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 imagem Postscript será mostrada na tela, salvo
se uma imagem de mapas de bits (TIFF ou
WMF) estiver incluída com o arquivo EPS.
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.
Arquivos BMP: Os BMP’s podem ser criados no Windows’ Paintbrush e usados como
“wallpaper” no background quando rodamos
o Windows.
Os arquivos Windows Meta File geralmente
são gerados no formato Aldus Placeable
Metafile (que contém um cabeçalho com informaçõ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 metaarquivo.
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-comprimido.



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 fotografias? Por quê?
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
____________________________________________________________________



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 recursos utilizados para desenhar páginas Web, usando
como ferramenta o software Fireworks. Embora possua uma infinidade 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!


47


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, depois que elas foram criadas, além de disponibilizar ferramentas sob medida para aperfeiç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 à Largura 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 Ferramentas, 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 momento de edição (Figura 22). Para ativar o assistente, selecione File > Export Wizard.

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. Optou-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 navegador 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 possibilidade 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 poucos 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 Figura 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 selecionar 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 Ferramenta 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, possibilitando 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 Propriedades.


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 formato 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 outras 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 apresentará 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 propriedades, 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 Ferramenta 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 ferramenta 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 ilustra 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 temporariamente 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 propriedades entre elas. Para aplicar esse efeito, selecione um grupo de objetos, em seguida, 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 selecionado, 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:



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-apasso, o desenvolvimento de um Layout para um Hotsite baseado
no Caso de Uso da empresa Salvador Móveis.
Boa aula!


69


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.



Figura 50 - Exportando para HTML

Figura 51 - Imagens criadas pelo Fireworks


74


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. Trabalhando 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 interface, é possível localizar novas extensions na Internet, muitas delas disponíveis gratuitamente 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 identidade 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 passando pela Escola Técnica, como aluno do curso de Processamento de Dados. Essas várias áreas permitiramme 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 Brasil, 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 informaçã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

Design Gráfico
Thiago Vedoi de Lima

Tupy Virtual – Ensino a Distância
Rua Albano Schmidt, 3333 – Joinville – SC – 89206-001
Fone: (47)3461-0166
E-mail: ead@sociesc.org.br
Site: www.sociesc.org.br/portalead
Diretor Geral
Sandro Murilo Santos
Diretor de Administração
Vicente Otávio Martins de Resende
Diretor de Ensino, Pesquisa e Extensão
Roque Antonio Mattei
Diretor do Instituto Superior Tupy
Wesley Masterson Belo de Abreu
Diretor da Escola Técnica Tupy
Luiz Fernando Bublitz

Equipe Didático-Pedagócia
Giuliano Vicente

EDIÇÃO – MATERIAL DIDÁTICO
Professor Conteudista
Giuliano Vicente
Design Institucional
Cristiane Oliveira
Ilustração Capa
Projeto Gráfico
Equipe Tupy Virtual
Revisão Ortográfica
Nádia Fátima de Oliveira

Coordenador da Escola Técnica Tupy
Alexssandro Fossile
Alan Marcos Blenke
Coordenador do Curso
Juliano Prim
Coordenador de Projetos
José Luiz Schmitt
Revisora Pedagógica
Nádia Fátima de Oliveira

EQUIPE TUPY VIRTUAL
Raimundo Nonato Gonçalves Robert
Wilson José Mafra
Cristiane Oliveira


Apostila comunicação visual para web

Recommended

Recommended

More Related Content

What's hot

What's hot (13)

Similar to Apostila comunicação visual para web

Similar to Apostila comunicação visual para web (20)

Apostila comunicação visual para web