Apostila comunicação visual

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
SOCIESC - Sociedade Educacional de Santa Catarina
2
Apresentação
Este livro didático contém a disciplina de Comunicação Visual Web, cujo con-
teúdo, ora apresentado, coloca você diante de um novo desafio: obter conhecimentos
para desenvolver comunicação visual para a Internet.
Comunicar é um ato comum a todos os seres humanos. Você se comunica a
todo o momento e não é só falar com os outros, é expressar-se, é fazer-se entender.
Comunicação é interação. Se formos pensar em todo o processo (e resumir o que
estudiosos dizem) a comunicação não acontece sozinha, precisa de um emissor, um
meio, uma mensagem e um receptor.
Você se comunica pelas roupas, cabelo, olhar ou não olhar, tipos de comuni-
cação mais comuns que conhecemos.
Neste livro você encontrará um tipo de comunicação considerado novíssimo,
no mercado de trabalho, o visual – linha do design gráfico que hoje assume o papel
de designer de interação, mas vai além disso. Um designer de interação planeja como
as informações serão agrupadas e apresentadas para o internauta. Discute quais as
ações de uma página, quais os eventos, o que será apresentado, entre outras tantas
coisas relacionadas ao internauta.
É importante ressaltar que o livro foi desenvolvido com o objetivo de oferecer
um aprendizado independente, inerente aos estudos do EAD, e o conteúdo foi revi-
sado com o intuito de oferecer uma linguagem simples, objetiva e estimulante.
Lembre-se de que a sua passagem por esta disciplina será também acompa-
nhada pelo Sistema de Ensino Tupy Virtual, seja por correio postal, fax, telefone, e-
mail ou Ambiente Virtual de Aprendizagem.
Entre sempre em contato conosco quando surgir alguma dúvida ou dificulda-
de. Toda a equipe terá a maior alegria em atendê-lo(a), pois o seu aprendizado nessa
jornada é o nosso maior objetivo.
Acredite no seu sucesso e bons momentos de estudo!
Equipe Tupy Virtual.

3
SUMÁRIO
CARTA DO PROFESSOR.............................................................................................4
CRONOGRAMA DE ESTUDOS....................................................................................5
PLANO DE ESTUDOS...................................................................................................6
1.PRIMEIROS PASSOS DE UM PROJETO DE WEBSITE..............................................7
2.PROJETO GRÁFICO...............................................................................................23
3.FUNDAMENTOS SOBRE IMAGEM.........................................................................34
4.FIREWORKS...........................................................................................................47
5.DESENVOLVENDO UMA SOLUÇÃO REAL............................................................69
REFERÊNCIAS..........................................................................................................79

4
Carta do Professor
“O único local onde
o ‘sucesso’ vem antes do ‘trabalho’
é no dicionário.”
Albert Einstein
Caro aluno “designer”,
Trabalhar com Internet, desenvolver para Internet, é uma atividade de grande
atuação no mercado hoje. Você está entrando em uma profissão do futuro, e pessoas
assim devem estar sempre atentas ao seu redor.
Não aprendemos somente em uma sala de aula, com um livro, ou com um pro-
fessor (mesmo que sejam ótimos e importantes). Também é possível aprender pela
observação e análise. Observe as pessoas acessando a Internet, você vai aprender
muito: verá onde elas clicam, que caminho percorrem, se demoram em mudar de pá-
gina, etc. Observe outros sites, navegue como observador. Na maior parte das vezes,
você vai captar coisas interessantes; em outras, coisas que não vai querer repetir de
forma alguma. Afinal desenvolver para a Internet é, na verdade, desenvolver para o
internauta, em quem se deve pensar a maior parte do tempo.
Espero que você se conecte neste mundo de web design e que possa se de-
senvolver.
Professor Giu Vicente

5
Cronograma de Estudos
Acompanhem no cronograma abaixo os conteúdos das aulas, e atualize as
possíveis datas de realização de aprendizagem e avaliações.
Semanas Horas/aula Conteúdos Data/Avaliação
1 10
PRIMEIROS PASSOS DE UM
PROJETO DE WEBSITE: brie-
fing; arquitetura da informação;
wireframes; usabilidade; naveg-
abilidade.
_/_ a _/_
1 5
PROJETO GRÁFICO: Identida-
de Visual; Cores; Tipografia;
Gráficos.
_/_ a _/_
2 10
FUNDAMENTOS SOBRE IMA-
GENS: Raster vs Vetorial; Ima-
gens na Web; GIF; JPG; PNG;
Utilização das imagens; Profun-
didade de cor; Formato de Ar-
quivos.
_/_ a _/_
2 15
• FIREWORKS: Conhecendo o
software; Criando e exportando
documentos; Ferramentas de
criação e edição.
• DESENVOLVENDO UMA
SOLUÇÃO REAL: Criando ele-
mentos; Exportando/Importando
imagens; Criando o HTML.
_/_ a _/_

6
Plano de Estudos
Bases Tecnológicas
Arquitetura da informação; Wireframe; Navegabilidade; Usabilidade; Identidade
Visual; Imagens digitais; Software gráfico.
Objetivo Geral
• Desenvolver web sites com metodologia e conceitos de design e usabilidade.
Objetivos Específicos
• Estudar a organização de sites
• Compreender a importância da usabilidade e navegabilidade
• Projetar o design de web sites
• Interpretar elementos de identidade visual
• Trabalhar com tipos de arquivos de imagem
• Desenvolver “interfaces” de web sites em software gráfico.
Carga Horária: 40 horas/aula

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

8
1 BRIEFING

Esta estranha palavra, Briefing, é mais utilizada pelos publicitários, que gostam
de estrangeirismos. Nós, do meio de informática, também utilizamos muitos deles,
inclusive briefing. Para simplificar a história, poderíamos chamar o briefing de: Ques-
tionário para definição de objetivos.
São informações que você irá obter em uma entrevista com o cliente, e nin-
guém, além dele, pode responder às perguntas.
Entre outras perguntas podemos partir para o básico:
» Qual o segmento da empresa e quais serviços/produtos oferece?
» Quem é o público-alvo?
» Qual o objetivo do site? (Comunicar / vender / ensinar)
» Qual a identidade da empresa? Como quer ser vista? (apropriar-se da identidade
existente)
» Índice do conteúdo. (Tópicos gerais e específicos para se poder construir a arqui-
tetura)
Algumas empresas partem para o marketing digital, o que deve ser previsto
aqui, mas para nosso estudo isso é outra fase.
1.1 Arquitetura de Informação (AI)
Temos grande parte das informações, mas: como vamos organizá-las?
1.1.1 Arquitetura? Isso é informática?
No dicionário, a palavra arquitetura significa: “arte de edificar ou de projetar e
traçar planos”. Exatamente o que faremos: estruturar e planejar a informação do site,
conteúdos relacionados entre si e a estruturação dos fluxos de navegação.
Aqui faremos o possível para que o usuário não se perca, navegando sem ter
que pensar muito, de modo fácil e intuitivo.

9
Alguns dos resultados da Arquitetura da Informação (AI) são os wireframes e o mapa
do site.
1.1.2 Como faço isso? – O mapa
Com as respostas do briefing em mão, vamos definir como deve ser o site. Va-
mos partir de uma empresa que queira:
• mostrar sua história, abrangência, etc. - (A empresa);
• mostrará também seus serviços e produtos - (Serviços);
• deseja dar destaque para os clientes e os casos já realizados - (Clientes);
• quer deixar um espaço para que o cliente entre em contato - (Fale conosco).
De maneira bem simples, descrevi e organizei o que seria um agrupamento
dos assuntos relacionados. Agora vamos ver esses mesmos procedimentos sob uma
nova estrutura, observe a figura 1.
Figura 1 – Mapa do site.
Construa sempre um mapa, pense num esquema estrutural, como um fluxo-
grama, por exemplo, o que ajudará você a entender melhor o todo do site.
Perceba que as ligações principais são feitas sob a forma de agrupamentos e
as linhas tracejadas são links existentes entre os núcleos – no exemplo da figura 1, a

10
página contato. Essa é uma página importante para que o cliente tenha aproximação
com a empresa, por isso, muitas páginas têm links diretos com ela.
Lembre-se: quanto maior o website, mais complexa será sua arquitetura de
informação.
1.2 Wireframes: o esqueleto do site
Arame – essa é a definição mais próxima do que significa wireframe. Com esse
método desenha-se o conceito, estrutura-se o resultado do briefing. Você deve pensar
e esquematizar em que posição estará o menu, a busca, o conteúdo, a logo. É a fase
em que você testará a organização do conteúdo a ser apresentado na página, o todo.
Ainda não estamos falando de estilo visual, nem de cores, nem de imagens, mas de
disposição de conteúdo. Esse é o primeiro passo antes de iniciarmos o desenvolvim-
ento do design gráfico da página.
Para esse procedimento, podemos utilizar papel e lápis (figura 2). Como nes-
sa fase não estamos falando de cores, mas de conteúdo, devemos utilizar tons de
cinza (variação do preto até o branco) para destacar a importância das áreas (figura
3). Quanto mais escuro, mais importante. (Isso não é uma regra, mas pode ajudar).
Na criação das propostas, logo após, criamos os melhores desenhos em
qualquer ferramenta gráfica (figura 4). Se você achar melhor, pode ser o Paint
Brush, o Corel Draw, o Fire Works. Na verdade, você deve utilizar uma ferramen-
ta em que possa desenhar linhas, textos e posicioná-los da forma que quiser.

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

12
Figura 4 – Site Final
Fonte: www.radiouniao.fm.br
Dicas para projetar um bom “arame”
» Desenhe sempre pensando no tamanho das áreas em pixel, ou seja, pro-
porcional ao layout final, pois estamos falando de websites;
» Use textos o mais próximo possível do conteúdo, não escreva nononononon ou
xxxxxxxx, isso fará com que o texto pareça falso. Existe um texto muito utilizado pe-
los designers que é o “Lorem ipsum dolor set amet”, utilize-o para conteúdo de texto,
não para títulos, que devem se aproximar ao máximo do real;
» Cuidado com a rolagem vertical, se você definiu áreas mais importantes na pági-
na inicial, não as deixe abaixo da rolagem.
Felipe Memória - o designer que reformulou todo o site da globo.com - em seu livro
Design: projetando a experiência perfeita (2006), comenta que a estrutura mais uti-
lizada no mundo ocidental se aproxima do que mostramos na Figura 5.

13
Figura 5 - Padrão de layout definido por Felipe Memória
Preste atenção: isto é uma convenção não uma regra, mas para sites cujo
objetivo seja a simplicidade e a correta comunicação, serve como uma luva.
Para mostrar que nem tudo que é fora das convenções é ruim, seguem ima-
gens de sites fantásticos, cuja estrutura convencional pode ser muito bem explorada
com um projeto gráfico diferenciado.
A Figura 6 mostra o site da Selbetti Gestão de Documentos, cuja navegação
interna, do lado direito, e o menu, do lado esquerdo, fogem ao padrão tradicional, mas
não comprometem a navegação e a organização. A logomarca, assinatura e o con-
teúdo do site mantêm o padrão.

14
Figura 6 - Site da empresa Selbetti
Fonte – www.selbetti.com.br
Figura 7 - Site do Cantor Cubano Odín
Fonte - www.odinmudic.com

15
A Figura 7 demonstra que a navegação horizontal, no topo, permite liberdade ao con-
teúdo exposto, com a logomarca centralizada. A navegação interna das páginas segue
pelo lado esquerdo.
Figura 8 - Adobe
Fonte – www.adobe.com.br
A Adobe (Figura 8), hoje uma das maiores empresas de software para com-
putação gráfica e desenvolvimento web, tem o seu layout como padrão estabelecido.
A logo, navegação vertical e a área de pesquisa seguem o padrão. Mostra a barra su-
perior completa, assinatura no rodapé, os links principais do site, além de informações
sobre a empresa.

16
Figura 9 - Café Colombo
Fonte – www.cafecolombo.com.br
O Café Colombo é um site mais voltado ao cultural, com artigo e podcasts (Pod-
cast é uma publicação de uma entrevista, programa de rádio, leitura, etc. em formato de áudio.) (Figura
9) Apresenta-se graficamente com um estilo diferente, mas a sua estrutura é a mesma
do padrão definido por Memória. Perceba, em suas navegações, que esse padrão fa-
cilita a navegação do usuário que não precisa “tentar” entender o site, apenas busca
nas áreas convencionadas o que realmente deseja.

17
Figura 10 - Ipod Nano
Fonte - http://www.apple.com/br/ipodnano/
Podemos observar, na figura 10, que a Apple, uma das empresas vanguardistas
em tecnologia, também não foge à regra. A logo, navegação e assinatura se mantêm
com as funções padrão. Além do posicionamento clássico, a grande diferença do site
é o conteúdo, sempre diferente em cada categoria. A formatação da página permite
desvincular o topo e a assinatura do “miolo” (centro da página), totalmente liberado
para a criatividade.

18
Dicas »
O logotipo da empresa deve, preferencialmente, ser mantido à esquerda, pois
deve ser o primeiro elemento que o usuário verá, identificando onde ele está;
» A navegação deve estar em locais acessíveis.
» Repito: Não é uma regra! Todos esses estudos são as melhores práticas que
conhecemos hoje. O que faremos é uma convenção, mas fique à vontade para
ser criativo a cada projeto, com os devidos cuidados.
2 USABILIDADE
A usabilidade é um termo relacionado ao universo da Arquitetura da informa-
ção, pois é uma das formas de realizar um bom projeto de AI.
A usabilidade pode ser definida como:
“ a medida de qualidade e eficiência da experiência do usuário com um de-
terminado produto, que pode ser desde um rádio-relógio até uma página da Internet.
No conceito Web, define-se por um design que ajuda o internauta a encontrar infor-
mações, serviços e produtos de forma intuitiva.”
HP (http://h30091.www3.hp.com/pyme/dicas/glosario_2.html)
Para conseguirmos boa usabilidade, temos que ter em mente quem vai utilizar
o sistema, em qual mídia, com qual tecnologia e de que maneira. A usabilidade serve
para todos os produtos que têm interface com o usuário. Chamo de interface o painel
de botões de um liquidificador, por exemplo. A usabilidade está atrelada à ergonomia,
outro assunto bem interessante.
Vamos exemplificar a usabilidade com um celular. Para que tenham noção do
que estamos falando, peguem o celular ou circulem os celulares entre vocês e nave-
guem pela agenda - chamadas recebidas. Verifique as mensagens enviadas. Todos os
acessos são diferentes entre aparelhos e fabricantes. Pensar nesse acesso é pensar
em usabilidade, pensar que normalmente utilizamos uma das mãos, ou menos, utiliza-
mos um dedo apenas. Essa dificuldade ou facilidade é um exemplo de usabilidade.

19
Pensemos em quantos botões utilizamos para chegar a cada item desses,
quantas informações úteis vemos em tela ao mesmo tempo?
Agora você tem idéia do que é usabilidade. Logo entraremos em mais detalhes
para a Internet.
3 NAVEGABILIDADE
Como vimos, a usabilidade é o modo como utilizamos os sistemas e a nave-
gabilidade é principalmente voltada para a Internet, para a navegação entre as pági-
nas.
Para alguns gurus, citemos dentre eles Jackob Nielsen, se o usuário tiver que
clicar mais do que duas vezes para chegar ao destino a navegabilidade é regular, e se
só depois de três cliques o usuário chegar ao destino, a navegabilidade é ruim. Vamos
ser menos rigorosos, mas continuar atentos.
Como fórmula geral e básica para uma boa navegabilidade, o usuário deve
responder rapidamente três perguntas:
» Onde estou?
» De onde vim?
» Para onde vou?
Vamos voltar ao celular para confirmarmos os exemplos reais. Façam as mes-
mas navegações anteriores e verifiquem se há outras formas de acessar a mesma
informação e se você sabe onde está e para onde vai. Um bom exercício é que o co-
lega da direita ou da esquerda pegue o celular e navegue por alguns menus internos
e passe o celular para outro colega de classe. Façam estas três perguntas e vejam
as respostas que conseguem e apresentem para os outros, ou ainda, elejam o celular
com a melhor usabilidade e navegabilidade da classe (enviem para mim, vou adorar
saber qual o veredicto de vocês). Vocês verão coisas muito interessantes.
Observe os erros mais comuns cometidos pelos desenvolvedores de sites, se-
gundo Jackob Nielsen:

20
Os principais erros que dificultam a experiência do usuário
» Áreas saturadas com objetos rolantes e animados, que sobrecarregam a
visão do usuário;
» Scroll longo;
» Cores de links não-padrão;
» Longo tempo de download do website;
» Longos níveis hierárquicos dos diretórios de websites;
» Páginas órfãs, que não estão relacionadas a outras páginas;
» Quebra de consistência;
» Oferta de um link de “mailto:” ao invés de links para uma página com informações
de contato;
» Grandes blocos de texto;
» Páginas linkadas a si próprias;
» Informação excessiva ou desnecessária;
» Incompatibilidade de browsers.
www.useit.com é o site de Nielsen.
Nielsen ainda sugere algumas práticas para quem não quer falhar:
Melhores Práticas e Regras
» Mantenha todos os links com um estilo padrão. Eles não precisam ser azuis
(cor padrão do navegador) e sublinhados, como sugere Jakob Nielsen, mas devem
ser diferenciados, possuir cores e estilo que os identifiquem e os torne de fácil visu-
alização;
» Os títulos dos links devem ser auto-explicativos. Coloque os links em palavras
significativas, evitando termos genéricos como “Clique aqui” e “Mais”;
» Ofereça design leve e agradável, use poucas imagens: as pessoas procuram con-
teúdo;
» Evite textos longos e redundantes. O conteúdo deve conter parágrafos curtos e
sentenças simplificadas;
» Não ofereça muitas áreas de navegação, principalmente se os links forem seme-
lhantes;

21
» Evite menus suspensos;
» As opções e informações mais importantes devem estar acima da primeira
rolagem de tela;
» As caixas de entrada de busca devem possuir um tamanho adequado para que os
usuários possam ver e editar mais facilmente a sua consulta;
» Não surpreenda os usuários: não abra janelas pop-ups automaticamente;
» Não coloque links para “Voltar a Página Anterior”. Não tente reproduzir controles
do navegador;
» Os usuários não devem clicar em mais de três links para chegar até a infor-
mação que desejam;
» O usuário precisa saber: de onde veio, por onde andou e por onde pode navegar.
Síntese da Aula
Nesta aula iniciamos os assuntos gerais e introdutórios para um projeto de
arquitetura da informação, para que você possa entender melhor os conceitos das
aulas.
Vimos como são construídos os sistemas para serem utilizados pelo usuário.
Analisamos sites que trabalham com diferentes disposições e vimos o padrão
de layout utilizado na grande maioria dos sites.
Na próxima aula veremos os elementos dos projetos gráficos.

22
Exercícios Propostos
1) Vamos partir para estudos práticos e ligados à teoria. Escolha duas das figuras
apresentadas (entre a Fig. 6 e a Fig. 10) e faça análises das dicas de erros e acertos
apresentados por Nielsen.
2) Construa um mapa do site de três empresas:
1 – Da instituição de ensino que você estuda
2 – Do grupo musical que você mais gosta
3 – De algo que você tenha conhecimento e interesse. (Esporte, entretenimen-
to, família, etc.)
3) Eleja um dos três mapas criados acima e desenvolva um exemplo de WIREFRAME
de como poderia ser apresentado o conteúdo dessa empresa.

23
Aula 2
Projeto Gráfico (Design)
Objetivos da aula
• Reconhecer e interpretar elementos de uma identidade visual;
• Identificar a aplicabilidade de diferentes tipografias;
• Distinguir elementos gráficos.
Conteúdos da aula

• Identidade Visual
• Cores
• Tipografia
• Gráficos
Prezado(a) aluno(a)!
Já temos o esqueleto – o wireframe. Temos os órgãos
– o briefing. Agora precisamos da musculatura e da pele.
Parece papo de cientista maluco, tipo Frankenstein ou Eduard´s-
mãos-de-tesoura, mas vamos realmente dar uma cara adequada
ao projeto, vamos dar vida ao que já planejamos.
Boa aula!

24
1 IDENTIDADE VISUAL
Assim como o seu documento de identidade – o RG – o(a) identifica, a marca,
ou conceito gráfico é a identidade da empresa, organização, instituição de ensino,
etc. A identidade visual é importante para o projeto web, pois trata da adequação aos
padrões da empresa e permite que o cliente, ao acessar o site, não encontre outra
empresa e que faça a ligação do mundo real com o virtual.
A maioria das empresas possui marcas e elementos definidores de sua iden-
tidade visual – representação constante nos sites –, indicativo de que a empresa que
está no site é a empresa que está na rua.
Veja-se o exemplo da Tim, Fiat, Ipiranga ou Nike. Todas têm a sua marca e um
identidade que se compõe de elementos diferentes, mas com uma gama de possibili-
dades muito parecidas.
Alguns elementos que formam essa identidade vão ser abordados, ainda que
superficialmente, a seguir:
1.1 Cor
Cores são elementos de identificação, mas, algumas vezes, podem fazer com
que seus usuários fujam do site.
Inconscientemente nos sentimos bem com algumas cores e mal com outras,
depende do usuário, porém, podemos criar algumas regras para que isso não fuja
tanto dos padrões.
Verifique nesses dois sites possibilidades de combinação de cores interes-
santes para se utilizar.
» http://wellstyled.com/tools/colorscheme2/
» http://kuler.adobe.com/

25
Significados de cores (Convenções)
» Preto: muito mórbido para ser usado como plano de fundo na Internet, mas
é válido de acordo com a idéia que será transmitida. De certa maneira representa
requinte, se combinado a outras cores como tons pastéis, mas ainda assim é muito
pesado.
» Branco: cor básica, suaviza o layout e combina muito bem com cores claras ou
escuras. Ideal para plano de fundo.
» Vermelho: transmite calor, vida, inovação. Chama a atenção para o tema.
» Azul: passa certa seriedade, confiança, calma e é uma cor que consegue expres-
sar “tecnologia”.
» Pastel: cores delicadas, ideal para sites femininos, de culinária, ou sites sobre
antiguidades.
» Laranja: jovialidade, positividade, vida, muito bom para sites teen e lazer, assim
como o amarelo e o rosa.
» Verde: ideal para sites de saúde, medicina, natureza.
Nos computadores, as cores são representadas por números hexadecimais e
podem ser RGB, CMYK (figura 11) e tabelas específicas como a PANTONE.

Figura 11 - Cores aditivas [a] e Subtrativas [b]
As cores que utilizamos para a Internet são RGB – cores aditivas. Com a soma
das três cores (red, green, blue) chega-se ao branco, ao contrário do CMYK – cores
subtrativas (cyan, magenta, yellow) – cuja soma nos dá o preto (K).
Cores aditivas são aquelas cuja soma de TODAS as cores do espectro nos dá

26
a cor branca, ou seja, essas cores são emissoras de luz, pois são utilizadas em moni-
tores, televisões, celulares e todos os tipos de monitores de imagem. As subtrativas
são as reflexivas, pois somadas chegam à cor preta. São utilizadas em impressões
como livros, revistas, cartazes, etc.
Pense nos sistemas de cores aditivos como as cores que são luz e as sub-
trativas, que não são luz. Se você estiver em uma sala sem nenhuma luz, nenhuma
mesmo, e estiver vendo uma cor, ela está num sistema aditivo. Caso você nada veja,
então é subtrativo, pois precisam de luz para poder existir.
Falando em luz, você já viu uma luz negra?
Observe:
» PRETO = RGB #000000 e CMYK 100,100,100,100
» BRANCO = RGB #FFFFFF e CMYK 0,0,0,0
» VERDE = RGB #00FF00 e CMYK 100,0100,0
» ROSA = RGC #CC6666 e CMYK 0, 40, 20, 0
Definição
» RGB = Red, Green & Blue – Vermelho, Verde e Azul
» CMYK = Cian, Magent, Yellow & Black – Ciano, Magenta, Amarelo e Preto
1.2 TIPOGRAFIA
Conhecidas como fontes, a tipografia é uma família de caracteres com um de-
senho particular, ou seja, todas as letras são representadas seguindo um mesmo
estilo.
Para a Internet, temos que tomar cuidado, pois fontes “diferentes” podem não
estar instaladas no computador do usuário, o que implica na utilização de fontes con-
sideradas padrão como a Arial, Verdana, Tahoma e Times New Roman.
As fontes podem ser encontradas em sites, mas a maioria das fontes de qua-
lidade é paga, você precisa comprá-las para poder utilizá-las.

27
Seguem alguns links para encontrar fontes interessantes:
» www.dafont.com
» www.fontface.com
» www.1000fonts.com
Principais famílias de fontes:
» Serifadas (ex.: Times new Roman, Geórgia, Courrier New): possuem ares-
tas nas extremidades das letras. São adequadas para impressão, mas não para
corpo de texto na web. No caso de títulos ou textos de tamanhos grandes, oferecem
elegância.
» Não serifadas (ex.: Arial, Tahoma, Verdana, Trebuchet MS): são as mais adequa-
das para a leitura on-line, a maioria possui alta legibilidade.
» Cursivas (ex.: Monotype Cursiva, Staccato): são fontes que apresentam o estilo
manuscrito;
» Fantasy (ex.: Comic Sans): são fontes decorativas, com o intuito apenas de en-
feitar. Cuidado ao usá-las. Normalmente são mais usadas para desenvolver logoti-
pos.

A figura 12 apresenta algumas tipografias que se enquadram nas nossas de-
finições:
Podemos observar que os números 1 e 2 são fontes serifadas, comparadas,
apresentam uma diferença bem acentuada. Já os números 6 e 7 são fontes sem se-
rifa, ou ainda, bastões.
As fontes 3 e 4 são semiserifadas, têm elementos de serifa, mas não se com-
portam totalmente assim.
Como forma script temos as de número 4 e 5. Veja que a 5 deriva da marca de
um seriado para TV, você adivinha qual?

28
As tipografias são opostas, mas do mesmo grupo. Elas são decorativas e a
primeira é relacionada ao passado e a segunda ao futuro.
1.3 GRÁFICOS
Nem só de textos vivem os sites, afinal, imagens também são conteúdo. O uso
de gráficos deve ser adequado ao contexto. Imagens usadas como detalhes de layout
devem ajudar a ilustrar a interface e envolver as pessoas. Ícones e símbolos ajudam a
referenciar e a identificar a informação visualizada ou requerida. Por exemplo: ícones
de impressão, botão fechar, “casinha” (ir para a página principal), ícone de áudio e/ou
vídeo, marcadores de listas, etc.
1.3.1 Estrutura Gráfica
A “Gestalt”, ramo da psicologia que compreende a teoria da percepção visual,
baseia-se na psicologia da forma e é uma fonte de estudos bem interessante, talvez
a única, que nos sugere um conceito mais próximo de como devemos criar padrões
visuais. Alguns deles podem parecer óbvios, mas muita gente esquece, portanto

29
seguem alguns deles:
a) Proximidade - Se algo é da mesma família, assuntos, imagens etc., devemos
aproximá-los. Caso contrário, se forem assuntos diferentes, devemos separá-los.
b) Alinhamento - Para alguns estudiosos devemos criar uma malha (como uma ma-
triz) para distribuir logicamente o conteúdo. É um exercício bem útil para você que
está iniciando. Veja exemplos de malhas em sites conhecidos:
c) Repetição - A repetição faz com que você referencie rapidamente algo da mesma
família. Por exemplo, se temos um ícone para fotos – uma máquina digital – que se
repete várias vezes, já clicamos em um ou dois deles e sabe-mos que nos leva a uma
página só de fotos. Claro que, se eu observar mais vezes esse ícone, sempre associa-
rei com a página extra de fotos, por isso, cuidado com a similaridade dos ícones para
não causar o que chamamos de ruído na comunicação.
d) Proporção - Se você colocar um título em tamanho 15px, o link ao lado – próximo,
com a mesma cor e tamanho 15px – o usuário vai acreditar que os dois são links, ou
os dois são títulos.
Portanto, tamanhos de áreas, fontes, imagens, etc., são sim uma forma de i-
dentificar famílias. Cuidado para não confundir o seu usuário.
1.3.2 Estudo de aplicação dos conceitos gráficos
Vamos verificar o site a seguir (figuras 13 e 14) e a análise que podemos faz-
er:

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

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

32
Analisando as figuras 13 e 14, podemos observar, em duas páginas diferen-
tes, uma de esportes e outra de notícias gerais, que a estrutura é igual, muda a iden-
tidade de cada uma.
Vamos analisar os pontos enumerados nas imagens:
» 0 – A logomarca da página está na mesma área, ou seja, ao mudar de página, o
usuário sabe exatamente onde está.
» 1 – A Busca está EXATAMENTE no mesmo formato e posição, fazendo com que o
usuário se familiarize com o ambiente.
» 2 – O menu interno sofre pequenas alterações. Na página de notícias se torna
complicado criar muitos níveis de diferenciação, já na página de esportes as funções
são agrupadas – no exemplo, um dos grupos é de campeonatos.
» 3 – A barra principal de navegação é horizontal e padrão. Tem a função de mostrar
ao usuário onde ele está. Lembram-se quando comentamos sobre onde estou? Pois
bem, as cores dos botões dessa navegação vão dar o tom das páginas internas.
Como você pode perceber, o link da página de notícias é vermelho, e o fundo da
página é vermelho. Na página de esportes é verde, como no link.
» 4 – O conteúdo encontra-se na mesma posição e com as mesmas dimensões. O
conteúdo sofre alterações, mas o formato não.
» 5 – A área do plantão segue a mesma estrutura e posicionamento e se adapta à
cor de cada área. Quando olhamos para esse tipo de estrutura, sabemos que se tra-
ta das últimas notícias.
Síntese da Aula
Nesta aula verificamos a existência de elementos da identidade visual e anali-
samos os diferentes tipos de reprodução das cores, o significado psicológico e sua
aplicação em códigos.
Analisamos também as variações que existem entre as diferentes tipografias
e conhecemos características gráficas, que auxiliam na estruturação de um layout,
analisando todos os tópicos em dois sites de grande acesso.
Na próxima aula estudaremos sobre arquivos e tipos de imagens.

33
1) Defina o que é identidade visual.
2) Quais são os tipos de sistemas de cores e onde usá-los?
3) O que são Serifas?
4) Com base no item 2.2, encontre um site e faça as análises e encontre os números
de 0 a 5 (se existirem todos).

34
Aula 3
Fundamentos Sobre Imagens
Objetivos da aula
• Identificar imagens raster;
• Identificar imagens vetoriais;
• Investigar sobre a utilização dos diferentes tipos de arquivo de
imagens;
• Produzir imagens adequadas a diversas finalidades.
Conteúdos da aula

• Raster vs Vetorial;
• Imagens na Web;
• GIF;
• JPG;
• PNG;
• Utilização das imagens;
• Profundidade de cor;
• Formato de Arquivos.
Prezado(a) Aluno(a)!
Vamos definir algumas premissas para o nosso trabalho:
Partamos do ponto que para se trabalhar com computação gráfica
é necessário conhecer, no mínimo, como funcionam as imagens e
seus tipos. Pronto, agora você entendeu por que vamos estudar os
temas seguintes.
Boa Aula!

35
1 INTRODUÇÃO
Anos atrás, a Web não passava de texto na cor preta sobre um fundo cinza. As
poucas imagens demoravam “três semanas” para carregar, um pão francês custava
dois centavos e eu tinha que caminhar na lama quando chovia para ir à escola. Os
tempos mudaram, o pãozinho se cobra pelo peso e a Web tornou-se um lugar onde
os visitantes esperam encontrar imagens profissionais.
Se você não souber como tirar vantagem do potencial da Web, a história vai se
repetir: Sua página levará três semanas para carregar e você vai receber um bilhete
para ser entregue aos seus pais convidando-os a uma reunião de pais e mestres, para
falar sobre o seu “mau rendimento em aula”, pois não assimilou nada do que deveria
aprender sobre os assuntos até aqui ministrados!
O primeiro passo para você entender como criar e gerenciar gráficos para a
Web é compreender o que propriamente são as imagens. As imagens eletrônicas são
feitas de milhares de pequenos pontinhos coloridos chamados de “pixels”. Os pixels
são tão pequenos que um deles sozinho não pode ser captado pelo olho humano, por
isso eles dão a ilusão de uma imagem contínua. É assim que todas as imagens que
você vê em seu computador funcionam. Claro, você já olhou na tela da TV com uma
lupa quando era criança. Se não, vá e faça isso agora mesmo.
Algumas telas têm pontos, outras têm linhas, mas o princípio é o mesmo. En-
tão, continue lendo e eu vou ajudar a preparar você para manejar seus pixels corre-
tamente.
2 RASTER X VETORIAL
A possibilidade de utilizarmos imagens, gráficos, desenhos e textos artísticos
nas nossas publicações revolucionaram a forma da escrita tradicional. Uma publica-
ção, atualmente, cativa o leitor pelo seu charme natural, sua descontração para a
leitura e a facilidade de assimilação do conteúdo. As imagens ajudam muito para esta
nova atitude. A qualidade do gráfico depende da sua resolução.

36
Resolução. A resolução ou nitidez gráfica é medida pelo número de pon-
tos ou pixels - elementos de figura - que podem ser colocados em uma polegada
quadrada (dots per inch, ou DPI).
Apesar da variedade de formatos de arquivos gráficos, todos caem em uma
dentre duas categorias: mapas de bits ou imagens e gráficos de vetor ou line art.
A arte de mapa de bits é composta de milhares de pequenos pontos e os de-
senhos de vetor compreendem linhas calculadas por fórmulas matemáticas. Os grá-
ficos de mapas de bits são geralmente produzidos por programas de pintura e scan-
ners, os gráficos de vetores são produzidos por programas de desenho.
Como você pode conferir na figura 15, as imagens de mapa de bits têm uma
limitação de ampliação, diretamente ligada a sua resolução.
Figura 15 – Imagem no formato Mapa de Bits de 72dpi. Com zoom de 8x.
A resolução e a capacidade da impressora são interativas. Se você tiver uma
imagem de mapas de bits com 180 dpi, ela nunca poderá ser impressa em uma re-
solução melhor do que 180 dpi, mesmo que saia em uma impressora a laser de 300
dpi. Os gráficos de mapas de bits não se tornam gráficos de alta resolução só porque
se usa uma impressora melhor.
Um gráfico de vetor ou baseado em objetos, por outro lado, é composto de

37
linhas retas e curvas, calculadas matematicamente. A resolução dos gráficos de vetor
segue a capacidade da impressora. Uma figura de vetor é impressa em 600 dpi em
uma impressora a laser de 600 dpi e em 1.200 dpi em uma fotocompositora de 1.200
dpi. Com gráficos de vetor, quanto melhor a impressora, melhor a resolução (Figura
16). A Arte em Postscript, arquivos EPS, CGM e GEM são gráficos de vetor. A Arte
BITMAP, arquivos BMP, TIF, GIF, JPG são gráficos raster.
Figura 16 - Imagem vetorial. Zoom de 10x.
3 Formatos da Web
Os Navegadores da Web (browsers) podem exibir apenas imagens salvas em
tipos especiais de arquivos. Os dois principais tipos usados são GIF e JPG.
As imagens devem aparecer na tela do visitante com rapidez e qualidade ne-
cessárias. Para isso, é muito importante saber as diferenças e escolher o melhor for-
mato para cada imagem. Quanto mais compactas, mais eficazes serão as figuras.
Quanto tempo? Para estimar quanto tempo vai levar para alguém ver uma ima-
gem usando um modem de 28.8, divida o tamanho da imagem por dois. Assim, um
arquivo com 12K vai normalmente demorar 6 segundos para carregar e aparecer.

38
3.1 GIF: GRAPHIC INFORMATION FORMAT (LEIA “GUIFI”)
Arquivos GIF são melhores para imagens com poucas camadas de cores (fi-
gura 17). Use-os para “imagens de apresentação”: gráficos, figuras ou imagens de
texto. Quanto menos cores você usar, mais eficiente será o arquivo GIF. Um arquivo
do tipo GIF pode conter no máximo 256 cores.
Figura 17 - Imagem GIF
Arquivos GIF podem ser “entrelaçados” assim eles parecem “fade in” (vão a-
parecendo aos poucos), de uma menor para uma maior qualidade enquanto estão
carregando. Isso proporciona aos visitantes algo para ser visto enquanto esperam.
Arquivos GIF podem ser transparentes. Significa que você pode escolher uma
ou mais cores para “não serem” mostradas, permitindo que as cores do fundo da sua
página apareçam através delas. Isso evita que os gráficos dêem a impressão de es-
tar em caixas, causando, visualmente, a impressão de que estão mais integrados com
a página.
Os arquivos GIF são “lossless”, significa que a qualidade da imagem não é
degradada pelo processo de compressão.
Podem ser animados, como filmes, só que bem mais simples. As GIF’s anima-
das simulam movimento usando uma série de imagens individuais.
Os arquivos GIF não são bons para fotografias – perdem qualidade e os arqui-
vos não serão compactos. Use arquivos JPG para fotos.
3.2 JPG: Joint Photographic Experts Group
Arquivos JPG (lê-se “jota-pégue” OU “Jota-Pê-Gê”) são melhores para ima-
gens com muitas cores, como fotografias e arte digitalizada (figura 18). O JPG admite
16 milhões de cores. A compressão é variável e você pode aplicar maior ou menor

39
compressão a cada imagem, individualmente.
Figura 18 - Imagem JPG
O sistema JPG é do tipo “lossey”, quanto maior a compressão, menor será a
qualidade. O tamanho do arquivo pode diminuir bastante nesse sistema, mas você
deve balancear o tamanho do arquivo com a qualidade da imagem. Os novos soft-
wares gráficos (Macromedia Fireworks ou Adobe Photoshop) permitem pré-visualizar
suas imagens JPG, assim você pode escolher o melhor balanço entre tamanho e
qualidade.
As novas versões desse tipo de imagem introduzem a possibilidade de salvar
seu JPG como um arquivo entrelaçado, causando a impressão de que ele vai “apa-
recendo” de uma menor para uma maior qualidade, enquanto vai sendo carregado,
mas browsers antigos não suportam este formato.
Arquivos JPG não são bons para imagens com poucas cores, elas serão mai-
ores que o necessário e parecerão embaçadas.
JPG também não tem transparência.
3.3 PNG: Progressive Network Graphics
PNG é o mais novo formato de arquivo gráfico para a Web, por isso, só é su-
portado pelos navegadores mais novos. Esses arquivos não aparecerão em nave-
gadores antigos, por essa razão, ao usar o formato PNG, você pode fazer com que
visitantes do seu site não consigam ver as suas imagens. Em alguns testes, os na-
vegadores FireFox e o IE7 já aceitam esse formato.
Arquivos PNG são compactos e versáteis e podem combinar as melhores

40
características do GIF e JPG, como a capacidade de ter um fundo transparente ou
conter imagens com milhões de cores.
Embora esse formato seja útil e eficiente, você deve ter prudência na sua uti-
lização.
3.4 Quando usar um deles?
O erro mais comum que as pessoas cometem, quanto às imagens para a Web,
é usar o formato errado para essas imagens, mas a escolha é simples:
DICAS
» Se a imagem tem poucas cores, escolha GIF;
» Se a imagem tem muitas cores (como uma foto), escolha JPG;
» Se o público do seu site utiliza FireFox ou IE 7, use PNG quando necessário.
Nada de segredos e cálculos complicados. Escolhendo o formato correto, su-
as imagens terão boa aparência e carregarão rápido no computador do visitante. Es-
colhendo o formato errado, as imagens terão péssima aparência e levarão uma eterni-
dade para carregar. Se você não for capaz de lembrar-se dessas regras simples, faça
uma tatuagem com elas em algum lugar do seu corpo que seja bem visível.
Para encerrar a discussão, vamos separar 2 tipos de imagem por categorias:
fotografias e simples. Uma imagem simples geralmente é composta por texto, gráfi-
cos e diagramas, tudo com contornos definidos e grandes formas com cores contí-
nuas.
Uma imagem fotográfica pode ser qualquer coisa, desde uma fotografia de seu
cachorro, a Bolinha, a uma pintura de Leonardo DaVinci. Basicamente qualquer coisa
com uma grande quantidade de cores. Como regra geral, conteúdo “simples” deve ser
salvo como GIF e fotográfico como JPG.
Saiba mais sobre os formatos aqui
http://rodrigomuniz.com/go/experimentos/formatos-imagem/

41
3.5 A compressão e o tamanho do arquivo
Existem alguns problemas relacionados com as compactações de imagens,
claro que a dica anterior é de grande valia, porém não se resume a isso, pois, para
cada JPG, existem tipos de compressões utilizadas.
Vejamos agora alguns estudos de caso relacionando TAMANHO (bytes) VS
QUALIDADE (resolução) com o nosso amigo “Sr. Stress Anty”.
Vamos analisar os fatos:
Imagem Inicial (A)
Tamanho : 51,7 Kb
Imagem com compacta-
ção 20% (B)
Tamanho : 15,0 Kb
ção 70% (C)
Tamanho : 7,0 Kb
Observando atentamente a imagem B e comparando-a com a imagem A pode-
se notar uma pequena diferença na qualidade, porém é mínima e o arquivo diminui de
tamanho, consideráveis (para a WEB) 35Kbytes.
Na imagem C, o nosso amigo Stress Anty está um pouco fosco ou fora de foco,
todavia o tamanho do arquivo é bem pequeno, apenas 7 Kbytes, tornando-o muito
bom para a web.
Continuando o estudo do Sr. Stress Anty veremos três tipos de resoluções que
não são de boa utilização.

42
ção 90% (D)
Tamanho : 3,9 Kb
JPG convertida em
GIF256 (E)
Tamanho : 44,1 Kb
JPG convertida em GIF
Uniforme (F)
Tamanho : 18,2 Kb
Na imagem D, nota-se perfeitamente a má resolução da imagem e, conse-
qüentemente, o tamanho reduzido do arquivo, apenas 3,9 Kbytes. Em contrapartida,
temos a mesma imagem, só que exportada como um arquivo GIF, com 256 Optimized,
uma boa resolução e um tamanho grande, novamente ressaltando, para a WEB.
Para terminar o nosso trabalho com o Sr. Stress Anty, vemos uma GIF com
compactação Uniforme, indubitavelmente horrível.
Resumindo, os diferentes programas usam diferentes números para a com-
pressão JPG, mas, geralmente, quanto maior o número, maior a qualidade da ima-
gem e seu tamanho. Você deve procurar na documentação de seu software para
saber como ele faz esse tratamento. Para cada trabalho existe uma configuração
adequada, seja para WEB ou para impressão. Se você precisa de uma imagem com
excelente qualidade, não irá fugir de um arquivo de bom tamanho em Kbytes.
DICA:
Embora você deva usar GIF ou JPG como gráficos para a web, salve o seu arquivo
original em um formato como TIF (Tagged Image File Format) ou o formato nativo de
seu software gráfico. Por quê? Porque você preserva a resolução e a qualidade da
imagem original, para novamente usá-la ou não na web!

43
3.6 Resolução de Tela
No Brasil, como temos preços elevados para artigos tecnológicos, ainda não há
(a grande maioria) monitores e placas de vídeo que nos permitam trabalhar com uma
resolução de tela de 1024x768px, mas grande parte dos designers está fazendo seus
layouts fluidos. O que quer dizer isso?
Normalmente os usuários domésticos utilizam resolução de 800 x 600px, mas
com CSS e outras tecnologias, você consegue utilizar layouts que podem se adaptar
para telas maiores ou menores. Esse é um tópico específico, que você deve procurar
quando dominar os itens básicos.
IMPORTANTE
Para desenvolver um site para a resolução de 800x600, NUNCA CRIE O LAYOUT
COM 800x600, pois a área útil desta resolução é de 770x440px aproximadamente,
ou seja, você sempre perderá espaço para menus do seu navegador e da barra ini-
ciar do Windows, por exemplo.
No mundo digital, os gráficos podem ser divididos em dois grupos, os vetoriais
e os bitmaps. A diferença principal entre eles é a resolução.
Os gráficos vetoriais são feitos por cálculos matemáticos, portanto, se fizermos
alterações em seu tamanho, ele irá adaptar-se e não terá problemas de definição.
Os mapas de bits, como seu nome diz, são quadradinhos de cores diversas,
que montam uma imagem maior. Este sim, dependendo da resolução, sofre com o di-
mensionamento.
3.7 Cor em “profundidade”
Cada pixel da imagem é mostrado pelo monitor usando-se uma combinação
de três sinais de cores: vermelho, verde e azul. A intensidade de cada um desses
sinais determina a sua aparência. Em um monitor de TV preto e branco, os pixels
têm apenas duas cores possíveis: preto ou braço. O que é chamado de “1-bit” porque

44
o pixel está ligado ou está desligado.
Imagem com Profundidade de
bits
Sem profundidade. Preto e
Branco
Em monitores coloridos, cada pixel pode exibir certo número de cores, que
vão de 16 (4-bit) a 16 milhões. A maioria dos computadores, hoje em dia, pode exibir
65.000(16 bits) cores. Novos computadores exibem de 65.000. (16-bit) a 16 milhões
de cores.
3.8 Formato de Arquivos
Como em todos os programas de qualquer funcionalidade, desenho, texto, som
ou vídeo há vários tipos de imagens com a mesma funcionalidade, mas com caracter-
ísticas diferentes. Para Exemplificar vamos aos conhecidos arquivos de som:
» WAV – Arquivo de som extraído de algum dispositivo de entrada (Microfone – CD
– Teclado Musical – ETC) outro arquivo
» MP3 – Arquivo de som extraído de algum dispositivo de entrada (Microfone – CD
– Teclado Musical – ETC)

45
Mas qual a diferença? Assim analisando, NENHUMA! Porém, quem conhece
os arquivos, sabe que o mp3 tem uma compactação melhor e a qualidade superior
que o WAV. Mas isso é apenas um exemplo de arquivos quaisquer.
Vamos agora para os arquivos de Imagens.
Tipo de Arquivo Pacote de Software
Postscript EPS
Muitos aplicativos para PC e MAC pro-
duzem arquivos Posts-cript. Postscript é
uma rica linguagem de descrição de grá-
ficos, mas, como um arquivo EPS é, na
realidade, apenas texto com instruções
para uma impressora Postscript indicando
como imprimir a imagem. Nenhuma ima-
gem Postscript será mostrada na tela, salvo
se uma imagem de mapas de bits (TIFF ou
WMF) estiver incluída com o arquivo EPS.
CompuServe GIF
Arquivos GIF são usados para criar imagens
comprimidas para facilitar o uploading e o
downloading das electronic Bul-letin Board
Systems (BBS) e da INTERNET.
BMP
Arquivos BMP: Os BMP’s podem ser cria-
dos no Windows’ Paintbrush e usados como
“wallpaper” no background quando rodamos
o Windows.
WMF
Os arquivos Windows Meta File geralmente
são gerados no formato Aldus Placeable
Metafile (que contém um cabeçalho com in-
formações org e ext). A Aldus e a Micrografx
criaram uma versão estendida do Formato
de Meta-arquivo do Win-dows chamada
“Placeable Metafile Format.” Nesse formato
estendido, 22 bytes de informações foram
adicionados ao cabeçalho padrão do meta-
arquivo.
TIF
O Formato Tagged Image File (.TIF) é usado
por muito scanners. Nem todos os arquivos
TIF são idênticos, obedecem a uma série de
especificações (Revisão TIFF 5.0. Revisão
TIFF 6.0, etc.). Tais tipos podem ser muito
grandes e consumir mui-to espaço em disco,
pois incluem informações de escala de cinza.
No entanto, os formatos TIF, comprimidos,
podem usar apenas 10% do não-comprimi-
do.

46
Síntese da Aula
Estudamos nesta aula os diferentes tipos de representação gráfica digital.
Estudamos os tipos de imagens, como funcionam e quais as melhores para
finalidades específicas. Aprofundamos o conhecimento entre as imagens vetoriais e
raster juntamente com outras extensões de arquivos.
Comparamos também as formas de exportação de imagens raster.
No próximo capítulo veremos a ferramenta fireworks.
1) Descreva a diferença entre imagens Raster e Vetorial, justificando.
____________________________________________________________________
____________________________________________________________________
_____________________________________________________________________________________________
____________________________________________________________________________________________
2) Imagens PNG são utilizadas para fotografia? Justifique.
____________________________________________________________________
____________________________________________________________________
________________________________________________________________________
_______________________________________________________________________
3) Lendo as características deste capítulo, você utilizaria arquivos GIF para fotogra-
fias? Por quê?
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
____________________________________________________________________

47
Aula 4
Fireworks
Objetivos da aula
• Familiarizar-se com a ferramenta;
• Manipular documentos nativos da ferramenta;
• Exportar arquivos de imagens;
• Utilizar as ferramentas-padrão.
Conteúdos da aula

• Conhecendo o software;
• Criando e exportando documentos;
• Ferramentas de criação e edição.
Nesta etapa, serão apresentados os principais recur-
sos utilizados para desenhar páginas Web, usando
como ferramenta o software Fireworks. Embora possua uma in-
finidade de recursos e de funcionalidades, os tópicos abordados
proporcionarão conhecimento necessário ao desenvolvimento de
soluções gráficas para Web.
Familiarizado(a) com o software, será proposto o desen-
volvimento de Layout para um Hotsite, baseado no Caso de Uso
da empresa Salvador Móveis.
Boa aula!

48
1 VISÃO GERAL
Fireworks é uma eficiente ferramenta de edição de imagens para web. Con-
sagrada mundialmente entre Webdesigners, vem ganhando cada vez mais adeptos
assim como novos recursos lançados a cada versão.
Projetado especificamente para criar e editar figuras da Web, o Fireworks for-
nece recursos que tornam mais fácil inserir gráficos dentro de páginas da Web, de-
pois que elas foram criadas, além de disponibilizar ferramentas sob medida para a-
perfeiçoar e otimizar imagens para o uso na Web.
O Fireworks é totalmente compatível com imagens vetoriais e bitmap, ou seja,
é possível criar e manipular imagens em ambos os formatos no mesmo Ambiente de
Trabalho, possibilitando, inclusive, exportar facilmente as imagens para páginas em
HTML, assim como códigos JavaScript para os elementos Rollover.
Nota: Foi utilizada a versão 8.0 (inglês) do Fireworks para esta apostila. A
apresentação a seguir pode exibir um ambiente ligeiramente diferente dependendo
de qual versão do software você está praticando. No entanto, o conceito deve seguir
o mesmo contexto.
2 CONHECENDO O BÁSICO
Características da Área de Trabalho do Fireworks e seus principais recursos.
2.1 Criando um Novo Documento
1. Ative o Fireworks;
2. Escolha File > New na barra de menus (figura 19);
3. Na caixa de diálogo, informe o Width e Height. Esses valores correspondem à Lar-
gura e à Altura em pixels, polegadas ou centímetros;
4. Ative a opção White para selecionar a cor Branca de fundo para a nova imagem;

49
defina Transparent para deixar o fundo sem nenhuma cor ou selecione Custom para
escolher uma cor personalizada.
Figura 19 - Propriedades de um Novo Documento.
2.2 Área de Trabalho do Fireworks
O Fireworks possui três sessões principais em sua Área de Trabalho, conforme
mostra a figura 20.
» Caixa de Ferramentas Expansível (Tools): A Caixa de Ferramentas (exibida no
lado esquerdo da figura) contém diversas ferramentas de desenho, algumas das
quais estão contidas em Grupo de Ferramentas. Para Exibir um Grupo de Ferra-
mentas, pressione e segure qualquer ferramenta com um triângulo no canto inferior
direito.
» Layers (Camadas): O Painel Layer, localizado no lado direito da figura, armazena
todas as camadas que existem em um documento do Fireworks. Dessa forma, os
elementos gráficos podem ser agrupados ou sobrepostos individualmente conforme
o desejado.
» Properties (Propriedades): O Painel Properties - também chamado de Inspetor

50
de Propriedades -, é utilizado toda vez que é preciso configurar as propriedades de
um objeto selecionado, assim como a propriedades globais do documento.
Figura 20 - Área de Trabalho do Fireworks.
2.3 Navegando entre documentos
O Fireworks permite trabalhar com diversos documentos ao mesmo tempo,
estejam maximizados ou minimizados dentro da Área de Trabalho. Para gerenciá-los,
o Fireworks agrupa todos em uma estrutura de abas que contém o nome de cada
documento em edição.
Para navegar entre os documentos, basta selecionar uma aba respectiva para
ativar sua visualização. No exemplo da Figura 21, existem três documentos em edição,
mas só o primeiro documento está sendo visualizado.
Figura 21 - Abas dos documentos em edição.

51
3 Exportação de documentos
O assistente para exportar imagem é um eficiente recurso que possibilita ge-
rar a imagem mais adequada para sua aplicação. É possível definir o formato final
e acompanhar o tamanho do arquivo, assim como ter uma pré-visualização, no mo-
mento de edição (Figura 22). Para ativar o assistente, selecione File > Export Wi-
zard.
Os dois formatos mais comuns utilizados em Figuras da Web, são o JPG e o
GIF. Ambos têm finalidades específicas, como já foi abordado anteriormente. Neste
exemplo, é possível observar as configurações de uma imagem no formato JPG. Op-
tou-se pela escolha da qualidade da imagem, através da opção Quality.
Dica importante: sempre ativar a opção Progressive browser display. Ela faz
com que a imagem seja carregada dinamicamente pelo browser, do contrário, o na-
vegador só irá exibir a imagem quando estiver totalmente carregada.
Figura 22 - Assistente para exportar imagens.

52
Para selecionar outros formatos, com a finalidade de exportar, basta informar o
formato desejado, através da opção Format. A Figura 23 demonstra as configurações
para uma imagem no formato GIF. A principal característica desse formato é a pos-
sibilidade de definir uma ou mais cores para serem tratadas como transparentes na
imagem. Perceba no exemplo da figura que o fundo, anteriormente branco, passou
para transparente.
Para Selecionar uma área transparente na imagem, basta selecionar a ferra-
menta conta-gota, e clicar sobre a área desejada na imagem. Dessa forma, a imagem
final em GIF assumirá a cor de fundo na qual ela for sobreposta.
Quando a imagem tiver que ser transparente, ainda que não for preciso alta
definição e qualidade, escolha o formato GIF. O JPG permite gerar imagens de alta
qualidade com um alto nível de compressão, ou seja, o arquivo final terá sempre pou-
cos kilobytes.
Figura 23 - Exportando imagens com fundo transparente

53
3.1 Controle de ampliação
É possível controlar a ampliação do documento original, usando-se um recur-
so rápido, localizado logo abaixo da imagem em edição, conforme o detalhe da Figu-
ra 24. Basta pressionar sobre o valor de ampliação e selecionar o nível desejado.
Também é possível consultar nessa área a resolução atual utilizada no docu-
mento. Ao clicar sobre o valor atual, será exibida a dimensão aplicada em pixels ou
centímetros por polegada.
Figura 24 - Controle de Ampliação
3.2 Barra de Ação Principal
Por padrão, o Fireworks não traz ativa a Barra de Ação Principal, que possibi-
lita o acesso rápido à função para criar novos documentos, salvar e imprimir. Similar
a diversos outros aplicativos, está disponível o recurso para Desfazer ou Refazer um
ponto de edição.
Para ativar a Barra de Ação Principal, selecione na Barra de Menus Windows
> Toolbars > Main (figura 25).
Figura 25 - Barra de Ação Principal

54
4 Exportar para outros aplicativos
O Fireworks permite exportar rapidamente seu trabalho para diversos forma-
tos e aplicativos. Utilizando o botão localizado no topo direito do documento de edi-
ção (Figura 26), é possível exportar para HTML assim como Flash. A opção Visualizar
nos Browsers dá idéia de como o Layout se comporta em uma página da Web.
Entre os formatos suportados, estão o Microsoft FrontPage e Adobe GoLive®,
além de outras ferramentas da família Macromedia e Adobe.
Figura 26 - Opção exportar para outros formatos e softwares.
4.1 Utilizando a Caixa de Ferramentas
A Caixa de Ferramentas (Figura 27), está separada em seis categorias:
» Seleção,
» Bitmap,
» Vetor,
» Web,
» Cores,
» Visualização.
Para selecionar uma ferramenta ou subferramenta, basta clicar sobre o ícone
desejado ou pressioná-lo quando estiver dentro de um Grupo de Ferramentas (Figura
28).

55
Figura 27 - Caixa de Ferramentas
Figura 28 - Grupo de Ferramentas
4.2 Selecionando e cortando objetos
Antes de fazer qualquer edição em um objeto, é necessário fazer sua seleção.
Para isto, existem duas ferramentas específicas que podem ser usadas para sele-
cionar objetos, pontos de um vetor, um bloco de texto ou uma palavra simplesmente.
Ferramenta Pointer seleciona e arrasta objetos;

56
Ferramenta Subselection seleciona apenas alguns pontos do objeto;
Ferramenta Crop seleciona a área da imagem que será cortada.
Na Figura 29, é possível observar na prática o uso de cada ferramenta citada
anteriormente. Enquanto a Ferramenta Pointer seleciona o objeto por inteiro, a Fer-
ramenta Subselection permite selecionar pontos específicos do objeto. Dessa forma,
é possível editar pontos sem alterar o restante da imagem.
A Ferramenta Crop, delimita a área onde será efetuado o corte da imagem.
Feita a seleção, basta dar um Double-Click sobre a área marcada para descartar o
restante da imagem.
Figura 29 - Uso das Ferramentas Pointer, Subselection e Crop.
4.3 Selecionando Pixels
Assim como as ferramentas de seleção para objetos, há duas ferramentas
específicas que auxiliam na seleção de pixels. Para marcar uma área de edição, basta
selecionar a ferramenta mais adequada.
Ferramenta Marquee - faz a seleção no formato retangular na imagem;
Ferramenta Lasso - faz uma seleção livre;
Ferramenta Eraser - remove os pixels da imagem.

57
Conforme a Figura 30, é possível perceber o uso das duas ferramentas de se-
leção de pixels - Marquee e Lasso -, assim como a Ferramenta Erase, após remover
os pixels da área apontada.
Figura 30 - Uso das Ferramentas Marquee, Lasso e Erase.
4.4 Edição de objetos Vetoriais e Texto
O Fireworks possui ferramentas para criar e editar vetores. São ferramentas
extremamente eficientes para gerar desenhos complexos, cujos objetos são editados
manualmente, nos mínimos detalhes. A ferramenta texto destaca-se por uma vasta
gama de opções de configuração, accessível no Painel Inspetor de Propriedades, que
será exibido mais adiante.
Veja na Figura 31 o exemplo de uso de ferramentas vetoriais. É possível ob-
servar diversos estilos de linha gerados pela Ferramenta Line. Para explorar todas as
propriedades dessa, assim como as possibilidades de ajuste de outras ferramentas,
basta utilizar o Painel Properties.
Ferramenta Line - desenha linhas retas;
Ferramenta Pen - desenha através de pontos de ancoragem;
Ferramenta Rectangle - desenha retângulos, quadrados e arredondados;
Ferramenta Text - cria blocos de texto.

58
Figura 31 - Uso das Ferramentas Line, Pen, Retangle e Text.
No exemplo da Figura 32, podemos verificar o processo de seleção do estilo de
linha com todas as variedades existentes, dentre as quais foram utilizadas quatro no
exemplo da Figura anterior.
Além do estilo de linha, é possível definir outras propriedades como cor da
borda entre outros efeitos.
Figura 32 - Propriedades da Ferramenta Line
A Ferramenta Text possui diversas opções de configuração assim como a
Ferramenta Line.
Para obter efeito similar ao exemplo da Figura 31, basta explorar a seleção de
fontes através do painel de Ferramentas conforme mostra a Figura 33.

59
Figura 33 - Propriedades da Ferramenta Text ao selecionar um estilo de Fonte
5 Preparar documento para HTML (Slicing)
Uma das grandes vantagens do Fireworks é a facilidade em exportar o Layout
para HTML em páginas da Web. No entanto, para que o Fireworks saiba qual fatia
do Layout deve recortar, ou simplesmente ignorar preenchendo com cores HTML ao
invés de imagem, é preciso informar adequadamente a seleção do documento.
Ferramenta Slice - indica as áreas do documento que serão recordadas para
HTML.
Na Figura 34 é possível analisar um exemplo de Banner. A primeira imagem
é a original e logo em seguida são exibidas as quatro áreas selecionadas, utilizando
a Ferramenta Slice. Dessa forma, ao ativar o recurso exportar, o Fireworks recortará
apenas as áreas selecionadas descartando o restante da imagem.

60
Figura 34 - Exemplo de uso das Ferramentas Slice.
Para exportar esse tipo de seleção, selecione o menu File > Export e informe
o formato HTML para gerar uma página da Web como resultado do Layout.
5.1 Aplicando cor e borda a objetos vetoriais
Objetos vetoriais possuem entre suas propriedades a cor de fundo assim co-
mo cor da borda. Para editar um dessas configurações, basta selecionar o objeto
desejado e escolher uma cor usando a Paleta de Cor Padrão do Fireworks, similar
à Figura 35. Também é possível fazer uma sintonia fina da seleção de cor, usando a
Seleção Avançada conforme ilustra a Figura 36.
Define uma cor para a borda do objeto selecionado;
Define a cor de fundo para o objeto selecionado.

61
Figura 35 – Paleta de Cores
Figura 36 – Sintonia fina de cores
5.2 Utilizando o Inspetor de Propriedades
Todas as ferramentas da Caixa de Ferramentas que acabamos de ver possu-
em configurações que podem ser acessadas e modificadas manualmente, possibili-
tando efetuar a sintonia fina de um Filtro ou Efeito de Sombra, por exemplo. Essas
configurações são centralizadas em um Painel específico chamado Inspetor de Pro-
priedades.

62
Observe na figura 37, a visualização do Painel Inspetor de Propriedades quan-
do a ferramenta Texto está selecionada na Caixa de Ferramentas:
Figura 37 - Painel Inspetor de Propriedade exibindo opções da Ferramenta Texto
O Painel Inspetor de Propriedade é um modo rápido e eficiente para aplicar
efeitos e filtros aos objetos suportados. No lado esquerdo superior é exibido o forma-
to de edição do objeto.
5.3 Alinhando objetos
Os comandos de alinhamento disponibilizam diversas opções prontas, permi-
tindo alinhar objetos ao longo de uma linha central, horizontal ou vertical, entre ou-
tras opções. Para acessar os comandos de alinhamento, selecione a opção mais
adequada em Modify > Align:
• Left: Alinha o objeto à esquerda;
• Center Vertical: Alinha o objeto no centro ao logo de uma linha vertical;
• Right: Alinha o objeto à esquerda;
• Top: Alinha o objeto ao topo;
• Center Horizontal: Alinha o objeto no centro ao logo de uma linha horizontal;
• Bottom: Alinha o objeto à base;
• Distribute Widths: Distribui uniformemente a largura dos objetos selecionados;
• Distribute Heights: Distribui uniformemente a altura dos objetos selecionados.
5.4 Girar, inverter e transformar objetos
O Fireworks disponibiliza várias opções para transformar objetos. Além da
transformação livre, é possível gira um objeto e invertê-lo conforme for necessário.

63
Para acessar este recurso, selecione Modify > Transform:
• Free Transform: Permite transformar livremente as dimensões do objeto;
• Rotate 180º: Gira o objeto 180º;
• Rotate 90º CW: Gira o objeto 90º no sentido horário;
• Rotate 90º CCW: Gira o objeto 90º no sentido anti-horário;
• Flip Horizontal: Inverte o objeto na horizontal;
• Flip Vertical: Inverte o objeto na vertical.
Observe na Figura 38 o uso da Ferramenta Free Transform, que possibilita edi-
tar livremente os pontos de dimensão do objeto. Em seguida, a ferramenta de rotação,
Rotate 180º, gira o objeto em um intervalo específico. Também é possível aplicar rota-
ções diferentes usando as variações da ferramenta no sentido horário ou anti-horário,
dentro do intervalo de 90º.
A Ferramenta Flip Vertical altera a perspectiva da imagem, invertendo sua o-
rientação na posição horizontal. Também é possível realizar a inversão na posição
vertical, usando a ferramenta Flip Vertical.
Esse recurso deve ser aplicado com cautela a imagens ou objetos que conte-
nham texto, pois, ao inverter uma frase na horizontal, por exemplo, ela se apresenta-
rá semelhante ao texto visto por meio de um espelho.
Figura 38 - Edição utilizando Free Transform, Rotate 180º e Flip Horizontal

64
5.5 Redimensionar área de desenho, dimensão e cor da de fundo
Comumente, é necessário alterar as dimensões do documento, liberar mais
espaço de edição ou realizar o contrário, diminuir a área de desenho para somente o
espaço utilizado. O Firewoks permite configurar facilmente essas e outras proprieda-
des, selecionando Modify > Calvas:
• Emane Size: Altera a dimensão original da imagem;
• Calvas Size: Altera a dimensão da área de desenho;
• Canvas Color: Define uma cor de fundo ou transparência para imagem;
• Trim Canvas: Elimina a área de desenho não utilizada na edição;
• Fit Canvas: Ajusta a área de desenho para o tamanho da imagem.
É possível acompanhar, na Figura 39, a imagem original na área de desenho
transparente, sem nenhuma cor de fundo presente. Em seguida, após aplicar a Ferra-
menta Trim Canvas, a área de imagem foi recorta, diminuindo para a máxima área da
imagem utilizada. Logo após, o fundo recebeu uma cor selecionada por meio da fer-
ramenta Canvas Color.
Figura 39 - Fundo de imagem transparente, seguido do afeito da Trim Canvas Canvas
Color
5.6 Utilizando Camadas (Layers)
Camada ou Layers é um recurso eficiente para organizar os elementos
distribuídos na edição de uma imagem. Através desse Painel, é possível seqüenciar

65
os objetos em subníveis, semelhante à organização de pasta/subpasta, conforme ilus-
tra a Figura 40.
Também é possível mover os objetos para cima ou para baixo de outro, con-
forme for necessário, basta selecionar o objeto desejado e aplicar uma das seguintes
opções no menu Modify > Arranje:
• Bring to Front: Trazer para frente de todas das camadas;
• Bring to Forward: Avançar sobre uma camada;
• Send Backward: Recuar sobre uma camada;
• Send to back: Enviar para traz de todas as camadas.
Figura 40 - Painel Gerenciador de Camadas
O Painel Layer gerencia todas as camadas do documento, possui recursos
eficientes que permitem ocultar algumas camadas ou simplesmente bloquear tempo-
rariamente sua edição. Também é possível informar um nome para cada camada, de
forma a facilitar a organização dos objetos.
É um recurso eficiente na edição de documentos que possuem uma infinidade
de camadas, no entanto, muitas vezes se torna necessário agrupá-los em estrutura de
pasta. Dessa forma, se torna fácil selecionar visualmente o objeto desejado.
O Fireworks permite agrupar objetos em uma única camada. Para agrupar duas ou
mais camadas, selecione Modify > Group, ou faça o processo inverso Modify >
Ungoup.
Perceba, na Figura 41, que a visualização da camada não é alterada mesmo
depois de agrupadas, quando os objetos passaram a ser editados como apenas um
único objeto.

66
No Painel Layer é possível acompanhar o número de objetos agrupados que
seguem, após a intitulação Group.
Figura 41 - Painel Gerenciador de Camadas exibindo os objetos agrupados
5.7 Utilizando Mascara (Mask)
Mascara é um recurso versátil para criar efeitos utilizando mais de dois obje-
tos. Com esse recurso, é possível mesclar duas imagens e manter algumas proprie-
dades entre elas. Para aplicar esse efeito, selecione um grupo de objetos, em segui-
da, selecione Modify > Mask > Group as Mask.
Veja o exemplo da Figura 42.
Figura 42 - Antes e depois de ser aplicado mascara aos objetos
5.8 Trabalhando com formas e objetos
O Fireworks disponibiliza diversas opções para combinar objetos em apenas
um. É possível conectar os pontos da extremidade de dois objetos abertos para criar

67
um único trajeto fechado, ou é possível juntar objetos múltiplos para criar um único
objeto.
Podemos observar, na figura 43, à esquerda, dois objetos sobrepostos, um
quadrado e um circulo. Logo em seguida vemos o resultado, ao aplicar o efeito union
que descartou toda a área que unia os dois objetos. Ao contrário da union, o efeito
intersect é excelente para realizar o inverso e manter apenas as áreas comuns entre
os objetos. Finalmente, o efeito punch remove apenas uma parcela do objeto sele-
cionado, utilizando como orientação o objeto que está imediatamente sobreposto ao
primeiro.
Para utilizar esses efeitos, selecione os objetos cuja forma deseja modificar,
selecione Modify > Combine Paths e aplique o efeito desejado: Union, Intersect ou
Punch.
Figura 43 - Duas formas (quadrado e circulo) seguidas do efeito union, intersect e
punch
Na Figura 44, podemos verificar um exemplo melhor do efeito Punch. Perceba
que, ao selecionar os três círculos, o efeito descarta um dos objetos e unifica todas as
trajetórias, formando um novo objeto.
Figura 44 - Exemplo do efeito punch

68
Síntese da Aula
Nesta aula, conhecemos a ferramenta Fireworks e suas ferramentas de edição
e criação básicas.
Praticamos também a exportação de arquivos para a utilização em páginas.
Na próxima aula, construiremos um site, do início ao fim.
1) Encontre imagens de tipos diferentes, como fotos pessoais, desenhos de filmes,
logomarcas, etc., e exporte-os com as propriedades apresentadas nesta aula.]
2) Reproduza estas imagens no Fireworks:

69
Aula 5
Desenvolvendo Uma Solução Real
Objetivos da aula
• Aplicar os estudos das cinco aulas;
• Pôr em prática a teoria apresentada;
• Criar um projeto que integre todas as áreas.
Conteúdos da aula

• Criando elementos;
• Exportando / Importando imagens;
• Criando o HTML.
Após familiarizar-se com o ambiente do Fireworks e
seus principais recursos, será apresentado, passo-a-
passo, o desenvolvimento de um Layout para um Hotsite baseado
no Caso de Uso da empresa Salvador Móveis.
Boa aula!

70
1 CASO DE USO SALVADOR MÓVEIS
Hotsites, geralmente, são sites pequenos (com poucas páginas), criados
com propósito específico e provisório. É nesse momento que o Fireworks demonstra
suas vantagens, como o ganho de tempo e produtividade, pois a própria ferramenta
permite exportar todo o Layout diretamente para HTML.
1.1 Criando um Novo Documento
1. Escolha File > New na barra de menus;
2. Na caixa de diálogo, informe o Width 800 e Height 600;
3. Selecione a opção Custom e escolha a cor de fundo Preta para a nova imagem
(figura 45).
Figura 45 - Propriedades de um Novo Documento
1.2 Importando imagens
Neste exemplo foram importadas duas imagens para o ambiente de edição do
Fireworks. O logo da empresa Selbetti e a imagem de uma cadeira. Esse processo

71
pode ser feito seguindo os passos seguintes:
1. Escolha File > Import na barra de menus;
2. Selecione a imagem que deseja importar;
3. Clique e arraste o mouse na Área de Desenho do Fireworks para colar a imagem
(figura 46).
Figura 46 - Importando imagens
1.3 Inserindo texto
Teremos duas chamadas em texto: uma principal e outra que será a assinatura
da página.
Para esse procedimento, utilize a Ferramenta de Text , modificando suas
propriedades pelo Painel Inspetor de Propriedades.
Veja o resultado na Figura 47.

72
Figura 47 - Criando chamada em texto e assinatura
1.4 Cortando a imagem
O processo de desenho do Layout está completo, agora será usada uma fer-
ramenta especial para cortar a imagem.
Na Caixa de Ferramenta, selecione o recurso Crop , e defina a área da i-
magem que deve ser cortada. A Figura 48 ilustra os dois momentos, da seleção até a
imagem já cortada.
Figura 48 - Selecionando e cortando a imagem

73
1.5 Selecionando área para exportar
Utilizando a Ferramenta Slicing , delimite todas as áreas do documento que
deseja exportar. Veja, no exemplo da figura 49, os blocos em tom verde após definidas
as imagens que serão recortadas pelo Fireworks.
Figura 49 - Selecionando área com a Ferramenta Slicing
1.6 Exportar para HTML
Neste momento, é possível exportar o Layout diretamente para o formato HTML
(figura 50). É possível observar, em seguida, na Figura 51, as imagens que foram
criadas automaticamente pelo Fireworks.
1. Escolha File > Export na barra de menus;
2. Informe um nome para o arquivo;
3. Selecione logo abaixo a opção HTML and Images.
4. Clique no botão Export.

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

75
1.7 Editando a página HTML
Ao exportar, o Fireworks gera uma série de código HTML desnecessário. Para
tornar a página mais leve, clique com o botão direito sobre a página HTML e selecione
abrir com Bloco de Notas. Se desejar, utilize seu editor de texto preferido.
Inicialmente, iremos retirar todas as imagens na cor preta, pois não são ne-
cessárias em nossa página HTML, uma vez que a tela já possui fundo preto. Traba-
lhando com Wight e Height, das cédulas de nossa tabela, é possível obter o mesmo
resultado, porém a página irá carregar muito mais rápido.
Você aprenderá a trabalhar com o código HTML em uma aula específica. Veja
na figura 52 como terminou a edição do HTML 52 e o resultado final, visualizado no
navegador, conforme mostra a Figura 53.
Figura 52 - Editando código HTML

76
Figura 53 - Visualização do Hotsite no navegador
1.8 Considerações Finais
Além de reunir diversos recursos em um único aplicativo, o Fireworks interage
com o usuário através de uma interface intuitiva que diminui o grau de aprendizagem,
ao mesmo tempo em que é possível desenvolver soluções profissionais em poucas
horas trabalho.
O Fireworks suporta a integração de extensions, desenvolvidos para soluções
específicas. Extensions é um poderoso recurso que adiciona novas funcionalidades
não existentes nativamente
Para gerenciar extensions, ative o aplicativo Macromedia Extension Manager
(Figura 54), que acompanha a instalação padrão da ferramenta. Com essa interfa-
ce, é possível localizar novas extensions na Internet, muitas delas disponíveis gratui-
tamente para download.

77
Figura 54 - Gerenciador de Extension
Síntese da Aula
Nesta quinta e última aula verificamos como se cria uma estrutura visual no
Fireworks, passando por várias ferramentas e chegando até a sua exportação para
sites, com o cuidado de otimizar o tempo de download para o usuário.
Concluímos este módulo, você chegou lá!
Parabéns!

78
1) Agora que você já fez todas as aulas, sugiro que utilize tudo o que aprendeu para o
seu proveito, em um exercício possível de utilizar em outras aulas: fazer o seu site.
Hoje quem tem um currículo bem feito e com conteúdo de qualidade se destaca no
mercado. Imagine se você tiver uma página na internet?
A idéia é você criar nesse exercício, uma página com o seu currículo. Elabore a iden-
tidade visual, estruture o que quer apresentar, se quer colocar algo mais do que suas
aulas, fale do curso de EAD, fale das atividades que realiza, os livros que leu, etc.
Utilize tudo o que você aprendeu até agora. Se o resultado for bom, quer dizer que
você tem um bom currículo nas mãos e que realmente aprendeu.
Guarde esses arquivos, pois em outras disciplinas você pode utilizar para programar,
linkar e publicar.
Aproveite.

79
REFERÊNCIAS
KRUG, S. Não me faça pensar: Uma abordagem de Bom Senso à Usabilidade na
Web. 3. ed. Alta Books, 2006. 144p.
LEMAY, L. Aprenda a Criar páginas Web com HTML e XHTML em 21 dias. Makron
Books 2002. 1110p.
MEMÓRIA, F. Design para a Internet: projetando a experiência perfeita. Rio de
Janeiro: Elsevier, 2005. 171 p.
NIELSEN, J.; TAHIR, M. Homepage Usabilidade: 50 websites desconstruídos.
EUA: New Riders Pub, 2002. 315 p.
WILLIAMS, R. Design para quem não é designer. 2. ed. [S.l.]: CALLIS, 2005.191 p.

80
Sobre o Autor
Professor por acaso, mas com paixão. Pós-graduado em Comunicação Empresarial e
Relações Públicas e Graduado em Design Gráfico pas-
sando pela Escola Técnica, como aluno do curso de Pro-
cessamento de Dados. Essas várias áreas permitiram-
me ser um empreendedor. Trabalhei como designer, no
meu escritório, paralelamente, lecionei na SOCIESC as
disciplinas de computação gráfica, multimídia, desenho
de observação, análise de sistemas entre outras. Por um tempo, afastei-me do Bra-
sil, buscando horizontes mais distantes, trabalhando na Espanha, em Madrid, como
analista de mercado na Dell Computers e, logo após, como Web Designer em uma
agência de internet.
Atualmente trabalho como coordenador de comunicação na Selbetti Gestão de
Documentos e, além disso, sou o arquiteto de informação dos sistemas desenvolvidos
internamente.
Sou um estudioso dos meios digitais de comunicação e interação, além de
projetos pessoais atuo como freelancer. Meu site tem todos os meus contatos e in-
formação, basta acessar www.giuvicente.com.

81
Copyright © Tupy Virtual 2007
Nenhuma parte desta publicação pode ser reproduzida por qualquer meio sem a prévia autorização desta instituição.
Autor: Giuliano Vicente
Comunicação Visual Para WEB: Material didático / Giuliano Vicente
Design institucional: Thiago Vedoi de Lima; Cristiane de Oliveira - Joinville: Tupy Virtual, 2007
Ficha catalográfica elaborada pela Biblioteca Universitária Tupy Virtual
Créditos
SOCIESC – Sociedade Educacional de Santa Catarina
Tupy Virtual – Ensino a Distância
Rua Albano Schmidt, 3333 – Joinville – SC – 89206-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
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
Thiago Vedoi de Lima
Cristiane Oliveira
Design Gráfico
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

Apostila comunicação visual

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (20)

Similaire à Apostila comunicação visual

Similaire à Apostila comunicação visual (20)

Apostila comunicação visual