Apostila Comunicação Visual para Web

Comunicao Visual Para Web
Edio n1 - 2007
Prof. Giu Vicente

Apoio Gesto e Execuo Contedo e Tecnologia
Comunicao Visual Para WEB
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 comuniNeste livro voc encontrar um tipo de comunicao considerado novssimo, cao mais comuns que conhecemos. 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 revisado com o intuito de oferecer uma linguagem simples, objetiva e estimulante. Lembre-se de que a sua passagem por esta disciplina ser tambm acompanhada pelo Sistema de Ensino Tupy Virtual, seja por correio postal, fax, telefone, email ou Ambiente Virtual de Aprendizagem. Entre sempre em contato conosco quando surgir alguma dvida ou dificuldade. 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 professor (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 pgina, 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 desenvolver.
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 1 Horas/aula 10 Contedos PRIMEIROS PASSOS DE UM PROJETO DE WEBSITE: briefing; arquitetura da informao; wireframes; usabilidade; navegabilidade. PROJETO GRFICO: Identidade Visual; Cores; Tipografia; Grficos. FUNDAMENTOS SOBRE IMAGENS: Raster vs Vetorial; Imagens na Web; GIF; JPG; PNG; Utilizao das imagens; Profundidade de cor; Formato de Arquivos. FIREWORKS: Conhecendo o software; Criando e exportando documentos; Ferramentas de criao e edio. DESENVOLVENDO UMA SOLUO REAL: Criando elementos; Exportando/Importando imagens; Criando o HTML. Data/Avaliao _/_ a _/_
_/_ a _/_
10
_/_ a _/_
15
_/_ a _/_
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, assinale-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: Questionrio para definio de objetivos. So informaes que voc ir obter em uma entrevista com o cliente, e ningum, 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 arquitetura) Algumas empresas partem para o marketing digital, o que deve ser previsto
aqui, mas para nosso estudo isso outra fase. 1.1 Arquitetura de 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 fluxoPerceba que as ligaes principais so feitas sob a forma de agrupamentos e
grama, por exemplo, o que ajudar voc a entender melhor o todo do site. as linhas tracejadas so links existentes entre os ncleos no exemplo da figura 1, a
10
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 desenvolvimento do design grfico da pgina. Para esse procedimento, podemos utilizar papel e lpis (figura 2). Como nessa 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 ferramenta 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, proporcional 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 pelos 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 pgina 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 utilizada no mundo ocidental se aproxima do que mostramos na Figura 5.
13
Figura 5 - Padro de layout definido por Felipe Memria Preste ateno: isto uma conveno no uma regra, mas para sites cujo Para mostrar que nem tudo que fora das convenes ruim, seguem ima-
objetivo seja a simplicidade e a correta comunicao, serve como uma luva. 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 contedo do site mantm o padro.
14
Figura 6 - Site da empresa Selbetti Fonte www.selbetti.com.br
Figura 7 - Site do Cantor Cubano Odn Fonte - www.odinmudic.com
15
A Figura 7 demonstra que a navegao horizontal, no topo, permite liberdade ao contedo 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 superior completa, assinatura no rodap, os links principais do site, alm de informaes 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(Figura
cast uma publicao de uma entrevista, programa de rdio, leitura, etc. em formato de udio.)
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 facilita a navegao do usurio que no 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, 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.
18
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 determinado 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 informaes, 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 naveguem 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, utilizamos um dedo apenas. Essa dificuldade ou facilidade um exemplo de usabilidade.
19
Pensemos em quantos botes utilizamos para chegar a cada item desses, Agora voc tem idia do que usabilidade. Logo entraremos em mais detalhes
quantas informaes teis vemos em tela ao mesmo tempo? para a Internet. 3 NAVEGABILIDADE 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 mesComo vimos, a usabilidade o modo como utilizamos os sistemas e a nave-
gabilidade principalmente voltada para a Internet, para a navegao entre as pgi-
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 colega 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, segundo Jackob Nielsen:
20
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 visualizao; 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 contedo; 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 semelhantes;
21
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 informao que desejam; O usurio precisa saber: de onde veio, por onde andou e por onde pode navegar.
Sntese da Aula aulas. Vimos como so construdos os sistemas para serem utilizados pelo usurio. Analisamos sites que trabalham com diferentes disposies e vimos o padro Na prxima aula veremos os elementos dos projetos grficos. Nesta aula iniciamos os assuntos gerais e introdutrios para um projeto de
arquitetura da informao, para que voc possa entender melhor os conceitos das
de layout utilizado na grande maioria dos sites.
22
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.
23
Aula 2
Projeto Grfico (Design)

Reconhecer e interpretar elementos de uma identidade visual; Identificar a aplicabilidade de diferentes tipografias; Distinguir elementos grficos. Contedos da aula Acompanhe os contedos desta aula. Se voc preferir, assinale-os medida em que for estudando. 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 Eduardsmos-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 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 identidade 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 possibilidades 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 Inconscientemente nos sentimos bem com algumas cores e mal com outras,
que seus usurios fujam do site. 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 interessantes para se utilizar. http://wellstyled.com/tools/colorscheme2/ http://kuler.adobe.com/
25
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 expressar 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
26
a cor branca, ou seja, essas cores so emissoras de luz, pois so utilizadas em monitores, 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 subtrativas, 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 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 consideradas padro como a Arial, Verdana, Tahoma e Times New Roman. As fontes podem ser encontradas em sites, mas a maioria das fontes de qualidade paga, voc precisa compr-las para poder utiliz-las. Conhecidas como fontes, a tipografia uma famlia de caracteres com um de-
senho particular, ou seja, todas as letras so representadas seguindo um mesmo
27
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 arestas 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 adequadas 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 enfeitar. Cuidado ao us-las. Normalmente so mais usadas para desenvolver logotipos. A figura 12 apresenta algumas tipografias que se enquadram nas nossas dePodemos observar que os nmeros 1 e 2 so fontes serifadas, comparadas, finies: apresentam uma diferena bem acentuada. J os nmeros 6 e 7 so fontes sem serifa, ou ainda, bastes. As fontes 3 e 4 so semiserifadas, tm elementos de serifa, mas no se comComo forma script temos as de nmero 4 e 5. Veja que a 5 deriva da marca de portam totalmente assim. um seriado para TV, voc adivinha qual?
28
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
29
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 matriz) 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 associarei 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 er: Vamos verificar o site a seguir (figuras 13 e 14) e a anlise que podemos faz-
30
Figura 13 - Globo Esporte Site do portal globo.com
31
Figura 14 - Portal G1 Globo.com e seu portal de notcias
32
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 identidade 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 trata 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.
33
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).
34
Aula 3
Fundamentos Sobre Imagens

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 Acompanhe os contedos desta aula. Se voc preferir, assinale-os medida em que for estudando. 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!
35
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. Ento, continue lendo e eu vou ajudar a preparar voc para manejar seus pixels corretamente. 2 RASTER X VETORIAL A possibilidade de utilizarmos imagens, grficos, desenhos e textos artsticos
nas nossas publicaes revolucionaram a forma da escrita tradicional. Uma publicao, 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.
36
Resoluo. A resoluo ou nitidez grfica medida pelo nmero de pontos ou pixels - elementos de figura - que podem ser colocados em uma polegada quadrada (dots per inch, ou DPI). Apesar da variedade de formatos de arquivos grficos, todos caem em uma A arte de mapa de bits composta de milhares de pequenos pontos e os de-
dentre duas categorias: mapas de bits ou imagens e grficos de vetor ou line art. senhos de vetor compreendem linhas calculadas por frmulas matemticas. Os grficos de mapas de bits so geralmente produzidos por programas de pintura e scanners, 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 resoluo 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
37
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 As imagens devem aparecer na tela do visitante com rapidez e qualidade ne-
tipos especiais de arquivos. Os dois principais tipos usados so GIF e JPG. cessrias. Para isso, muito importante saber as diferenas e escolher o melhor formato para cada imagem. Quanto mais compactas, mais eficazes sero as figuras. Quanto tempo? Para estimar quanto tempo vai levar para algum ver uma imagem 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 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 estar 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 Podem ser animados, como filmes, s que bem mais simples. As GIFs animaOs arquivos GIF no so bons para fotografias perdem qualidade e os arquidegradada pelo processo de compresso. das simulam movimento usando uma srie de imagens individuais. 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
39
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 softwares 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 aparecendo 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 maiJPG tambm no tem transparncia. ores que o necessrio e parecero embaadas.
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 navegadores 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 navegadores FireFox e o IE7 j aceitam esse formato. Arquivos PNG so compactos e versteis e podem combinar as melhores
40
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 utilizao. 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. Escolhendo o formato errado, as imagens tero pssima aparncia e levaro uma eternidade 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, grficos e diagramas, tudo com contornos definidos e grandes formas com cores contnuas. 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/
41
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 Vamos analisar os fatos: QUALIDADE (resoluo) com o nosso amigo Sr. Stress Anty.
Imagem Inicial (A) Tamanho : 51,7 Kb
Imagem com compactao 20% (B) Tamanho : 15,0 Kb
Imagem com compactao 70% (C) 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.
42
Imagem com compactao 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 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 Resumindo, os diferentes programas usam diferentes nmeros para a comcompactao Uniforme, indubitavelmente horrvel. presso JPG, mas, geralmente, quanto maior o nmero, maior a qualidade da imagem 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!
43
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 iniciar do Windows, por exemplo. No mundo digital, os grficos podem ser divididos em dois grupos, os vetoriais Os grficos vetoriais so feitos por clculos matemticos, portanto, se fizermos Os mapas de bits, como seu nome diz, so quadradinhos de cores diversas,
e os bitmaps. A diferena principal entre eles a resoluo. alteraes em seu tamanho, ele ir adaptar-se e no ter problemas de definio. que montam uma imagem maior. Este sim, dependendo da resoluo, sofre com o dimensionamento. 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
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 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 caractersticas 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)
45
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 produzem arquivos Posts-cript. Postscript uma rica linguagem de descrio de grficos, mas, como um arquivo EPS , na realidade, apenas texto com instrues para uma impressora Postscript indicando como imprimir a imagem. Nenhuma imagem Postscript ser mostrada na tela, salvo se uma imagem de mapas de bits (TIFF ou WMF) estiver includa com o arquivo EPS. Arquivos GIF so usados para criar imagens comprimidas para facilitar o uploading e o downloading das electronic Bul-letin Board Systems (BBS) e da INTERNET. Arquivos BMP: Os BMPs podem ser criados 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 informaes org e ext). A Aldus e a Micrografx 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 metaarquivo. 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 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-comprimido.
Postscript EPS
CompuServe GIF
BMP
WMF
TIF
46
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 fotografias? Por qu? ___________________________________________________________________ ___________________________________________________________________ ___________________________________________________________________ ____________________________________________________________________
47
Aula 4
Fireworks
Familiarizar-se com a ferramenta; Manipular documentos nativos da ferramenta; Exportar arquivos de imagens; Utilizar as ferramentas-padro. Contedos da aula Acompanhe os contedos desta aula. Se voc preferir, assinale-os medida em que for estudando. Conhecendo o software; Criando e exportando documentos; Ferramentas de criao e edio. Prezado(a) Aluno(a)! Nesta etapa, sero apresentados os principais recursos utilizados para desenhar pginas Web, usando como ferramenta o software Fireworks. Embora possua uma infinidade 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 desenvolvimento de Layout para um Hotsite, baseado no Caso de Uso da empresa Salvador Mveis. Boa aula!
48
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 fornece recursos que tornam mais fcil inserir grficos dentro de pginas da Web, depois que elas foram criadas, alm de disponibilizar ferramentas sob medida para aperfeioar 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 Largura e Altura em pixels, polegadas ou centmetros; 4. Ative a opo 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 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 Ferramentas, 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
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 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.

51
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 momento de edio (Figura 22). Para ativar o assistente, selecione File > Export Wizard. 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. Optou-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 navegador s ir exibir a imagem quando estiver totalmente carregada.
Figura 22 - Assistente para exportar imagens.
52
Para selecionar outros formatos, com a finalidade de exportar, basta informar o
formato desejado, atravs da opo Format. A Figura 23 demonstra as configuraes para uma imagem no formato GIF. A principal caracterstica desse formato a possibilidade de definir uma ou mais cores para serem tratadas como transparentes na imagem. Perceba no exemplo da figura que o fundo, anteriormente branco, passou para transparente. Para Selecionar uma rea transparente na imagem, basta selecionar a ferramenta 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 poucos kilobytes.
Figura 23 - Exportando imagens com fundo transparente
53
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 Figura 24. Basta pressionar sobre o valor de ampliao e selecionar o nvel desejado. Tambm possvel consultar nessa rea a resoluo atual utilizada no documento. 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
54
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 edio (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.
28).
Para selecionar uma ferramenta ou subferramenta, basta clicar sobre o cone
desejado ou pression-lo quando estiver dentro de um Grupo de Ferramentas (Figura
55
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 selecionar objetos, pontos de um vetor, um bloco de texto ou uma palavra simplesmente. Ferramenta Pointer seleciona e arrasta objetos;
56
Ferramenta Subselection seleciona apenas alguns pontos do objeto; Ferramenta Crop seleciona a rea da imagem que ser cortada. Na Figura 29, possvel observar na prtica o uso de cada ferramenta citada
anteriormente. Enquanto a Ferramenta Pointer seleciona o objeto por inteiro, a Ferramenta 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.
57
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 observar 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.
58
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 Para obter efeito similar ao exemplo da Figura 31, basta explorar a seleo de
Ferramenta Line. fontes atravs 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 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.
60
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.
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 configuraes que podem ser acessadas e modificadas manualmente, possibilitando efetuar a sintonia fina de um Filtro ou Efeito de Sombra, por exemplo. Essas configuraes so centralizadas em um Painel especfico chamado Inspetor de Propriedades.
62
Observe na figura 37, a visualizao do Painel Inspetor de Propriedades quanest selecionada na Caixa de Ferramentas:
do a ferramenta Texto
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 formato 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 outras 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.
63
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 rotaes 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 orientao 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 contenham texto, pois, ao inverter uma frase na horizontal, por exemplo, ela se apresentar semelhante ao texto visto por meio de um espelho.
Figura 38 - Edio utilizando Free Transform, Rotate 180 e Flip Horizontal
64
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 propriedades, 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 Ferramenta 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 ferramenta Canvas Color.
Figura 39 - Fundo de imagem transparente, seguido do afeito da Trim Canvas Canvas Color 5.6 Utilizando Camadas (Layers) Camada ou Layers um recurso eficiente para organizar os elementos
distribudos na edio de uma imagem. Atravs desse Painel, possvel seqenciar

65
os objetos em subnveis, semelhante organizao de pasta/subpasta, conforme ilustra a Figura 40. Tambm possvel mover os objetos para cima ou para baixo de outro, conforme 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 temporariamente 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.
66
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 propriedades entre elas. Para aplicar esse efeito, selecione um grupo de objetos, em seguida, selecione Modify > Mask > Group as Mask. Veja o exemplo da Figura 42.
Figura 42 - Antes e depois de ser aplicado mascara aos objetos
5.8 Trabalhando com formas e objetos O Fireworks disponibiliza diversas opes para combinar objetos em apenas
um. possvel conectar os pontos da extremidade de dois objetos abertos para criar
67
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 selecionado, 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

68
Sntese da Aula Nesta aula, conhecemos a ferramenta Fireworks e suas ferramentas de edio Praticamos tambm a exportao de arquivos para a utilizao em pginas. Na prxima aula, construiremos um site, do incio ao fim.
e criao bsicas.
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:
69
Aula 5
Desenvolvendo Uma Soluo Real
Aplicar os estudos das cinco aulas; Pr em prtica a teoria apresentada; Criar um projeto que integre todas as reas. Contedos da aula Acompanhe os contedos desta aula. Se voc preferir, assinale-os medida em que for estudando. Criando elementos; Exportando / Importando imagens; Criando o HTML.
Prezado(a) Aluno(a)! Aps familiarizar-se com o ambiente do Fireworks e seus principais recursos, ser apresentado, passo-apasso, o desenvolvimento de um Layout para um Hotsite baseado no Caso de Uso da empresa Salvador Mveis. Boa aula!
70
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
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 Para esse procedimento, utilize a Ferramenta de Text Veja o resultado na Figura 47. , modificando suas
da pgina. propriedades pelo Painel Inspetor de Propriedades.
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 ferNa Caixa de Ferramenta, selecione o recurso Crop , e defina a rea da i-
ramenta especial para cortar a imagem. 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
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 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.
74
Figura 50 - Exportando para HTML
Figura 51 - Imagens criadas pelo Fireworks
75
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 necessrias em nossa pgina HTML, uma vez que a tela j possui fundo preto. Trabalhando 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
76
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 interface, possvel localizar novas extensions na Internet, muitas delas disponveis gratuitamente para download.
77
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!
78
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 identidade visual, estruture o que quer apresentar, se quer colocar algo mais do que suas aulas, fale do curso de EAD, fale das atividades que realiza, os livros que leu, etc. Utilize tudo o que voc aprendeu at agora. Se o resultado for bom, quer dizer que voc tem um bom currculo nas mos e que realmente aprendeu. Guarde esses arquivos, pois em outras disciplinas voc pode utilizar para programar, linkar e publicar. Aproveite.
79
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.
80
Sobre o Autor Professor por acaso, mas com paixo. Ps-graduado em Comunicao Empresarial e Relaes Pblicas e Graduado em Design Grfico passando pela Escola Tcnica, como aluno do curso de Processamento de Dados. Essas vrias reas permitiramme 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 Brasil, 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 informao, basta acessar www.giuvicente.com.
81
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 Tupy Virtual Ensino a Distncia 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 Administrao Vicente Otvio Martins de Resende Diretor de Ensino, Pesquisa e Extenso Roque Antonio Mattei Diretor do Instituto Superior Tupy Wesley Masterson Belo de Abreu Diretor da Escola Tcnica Tupy Luiz Fernando Bublitz 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 Didtico-Pedagcia Giuliano Vicente Design Grfico Thiago Vedoi de Lima
EDIO MATERIAL DIDTICO Professor Conteudista Giuliano Vicente Design Institucional Thiago Vedoi de Lima Cristiane Oliveira Ilustrao Capa Thiago Vedoi de Lima Projeto Grfico Equipe Tupy Virtual Reviso Ortogrfica Ndia Ftima de Oliveira
EQUIPE TUPY VIRTUAL Raimundo Nonato Gonalves Robert Wilson Jos Mafra Thiago Vedoi de Lima Cristiane Oliveira

Apostila Comunicação Visual para Web

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Apostila Comunicação Visual para Web

Caricato da

Copyright:

Formati disponibili

Comunicao Visual Para Web

Prof. Giu Vicente

Comunicao Visual Para WEB

SOCIESC - Sociedade Educacional de Santa Catarina

Comunicao Visual Para WEB

SOCIESC - Sociedade Educacional de Santa Catarina

Comunicao Visual Para WEB

Professor Giu Vicente

SOCIESC - Sociedade Educacional de Santa Catarina

Comunicao Visual Para WEB

SOCIESC - Sociedade Educacional de Santa Catarina

Comunicao Visual Para WEB

SOCIESC - Sociedade Educacional de Santa Catarina

Comunicao Visual Para WEB

Primeiros Passos de Um Projeto de Website

SOCIESC - Sociedade Educacional de Santa Catarina

Comunicao Visual Para WEB

Comunicao Visual Para WEB

SOCIESC - Sociedade Educacional de Santa Catarina

Comunicao Visual Para WEB

SOCIESC - Sociedade Educacional de Santa Catarina

Comunicao Visual Para WEB

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

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

SOCIESC - Sociedade Educacional de Santa Catarina

Comunicao Visual Para WEB

Figura 4 Site Final Fonte: www.radiouniao.fm.br

SOCIESC - Sociedade Educacional de Santa Catarina

Comunicao Visual Para WEB

SOCIESC - Sociedade Educacional de Santa Catarina

Comunicao Visual Para WEB

Figura 6 - Site da empresa Selbetti Fonte www.selbetti.com.br

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

SOCIESC - Sociedade Educacional de Santa Catarina

Comunicao Visual Para WEB

SOCIESC - Sociedade Educacional de Santa Catarina

Comunicao Visual Para WEB

SOCIESC - Sociedade Educacional de Santa Catarina

Comunicao Visual Para WEB

Figura 10 - Ipod Nano Fonte - http://www.apple.com/br/ipodnano/

SOCIESC - Sociedade Educacional de Santa Catarina

Comunicao Visual Para WEB

SOCIESC - Sociedade Educacional de Santa Catarina

Comunicao Visual Para WEB

gabilidade principalmente voltada para a Internet, para a navegao entre as pgi-

SOCIESC - Sociedade Educacional de Santa Catarina

Comunicao Visual Para WEB

Comunicao Visual Para WEB

de layout utilizado na grande maioria dos sites.

SOCIESC - Sociedade Educacional de Santa Catarina

Comunicao Visual Para WEB

SOCIESC - Sociedade Educacional de Santa Catarina

Comunicao Visual Para WEB

Projeto Grfico (Design)

SOCIESC - Sociedade Educacional de Santa Catarina

Comunicao Visual Para WEB

SOCIESC - Sociedade Educacional de Santa Catarina

Comunicao Visual Para WEB

SOCIESC - Sociedade Educacional de Santa Catarina

Comunicao Visual Para WEB

senho particular, ou seja, todas as letras so representadas seguindo um mesmo

SOCIESC - Sociedade Educacional de Santa Catarina

Comunicao Visual Para WEB

SOCIESC - Sociedade Educacional de Santa Catarina