Comunicação Visual Para Web

Tamanho: px
Começar a partir da página:

Download "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 (http://h30091.www3.hp.com/pyme/dicas/glosario_2.html) Para conseguirmos boa usabilidade, temos que ter em mente quem vai utilizar o sistema, em qual mídia, com qual tecnologia e de que maneira. A usabilidade serve para todos os produtos que têm interface com o usuário. Chamo de interface o painel de botões de um liquidificador, por exemplo. A usabilidade está atrelada à ergonomia, outro assunto bem interessante. Vamos exemplificar a usabilidade com um celular. Para que tenham noção do que estamos falando, peguem o celular ou circulem os celulares entre vocês e naveguem pela agenda - chamadas recebidas. Verifique as mensagens enviadas. Todos os acessos são diferentes entre aparelhos e fabricantes. Pensar nesse acesso é pensar em usabilidade, pensar que normalmente utilizamos uma das mãos, ou menos, utilizamos um dedo apenas. Essa dificuldade ou facilidade é um exemplo de usabilidade.

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

FUNDAMENTOS SOBRE IMAGENS PARA A WEB

FUNDAMENTOS SOBRE IMAGENS PARA A WEB FUNDAMENTOS SOBRE IMAGENS PARA A WEB Bons web sites necessitam de uma correta integração entre textos e imagens. Este artigo contém o mínimo que você precisa saber sobre imagens para a web. Introdução

Leia mais

Pág 31. UC Introdução a Informática Docente: André Luiz Silva de Moraes 1º sem Redes de Computadores. 5 Introdução ao uso do BrOffice Impress

Pág 31. UC Introdução a Informática Docente: André Luiz Silva de Moraes 1º sem Redes de Computadores. 5 Introdução ao uso do BrOffice Impress 5 Introdução ao uso do BrOffice Impress O pacote BrOffice é um pacote de escritório muito similar ao já conhecido Microsoft Office e ao longo do tempo vem evoluindo e cada vez mais ampliando as possibilidades

Leia mais

ferramentas da imagem digital

ferramentas da imagem digital ferramentas da imagem digital illustrator X photoshop aplicativo ilustração vetorial aplicativo imagem digital 02. 16 imagem vetorial X imagem de rastreio imagem vetorial traduz a imagem recorrendo a instrumentos

Leia mais

Design para internet. Resolução. - No Design Gráfico quanto maior o DPI melhor. - Na web não é bem assim.

Design para internet. Resolução. - No Design Gráfico quanto maior o DPI melhor. - Na web não é bem assim. Resolução - No Design Gráfico quanto maior o DPI melhor. - Na web não é bem assim. Resolução Exemplo de imagem com diferentes resoluções de Pontos/Pixels por polegada". Em uma imagem digital quanto mais

Leia mais

ETI - Edição e tratamento de imagens digitais

ETI - Edição e tratamento de imagens digitais Curso Técnico em Multimídia ETI - Edição e tratamento de imagens digitais 2 Fundamentos "Conserva o modelo das sãs palavras que de mim tens ouvido, na fé e no amor que há em Cristo Jesus." 2 Timóteo 1:13

Leia mais

7 Introdução ao uso do LibreOffice Impress

7 Introdução ao uso do LibreOffice Impress Introdução a Informática - 1º semestre AULA 04 Prof. André Moraes Objetivos desta aula: Criar apresentações básicas com uso do LibreOffice Impress; o Manipular a estrutura de tópicos para a digitação de

Leia mais

Fotografia Digital. Aula 1

Fotografia Digital. Aula 1 Fotografia Digital Aula 1 FOTOGRAFIA DIGITAL Tema da aula: A Fotografia 2 A FOTOGRAFIA A palavra Fotografia vem do grego φως [fós] ("luz"), e γραφις [grafis] ("estilo", "pincel") ou γραφη grafê, e significa

Leia mais

[CURSO DE FÉRIAS FIREWORKS] JULHO / 2011

[CURSO DE FÉRIAS FIREWORKS] JULHO / 2011 Conteúdo 1. OBJETIVO DO FIREWORKS... 2 1.1 - Diferença entre imagem Vetorial e Bitmap... 2 1.2 - Formato de Arquivos... 3 2. AMBIENTE DO FIREWORKS... 3 2.1 - INICIANDO UM PROJETO... 4 3. DESENHANDO NO

Leia mais

Corel Draw 12. Enviado por: Jair Marcolino Felix. Rua Dr. Osvaldo Assunção nº 72 Tucano BA Próximo a Escola de Artes e Ofícios (antigo CESG)

Corel Draw 12. Enviado por: Jair Marcolino Felix. Rua Dr. Osvaldo Assunção nº 72 Tucano BA Próximo a Escola de Artes e Ofícios (antigo CESG) Corel Draw 12 Enviado por: Jair Marcolino Felix Corel Draw 12 O Corel Draw é um programa de design gráfico pertencente à Corel.O Corel Draw é um aplicativo de ilustração e layout de página que possibilita

Leia mais

19/11/2015. Um pouco de história antes... A FOTOGRAFIA. James Clerk Maxwell (1831 1879) Escócia (Reino Unido) físico, filósofo e matemático.

19/11/2015. Um pouco de história antes... A FOTOGRAFIA. James Clerk Maxwell (1831 1879) Escócia (Reino Unido) físico, filósofo e matemático. Prof. Reginaldo Brito Um pouco de história antes... A FOTOGRAFIA Joseph-Nicéphore Niepce * França, (1765-1833) James Clerk Maxwell (1831 1879) Escócia (Reino Unido) físico, filósofo e matemático. 1826,

Leia mais

Publisher. Publisher. versão 2012.2

Publisher. Publisher. versão 2012.2 versão 2012.2 Publisher Publisher Para diagramar, vamos utilizar o Publisher, do pacote de programas Microsoft Office. As instruções valem para as versões 2003, 2007 e 2010 do pacote. Vamos aprender através

Leia mais

WEB DESIGN ELEMENTOS GRÁFICOS

WEB DESIGN ELEMENTOS GRÁFICOS ELEMENTOS GRÁFICOS Parte 4 José Manuel Russo 2005 24 A Imagem Bitmap (Raster) As imagens digitais ou Bitmap (Raster image do inglês) são desenhadas por um conjunto de pontos quadrangulares Pixel alinhados

Leia mais

Publisher. Publisher. versão 2012.2

Publisher. Publisher. versão 2012.2 versão 2012.2 Publisher Publisher Para diagramar, vamos utilizar o Publisher, do pacote de programas Microsoft Office. As instruções valem para as versões 2003, 2007 e 2010 do pacote. Vamos aprender através

Leia mais

Critérios. Melhores Práticas e Regras

Critérios. Melhores Práticas e Regras AULA 10 - ETAPAS DE DESENVOLVIMENTO WEB Usabilidade Projetando para o usuário Os conceitos de usabilidade têm como base o desenvolvimento de projetos centrados nas necessidades reais dos usuários. Lembre-se,

Leia mais

Prática 2 Características do Flash

Prática 2 Características do Flash Prática 2 Características do Flash 1. Objetivos Se familiarizar com os Painéis, Frames e Timelines. Desenvolver uma animação simples. 2. Recursos Necessários Computador com o programa Macromedia Flash

Leia mais

BrOffice.org - Impress

BrOffice.org - Impress BrOffice.org Impress 1 BrOffice.org - Impress Programa de apresentação, utilizado para criação e manipulação de slides. Os slides criados para uma eletrônica podem conter texto, gráficos, objetos, formas,

Leia mais

1 Crie uma pasta (dentro do seu diretório) com o seu nome. 2. Se tiver dúvida pergunte o seu professor

1 Crie uma pasta (dentro do seu diretório) com o seu nome. 2. Se tiver dúvida pergunte o seu professor i.exe FrontPage Criação de Home Page s PPaaggi innaa 1 Sobre FrontPage Parte 1 Front Page é uma ferramenta para criação e gerenciamento de web s.o aluno não necessita de nenhum conhecimento de programação

Leia mais

Instrutor Alexandre - CorelDraw

Instrutor Alexandre - CorelDraw Quem não leu o meu primeiro tutorial, corra para ler, pois tem muitas dicas interessantes lá! Quem já leu, preparem-se para mais dicas!! Abra o COREL e coloque a folha na horizontal (paisagem). Feito assim

Leia mais

APLICATIVOS GRÁFICOS (AULA 3)

APLICATIVOS GRÁFICOS (AULA 3) Prof. Breno Leonardo G. de M. Araújo brenod123@gmail.com http://blog.brenoleonardo.com.br APLICATIVOS GRÁFICOS (AULA 3) Introdução A possibilidade de utilizarmos imagens, gráficos, desenhos e textos artísticos

Leia mais

MICROSOFT WORD 2007. George Gomes Cabral

MICROSOFT WORD 2007. George Gomes Cabral MICROSOFT WORD 2007 George Gomes Cabral AMBIENTE DE TRABALHO 1. Barra de título 2. Aba (agrupa as antigas barras de menus e barra de ferramentas) 3. Botão do Office 4. Botão salvar 5. Botão de acesso à

Leia mais

Desenho e Apresentação de Imagens por Computador

Desenho e Apresentação de Imagens por Computador Desenho e Apresentação de Imagens por Computador Conteúdo s: Aspetos genéricos sobre o trabalho com imagens computacionais. Imagens computacionais e programas que criam ou manipulam esse tipo de imagens.

Leia mais

CorelDRAW 11 1. UM PROGRAMA DE DESIGN

CorelDRAW 11 1. UM PROGRAMA DE DESIGN CorelDRAW 11 1. UM PROGRAMA DE DESIGN Com o Corel você vai trabalhar com um dos aplicativos mais usados no campo do design e da auto-edição, já que permite operar com dois tipos de gráficos (vetoriais

Leia mais

Considerações gerais sobre arquivos abertos e fechados

Considerações gerais sobre arquivos abertos e fechados Considerações gerais sobre arquivos abertos e fechados Este tutorial tem por finalidade esclarecer algumas dúvidas sobre arquivos abertos e arquivos fechados. Leia e entenda um pouco mais sobre PDF, diferenças

Leia mais

MÓDULO - I Manual Prático Microsoft Excel 2007

MÓDULO - I Manual Prático Microsoft Excel 2007 MÓDULO - I Manual Prático Microsoft Excel 2007 MÓDULO - I APRESENTAÇÃO... 1 AMBIENTE DE TRABALHO... 2 A folha de cálculo... 2 O ambiente de trabalho do Excel... 3 Faixas de Opções do Excel... 4 - Guia

Leia mais

Como Começar? Criação Páginas. Etapas. Apresentação INTERNET

Como Começar? Criação Páginas. Etapas. Apresentação INTERNET Como Começar? Criação Páginas Apresentação Etapas Como começar Para que um site tenha sucesso é necessário um correcto planeamento do mesmo. Todos os aspectos de desenho de um site devem ser pensados de

Leia mais

ÁREA DE TRABALHO. Área de Trabalho ou Desktop Na Área de trabalho encontramos os seguintes itens: Atalhos Barra de tarefas Botão iniciar

ÁREA DE TRABALHO. Área de Trabalho ou Desktop Na Área de trabalho encontramos os seguintes itens: Atalhos Barra de tarefas Botão iniciar WINDOWS XP Wagner de Oliveira ENTRANDO NO SISTEMA Quando um computador em que trabalham vários utilizadores é ligado, é necessário fazer login, mediante a escolha do nome de utilizador e a introdução da

Leia mais

Introdução à Tecnologia Web HTML HyperText Markup Language XHTML extensible HyperText Markup Language Formatos de Imagens

Introdução à Tecnologia Web HTML HyperText Markup Language XHTML extensible HyperText Markup Language Formatos de Imagens IntroduçãoàTecnologiaWeb HTML HyperTextMarkupLanguage XHTML extensiblehypertextmarkuplanguage FormatosdeImagens ProfªMSc.ElizabeteMunzlinger ProfªMSc.ElizabeteMunzlinger FormatosdeImagens Índice 1 FORMATOS

Leia mais

Apostila da Ferramenta AdminWEB

Apostila da Ferramenta AdminWEB Apostila da Ferramenta AdminWEB Apostila AdminWEB SUMÁRIO OBJETIVO DO CURSO... 3 CONTEÚDO DO CURSO... 4 COMO ACESSAR O SISTEMA... 5 CONHEÇA OS COMPONENTES DA PÁGINA... 6 COMO EFETUAR O LOGIN... 9 MANTER

Leia mais

PHOTOSHOP. Menus. Caixa de Ferramentas:

PHOTOSHOP. Menus. Caixa de Ferramentas: PHOTOSHOP Universidade de Caxias do Sul O Photoshop 5.0 é um programa grande e complexo, é o mais usado e preferido pelos especialistas em editoração e computação gráfica para linha PC. Outros programas

Leia mais

OURO MODERNO www.ouromoderno.com.br. Designer Gráfico APOSTILA DE EXEMPLO. (Esta é só uma reprodução parcial do conteúdo)

OURO MODERNO www.ouromoderno.com.br. Designer Gráfico APOSTILA DE EXEMPLO. (Esta é só uma reprodução parcial do conteúdo) Designer Gráfico APOSTILA DE EXEMPLO (Esta é só uma reprodução parcial do conteúdo) 1 Índice Aula 1... 3 Apresentação do Photoshop... 3 Barra de Menus... 3 Barra de Opções... 3 Barra de Ferramentas...4

Leia mais

Alguns métodos utilizados

Alguns métodos utilizados Alguns métodos utilizados TIF Algumas pessoas exportam o trabalho feito no Corel em formato TIF,que é um procedimento comum para impressão em jornais e publicações impressas. Para exportar desta forma

Leia mais

Aula: BrOffice Impress primeira parte

Aula: BrOffice Impress primeira parte Aula: BrOffice Impress primeira parte Objetivos Conhecer as características de um software de apresentação; Saber criar uma apresentação rápida com os recursos de imagem e texto; Saber salvar a apresentação;

Leia mais

Faculdade de Ciências Médicas FCM Unicamp Núcleo de Tecnologia de Informação NTI

Faculdade de Ciências Médicas FCM Unicamp Núcleo de Tecnologia de Informação NTI Manual do usuário Desenvolvendo páginas em Drupal Faculdade de Ciências Médicas FCM Unicamp Núcleo de Tecnologia de Informação NTI Conteúdo Primeiro Passo... 3 1.1 Login... 3 1.2 Recuperando a Senha...

Leia mais

Fig. 0.1 Ícone da Adobe Creative Cloud

Fig. 0.1 Ícone da Adobe Creative Cloud 0 Introdução à Adobe Creative Cloud Este capítulo introdutório tem como principal objetivo dar as conhecer aos leitores todas as potencialidades da Adobe Creative Cloud no que diz respeito às diferentes

Leia mais

Guia de Início Rápido

Guia de Início Rápido Guia de Início Rápido O Microsoft Word 2013 parece diferente das versões anteriores, por isso criamos este guia para ajudar você a minimizar a curva de aprendizado. Barra de Ferramentas de Acesso Rápido

Leia mais

Clique no menu Iniciar > Todos os Programas> Microsoft Office > Publisher 2010.

Clique no menu Iniciar > Todos os Programas> Microsoft Office > Publisher 2010. 1 Publisher 2010 O Publisher 2010 é uma versão atualizada para o desenvolvimento e manipulação de publicações. Juntamente com ele você irá criar desde cartões de convite, de mensagens, cartazes e calendários.

Leia mais

Seu manual do usuário ARCSOFT PHOTOBASE http://pt.yourpdfguides.com/dref/536271

Seu manual do usuário ARCSOFT PHOTOBASE http://pt.yourpdfguides.com/dref/536271 Você pode ler as recomendações contidas no guia do usuário, no guia de técnico ou no guia de instalação para ARCSOFT PHOTOBASE. Você vai encontrar as respostas a todas suas perguntas sobre a no manual

Leia mais

Figura 1: Formato matricial de uma imagem retangular. Figura 2: Ampliação dos pixels de uma imagem

Figura 1: Formato matricial de uma imagem retangular. Figura 2: Ampliação dos pixels de uma imagem Universidade Federal de Santa Maria - UFSM Departamento de Eletrônica e Computação - DELC Introdução à Informática Prof. Cesar Tadeu Pozzer Julho de 2006 Imagens Uma imagem é representada por uma matriz

Leia mais

Portal Contador Parceiro

Portal Contador Parceiro Portal Contador Parceiro Manual do Usuário Produzido por: Informática Educativa 1. Portal Contador Parceiro... 03 2. Acesso ao Portal... 04 3. Profissionais...11 4. Restrito...16 4.1 Perfil... 18 4.2 Artigos...

Leia mais

Ferramenta de Design Gráfico/ Imagem Digital Adobe Photoshop Fábio Fernandes

Ferramenta de Design Gráfico/ Imagem Digital Adobe Photoshop Fábio Fernandes Ferramenta de Design Gráfico/ Imagem Digital Adobe Photoshop Fábio Fernandes O Adobe Photoshop vem liderando o mercado de imagem digital há anos. Portanto, não podemos deixar de explorar essa ferramenta

Leia mais

LABORATÓRIO DE INTERNET FRONTPAGE

LABORATÓRIO DE INTERNET FRONTPAGE I LABORATÓRIO DE INTERNET FRONTPAGE Prof. Antonio Geraldo da Rocha Vidal II SUMÁRIO Introdução...3 Construindo um Web Site...4 Iniciando...4 Administrando o Site...5 Navegação...5 Trabalhando com Páginas...6

Leia mais

Uma nova maneira de interagir com a Gráfica Art3! A mais nova tecnologia em aprovação de arquivos via WEB.

Uma nova maneira de interagir com a Gráfica Art3! A mais nova tecnologia em aprovação de arquivos via WEB. Uma nova maneira de interagir com a Gráfica Art3! A mais nova tecnologia em aprovação de arquivos via WEB. O Portal Art3 é um sistema que permite uma grande flexibilidade na entrega e aprovação de seus

Leia mais

A cor e o computador. Teoria e Tecnologia da Cor. Unidade VII Pág. 1 /5

A cor e o computador. Teoria e Tecnologia da Cor. Unidade VII Pág. 1 /5 A cor e o computador Introdução A formação da imagem num Computador depende de dois factores: do Hardware, componentes físicas que processam a imagem e nos permitem vê-la, e do Software, aplicações que

Leia mais

Informática Básica para o PIBID

Informática Básica para o PIBID Universidade Federal Rural do Semi Árido Programa Institucional de Iniciação à Docência Informática Básica para o PIBID Prof. Dr. Sílvio Fernandes Roteiro O Tamanho e Resolução de imagens O Compactação

Leia mais

Construtor Iron Web. Manual do Usuário. Iron Web Todos os direitos reservados

Construtor Iron Web. Manual do Usuário. Iron Web Todos os direitos reservados Construtor Iron Web Manual do Usuário Iron Web Todos os direitos reservados A distribuição ou cópia deste documento, ou trabalho derivado deste é proibida, requerendo, para isso, autorização por escrito

Leia mais

UM POUCO DE COMPUTAÇÃO GRÁFICA.

UM POUCO DE COMPUTAÇÃO GRÁFICA. UM POUCO DE COMPUTAÇÃO GRÁFICA. Imagem digital é a representação de uma imagem bidimensional usando números binários codificados de modo a permitir seu armazenamento, transferência, impressão ou reprodução,

Leia mais

PUBLICIDADE & PROPAGANDA PRODUÇÃO GRÁFICA

PUBLICIDADE & PROPAGANDA PRODUÇÃO GRÁFICA PRODUÇÃO GRÁFICA PUBLICIDADE & PROPAGANDA Prova Semestral --> 50% da nota final. Sistema de avaliação Atividades em laboratório --> 25% da nota final Exercícios de práticos feitos nos Laboratórios de informática.

Leia mais

Dicas para usar melhor o Word 2007

Dicas para usar melhor o Word 2007 Dicas para usar melhor o Word 2007 Quem está acostumado (ou não) a trabalhar com o Word, não costuma ter todo o tempo do mundo disponível para descobrir as funcionalidades de versões recentemente lançadas.

Leia mais

Introdução. Como adquirir o FrontPage?

Introdução. Como adquirir o FrontPage? Introdução O software FrontPage é muito utilizado para a criação, gerenciamento e publicação de páginas (sites) na Internet. Sendo um produto da Microsoft Corporation, ele apresenta uma interface bastante

Leia mais

Unidade 1: O Painel de Controle do Excel *

Unidade 1: O Painel de Controle do Excel * Unidade 1: O Painel de Controle do Excel * material do 2010* 1.0 Introdução O Excel nos ajuda a compreender melhor os dados graças à sua organização em células (organizadas em linhas e colunas) e ao uso

Leia mais

ÍNDICE... 2 INTRODUÇÃO... 3. A série... 3

ÍNDICE... 2 INTRODUÇÃO... 3. A série... 3 WORD 2007 E 2010 ÍNDICE ÍNDICE... 2 INTRODUÇÃO... 3 A série... 3 01 CAPTURAS DE TELA WORD 2010... 3 02 IMAGENS 2007/2010... 5 03 NOTAS DE RODAPÉ... 13 04 NUMERAÇÃO DE PÁGINAS... 15 05 CONTAR PALAVRAS...

Leia mais

Guia de Início Rápido

Guia de Início Rápido Guia de Início Rápido O Microsoft PowerPoint 2013 parece diferente das versões anteriores, por isso criamos este guia para ajudar você a minimizar a curva de aprendizado. Encontre o que você precisa Clique

Leia mais

Apresentação do Projeto Gráfico

Apresentação do Projeto Gráfico Arte-final Arquivo feito no computador utilizando softwares específicos que permitem a produção de um fotolito para impressão gráfica. Programas Utilizados para a Produção de Arte-final. Dependendo das

Leia mais

Sistema operacional Windows 7, Windows Live Mail e Adobe Reader. Sistemas operacionais em concursos públicos

Sistema operacional Windows 7, Windows Live Mail e Adobe Reader. Sistemas operacionais em concursos públicos Sistema operacional Windows 7, Windows Live Mail e Adobe Reader Sistemas operacionais em concursos públicos Antes de tudo é importante relembrarmos que o sistema operacional é um tipo de software com a

Leia mais

ATENÇÃO: * Arquivos com tamanho superior a 500 KB NÃO SERÃO ACEITOS * SOMENTE serão aceitos documentos do formato: PDF

ATENÇÃO: * Arquivos com tamanho superior a 500 KB NÃO SERÃO ACEITOS * SOMENTE serão aceitos documentos do formato: PDF TUTORIAL DE DIGITALIZAÇÃO DIRIGIDO AO USO DO PROCESSO ELETRÔNICO Adaptado do tutorial elaborado pelo colega MAICON FALCÃO, operador de computador da subseção judiciária de Rio Grande. Introdução Este tutorial

Leia mais

ÍNDICE BLUELAB A UTILIZAÇÃO DO BLUELAB PELO PROFESSOR RECURSOS PARA PROFESSORES E ALUNOS...05 INICIANDO O BLUELAB PROFESSOR...06

ÍNDICE BLUELAB A UTILIZAÇÃO DO BLUELAB PELO PROFESSOR RECURSOS PARA PROFESSORES E ALUNOS...05 INICIANDO O BLUELAB PROFESSOR...06 ÍNDICE BLUELAB RECURSOS PARA PROFESSORES E ALUNOS...05 INICIANDO O BLUELAB PROFESSOR...06 ELEMENTOS DA TELA INICIAL DO BLUELAB PROFESSOR guia Meu Espaço de Trabalho...07 A INTERFACE DO BLUELAB...07 INICIANDO

Leia mais

RELATÓRIO DO GOMOMETER

RELATÓRIO DO GOMOMETER RELATÓRIO DO GOMOMETER Análise e conselhos personalizados para criar sites mais otimizados para celular Inclui: Como os clientes de celular veem seu site atual Verificação da velocidade de carregamento

Leia mais

METEP MICROSOFT OFFICE WORD. Professor Me. Silvio Silvestre Barczsz. Objetivos de Aprendizagem

METEP MICROSOFT OFFICE WORD. Professor Me. Silvio Silvestre Barczsz. Objetivos de Aprendizagem METEP MICROSOFT OFFICE WORD Professor Me. Silvio Silvestre Barczsz Objetivos de Aprendizagem Utilizar o Software Word como ferramenta para edição de textos. Plano de Estudo A seguir, apresentam-se os tópicos

Leia mais

a marca bematech Tudo o que você precisa para usar a marca. Dezembro de 2009

a marca bematech Tudo o que você precisa para usar a marca. Dezembro de 2009 16 a marca bematech Tudo o que você precisa para usar a marca. 17 Marca Dinâmica e evolutiva, a marca Bematech é formada pelo símbolo e logotipo. Suas elipses simbolizam a essência de uma empresa empreendedora.

Leia mais

COMO PREPARAR/ENVIAR SEU ARQUIVO PARA IMPRESSÃO EM COREL DRAW E PHOTOSHOP

COMO PREPARAR/ENVIAR SEU ARQUIVO PARA IMPRESSÃO EM COREL DRAW E PHOTOSHOP COMO PREPARAR/ENVIAR SEU ARQUIVO PARA IMPRESSÃO EM COREL DRAW E PHOTOSHOP ÍNDICE EXPORTANTO EM COREL DRAW 1 - definindo o tamanho pág. 3 2 - padrão (sistema de cores - cmyk) pág. 3 3 - resolução pág. 4

Leia mais

TUTORIAL SCRIBUS 1.4.2

TUTORIAL SCRIBUS 1.4.2 1 TUTORIAL SCRIBUS 1.4.2 Marinez Siveris asiveris@via-rs.net O que é o Scribus? O Scribus é um excelente programa livre para a produção de revistas, propagandas, jornais, enfim, qualquer documento que

Leia mais

SENAI São Lourenço do Oeste. Introdução à Informática. Adinan Southier Soares

SENAI São Lourenço do Oeste. Introdução à Informática. Adinan Southier Soares SENAI São Lourenço do Oeste Introdução à Informática Adinan Southier Soares Informações Gerais Objetivos: Introduzir os conceitos básicos da Informática e instruir os alunos com ferramentas computacionais

Leia mais

Manual Sistema MLBC. Manual do Sistema do Módulo Administrativo

Manual Sistema MLBC. Manual do Sistema do Módulo Administrativo Manual Sistema MLBC Manual do Sistema do Módulo Administrativo Este documento tem por objetivo descrever as principais funcionalidades do sistema administrador desenvolvido pela MLBC Comunicação Digital.

Leia mais

PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL

PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL Introdução Aula 03: Pacote Microsoft Office 2007 O Pacote Microsoft Office é um conjunto de aplicativos composto, principalmente, pelos

Leia mais

Menú Iniciar -> Programas -> Internet Explorer Entre no site da uarte: http://www.uarte.mct.pt/ajuda/manuais/

Menú Iniciar -> Programas -> Internet Explorer Entre no site da uarte: http://www.uarte.mct.pt/ajuda/manuais/ Crie uma pasta (0) no ambiente de trabalho com o seu nome. Inicie o Internet Explorer através do: W O R K S H O P Menú Iniciar -> Programas -> Internet Explorer Entre no site da uarte: http://www.uarte.mct.pt/ajuda/manuais/

Leia mais

Imagem digital. Unidade 3

Imagem digital. Unidade 3 Imagem digital Unidade 3 Objectivos Reconhecer o potencial comunicativo/ expressivo das imagens; Reconhecer as potencialidades narrativas de uma imagem; A criação de sentido nas associações de imagens

Leia mais

FOXIT READER 6.0 Guia Rápido. Sumário... II Use o Foxit Reader 6.0... 1. Leitura... 5. Trabalhar em PDFs... 8. Comentários... 10. Formulários...

FOXIT READER 6.0 Guia Rápido. Sumário... II Use o Foxit Reader 6.0... 1. Leitura... 5. Trabalhar em PDFs... 8. Comentários... 10. Formulários... Sumário Sumário... II Use o Foxit Reader 6.0... 1 Instalar e desinstalar... 1 Abrir, Criar, Fechar, Salvar e Sair... 1 Definir o estilo da interface e da aparência... 4 Veja todas as diferentes ferramentas...

Leia mais

XXIV SEMANA MATEMÁTICA

XXIV SEMANA MATEMÁTICA XXIV SEMANA ACADÊMICA DA MATEMÁTICA Minicurso: Produção de Páginas Web para Professores de Matemática Projeto de Extensão: Uma Articulação entre a Matemática e a Informática como Instrumento para a Cidadania

Leia mais

Manipulação Digital de Imagens Recursos Básicos de Tratamento

Manipulação Digital de Imagens Recursos Básicos de Tratamento Manipulação Digital de Imagens Recursos Básicos de Tratamento 1 Antes de mais nada, é extremamente necessário lembrar que para tratar uma imagem é necessário que o monitor de seu computador esteja calibrado

Leia mais

Universidade Federal de Pelotas Conjunto Agrotécnico Visconde da Graça CAVG Disciplina: Informática Apresentação Gráfica

Universidade Federal de Pelotas Conjunto Agrotécnico Visconde da Graça CAVG Disciplina: Informática Apresentação Gráfica Apresentação Gráfica Microsoft Office Power Point 1 Sumário 1. MICROSOFT POWER POINT... 4 1.1. INICIANDO O MICROSOFT POWER POINT... 4 2. CONHECENDO A INTERFACE DO POWER POINT... 5 2.1. O DOCUMENTO DO POWER

Leia mais

1 2 3 W O R K S H O P 4 5 6 W O R K S H O P 7 W O R K S H O P 8 9 10 Instruções gerais para a realização das Propostas de Actividades Para conhecer em pormenor o INTERFACE DO FRONTPAGE clique aqui 11 CONSTRUÇÃO

Leia mais

Brasil. Características da Look 312P. Instalação da Look 312P

Brasil. Características da Look 312P. Instalação da Look 312P Características da Look 312P 1 2 3 Lente Foco manual pelo ajuste da lente. Bolso Você pode colocar o cabo no bolso. Corpo dobrável Ajuste a Look 312P em diferentes posições. Instalação da Look 312P 1.

Leia mais

Bitmap X Vetorial OS DOIS PRINCIPAIS TIPOS DE ARQUIVOS NA COMPUTAÇÃO GRÁFICA

Bitmap X Vetorial OS DOIS PRINCIPAIS TIPOS DE ARQUIVOS NA COMPUTAÇÃO GRÁFICA OS DOIS PRINCIPAIS TIPOS DE ARQUIVOS NA COMPUTAÇÃO GRÁFICA Editores vetoriais são frequentemente contrastadas com editores de bitmap, e as suas capacidades se complementam. Eles são melhores para leiaute

Leia mais

INTRODUÇÃO INICIANDO O WORD INSERIR TEXTO

INTRODUÇÃO INICIANDO O WORD INSERIR TEXTO SUMÁRIO 01 - INTRODUÇÃO 02 - INICIANDO O WORD 03 - INSERIR TEXTO 04 - SALVAR UM DOCUMENTO 05 - FECHAR UM DOCUMENTO 06 - INICIAR UM NOVO DOCUMENTO 07 - ABRIR UM DOCUMENTO 08 - SELECIONAR TEXTO 09 - RECORTAR,

Leia mais

MANUAL DE GERAÇÃO E DISPOSIÇÃO DE IMAGENS

MANUAL DE GERAÇÃO E DISPOSIÇÃO DE IMAGENS MANUAL DE GERAÇÃO E DISPOSIÇÃO DE IMAGENS Página 1 Titulo do Manual Manual de Geração e Disposição de Imagens Elaboração Humberto Heitor de Lima Matheus Versão 1.0 Data Elaboração 03/03/2011 Paginas 48

Leia mais

Iniciando o Word 2010. Criar um novo documento. Salvando um Documento. Microsoft Office Word

Iniciando o Word 2010. Criar um novo documento. Salvando um Documento. Microsoft Office Word 1 Iniciando o Word 2010 O Word é um editor de texto que utilizado para criar, formatar e imprimir texto utilizado para criar, formatar e imprimir textos. Devido a grande quantidade de recursos disponíveis

Leia mais

Introdução Microsoft PowerPoint 2013 apresentações Office PowerPoint 2013 Microsoft PowerPoint 2013 textos planilhas Excel Word

Introdução Microsoft PowerPoint 2013 apresentações Office PowerPoint 2013 Microsoft PowerPoint 2013 textos planilhas Excel Word PowerPoint 2013 Sumário Introdução... 1 Iniciando o PowerPoint 2013... 2 Criando Nova Apresentação... 10 Inserindo Novo Slide... 13 Formatando Slides... 15 Inserindo Imagem e Clip-art... 16 Inserindo Formas...

Leia mais

Checklist para ações de email marketing

Checklist para ações de email marketing Checklist para ações de email marketing Publicado em: 15/01/2008 Planejamento Quais os objetivos da campanha (atrair mais visitantes ao site, aumentar as vendas de produtos, conquistar a fidelidade dos

Leia mais

Microsoft Office Excel

Microsoft Office Excel 1 Microsoft Office Excel Introdução ao Excel Um dos programas mais úteis em um escritório é, sem dúvida, o Microsoft Excel. Ele é uma planilha eletrônica que permite tabelar dados, organizar formulários,

Leia mais

Roxio Easy CD & DVD Burning

Roxio Easy CD & DVD Burning Roxio Easy CD & DVD Burning Guia de Introdução 2 Começando a usar o Easy CD & DVD Burning Neste guia Bem-vindo ao Roxio Easy CD & DVD Burning 3 Sobre este guia 3 Sobre o conjunto Easy CD & DVD Burning

Leia mais

Bem-vindo ao CorelDRAW, um programa abrangente de desenho e design gráfico baseado em vetor para o profissional gráfico.

Bem-vindo ao CorelDRAW, um programa abrangente de desenho e design gráfico baseado em vetor para o profissional gráfico. Criar um logotipo Bem-vindo ao CorelDRAW, um programa abrangente de desenho e design gráfico baseado em vetor para o profissional gráfico. Neste tutorial, você criará um logotipo para uma cafeteria imaginária.

Leia mais

Guia de Início Rápido

Guia de Início Rápido Guia de Início Rápido Microsoft PowerPoint 2013 apresenta uma aparência diferente das versões anteriores; desse modo, criamos este guia para ajudá-lo a minimizar a curva de aprendizado. Encontre o que

Leia mais

Universidade Federal de Santa Maria UFSM Centro de Tecnologia CT. Power Point. Básico

Universidade Federal de Santa Maria UFSM Centro de Tecnologia CT. Power Point. Básico Universidade Federal de Santa Maria UFSM Centro de Tecnologia CT Power Point Básico Santa Maria, julho de 2006 O Power Point é um aplicativo do Microsoft Office direcionado à criação de apresentações.

Leia mais

Introdução. Tipo de Cor

Introdução. Tipo de Cor Introdução Este material foi pensado pela Gráfica Cartões Mais Barato, com o propósito de facilitar a produção dos seus materiais. Para isso, preparamos o melhor compilado de textos a cerca do fechamento

Leia mais

Utilização do Sistema Multimédia. 2. Formatos de ficheiros 2.1. Compressão 2.2. Formatos mais comuns 2.3 Captura de imagens. 2. Formatos de ficheiros

Utilização do Sistema Multimédia. 2. Formatos de ficheiros 2.1. Compressão 2.2. Formatos mais comuns 2.3 Captura de imagens. 2. Formatos de ficheiros Utilização do Sistema Multimédia 2.1. Compressão 2.2. Formatos mais comuns 2.3 Captura de imagens 2.1. Compressão Formatos com e sem compressão Técnicas de compressão (reduzem tamanho) de 2 tipos: Compressão

Leia mais

Trabalhando com Imagens no Word XP

Trabalhando com Imagens no Word XP Table of Contents Trabalhando com imagens...1 A barra de desenho...2 Tela de desenho...2 Caixa de Texto...3 Linha...4 Seta...4 Retângulo (e quadrado)...5 Elipse (e círculo)...5 AutoFormas...6 Modificação

Leia mais

CAPÍTULO IV Sistema Operacional Microsoft Windows XP

CAPÍTULO IV Sistema Operacional Microsoft Windows XP CAPÍTULO IV Sistema Operacional Microsoft Windows XP Sistemas Operacionais Sistemas Operacionais são programas que como o próprio nome diz tem a função de colocar o computador em operação. O sistema Operacional

Leia mais

Digitalização. Copiadora e Impressora WorkCentre C2424

Digitalização. Copiadora e Impressora WorkCentre C2424 Digitalização Este capítulo inclui: Digitalização básica na página 4-2 Instalando o driver de digitalização na página 4-4 Ajustando as opções de digitalização na página 4-5 Recuperando imagens na página

Leia mais

Microsoft Power Point - Manual de Apoio

Microsoft Power Point - Manual de Apoio Microsoft Power Point - Manual de Apoio Pág. 1 de 26 Apresentação e introdução O ambiente de trabalho do Power Point. Abrir, guardar e iniciar apresentações. Obter ajuda enquanto trabalha. Principais barras

Leia mais

IPAHN Novo Portal 4 ª Revisão e Análise do CMS e Novo Portal Dezembro 2014

IPAHN Novo Portal 4 ª Revisão e Análise do CMS e Novo Portal Dezembro 2014 IPAHN Novo Portal 4 ª Revisão e Análise do CMS e Novo Portal Dezembro 2014 Relação de itens verificados e propostas de alteração que consideramos fundamental para a continuidade dos trabalhos de transição

Leia mais

APLICATIVOS GRÁFICOS (AULA 4)

APLICATIVOS GRÁFICOS (AULA 4) Prof. Breno Leonardo G. de M. Araújo brenod123@gmail.com http://blog.brenoleonardo.com.br APLICATIVOS GRÁFICOS (AULA 4) 1 Classificação da imagem Em relação à sua origem pode-se classificar uma imagem,

Leia mais

Sistemas Eletrônicos de Apresentação. / NT Editora. -- Brasília: 2013. 47p. : il. ; 21,0 X 29,7 cm.

Sistemas Eletrônicos de Apresentação. / NT Editora. -- Brasília: 2013. 47p. : il. ; 21,0 X 29,7 cm. Autor Ismael Souza Araujo Pós-graduado em Gerência de Projetos PMBOK UNICESP, Graduado em Tecnologia em Segurança da Informação - UNICESP. Professor de concurso da área de informática e consultor em EAD.

Leia mais

Manual do Usuário Janeiro de 2016

Manual do Usuário Janeiro de 2016 Manual do Usuário Janeiro de 2016 SOBRE CMX CMX é uma interface que dá acesso aos estudantes a milhares de atividades, exercícios e recursos todos posicionados com os padrões e conceitos curriculares.

Leia mais

PDF significa portable document format. É um formato de documento

PDF significa portable document format. É um formato de documento RECURSOS BÁSICOS DE INFORMÁTICA PARA OFICIAIS DE JUSTIÇA Toda grande jornada começa com o primeiro passo. Utilizar ferramentas digitais e o processo eletrônico com desenvoltura exige uma formação básica

Leia mais

Design de padrões têxteis

Design de padrões têxteis Design de padrões têxteis Anna Maria López López Anna Maria López López vive em Lugo, no noroeste da Espanha. Ela trabalha nos campos de artes gráficas, moda e Web design desde 1994. Seus designs e artes-finais

Leia mais

NAPNE / RENAPI. Google SketchUp 8

NAPNE / RENAPI. Google SketchUp 8 NAPNE / RENAPI Google SketchUp 8 Agosto de 2011 Sumário 1 Introdução... 4 2 Requisitos básicos... 4 3 Itens... 4 3.1 Assista os tutoriais em vídeo... 5 3.2 Leia dicas e truques... 6 3.3 Visite a Central

Leia mais

O OpenOffice.org Impress

O OpenOffice.org Impress 1 O OpenOffice.org Impress O OpenOffice.org Impress é uma ferramenta excelente para a criação de apresentações multimídia realmente eficientes. Suas apresentações vão brilhar com figuras, efeitos especiais,

Leia mais

Informática básica: Sistema operacional Microsoft Windows XP

Informática básica: Sistema operacional Microsoft Windows XP Informática básica: Sistema operacional Microsoft Windows XP...1 Informática básica: Sistema operacional Microsoft Windows XP...1 Iniciando o Windows XP...2 Desligar o computador...3 Área de trabalho...3

Leia mais

Coleção - Análises de email marketing em clientes de email

Coleção - Análises de email marketing em clientes de email Coleção - Análises de email marketing em clientes de email Thunderbird e Terra Nesta terceira edição da Coletânea de Análises de Email Marketing em Clientes de Email, apresentamos os estudos do webmail

Leia mais