Comunicação Visual Para Web

Transcrição

1 Comunicação Visual Para Web Edição nº Prof. Giu Vicente Apoio Gestão e Execução Conteúdo e Tecnologia

2 2 Apresentação Este livro didático contém a disciplina de Comunicação Visual Web, cujo conteú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 comunicação mais comuns que conhecemos. Neste livro você encontrará um tipo de comunicação considerado novíssimo, no mercado de trabalho, o visual linha do design gráfico que hoje assume o papel de designer de interação, mas vai além disso. Um designer de interação planeja como as informações serão agrupadas e apresentadas para o internauta. Discute quais as ações de uma página, quais os eventos, o que será apresentado, entre outras tantas coisas relacionadas ao internauta. É importante ressaltar que o livro foi desenvolvido com o objetivo de oferecer um aprendizado independente, inerente aos estudos do EAD, e o conteúdo foi revisado com o intuito de oferecer uma linguagem simples, objetiva e estimulante. Lembre-se de que a sua passagem por esta disciplina será também acompanhada 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 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.

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

4 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 professor (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 desenvolver. Professor Giu Vicente

5 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: briefing; arquitetura da informação; _/_ a _/_ wireframes; usabilidade; navegabilidade. 1 5 PROJETO GRÁFICO: Identidade Visual; Cores; Tipografia; _/_ a _/_ Gráficos FUNDAMENTOS SOBRE IMA- GENS: Raster vs Vetorial; Imagens na Web; GIF; JPG; PNG; Utilização das imagens; Profundidade _/_ a _/_ de cor; Formato de Ar- quivos FIREWORKS: Conhecendo o software; Criando e exportando documentos; Ferramentas de criação e edição. _/_ a _/_ DESENVOLVENDO UMA SOLUÇÃO REAL: Criando elementos; Exportando/Importando imagens; Criando o HTML.

6 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 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, assinale-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 8 1 BRIEFING Esta estranha palavra, Briefing, é mais utilizada pelos publicitários, que gostam de estrangeirismos. Nós, do meio de informática, também utilizamos muitos deles, inclusive briefing. Para simplificar a história, poderíamos chamar o briefing de: Questionário para definição de objetivos. São informações que você irá obter em uma entrevista com o cliente, e ninguém, além dele, pode responder às perguntas. Entre outras perguntas podemos partir para o básico:» Qual o segmento da empresa e quais serviços/produtos oferece?» Quem é o público-alvo?» Qual o objetivo do site? (Comunicar / vender / ensinar)» Qual a identidade da empresa? Como quer ser vista? (apropriar-se da identidade existente)» Índice do conteúdo. (Tópicos gerais e específicos para se poder construir a arquitetura) Algumas empresas partem para o marketing digital, o que deve ser previsto aqui, mas para nosso estudo isso é outra fase. 1.1 Arquitetura de Informação (AI) Temos grande parte das informações, mas: como vamos organizá-las? 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 9 Alguns dos resultados da Arquitetura da Informação (AI) são os wireframes e o mapa do site Como faço isso? O mapa Com as respostas do briefing em mão, vamos definir como deve ser o site. Vamos 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 fluxograma, 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 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. informação. Lembre-se: quanto maior o website, mais complexa será sua arquitetura de 1.2 Wireframes: o esqueleto do site Arame essa é a definição mais próxima do que significa wireframe. Com esse método desenha-se o conceito, estrutura-se o resultado do briefing. Você deve pensar e esquematizar em que posição estará o menu, a busca, o conteúdo, a logo. É a fase em que você testará a organização do conteúdo a ser apresentado na página, o todo. Ainda não estamos falando de estilo visual, nem de cores, nem de imagens, mas de disposição de conteúdo. Esse é o primeiro passo antes de iniciarmos o desenvolvimento do design gráfico da página. Para esse procedimento, podemos utilizar papel e lápis (figura 2). Como nessa fase não estamos falando de cores, mas de conteúdo, devemos utilizar tons de cinza (variação do preto até o branco) para destacar a importância das áreas (figura 3). Quanto mais escuro, mais importante. (Isso não é uma regra, mas pode ajudar). Na criação das propostas, logo após, criamos os melhores desenhos em qualquer ferramenta gráfica (figura 4). Se você achar melhor, pode ser o Paint Brush, o Corel Draw, o Fire Works. Na verdade, você deve utilizar uma ferramenta em que possa desenhar linhas, textos e posicioná-los da forma que quiser.

11 11 Figura 2 Wireframe Caneta e Papel Fonte: site Figura 3 Wireframe Digital Fonte: site

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

13 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 imagens de sites fantásticos, cuja estrutura convencional pode ser muito bem explorada com um projeto gráfico diferenciado. A Figura 6 mostra o site da Selbetti Gestão de Documentos, cuja navegação interna, do lado direito, e o menu, do lado esquerdo, fogem ao padrão tradicional, mas não comprometem a navegação e a organização. A logomarca, assinatura e o conteúdo do site mantêm o padrão.

14 14 Figura 6 - Site da empresa Selbetti Fonte Figura 7 - Site do Cantor Cubano Odín Fonte -

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

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

17 17 Figura 10 - Ipod Nano Fonte - 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 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 determinado produto, que pode ser desde um rádio-relógio até uma página da Internet. No conceito Web, define-se por um design que ajuda o internauta a encontrar informações, serviços e produtos de forma intuitiva. HP ( Para conseguirmos boa usabilidade, temos que ter em mente quem vai utilizar o sistema, em qual mídia, com qual tecnologia e de que maneira. A usabilidade serve para todos os produtos que têm interface com o usuário. Chamo de interface o painel de botões de um liquidificador, por exemplo. A usabilidade está atrelada à ergonomia, outro assunto bem interessante. Vamos exemplificar a usabilidade com um celular. Para que tenham noção do que estamos falando, peguem o celular ou circulem os celulares entre vocês e naveguem pela agenda - chamadas recebidas. Verifique as mensagens enviadas. Todos os acessos são diferentes entre aparelhos e fabricantes. Pensar nesse acesso é pensar em usabilidade, pensar que normalmente utilizamos uma das mãos, ou menos, utilizamos um dedo apenas. Essa dificuldade ou facilidade é um exemplo de usabilidade.

19 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 navegabilidade é principalmente voltada para a Internet, para a navegação entre as páginas. Para alguns gurus, citemos dentre eles Jackob Nielsen, se o usuário tiver que clicar mais do que duas vezes para chegar ao destino a navegabilidade é regular, e se só depois de três cliques o usuário chegar ao destino, a navegabilidade é ruim. Vamos ser menos rigorosos, mas continuar atentos. Como fórmula geral e básica para uma boa navegabilidade, o usuário deve responder rapidamente três perguntas:» Onde estou?» De onde vim?» Para onde vou? Vamos voltar ao celular para confirmarmos os exemplos reais. Façam as mesmas navegações anteriores e verifiquem se há outras formas de acessar a mesma informação e se você sabe onde está e para onde vai. Um bom exercício é que o colega da direita ou da esquerda pegue o celular e navegue por alguns menus internos e passe o celular para outro colega de classe. Façam estas três perguntas e vejam as respostas que conseguem e apresentem para os outros, ou ainda, elejam o celular com a melhor usabilidade e navegabilidade da classe (enviem para mim, vou adorar saber qual o veredicto de vocês). Vocês verão coisas muito interessantes. Observe os erros mais comuns cometidos pelos desenvolvedores de sites, segundo Jackob Nielsen:

20 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. é o site de Nielsen. Nielsen ainda sugere algumas práticas para quem não quer falhar: Melhores Práticas e Regras» Mantenha todos os links com um estilo padrão. Eles não precisam ser azuis (cor padrão do navegador) e sublinhados, como sugere Jakob Nielsen, mas devem ser diferenciados, possuir cores e estilo que os identifiquem e os torne de fácil visualização;» Os títulos dos links devem ser auto-explicativos. Coloque os links em palavras significativas, evitando termos genéricos como Clique aqui e Mais ;» Ofereça design leve e agradável, use poucas imagens: as pessoas procuram conteúdo;» Evite textos longos e redundantes. O conteúdo deve conter parágrafos curtos e sentenças simplificadas;» Não ofereça muitas áreas de navegação, principalmente se os links forem semelhantes;

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

22 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, entretenimento, 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 23 Aula 2 Projeto Gráfico (Design) Objetivos da aula Ao final desta aula, você deverá ser capaz de: Reconhecer e interpretar elementos de uma identidade visual; Identificar a aplicabilidade de diferentes tipografias; Distinguir elementos gráficos. Conteúdos da aula Acompanhe os conteúdos desta aula. Se você preferir, assinale-os à medida em que for estudando. Identidade Visual Cores Tipografia Gráficos Prezado(a) aluno(a)! Já temos o esqueleto o wireframe. Temos os órgãos o briefing. Agora precisamos da musculatura e da pele. Parece papo de cientista maluco, tipo Frankenstein ou Eduard smãos-de-tesoura, mas vamos realmente dar uma cara adequada ao projeto, vamos dar vida ao que já planejamos. Boa aula!

24 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 identidade visual representação constante nos sites, indicativo de que a empresa que está no site é a empresa que está na rua. Veja-se o exemplo da Tim, Fiat, Ipiranga ou Nike. Todas têm a sua marca e um identidade que se compõe de elementos diferentes, mas com uma gama de possibilidades muito parecidas. Alguns elementos que formam essa identidade vão ser abordados, ainda que superficialmente, a seguir: 1.1 Cor Cores são elementos de identificação, mas, algumas vezes, podem fazer com que seus usuários fujam do site. Inconscientemente nos sentimos bem com algumas cores e mal com outras, depende do usuário, porém, podemos criar algumas regras para que isso não fuja tanto dos padrões. Verifique nesses dois sites possibilidades de combinação de cores interessantes para se utilizar.»

25 25 Significados de cores (Convenções)» Preto: muito mórbido para ser usado como plano de fundo na Internet, mas é válido de acordo com a idéia que será transmitida. De certa maneira representa requinte, se combinado a outras cores como tons pastéis, mas ainda assim é muito pesado.» Branco: cor básica, suaviza o layout e combina muito bem com cores claras ou escuras. Ideal para plano de fundo.» Vermelho: transmite calor, vida, inovação. Chama a atenção para o tema.» Azul: passa certa seriedade, confiança, calma e é uma cor que consegue expressar tecnologia.» Pastel: cores delicadas, ideal para sites femininos, de culinária, ou sites sobre antiguidades.» Laranja: jovialidade, positividade, vida, muito bom para sites teen e lazer, assim como o amarelo e o rosa.» Verde: ideal para sites de saúde, medicina, natureza. Nos computadores, as cores são representadas por números hexadecimais e podem ser RGB, CMYK (figura 11) e tabelas específicas como a PANTONE. Figura 11 - Cores aditivas [a] e Subtrativas [b] As cores que utilizamos para a Internet são RGB cores aditivas. Com a soma das três cores (red, green, blue) chega-se ao branco, ao contrário do CMYK cores subtrativas (cyan, magenta, yellow) cuja soma nos dá o preto (K). Cores aditivas são aquelas cuja soma de TODAS as cores do espectro nos dá

26 26 a cor branca, ou seja, essas cores são emissoras de luz, pois são utilizadas em monitores, televisões, celulares e todos os tipos de monitores de imagem. As subtrativas são as reflexivas, pois somadas chegam à cor preta. São utilizadas em impressões como livros, revistas, cartazes, etc. Pense nos sistemas de cores aditivos como as cores que são luz e as subtrativas, 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 # 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 desenho particular, ou seja, todas as letras são representadas seguindo um mesmo estilo. Para a Internet, temos que tomar cuidado, pois fontes diferentes podem não estar instaladas no computador do usuário, o que implica na utilização de fontes consideradas padrão como a Arial, Verdana, Tahoma e Times New Roman. As fontes podem ser encontradas em sites, mas a maioria das fontes de qualidade é paga, você precisa comprá-las para poder utilizá-las.

27 27 Seguem alguns links para encontrar fontes interessantes:» Principais famílias de fontes:» Serifadas (ex.: Times new Roman, Geórgia, Courrier New): possuem arestas nas extremidades das letras. São adequadas para impressão, mas não para corpo de texto na web. No caso de títulos ou textos de tamanhos grandes, oferecem elegância.» Não serifadas (ex.: Arial, Tahoma, Verdana, Trebuchet MS): são as mais adequadas para a leitura on-line, a maioria possui alta legibilidade.» Cursivas (ex.: Monotype Cursiva, Staccato): são fontes que apresentam o estilo manuscrito;» Fantasy (ex.: Comic Sans): são fontes decorativas, com o intuito apenas de enfeitar. Cuidado ao usá-las. Normalmente são mais usadas para desenvolver logotipos. A figura 12 apresenta algumas tipografias que se enquadram nas nossas definições: Podemos observar que os números 1 e 2 são fontes serifadas, comparadas, apresentam uma diferença bem acentuada. Já os números 6 e 7 são fontes sem serifa, ou ainda, bastões. As fontes 3 e 4 são semiserifadas, têm elementos de serifa, mas não se comportam 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 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 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 29 seguem alguns deles: a) Proximidade - Se algo é da mesma família, assuntos, imagens etc., devemos aproximá-los. Caso contrário, se forem assuntos diferentes, devemos separá-los. b) Alinhamento - Para alguns estudiosos devemos criar uma malha (como uma matriz) para distribuir logicamente o conteúdo. É um exercício bem útil para você que está iniciando. Veja exemplos de malhas em sites conhecidos: c) Repetição - A repetição faz com que você referencie rapidamente algo da mesma família. Por exemplo, se temos um ícone para fotos uma máquina digital que se repete várias vezes, já clicamos em um ou dois deles e sabe-mos que nos leva a uma página só de fotos. Claro que, se eu observar mais vezes esse ícone, sempre associarei com a página extra de fotos, por isso, cuidado com a similaridade dos ícones para não causar o que chamamos de ruído na comunicação. d) Proporção - Se você colocar um título em tamanho 15px, o link ao lado próximo, com a mesma cor e tamanho 15px o usuário vai acreditar que os dois são links, ou os dois são títulos. Portanto, tamanhos de áreas, fontes, imagens, etc., são sim uma forma de i- dentificar famílias. Cuidado para não confundir o seu usuário Estudo de aplicação dos conceitos gráficos Vamos verificar o site a seguir (figuras 13 e 14) e a análise que podemos fazer:

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

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

32 32 Analisando as figuras 13 e 14, podemos observar, em duas páginas diferentes, uma de esportes e outra de notícias gerais, que a estrutura é igual, muda a identidade de cada uma. Vamos analisar os pontos enumerados nas imagens:» 0 A logomarca da página está na mesma área, ou seja, ao mudar de página, o usuário sabe exatamente onde está.» 1 A Busca está EXATAMENTE no mesmo formato e posição, fazendo com que o usuário se familiarize com o ambiente.» 2 O menu interno sofre pequenas alterações. Na página de notícias se torna complicado criar muitos níveis de diferenciação, já na página de esportes as funções são agrupadas no exemplo, um dos grupos é de campeonatos.» 3 A barra principal de navegação é horizontal e padrão. Tem a função de mostrar ao usuário onde ele está. Lembram-se quando comentamos sobre onde estou? Pois bem, as cores dos botões dessa navegação vão dar o tom das páginas internas. Como você pode perceber, o link da página de notícias é vermelho, e o fundo da página é vermelho. Na página de esportes é verde, como no link.» 4 O conteúdo encontra-se na mesma posição e com as mesmas dimensões. O conteúdo sofre alterações, mas o formato não.» 5 A área do plantão segue a mesma estrutura e posicionamento e se adapta à cor de cada área. Quando olhamos para esse tipo de estrutura, sabemos que se trata das últimas notícias. Síntese da Aula Nesta aula verificamos a existência de elementos da identidade visual e analisamos 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 33 Exercícios Propostos 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 34 Aula 3 Fundamentos Sobre Imagens Objetivos da aula Ao final desta aula, você deverá ser capaz de: 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 Acompanhe os conteúdos desta aula. Se você preferir, assinale-os à medida em que for estudando. 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 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. Então, continue lendo e eu vou ajudar a preparar você para manejar seus pixels corretamente. 2 RASTER X VETORIAL A possibilidade de utilizarmos imagens, gráficos, desenhos e textos artísticos nas nossas publicações revolucionaram a forma da escrita tradicional. Uma publicação, atualmente, cativa o leitor pelo seu charme natural, sua descontração para a leitura e a facilidade de assimilação do conteúdo. As imagens ajudam muito para esta nova atitude. A qualidade do gráfico depende da sua resolução.

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

37 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 dpi em uma fotocompositora de 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 necessárias. Para isso, é muito importante saber as diferenças e escolher o melhor formato para cada imagem. Quanto mais compactas, mais eficazes serão as figuras. Quanto tempo? Para estimar quanto tempo vai levar para alguém ver uma 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 GIF: GRAPHIC INFORMATION FORMAT (LEIA GUIFI ) Arquivos GIF são melhores para imagens com poucas camadas de cores (figura 17). Use-os para imagens de apresentação : gráficos, figuras ou imagens de texto. Quanto menos cores você usar, mais eficiente será o arquivo GIF. Um arquivo do tipo GIF pode conter no máximo 256 cores. Figura 17 - Imagem GIF Arquivos GIF podem ser entrelaçados assim eles parecem fade in (vão a- parecendo aos poucos), de uma menor para uma maior qualidade enquanto estão carregando. Isso proporciona aos visitantes algo para ser visto enquanto esperam. Arquivos GIF podem ser transparentes. Significa que você pode escolher uma ou mais cores para não serem mostradas, permitindo que as cores do fundo da sua página apareçam através delas. Isso evita que os gráficos dêem a impressão de estar em caixas, causando, visualmente, a impressão de que estão mais integrados com a página. Os arquivos GIF são lossless, significa que a qualidade da imagem não é degradada pelo processo de compressão. Podem ser animados, como filmes, só que bem mais simples. As GIF s animadas simulam movimento usando uma série de imagens individuais. Os arquivos GIF não são bons para fotografias perdem qualidade e os arquivos 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 imagens 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 39 compressão a cada imagem, individualmente. Figura 18 - Imagem JPG O sistema JPG é do tipo lossey, quanto maior a compressão, menor será a qualidade. O tamanho do arquivo pode diminuir bastante nesse sistema, mas você deve balancear o tamanho do arquivo com a qualidade da imagem. Os novos softwares gráficos (Macromedia Fireworks ou Adobe Photoshop) permitem pré-visualizar suas imagens JPG, assim você pode escolher o melhor balanço entre tamanho e qualidade. As novas versões desse tipo de imagem introduzem a possibilidade de salvar seu JPG como um arquivo entrelaçado, causando a impressão de que ele vai aparecendo de uma menor para uma maior qualidade, enquanto vai sendo carregado, mas browsers antigos não suportam este formato. Arquivos JPG não são bons para imagens com poucas cores, elas serão maiores 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ó é suportado pelos navegadores mais novos. Esses arquivos não aparecerão em navegadores antigos, por essa razão, ao usar o formato PNG, você pode fazer com que visitantes do seu site não consigam ver as suas imagens. Em alguns testes, os navegadores FireFox e o IE7 já aceitam esse formato. Arquivos PNG são compactos e versáteis e podem combinar as melhores

40 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 utilizaçã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, suas imagens terão boa aparência e carregarão rápido no computador do visitante. Escolhendo o formato errado, as imagens terão péssima aparência e levarão uma eternidade para carregar. Se você não for capaz de lembrar-se dessas regras simples, faça uma tatuagem com elas em algum lugar do seu corpo que seja bem visível. Para encerrar a discussão, vamos separar 2 tipos de imagem por categorias: fotografias e simples. Uma imagem simples geralmente é composta por texto, gráficos e diagramas, tudo com contornos definidos e grandes formas com cores contínuas. Uma imagem fotográfica pode ser qualquer coisa, desde uma fotografia de seu cachorro, a Bolinha, a uma pintura de Leonardo DaVinci. Basicamente qualquer coisa com uma grande quantidade de cores. Como regra geral, conteúdo simples deve ser salvo como GIF e fotográfico como JPG. Saiba mais sobre os formatos aqui

41 A compressão e o tamanho do arquivo Existem alguns problemas relacionados com as compactações de imagens, claro que a dica anterior é de grande valia, porém não se resume a isso, pois, para cada JPG, existem tipos de compressões utilizadas. Vejamos agora alguns estudos de caso relacionando TAMANHO (bytes) VS QUALIDADE (resolução) com o nosso amigo Sr. Stress Anty. Vamos analisar os fatos: Imagem Inicial (A) Tamanho : 51,7 Kb Imagem com compactação 20% (B) Tamanho : 15,0 Kb Imagem com compactação 70% (C) Tamanho : 7,0 Kb Observando atentamente a imagem B e comparando-a com a imagem A podese 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 42 Imagem com compactação 90% (D) Tamanho : 3,9 Kb JPG convertida em GIF256 (E) Tamanho : 44,1 Kb JPG convertida em GIF Uniforme (F) Tamanho : 18,2 Kb Na imagem D, nota-se perfeitamente a má resolução da imagem e, conseqü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 compressão JPG, mas, geralmente, quanto maior o número, maior a qualidade da imagem e seu tamanho. Você deve procurar na documentação de seu software para saber como ele faz esse tratamento. Para cada trabalho existe uma configuração adequada, seja para WEB ou para impressão. Se você precisa de uma imagem com excelente qualidade, não irá fugir de um arquivo de bom tamanho em Kbytes. DICA: Embora você deva usar GIF ou JPG como gráficos para a web, salve o seu arquivo original em um formato como TIF (Tagged Image File Format) ou o formato nativo de seu software gráfico. Por quê? Porque você preserva a resolução e a qualidade da imagem original, para novamente usá-la ou não na web!

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

44 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 (16 bits) cores. Novos computadores exibem de (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 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 Muitos aplicativos para PC e MAC produzem arquivos Posts-cript. Postscript é uma rica linguagem de descrição de gráficos, mas, como um arquivo EPS é, na realidade, apenas texto com instruções Postscript EPS para uma impressora Postscript indicando como imprimir a imagem. Nenhuma imagem Postscript será mostrada na tela, salvo se uma imagem de mapas de bits (TIFF ou WMF) estiver incluída com o arquivo EPS. CompuServe GIF BMP WMF TIF Arquivos GIF são usados para criar imagens comprimidas para facilitar o uploading e o downloading das electronic Bul-letin Board Systems (BBS) e da INTERNET. Arquivos BMP: Os BMP s podem ser criados no Windows Paintbrush e usados como wallpaper no background quando rodamos o Windows. Os arquivos Windows Meta File geralmente são gerados no formato Aldus Placeable Metafile (que contém um cabeçalho com informações org e ext). A Aldus e a Micrografx criaram uma versão estendida do Formato de Meta-arquivo do Win-dows chamada Placeable Metafile Format. Nesse formato estendido, 22 bytes de informações foram adicionados ao cabeçalho padrão do metaarquivo. O Formato Tagged Image File (.TIF) é usado por muito scanners. Nem todos os arquivos TIF são idênticos, obedecem a uma série de especificações (Revisão TIFF 5.0. Revisão TIFF 6.0, etc.). Tais tipos podem ser muito grandes e consumir mui-to espaço em disco, pois incluem informações de escala de cinza. No entanto, os formatos TIF, comprimidos, podem usar apenas 10% do não-comprimido.

46 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. Exercícios Propostos 1) Descreva a diferença entre imagens Raster e Vetorial, justificando. 2) Imagens PNG são utilizadas para fotografia? Justifique. 3) Lendo as características deste capítulo, você utilizaria arquivos GIF para fotografias? Por quê?

47 47 Aula 4 Fireworks Objetivos da aula Ao final desta aula, você deverá ser capaz de: Familiarizar-se com a ferramenta; Manipular documentos nativos da ferramenta; Exportar arquivos de imagens; Utilizar as ferramentas-padrão. Conteúdos da aula Acompanhe os conteúdos desta aula. Se você preferir, assinale-os à medida em que for estudando. Conhecendo o software; Criando e exportando documentos; Ferramentas de criação e edição. Prezado(a) Aluno(a)! Nesta etapa, serão apresentados os principais recursos utilizados para desenhar páginas Web, usando como ferramenta o software Fireworks. Embora possua uma infinidade de recursos e de funcionalidades, os tópicos abordados proporcionarão conhecimento necessário ao desenvolvimento de soluções gráficas para Web. Familiarizado(a) com o software, será proposto o desenvolvimento de Layout para um Hotsite, baseado no Caso de Uso da empresa Salvador Móveis. Boa aula!

48 48 1 VISÃO GERAL Fireworks é uma eficiente ferramenta de edição de imagens para web. Consagrada 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 fornece recursos que tornam mais fácil inserir gráficos dentro de páginas da Web, depois que elas foram criadas, além de disponibilizar ferramentas sob medida para 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 à Largura e à Altura em pixels, polegadas ou centímetros; 4. Ative a opção White para selecionar a cor Branca de fundo para a nova imagem;

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

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

52 52 Para selecionar outros formatos, com a finalidade de exportar, basta informar o formato desejado, através da opção Format. A Figura 23 demonstra as configurações para uma imagem no formato GIF. A principal característica desse formato é a possibilidade de definir uma ou mais cores para serem tratadas como transparentes na imagem. Perceba no exemplo da figura que o fundo, anteriormente branco, passou para transparente. Para Selecionar uma área transparente na imagem, basta selecionar a 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 não for preciso alta definição e qualidade, escolha o formato GIF. O JPG permite gerar imagens de alta qualidade com um alto nível de compressão, ou seja, o arquivo final terá sempre poucos kilobytes. Figura 23 - Exportando imagens com fundo transparente

53 Controle de ampliação É possível controlar a ampliação do documento original, usando-se um recurso rápido, localizado logo abaixo da imagem em edição, conforme o detalhe da Figura 24. Basta pressionar sobre o valor de ampliação e selecionar o nível desejado. Também é possível consultar nessa área a resolução atual utilizada no documento. Ao clicar sobre o valor atual, será exibida a dimensão aplicada em pixels ou centímetros por polegada. 3.2 Barra de Ação Principal Figura 24 - Controle de Ampliação Por padrão, o Fireworks não traz ativa a Barra de Ação Principal, que possibilita 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 54 4 Exportar para outros aplicativos O Fireworks permite exportar rapidamente seu trabalho para diversos formatos 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 55 Figura 27 - Caixa de Ferramentas Figura 28 - Grupo de Ferramentas 4.2 Selecionando e cortando objetos Antes de fazer qualquer edição em um objeto, é necessário fazer sua seleção. Para isto, existem duas ferramentas específicas que podem ser usadas para selecionar objetos, pontos de um vetor, um bloco de texto ou uma palavra simplesmente. Ferramenta Pointer seleciona e arrasta objetos;

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

57 57 Conforme a Figura 30, é possível perceber o uso das duas ferramentas de seleçã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 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 através de pontos de ancoragem; Ferramenta Rectangle - desenha retângulos, quadrados e arredondados; Ferramenta Text - cria blocos de texto.

58 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 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 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 como 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 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 possuem configurações que podem ser acessadas e modificadas manualmente, possibilitando efetuar a sintonia fina de um Filtro ou Efeito de Sombra, por exemplo. Essas configurações são centralizadas em um Painel específico chamado Inspetor de Propriedades.

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

63 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 editar 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 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 - Edição utilizando Free Transform, Rotate 180º e Flip Horizontal

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

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

66 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 objetos. Com esse recurso, é possível mesclar duas imagens e manter algumas propriedades entre elas. Para aplicar esse efeito, selecione um grupo de objetos, em seguida, selecione Modify > Mask > Group as Mask. Veja o exemplo da Figura 42. Figura 42 - Antes e depois de ser aplicado mascara aos objetos 5.8 Trabalhando com formas e objetos O Fireworks disponibiliza diversas opções para combinar objetos em apenas um. É possível conectar os pontos da extremidade de dois objetos abertos para criar

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

68 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. Exercícios 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 69 Aula 5 Desenvolvendo Uma Solução Real Objetivos da aula Ao final desta aula, você deverá ser capaz de: 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 Acompanhe os conteúdos desta aula. Se você preferir, assinale-os à medida em que for estudando. Criando elementos; Exportando / Importando imagens; Criando o HTML. Prezado(a) Aluno(a)! Após familiarizar-se com o ambiente do Fireworks e seus principais recursos, será apresentado, passo-apasso, o desenvolvimento de um Layout para um Hotsite baseado no Caso de Uso da empresa Salvador Móveis. Boa aula!

70 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 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 da página. Teremos duas chamadas em texto: uma principal e outra que será a assinatura Para esse procedimento, utilize a Ferramenta de Text propriedades pelo Painel Inspetor de Propriedades. Veja o resultado na Figura 47., modificando suas

72 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 ferramenta 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 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 74 Figura 50 - Exportando para HTML Figura 51 - Imagens criadas pelo Fireworks

75 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 necessárias em nossa página HTML, uma vez que a tela já possui fundo preto. Trabalhando com Wight e Height, das cédulas de nossa tabela, é possível obter o mesmo resultado, porém a página irá carregar muito mais rápido. Você aprenderá a trabalhar com o código HTML em uma aula específica. Veja na figura 52 como terminou a edição do HTML 52 e o resultado final, visualizado no navegador, conforme mostra a Figura 53. Figura 52 - Editando código HTML

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

77 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!