Apostila Comunicação Visual para Web PDF

Comunicao Visual Para Web
Edio n1 - 2007
Prof. Giu Vicente
Apoio Gesto e Execuo Contedo e Tecnologia

Comunicao Visual Para WEB 2
Apresentao
Este livro didtico contm a disciplina de Comunicao Visual Web, cujo con-
tedo, ora apresentado, coloca voc diante de um novo desafio: obter conhecimentos
para desenvolver comunicao visual para a Internet.
Comunicar um ato comum a todos os seres humanos. Voc se comunica a
todo o momento e no s falar com os outros, expressar-se, fazer-se entender.
Comunicao interao. Se formos pensar em todo o processo (e resumir o que
estudiosos dizem) a comunicao no acontece sozinha, precisa de um emissor, um
meio, uma mensagem e um receptor.
Voc se comunica pelas roupas, cabelo, olhar ou no olhar, tipos de comuni-
cao mais comuns que conhecemos.
Neste livro voc encontrar um tipo de comunicao considerado novssimo,
no mercado de trabalho, o visual linha do design grfico que hoje assume o papel
de designer de interao, mas vai alm disso. Um designer de interao planeja como
as informaes sero agrupadas e apresentadas para o internauta. Discute quais as
aes de uma pgina, 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 contedo 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 tambm 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 dvida 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

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

CRONOGRAMA DE ESTUDOS .................................................................................... 5
PLANO DE ESTUDOS ................................................................................................... 6
1. PRIMEIROS PASSOS DE UM PROJETO DE WEBSITE .............................................. 7
2. PROJETO GRFICO ............................................................................................... 23
3. FUNDAMENTOS SOBRE IMAGEM ......................................................................... 34
4. FIREWORKS ........................................................................................................... 47
5. DESENVOLVENDO UMA SOLUO REAL............................................................ 69
REFERNCIAS .......................................................................................................... 79

Carta do Professor
O nico local onde
o sucesso vem antes do trabalho
no dicionrio.
Albert Einstein
Caro aluno designer,
Trabalhar com Internet, desenvolver para Internet, uma atividade de grande

atuao no mercado hoje. Voc est entrando em uma profisso do futuro, e pessoas
assim devem estar sempre atentas ao seu redor.
No aprendemos somente em uma sala de aula, com um livro, ou com um pro-
fessor (mesmo que sejam timos e importantes). Tambm possvel aprender pela
observao e anlise. 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 no 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

Cronograma de Estudos
Acompanhem no cronograma abaixo os contedos das aulas, e atualize as

possveis datas de realizao de aprendizagem e avaliaes.
Semanas Horas/aula Contedos Data/Avaliao

PRIMEIROS PASSOS DE UM
PROJETO DE WEBSITE: brie-
1 10 fing; arquitetura da informao; _/_ a _/_
wireframes; usabilidade; naveg-
abilidade.
PROJETO GRFICO: Identida-
1 5 de Visual; Cores; Tipografia; _/_ a _/_
Grficos.
FUNDAMENTOS SOBRE IMA-
GENS: Raster vs Vetorial; Ima-
2 10 gens na Web; GIF; JPG; PNG;
Utilizao das imagens; Profun- _/_ a _/_
didade de cor; Formato de Ar-
quivos.
FIREWORKS: Conhecendo o
software; Criando e exportando
documentos; Ferramentas de
2 15 criao e edio. _/_ a _/_
DESENVOLVENDO UMA
SOLUO REAL: Criando ele-
mentos; Exportando/Importando
imagens; Criando o HTML.

Plano de Estudos
Bases Tecnolgicas
Arquitetura da informao; Wireframe; Navegabilidade; Usabilidade; Identidade
Visual; Imagens digitais; Software grfico.
Objetivo Geral
Desenvolver web sites com metodologia e conceitos de design e usabilidade.
Objetivos Especficos
Estudar a organizao de sites
Compreender a importncia 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 grfico.
Carga Horria: 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 prtica de um projeto de arquitetura da informao;
Desenvolver wireframes para aprovao e testes;
Constatar a existncia e a importncia da usabilidade e da
navegabilidade.
Contedos da aula

Acompanhe os contedos desta aula. Se voc preferir, as-
sinale-os medida em que for estudando.
Briefing
Arquitetura da Informao
Wireframes
Usabilidade
Navegabilidade
Prezado(a) aluno(a)!
Antes de partirmos para a execuo tcnica do Layout,
temos alguns passos fundamentais para analisar que
traro resultados mais eficientes para o nosso produto final.
Mos obra e boa Aula!

1 BRIEFING

Esta estranha palavra, Briefing, mais utilizada pelos publicitrios, que gostam
de estrangeirismos. Ns, do meio de informtica, tambm utilizamos muitos deles,
inclusive briefing. Para simplificar a histria, poderamos chamar o briefing de: Ques-
tionrio para definio de objetivos.
So informaes que voc ir obter em uma entrevista com o cliente, e nin-
gum, alm dele, pode responder s perguntas.
Entre outras perguntas podemos partir para o bsico:
Qual o segmento da empresa e quais servios/produtos oferece?

Quem o pblico-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 contedo. (Tpicos gerais e especficos 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 Informao (AI)
Temos grande parte das informaes, mas: como vamos organiz-las?
1.1.1 Arquitetura? Isso informtica?
No dicionrio, a palavra arquitetura significa: arte de edificar ou de projetar e

traar planos. Exatamente o que faremos: estruturar e planejar a informao do site,
contedos relacionados entre si e a estruturao dos fluxos de navegao.
Aqui faremos o possvel para que o usurio no se perca, navegando sem ter
que pensar muito, de modo fcil e intuitivo.

Alguns dos resultados da Arquitetura da Informao (AI) so os wireframes e o mapa

do site.
1.1.2 Como fao isso? O mapa
Com as respostas do briefing em mo, vamos definir como deve ser o site. Va-
mos partir de uma empresa que queira:
mostrar sua histria, abrangncia, etc. - (A empresa);
mostrar tambm seus servios e produtos - (Servios);
deseja dar destaque para os clientes e os casos j realizados - (Clientes);
quer deixar um espao 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 ligaes principais so feitas sob a forma de agrupamentos e
as linhas tracejadas so links existentes entre os ncleos no exemplo da figura 1, a

pgina contato. Essa uma pgina importante para que o cliente tenha aproximao
com a empresa, por isso, muitas pginas tm links diretos com ela.
Lembre-se: quanto maior o website, mais complexa ser sua arquitetura de

informao.
1.2 Wireframes: o esqueleto do site
Arame essa a definio mais prxima do que significa wireframe. Com esse
mtodo desenha-se o conceito, estrutura-se o resultado do briefing. Voc deve pensar
e esquematizar em que posio estar o menu, a busca, o contedo, a logo. a fase
em que voc testar a organizao do contedo a ser apresentado na pgina, o todo.
Ainda no estamos falando de estilo visual, nem de cores, nem de imagens, mas de
disposio de contedo. Esse o primeiro passo antes de iniciarmos o desenvolvim-
ento do design grfico da pgina.
Para esse procedimento, podemos utilizar papel e lpis (figura 2). Como nes-
sa fase no estamos falando de cores, mas de contedo, devemos utilizar tons de
cinza (variao do preto at o branco) para destacar a importncia das reas (figura
3). Quanto mais escuro, mais importante. (Isso no uma regra, mas pode ajudar).
Na criao das propostas, logo aps, criamos os melhores desenhos em
qualquer ferramenta grfica (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.

Figura 2 Wireframe Caneta e Papel

Fonte: site www.radiouniao.fm.br
Figura 3 Wireframe Digital

Fonte: site www.radiouniao.fm.br

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 prximo possvel do contedo, no escreva nononononon ou
xxxxxxxx, isso far com que o texto parea falso. Existe um texto muito utilizado pe-
los designers que o Lorem ipsum dolor set amet, utilize-o para contedo de texto,
no para ttulos, que devem se aproximar ao mximo do real;
Cuidado com a rolagem vertical, se voc definiu reas mais importantes na pgi-
na inicial, no as deixe abaixo da rolagem.
Felipe Memria - o designer que reformulou todo o site da globo.com - em seu livro
Design: projetando a experincia perfeita (2006), comenta que a estrutura mais uti-
lizada no mundo ocidental se aproxima do que mostramos na Figura 5.

Figura 5 - Padro de layout definido por Felipe Memria
Preste ateno: isto uma conveno no uma regra, mas para sites cujo
objetivo seja a simplicidade e a correta comunicao, serve como uma luva.
Para mostrar que nem tudo que fora das convenes ruim, seguem ima-
gens de sites fantsticos, cuja estrutura convencional pode ser muito bem explorada
com um projeto grfico diferenciado.
A Figura 6 mostra o site da Selbetti Gesto de Documentos, cuja navegao
interna, do lado direito, e o menu, do lado esquerdo, fogem ao padro tradicional, mas
no comprometem a navegao e a organizao. A logomarca, assinatura e o con-
tedo do site mantm o padro.

Figura 6 - Site da empresa Selbetti

Fonte www.selbetti.com.br
Figura 7 - Site do Cantor Cubano Odn

Fonte - www.odinmudic.com

A Figura 7 demonstra que a navegao horizontal, no topo, permite liberdade ao con-

tedo exposto, com a logomarca centralizada. A navegao interna das pginas 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-
putao grfica e desenvolvimento web, tem o seu layout como padro estabelecido.
A logo, navegao vertical e a rea de pesquisa seguem o padro. Mostra a barra su-
perior completa, assinatura no rodap, os links principais do site, alm de informaes
sobre a empresa.

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 publicao de uma entrevista, programa de rdio, leitura, etc. em formato de udio.) (Figura
9) Apresenta-se graficamente com um estilo diferente, mas a sua estrutura a mesma
do padro definido por Memria. Perceba, em suas navegaes, que esse padro fa-
cilita a navegao do usurio que no precisa tentar entender o site, apenas busca
nas reas convencionadas o que realmente deseja.

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, tambm no foge regra. A logo, navegao e assinatura se mantm
com as funes padro. Alm do posicionamento clssico, a grande diferena do site
o contedo, sempre diferente em cada categoria. A formatao da pgina permite
desvincular o topo e a assinatura do miolo (centro da pgina), totalmente liberado
para a criatividade.

Dicas
O logotipo da empresa deve, preferencialmente, ser mantido esquerda, pois
deve ser o primeiro elemento que o usurio ver, identificando onde ele est;
A navegao deve estar em locais acessveis.
Repito: No uma regra! Todos esses estudos so as melhores prticas que
conhecemos hoje. O que faremos uma conveno, 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 eficincia da experincia do usurio com um de-
terminado produto, que pode ser desde um rdio-relgio at uma pgina da Internet.
No conceito Web, define-se por um design que ajuda o internauta a encontrar infor-
maes, servios 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 mdia, com qual tecnologia e de que maneira. A usabilidade serve
para todos os produtos que tm interface com o usurio. Chamo de interface o painel
de botes de um liquidificador, por exemplo. A usabilidade est atrelada ergonomia,
outro assunto bem interessante.
Vamos exemplificar a usabilidade com um celular. Para que tenham noo do
que estamos falando, peguem o celular ou circulem os celulares entre vocs e nave-
guem pela agenda - chamadas recebidas. Verifique as mensagens enviadas. Todos os
acessos so diferentes entre aparelhos e fabricantes. Pensar nesse acesso pensar
em usabilidade, pensar que normalmente utilizamos uma das mos, ou menos, utiliza-
mos um dedo apenas. Essa dificuldade ou facilidade um exemplo de usabilidade.

Pensemos em quantos botes utilizamos para chegar a cada item desses,

quantas informaes teis vemos em tela ao mesmo tempo?
Agora voc tem idia 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 navegao entre as pgi-
nas.
Para alguns gurus, citemos dentre eles Jackob Nielsen, se o usurio tiver que
clicar mais do que duas vezes para chegar ao destino a navegabilidade regular, e se
s depois de trs cliques o usurio chegar ao destino, a navegabilidade ruim. Vamos
ser menos rigorosos, mas continuar atentos.
Como frmula geral e bsica para uma boa navegabilidade, o usurio deve
responder rapidamente trs perguntas:
Onde estou?
De onde vim?
Para onde vou?
Vamos voltar ao celular para confirmarmos os exemplos reais. Faam as mes-

mas navegaes anteriores e verifiquem se h outras formas de acessar a mesma
informao e se voc sabe onde est e para onde vai. Um bom exerccio 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. Faam estas trs 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 vocs). Vocs vero coisas muito interessantes.
Observe os erros mais comuns cometidos pelos desenvolvedores de sites, se-
gundo Jackob Nielsen:

Os principais erros que dificultam a experincia do usurio

reas saturadas com objetos rolantes e animados, que sobrecarregam a
viso do usurio;
Scroll longo;
Cores de links no-padro;
Longo tempo de download do website;
Longos nveis hierrquicos dos diretrios de websites;
Pginas rfs, que no esto relacionadas a outras pginas;
Quebra de consistncia;
Oferta de um link de mailto: ao invs de links para uma pgina com informaes
de contato;
Grandes blocos de texto;
Pginas linkadas a si prprias;
Informao excessiva ou desnecessria;
Incompatibilidade de browsers.
www.useit.com o site de Nielsen.

Nielsen ainda sugere algumas prticas para quem no quer falhar:
Melhores Prticas e Regras

Mantenha todos os links com um estilo padro. Eles no precisam ser azuis
(cor padro do navegador) e sublinhados, como sugere Jakob Nielsen, mas devem
ser diferenciados, possuir cores e estilo que os identifiquem e os torne de fcil visu-
alizao;
Os ttulos dos links devem ser auto-explicativos. Coloque os links em palavras
significativas, evitando termos genricos como Clique aqui e Mais;
Oferea design leve e agradvel, use poucas imagens: as pessoas procuram con-
tedo;
Evite textos longos e redundantes. O contedo deve conter pargrafos curtos e
sentenas simplificadas;
No oferea muitas reas de navegao, principalmente se os links forem seme-
lhantes;

Evite menus suspensos;

As opes e informaes mais importantes devem estar acima da primeira
rolagem de tela;
As caixas de entrada de busca devem possuir um tamanho adequado para que os
usurios possam ver e editar mais facilmente a sua consulta;
No surpreenda os usurios: no abra janelas pop-ups automaticamente;
No coloque links para Voltar a Pgina Anterior. No tente reproduzir controles
do navegador;
Os usurios no devem clicar em mais de trs links para chegar at a infor-
mao que desejam;
O usurio precisa saber: de onde veio, por onde andou e por onde pode navegar.
Sntese da Aula
Nesta aula iniciamos os assuntos gerais e introdutrios para um projeto de

arquitetura da informao, para que voc possa entender melhor os conceitos das
aulas.
Vimos como so construdos os sistemas para serem utilizados pelo usurio.
Analisamos sites que trabalham com diferentes disposies e vimos o padro
de layout utilizado na grande maioria dos sites.
Na prxima aula veremos os elementos dos projetos grficos.

Exerccios Propostos
1) Vamos partir para estudos prticos e ligados teoria. Escolha duas das figuras
apresentadas (entre a Fig. 6 e a Fig. 10) e faa anlises das dicas de erros e acertos
apresentados por Nielsen.
2) Construa um mapa do site de trs empresas:

1 Da instituio 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, famlia, etc.)
3) Eleja um dos trs mapas criados acima e desenvolva um exemplo de WIREFRAME

de como poderia ser apresentado o contedo dessa empresa.

Aula 2
Projeto Grfico (Design)
Objetivos da aula
Reconhecer e interpretar elementos de uma identidade visual;

Identificar a aplicabilidade de diferentes tipografias;
Distinguir elementos grficos.
Contedos da aula

Identidade Visual
Cores
Tipografia
Grficos
Prezado(a) aluno(a)!
J temos o esqueleto o wireframe. Temos os rgos
o briefing. Agora precisamos da musculatura e da pele.
Parece papo de cientista maluco, tipo Frankenstein ou Eduards-
mos-de-tesoura, mas vamos realmente dar uma cara adequada
ao projeto, vamos dar vida ao que j planejamos.
Boa aula!

1 IDENTIDADE VISUAL
Assim como o seu documento de identidade o RG o(a) identifica, a marca,

ou conceito grfico a identidade da empresa, organizao, instituio de ensino,
etc. A identidade visual importante para o projeto web, pois trata da adequao aos
padres da empresa e permite que o cliente, ao acessar o site, no encontre outra
empresa e que faa a ligao do mundo real com o virtual.
A maioria das empresas possui marcas e elementos definidores de sua iden-
tidade visual representao 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 tm a sua marca e um
identidade que se compe de elementos diferentes, mas com uma gama de possibili-
dades muito parecidas.
Alguns elementos que formam essa identidade vo ser abordados, ainda que
superficialmente, a seguir:
1.1 Cor
Cores so elementos de identificao, mas, algumas vezes, podem fazer com

que seus usurios fujam do site.
Inconscientemente nos sentimos bem com algumas cores e mal com outras,
depende do usurio, porm, podemos criar algumas regras para que isso no fuja
tanto dos padres.
Verifique nesses dois sites possibilidades de combinao de cores interes-

santes para se utilizar.
http://wellstyled.com/tools/colorscheme2/
http://kuler.adobe.com/

Significados de cores (Convenes)

Preto: muito mrbido para ser usado como plano de fundo na Internet, mas
vlido de acordo com a idia que ser transmitida. De certa maneira representa
requinte, se combinado a outras cores como tons pastis, mas ainda assim muito
pesado.
Branco: cor bsica, suaviza o layout e combina muito bem com cores claras ou
escuras. Ideal para plano de fundo.
Vermelho: transmite calor, vida, inovao. Chama a ateno para o tema.
Azul: passa certa seriedade, confiana, calma e uma cor que consegue expres-
sar tecnologia.
Pastel: cores delicadas, ideal para sites femininos, de culinria, 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 sade, medicina, natureza.
Nos computadores, as cores so representadas por nmeros hexadecimais e

podem ser RGB, CMYK (figura 11) e tabelas especficas como a PANTONE.
Figura 11 - Cores aditivas [a] e Subtrativas [b]
As cores que utilizamos para a Internet so RGB cores aditivas. Com a soma
das trs cores (red, green, blue) chega-se ao branco, ao contrrio do CMYK cores
subtrativas (cyan, magenta, yellow) cuja soma nos d o preto (K).
Cores aditivas so aquelas cuja soma de TODAS as cores do espectro nos d

a cor branca, ou seja, essas cores so emissoras de luz, pois so utilizadas em moni-
tores, televises, celulares e todos os tipos de monitores de imagem. As subtrativas
so as reflexivas, pois somadas chegam cor preta. So utilizadas em impresses
como livros, revistas, cartazes, etc.
Pense nos sistemas de cores aditivos como as cores que so luz e as sub-
trativas, que no so 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,
ento 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
Definio
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 famlia de caracteres com um de-

senho particular, ou seja, todas as letras so representadas seguindo um mesmo
estilo.
Para a Internet, temos que tomar cuidado, pois fontes diferentes podem no
estar instaladas no computador do usurio, o que implica na utilizao de fontes con-
sideradas padro 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.

Seguem alguns links para encontrar fontes interessantes:

www.dafont.com
www.fontface.com
www.1000fonts.com
Principais famlias de fontes:

Serifadas (ex.: Times new Roman, Gergia, Courrier New): possuem ares-
tas nas extremidades das letras. So adequadas para impresso, mas no para
corpo de texto na web. No caso de ttulos ou textos de tamanhos grandes, oferecem
elegncia.
No serifadas (ex.: Arial, Tahoma, Verdana, Trebuchet MS): so as mais adequa-
das para a leitura on-line, a maioria possui alta legibilidade.
Cursivas (ex.: Monotype Cursiva, Staccato): so fontes que apresentam o estilo
manuscrito;
Fantasy (ex.: Comic Sans): so fontes decorativas, com o intuito apenas de en-
feitar. Cuidado ao us-las. Normalmente so mais usadas para desenvolver logoti-
pos.

A figura 12 apresenta algumas tipografias que se enquadram nas nossas de-
finies:
Podemos observar que os nmeros 1 e 2 so fontes serifadas, comparadas,
apresentam uma diferena bem acentuada. J os nmeros 6 e 7 so fontes sem se-
rifa, ou ainda, bastes.
As fontes 3 e 4 so semiserifadas, tm elementos de serifa, mas no se com-
portam totalmente assim.
Como forma script temos as de nmero 4 e 5. Veja que a 5 deriva da marca de
um seriado para TV, voc adivinha qual?

As tipografias so opostas, mas do mesmo grupo. Elas so decorativas e a

primeira relacionada ao passado e a segunda ao futuro.
1.3 GRFICOS
Nem s de textos vivem os sites, afinal, imagens tambm so contedo. O uso

de grficos deve ser adequado ao contexto. Imagens usadas como detalhes de layout
devem ajudar a ilustrar a interface e envolver as pessoas. cones e smbolos ajudam a
referenciar e a identificar a informao visualizada ou requerida. Por exemplo: cones
de impresso, boto fechar, casinha (ir para a pgina principal), cone de udio e/ou
vdeo, marcadores de listas, etc.
1.3.1 Estrutura Grfica
A Gestalt, ramo da psicologia que compreende a teoria da percepo visual,

baseia-se na psicologia da forma e uma fonte de estudos bem interessante, talvez
a nica, que nos sugere um conceito mais prximo de como devemos criar padres
visuais. Alguns deles podem parecer bvios, mas muita gente esquece, portanto

seguem alguns deles:
a) Proximidade - Se algo da mesma famlia, assuntos, imagens etc., devemos

aproxim-los. Caso contrrio, se forem assuntos diferentes, devemos separ-los.
b) Alinhamento - Para alguns estudiosos devemos criar uma malha (como uma ma-
triz) para distribuir logicamente o contedo. um exerccio bem til para voc que
est iniciando. Veja exemplos de malhas em sites conhecidos:
c) Repetio - A repetio faz com que voc referencie rapidamente algo da mesma
famlia. Por exemplo, se temos um cone para fotos uma mquina digital que se
repete vrias vezes, j clicamos em um ou dois deles e sabe-mos que nos leva a uma
pgina s de fotos. Claro que, se eu observar mais vezes esse cone, sempre associa-
rei com a pgina extra de fotos, por isso, cuidado com a similaridade dos cones para
no causar o que chamamos de rudo na comunicao.
d) Proporo - Se voc colocar um ttulo em tamanho 15px, o link ao lado prximo,

com a mesma cor e tamanho 15px o usurio vai acreditar que os dois so links, ou
os dois so ttulos.
Portanto, tamanhos de reas, fontes, imagens, etc., so sim uma forma de i-

dentificar famlias. Cuidado para no confundir o seu usurio.
1.3.2 Estudo de aplicao dos conceitos grficos
Vamos verificar o site a seguir (figuras 13 e 14) e a anlise que podemos faz-
er:

Figura 13 - Globo Esporte Site do portal globo.com

Figura 14 - Portal G1 Globo.com e seu portal de notcias

Analisando as figuras 13 e 14, podemos observar, em duas pginas diferen-

tes, uma de esportes e outra de notcias gerais, que a estrutura igual, muda a iden-
tidade de cada uma.
Vamos analisar os pontos enumerados nas imagens:
0 A logomarca da pgina est na mesma rea, ou seja, ao mudar de pgina, o

usurio sabe exatamente onde est.
1 A Busca est EXATAMENTE no mesmo formato e posio, fazendo com que o
usurio se familiarize com o ambiente.
2 O menu interno sofre pequenas alteraes. Na pgina de notcias se torna
complicado criar muitos nveis de diferenciao, j na pgina de esportes as funes
so agrupadas no exemplo, um dos grupos de campeonatos.
3 A barra principal de navegao horizontal e padro. Tem a funo de mostrar
ao usurio onde ele est. Lembram-se quando comentamos sobre onde estou? Pois
bem, as cores dos botes dessa navegao vo dar o tom das pginas internas.
Como voc pode perceber, o link da pgina de notcias vermelho, e o fundo da
pgina vermelho. Na pgina de esportes verde, como no link.
4 O contedo encontra-se na mesma posio e com as mesmas dimenses. O
contedo sofre alteraes, mas o formato no.
5 A rea do planto 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 notcias.
Sntese da Aula
Nesta aula verificamos a existncia de elementos da identidade visual e anali-

samos os diferentes tipos de reproduo das cores, o significado psicolgico e sua
aplicao em cdigos.
Analisamos tambm as variaes que existem entre as diferentes tipografias
e conhecemos caractersticas grficas, que auxiliam na estruturao de um layout,
analisando todos os tpicos em dois sites de grande acesso.
Na prxima aula estudaremos sobre arquivos e tipos de imagens.

Exerccios Propostos
1) Defina o que identidade visual.
2) Quais so os tipos de sistemas de cores e onde us-los?
3) O que so Serifas?
4) Com base no item 2.2, encontre um site e faa as anlises e encontre os nmeros
de 0 a 5 (se existirem todos).

Aula 3
Fundamentos Sobre Imagens
Objetivos da aula

Identificar imagens raster;
Identificar imagens vetoriais;
Investigar sobre a utilizao dos diferentes tipos de arquivo de
imagens;
Produzir imagens adequadas a diversas finalidades.
Contedos da aula

Raster vs Vetorial;
Imagens na Web;
GIF;
JPG;
PNG;
Utilizao 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 computao grfica
necessrio conhecer, no mnimo, como funcionam as imagens e
seus tipos. Pronto, agora voc entendeu por que vamos estudar os
temas seguintes.
Boa Aula!

1 INTRODUO
Anos atrs, a Web no passava de texto na cor preta sobre um fundo cinza. As
poucas imagens demoravam trs semanas para carregar, um po francs custava
dois centavos e eu tinha que caminhar na lama quando chovia para ir escola. Os
tempos mudaram, o pozinho se cobra pelo peso e a Web tornou-se um lugar onde
os visitantes esperam encontrar imagens profissionais.
Se voc no souber como tirar vantagem do potencial da Web, a histria vai se
repetir: Sua pgina levar trs semanas para carregar e voc vai receber um bilhete
para ser entregue aos seus pais convidando-os a uma reunio de pais e mestres, para
falar sobre o seu mau rendimento em aula, pois no assimilou nada do que deveria
aprender sobre os assuntos at aqui ministrados!
O primeiro passo para voc entender como criar e gerenciar grficos para a
Web compreender o que propriamente so as imagens. As imagens eletrnicas so
feitas de milhares de pequenos pontinhos coloridos chamados de pixels. Os pixels
so to pequenos que um deles sozinho no pode ser captado pelo olho humano, por
isso eles do a iluso de uma imagem contnua. 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 criana. Se no, v e faa isso agora mesmo.
Algumas telas tm pontos, outras tm linhas, mas o princpio o mesmo. En-
to, continue lendo e eu vou ajudar a preparar voc para manejar seus pixels corre-
tamente.
2 RASTER X VETORIAL
A possibilidade de utilizarmos imagens, grficos, desenhos e textos artsticos

nas nossas publicaes revolucionaram a forma da escrita tradicional. Uma publica-
o, atualmente, cativa o leitor pelo seu charme natural, sua descontrao para a
leitura e a facilidade de assimilao do contedo. As imagens ajudam muito para esta
nova atitude. A qualidade do grfico depende da sua resoluo.

Resoluo. A resoluo ou nitidez grfica medida pelo nmero 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 grficos, todos caem em uma

dentre duas categorias: mapas de bits ou imagens e grficos 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 frmulas matemticas. Os gr-
ficos de mapas de bits so geralmente produzidos por programas de pintura e scan-
ners, os grficos de vetores so produzidos por programas de desenho.
Como voc pode conferir na figura 15, as imagens de mapa de bits tm uma
limitao de ampliao, diretamente ligada a sua resoluo.
Figura 15 Imagem no formato Mapa de Bits de 72dpi. Com zoom de 8x.
A resoluo e a capacidade da impressora so interativas. Se voc tiver uma

imagem de mapas de bits com 180 dpi, ela nunca poder ser impressa em uma re-
soluo melhor do que 180 dpi, mesmo que saia em uma impressora a laser de 300
dpi. Os grficos de mapas de bits no se tornam grficos de alta resoluo s porque
se usa uma impressora melhor.
Um grfico de vetor ou baseado em objetos, por outro lado, composto de

linhas retas e curvas, calculadas matematicamente. A resoluo dos grficos 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 grficos de vetor, quanto melhor a impressora, melhor a resoluo (Figura
16). A Arte em Postscript, arquivos EPS, CGM e GEM so grficos de vetor. A Arte
BITMAP, arquivos BMP, TIF, GIF, JPG so grficos 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 so GIF e JPG.
As imagens devem aparecer na tela do visitante com rapidez e qualidade ne-
cessrias. Para isso, muito importante saber as diferenas e escolher o melhor for-
mato para cada imagem. Quanto mais compactas, mais eficazes sero as figuras.
Quanto tempo? Para estimar quanto tempo vai levar para algum 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.

3.1 GIF: GRAPHIC INFORMATION FORMAT (LEIA GUIFI)
Arquivos GIF so melhores para imagens com poucas camadas de cores (fi-
gura 17). Use-os para imagens de apresentao: grficos, figuras ou imagens de
texto. Quanto menos cores voc usar, mais eficiente ser o arquivo GIF. Um arquivo
do tipo GIF pode conter no mximo 256 cores.
Figura 17 - Imagem GIF
Arquivos GIF podem ser entrelaados assim eles parecem fade in (vo a-
parecendo aos poucos), de uma menor para uma maior qualidade enquanto esto
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 no serem mostradas, permitindo que as cores do fundo da sua
pgina apaream atravs delas. Isso evita que os grficos dem a impresso de es-
tar em caixas, causando, visualmente, a impresso de que esto mais integrados com
a pgina.
Os arquivos GIF so lossless, significa que a qualidade da imagem no
degradada pelo processo de compresso.
Podem ser animados, como filmes, s que bem mais simples. As GIFs anima-
das simulam movimento usando uma srie de imagens individuais.
Os arquivos GIF no so bons para fotografias perdem qualidade e os arqui-
vos no sero compactos. Use arquivos JPG para fotos.
3.2 JPG: Joint Photographic Experts Group
Arquivos JPG (l-se jota-pgue OU Jota-P-G) so melhores para ima-

gens com muitas cores, como fotografias e arte digitalizada (figura 18). O JPG admite
16 milhes de cores. A compresso varivel e voc pode aplicar maior ou menor

compresso a cada imagem, individualmente.
Figura 18 - Imagem JPG
O sistema JPG do tipo lossey, quanto maior a compresso, 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 grficos (Macromedia Fireworks ou Adobe Photoshop) permitem pr-visualizar
suas imagens JPG, assim voc pode escolher o melhor balano entre tamanho e
qualidade.
As novas verses desse tipo de imagem introduzem a possibilidade de salvar
seu JPG como um arquivo entrelaado, causando a impresso de que ele vai apa-
recendo de uma menor para uma maior qualidade, enquanto vai sendo carregado,
mas browsers antigos no suportam este formato.
Arquivos JPG no so bons para imagens com poucas cores, elas sero mai-
ores que o necessrio e parecero embaadas.
JPG tambm no tem transparncia.
3.3 PNG: Progressive Network Graphics
PNG o mais novo formato de arquivo grfico para a Web, por isso, s su-
portado pelos navegadores mais novos. Esses arquivos no aparecero em nave-
gadores antigos, por essa razo, ao usar o formato PNG, voc pode fazer com que
visitantes do seu site no consigam ver as suas imagens. Em alguns testes, os na-
vegadores FireFox e o IE7 j aceitam esse formato.
Arquivos PNG so compactos e versteis e podem combinar as melhores

caractersticas do GIF e JPG, como a capacidade de ter um fundo transparente ou

conter imagens com milhes de cores.
Embora esse formato seja til e eficiente, voc deve ter prudncia na sua uti-
lizao.
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 pblico do seu site utiliza FireFox ou IE 7, use PNG quando necessrio.
Nada de segredos e clculos complicados. Escolhendo o formato correto, su-

as imagens tero boa aparncia e carregaro rpido no computador do visitante. Es-
colhendo o formato errado, as imagens tero pssima aparncia e levaro uma eterni-
dade para carregar. Se voc no for capaz de lembrar-se dessas regras simples, faa
uma tatuagem com elas em algum lugar do seu corpo que seja bem visvel.
Para encerrar a discusso, vamos separar 2 tipos de imagem por categorias:
fotografias e simples. Uma imagem simples geralmente composta por texto, grfi-
cos e diagramas, tudo com contornos definidos e grandes formas com cores cont-
nuas.
Uma imagem fotogrfica 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, contedo simples deve ser
salvo como GIF e fotogrfico como JPG.
Saiba mais sobre os formatos aqui

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

3.5 A compresso e o tamanho do arquivo
Existem alguns problemas relacionados com as compactaes de imagens,

claro que a dica anterior de grande valia, porm no se resume a isso, pois, para
cada JPG, existem tipos de compresses utilizadas.
Vejamos agora alguns estudos de caso relacionando TAMANHO (bytes) VS
QUALIDADE (resoluo) com o nosso amigo Sr. Stress Anty.
Vamos analisar os fatos:
Imagem Inicial (A) Imagem com compacta- Imagem com compacta-

Tamanho : 51,7 Kb o 20% (B) o 70% (C)
Tamanho : 15,0 Kb Tamanho : 7,0 Kb
Observando atentamente a imagem B e comparando-a com a imagem A pode-

se notar uma pequena diferena na qualidade, porm mnima e o arquivo diminui de
tamanho, considerveis (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 trs tipos de resolues que
no so de boa utilizao.

Imagem com compacta- JPG convertida em JPG convertida em GIF

o 90% (D) GIF256 (E) Uniforme (F)
Tamanho : 3,9 Kb Tamanho : 44,1 Kb Tamanho : 18,2 Kb
Na imagem D, nota-se perfeitamente a m resoluo da imagem e, conse-

qentemente, 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 resoluo e um tamanho grande, novamente ressaltando, para a WEB.
Para terminar o nosso trabalho com o Sr. Stress Anty, vemos uma GIF com
compactao Uniforme, indubitavelmente horrvel.
Resumindo, os diferentes programas usam diferentes nmeros para a com-
presso JPG, mas, geralmente, quanto maior o nmero, maior a qualidade da ima-
gem e seu tamanho. Voc deve procurar na documentao de seu software para
saber como ele faz esse tratamento. Para cada trabalho existe uma configurao
adequada, seja para WEB ou para impresso. Se voc precisa de uma imagem com
excelente qualidade, no ir fugir de um arquivo de bom tamanho em Kbytes.
DICA:
Embora voc deva usar GIF ou JPG como grficos para a web, salve o seu arquivo
original em um formato como TIF (Tagged Image File Format) ou o formato nativo de
seu software grfico. Por qu? Porque voc preserva a resoluo e a qualidade da
imagem original, para novamente us-la ou no na web!

3.6 Resoluo de Tela
No Brasil, como temos preos elevados para artigos tecnolgicos, ainda no h

(a grande maioria) monitores e placas de vdeo que nos permitam trabalhar com uma
resoluo de tela de 1024x768px, mas grande parte dos designers est fazendo seus
layouts fluidos. O que quer dizer isso?
Normalmente os usurios domsticos utilizam resoluo 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 tpico especfico, que voc deve procurar
quando dominar os itens bsicos.
IMPORTANTE
Para desenvolver um site para a resoluo de 800x600, NUNCA CRIE O LAYOUT
COM 800x600, pois a rea til desta resoluo de 770x440px aproximadamente,
ou seja, voc sempre perder espao para menus do seu navegador e da barra ini-
ciar do Windows, por exemplo.
No mundo digital, os grficos podem ser divididos em dois grupos, os vetoriais

e os bitmaps. A diferena principal entre eles a resoluo.
Os grficos vetoriais so feitos por clculos matemticos, portanto, se fizermos
alteraes em seu tamanho, ele ir adaptar-se e no ter problemas de definio.
Os mapas de bits, como seu nome diz, so quadradinhos de cores diversas,
que montam uma imagem maior. Este sim, dependendo da resoluo, sofre com o di-
mensionamento.
3.7 Cor em profundidade
Cada pixel da imagem mostrado pelo monitor usando-se uma combinao

de trs sinais de cores: vermelho, verde e azul. A intensidade de cada um desses
sinais determina a sua aparncia. Em um monitor de TV preto e branco, os pixels
tm apenas duas cores possveis: preto ou brao. O que chamado de 1-bit porque

o pixel est ligado ou est desligado.
Imagem com Profundidade de Sem profundidade. Preto e

bits Branco
Em monitores coloridos, cada pixel pode exibir certo nmero de cores, que
vo de 16 (4-bit) a 16 milhes. A maioria dos computadores, hoje em dia, pode exibir
65.000(16 bits) cores. Novos computadores exibem de 65.000. (16-bit) a 16 milhes
de cores.
3.8 Formato de Arquivos
Como em todos os programas de qualquer funcionalidade, desenho, texto, som

ou vdeo h vrios tipos de imagens com a mesma funcionalidade, mas com caracter-
sticas diferentes. Para Exemplificar vamos aos conhecidos arquivos de som:
WAV Arquivo de som extrado de algum dispositivo de entrada (Microfone CD

Teclado Musical ETC) outro arquivo
MP3 Arquivo de som extrado de algum dispositivo de entrada (Microfone CD
Teclado Musical ETC)

Mas qual a diferena? Assim analisando, NENHUMA! Porm, quem conhece

os arquivos, sabe que o mp3 tem uma compactao 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
Muitos aplicativos para PC e MAC pro-
duzem arquivos Posts-cript. Postscript
uma rica linguagem de descrio de gr-
ficos, mas, como um arquivo EPS , na
realidade, apenas texto com instrues
Postscript EPS
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 includa com o arquivo EPS.
Arquivos GIF so usados para criar imagens
comprimidas para facilitar o uploading e o
CompuServe GIF downloading das electronic Bul-letin Board
Systems (BBS) e da INTERNET.
Arquivos BMP: Os BMPs podem ser cria-
BMP dos no Windows Paintbrush e usados como
wallpaper no background quando rodamos
o Windows.
Os arquivos Windows Meta File geralmente
so gerados no formato Aldus Placeable
Metafile (que contm um cabealho com in-
formaes org e ext). A Aldus e a Micrografx
WMF
criaram uma verso estendida do Formato
de Meta-arquivo do Win-dows chamada
Placeable Metafile Format. Nesse formato
estendido, 22 bytes de informaes foram
adicionados ao cabealho padro do meta-
arquivo.
O Formato Tagged Image File (.TIF) usado
por muito scanners. Nem todos os arquivos
TIF so idnticos, obedecem a uma srie de
especificaes (Reviso TIFF 5.0. Reviso
TIFF 6.0, etc.). Tais tipos podem ser muito
TIF
grandes e consumir mui-to espao em disco,
pois incluem informaes de escala de cinza.
No entanto, os formatos TIF, comprimidos,
podem usar apenas 10% do no-comprimi-
do.

Sntese da Aula
Estudamos nesta aula os diferentes tipos de representao grfica digital.

Estudamos os tipos de imagens, como funcionam e quais as melhores para
finalidades especficas. Aprofundamos o conhecimento entre as imagens vetoriais e
raster juntamente com outras extenses de arquivos.
Comparamos tambm as formas de exportao de imagens raster.
No prximo captulo veremos a ferramenta fireworks.
Exerccios Propostos
1) Descreva a diferena entre imagens Raster e Vetorial, justificando.

____________________________________________________________________
____________________________________________________________________
_____________________________________________________________________________________________
____________________________________________________________________________________________
2) Imagens PNG so utilizadas para fotografia? Justifique.

____________________________________________________________________
____________________________________________________________________
________________________________________________________________________
_______________________________________________________________________
3) Lendo as caractersticas deste captulo, voc utilizaria arquivos GIF para fotogra-
fias? 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-padro.
Contedos da aula

Conhecendo o software;
Criando e exportando documentos;
Ferramentas de criao e edio.
Nesta etapa, sero apresentados os principais recur-
sos utilizados para desenhar pginas Web, usando
como ferramenta o software Fireworks. Embora possua uma in-
finidade de recursos e de funcionalidades, os tpicos abordados
proporcionaro conhecimento necessrio ao desenvolvimento de
solues grficas 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 Mveis.
Boa aula!

1 VISO GERAL
Fireworks uma eficiente ferramenta de edio de imagens para web. Con-

sagrada mundialmente entre Webdesigners, vem ganhando cada vez mais adeptos
assim como novos recursos lanados a cada verso.
Projetado especificamente para criar e editar figuras da Web, o Fireworks for-
nece recursos que tornam mais fcil inserir grficos dentro de pginas da Web, de-
pois que elas foram criadas, alm de disponibilizar ferramentas sob medida para a-
perfeioar e otimizar imagens para o uso na Web.
O Fireworks totalmente compatvel com imagens vetoriais e bitmap, ou seja,
possvel criar e manipular imagens em ambos os formatos no mesmo Ambiente de
Trabalho, possibilitando, inclusive, exportar facilmente as imagens para pginas em
HTML, assim como cdigos JavaScript para os elementos Rollover.
Nota: Foi utilizada a verso 8.0 (ingls) do Fireworks para esta apostila. A
apresentao a seguir pode exibir um ambiente ligeiramente diferente dependendo
de qual verso do software voc est praticando. No entanto, o conceito deve seguir
o mesmo contexto.
2 CONHECENDO O BSICO
Caractersticas 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 dilogo, informe o Width e Height. Esses valores correspondem Lar-
gura e Altura em pixels, polegadas ou centmetros;
4. Ative a opo White para selecionar a cor Branca de fundo para a nova imagem;

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 trs sesses principais em sua rea de Trabalho, conforme

mostra a figura 20.
Caixa de Ferramentas Expansvel (Tools): A Caixa de Ferramentas (exibida no

lado esquerdo da figura) contm diversas ferramentas de desenho, algumas das
quais esto contidas em Grupo de Ferramentas. Para Exibir um Grupo de Ferra-
mentas, pressione e segure qualquer ferramenta com um tringulo 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 grficos podem ser agrupados ou sobrepostos individualmente conforme
o desejado.
Properties (Propriedades): O Painel Properties - tambm chamado de Inspetor

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 contm o nome de cada
documento em edio.
Para navegar entre os documentos, basta selecionar uma aba respectiva para
ativar sua visualizao. No exemplo da Figura 21, existem trs documentos em edio,
mas s o primeiro documento est sendo visualizado.
Figura 21 - Abas dos documentos em edio.

3 Exportao de documentos
O assistente para exportar imagem um eficiente recurso que possibilita ge-

rar a imagem mais adequada para sua aplicao. possvel definir o formato final
e acompanhar o tamanho do arquivo, assim como ter uma pr-visualizao, no mo-
mento de edio (Figura 22). Para ativar o assistente, selecione File > Export Wi-
zard.
Os dois formatos mais comuns utilizados em Figuras da Web, so o JPG e o
GIF. Ambos tm finalidades especficas, como j foi abordado anteriormente. Neste
exemplo, possvel observar as configuraes de uma imagem no formato JPG. Op-
tou-se pela escolha da qualidade da imagem, atravs da opo Quality.
Dica importante: sempre ativar a opo Progressive browser display. Ela faz
com que a imagem seja carregada dinamicamente pelo browser, do contrrio, o na-
vegador s ir exibir a imagem quando estiver totalmente carregada.
Figura 22 - Assistente para exportar imagens.

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

formato desejado, atravs da opo Format. A Figura 23 demonstra as configuraes
para uma imagem no formato GIF. A principal caracterstica 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 no for preciso alta
definio e qualidade, escolha o formato GIF. O JPG permite gerar imagens de alta
qualidade com um alto nvel de compresso, ou seja, o arquivo final ter sempre pou-
cos kilobytes.
Figura 23 - Exportando imagens com fundo transparente

3.1 Controle de ampliao
possvel controlar a ampliao do documento original, usando-se um recur-

so rpido, localizado logo abaixo da imagem em edio, conforme o detalhe da Figu-
ra 24. Basta pressionar sobre o valor de ampliao e selecionar o nvel desejado.
Tambm possvel consultar nessa rea a resoluo atual utilizada no docu-
mento. Ao clicar sobre o valor atual, ser exibida a dimenso aplicada em pixels ou
centmetros por polegada.
Figura 24 - Controle de Ampliao
3.2 Barra de Ao Principal
Por padro, o Fireworks no traz ativa a Barra de Ao Principal, que possibi-

lita o acesso rpido funo para criar novos documentos, salvar e imprimir. Similar
a diversos outros aplicativos, est disponvel o recurso para Desfazer ou Refazer um
ponto de edio.
Para ativar a Barra de Ao Principal, selecione na Barra de Menus Windows
> Toolbars > Main (figura 25).
Figura 25 - Barra de Ao Principal

4 Exportar para outros aplicativos
O Fireworks permite exportar rapidamente seu trabalho para diversos forma-

tos e aplicativos. Utilizando o boto localizado no topo direito do documento de edi-
o (Figura 26), possvel exportar para HTML assim como Flash. A opo Visualizar
nos Browsers d idia de como o Layout se comporta em uma pgina da Web.
Entre os formatos suportados, esto o Microsoft FrontPage e Adobe GoLive,
alm de outras ferramentas da famlia Macromedia e Adobe.
Figura 26 - Opo exportar para outros formatos e softwares.
4.1 Utilizando a Caixa de Ferramentas
A Caixa de Ferramentas (Figura 27), est separada em seis categorias:

Seleo,
Bitmap,
Vetor,
Web,
Cores,
Visualizao.
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).

Figura 27 - Caixa de Ferramentas
Figura 28 - Grupo de Ferramentas
4.2 Selecionando e cortando objetos
Antes de fazer qualquer edio em um objeto, necessrio fazer sua seleo.

Para isto, existem duas ferramentas especficas 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;

Ferramenta Subselection seleciona apenas alguns pontos do objeto;
Ferramenta Crop seleciona a rea da imagem que ser cortada.
Na Figura 29, possvel observar na prtica o uso de cada ferramenta citada

anteriormente. Enquanto a Ferramenta Pointer seleciona o objeto por inteiro, a Fer-
ramenta Subselection permite selecionar pontos especficos do objeto. Dessa forma,
possvel editar pontos sem alterar o restante da imagem.
A Ferramenta Crop, delimita a rea onde ser efetuado o corte da imagem.
Feita a seleo, 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 seleo para objetos, h duas ferramentas

especficas que auxiliam na seleo de pixels. Para marcar uma rea de edio, basta
selecionar a ferramenta mais adequada.
Ferramenta Marquee - faz a seleo no formato retangular na imagem;
Ferramenta Lasso - faz uma seleo livre;
Ferramenta Eraser - remove os pixels da imagem.

Conforme a Figura 30, possvel perceber o uso das duas ferramentas de se-
leo de pixels - Marquee e Lasso -, assim como a Ferramenta Erase, aps remover
os pixels da rea apontada.
Figura 30 - Uso das Ferramentas Marquee, Lasso e Erase.
4.4 Edio de objetos Vetoriais e Texto
O Fireworks possui ferramentas para criar e editar vetores. So ferramentas

extremamente eficientes para gerar desenhos complexos, cujos objetos so editados
manualmente, nos mnimos detalhes. A ferramenta texto destaca-se por uma vasta
gama de opes de configurao, accessvel no Painel Inspetor de Propriedades, que
ser exibido mais adiante.
Veja na Figura 31 o exemplo de uso de ferramentas vetoriais. possvel 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 atravs de pontos de ancoragem;
Ferramenta Rectangle - desenha retngulos, quadrados e arredondados;
Ferramenta Text - cria blocos de texto.

Figura 31 - Uso das Ferramentas Line, Pen, Retangle e Text.
No exemplo da Figura 32, podemos verificar o processo de seleo do estilo de

linha com todas as variedades existentes, dentre as quais foram utilizadas quatro no
exemplo da Figura anterior.
Alm do estilo de linha, possvel definir outras propriedades como cor da
borda entre outros efeitos.
Figura 32 - Propriedades da Ferramenta Line
A Ferramenta Text possui diversas opes de configurao assim como a

Ferramenta Line.
Para obter efeito similar ao exemplo da Figura 31, basta explorar a seleo de
fontes atravs do painel de Ferramentas conforme mostra a Figura 33.

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 pginas da Web. No entanto, para que o Fireworks saiba qual fatia
do Layout deve recortar, ou simplesmente ignorar preenchendo com cores HTML ao
invs de imagem, preciso informar adequadamente a seleo do documento.
Ferramenta Slice - indica as reas do documento que sero recordadas para

HTML.
Na Figura 34 possvel analisar um exemplo de Banner. A primeira imagem
a original e logo em seguida so 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.

Figura 34 - Exemplo de uso das Ferramentas Slice.
Para exportar esse tipo de seleo, selecione o menu File > Export e informe
o formato HTML para gerar uma pgina 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 configuraes, basta selecionar o objeto
desejado e escolher uma cor usando a Paleta de Cor Padro do Fireworks, similar
Figura 35. Tambm possvel fazer uma sintonia fina da seleo de cor, usando a
Seleo Avanada conforme ilustra a Figura 36.
Define uma cor para a borda do objeto selecionado;
Define a cor de fundo para o objeto selecionado.

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 configuraes que podem ser acessadas e modificadas manualmente, possibili-
tando efetuar a sintonia fina de um Filtro ou Efeito de Sombra, por exemplo. Essas
configuraes so centralizadas em um Painel especfico chamado Inspetor de Pro-
priedades.

Observe na figura 37, a visualizao do Painel Inspetor de Propriedades quan-

do a ferramenta Texto est selecionada na Caixa de Ferramentas:
Figura 37 - Painel Inspetor de Propriedade exibindo opes da Ferramenta Texto
O Painel Inspetor de Propriedade um modo rpido e eficiente para aplicar

efeitos e filtros aos objetos suportados. No lado esquerdo superior exibido o forma-
to de edio do objeto.
5.3 Alinhando objetos
Os comandos de alinhamento disponibilizam diversas opes prontas, permi-

tindo alinhar objetos ao longo de uma linha central, horizontal ou vertical, entre ou-
tras opes. Para acessar os comandos de alinhamento, selecione a opo 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 vrias opes para transformar objetos. Alm da

transformao livre, possvel gira um objeto e invert-lo conforme for necessrio.

Para acessar este recurso, selecione Modify > Transform:
Free Transform: Permite transformar livremente as dimenses do objeto;

Rotate 180: Gira o objeto 180;
Rotate 90 CW: Gira o objeto 90 no sentido horrio;
Rotate 90 CCW: Gira o objeto 90 no sentido anti-horrio;
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 dimenso do objeto. Em seguida, a ferramenta de rotao,
Rotate 180, gira o objeto em um intervalo especfico. Tambm possvel aplicar rota-
es diferentes usando as variaes da ferramenta no sentido horrio ou anti-horrio,
dentro do intervalo de 90.
A Ferramenta Flip Vertical altera a perspectiva da imagem, invertendo sua o-
rientao na posio horizontal. Tambm possvel realizar a inverso na posio
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 - Edio utilizando Free Transform, Rotate 180 e Flip Horizontal

5.5 Redimensionar rea de desenho, dimenso e cor da de fundo
Comumente, necessrio alterar as dimenses do documento, liberar mais

espao de edio ou realizar o contrrio, diminuir a rea de desenho para somente o
espao utilizado. O Firewoks permite configurar facilmente essas e outras proprieda-
des, selecionando Modify > Calvas:
Emane Size: Altera a dimenso original da imagem;

Calvas Size: Altera a dimenso da rea de desenho;
Canvas Color: Define uma cor de fundo ou transparncia para imagem;
Trim Canvas: Elimina a rea de desenho no utilizada na edio;
Fit Canvas: Ajusta a rea de desenho para o tamanho da imagem.
possvel acompanhar, na Figura 39, a imagem original na rea de desenho

transparente, sem nenhuma cor de fundo presente. Em seguida, aps aplicar a Ferra-
menta Trim Canvas, a rea de imagem foi recorta, diminuindo para a mxima rea da
imagem utilizada. Logo aps, 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

distribudos na edio de uma imagem. Atravs desse Painel, possvel seqenciar

os objetos em subnveis, semelhante organizao de pasta/subpasta, conforme ilus-

tra a Figura 40.
Tambm possvel mover os objetos para cima ou para baixo de outro, con-
forme for necessrio, basta selecionar o objeto desejado e aplicar uma das seguintes
opes no menu Modify > Arranje:
Bring to Front: Trazer para frente de todas das camadas;

Bring to Forward: Avanar 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 edio. Tambm possvel informar um nome para cada camada, de
forma a facilitar a organizao dos objetos.
um recurso eficiente na edio de documentos que possuem uma infinidade
de camadas, no entanto, muitas vezes se torna necessrio agrup-los em estrutura de
pasta. Dessa forma, se torna fcil selecionar visualmente o objeto desejado.
O Fireworks permite agrupar objetos em uma nica camada. Para agrupar duas ou
mais camadas, selecione Modify > Group, ou faa o processo inverso Modify >
Ungoup.
Perceba, na Figura 41, que a visualizao da camada no alterada mesmo
depois de agrupadas, quando os objetos passaram a ser editados como apenas um
nico objeto.

No Painel Layer possvel acompanhar o nmero de objetos agrupados que

seguem, aps a intitulao Group.
Figura 41 - Painel Gerenciador de Camadas exibindo os objetos agrupados
5.7 Utilizando Mascara (Mask)
Mascara um recurso verstil para criar efeitos utilizando mais de dois obje-
tos. Com esse recurso, possvel 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 opes para combinar objetos em apenas

um. possvel conectar os pontos da extremidade de dois objetos abertos para criar

um nico trajeto fechado, ou possvel juntar objetos mltiplos 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 contrrio 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 orientao 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 trs crculos, o efeito descarta um dos objetos e unifica todas as
trajetrias, formando um novo objeto.
Figura 44 - Exemplo do efeito punch

Sntese da Aula
Nesta aula, conhecemos a ferramenta Fireworks e suas ferramentas de edio

e criao bsicas.
Praticamos tambm a exportao de arquivos para a utilizao em pginas.
Na prxima aula, construiremos um site, do incio ao fim.
Exerccios Propostos
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 Soluo Real
Objetivos da aula
Aplicar os estudos das cinco aulas;

Pr em prtica a teoria apresentada;
Criar um projeto que integre todas as reas.
Contedos da aula

Criando elementos;
Exportando / Importando imagens;
Criando o HTML.
Aps 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 Mveis.
Boa aula!

1 CASO DE USO SALVADOR MVEIS
Hotsites, geralmente, so sites pequenos (com poucas pginas), criados

com propsito especfico e provisrio. nesse momento que o Fireworks demonstra
suas vantagens, como o ganho de tempo e produtividade, pois a prpria 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 dilogo, informe o Width 800 e Height 600;
3. Selecione a opo 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 edio do

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

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 pgina.
Para esse procedimento, utilize a Ferramenta de Text , modificando suas
propriedades pelo Painel Inspetor de Propriedades.
Veja o resultado na Figura 47.

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 seleo at a
imagem j cortada.
Figura 48 - Selecionando e cortando a imagem

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 aps definidas
as imagens que sero recortadas pelo Fireworks.
Figura 49 - Selecionando rea com a Ferramenta Slicing
1.6 Exportar para HTML
Neste momento, possvel exportar o Layout diretamente para o formato HTML

(figura 50). possvel 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 opo HTML and Images.
4. Clique no boto Export.

Figura 50 - Exportando para HTML
Figura 51 - Imagens criadas pelo Fireworks

1.7 Editando a pgina HTML
Ao exportar, o Fireworks gera uma srie de cdigo HTML desnecessrio. Para

tornar a pgina mais leve, clique com o boto direito sobre a pgina 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 no so ne-
cessrias em nossa pgina HTML, uma vez que a tela j possui fundo preto. Traba-
lhando com Wight e Height, das cdulas de nossa tabela, possvel obter o mesmo
resultado, porm a pgina ir carregar muito mais rpido.
Voc aprender a trabalhar com o cdigo HTML em uma aula especfica. Veja
na figura 52 como terminou a edio do HTML 52 e o resultado final, visualizado no
navegador, conforme mostra a Figura 53.
Figura 52 - Editando cdigo HTML

Figura 53 - Visualizao do Hotsite no navegador
1.8 Consideraes Finais
Alm de reunir diversos recursos em um nico aplicativo, o Fireworks interage

com o usurio atravs de uma interface intuitiva que diminui o grau de aprendizagem,
ao mesmo tempo em que possvel desenvolver solues profissionais em poucas
horas trabalho.
O Fireworks suporta a integrao de extensions, desenvolvidos para solues
especficas. Extensions um poderoso recurso que adiciona novas funcionalidades
no existentes nativamente
Para gerenciar extensions, ative o aplicativo Macromedia Extension Manager
(Figura 54), que acompanha a instalao padro da ferramenta. Com essa interfa-
ce, possvel localizar novas extensions na Internet, muitas delas disponveis gratui-
tamente para download.

Figura 54 - Gerenciador de Extension
Sntese da Aula
Nesta quinta e ltima aula verificamos como se cria uma estrutura visual no
Fireworks, passando por vrias ferramentas e chegando at a sua exportao para
sites, com o cuidado de otimizar o tempo de download para o usurio.
Conclumos este mdulo, voc chegou l!
Parabns!

Exerccios Propostos
1) Agora que voc j fez todas as aulas, sugiro que utilize tudo o que aprendeu para o
seu proveito, em um exerccio possvel de utilizar em outras aulas: fazer o seu site.
Hoje quem tem um currculo bem feito e com contedo de qualidade se destaca no
mercado. Imagine se voc tiver uma pgina na internet?
A idia voc criar nesse exerccio, uma pgina com o seu currculo. 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 currculo nas mos e que realmente aprendeu.
Guarde esses arquivos, pois em outras disciplinas voc pode utilizar para programar,
linkar e publicar.
Aproveite.

REFERNCIAS
KRUG, S. No me faa pensar: Uma abordagem de Bom Senso Usabilidade na

Web. 3. ed. Alta Books, 2006. 144p.
LEMAY, L. Aprenda a Criar pginas Web com HTML e XHTML em 21 dias. Makron
Books 2002. 1110p.
MEMRIA, F. Design para a Internet: projetando a experincia perfeita. Rio de

Janeiro: Elsevier, 2005. 171 p.
NIELSEN, J.; TAHIR, M. Homepage Usabilidade: 50 websites desconstrudos.

EUA: New Riders Pub, 2002. 315 p.
WILLIAMS, R. Design para quem no designer. 2. ed. [S.l.]: CALLIS, 2005.191 p.

Sobre o Autor
Professor por acaso, mas com paixo. Ps-graduado em Comunicao Empresarial e

Relaes Pblicas e Graduado em Design Grfico pas-
sando pela Escola Tcnica, como aluno do curso de Pro-
cessamento de Dados. Essas vrias reas permitiram-
me ser um empreendedor. Trabalhei como designer, no
meu escritrio, paralelamente, lecionei na SOCIESC as
disciplinas de computao grfica, multimdia, desenho
de observao, anlise 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 aps, como Web Designer em uma
agncia de internet.
Atualmente trabalho como coordenador de comunicao na Selbetti Gesto de
Documentos e, alm disso, sou o arquiteto de informao dos sistemas desenvolvidos
internamente.
Sou um estudioso dos meios digitais de comunicao e interao, alm de
projetos pessoais atuo como freelancer. Meu site tem todos os meus contatos e in-
formao, basta acessar www.giuvicente.com.

Copyright Tupy Virtual 2007

Nenhuma parte desta publicao pode ser reproduzida por qualquer meio sem a prvia autorizao desta instituio.
Autor: Giuliano Vicente
Comunicao Visual Para WEB: Material didtico / Giuliano Vicente
Design institucional: Thiago Vedoi de Lima; Cristiane de Oliveira - Joinville: Tupy Virtual, 2007
Ficha catalogrfica elaborada pela Biblioteca Universitria Tupy Virtual
Crditos
SOCIESC Sociedade Educacional de Santa Catarina Design Grfico
Thiago Vedoi de Lima
Tupy Virtual Ensino a Distncia
Equipe Didtico-Pedagcia
Rua Albano Schmidt, 3333 Joinville SC 89206-001 Giuliano Vicente
Fone: (47)3461-0166
E-mail: ead@sociesc.org.br
Site: www.sociesc.org.br/portalead EDIO MATERIAL DIDTICO
Diretor Geral Professor Conteudista

Sandro Murilo Santos Giuliano Vicente
Diretor de Administrao Design Institucional

Vicente Otvio Martins de Resende Thiago Vedoi de Lima
Cristiane Oliveira
Diretor de Ensino, Pesquisa e Extenso
Roque Antonio Mattei Ilustrao Capa
Diretor do Instituto Superior Tupy
Wesley Masterson Belo de Abreu Projeto Grfico
Equipe Tupy Virtual
Diretor da Escola Tcnica Tupy
Luiz Fernando Bublitz Reviso Ortogrfica
Ndia Ftima de Oliveira
Coordenador da Escola Tcnica Tupy
Alexssandro Fossile
Alan Marcos Blenke
Coordenador do Curso
Juliano Prim
Coordenador de Projetos
Jos Luiz Schmitt
Revisora Pedaggica
Ndia Ftima de Oliveira
EQUIPE TUPY VIRTUAL
Raimundo Nonato Gonalves Robert

Wilson Jos Mafra
Cristiane Oliveira

Apostila Comunicação Visual para Web PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Apostila Comunicação Visual para Web PDF

Uploaded by

Copyright:

Available Formats

Comunicao Visual Para Web

Prof. Giu Vicente

Apoio Gesto e Execuo Contedo e Tecnologia

SOCIESC - Sociedade Educacional de Santa Catarina

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

SOCIESC - Sociedade Educacional de Santa Catarina

Caro aluno designer,

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

Professor Giu Vicente

SOCIESC - Sociedade Educacional de Santa Catarina

Acompanhem no cronograma abaixo os contedos das aulas, e atualize as

Semanas Horas/aula Contedos Data/Avaliao

SOCIESC - Sociedade Educacional de Santa Catarina

Carga Horria: 40 horas/aula

SOCIESC - Sociedade Educacional de Santa Catarina

Ao final desta aula, voc dever ser capaz de:

Verificar a necessidade do planejamento de web sites;

SOCIESC - Sociedade Educacional de Santa Catarina

Qual o segmento da empresa e quais servios/produtos oferece?

1.1 Arquitetura de Informao (AI)

Temos grande parte das informaes, mas: como vamos organiz-las?

1.1.1 Arquitetura? Isso informtica?

No dicionrio, a palavra arquitetura significa: arte de edificar ou de projetar e

SOCIESC - Sociedade Educacional de Santa Catarina

Alguns dos resultados da Arquitetura da Informao (AI) so os wireframes e o mapa

1.1.2 Como fao isso? O mapa

Figura 1 Mapa do site.

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

SOCIESC - Sociedade Educacional de Santa Catarina

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

1.2 Wireframes: o esqueleto do site

SOCIESC - Sociedade Educacional de Santa Catarina

Figura 2 Wireframe Caneta e Papel

Figura 3 Wireframe Digital

SOCIESC - Sociedade Educacional de Santa Catarina

Figura 4 Site Final

Dicas para projetar um bom arame

SOCIESC - Sociedade Educacional de Santa Catarina

Figura 5 - Padro de layout definido por Felipe Memria

SOCIESC - Sociedade Educacional de Santa Catarina

Figura 6 - Site da empresa Selbetti

Figura 7 - Site do Cantor Cubano Odn

SOCIESC - Sociedade Educacional de Santa Catarina

A Figura 7 demonstra que a navegao horizontal, no topo, permite liberdade ao con-

SOCIESC - Sociedade Educacional de Santa Catarina

Figura 9 - Caf Colombo

SOCIESC - Sociedade Educacional de Santa Catarina

Figura 10 - Ipod Nano

SOCIESC - Sociedade Educacional de Santa Catarina

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

A usabilidade pode ser definida como:

SOCIESC - Sociedade Educacional de Santa Catarina

Pensemos em quantos botes utilizamos para chegar a cada item desses,

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

Vamos voltar ao celular para confirmarmos os exemplos reais. Faam as mes-

SOCIESC - Sociedade Educacional de Santa Catarina

Os principais erros que dificultam a experincia do usurio

www.useit.com o site de Nielsen.

Melhores Prticas e Regras

SOCIESC - Sociedade Educacional de Santa Catarina

Evite menus suspensos;

Nesta aula iniciamos os assuntos gerais e introdutrios para um projeto de

SOCIESC - Sociedade Educacional de Santa Catarina