Fontes: Aprenda a usá-las

Imagem Artigo Fontes 02

Por Alessandro Straccia

Na computação gráfica, a tipologia representa uma área vasta e importante. Desde a primeira prensa de tipos móveis de Guttemberg, lá pelos idos de 1400, o assunto vem evoluído até os dias atuais.

Escolher uma fonte para seu design é uma escolha séria e necessita de um estudo aprofundado em relação às sensações que você quer passar, tipo de material a ser utilizado, peculiaridades da mídia, etc.

Primeiramente, vamos apresentar os tipos de fonte e suas características:

Fontes Script

As fontes Script se aproximam da escrita humana, cursiva. Elas passam uma maior sensação de humanização. Algumas fontes Scripts são mais rebuscadas, sofisticadas, como aquelas que encontramos em diplomas ou certificados. Nesse caso, por serem elegantes, passam também uma sensação de sofisticação e bom gosto. Alguns exemplos:

Imagem Artigo Fontes 01
Fonte Script

Entretanto, por se tratarem de fontes mais rebuscadas, temos um certo problema de leitura. Elas demoram mais para serem lidas. Podem também ser utilizadas para reproduzir a escrita humana, como numa carta à mão livre, ou um rabisco no papel.

Fontes Serifadas

Chamamos de serifa os detalhes que encontramos nas extremidades das letras. São encontradas principalmente na imprensa, sendo que a mais famosa é conhecida como Times. Elas passam uma sensação de solidez, de verossimilhança. Dependendo da forma da fonte e da serifa, conseguimos também uma sensação de elegância e tradição.

Imagem Artigo Fontes 02
Fontes Serifadas

Fontes Não-Serifadas

São fontes mais cruas, mais simples, como a que estamos utilizando neste texto. Sua principal característica é a facilidade e rapidez de leitura: a falta de serifas ou rebuscamentos tornam-na bem simples e eficiente.

Imagem Artigo Fontes 03
Fontes não-serifadas

No entanto, algumas fontes não-serifadas mais finas e com um formato diferenciado conseguem transmitir uma sensação de bom gosto e elegância. Temos o exemplo abaixo:

Imagem Artigo Fontes 04
Fonte elegante

É o tipo de fonte ideal para utilizar quando necessitamos de uma leitura mais rápida ou à distância.

Fontes Fantasia

Sua característica em comum é justamente não ter muitas características em comum! São fontes que representam um tema, uma idéia, em sua própria forma. Podemos encontrar no tema “terror” por exemplo, fontes que suas bordas são “escorridas”, como sangue. Ou então em forma de balão de festa, e por aí vai. Por serem muito específicas, geralmente são de pouco uso nos materiais em geral. É importante que sejam utilizadas com cautela, pois dependendo do tipo de aplicação, fogem completamente ao tema. E outra: geralmente são de baixa leitura. Nem pense em escrever um texto inteiro com essas fontes!

Outros Tipos

Como o assunto é muito vasto, e podemos encontrar fontes de todo o tipo (você pode fazer a sua, se quiser!), teríamos que fazer um estudo muito mais aprofundado sobre o tema!

Fontes Symbol: não podemos considerar como um tipo específico de letra, pois não representam letras! Como o próprio nome diz, representam símbolos, notas musicais, desenhos, ícones, etc. Para o design em geral são importantíssimas, pois servem de referência para a construção de logotipos, criação de ícones e por aí vai.

Imagem Artigo Fontes 05
Fontes Symbol

Fontes Gothic: escrita gótica, são fontes muito rebuscadas e elegantes. Dão a sensação de tradição, de elegância. Sua leitura é muito baixa, cuidado!

Imagem Artigo Fontes 05
Fontes Gothic

Agora, vamos dividir em dois passos a escolha da tipologia.

1. Assunto/sensação

É a sensação que você quer passar, o tema que você está explorando. É necessário uma boa memória para lembrar das fontes (mas nada que o Mapa de Caracteres do Windows não resolva…!), e saber as características das fontes que serão utilizadas. Por exemplo, fontes serifadas (principalmente as da família Times) passam uma sensação de verossimilhança, enquanto fontes script passam uma sensação de humanização.

Procure fazer o seguinte: após analisar a sensação que você quer passar, abra a arte (ou design, ou tela, como preferir) no Photoshop ou no seu editor de imagens preferido. Escreva o texto necessário, e vá alterando as fontes, uma a uma, não deixando cada uma muito tempo na tela (talvez uns 3 segundos para cada esteja bom). Vá analisando as sensações que as mudanças causam em você. Anote os nomes das fontes que se encaixam melhor. Após escolher uns 5 tipos diferentes (ou até esgotar seu “estoque” de fontes), faça o mesmo, só que analisando mais detalhadamente cada fonte escolhida. No começo pode ser uma tarefa meio chata, mas com o tempo você irá se acostumar, e em 5 minutos já terá escolhido a fonte ideal; nada que um bom treino não ajude!

2. Tipo de mídia utilizada

Onde será “veiculada” a sua criação? Será um cartão de visitas, um panfleto, uma página de revista? Ou quem sabe um cartaz, um outdoor, ou até mesmo na internet? É muito importante escolher a fonte certa de acordo com o material a ser criado. Em materiais impressos não temos tantas ressalvas, pois se trata do meio mais difundido. Como o meio geralmente é opaco, não necessita de uma escolha muito específica de tipologia. Só devemos tomar cuidado com duas coisas:

  • Tamanho da fonte: cuidado, fontes muito pequenas ou finas geralmente “borram” em papéis mais porosos (como o de jornal, por exemplo), além de dificultar muito a leitura.
  • Textos muito extensos: além do tamanho da fonte, que deve dar uma leitura gostosa e não forçar a vista do leitor, tome cuidado com os espaçamentos entre as letras, palavras e parágrafos. É sempre bom colocar uma linha em branco entre cada parágrafo, para dar um descanso à vista do leitor. Artifícios visuais, como fotos, gráficos ou ícones também ajudam à deixar a leitura mais leve e mais prazerosa.

Para materiais como panfletos, folders, etc, a regra é a mesma, mas procure utilizar o tamanho das fontes para dar destaque às partes mais importantes do texto.

Cartazes, outdoors e materiais, cuja leitura será feita principalmente à distância: atenção ao tamanho e tipo de letra. Um cartaz escrito com uma fonte gothic dificilmente será lido à distância! Estudos dizem que um outdoor, para ser bem percebido, precisa chamar a atenção em 1 segundo, e ser lido em no máximo 6 segundos. Não adianta encher um outdoor de texto, pois ninguém conseguirá lê-lo no trânsito em apenas 6 segundos!

Por fim, temos os meios eletrônicos, como internet e TV. Nesses dois temos peculiaridades que vamos caracterizar abaixo:

  • TV: meio de baixa resolução, geralmente os textos “pulam” na tela. Não é bom utilizar textos muito grandes ou com fonte muito pequena.
  • Internet: por ser um meio mais informativo e de alta resolução que a TV (além do fato de estarmos sempre perto do monitor), podemos utilizar fontes menores.

Em ambos os meios, devemos atentar ao seguinte fato: o monitor de computador e a tela da TV são meios que emitem luz. Isso já força a vista naturalmente, bem mais que um meio opaco como uma página de revista, por exemplo. Por isso temos que tomar cuidado com textos muito grandes e sem “descanso”. Fontes não-serifadas também são muito utilizadas, por forçarem menos a vista. A fonte Verdana foi desenvolvida especialmente para o uso na internet, lembre-se disso ao formatar seu website!

E sempre vale a dica: use a tipologia com cautela. Aqui também vale a máxima: menos é mais. Não encha um texto com 274 tipos de fontes diferentes, provavelmente vai deixar o leitor zonzo com tanta informação visual diferente! Procure observar os anúncios, revistas, jornais (mas por favor, meios consagrados como Veja, IstoÉ, Folha, Estadão, etc… Está havendo um Boom de novas publicações, e muitas delas sem nenhuma noção visual!). Procure algo que se tenha a ver com o seu objetivo, e observe como foi feito, tente analisar o porquê da utilização de cada fonte. Não copie, utilize como referência apenas!

Esta também é importante: cuidado com os erros de português!! Gramática e concordância são importantíssimos para dar credibilidade ao seu texto. De que adianta um cartaz bem feito, com a tipologia bem aplicada, e um erro de português bem no slogan? É jogar seu trabalho por água abaixo!

Um bom local para achar diferentes tipos de fontes são os CD’s extra que vem com o Corel Draw ou outros programas de desenho. Uma procura básica no Google também pode te ajudar a achar fontes legais.

Animações Gráficas com Linguagens de Programação

É bem provável que o primeiro contato com a informática e computação gráfica, hoje, venham dos jogos de videogame. Do primitivo PC XT até chegar as modernas estações SILICON hoje, houve um grande trabalho em todas as etapas da evolução da informática para se obter o máximo com o mínimo de evolução que se obtinha em termos gráficos. Desde os tempos dos jogos de ATARI ninguém ficou esperando muito para que algo melhor surgisse e botaram a mão na massa.

Existe quem tenha tentado fazer animações usando caracteres ASCII, usando um padrão de formatação de textos chamado ANSI. Para quem é do tempo das BBS, deve se lembrar disso. Um exemplo desse tipo de animação pode ser visto em http://www.asciimation.co.nz/.

Entretanto, um outro tipo de segmento na indústria de software, diferentemente dos “artistas” que faziam esse tipo de animação, estava interessado em usar animações em seus programas: o segmento de jogos em computador.

O desafio de se fazer animações no computador, com qualidade, sempre foi um dos mais importantes objetivos para o que hoje se chama de indústria de entretenimento eletrônico. Maior ainda para os programadores de plantão, que geralmente “estufam o peito” e fazem muitas coisas “no braço”. Hoje, jogos como Final Fantasy X (http://na.square-enix.com/games/FFX/) não são nada sem a avançada técnica da animação que o jogo possui.

Bem, sem toda a pretensão de se fazer um Final Fantasy X no seu computador apenas lendo este artigo, mostraremos como fazer uma animação extremamente simples usando a linguagem C e uma biblioteca gráfica disponível na internet.

Linguagem C e Allegro

Para executar a nossa “proeza” de fazer uma animação gráfica, usaremos a linguagem C e sua estrutura. Recomendamos o compilador GCC, disponível em versões para quem usa Linux (http://www.gnu.org/software/gcc/gcc.html), DOS através do DJGPP (http://www.delorie.com), ou Windows através do MingW (http://www.mingw.org) ou Cygwin (http://sourceware.cygnus.com/cygwin/).

O responsável pela “mágica” da animação e quem vai facilitar a nossa vida na programação é a biblioteca gráfica Allegro (http://alleg.sourceforge.net/).

A Allegro é uma biblioteca multimídia desenvolvida para a programação de jogos. Para quem estiver usando DJGPP, basta descompactar o Allegro dentro do diretório do DJGPP com os diretórios padrão e entrar no diretório “…allegro”. Digite “make”. A biblioteca irá se compilar automaticamente. Então digite “make install” para instalar a biblioteca.

A respeito do texto, apesar de utilizarmos a linguagem C como referencial, ele se destina a programadores de outras linguagens com outras bibliotecas gráficas, bastando para adaptar as técnicas apresentadas, observar o código fonte disponível aqui no site e os respectivos comentários a cada função.

Um ponto que nos motivou a utilizar a biblioteca Allegro é que ela é multiplataforma e possui versões para Windows, Macintosh, Linux e outros ambientes, podendo ser utilizada por inúmeros compiladores. Por isso, entendemos que a abrangência desse texto seria maior do que se utilizássemos Delphi ou outra linguagem/ferramenta.

Para aprender a instalar a biblioteca gráfica Allegro em diferentes plataformas, sugerimos que você leia os arquivos “*.txt”, no diretório “…allegrodocsbuild” e veja o arquivo mais apropriado a sua necessidade (DJGPP.txt, MSVC.txt, UNIX.txt, etc…).

O que é uma animação?

Animação é fazer com que coisas dêem a impressão de movimento. No computador, assemelha-se a produção de um desenho animado, onde várias figuras, levemente diferentes, serão sobrepostas a uma velocidade que você não perceba que isto está acontecendo, dando assim a impressão de movimento. Uma animação será tão mais perfeita quanto mais quadros houverem entre os estados inicial e final da animação.

Para a criação de uma animação usando uma linguagem de programação, temos duas formas a seguir, para criarmos nossos “quadros”:

  1. Criar os quadros todos na memória, utilizando-se de rotinas da biblioteca gráfica, como linhas e círculos (para saber mais sobre funções gráficas básicas de alegro, veja o nosso tutorial de allegro na seção Textos e Artigos);
  2. Utilizar imagens criadas/capturadas em outros programas, como Corel Photopaint e Adobe PhotoShop.

Cada uma dessas técnicas tem vantagens e desvantagens. No primeiro caso, conseguiremos uma boa “economia” de memória, porém, criar imagens complexas pode ser uma tarefa realmente complicada. No segundo caso, o quadros criados externamente são inseridos facilmente com as rotinas da biblioteca, entretanto, a alteração dessas imagens se torna realmente difícil por meio do código do programa, de modo que essas alterações pareçam tranparentes.

Utilizando-se estas duas técnicas, uma complementando a outra, podemos elaborar cenários complexos e flexíveis conhecendo apenas algumas poucas funções básicas da biblioteca gráfica, como veremos adiante.

EXEMPLO 1: O programa a seguir demonstra, através de comandos gráficos simples, uma animação de um círculo na tela.

[c]
#include <conio.h> /* Necessário para a função getch() */
#include <allegro.h> /* Cabeçalho da biblioteca */
int main()
{
/* Variável inteira. Importante para o laço for */
int x;
/* Inicializa a biblioteca gráfica */
allegro_init();
/* Autodetecta a placa de vídeo e usa resolução de 640×480 */
set_gfx_mode(GFX_AUTODETECT,640,480,640,480);
/* instala timer. Não é importante agora, serve aqui a função rest() abaixo funcionar */
install_timer();
/* desenha o primeiro círculo , na posição 0,100, com raio 100*/
circlefill (screen, 0, 100, 100, 15);
/* loop para animação através da tela */
for (x = 1; x < 320; x++) {
/* faz pequena pausa para se enxergar a animação*/
rest (10);
/* apaga circulo anterior */
circlefill (screen, x – 1, 100, 100, 0);
/* desenha novo circulo em nova posição */
circlefill (screen, x, 100, 100, 15);
}
/* Aguarda uma tecla ser presionada */
getch();
/* Termina a biblioteca Allegro*/
allegro_exit();
/* termina main() de forma padrão */
return 0;
}
/* Macro do Allegro para que o programa seja compilado corretamente em plataformas diferentes do DOS */
END_OF_MAIN();
[/c]

Flickering

Ao executar o programa, percebemos que existe uma tremulação no círculo. Se não ocorreu nada, experimente aumentar os valores do raio em “circlefill” (é o penúltimo parâmetro) para 150 ou mesmo 200. Se ainda assim nada aconteceu, parabéns! Você tem um supercomputador! Mas nós, meros mortais, teremos esse “problema”. O que aconteceu é o chamado efeito de flickering (tremulação, em inglês).

O efeito flickering acontece porque o desenho do círculo deve ser feito ao mesmo tempo que o monitor atualiza a tela do monitor. Quando desenhamos na memória de vídeo diretamente, como fizemos no exemplo, há uma falta de sincronia entre o que está sendo desenhado e o que se está desenhando na memória de vídeo naquele momento. É exatamente o mesmo efeito que acontece quando tentamos filmar uma televisão em uma câmera de vídeo. Ao ver o filme, percebemos uma tremulação na imagem da televisão filmada. É a falta de sincronia entre as imagens exibidas e as que estão sendo desenhadas no filme.

Double Buffering

Para solucionar o problema, existem várias técnicas de programação. A mais simples e comum consiste na técnica do double buffering. Nessa técnica criamos um buffer onde desenhamos toda a tela antes de enviarmos a tela ao vídeo. Desta forma a tela é atualizada inteiramente e de uma só vez, eliminando o problema do flickering.

O ponto forte dessa técnica é o fato de ser facilmente implementada e funcionar muito bem na grande maioria dos casos, servindo também como ponto de partida para técnicas mais avançadas, como o triple buffering, dirty rectangles, entre outros.

EXEMPLO 2 – ([Download não encontrado.]) O exemplo 2 você poderá baixar na área de download deste site. Consiste no mesmo programa do exemplo 1, com a adição da técnica de double buffering. Adicionamos também, uma animação de uma seqüência de figuras criadas externamente exemplificando assim todas as técnicas e recursos citados acima. Leia atentamente os comentários no código do programa, pois o código mostra o que faz cada função.

É claro que este artigo não esgota de maneira alguma o que se pode falar sobre animação gráfica. Mas conseguimos explicar um pouco a respeito de um dos maiores problemas ao tentar se fazer uma animação gráfica com linguagens de programação. O programa apresentado aqui pode parecer trivial, mas é o fundamento para outras coisas mais interessantes, como programação de jogos. É claro que você pode estar vendo apenas uma bola andando na tela. Eu, ao contrário, vejo a “estrela da morte” se preparando para entrar em ação. Use você também a sua imaginação. O próximo grande jogo/animação da temporada pode ser o seu…

Até a próxima.

Introdução a História da Computação Gráfica

Por Alessandro Straccia

Podemos dizer que o marco inicial da computação gráfica aconteceu em 1968, na Universidade de Utah, através do professor David Evans e o Dr. Ivan Sutherland. Numa época onde os (poucos) computadores eram dedicados principalmente ao cálculo militar e financeiro, eles enxergavam além: para os dois, os computadores deveriam interagir com o usuário, executando tarefas das mais variadas.

Em 1968, a única interação com o usuário eram os cartões perfurados, o que dificultava a variedade de utilidades da máquina. Foi daí que nasceu a idéia de utilizar gráficos e desenhos para facilitar o trabalho.Assim nasceu a Evans&Sutherland, uma empresa pioneira no ramo da computação gráfica. Sua principal atividade era a criação de aplicações gráficas para simulação. Nela nasceram os primeiros conceitos de desenho vetorial, representação tridimensional em ambiente bidimensional, mapeamento de texturas, entre outros avanços. Foi na E&S também que foram descobertos os grandes gênios da computação gráfica atual, como Jim Clark (fundador da Silicon Graphics), Ed Catmull (fundador da Pixar) e John Warnock (fundador da Adobe). Hoje em dia, a E&S está voltada totalmente para a criação de ambientes simulados, tanto para a indústria militar e civil (simuladores de vôo e de tráfego), quanto para a indústria do entretenimento (cinemas interativos). Entre no site deles para dar uma conferida: www.es.com.

A segunda grande revolução podemos dividir em duas partes: a criação do computador pessoal, em 1976, com o Apple I, que democratizou a utilização do computador. Vale lembrar que a IBM só criou o seu primeiro PC em 1981, e em 1979 a Apple já tinha o Apple II, que rodava gráficos e imagens coloridas.

A segunda grande revolução foi em 1983/84, com a criação do Macintosh, que introduziu ao mundo a GUI (Graphic User Interface), e é a mãe de tudo que conhecemos hoje em dia em termos de computação gráfica. Já imaginou criar um desenho através de linha de comando? Em 1982 tivemos dois grandes acontecimentos: a criação da Adobe Inc, uma das pioneiras em aplicações gráficas (no início, apenas para desktop publishing – depois para todo o mercado), e a criação da Silicon Graphics, que se especializou na criação de hardwares específicos para aplicações gráficas.

Em 1984 eles lançaram a primeira workstation voltada totalmente para gráficos 3D. A criação do Amiga, da Commodore, também foi muito importante para a computação gráfica. Em uma máquina potente e relativamente barata, os profissionais podiam rodar programas de animação 2D, 3D, edição, composição, mixagem de áudio e mais uma infinidade de coisas. Muitas produtoras de vídeo ainda são baseadas, até hoje, em plataforma Amiga equipada com a famosa Vídeo Toaster. Até o começo da década de 80, vimos toda a base para a indústria da computação gráfica ser criada. Graças a esses pioneiros, tivemos em 1982 o primeiro filme a utilizar efeitos de computador, Tron, da Disney.

George Lucas os utilizou também em Guerra nas Estrelas e, a partir daí, a computação gráfica estava estabelecida em Hollywood. Claro que não podemos falar de computação gráfica sem falarmos nos jogos (que, inclusive, é o principal assunto deste site).

Como seria muito extenso incluir este capítulo especial e saudoso neste texto, recomendo que vocês acessem o site Retrospace, da Outerspace (http://outerspace.terra.com.br/retrospace/). Está bem completo e, melhor, em português.

Com a evolução do hardware e, principalmente, do software, vimos coisas inacreditáveis na telona. Quem diria que, em 1991, veríamos um ser de metal líquido se transformar numa pessoa (Exterminador do Futuro 2). Em 1993 os dinossauros voltaram à vida através do computador, em Jurassic Park. Em 1995 tivemos o primeiro filme criado no computador, Toy Story.

Infelizmente nosso Cassiopeia – que começou a ser produzido antes de Toy Story – não conseguiu ser lançado antes dele por problemas técnicos e financeiros. Mas é nossa a honra de ter o primeiro filme criado inteiramente no computador, já que Toy Story escaneou a geometria dos personagens a partir de modelos reais. Algumas curiosidades a respeito de Cassiopeia:

  • Foi utilizado um software de animação e modelagem 3D chamado Topas Animator, que era obsoleto já naquela época;
  • Os personagens e cenários foram criados a partir de formas geométricas simples, como esferas, cubos e cilindros;
  • O “render” foi feito numa rede com 20 computadores 486. Nos últimos meses de produção, os computadores foram roubados, o que atrasou ainda mais a finalização;
  • Cassiopeia 2 está sendo produzido, mas desta vez com equipamentos de ponta e com o software 3D Max, um dos mais utilizados hoje em dia. A última notícia a respeito do filme é que os produtores estão procurando jovens talentos em animação 3D para se juntarem à empreitada.

Nos dias de hoje, estamos vivendo várias revoluções ao mesmo tempo. A maior delas é a democratização das ferramentas de animação e computação gráfica. Se a Apple democratizou o uso dos computadores pessoais através do seu Apple II e Macintosh, o PC hoje é a plataforma mais barata e eficiente para a Computação Gráfica. Praticamente todos os softwares de animação acabaram sendo migrados para a plataforma Windows NT.

Há alguns anos, para se ter um equipamento capaz de rodar esses softwares, era necessário uma plataforma Silicon Graphics (sob o custo de, pelo menos US$ 10.000,00), e um programa de animação que custava a metade, ou até mais que o valor do hardware. Hoje em dia, com R$ 3000,00 você consegue um PC poderoso. A partir de US$300,00 você tem acesso aos principais programas gráficos e de animação.Isso significa que, em sua própria casa, você tem a possibilidade de aprender os principais softwares. Tem até a possibilidade de fazer um filme inteiro no seu PCzinho. Muitas produtoras de animação se aproveitaram dos baixos custos atuais pra entrar no mercado e mostrar o seu valor.Outros fatos importantes que estão revolucionando o mundo da computação gráfica:

  • O cinema digital, que está reduzindo os custos e facilitando a manipulação das imagens e cenas no computador;
  • As novas ferramentas de animação, que estão eliminando as tarefas repetitivas e dando mais tempo aos artistas para aprimorarem as técnicas mais complexas;
  • As modelos virtuais, que literalmente estão dando vida aos seres de computador. Veja Final Fantasy, O Senhor dos Anéis, Guerra nas Estrelas Episódio I (e aguarde o lançamento do 2o filme, que trará mais avanços), e um filme irá retratar bem esse mundo, Simone, com Al Pacino.
  • Hardwares cada vez mais poderosos, que estão diminuindo o tempo de render e de pré-visualização.

É isso aí. É claro que deixei de falar muitas coisas aqui neste texto. Vou continuar minhas pesquisas e num futuro próximo estarei fazendo uma versão 2.0 desta história.