E mãos ao trabalho..

Passo 1 – Photoshop

Vamos abrir o Photoshop e criar uma nova imagem com fundo transparente e com as dimensões do nosso emoticon. Eu quero fazer um idêntico aos que já vêm com o Windows Live Messeger, por isso escolho o mesmo tamanho, 19x19px.

Agora vamos buscar a Ellipse Tool (U) e vamos desenhar um círculo que ocupe praticamente todo o espaço disponível:

Agora vamos clicar duas vezes na layer para abrir a janela dos Layer Styles e vamos diminuir o Fill para 0%. Depois vamos a Stroke e vamos usar estes valores:

O gradiente que usei foi este:

E agora vamos adicionar um Gradient Overlay:

E desta vez é este gradiente:

E já só falta uma Inner Shadow para dar volume (#ECB01B):

E já temos a face do nosso emoticon. Podem mudar o nome desta layer para “Face” ou qualquer coisa que identifique.

Passo 2 – Olhos

Vamos criar um novo grupo acima da layer existente e vamos mudar o nome do grupo para “Olhos” e vamos criar uma nova layer dentro. Agora vamos buscar a Pencil Tool (B) – com o tamanho a 1px – e com a cor #AC904C vamos desenhar uns olhos esbugalhados na face do nosso emoticon:

Agora vamos buscar a for branca (#FFFFFF) e vamos preencher o interior dos olhos

E vamos de novo buscar a cor #AC904C e na barra superior do Photoshop, vamos diminuir a Opacity para 30% e pintar os cantos dentro e fora para parecerem mais arredondados do que realmente são.

Agora vamos mudar o nome desta layer para “Olhos – Base” e vamos criar 5 novas layers acima dela.

Na imediatamente acima vamos pintar as íris dos olhos dele normais nesta cor #6A2217 (não se esqueçam de voltar a por a Opacity a 100% antes de pintar):

E vamos deixar as outras quatro layers sem nada por enquanto (elas vão servir para a animação depois)

Passo 3 – Boca

Agora vamos criar um grupo para a boca. Podemos criar imediatamente acima do grupo dos olhos. E vamos mudar o nome para “Boca” para fácil orientação =D

Vamos criar uma layer lá dentro e com a Ellipse Tool (U), desenhem algo assim:

E vamos clicar duas vezes nesta layer para editar os Layer Styles. Vamos adicionar um Stroke com a cor #9f4021:

E agora vamos duplicar esta layer até termos 4 iguais e vamos pô-las todas invisíveis. E vamos criar uma nova layer vazia onde vamos com o pincel pintar uma boca simples para o início da animação – também com a mesma cor do stroke – #9f4021 – eu pus o pincel a 20% e pintei várias vezes nos mesmos pontos até ficar uma linha mais ou menos gradual:

E pronto.. Já só falta animar o nosso emoticon =D

Passo 4 – Animação

Vamos ao menu Window>Animation e vai aparecer uma barra no fundo do ecrã.. No canto superior direito dessa barra há um botão, cliquem lá e depois em Convert to Frame Animation – isto é para criarmos uma animação por frames, que é o que nós queremos (para mais informação em como fazer animações, vão dar uma vista de olhos pelo tutorial da userbar onde explico isto com mais pormenor)

Agora criem três novas Frames. A primeira vai ficar intacta. Na segunda, vamos ao grupo Olhos e vamos seleccionar a layer com as íris pintadas e com a Move Tool (V), vamos pressionar a tecla direccional para a direita do teclado uma vez (mover um pixel para a direita):

E vamos agora à terceira frame e vamos mover os olhos para a esquerda:

E a última vamos deixar normal como a primeira.

Agora vamos adicionar mais quatro frames à frente da última.

Vamos seleccionar as quatro novas frames e por a layer das íris do emoticon invisível e vamos mover os olhos 1px para cima:

Antes de alterarmos, temos que fazer outra coisa: Como há uma opção activada chamada Propagate Frame 1, todas as alterações feitas á frame 1 vão ser visíveis em todas as outras, por isso vamos para a frame 1 e vamos seleccionar as 4 layers vazias que já tínhamos criado e pô-las todas invisíveis para depois as pormos visíveis só na frame correcta em vez de todas.

E agora na frame 5, vamos usar a primeira daquelas 4 layers vazias. Vamos lá com o pincel (a 100%) e a cor #6A2217 pintar as novas íris dele da forma mais estranha possível:

Agora vamos á frame 6 e vamos activar a layer seguinte e lá vamos pintar as íris noutra posição qualquer:

E assim sucessivamente para as outras duas frames e layers.. O meu resultado foi este:

Agora que os olhos já estão, vamos tratar da boca.. Para isso temos de seleccionar as 4 últimas frames e desactivar a layer da boca “simples” que está visível.

Ok, agora vamos à frame 5 de novo e vamos activar a primeira layer da boca “aberta”:

Agora é só seleccionar a máscara desta layer e alterar o formato da elipse com a Pen Tool (P) para lhe dar o aspecto mais louco possível (com a Pen Tool e a máscara seleccionadas, pressionem a tecla Ctrl e depois cliquem na elipse para aparecerem os pontos alteráveis e depois Ctrl de novo para os mover de um lado para outro)

Que tal? He he. Agora vamos fazer o mesmo nas frames e layers seguintes: Em cada frame, activamos outra das layers e alteramos. O resultado deve ficar algo assim:

Passo 5 – Temporização

Já devem ter notado que por baixo de cada frame aparece escrito 10 sec. Isto é a duração daquela frame. Neste caso está a dizer que cada frame vai durar 10 segundos.. Claro que nós não queremos isso, por isso vamos alterar os tempos individualmente..

A primeira frame é a parte normal do emoticon, por isso vamos pôr uns 2 segundos.
A segunda, em que ele começa a olhar para os lados – para ver se ninguém o está a observar – tem que ficar bem menos.. uns 0,7 segundos (no menu escolham Other e escrevam os 0,7).
A terceira frame, onde ele olha para o outro lado, vamos pôr ainda menos – 0,5 segundos.
A quarta frame também pode ser 0,5.
As outras quatro têm que ser mesmo rápidas.. Pode ser 0,1 segundos para cada.

Agora é só diminuir o zoom da nossa imagem até 100% e pressionar o botão Play animation para vermos como ficou. Alterem também o Once para Forever para que a animação continue sempre em vez de parar ao chegar à última frame.

Passo 6 – Retoques

Agora é uma boa altura para retocar e aperfeiçoar a nossa animação.. Na minha opinião, as retinas não dão a sensação de se estarem a mover rápido o suficiente nas últimas 4 frames.. Por isso vou lá com o pincel a 30% pintar em cada frame a posição em que os olhos estavam antes, para parecer uma mudança gradual, em vez de repentina:

Frame 5. Os olhos antes estavam abaixo, vou por um pixel nos lugares onde antes estavam as retinas:

Frame 6:

Frame 7:

E última:

Ok, acho que já está tudo bem =D

Passo 7 – Guardar como Gif Animado

Agora que temos a nossa animação pronta, queremos guardá-la. Para isso vamos ao menu File>Save for Web & Devices.
Nota: não se esqueçam claro de guardar sempre também o ficheiro original do Photoshop como .psd para poderem editar posteriormente.

A janela que apareceu tem imensas opções editáveis.. Mas nós vamos ver as principais para o nosso emoticon.

1 – O formato de ficheiro tem que ser Gif, uma vez que é o único ali que permite animação – provavelmente até já estava escolhido.
2 – O algoritmo de redução de cores pode ser praticamente qualquer um, desde que não altere muito o aspecto – eu vou escolher o Perceptual.
3 – O número de cores.. Bem, o nosso emoticon tem muito poucas cores, é quase tudo tons diferentes de amarelo e vermelho, por isso 64 cores deve chegar e ainda diminui o tamanho do ficheiro.
4 – Tem que ter transparência.
5 – O Matte é a cor que ele usa para poder tornar a transparência mais gradual.. Ou seja, aqui ele vai tornar as arestas do emoticon de cada vez mais brancas para se poder misturar com o fundo bem.. Vejam este exemplo:

O emoticon da primeira coluna não tem matte, o da segunda tem matte branco e o da terceira tem preto. Notam como o que tem matte preto fica mesmo bem no fundo preto e o que tem matte branco fica bem no fundo branco? Eu vou escolher branco porque todos os originais do Messenger também têm matte branco.. Provavelmente eles acham que a maior parte das pessoas usa fundo branco no Messenger.
6 – Este aqui não vai fazer muita diferença, mas numa imagem maior, ele iria pôr poucos pixeis numa área muito transparente e muitos numa área pouco transparente para parecer gradual.. Mas no nosso caso vamos deixar desactivado.
7 – Agora que está tudo bem, vamos gravar =D

Passo 8 – Importar no Messenger

Agora abram a vossa janela do Messenger e uma janela de conversa com alguém. Depois cliquem no botão dos emoticons e vai aparecer esta janela:

Cliquem depois em Mostrar tudo… E vai aparecer esta janela:

Agora é só clicar em Criar e vai aparecer esta janela:

Escolham onde está o Gif que vocês guardaram e depois um atalho (frase que ao escreverem, faz aparecer o emoticon) e pressionar OK.. E pronto, já podem usar um emoticon criado por vocês nas vossas conversas, programas, etc.

Resultado final:  Webtutoriais:CA5E50C6

Espero que tenham gostado e que comentem com sugestões ou mostrem os que vocês criaram e que subscrevam o nosso site para passarem a receber todas as novidades =D

Artigos relacionados:

1. Como Fazer Uma UserBar Animada Vamos aprender a fazer uma userbar animada no Photoshop! Podem usar a mesma técnica para fazer outras animações, como banners...

Hoje vamos ver vários que são compatíveis com os mais populares sistemas de blog, como o WordPress (este mesmo site usa o WordPress), Blogger, Typepad, etc.

Podem ainda ver no fim do artigo, uma tabela com alguns detalhes dos vários programas, incluindo os links para as páginas oficiais.

Microsoft Office Word

O conhecido programa de escrita da Microsoft também serve para bloggar. É só ir a Novo>Novo Artigo do Blogue e depois fazer uma configuração muito simples. No caso do Blogger é só por o username e a password. Se for WordPress é só por o endereço do blog, o username e a password.

Este é uma boa opção para quem já tem o Office 2007 e está habituado a poder formatar texto, imagens e tabelas no Word. Não se esqueçam que Título 1, Título 2, Parágrafo, etc correspondem a estilos CSS que estão definidos no vosso tema do blog. Por isso se no Word, escolheram o Título 1 e aparece um texto azul na fonte Calibri, não é assim que vai aparecer no blog.

O sistema de correcção ortográfica é dos melhores que já vi.

É uma óptima ferramenta, mas se não usam para mais nada, talvez o alto preço seja demasiado para apenas uma ferramenta de blogging – principalmente devido à seguinte:

Windows Live Writer

Este é um dos programas do pack Windows Live, que também inclui o Messenger, Movie Maker, Mail, entre outros programas gratuitos para utilizadores de Windows.

Este programa tem uma interface muito simples de utilizar e muito agradável. Podemos rapidamente inserir as tags (marcas) e categorias do artigo (ele faz o download dessa informação do blog) e guardar o nosso rascunho localmente no pc ou online no blog e pré-visualizar o post com o tema do blog sem sair do programa. Permite também adicionar plugins que ainda simplificam mais a realização de algumas tarefas, como por exemplo colocar ficheiros para download, inserir código de programação na página com formatação para ficar visível aos leitores, etc.

O Live Writer permite formatar de forma muito intuitiva as imagens inseridas, podendo adicionar sombras, marcas de água, etc. Podemos também predefinir uma configuração para as imagens inseridas e assim ele passa a redimensionar todas as imagens ou adicionar um efeito qualquer da nossa vontade.

Outra grande vantagem do Windows Live Writer são os links automáticos. Imaginem que falam muito num certo programa ou site – como o Photoshop, no meu caso. Com esta opção, podem por a cada vez que se escrever a palavra Photoshop, ele pôr um link para o site oficial. Se não quiserem tudo cheio de links, podem por a aparecer apenas a primeira vez que a palavra aparece em cada post. Adorei isto.

Recomendo vivamente que experimentem este programa, porque além de ser muito bom e estar todo em português, também é gratuito =D

A minha única queixa é que o sistema de correcção ortográfica não é tão bom como o do Word, o que é pena. Mas mesmo assim é bastante bom.

BlogDesk

O BlogDesk é o que tem a interface mais simples de todos os que experimentei e é facílimo de usar e configurar. Tem algumas características interessantes, como o bloco de notas, onde podemos escrever coisas para vermos depois e que não faz parte do post. Ele grava automaticamente no intervalo de tempo que quisermos para que não aconteça de o pc ir abaixo e lá se foi um dia de escrita ao ar..

O BlogDesk tem ainda um importador de imagens com várias configurações e personalizações. Assim como o Live Writer, também permite por sombras e outros efeitos nas imagens.

Ele vem em inglês mas podem fazer no site oficial o download de packs de outras línguas – das quais português não faz parte – este só vai servir para quem não escreve em português =/

Qumana

O Qumana tem um sistema integrado de rentabilização do blog por publicidade inserida directamente através do programa.

É pena, mas por alguma razão não consegui por o programa a funcionar no meu pc (não deve ser compatível com o Windows 7) embora o programa mesmo sem abrir, gaste mais memória ram que o Photoshop aberto sem imagens. Por causa disso, não pude experimentar nem mostrar uma imagem (esta foi tirada do site) e não posso dar-vos a minha opinião.

w.bloggar

O w.bloggar é dos programas com maior compatibilidade de sistemas, gasta muito pouca memória ram, mas também tem o problema da língua – não tem português. Mas mesmo assim, não deixa de ser um programa simples de usar e tem a vantagem de existir uma versão portátil que podem ter instalada numa pen-drive já com as vossas configurações e rascunhos. Pode dar jeito quando forem em viagem e só tiverem o netbook e não tenham internet.

Post2Blog

O Post2Blog é o favorito de muita gente e vejo porquê: é muito fácil de configurar, é simples para quem tem vários blogs e várias contas em cada blog, o corrector ortográfico funciona bem e também tem uma versão para pen-drive. Este programa é também muito leve, gasta pouca ram e tem dicionários em várias línguas (não tem português de Portugal, mas tem do Brasil).

OpenOffice Writer

O conhecido Writer do OpenOffice tembém tem uma extensão para ganhar a capacidade de escrever para um blog. Basta ir aqui e instalar a extensão e ele fica logo com o menu Weblog na barra que lhe permite configurar as opções necessárias para blogs. Claro que o Writer também trás todas as vantagens que referi no Word: sistemas de tabelas e de edição de texto e de imagens muito melhores que os concorrentes.

Lista de Comparação Rápida

Aqui podem ver os vários programas, a sua compatibilidade quanto a sistemas operativos e ainda a sistemas de blog.

(1) – Vem com o Microsoft Office que custa a partir de 150€
(2) – É preciso instalar esta extensão para ele poder funcionar com blogs

Espero que isto vos tenha ajudado e até à próxima.

Nota: Este artigo foi escrito no Word, mas eu normalmente uso o Windows Live Writer =D

Artigos relacionados:

1. Como Fazer uma T-Shirt para Geeks no Inkscape Vamos aprender a criar uma imagem para uma t-shirt do princípio ao fim no Inkscape. Aprendam a vectorizar e a...

Agora vamos pintar o fundo com qualquer coisa e fazer imenso Blur para não ficarmos com um fundo plano básico. Para o blur, vão a Filter>Blur>Gaussian Blur e escolham um valor elevado.

Agora com a Type Tool (T), escrevam o vosso texto no meio da imagem. Eu usei a fonte Garamond, que vem com o Photoshop.

Agora é só clicar duas vezes na layer do texto para abrir a janela dos Layer Styles e pôr estes na Drop Shadow para ficar uma sombra interessante:

Agora Bevel and Emboss para dar o efeito metálico:

E agora vamos só adicionar um Gradient Overlay para tornar a cor do texto mais dinâmica:

E o gradiente que usei foi este:

Não têm que usar exactamente as mesmas cores, estas foram escolhidas à sorte só para dar o efeito de reflexos no metal. E o meu resultado final foi este:

Agora podem guardar este estilo para usar mais tarde. Com a layer do texto seleccionada, vão à janela Styles e cliquem no botão New e vão ficar lá com o estilo guardado.

Posteriormente, para usar o estilo, é só seleccionar uma layer e clicar no estilo pretendido. Espero que tenham gostado e até à próxima =D Webtutoriais:33613A8E

Artigos relacionados:

1. Como Fazer um Wallpaper Abstracto no Photoshop Vamos aprender a fazer um Wallpaper impressionante, mas também muito simples no Photoshop...

A escrita é considerada a base da nossa civilização. Antes de se tornar escrita era baseada em pictogramas, desenhos que referiam as ideias “homem”, “caça”. Depois, passou a ser construída em ideogramas, figuras fixas que representam a ideia, é a origem na nossa escrita oriental, mais tarde dá-se o desenvolvimento da escrita oriental onde um conjunto de símbolos – fonogramas – representa sons.

Quando lemos um texto, o nosso cérebro observa determinadas formas e as reconhece como letras, associando-se e reconhecendo-a dão a palavra. Conhecendo este código compreendemos o significado de uma frase ou ideia.
Quando abrimos um livro passamos o olhar de linha em linha a procura da informação que desejamos, virar as paginas e mudar de capítulo sem nos aperceberemos que o tempo de leitura é rápido.
Reparemos em todos os manuais de instruções, mapas de estradas, sinais de trânsito, contas de telefone e formulários em que tivemos dificuldades de interpretar.

Há claramente uma busca para o design da informação no nosso mundo, para a organização de dados, o tratamento da escrita, e a apresentação, de modo que todos possam ter acesso e compreendê-la.
Todos esses factores levam-nos à legibilidade de um texto, este trabalho é da responsabilidade do designer, onde aspectos da forma dos caracteres, detalhes de execução dos caracteres, tamanho dos caracteres, comprimento da linha, escolha da cor, escolha do papel e o método de apresentação gráfica do texto põe em causa um bom ou mão trabalho.
Legibilidade, não esta nesta pesquisa definida por “legibility”, que define a eficiência da leitura, mas sim ao termo “readability” referindo-se à capacidade de comunicar e chamar atenção ao leitor.
Este relatório teve como base a pesquisa de material teórico e de métodos de pesquisa da legibilidade, afim de encontrar, regras, métodos científicos de avaliação e métodos teóricos.

Além disso, tende para a legibilidade de textos impressos mais direccionados para o crescimento da leitura em meios electrónicos.
Umberto Eco já dissertou sobre a ameaça que paira sobre o livro tipográfico na inauguração da nova Biblioteca Alexandrina, em Novembro de 2003, dizendo “Vegetal and mineral memory: the future of books”.
Esta argumentação entre o livro e o computador encontra-se cheia de paradoxos e ironias, não nos esqueçamos que o livro tipográfico é uma máquina, um artefacto construído pelo Homem, que veio a ser aperfeiçoado ao longo dos séculos.
Um livro, contem uma dinâmica interna pensada, artificial não natural, é a manifestação da intenção de comunicar, expressar e preservar memorias (passado/presente/futuro). Da mesma maneira que o ser humano é capaz de construir os computadores.

Apesar das novas tecnologias oferecerem cada vez mais recurso para a aprendizagem, o mau planeamento na apresentação do material multimédia pode causar desorientação no usuário e mesmo desmotivá-lo. Se a actividade multimédia é cuidadosamente desenhada, os usuários podem acompanhá-la com o seu próprio ritmo, e ingressar facilmente na informação.
Com a utilização de imagens, som e experiências de simulação e experimentação, a actividade multimédia envolve o utilizador num nível que poucas publicações, leituras, ou mesmo, demonstrações, poderiam fazer.
Os Programas de Multimédia tem a vantagem de envolver múltiplos sentidos simultaneamente, e assim, acomodar uma grande variedade de estilos de aprendizagem.

O que é a Tipografia?

Se atentarmos nas actividades quotidianas normais em que ocupamos a nossa vida, logo se torna evidente que a tipografia é oblíqua e inevitável. Grande parte desta actividade é rotineira e fastidiosa, mas também é essencial.
Tradicionalmente, a tipografia estava associada ao design gráfico sobretudo à indústria da impressão. Porém, em virtude do acesso universal à tecnologia digital, a palavra “tipografia” é cada vez mais usada para designar a disposição de qualquer material escrito e já não se aplica apenas ao trabalho dos tipógrafos. Hoje em dia, qualquer pessoa é tipografa…
O termo “escrito” emprega-se principalmente com o sentido implícito de “escritos à mão”, mas é óbvio que a linguagem escrita pode ser apresentada de muitas formas, recorrendo-se a tecnologias como a máquina de impressão, a transmissão de mensagens de texto, correio electrónico, impressoras de jacto tinta, correio normal, a até maquinas de escrever.
O termo “tipografia” pressupõe todos os meios de comunicação atrás referidos.
Obviamente, a tipografia e a escrita estiveram interligadas, dado a tipografia ser a disciplina e profissão que actua como intermédio entre o conteúdo da mensagem e os leitores da mensagem. Assim, para se compreender a gramática da tipografia, também é preciso adquirir conhecimentos linguísticos e entender o modo como a língua é adaptada à função pertinente nos vários contextos sociais.

Breve História da escrita

“… toda história da tipografia pode ser vista como um série de sucessivas adaptações a uma nova tecnologia… Virtualmente em todo caso, nós vemos o mesmo padrão repetido: No começo, os designers tentando utilizar a nova tecnologia para simular a tipografia produzida pela velha… depois, designers se tornam mais adaptados às limitações da nova tecnologia… Finalmente os designers desenvolvem novos desenhos de tipo que tiram vantagem da nova tecnologia” - Biegelow, C. in Boag, a. The representation of type on screen, pg 4

Demonstração da aparência do traço causado por diferentes técnicas de escrita:

1. Cortes rústicos em madeira
2. Esculpidos com cinzel
3. Hastes mergulhadas na tinta
4. Pincéis
   Penas côncavas
5. Tecidos
6. Bordados
7. Pirografia

As primeiras técnicas da escrita variam de acordo com a disponibilidade de materiais em cada região. Na mesopotâmia a escrita era feita em argila enquanto no sudeste asiático era feita com estiletes em folhas de palmeira, e no Egipto, utilizaram papiro, e assim por adiante.

Esta tábua de argila demonstra o desenvolvimento dos símbolos sumérios para estrela, cabeça e água. Os primeiros são de 3100 A.C, os segundos de 2800 A.C., evoluíram até as primeiras escritas cuneiformes (2500 A.C.)(Meggs,1983)

Quando os escribas já estavam munidos de papiro, pergaminho e tinta, os seus instrumentos eram o pincel ou as penas. Essa “novidade” possibilitou a realização de vários movimentos na escrita, antes de mergulhar novamente o utensílio na tinta. Isso foi um dos factores que contribuíram para a união dos caracteres na nossa escrita cursiva. Além disso, permitiram a variação de espessura num mesmo traço, o que propiciava espessuras diferenciadas nos traços dos caracteres e acabamentos diferenciados nas extremidades. A variação do ângulo e a posição da pena na caligrafia também ajudou a determinar as características das diversas escritas, como podemos observar nos exemplos extraídos do livro “Sinais & Símbolos de Adrian Frutiger.”

Uma importante mudança ocorrida ao longo de anos de escrita manuscrita foi a consolidação do uso de dois alfabetos, um minúsculo para a escrita quotidiana e um maiúsculo, para a escrita monumental. Essa mudança ocorreu principalmente por simplificação de traços, para facilitar a escrita.
Gutemberg inventou os tipos móveis na Alemanha, procurou imitar os manuscritos góticos. Mas a dificuldade de execução dos tipos, (que eram gravados em um punção de aço, que depois era batido em um bloco de cobre, que por sua vez servia de matriz para a fundição dos tipos de chumbo) além da difusão da impressão pelo resto da Europa, fez com que os tipos (no séc. XVI) mudassem para outros de linhas mais grossas — Chamados hoje de venezianos, e o melhoramento das técnicas deu o surgimento dos tipos Garamond, entre outros.

Sistema de Gutemberg de fundição de tipos:

A. Punção

B. Matriz de cobre

C. Molde do tipo (sem a matriz)

D e E. Molde do tipo aberto para retirada do tipo

Na verdade, Gutemberg não inventou a imprensa, os chineses já imprimiam `a partir de blocos de madeira muito antes, mas ele inventou um método de manter os tipos fixos e de fundição que permitia a multiplicação de uma forma apurada e em grandes quantidades, além do desenvolvimento de um sistema de impressão e de tinta especial para impressão (Turnbull, 1964).

No século XVIII, o surgimento da tecnologia de gravação em cobre permitiu que o desenho de traços mais finos, proporcionando o surgimento dos tipos mais modernos, como o Didot e o Bodoni.
Mais tarde, a litografia que surgiu no final do século XVIII proporcionou o surgimento de tipos de desenho livre, como os sem serifa, os egípcios e os de serifas arrematadas, além de tipos decorativos.
Isso foi possível porque com a litografia o tipógrafo pode desenhar com seus instrumentos habituais, que são a o pincel, a pena, a régua, o compasso, entre outros.

Assim como evoluíram os processos de desenho do tipo, evoluíram também os métodos de impressão e os métodos de composição.
No final século XIX, foram inventadas as primeiras máquinas de fundição de linhas, as composições eram feitas letra por letra, individualmente. A Linotype, (1889) era uma dessas máquinas em que o operador digitava o texto num teclado, e a máquina se encarregava de ir agrupando os tipos, que depois eram fundidos linha por linha. Um erro podia acarretar em ter que refazer a linha. O sistema Monotype era parecido, só pelo facto de o texto ser digitado e marcado num papel perfurado, que determinava para a fundidora as informações de texto e a respeito de espaço extra. Apesar dos avanços, esses sistemas não causaram mudanças, uma vez que o processo de impressão era o mesmo.

No livro “Produção Gráfica”, de 1974, James Craig já citava modelos de fotocomposição digital, onde se podia editar o texto e, alguns modelos mais avançados onde se podia fazer a paginação. Nos anos 70, ficou marcado o lançamento da Apple, um computador para uso pessoal com letras de resolução de 5×7 pontos, novamente transformando a aparência dos tipos de maneira radical. Além disso, as impressoras matriciais também passaram a estar disponíveis, permitindo a impressão em casa de dados digitais. Em 1984 já era possível trabalhar com tipografia em computadores.

As imagens geradas por tubos de raios catódicos, são como os antigos monitores e televisores, são produzidos de maneira diferente de outros tipos de reproduções de imagens. Nesses dispositivos, a imagem é formada por sucessivas rajadas de electrões que iluminam apenas um ponto de cada vez, mas de modo tão rápido que nossos olhos não conseguem perceber. Assim, ele traz dois grandes problemas para o conforto: a luminosidade e uma cintilância que provocava cansaço visual.

A tecnologia continuou evoluindo constantemente, embora os nossos monitores sejam bem melhores que os antigos displays, (os actuais computadores têm cerca de 92dpi, os antigos, tinham 72, mas já existem monitores de 165 e 300) a tecnologia de representação ainda deixa muito a desejar-se comparada com o bom e velho papel. Não só pela resolução inferior como também pela claridade que incomoda e pela postura de leitura. A mudança de resolução trouxe a necessidade de novos desenhos compatíveis com as limitações dos displays.

Este processo causou mudanças profundas na tipografia. Uma das mudanças foi que os caracteres perderam sua dimensão física, e transformaram-se em informação pura, de tipos, passaram-se a chamar fontes. Essa mudança fez com que os custos de transmissão das fontes passasse a ser ínfimo, e a possibilidade de multiplicação infinita. O fato de se tornarem informação pura também permite sua edição por qualquer indivíduo que tenha um programa de edição de fontes, com a simples mudança de posição de linhas e pontos. Isso não significou que eles passassem a ser gratuitos, porque o trabalho do tipógrafo ainda tem que ser pago.

Mesmo assim, cresceu a possibilidade de aquisição de fontes pelos designers, existindo ainda muitos tipógrafos que distribuem gratuitamente suas fontes na Internet, embora a maioria seja fontes de baixa qualidade ou de desenhos experimentais. Além disso, é muito fácil a utilização de fontes diferentes e diferentes tamanhos de caracteres numa mesma linha sendo bastante complicado nos processos de composição anteriores. Essas novidades causou bons resultados, no passo que dotou bons designers com ferramentas muito mais capazes, mas também causa alguns pequenos desastres ao oferecer recursos para qualquer interessado. O acesso facilitado permite com que qualquer indivíduo minimamente treinado possa se intitular designer gráfico, somente devido ao conhecimento dos softwares.

Legibilidade

O Que é Legibilidade?

O especialista Willem Ovink define legibilidade como “a facilidade e precisão com a qual o leitor percebe os textos impressos”. Este processo pode descreve-se em dois termos – legibilidade ou legibility (percepção visual), e leiturabilidade ou readability (compreensão intelectual do texto).
A legibilidade é uma grandeza empírica, traduzível em números.
Existem entretanto vários testes para a medir:

• A velocidade de leitura,
• A compreensão (retenção de conteúdos),
• O movimento ocular

E ainda outros parâmetros e critérios.
Logicamente, a legibilidade varia consoante a inteligência e a cultura das pessoas que desempenham os testes; portanto é necessário fazer os testes de legibilidade por grupos. Ex.: faixas etárias, profissões, literacia, etc.

As pesquisas de legibilidade, contam com cerca de 120 anos. Um dos testes mais conhecidos é conduzido por Nisson em Paris, no final do século XVIII, consistia essa pesquisa na comparação e reconhecimento dos caracteres à distância de dois textos, um impresso em Garamond e outro em Didot, demonstrando que o texto em Gramond podia ser reconhecido a uma distância maior do que o impresso em Didot.
Em 1888, E. C. Sanford publicou um estudo sobre a legibilidade comparando com pequenas letras. “The Relative Legibility of the Small Letters. 1888”.Outras pesquisas foram feitas no começo do século XIX, por Babbage, experimentando a legibilidade relativamente à cor do papel e a legibilidade de números em estilo antigo ou alinhados. As suas conclusões foram contestadas por pesquisas posteriores.
Pike foi o revisor dos primeiros estudos, ele considerava que as letras góticas deviam ser abolidas, e encontrou nelas a responsabilidade pela miopia dos alemães. Além disso, demonstrou que a parte superior das letras é mais responsável pelo reconhecimento das palavras do que a parte inferior.
Outra importante descoberta feita em 1885 por Cattell, de que o olho reconhece palavras tão rápido quanto caracteres sozinhos, o que demonstrava que a forma das letras era responsável pelo seu reconhecimento.
A legibilidade e a facilidade de leitura não são a mesma coisa. Decerto que a legibilidade influencia a facilidade de leitura e vice-versa, mas para se compreender ainda mais como se influenciam uma à outra é necessário analisá-las separadamente.
O grau de legibilidade de uma fonte depende do criador da fonte, ao passo que a facilidade de leitura deriva da competência do tipógrafo.
A legibilidade respeita o grau de nitidez que permite distinguir os caracteres individuais uns dos outros. As formas das letras (legíveis) são desenhadas para surgirem com um aspecto nítido e conciso. Em geral, os tipos de letra mais legíveis são os que tem caracteres com espaços interiores abertos ou fechados maiores, o que implica, inevitavelmente, uma grande altura do x. Mas se a altura do x for grande isto implica uma consequência, os ascendentes e descendentes serão curtos. Não só afectará a legibilidade dos caracteres individuais (fazendo com que o “h” e o “n” e o “i” e o “l” sejam confundidos), como também dificulta a identificação das formas das palavras.
Os espaços internos são cruciais para ajudar a distinguir alguns dos caracteres que são utilizados com maior frequência – (“e”, “a” e o ”s” ; “c” e “o”). Estas letras não têm características distintivas (não tem ascendentes nem descendentes e todas tem larguras semelhantes), também são idênticas quanto ao tamanho do espaço interno. Não restam grandes duvidas que, devido a frequência do uso, aquilo contribui para a legibilidade de uma fonte e dá-se um olho amplo ao “e” e um espaço interno fechado no “a”.
Os caracteres que são mais facilmente confundidos uns com os outros são o “i”, “j”, “l” e o “f” e o “t” sendo em muitas fontes o “l “ quase igual ao algarismo 1 e o “O” maiúsculo igual ao 0 (zero). O tamanho individual das letras também afecta a legibilidade relativa. Por exemplo: o “m” e o “w” são intrinsecamente mais legíveis que o “i” ou o “l”, simplesmente porque tem dimensões maiores.

Analisando a legibilidade e tendo em conta a forma das características das palavras, bem como a sua definição dos elementos estruturais (ascendentes, descendentes, espaços internos, serifas), há um terceiro aspecto a ter em conta: o tamanho do tipo. A utilização do tipo num determinado tamanho reduzido, um tipo em tamanho 8pontos ou menos, privará do texto uma parte do público-alvo. Como foi referido atrás é inevitável que apliquemos um tamanho reduzido, as respectivas insuficiências podem ser minimizadas utilizando-se uma fonte com uma grande altura de “x”.
Por fim, a outra condição para uma boa legibilidade é o contraste tonal entre a palavra e o substrato. Nos casos em que o tom (cor) da palavra e do fundo são parecidos, é evidente que a legibilidade será afectada. Menos óbvio é o facto de um texto impresso a preto ficar mais legível num papel de tonalidade bege e mate do que num papel brilhante espelhando a luz.
A combinação do brilho de uma superfície com um grande contraste torna cansativa a nossa vista como podemos constatar mais a frente.

Métodos de investigação de Legibilidade

Tinker, no seu livro, “Legibility of Print” enumera os seguintes métodos de investigação de legibilidade

• Velocidade de percepção
• Perceptibilidade à distância
• Perceptibilidade na visão periférica
• Visibilidade
• Fadiga na leitura
• Velocidade de trabalho
• Movimentos do olho

Velocidade de percepção

Os estudos relativos ao que sucede quando lemos foram sempre polémicos devido à dificuldade em obter-se informação sobre o que ocorre durante o acto da leitura. A monitorização dos movimentos oculares não explica como extraímos sentido dos símbolos gráficos. Paralelamente, fazer testes às pessoas após terem lido, dá-nos indicações acerca do que foi lido, mas não sobre o processo de leitura e o que foi retido.
Contudo, foi possível determinar que, durante a leitura, os olhos não seguem uma linha de maneira regular, mas sim uma série de movimentos, oculares. Quando os olhos se detêm momentaneamente, ocorre o que se chama de fixação, fazendo cerda de três a quatro fixações por segundo. Embora sejam breves essas fixações, os testes realizados demonstram que o olho e o cérebro conseguem registar três ou quatro letras individuais, ou até entre duas a três palavras curtas, num centésimo de segundo. (Tinker, A. Miles, Bases for Effective Reading. University of Minnesota, 1965)
A duração das fixações e a direcção dos movimentos dependem de:

a) as características do texto

b) a maturidade cognitiva do leitor

c) a sua concentração

d) a visão e a fadiga ocular

e) a iluminação

f) a distância do olho ao texto

g) a postura do corpo

h) o tipo de letra e papel.

Durante uma fixação, existe um limite para a quantidade de informação que pode ser assimilada.
A córnea é uma pequena depressão na retina, localizada no eixo óptico do olho, onde se projecta uma imagem de grande nitidez do objecto focalizado. É a região da retina mais especializada para a visão de alta resolução.
A córnea contém cones na retinia e permite que a luz atinja os fotoreceptores sem passar pelas demais camadas da retina, maximizando a acuidade visual (capacidade do olho distinguir entre dois pontos próximos, e que depende de diversos factores, em particular do espaçamento dos fotoreceptores na retina e da precisão da refracção do olho). A córnea centralis consegue observar apenas três ou quatro letras à esquerda e à direita da fixação, a distâncias normais de leitura.

Perceptibilidade à distância

A técnica para verificar a legibilidade a distancia é a capacidade de reconhecimento de símbolos impressos. É útil para verificar no papel a forma das palavras para a percepção, além de determinar o tamanho correcto para cada forma de letra em sinalização à distância e placares.
O aparelho usado nesse tipo de pesquisa e consiste num carril de madeira e um carro que se move de dez em dez centímetros. Em cada ponto o sujeito lê aquilo que é possível. As anotações da leitura são feitas a cada etapa e continua até que tudo seja lido correctamente. Este método é ainda utilizado para testar os grandes anúncios ou sinalização, sendo nesse caso o material a ficar parado e é o sujeito que anda lentamente até conseguir ler correctamente.

Perceptibilidade na visão periférica

Tenta medir a distância horizontal de um ponto de fixação até a outro ponto de fixação onde um símbolo impresso pode ser lido com precisão. É útil para o estudo da legibilidade relativa de letras e impressão branca vs. preta.

Visibilidade

A visibilidade é medida normalmente com Medidor de Visibilidade de Luchkiesh Moss. É uma técnica que define a visibilidade limite do que se encontra impresso. Contribuiu para essa legibilidade os tipos, negrito e de graus de contraste entre o texto e o fundo.
O medidor de visibilidade consiste em dois filtros fotográficos com gradientes circulares de densidade diferentes que são rodados simultaneamente na frente dos olhos durante a execução de uma tarefa visual.
Os discos são girados lentamente até os signos serem reconhecidos. Os filtros vão variando de transparente até muito escuro reduzindo o brilho da imagem para constatar se a visibilidade importante para o reconhecimento de títulos, e sinalização.

Fadiga na leitura

Muitas das vezes a fadiga é provocada por diversos factores; pelo esforço que fazemos ao tentar ler um tipo de letra de tamanho reduzido, a dificuldade de leitura pelo brilho que contem o papel e as cores utilizadas sobre a tipografia.

Velocidade de trabalho

A velocidade de leitura é, a quantidade de texto lido num certo espaço de tempo, o tempo levado para encontrar um número, o tempo levado para encontrar alguma raiz em tabelas matemáticas. Este método é um dos mais requisitados e válido na pesquisa de legibilidade de material impresso.

Movimentos do olho

Os movimentos do olho dão os mesmos resultados da medida da velocidade da leitura mas tem a vantagem adicional derivada da análise da gravação dos movimentos de leitura. Isto dá informação detalhada demonstrando os motivos que tornam a leitura mais vagarosa.
Durante a leitura, o olho move-se rapidamente, de um ponto de fixação pela linha de impressão. As pausas de fixação são os períodos, onde ocorre a percepção do material lido.

Estrutura do Traço

O contraste do traço (que muda de grosso para fino) dos seus tipos de letra, a negrura da tinta e a brancura e a rugosidade do papel bem como a ausência de decorações nas obras, levou os críticos de Baskerville afirmarem que a leitura dos livros impressos provocavam cegueira sendo ilibado mais tarde dessa acusação.
Giambattista Bodoni (1740-1813), aclamado pelo estilo neoclássico dos seus caracteres e arranjos tipográficos, foi mais tarde vítima de uma moda passageira.
A espessura dos traços é definida a partir da espessura da trave, de um “I” normal, a espessura corresponde é aproximadamente 15% de sua altura (descontando as serifas caso seja). Numa fonte light, a proporção é 10%, enquanto 25% uma espessura da semibold e 35% um bold, aproximadamente.

Altura do X

Altura de x é a altura do caractere x minúsculo, essa medida conta a partir da base da mesma letra. Comparada com a altura do A maiúsculo, mostrando o tamanho relativo do tipo de fonte e a proporção tamanho do corpo vs ascendentes. As letras maiores de x possuem os caracteres maiores em relação ao corpo das restantes.
Existe ainda um limite a partir do qual a legibilidade é prejudicada por falta de distinção entre os caracteres, por exemplo entre o “n” e o “h” e entre o “i” e o “l” como referimos anteriormente. Alem disso, a forma das palavras, causada pelos ascendentes e descendentes, é um factor importante no reconhecimento das palavras para uma leitura eficiente, verificando que os descendentes menores prejudicam a compreensão da forma geral.

Facilidade de Leitura

Nos primeiros anos em que uma criança aprende a ler recorre ao uso do dedo, que contribui para o prosseguimento da leitura da esquerda para a direita e para a precisão do movimento de retorno ao início da linha seguinte. Ao recordar as dificuldades da leitura na nossa infância, observamos que aprendemos por nós mesmo o conhecimento dos mecanismos e princípios da composição do texto.
A partir disto, segue-se o reconhecimento de palavras, bem como das funções dos espaços e da pontuação, essenciais para a actividade de uma boa leitura.
Aprendemos também ao longo do tempo as necessidades de ler diferentes tipos de informação. Documentos como: revistas, horários, catálogos, folhetos, enciclopédias, jornais entre outros…, aprendendo a procurar e seleccionar e a reagir a leitura.
A capacidade de ler rapidamente, para conseguir seleccionar com vista a empregarmos o tempo eficiente, depende muito que os caracteres estejam ordenados e dispostos de maneira normal.
Apesar de existir milhares de fontes disponíveis actualmente hoje em dia, as fontes mais adequadas para a composição de texto cabem numa categoria restrita e globalmente seguindo o padrão tradicional. As fontes com características antigas são consideradas as mais fáceis de ler (Caslon), as de transição são menos fáceis de ler (Baskerville) e as modernas (Bodoni) são as mais difíceis de ler.
Atenção, claro que são todas perfeitamente legíveis e agradáveis de ler, contudo umas mais eficazes do que outras.
Hoje em dia, os tipos não-serifados variam tanto que é praticamente impossível fazer generalizações quanto a facilidade de leitura destes tipos. As regras ditam que o tipo não-serifado são menos eficazes para a leitura, mas melhores em termos de legibilidade, e por esse motivo são utilizados nos manuais de leitura e sinalização.
Foram criados esforços para criar fontes não-serifadas e com características caligráficas dando uma nítida dinâmica da esquerda para a direita. Exemplo é a Sans.
Os caracteres de caixa baixa, ao contrário das maiúsculas, são concebidos para resultarem bem uns perto dos outros proporcionando um fluxo visual contínuo, uma aceleração dinâmica da esquerda para a direita, entendendo-se que os olhos ao passarem ao longo de uma linha de caracteres, reconhecem as formas essenciais e única de cada palavra.
Deve-se adaptar o estilo ao caso que se pretende para que o leitor se sinta confortável.

TheSans

Fluência

Manipulação do espaço

Uma das artes da tipografia esta relacionada com a manipulação do espaço, quando estamos a ler, esperamos encontrar as letras próximas umas das outras de modo que possamos identificar as palavras como um todo, mas não tão próximas que elas se toquem e nos confunda. Além disso, esperamos que esses espaços sejam dispostos de maneira regular. O espaço adequado entre as letras tem que ser aquele que proporciona uma textura homogénea à página, contudo o tipógrafo tem de constantemente a avaliar os espaços entre caracteres, palavras, linhas de palavras, mesmo entre parágrafos como o espaço a volta dos textos designado as margens.
O espaço, a par da pontuação, é usado para dividir um texto em segmentos com sentido. Por exemplo, no título em negrito de uma pagina. Um texto segmentado com clareza ou “aberto” é mais fácil de compreender, rever e pesquisar. Os textos de aparência técnica têm parágrafos separados por um espaço de uma linha em branco, ao passo, que os parágrafos de textos de ficção se destacam menos, sendo geralmente indicados por uma pequena identificação que marca os inícios do parágrafos.
O espaço em branco de uma página obriga o leitor a fazer uma pausa e, por isso, pode construir um elemento eficaz para o tipógrafo dar realce, sentido de orientação e controlo do ritmo do texto. Pela mesma razão é imprescindível controlar com rigor o espaço entre palavras, a fim de assegurar que os espaços fiquem o mais uniformes possíveis nas partes em que é preciso apresentar uma sequência estável e incessante da informação.
A quantidade de espaço entre todos os pares de caracteres atribuída a uma fonte é planeada pelo criador do tipo de letra como parte complementar da fonte. Apesar disso, deve-se verificar os pares problemáticos, entre os quais o “T” e o “W” “AV” ou “LA” ou “IL” “FE” entre muitos outros. Em alguns desses casos, é necessário quais as letras ultrapassem seus quadrados limites, e isso é chamado Kern.

As melhores fontes contêm até 1000 pares de kern enquanto a maioria delas contém entre de 200 e 500 pares.

Espaço entre palavras

Deverá existir uma nítida demarcação perceptível entre a linha de texto e o espaço entre as linhas, de modo a que se reforcem e suportem mutuamente.
A quantidade adequada de espaço entre palavras aconselhada é aproximadamente a mesma que a do espaço entre os traços verticais da letra n. Mas pretendendo com que todos os espaços entre palavras pareçam uniformes, na realidade, nem todos ficarão com a mesma largura. É preciso levar em conta os feitios irregulares de diversas formas de letras. Quando uma palavra termina com a letra d e a palavra seguinte começa com um b (ou h ou k), o espaço por defeito entre ambas parecerá menor do que o espaço entre o «e» e o «o».
A composição alinhada à esquerda (como é o caso deste texto) não levantará problemas, mas se a composição estiver justificada (impondo um espaçamento desigual entre palavras), as formas das letras irregulares dará ao tipógrafo a possibilidade de escolher onde reduzirá ou aumentará o espaço entre palavras. O objectivo na composição de texto é fornecer espaços visualmente uniformes entre as palavras, devendo-se manter num texto justificado.

É mais fácil conseguir-se esta uniformidade visualmente rítmica dos espaços entre palavras quando se justifica um texto se este tiver linhas mais extensas do que se tiver linhas mais curtas. A norma consensual fixa entre 10 e 12 o número de palavras por linha para que a leitura se faça confortavelmente. Uma linha de maior comprimento abrange mais palavras e, portanto, mais espaços, tornando-se mais fácil aumentar ou diminuir o espaçamento sem que o leitor se aperceba dos efeitos deste procedimento. Outra maneira para a composição justificada uniforme é a disponibilidade para, pontualmente, se dividirem palavras no fim de uma linha, quando isto for útil. A translineação de palavras é necessária (e mais frequente) quanto mais estreita for a coluna de texto.
Os ajustes do espaço entre caracteres nas linhas de texto só se podem fazer quando não se venham a tornar-se perceptíveis ao leitor. A ferramenta tracking tem de ser utilizada com grande precaução.
Na composição justificada, nos casos em que o espaçamento entre palavras se torna excessivo, pode parecer que os travessões estejam a unir palavras (como um hífen), em vez de cumprirem as funções próprias como, por exemplo, a de isolar, num contexto, palavras ou frases. Se este efeito óptico ocorrer, pode inferir-se que o espaçamento entre palavras absolutamente excessivo.
Uma página de texto densa, mais escura, com uma textura compacta proporcionará ao leitor uma perspectiva desafiadora que, dependendo do conteúdo, poderá ser apropriada. Não existem valores «óptimos» para o espaçamento de caracteres ou de palavras. A avaliação relativa ao valor tonal final do texto dependerá do conteúdo, do público-alvo e, pontualmente, das condições em que o texto vier a ser utilizado. A obtenção de um valor tonal adequado depende de cinco factores: tipo de letra, espaço interno das palavras, espaço entre palavras, espaço entre linhas e espaço à volta do texto. Estas premissas conjugadas (tendo noção também do tamanho e espessura do tipo, bem como cor, superfície e gramagem do papel) são a essência da tipografia.
Segundo “The Tames and Hudson Manual of Typography” o espaçamento entre as palavras é igual ao tamanho de um i minúsculo.

Espaço entre linhas

O espaço entre as linhas de texto (que se chama entrelinha) ajuda a visão focada do leitor a «retroceder», da direita para a esquerda em ângulo agudo, passando do fim de uma linha para o início da seguinte. Se o espaçamento entre as linhas for insuficiente (sobretudo se os espaços entre palavras forem demasiado grandes ou desiguais), o texto não terá o relevo horizontal essencial para a leitura eficiente. Se um texto for composto por igual com pouco espaçamento entre linhas, parecerá mais escuro e denso.
Se o comprimento das linhas de texto for maior que o normal, então os olhos têm de percorrer uma distância mais longa e em ângulo agudo muito acentuado para chegarem ao início da linha seguinte. Para ajudar a suprimir o efeito provocado por linhas de texto mais extensas, pode-se aumentar o espaçamento entre linhas. Um espaço branco mais marcante entre linhas consecutivas contribuirá para evitar que o leitor salte linhas inadvertidamente ou torne a ler linhas cuja leitura tenha acabado de concluir.
O espaço entre linhas parecerá mais largo (com ou sem entrelinha) se o tipo de letra utilizado tiver uma menor altura do x e parecerá mais estreito se o tipo de letra tiver uma maior altura do x. O facto atrás referido influenciará a decisão relativa ao recurso à entrelinha. Tipos de letra como a Bembo ou a Caslon — que têm alturas do x relativamente pequenas — parecerão e serão muito fáceis de ler com bastante menos entrelinha do que tipos como a Times ou a Univers, que têm alturas relativamente grandes. O estilo dos caracteres influenciara a entrelinha.
O valor relativo à entrelinha atribuído por defeito do software equivale a 20% da altura do seu corpo, independentemente do seu tamanho, espeçora ou estilo de fonte.
Este valor deverá ser ajustado com a quantidade de espaço entre linha adequada.
O investigador Miles A. Tinker, nas pesquisas de velocidade da leitura descobriu que tipos de diferentes tamanhos tinham diferentes larguras ópticas e estabeleceu as zonas de segurança para os diversos tipos, linhas e espaçamentos, sendo as seguintes conclusões:

6 Pontos
Linhas de 14 picas com entrelinhamento entre 2 e 4pt
Linhas de 12 picas com entrelinhamento entre 1 e 4pt
Linhas de 28 picas com entrelinhamento entre 2 e 4pt
8 Pontos
Linhas de 14 picas com entrelinhamento entre 2 e 4pt
Linhas de 21 picas com entrelinhamento entre 2 e 4pt
Linhas de 28 picas com entrelinhamento entre 1 e 4pt
Linhas de 36 picas com entrelinhamento entre 2 e 4pt
9 Pontos
Linhas de 14 picas com entrelinhamento entre 1 e 4pt
Linhas de 18 picas com entrelinhamento entre 1 e 4pt
Linhas de 30 picas com entrelinhamento entre 1 e 4pt
10 Pontos
Linhas de 14 picas com entrelinhamento entre 1 e 4pt
Linhas de 19 picas com entrelinhamento entre 2 e 4pt
Linhas de 31 picas com entrelinhamento de 2pt (margem)
11 Pontos
Linhas de 16 picas com entrelinhamento entre 1 e 2pt
Linhas de 25 picas com ou sem entrelinhamento
Linhas de 34 picas com entrelinhamento entre 1 e 2pt
12 Pontos
Linhas de 17 picas com entrelinhamento entre 1 e 4pt
Linhas de 25 picas com ou sem entrelinhamento
Linhas de 33 picas com entrelinhamento entre 1 e 4pt

Cor

A cor influi na legibilidade por diminuir a visibilidade das letras, e distrair o leitor, no caso de contraste invertido (letras claras sobre fundo escuro) prejudicam a visão periférica da leitura. As pesquisas de velocidade de leitura de Paterson e Tinker encontraram, reduções significativas de velocidade para certas combinações de cores.
De maneira que a velocidade de leitura não é danificada até 70% de contraste de brilho entre o texto e o fundo. É de referir que contraste do brilho é diferente ao do contraste da cor. Assim, entre azul e laranja, existe um grande contraste de cor, mas pouco contraste de brilho; da mesma maneira, um amarelo sólido sobre um fundo amarelo em 10% não tem mais de 70% de contraste de brilho, pois o amarelo sólido já é muito claro.
Outro tipo de estudos provaram a preferência dos leitores por textos de cores escuras sobre fundo claros, e que quanto mais claro o fundo e mais escura a cor, melhor é a compreensão do texto. A cor escolhida é preta sobre branco é a escolha mais lógica (para papel).

Os resultados mais significantes foram apresentados abaixo:

Legibilidade comparada entre contraste negativo e positivo velocidade de leitura:

Opinião dos leitores:

Legibilidade da impressão colorida sobre papel colorido e velocidade de leitura (Tinker, 1969)

Nível de compreensão de texto para texto impresso à cores sobre fundo branco (Weildon, 1966)

Nível de compreensão de leitura para texto com fundo cinza. (Weildon, 1966)

Organização espacial

Um dos factores para um bom entendimento é a organização espacial da página, esse é precisamente um dos factores mais complicados e o responsável pelo sucesso e fracasso. Mas não é por ser importante que é fácil de se organizar espacialmente a informação.

Princípio da gravidade de leitura.

Os nossos hábitos de leitura, são da esquerda para a direita, de cima para baixo, acostumaram os nossos olhos a percorrer um caminho quando encontra um layout. O diagrama de Gutemberg mostra as zonas ópticas de maior e menor atenção. Ignorar esse princípio, pode confundir ou fazer com que o leitor se perca.
O diagrama de Gutemberg mostra o percurso que o olho faz pela página

1. Zona óptica primária
2. Âncora terminal
3 e 4. Zonas Mortas
5. Centro óptico
6. Coentro Geométrico

Teoria da forma (Gestalt)

Uma das técnicas da New Typography, tinha como base na teoria de Gestalt, desenvolvida nas décadas de 20 e 30 na Alemanha.
Uma frase associada à teoria de Gestalt é: “O todo é maior que a soma das partes”.
Os princípios mais relevantes para a tipografia são os seguintes:

• • • ••••••••• • • • • • • •
Agrupamento por proximidade.

……………””””””””””…………..
Agrupamento por similaridade

[••••] (••) {••}
Agrupamento por fechamento

|…..|…|..|…..|…..|…..|….|….|…|
Agrupamento por repetição

.; ; : . ; . : . . : : . :: ; ; . :
Agrupamento por continuação

.: ; .. “” . : ; ;;;::….” ‘
Agrupamento por relação figura -fundo

Estes princípios são aplicados por designers em diversos casos, na organização e disposição de elementos na página, noutros casos, as relações são feitas entre coisas que não deveram-se relacionar, trazendo confusão na compreensão.

Sintagrama do leitor

Sintagrama é um termo de gramática que se refere à ordem linear do texto. O controle sobre o sintagrama é o controle de escolher a ordem de leitura.
Quando encaramos com um livro, revista, ou folheto, nem sempre começamos pela primeira página e seguimos essa ordem, página por página até ao final. Em vários casos, a ordem de leitura é determinada pelo leitor, que toma o controle da ordem da informação. Por isso utilizar o tema sintagrama do leitor. Dependendo do género, do tipo de texto e do conteúdo, graus diferentes de controlo sobre o sintagrama, ou sobre a linearidade do texto são desejados.
Textos puramente lineares são raros. Os textos que nós consideramos lineares são, na verdade, lineares interrompidos arbitrariamente. A tabela exemplifica melhor a natureza das quebras e a que implicações semânticas a que se referem. Twyman (1979) propôs uma relação directa entre a configuração de um dispositivo gráfico e o grau de controlo desejado pelo leitor.

Métodos de configuração de Twymn (1979), com as conjecturadas regras de leitura de Waller (Waller, 1988)

Da Imprensa aos Media Electrónicos

A escrita é uma prática – uma prática para produção manuscrita, correspondência, e depois imprensa. Com a dactilografia, um aspecto da prática da escrita se altera. O processamento de texto é em si próprio uma prática, visto que transforma e amplia a actividade da composição da escrita, da dactilografia e da impressão.
De facto, a passagem a uma outra dimensão da linguagem já está inscrita na lógica da evolução intelectual e tecnológica do nosso tempo. A Internet torna possível um conjunto de novos média – correio electrónico, “blogs” e a “World Wide Web” – cuja natureza é estarem em contínua mudança.
A primeira característica do Internet é ser uma rede “anárquica”, quer dizer que não tem centro nem direcção nem proprietário nem estrutura estabelecida, nem interdições nem administração. A segunda característica é que se trata de um conjunto de bancos de dados que estejam à disposição do público. A terceira característica é que a introdução do WWW permitiu, a partir de 1992, organizar viagens de múltiplos percursos no interior da imensa selva do Internet. Por meio de hipertexto é possível saltar de uma fonte de informação para outra, de um servidor para outro, de um computador para outro. Quinta característica é que no Internet tudo se realiza “on-line”, portanto em tempo real. Os meios de comunicação da Internet vão do correio electrónico – através de “células” de múltiplos utilizadores (ou MUD´s) – espaços virtuais que permitem manter conversas e simples descrições da acção – ao WWW uma colecção de documentos de hipertexto combinados e registados em rede. Hoje em dia a rede é uma cadeia nervosa com múltiplas sinapses que nenhum humano poderia esperar descobrir. A rede tornou-se um médium porque o acesso à Internet passa pelo modems e por exploradores que não sabem escrever.
A Rede é talvez um dos meios de comunicação que será crucial para a sobrevivência da espécie no século XXI.
Não é difícil encontrar afinidades entre a Internet, com as suas matérias imaterial e as suas miríades de conexões nómadas, multidireccionais e não localizáveis. Este oceano imaterial em que se cruzam imagens sem substância, desdobramentos transitórios que se tecem e se desfazem é a incarnação prática do conceito de multiplicidade, isto é a tradução concreta da ideia de dobra: “Os nós e os laços que constituem a materialidade da Internet a formem um espaço “multidireccional” com estrutura em série. O crescimento da rede faz-se pelas extremidades, de tal modo que a rede se estende de maneira anárquica e linear…o crescimento não segue nenhum plano de arborescência, nenhum projecto, nenhuma autoridade”. A estrutura rizomática da rede aglomera o heterogéneo ao homogéneo, sem poder central nem estrutura predeterminante.
Os livros hoje em dia não são interactivos, podem provocar toda a espécie de reacção dos nossos espíritos; podem fazer-nos rir, chorar, ou praguejar contra eles, mas estão escritos e impressos e as nossas reacções não vão modificá-los. Poderão alguma vez tornar-se interactivos? Sim. O hipertexto é uma forma de livro interactivo, embora o texto ainda tenha sido escrito previamente. “Um texto electrónico destina-se à distribuição ou venda a um público que ultrapassa o seu criador. O texto e o software analítico que com ele pode ser fornecido estão sujeitos ao controlo editorial para garantir a sua integralidade, exactidão e utilização. O texto está depois documentado no que respeita à sua fonte, modificações introduzidas, codificação, ou esquemas de indicadores usados no texto, etc. É depois disponibilizado pelo editor apoio técnico para o texto e software que o acompanha.” (Lowry, 1992).
O livro electrónico existe em forma de códigos electrónicos e não como marcas físicas numa superfície física; é sempre virtual, é sempre um simulacro de que não existe exemplo físico. As implicações que resultam da dupla natureza do livro electrónico são inúmeras: ”O livro já não exerce o mesmo poder que tinha anteriormente, deixou de ser o mestre dos nossos raciocínios ou dos nossos sentimentos face aos novos meios de informação e de comunicação de que hoje em dia dispomos. Em vez de criar uma obra individual que se propaga para atingir um público cada vez mais vasto (unidireccional mente), os “cibernautas” experimentam um outro paradigma de produção cultural que consiste em fazer participar o público nessa produção, sendo uma das finalidades criar verdadeiras comunidades virtuais. A interactividade é doravante o motor de uma nova experiência estética.
O sistema editorial existente pode ser condensado numa cadeia cujos elos se ordenam do seguinte modo: autor – editor – biblioteca – leitor. Quanto à tecnologia da informação, é mais fácil pensá-la em termos operacionais, tais como input – tratamento – disseminação – output. É importante definir o que se entende por um texto electrónico.
A escrita electrónica abrange uma grande variedade de práticas de escrita, nomeadamente processamento de texto e hipertexto, correio electrónico, mensagens e conferências por computador. Em cada um destes casos o computador medeia a relação autor/leitor, alterando as condições básicas da enunciação e recepção do sentido. A escrita electrónica prolonga a tendência iniciada com o manuscrito e a imprensa, mas também subverte a cultura da imprensa. A revolução do nosso presente é, incontestavelmente, maior do que a de Gutenberg.
A revolução provocada pela invenção de Gutenberg concedeu à palavra escrita uma autoridade nunca antes sentida, uma vez que a transmissão manuscrita não podia assegurar ao autor o direito de propriedade que a impressão permitiu. As técnicas de reprodução de textos utilizada pelos monges era um processo bastante lento, pode não ser encarado como um meio de transmissão de informação fidedigno, uma vez que as cópias estavam sujeitas à reorganização do indivíduo responsável pela cópia. (“Quem conta um conto acrescenta um ponto” já dizia o velho ditado popular).
Com o aparecimento da imprensa tornou-se possível reproduzir as obras dos escritores em grande escala, tornando baixo os custos de produção.
Proporciona também a estes autores a capacidade de subsistência através dos direitos de autor com a venda das suas obras. Tornava-se, então, necessário instituir um mecanismo que regulasse o processo compreendido entre o autor e o leitor e que assegurasse os direitos dos autores. Foi então que surgiu o editor, evoluindo até tornar-se indispensável no circuito de ligação entre o escritor e o leitor. O editor obteve a função de acompanhar os autores durante o processo de escrita, coordenando a produção do livro e trabalhar com os designers para desenvolver capas eficientes e apropriadas.

Reprodução Electrónica

Quando um texto encontra-se disponível electronicamente torna-se impossível controlar o número de pessoas que o visualiza ou que faz uma reprodução, verificando este que está ao alcance de qualquer utilizador com um computador e acesso à Internet.
Este problema tem sido discutido e têm sido realizados esforços no sentido de evitar que os autores e as editoras possam vir a ter ainda mais prejuízos aquando da reprodução mecânica. Não alterando apenas a técnica de reprodução do texto, mas alterando também as estruturas e as próprias formas do suporte que o comunica aos leitores. “Com o ecrã, substituto do códex”, a transformação é mais radical, visto que são os modos de organização, de estruturação, de consulta do suporte da escrita que são alterados.
Uma revolução deste género requer portanto outros termos de comparação. No caso do processamento do texto, a facilidade em alterar a escrita digital – a imaterialidade dos signos nos ecrãs em comparação com a tinta sobre a página – desloca o texto de um registo de fixação para uma volatilidade. Além disso esta facilidade de acesso aos textos electrónicos é vista, normalmente, como uma grande vantagem, por outro lado se pensarmos que a circulação de textos de um leitor para outro, de forma incontrolada, pode resultar numa alteração gradual, tal como acontecia na transmissão manuscrita levando a autoria múltipla. Com a escrita electrónica, a distinção entre autor e leitor anula-se surgindo uma nova forma de texto que pode pôr em causa o cânone, e as próprias fronteiras entre as disciplinas.
Actualmente na Internet existe uma inúmera quantidade de sites grátis que sobrevivem através da publicidade, mas existem também já alguns sites que requerem o número de cartão de crédito ou um código secreto para permitir o acesso. As edições em CD-ROM e em linha de Enciclopédias, por exemplo, têm suplantado as edições impressas, uma vez que permitem ao leitor uma leitura bastante mais diversificada (texto, fotografias, vídeos…) e mais interactiva. Esta forma de edição pretende, de certa forma, assegurar os lucros das editoras, já que o utilizador tem de comprar o CD-ROM para ter acesso à versão em linha da Enciclopédia.
O aparecimento da reprodução electrónica trouxe grandes mudanças ao nível do acesso à informação e aos textos, tendo sido criado leis e regulamentação para a transição de textos. Actualmente a regulamentação de produtos físicos é difícil, sendo ainda mais dificil regulamentar as trocas virtuais realizadas através da Internet existindo em Portugal a ASAE (Autoridade de Segurança Alimentar e Económica é o órgão administrativo que regula as actividades económicas e os produtos alimentares em Portugal)

Destruição do “Velho livro”?

Todas as inovações são inicialmente observadas com algum tipo de receio pelas suas consequências futuras, assim foi com a imprensa de Gutenberg e aconteceu o mesmo com o surgimento do computador e da comunicação electrónica.
A problemática actual recai na questão da sobrevivência do livro após o desenvolvimento da revolução electrónica e do aparecimento do hipertexto. Com o aparecimento da Internet, muitos autores ditaram a morte dos textos impressos (livros, revistas, jornais).
Hoje em dia, está destinado a perder o seu domínio como veículo de conhecimento sendo substituído pelo livro electrónico.
Porém, após a popularização da Internet, esta tendência parece não estar a acontecer tal como era esperada. As versões electrónicas de jornais e revistas, por exemplo, não conseguem sobrepor-se ao número de leitores correspondentes das edições impressas.
O atributo “novo” não tem forçosamente de ter uma conotação positiva, enquanto que o atributo “velho” não tem de ser utilizado para caracterizar algo já ultrapassado. Tal forma que nem sempre o “novo” tem de substituir ou anular o “velho”; o aparecimento do “novo” significa uma mudança na evolução do tempo.
Contemporaneamente, já não nos conseguimos imaginar, sem o telemóvel, o computador, sem a Internet e sem o e-mail; o ritmo de vida exige meios de comunicação, de transmissão e conhecimento mais rápidos e mais eficazes. Os meios de comunicação estão em constante desenvolvimento, porém, não significa que possa-se colocar de parte aqueles que fizeram sempre parte do nosso quotidiano.
Com todas as vantagens associadas ao uso do computador e do Hipertexto, o livro não irá extinguir-se, notando que para esta passagem seja necessário reunir um conjunto de condições que ainda não estão disponíveis.
Se o surgimento de um novo meio afectasse a imediata substituição do anterior isso significaria que estávamos sempre dependentes de um único meio.
Desta forma, torna-se muito mais vantajoso para os meios de comunicação e de conhecimento é coexistir, de forma a fornecer uma multiplicidade de recursos.

“ Novo livro electrónico pode ter papel e tinta”

Entrevista a Roger Chartier por Cristiane Costa in JORNAL DO BRASIL (link)

“O senhor não estaria menosprezando a revolução promovida pela informática quando diz que ela nem se compara com a grande revolução do livro, que não foi nem a de Gutenberg, mas a passagem do rolo ao códex?
Certamente a passagem do rolo ao códex foi, até agora, a mais importante, porque transformou dos hábitos de leitura e nos legou o livro tal como o conhecemos. Nesse sentido, as coisas não mudaram muito depois de Gutenberg. Por exemplo: a ideia de um livro com páginas, numeração, índice, capa, surgiu com essa primeira revolução, que também liberou o leitor para escrever ao mesmo tempo em que lê, coisa impossível quando se segurava o rolo com as duas mãos.

Quais as principais mudanças trazidas pelo computador?
São três: a leitura descontínua, a leitura hipertextual e a leitura temática. Na tela do computador, a prática de leitura se organiza geralmente a partir de temas. Os textos electrónicos são consultados mais como banco de dados do que como obra. Com isso, há uma tendência à fragmentação, porque perde-se a referência à obra completa, como início, meio e fim. Outra coisa interessante desse suporte é o hipertexto, que oferece a oportunidade para o leitor de romper com a ordem sequencial do texto impresso e praticar uma leitura particular, que continuamente introduz textos dentro de outros textos. Com isso, a leitura de um texto de história, por exemplo, pode transformar-se totalmente. O leitor pode consultar documentos digitalizados, conferindo as notas do autor com as próprias fontes.

Em quanto tempo o senhor acredita que a informática seja capaz de produzir um livro electrónico perfeito? Como ele seria?
A questão diz respeito ao suporte, ao objecto em que se transmite o texto. Actualmente, o livro electrónico não é um livro, mas um computador. Como tal, ele vem correspondendo bem aos textos de natureza enciclopédica, que supõem uma leitura fragmentada, já que não foram feitos para se ler da primeira página até a última. Há uma adequação perfeita do suporte a este tipo de livro e, por isso, algumas enciclopédias, como a Britânica, não conhecem mais a edição impressa. Mas, para romances e ensaios, em que se supõe uma leitura mais contínua, é preciso aquele tipo de livro que possa ser levado para todo lugar, para a mesa, para a cama, para o jardim. Se cai um livro, não há problema, se cai um computador…

Mas o lançamento do E-Paper pode mudar esse cenário, não?
Sem dúvida. Pela primeira vez seria possível desvincular a difusão do texto electrónico da tela do computador. Com o papel electrónico e a tinta electrónica, seria possível utilizar qualquer suporte para transmitir e recarregar um texto. Uma vez carregado, o papel poderia ser usado num livro, numa parede, numa roupa. Seria uma revolução profunda. Em vez de ser jogado fora ou guardado numa biblioteca, o livro seria simplesmente recarregado. Encontrei os pesquisadores do MIT que inventaram essa tecnologia e o mais interessante é que seu objectivo é recuperar a forma do livro tal como a conhecemos, – com páginas para folhear, por exemplo – de maneira que não se quebrem velhos hábitos de leitura. Um livro feito com papel e tinta, ainda que electrónicos. ”

Hipermédia

A tradição do manuscrito, que continua a ser o modelo para os livros impressos, não tinha sido verdadeiramente posta à prova até há cerca de 20 anos, e o mesmo se passou quanto às convenções da linguagem inerentes a esta tradição. O poder do livro provém da sua plena integração numa infra-estrutura cultural e social (escolas, universidades, bibliotecas públicas, etc.). A introdução bem sucedida da hipermédia na sociedade também se deve ao facto de a tecnologia que a suporta estar totalmente integrada numa infra-estrutura cultural e social.
A tradição manuscrita da linguagem e do conhecimento foi posta em causa devido à existência da hipermédia.
O confronto é entre a história singular do manuscrito e a tradição do livro, que nos trouxeram ao ponto em que estamos agora, e a durabilidade incerta da hipermédia, que talvez nos leve a algum lado futuramente.
O aspecto especulativo da hipermédia foi o que a tornou tão atraente de início. Rejeitar o livro e adoptar a hipermédia (este cenário puro e duro, limitado a duas opções, é a posição típica perante o advento de uma nova tecnologia) transforma alguns em aventureiros, futuristas e ousados que arriscam e os restantes em opositores ao progresso tecnológico. Para alguém emocionalmente envolvido na vertente criativa da comunicação visual, as primeiras conotações atrás enumeradas são muito atractivas.
O debate sobre o livro/hipermédia oferece uma oportunidade de ouro aos sociólogos, psicólogos, informaticos, artistas e designers de todas as áreas especializadas de se envolverem. A hipermédia desempenha bem o papel de aglutinador destes diversos grupos de pessoas. Assim, a hipermédia influencia certamente os processos complementares através dos quais o conhecimento é transferido e armazenado.
A primeira reacção a qualquer desafio ao meio vigente e dominante é recusar esse desafio. Porém, a história dos média em geral e da tipografia em particular tem demonstrado que cada meio encontrou, através da procura por parte do público, o seu nicho adequado. Nos tempos que correm, a hipermédia ainda está nos seus primórdios. Na tentativa de se insinuar plenamente, o mais rapidamente possível, na infra-estrutura cultural da sociedade, foi demasiadas vezes concebida — de novo através da procura por parte do público — para funcionar com as convenções cómodas do livro. Mas muitos tipógrafos estão cientes de que a hipermédia, continuara a imitar o livro, não escapará às limitações do livro.
Os estudos comprovam que a maioria dos tipógrafos trabalha tanto com o suporte impresso como com o ecrã, o que não surpreende, visto a tipografia continuar a ser o principal meio de comunicação em ambos os casos.
Sem dúvida que a hipermédia é, actualmente, apenas uma fracção do que será no futuro e pode demorar décadas a metamorfosear-se integralmente na sua expressão visual independente. A linguagem é, globalmente, muito convencional e, em grande parte, é assim que tem de ser para uma sociedade complexa funcionar.
Porém, a sociedade também está ciente das limitações impostas pelas convenções. Isto está implícito, por exemplo, no facto de artistas, poetas e actores serem convidados a contornar e até a desdenhar as normas que moldam estas convenções.
É este tipo de actividade criativa, através da qual a hipermédia pode propiciar novas perspectivas da linguagem, que irá requerer, por sua vez, novas visões da tipografia.

Caracteres Tipográficos no ecrã

Apesar das diferenças óbvias entre papel e ecrã, alguns dos conhecimentos pertinentes de que dispomos são transponíveis para a tecnologia mais recente. Sem dúvida que os princípios gerais do design, como a coerência, a hierarquia e a organização da apresentação gráfica e, claro, os conceitos de legibilidade e facilidade de leitura continuam a ser adoptados nos dois casos.
Mas no que respeita a questões como a facilidade de leitura, com a legibilidade veio a saber-se que os tipos de letra que resultam bem no papel também resultam bem no ecrã, as opiniões divergem muito e, até agora, ainda não se chegou a um consenso sobre estas matérias.
Estudaram-se os elementos ergonómicos básicos dos ecrãs para tentar explicar as diferenças entre a velocidade de leitura no papel e no ecrã. Os textos que se destinam a ser usados num monitor talvez devam ser sucintos e conter uma hierarquia clara, frases mais curtas e muitos intervalos visuais, para contrabalançar os factores ergonómicos bastante imperfeitos. Quando se apresentam letras de cor preta sobre um fundo branco num ecrã luminoso, o brilho deste tem tendência para «modificar» a forma dos caracteres, fazendo-os parecer mais pequenos e, com efeito, perder definição. Não é difícil minimizar estes problemas e em muitas páginas web os textos são colocados sobre fundos de outras cores que não o branco e recorre-se a fontes mais «vigorosas» para o material textual.
Os psicólogos ou os investigadores que estudam a visão estão interessados em identificar as variantes que explicam as diferenças, por exemplo, na velocidade de leitura. Porém, o tipógrafo sabe que a modificação de uma variante (p. ex., o tamanho do tipo) terá de ser complementada por outras alterações para contrabalançar (p. ex., aumentar ou diminuir uma medida, o espaçamento entre linhas). Mas embora as conclusões dos estudos possam não se apoiar nos conhecimentos dos tipógrafos, é possível que confirmem os fundamentos em que a boa prática se deve basear.
Desde a década de 1980, a natureza dos textos e caracteres tipográficos mudaram consideravelmente. À medida que a tecnologia evoluiu, os nossos padrões estéticos também mudaram. A nossa experiência quotidiana típica com textos e caracteres tipográficos é inegavelmente mais vasta, tanto em termos de estilo como de disposição/configuração da página e, também, quanto ao meio em que surgem: papel, fax, e-mail, a World Wide Web.
É surpreendente que ainda não se tenha feito qualquer investigação de fundo sobre os efeitos das novas tecnologias na facilidade de leitura. Uma das razões para a perda de interesse pela legibilidade e a facilidade de leitura, talvez seja o desaparecimento da sua evidente importância. Se actualmente fossem efectuados estudos semelhantes aos anteriores, seria provável que não se constatassem diferenças quanto à percepção da legibilidade e da facilidade de leitura, dado que os nossos hábitos de leitura mudaram muito.
Certamente que a utilização difusa de informação no ecrã, bem como o crescente uso de linguagem abreviada, contracções e outros dispositivos para poupar espaço, sugerem uma abundância prejudicial de material para potenciais pesquisas. Sarcasticamente, é provável que a rapidez das mudanças tecnológicas e a variedade de meios disponíveis hoje em dia para se receber/enviar texto desmotivem a investigação relativa aos efeitos da utilização das tecnologias electrónica e digital sobre a facilidade de leitura.

Legibilidade no ecrã

Os longos textos no ecrã devem ter a cor bastante contrastada em relação à cor do fundo, para facilitar a leitura. Por exemplo: texto preto sobre fundo branco ou levemente amarelado. Os textos sobre fundos verdes ou vermelhos podem comprometer a leitura por usuários com dificuldades de distingui-las (como exemplo os daltónicos).
O tamanho da fonte deve ser legível em monitores pequenos e médios – Embora algumas estatísticas apontem que os usuários lêem mais os textos longos configurados em tamanhos menores.
A formatação de textos importantes em HTML (e não como imagem) permite que sejam ajustáveis e relacionar-lhes (hiperligações) – Pessoas com córneas menos flexíveis e menos sensibilidade à luz, têm dificuldade de ler letras pequenas e devem poder configurar os textos para tamanhos mais confortáveis.
A estrutura visual das páginas deve se manter compreensível mesmo que o usuário ajuste o tamanho da letra para poder ler mais facilmente.
A resolução dos computadores pessoais (PC’s) pode ir de 72 a 96 dpi, diferente dos livros impressos, por exemplo, em que as resoluções vão de 1.200 a 2.400 dpi (dots per inch, pontos por polegada), o que garante uma boa definição dos contornos das letras.
A baixa resolução do monitor faz com que a leitura de textos fique 25% mais lenta do que a leitura sobre papel impresso e o uso apropriado de famílias de tipologias aumenta a legibilidade dos textos não só em computadores mas em diversos dispositivos digitais. Ajudando também a reforçar a confiança e a credibilidade no conteúdo, evidenciando a adequação da identidade visual, bem como as áreas de maior ou menor destaque editorial/comercial, os diferentes elementos da interface.
A maioria dos usuários (79%) não lê as páginas completas; é o efeito flash; eles passam velozmente pelos componentes mais destacados, tratando de seleccionar umas poucas orações e fragmentos delas, para obter a informação desejada.

Melhorar a legibilidade on-line

• Use cores que contrastem as letras com o fundo. Usualmente, o melhor é o texto em preto sobre um fundo branco ou claro (chamado, texto em positivo); ou texto claro com fundo negro (chamado texto em negativo). Ambos os esquemas têm igual legibilidade, e o segundo atrai mais a atenção dos leitores por ser menos usual.
• Reduza o uso de fundos, ou se usar, que sejam bem suaves. Os fundos interferem com a capacidade dos olhos de distinguir as letras e a legibilidade da leitura.
• Use um tamanho de letra que as pessoas possam ler claramente. Deixe a letra pequena para advertências legais, bibliografia, notas no rodapé, etc.
• Utilize texto estático: o texto em movimento a piscar, ou que muda de tamanho tem uma leitura mais difícil.
• Alinhe o texto à esquerda para ter um ponto fixo para começar a leitura; o olho se move mais rapidamente.
• Margens largas podem dar a impressão de leveza, enquanto margens apertadas podem dar a impressão de que há pouco espaço disponível para muito conteúdo.
• Em função da qualidade actual, a legibilidade é melhor nos tipos de letra Sans Serif (Verdana, Arial, etc.). Por outro lado, as pessoas estão acostumadas a leitura de letras Serif.
• NÃO ESCREVA TODO O TEXTO EM MAIUSCULAS, a leitura é 10% mais lenta, já que o cérebro tem menos capacidade de distinguir as letras.
• A medida da coluna de texto influencia a velocidade de leitura, mas não a facilidade de compreensão do texto, textos com 95 caracteres por linha permitem a leitura mais rápida. A largura da linha não afecta a facilidade de compreensão. Os usuários preferem as linhas mais curtas.

A melhor maneira de escrever para um Sitio Web

Escrever para a web não é necessariamente igual a qualquer outro meio. É necessário que compreendamos a adaptar nossos conteúdos ao leitor da Internet. Ao fazê-lo, não estamos afectando somente a qualidade dos textos que oferecemos, mas também a convivência do usuário no nosso sítio web, já que as estatísticas indicam que o que o usuário vê primeiro numa página web é o texto (especialmente, o texto destacado e os títulos). Para isto devemos considerar alguns factores observados nos estudos sobre o comportamento dos navegantes:

Conselhos para escrever para a web:

• Seja conciso. Reduza o texto em até 50% do que você escreveria para outro meio. Razões: a leitura do monitor é incómoda, os usuários vêem o texto como o piscar de um flash, e não gostam de mover o cursor para ler o que esta abaixo da tela.
• Escreva um texto para o efeito flash, use parágrafos breves, subtítulos com diferentes tamanhos de letra. Destaque as palavras mais importantes. Use negrito, itálico, cores nas letras, porém evite sublinhar (os usuários podem confundir com uma hiperligação). Use com descrição gráficos, figuras e tabelas de conteúdo.
• Hierarquia da informação: use 3 ou 4 níveis de subtítulos
• Os sites apresentando a informação com resumos e conclusões economizam o tempo do usuário. A maior parte dos usuários memoriza o texto lendo somente a primeira oração de cada parágrafo. “Uma ideia por parágrafo” deve ser o objectivo.
• Use linguagem simples, reduza o uso de metáforas e uma linguagem complicada.
• Corrija a ortografia: um erro pode comprometer a seriedade e a imagem do site.
• Faça uso do meio: utilize hiperligações de texto para desmembrar um documento em vários.

Formatar textos para uma boa legibilidade na Web

Os estudos mostram, ler no monitor é mais cansativo do que ler no papel. Não é para menos. O monitor está emitindo luz contra nossos olhos. Por isso, é muito importante pensar em um bom contraste entre a cor das fontes e a cor do fundo da tela. Embora o preto no branco seja aconselhável, cores pastéis para o fundo da tela também são interessantes para agredir menos os olhos.
Além disso, a escolha da fonte é fundamental. O ideal é escolher aquelas que foram desenhadas especialmente para o monitor, como Verdana e Georgia, por exemplo.

Se escolher o tipo é fácil, definir o tamanho da fonte ideal é mais complicado. Ainda vemos muitos sites e sistemas com fontes mínimos, que fazem o usuário ter que se concentrar para ler. O ideal é sempre procurar simplificar a vida do usuário, ou seja, usar fontes de bom tamanho (cerca de 12 pixeis) e permitir que ele possa redimensioná-la a gosto.
A forma de escrever o texto também é específica e difere muito da escrita para papel. Os textos justificados, por exemplo, não são bons na web como são nas páginas de um livro. Os parágrafos também têm que ser diferentes: não devem ter o recuo inicial, devem ter uma linha em branco entre eles e devem ser bastante curtos. Uma ideia por parágrafo.
Por fim, é uma estratégia boa procurar destacar as palavras-chaves do texto. Isso pelo fato de os usuários dificilmente ler um conteúdo palavra por palavra. Na maior parte das vezes, eles passam os olhos rapidamente pelo texto procurando aquilo que lhes interessa.

Como Escrever Uma hiperligação

Os maiores problemas na Internet é dos usuários que não sabem quando devem seguir uma hiperligação. Uma hiperligação mal descrita tem poucas possibilidades de ser seguida. Por outro lado, uma boa hiperligação ajuda a reduzir a desorientação.
O objectivo do texto da hiperligação é ajudar o usuário a identificar para onde vai ser desviado. Não devemos usar demasiadas palavras (2 a 4 é o usual). Uma das opções que devemos fazer é seleccionar as palavras mais representativas e evitar o “click aqui”.
Mais vantajoso é incluir o conteúdo adicional ao texto através da hiperligação, por exemplo, usando texto que se mostra ao passar o rato sobre a hiperligação, oferecendo mais informação, não repetindo duas hiperligações para o mesmo site dentro da mesma página.
As hiperligações que são nomes de pessoas devem conduzir ao seu curriculum, e as das empresas ou organizações, ao seu site web.
Para melhorar a usabilidade, não mude a cor das hiperligações a sua cor habitual é o azul.

Nos documentos da Internet há três tipos de hiperligações:

Estruturais ou de navegação: botões a páginas subordinadas, barras, opções.
Associativas: dentro do corpo da mesma página. Desviam para outros pontos dentro do mesmo documento, em outros documentos, ou a páginas externas.
Referencial: um conjunto de hiperligações que conduzem a temas relacionados. Usualmente colocados em uma tabela próxima a informação principal.

Multimédia

O uso de multimédia (som, animação, imagens) ajuda na qualidade e navegação do site. Tenha sempre em conta que o usuário valoriza a velocidade.
As imagens aliviam a visão, e oferecem uma informação muito melhor, o tamanho da imagem deve estar relacionada com o volume de informação que contém a principal função das imagens, como ferramentas de comunicação, é servir como uma referência mais concreta ao significado. Normalmente, as imagens assemelham-se aos objectos que eles representam.
Um factor fundamental entre os diferentes tipos de imagens é o seu grau de realismo. Nenhum formato de média é totalmente realístico. Os objectos e eventos reais sempre têm aspectos que não podem ser capturados em fotografias, desenhos ou mesmo em filmes. Porém o maior grau de realismo nem sempre ajuda na aprendizagem. Há estudos que mostram que, em certas circunstâncias, realismo pode até mesmo atrapalhar o processo de aprendizagem.
Ofereça versões ampliadas (ou “pesadas”) quando realmente vale a pena (ex. imagem de microscópio).
As animações chamam a atenção do navegante, porém podem ser extremamente lentas.

Em baixo veja alguns usos básicos de animação:

• Mostrar transições: usado para indicar mudanças de estado (ex.: passagem do estado liquido para o gasoso).
• Indicar a dimensionalidade: por exemplo, fazer zoom.
• Ilustrar mudanças com o tempo: ex. A evolução da contaminação de um rio com o tempo.
• Mostrar vários tipos de informação por vez: por exemplo, a medida que se selecciona um ponto num mapa são mostrados os lugares de interesse.
• Enriquecer uma representação gráfica: ex. Ícones que indicam acções, ou como enviar um e-mail.
• Mostrar estruturas tridimensionais: ex.: estrutura de uma casa.

O som deve complementar, e não competir com a informação na tela.
Devemos certificar-nos que ele reforça o conteúdo, mas não é o único formato para apresentá-lo. Essa orientação, não só colabora para enriquecer a oferta da informação, como também previne que aqueles usuários que não têm o recurso para ouvir som, ou não querem utilizá-lo.
Quanto ao vídeo, pode ser um recurso poderoso num programa multimédia. Ele adiciona realismo e permite demonstrações que as animações e imagens estáticas nunca poderão substituir, como a erupção de um vulcão, por exemplo. Eles também podem oferecer um contexto significativo para a aprendizagem. Um exemplo seria apresentar aos estudantes um segmento de um vídeo de uma situação real e de interesse deles, para em seguida explorá-la em outro formato mais simplificado.

Conclusão

Todas as resoluções encontradas são só indicações para chegarmos a um bom caminho.
Uma das conclusões úteis que se pode tirar é que vários dogmas tipográficos são como etiquetas devendo ter cuidado com os excessivos rios e as quebras de linhas e no caso das serifas e da justificação dos textos, é que parece haver ainda polémica.
David Carson, escreveu:
“Se alguém tivesse que colocar os designers gráficos em categorias, elas seriam três: solucionadores de problemas, estrelas e pragas.

Estrelas, então, são uns indivíduos selectos cuja combinação de circunstâncias os elevou à iluminação profissional. As estrelas normalmente tornam-se o que são através de trabalhos irreverentes que muitos solucionadores de problemas gostariam de ter feito, mas não tiveram a coragem para fazer e vender; e claro; através de uma descarada autoprodução. David Carson, como o britânico Neville Brody e o canadense Bruce Mau, é um membro desse grupo que parece inspirar eternamente alguns enquanto irrita outros.

Pragas, finalmente, são hordas de micreiros cujas proezas em software só são superadas pelo jeito com que pegam leve em certas regras básicas e de senso comum de tipografia e design, cujos solucionadores de problemas resolvem conscientemente e os sacerdotes gostam de quebrar com energia. Pragas formam uma massa escura, melhor ignorada, se não fosse pelo temível prospecto de que eles podem inconscientemente levar-nos um passo mais perto do design virtual e de Maclayouts.”

O grande problema é as pragas (os artistas), porque estes dominam as ferramentas de trabalho, podendo-se enganar, copiar e mesmo dizer que foi feito por eles sem terem as mínimas noções do que é Design nem cuidados com o utilizador.

As maiorias das pesquisas estão datadas no século passado e se prestamos atenção as coisas impressas, sites e letras que nos rodeiam, verificam que muitas delas faltam com os princípios básicos de usabilidade.
As pesquisas científicas a este campo viriam trazer muita informação útil que deveria ser ensinada nas escolas e faculdades de design.
A contemporaneidade, de mudança de meios e de tecnologia de apresentação, propriamente dito a Internet, traz um motivo acrescido a essas questões. Visto que a informação é transmitira gratuitamente e viabilizada dessa maneira.
Adicionando ao caso a leitura num monitor de computador é precária, cansativa e problemática. O tempo que passamos à frente de um monitor prejudica os nossos olhos, a nossa postura na cadeira, somando o barulho do computado e o ambiente que rodeia normalmente oferece mas condições de leitura acarreta consequências drásticas.
Um dos aspectos que é precoce chegar a uma conclusão é se o livro deixará de fazer parte do nosso quotidiano? Ou apenas, parte de uma memória.
Este crescente domínio das tecnologias trouxe alterações ao acesso do conhecimento, como ao nível da reprodução de textos, verificando as vantagens e desvantagens na passagem do livro para o computador.
A melhor forma de arrematar este trabalho é espera que o livro e o computador possam coexistir, pois a multiplicidade beneficia sempre mais que a unidade e o domínio de um recurso acaba com a morte da variedade.
O livro tipográfico torna-se presencial para o texto e o seu autor, coloca-mos na nossa mesinha da cabeceira, levamos para as ferias, falamos com um livro, independentemente de nos ouvir ou entender.
Cada livro, da primeira a ultima página, abranja, um pequeno mundo frágil e presente dando-nos o conhecimento.

Bibliografia

Cebular, Gregory (s/d): “Internet as a Mass Medium”, in
<http://oak.cats.ohiou.edu/~gc431997/tdgac.htm> (acesso: 26 Dezembro 2007)

Costa, Cristiane (2001): ”Novo livro eletrônico pode ter papel e tinta” in <http://jbonline.terra.com.br/destaques/bienal/entrevista1.html> (acesso: 28 Dezembro 2007)

Mourão, José Augusto (2001): “Passagens”, “Da Imprensa aos Media Electrónicos” e “O que é o hipertexto?”, in <http://www.triplov.com/hipert/passag.htm>, <http://www.triplov.com/hipert/imprensa.htm> (acesso:30 Dezembro de 2007)

Avellar e Duarte Consultoria e Design (2005): “Legibilidade em tela”, in <http://www.avellareduarte.com.br/projeto/conteudo/textos/textos1g.htm> (30 Dezembro 2007)

Palomino, Luis: “Texto de papel vs. digital” in
<http://blog.pucp.edu.pe/item/13721> (Acesso 4 Janeiro 2008)

Pinto, Cláudia M. J. (2004): “Do androids dream of electronic books? “, in
<http://www1.ci.uc.pt/diglit/DigLit%20Ensaios/Ensaios%202003-2004/Ensaio19.htm> (acesso 21Dezembro)

Cardoso, Cláudio (18/05/97): “Notas Sobre a Geografia do Ciberespaço”, in <http://www.facom.ufba.br/pretextos/claudio3.html>, (acesso: 4 Janeiro 2007)

Marques, José (3/12/07):” Do androids dream of electronic books?” in
<http://becrevs.blogspot.com/2007/12/do-androids-dream-of-electronic-books.html> (acesso 28 Dezembro 2007)

Artigos relacionados:

1. Como desenhar um Ícone de Ficheiro Neste tutorial vamos aprender a desenhar um ícone de tipo de ficheiro no Photoshop...

Neste tutorial vamos aprender a desenhar um ícone muito simples no Photoshop – um ícone de tipo de ficheiro:

Cliquem na imagem para aumentar

Sim, estes ícones, além de mostrarem rapidamente qual o tipo de ficheiro em causa (e por vezes o programa), são também atractivos visualmente e legíveis em tamanhos pequenos quando têm o pequeno rectângulo com o nome do tipo de ficheiro escrito a branco.

Como eu já disse, isto é muito simples para quem já costuma usar o Photoshop, por isso este tutorial é mais para os principiantes.

Passo 1 – Novo Documento

Vamos começar por abrir o Photoshop e criar um documento com 256px de altura e largura (este é o tamanho máximo de um ícone do Windows – e mesmo este tamanho só é suportado no Windows Vista e seguintes.. Se o vosso projecto requer que o ícone seja usado em versões anteriores do Windows ou em tamanhos inferiores, não se preocupem: ao converter de imagem para ícone no final, vamos criar um com as várias resoluções permitidas)

Para podermos ver como o ícone está a ficar no tamanho final dele, vamos ao menu Window>Arrange>New window for [o nosso ficheiro].. Isto vai abrir uma nova janela no Photoshop com a mesma imagem.. Vamos colocá-la num canto do ecrâ onde não vá perturbar e podemos trabalhar na imagem principal com zoom e ver como está a ficar nesta =D

Nota: Não se esqueçam de seleccionar a imagem principal, para que as alterações todas que fizerem sejam feitas nessa

Passo 2 – Página do Ficheiro

Criem uma nova layer e vamos pegar na Pen Tool (P), no modo Shape Layers:

Vamos ao menu View>Show>Grid para aparecer a grelha e podermos desenhar melhor a nossa página..

Agora vamos criar um ponto na imagem que vai ser o canto inferior esquerdo da nossa página e depois o direito e depois o superior direito:

E agora vamos colocar o ponto seguinte de forma a ficar com a dobra no canto da página e o canto superior esquerdo e finalizar a shape:

Agora podemos esconder a grelha, porque já não vai ser necessária. Vamos pressionar Ctrl+A para seleccionar tudo e usar os botões na barra de cima para centrar a nossa layer na imagem:

Ok.. Se acharem que a vossa página precisa de alguma alteração, é melhor alterarem agora. Se quiserem tornar a página mais larga ou mais alta, usem a Direct Selection Tool para editar os pontos da shape e não “estiquem” a imagem, porque o canto ia ficar distorcido em cima. Façam a página ocupar quase todo o espaço da imagem, mas não se esqueçam que vai haver uma sombra a toda a volta:

Agora dupliquem esta layer e criem uma nova layer por baixo das duas e preencham com branco.

Agora seleccionem a layer que está acima de todas, e diminuam a sua Opacity para cerca de 30% e depois seleccionem a que está abaixo dessa e pressionem Ctrl+E para misturar a layer actual com a inferior:

Agora com a layer do meio seleccionada, vamos ao menu Filters>Blur>Gaussian Blur e vamos usar um valor de cerca de 9px:

Agora vamos abrir os Levels (Ctrl+L) e vamos arrastar os nodes branco e preto para o centro de modo que a nossa forma fique o mais próxima à original possivel (do lado de dentro):

Quando estiver assim, pressionem Ok.. Vamos agora usar uma sequência de atalhos para remover o branco desta layer e ficarmos apenas com o preto:

Ctrl+A > Ctrl+C > Q > Ctrl+V > Q >Del

Normalmente ainda fica um pouco de cinzento depois de usar estes atalhos, por isso vamos abrir os Levels outra vez e alterar o node branco do Output Levels para o lado esquerdo para transformar todo o branco na imagem em preto:

Ok.. O canto da folha já está credível, mas os outros três cantos estão redondos, por isso, vamos clicar na máscara da layer de cima enquanto pressionamos Ctrl para criar uma selecção com aquela forma. Agora seleccionamos de novo a layer do meio, e com um pincel, vamos pintar de preto os cantos da página dentro da selecção para ficarem quadrados (excepto o superior direito, claro):

Ok, agora, quem quiser, pode transformar os pontos da layer de cima para ficar igual à de baixo, o que ia tornar a imagem melhor para redimensionamentos, mas eu vou só eliminar a de cima e ficar com a do canto redondo.

Vamos agora alterar o nome da layer para “Página” e vamos clicar duas vezes nela para abrir a janela dos Layer Styles e adicionar um Gradient Overlay. Cliquem na barra do gradiente para abrir a janela de editar gradientes e alterem os valores para as cores que quiserem.. eu escolhi #7da600 e #bbf900:

E as propriedades do gradiente (ponham a cor mais clara no canto superior esquerdo):

Agora vamos adicionar uma Drop Shadow à folha:

E pronto.. A nossa página já está =D

Passo 3 – Canto dobrado

Agora vamos desenhar o canto dobrado da folha..

Com a Pen Tool, criamos outra layer e vamos criar esta forma (diminuam a Opacity para poderem ver onde estão os pontos):

Agora vamos, na mesma com a Pen Tool e pressionando Alt clicar nos pontos e arrastar para os transformar em curvas. Vamos usar isto nos dois pontos que estão mais próximos das extremidades da folha:

Se for necessário, movam os pontos até ficarem da melhor forma possível.. Eu acho que preciso de alinhar mais os pontos com a curva da folha. Lembrem-se que a curva tem que ser contínua assim (não façam como nos da Adobe, que não se percebe se a folha de papel está dobrada ou não..):

Depois de ajustar ficou assim:

Agora vamos clicar na layer Página a pressionar Ctrl para ficarmos com a selecção e depois com a layer do canto seleccionada, vamos pressionar o botão Add Layer Mask (está na lista das Layers em baixo). Isto vai fazer com que a forma que criamos só seja visível dentro da página.

Pressionem o botão direito do rato na layer e pressionem Rasterize Layer e depois novamente botão direito do rato na máscara e Apply Layer Mask.

Agora vamos aumentar de volta a Opacity para 100% e vamos clicar duas vezes na layer para abrir os Layer Styles e vamos também adicionar um Gradient Overlay..

Desta vez, vamos pôr o Angle a –151º e vamos abrir o Gradient para alterarmos as cores para cores mais parecidas com as da página. Eu usei para a parte mais clara a cor mais clara da página (canto superior esquerdo) e no gráfico clareei um pouco, e para a cor mais escura, fiz o mesmo: fui buscar a cor mais escura da página e escureci até ficar óptimo.

Agora é só pressionar Ok e alterar o Scale até ficar realista:

Vamos agora ao Bevel and Emboss:

Cliquem na imagem para aumentar

E vamos aceitar as alterações. Que tal? Já só falta a sombra. Temos que nos dedicar sempre ás sombras, porque elas é que tornam uma coisa realista ou não.

Se notarem, nas imagens 3D, quase sempre nota-se que é falsa porque as sombras não são realistas o suficiente. As sombras são nítidas e escuras perto no objecto que causa a sombra e desfocadas e transparentes longe.

Vamos duplicar a layer e à que ficar em baixo, vamos pressionar o botão direito do rato e Clear Layer Styles. Agora com a Move Tool (V) vamos clicar num dos pontos que estão nos cantos do rectângulo e depois pressionar o botão direito do rato dentro do rectângulo e escolher Warp. Esta é a minha forma favorita de criar sombras no Photoshop e se vocês já viram outros dos meus tutoriais, verão que já usei isto várias vezes =D

Agora, sabendo que a fonte de luz é acima do canto superior esquerdo, vamos alterar esta layer para passar a ser a sombra:

Agora vamos aceitar as alterações na barra em cima e vamos buscar a Blur Tool. Usem um pincel suave de cerca de 35px e desfoquem só a ponta da sombra (cliquem várias vezes com o pincel ligeiramente afastado do local a desfocar):

E agora vamos clicar no botão de Add Layer Mask e vamos premir Ctrl+I para inverter a máscara e pô-la a preto e vamos com um pincel suave de cerca de 65px e com cor branca, cliquem uma vez nesta zona, para a imagem ficar assim:

E pronto, a sombra está (apaguem qualquer defeito na sombra que esteja a mais). Próximo passo:

Passo 4 – Etiqueta

Vamos agora fazer o rectângulo com o texto.

Criem uma nova layer acima de todas e com a Text Tool, escrevam o tipo de ficheiro para o qual querem o ícone. Eu vou usar o ícone para os meus SVG’s, por isso escrevi SVG na fonte Arial em Bold, tamanho 40 e a branco:

Vamos agora criar uma nova layer abaixo do texto e buscar a Rounded Rectangle Tool para desenhar um rectângulo que vai ficar atrás do texto:

Agora vamos alterar os Layer Styles deste rectângulo. Podem usar qualquer estilo e cor que gostem, mas lembrem-se: a intenção aqui é que o texto branco seja legível mesmo em pequeno, por isso a cor deste rectângulo tem que dar contraste.

Eu pus um pouco de Bevel e um Gradient Overlay:

E Vou também adicionar uma Drop Shadow parecida com a da página:

E está pronto.

Passo 5 – Conteúdo da página

Agora é só inserir algum conteúdo no centro da página.. Pode ser o logo do programa que vai usar o ficheiro, algum ícone relativo ao tipo de ficheiro ou outra coisa. Eu para o meu, desenhei uma coisa rápida no Inkscape:

Foi só o texto SVG igual ao do Photoshop e vários traços distribuídos para dar estilo =D

Adicionem a imagem que vão usar ao centro da página e adaptem até ficar o melhor possível:

Agora, é só gravar o ficheiro como .PNG (não se esqueçam de esconder o fundo para não aparecer o fundo em branco) e abri-lo no IcoFX para converter para ícone, podem ver como fazer isso aqui.

Espero que tenham gostado e até à próxima =D Webtutoriais:3F9C5F0A

Artigos relacionados:

1. Como fazer um wallpaper estilo blueprint no Inkscape Vamos aprender a fazer um wallpaper com um desenho técnico de um carro no Inkscape...

Por isso, neste tutorial vamos aprender a dar mais interesse a uma foto fraca para a fazer parecer uma foto melhor =D

Passo 1 – Obter uma Foto

Bem, para este tutorial, vamos precisar de uma foto mesmo fraca, por isso aproveitei para tirar uma foto à praia de espinho com o telemóvel.

É uma foto de 5 Megapixéis, o que significa que a altura da imagem em pixéis multiplicada pela largura em pixéis dá um valor acima de 5 milhões de pixéis.. Neste caso, a foto tem 1.944 pixéis de altura e 2.592 de largura, o que dá 5.038.848..

Lembrem-se sempre que ao escolher uma câmara, não importa apenas o valor dos megapixéis.. No caso dos telemóveis, eles podem ter um sensor de 5MP, mas as lentes são muito fracas devido ao pouco espaço disponível e aos preços de lentes boas, por isso são fotos quase sempre de baixa qualidade e com muito ruído..

Ok, voltemos ao tutorial..

Esta é a foto que vamos usar:

Cliquem com o botão direito do rato e Guardar Destino Como para guardar a foto no tamanho original

Vêem como parece pálida e desinteressante?

Vamos agora abrir o nosso amigo Photoshop e arrastar a foto lá para dentro

Passo 2 – Eliminar Partes Indesejadas

Se notarem, vemos alguns objectos na imagem que não ficam bem, por isso vamos apagá-los, para isso pegamos na Clone Stamp Tool (S) e vamos com o botão direito do rato na imagem, escolher um pincel suave de 65px. Agora vamos copiar desta zona para esta:

Para isso, pressionem a tecla Alt e cliquem na zona que querem copiar e larguem o Alt. Agora é só pôr o rato no lugar certo da área a substituir (parem com o rato lá em cima e ele mostra como vai ficar) e cliquem e arrastem o rato de forma a substituir tudo o que estiver a mais. Se for preciso clicar várias vezes até apagar uma zona, não há problema. Vejam como ficou:

Até copiei a onda que está à direita para aquela zona não ficar tão monótona.

Agora vamos fazer isto para apagar todas as zonas indesejadas:

Cliquem na imagem para aumentar

E o resultado fica assim:

Passo 3 – Todos gostam de Contraste

Vamos agora ao menu Image>Adjustments>Brightness/Contrast e vamos aumentar o contraste da imagem. O contraste é a diferença entre as cores claras e as escuras na imagem.. Se nós aumentarmos, ele vai escurecer as partes escuras e clarear as claras para aumentar essa diferença.. Normalmente, ao aumentar o contraste, a imagem fica mais escura, por isso aumentamos o brilho (Brightness) para contrabalançar.. Usem a gosto. Eu pus assim:

O nosso cérebro adora contraste, se nós pusermos uma foto aborrecida (como a original) ao lado de uma com grande contraste (como esta) somos muito mais atraídos para esta =D

Passo 4 – Vignette

Bem, este passo é completamente opcional.. Algumas câmaras têm lentes que nas fotos, captam sombra dos suportes das lentes, o que faz ficar uma sombra nos quatro cantos da imagem, a esse efeito chama-se Vignetting.. Este efeito não fica bem em todas as imagens, mas esta bem que pode ganhar qualquer coisa com isto..

Vamos ao menu Filter>Distort>Lens Correction e abre uma janela nova com várias opções.. Este filtro serve para anular algumas distorções causadas pelas lentes das câmaras, mas podemos também usá-lo para adicionar essas distorções – incluindo a nossa vignette.

Podem clicar em baixo na opção de Show Grid para a esconder e vamos a Vignette e vamos diminuir o Amount até ao valor que gostarem mais.. Eu usei –54 no Amount e +27 no Midpoint.

Se quiserem brincar com as outras opções, estejam à vontade, é assim que se aprende =D

Passo 5 – Ajustar Cores

Este passo também é opcional uma vez que nesta foto não vai adiantar muito, mas em algumas fotos ajuda imenso.

Vamos à lista das Layers e vamos clicar no botão em baixo que diz Create New Fill or Adjustment Layer. No menu que aparece, escolham Hue/Saturation.

Nós podíamos fazer isto através do menu Image>Adjustments>Hue/Saturation, mas aí, as alterações que fizéssemos seriam definitivas, enquanto que assim, podemos voltar a editá-las ou apagá-las.

Na janela que apareceu, podemos alterar as cores da imagem, a sua intensidade e ainda a luminosidade. Podem alterar para ver os efeitos, mas o que normalmente é mais útil é alterar a opção Master para o grupo de cor que queremos alterar..

Neste caso podemos achar que a areia da praia está com a cor muito forte. então fazemos assim:

De que cor é a areia aqui na imagem?

Amarelo e um pouco Vermelho

Então alteramos o Master para Yellows (amarelos) e vamos diminuir a Saturation. Devem conseguir ver logo a areia a ficar mais cinzenta.. Escolham um valor que achem bem e vamos agora alterar o Yellows para Reds (vermelhos) e diminuir um pouco também. Podem fechar a janela do Hue/Saturation.

O que acham agora da imagem? Está muito mais desinteressante e deprimente que antes, não é? Então simplesmente seleccionamos a layer Hue/Saturation e diminuimos a sua Opacity ou apagamos mesmo a layer.

E voilá, já está a nossa foto digna de um álbum, vejam a diferença:

Foto Original

Foto Final

Espero que tenham gostado e que tenham aprendido qualquer coisa e até à próxima =D Webtutoriais:18D793D8

Artigos relacionados:

1. Como desenhar um Ícone de Ficheiro Neste tutorial vamos aprender a desenhar um ícone de tipo de ficheiro no Photoshop...

Para isto, precisamos de duas coisas: uma foto do carro que queremos e o logo da marca do carro.

Eu escolhi o Mazda Kazamai porque mostra de forma muito nítida a espectacular nova política de design Nagare da Mazda. Podem obter a foto que vamos usar aqui e o logo da Mazda obti no site BrandsOfTheWorld, mas vem em formato EPS, por isso converti-o para podermos usar no Inkscape e podem obter o ficheiro convertido aqui.

1 – Novo Ficheiro

Abram o Inkscape e pressionem Ctrl+Shift+D para abrir as configurações do ficheiro. Vamos alterar a dimensão da imagem para 1920x1200px:

Vamos agora fechar esta janela e arrastar a foto para a imagem..

Rodem a roda do rato para fazerem zoom e pressionem a roda enquanto movem o rato para se moverem pela imagem.

2 – Dar rodas ao nosso Mazda

Vamos pegar na ferramenta dos círculos:

E vamos criar um círculo que vai ser a roda traseira do carro (pressionem a tecla Ctrl para criarem um círculo perfeito em vez de uma elipse):

Assim não se percebe muito bem se a roda está bem feita ou não, por isso vamos tirar-lhe o preenchimento e adicionar-lhe um traço.

Vamos ao canto inferior esquerdo da janela do Inkscape e vamos clicar duas vezes no rectângulo preto que representa a cor do preenchimento da forma:

Isto vai abrir uma barra lateral com as opções de preenchimento do objecto seleccionado.. Cliquem no X para tirar o preenchimento.

E agora vamos a Pintura de Traço e vamos escolher a cor branca:

(É só pressionar o botão do rato no interior do triângulo e arrastar até à zona branca)

Vamos agora à secção Estilo de Traço e vamos alterar para as que tenho aqui (depois quando quiserem, aconselho a experimentarem as várias opções aqui para verem o que cada uma faz e vão ver a utilidade de cada uma delas):

Vamos agora buscar a ferramenta de selecção:

E vamos desactivar este botão na barra de cima do Inkscape do lado direito (só o primeiro):

Agora vou posicionar o círculo o melhor possível na roda e redimensioná-lo se necessário até combinar com a foto. E, com o círculo seleccionado, vamos pressionar o botão de duplicar:

E ao novo círculo vamos redimensionar pressionando Ctrl e Shift até ficar do tamanho da jante:

2.5 – Alinhar a foto

Agora vamos seleccionar os dois círculos, duplicá-los e mover os novos para a roda da frente pressionando Ctrl para ficarem perfeitamente horizontais (eu sei que não vão ficar bem com a foto, mas vamos já corrigir isso..)

Agora seleccionem a foto, arrastem-na um pouco para baixo e cliquem novamente no interior da foto para alterar os botões de redimensionamento nos cantos para botões de rotação e vamos rodar a foto e movê-la de forma a que as rodas do carro fiquem alinhadas o melhor possível com as que criamos agora:

Ok.. já temos a foto alinhada por isso já podemos passar ao próximo passo

3 – Vectorizar a imagem

Vamos buscar a Bezier Tool:

E vamos começar a traçar a linha exterior do carro.

Para começar é só clicar no local onde vai ficar o primeiro ponto, depois, para os pontos seguintes clica-se e mantém-se o botão pressionado enquanto se move o rato de forma a criarmos a curva pretendida. se quisermos criar um vértice com curva dos dois lados, é só desenhar a curva como fariam normalmente, mas depois de alinharem o primeiro lado da curva, pressionem a tecla Shift para mudar de direcção..

Experimentem já criar formas aleatórias para treinar e vamos começar com o carro =D

Vou começar pela janela de trás: clico para criar um ponto e adiciono outro ponto a meio da curvatura da janela e arrasto o rato para criar uma linha que acompanhe a curva:

Agora largo o botão do rato e clico para adicionar o próximo ponto da linha.

Como vêem, neste ponto arrastei o rato para a curva se aproximar o máximo possível à janela do carro, mas assim deixa de combinar com o formato do tecto do carro.. Por isso, antes de largar o botão do rato, pressiono a tecla Shift e a curva muda de direcção e já posso desenhar o resto.

Por agora já devem perceber mais ou menos como isto funciona.. Por isso é só seguir o formato do carro o melhor que for possível através da imagem.

Lembrem-se que podem sempre alterar os pontos e curvas depois, por isso se se enganarem, continuem o melhor possível e não pressionem Ctrl+Z porque isso vai-vos obrigar a começar do primeiro ponto de novo.. Assim que a vossa linha chegar à roda da frente, façam o traço tocar na roda e pressionem Enter para terminar o traço:

Agora, com a ferramenta de seleccionar, seleccionem um dos círculos das rodas e pressionem Ctrl+C e depois seleccionem o vosso novo traço e pressionem Ctrl+Shift+V para aplicar o mesmo estilo da roda ao novo traço.. E vamos de novo à secção de Estilo de Traço alterar a largura de traço para 3px em vez de 5. A partir de agora vamos aplicar este estilo a todos os traços para ficarem todos uniformes e depois vamos alterar alguns deles no fim para aumentar a dinâmica da imagem por isso quando criarem um novo traço, copiem o estilo destes (Ctrl+C) e colem no novo (Ctrl+Shift+C)

Vamos agora criar um novo traço que vai de uma roda até a outra por baixo do carro e depois um que começa na janela até à roda de trás e teremos toda a linha exterior do carro feita. Para continuarem um traço que já tinha sido terminado, é só seleccionarem-no e depois pegarem na ferramenta dos Bezier’s e automaticamente aparecerão os pontos iniciais e finais para se continuar o traço =D

O meu final ficou assim:

Agora vamos traçar a janela do carro (eu comecei no vértice do lado esquerdo):

E a janela de trás:

E o pára-brisas:

E os faróis traseiros (tive que diminuir ainda mais a largura do traço para 1px):

Aquela coisa de alumínio na lateral do carro em baixo..

E um traço a dividir a parte branca da carroçaria e as partes em plástico escuro:

E os dois traços da porta:

A partir de agora vamos fazer uns traços um pouco diferentes.. Vamos começar pelos das cavas das rodas:

Seleccionem um dos círculos da roda de trás e dupliquem-no.. Agora vamos aumentá-lo, pressionando Ctrl e Shift até o tamanho do círculo coincidir com a linha da cava das rodas:

Agora é melhor diminuir a largura do traço para 3px..

Agora, vamos buscar a ferramenta do Círculo e seleccionar este novo círculo.. Vão reparar que aparecem dois pontos quadrados no círculo.. um em cima e o outro à esquerda.. estes pontos ajustam a altura e largura do círculo.. Mas também está um circular à direita – que na verdade são dois – e que controla que ângulo do círculo é desenhado.. Vamos arrastar esse círculo a dar a volta toda no sentido dos ponteiros dos relógios até ao lado direito da linha da cava da roda:

E o outro círculo lá, vamos arrastar até ao lado esquerdo da linha da cava da roda:

Por vezes, acontece um bug e a linha é desenhada desde os dois pontos circulares até ao centro do círculo também.. Para corrigir isto, é só ir aos botões em cima e pressionar o botão que retira isso:

Agora, vamos alterar a cor da linha.. Como vêem, a linha original é muito ténue dos lados, enquanto que a nossa é exactamente igual em toda a sua extensão.. Para alterar isso, vamos à secção Pintura de Traço na barra lateral e vamos mudar a cor de Cor Lisa para Degradê Linear:

Agora pressionem o botão Editar.. e vai aparecer uma nova janela. Nesta janela pressionem o botão Acrescentar Parada. Como vêm, existe uma dropdown box para poderem escolher os pontos do gradiente:

Escolham o primeiro e na barra da transparência reduzam para completamente transparente:

Agora seleccionem o ponto do meio e ponham completamente visível e o terceiro ponto completamente invisível também..

Como ficou agora o traçado da cava da roda? Já podem fechar a janela dos degradês.

Vamos agora fazer o mesmo à roda da frente. Duplicar um dos círculos, aumentar até à linha, diminuir a largura do traço para 3px, alterar o ângulo e pintar com gradiente =D

Agora adicionar uma linha na grelha frontal para marcar a forma dessa parte do carro (pus com 2px de largura):

Agora vamos pôr um gradiente nesta também. Vamos à Pintura de Traço e escolhemos o gradiente linear. Agora, vamos buscar a ferramenta de alterar gradientes:

E vamos alterar os pontos do gradiente de forma a ficar a parte branca do gradiente do lado direito e a transparente do lado esquerdo:

Agora abaixo da janela de trás:

E:

E todas as outras zonas que precisam de mais definição:

Usem gradientes de 3 pontos se necessário como os das cavas das rodas.. Nem precisam de alterar a transparência de cada ponto outra vez, mal cliquem no botão de Gradiente, escolham logo um dos já usados na lista:

E já podem usar o de 3 pontos outra vez:

E novamente na arte lateral do carro:

Agora vamos duplicar novamente um dos círculos da roda de trás do carro, pôr a largura do traço a 2px e diminuí-lo (a pressionar Ctrl e Shift) até que seja do tamanho do centro da jante onde está o logo:

Claro que o centro não alinha devido à perspectiva.. Agora vamos arrastar o ficheiro com o logo da Mazda para a nossa imagem. Vamos desagrupar o logo:

E vamos duplicar o símbolo e trazer o duplicado para perto da roda de trás. Temos na parte inferior do programa uma barra cheia de cores, se clicarmos numa delas, ele aplica esse preenchimento aos objectos seleccionados. Se clicarmos numa cor premindo a tecla Shift, ele altera a cor do traço dos objectos seleccionados para essa cor. Vamos clicar na cor branca para pintar o nosso símbolo de branco.

Vamos diminuir o tamanho do símbolo até caber no pequeno círculo dentro da jante que criámos há pouco. Agora vamos clicar neste botão para aparecer na barra lateral, as ferramentas de alinhamento:

Alterem a opção em cima para Último Seleccionado (se ainda não estiver) e seleccionem o símbolo e depois o círculo e pressionem os botões de alinhar ao centro verticalmente e horizontalmente.

Agora com ambos seleccionados, dupliquem e seleccionem também um círculo da roda da frente e alinhem com esse para ficar um símbolo em cada roda.

Como o carro já está vectorizado, podemos apagar a foto de referência, já não vamos precisar mais dela.

4 – Alterar o fundo I

Vamos ao menu Ficheiro>Propriedades do Desenho e vamos alterar a cor do fundo da imagem.. Actualmente está transparente, vamos alterar para um azul assim:

5 – Alterar traços da imagem

Vamos verificar todas as linhas do carro e alterar os traços importantes para uma largura maior e os menos importantes para uma inferior:

Alterei a linha exterior para 5px, a das rodas para 6px, a das jantes para 4, e mais algumas alterações menores.

6 – Decorar o wallpaper

Vamos criar uma grelha para dar um estilo de blueprint ao wallpaper. Vão ao menu Ver>Grelha e deverá aparecer uma grelha na imagem..

Com a ferramenta de Bezier, criem um desenho assim:

Agora dupliquem este objecto, e com a ferramenta de seleccionar, rodem 90º para qualquer lado (pressionem Ctrl para rodar sempre num ângulo certo) de forma a ficar vertical em vez de horizontal:

Vamos agora esticar horizontalmente a nova grelha de forma a que ocupe o espaço todo do wallpaper. Também aproveitei e com a ferramenta de editar objectos:

Apaguei os pontos do path que estavam fora do wallpaper:

Agora se quiserem, podem fazer outro path com linhas mais estreitas:

E se fizeram, façam o mesmo a este que ao anterior: duplicar, rodar, alinhar com o outro, esticar e apagar pontos desnecessários. Apaguei a grelha e está assim:

Agora é só alterar um pouco o aspecto destas novas grelhas que fizemos..

Vamos seleccionar as duas grandes e alterar a largura do traço delas para 3px e das mais pequenas para 1px:

E vamos seleccionar as 4 e agrupá-las. E depois vamos aumentar a transparência do grupo para elas ficarem menos evidentes. É só ir ao canto inferior esquerdo e mudar o 100% que está lá para 40%.. deve chegar..

6 – Decorar a imagem

Agora vamos pôr a grid visível novamente e vamos criar um rectângulo à volta do wallpaper (eu, com o zoom a 111% pus os pontos a 3 quadrados de distância da borda da imagem):

Pus a largura do traço deste rectângulo a 5px. Agora vamos ao menu Caminho>Traço para caminho..

Já podem esconder a grelha novamente.

Agora vamos buscar o nosso logo da Mazda (só o texto) e vamos pô-lo no canto superior direito da imagem, o mais alinhado possível com o nosso novo traço e vamos diminuir um pouco o tamanho do logo (pressionando Shift e Ctrl) de forma a ficar mais proporcional. Ah, e pintem o logo de branco:

E vamos pegar na ferramenta de Texto e vamos escrever a palavra Kazamai em maiúsculas. Pintar a palavra de branco e pressionar o botão de Texto na barra superior do programa. Agora nessa janela escolham uma das vossas fontes que vocês achem que combine com a palavra e com o wallpaper.

Cliquem em Apply e alinhem o texto a um canto do símbolo da Mazda. E agora redimensionem a palavra Kazamai de forma a ter a mesma largura que a palavra Mazda (pressionando Ctrl):

Vamos deixar a palavra Mazda no lugar e vamos mover a palavra Kazamai para a parte inferior da imagem, alinhando-a o melhor possível com o rectângulo (pressionem Ctrl enquanto movem o objecto para ele se manter em linha):

Agora vamos buscar a ferramenta de desenhar rectângulos e vamos desenhar um à volta da palavra Kazamai com algum espaço a toda a volta da palavra:

E vamos seleccionar também a palavra Kazamai e vamos alinhar o rectângulo verticalmente e horizontalmente ao centro da palavra Kazamai.

Vamos agora duplicar o nosso rectângulo e alinhar o duplicado com a palavra Mazda também horizontalmente e verticalmente.

Agora vamos seleccionar o rectângulo branco que desenhámos à volta da imagem e um dos rectângulos novos e vamos ao menu Caminho>Diferença para subtrair o rectângulo em cima ao que estiver em baixo.. Depois é só fazer a mesma coisa para o outro rectângulo, de forma a criar um espaço vazio à volta das palavras que pusemos na imagem =D

Vamos agora seleccionar todo o carro (apenas o carro) e vamos agrupá-lo de forma a podermos manipulá-lo como a apenas um objecto.

Depois vamos alterar a configuração da barra Alinhar e Distribuir para “Página” e vamos alinhar o carro ao centro da página horizontalmente e verticalmente.

Vamos desenhar uma linha assim ao lado de uma das rodas:

Temos de pintar a linha de branco e afastá-la um pouco para longe do carro e com a ferramenta de texto, vamos escrever a dimensão das jantes (22″):

Vamos agora desenhar um para a altura do carro (1500mm):

E um para o comprimento do carro (4520mm):

Vamos agora abrir espaço para o texto nas linhas que fizemos. Seleccionamos uma delas com a ferramenta de editar beziers equando virmos os pontos da linha, clicamos duas vezes no local onde queremos criar um ponto. Adicionem um ponto de um lado do texto e o outro do outro e vamos fazer a linha desaparecer entre os dois pontos:

Vamos seleccionar os dois pontos que criamos e vamos clicar neste botão da barra superior:

E depois de clicar lá, deverá ter desaparecido a linha entre os dois pontos seleccionados. Agora só temos que fazer isto para os outros dois traços:

Agora só vou pegar no símbolo da Mazda que está do lado de fora da imagem e alinhá-lo com o centro horizontal da página e pintá-lo de branco:

Já só falta dar alguma dinâmica ao fundo, que actualmente está todo da mesma cor. Por isso desenhem um rectângulo a toda a volta da página e pintem-no de um azul mais escuro que o do fundo:

E na barra lateral do Preenchimento, escolham o Degradê Radial e cliquem em Editar.

Vamos alterar o ponto actual para transparente e o outro para completamente opaco. Alterem os pontos do gradiente a vosso gosto:

E com a ferramenta de selecção, e com o rectângulo seleccionado, vamos arrastá-lo para debaixo de todas as outras coisas na imagem, carregando neste botão:

E pronto, já está a nossa obra prima =D

É só gravar e ir ao menu Ficheiro>Exportar Bitmap, escolher Página e alterar as dimensões para 1920 e 1200 e exportar.

O meu resultado final: 

Espero que tenham gostado e até à próxima. Classifiquem e comentem =D

Artigos relacionados:

1. Como Fazer uma T-Shirt para Geeks no Inkscape Vamos aprender a criar uma imagem para uma t-shirt do princípio ao fim no Inkscape. Aprendam a vectorizar e a...

Só precisam do Photoshop..

Passo 1 – Obter uma Imagem

Precisamos de uma imagem que pode ser um logo ou uma foto.. Eu vou usar uma foto, por isso fui ao site www.sxc.hu e encontrei esta (cliquem na imagem para a abrir):

Esta imagem tem boa resolução, um objecto relativamente complicado e tem o fundo branco que nós precisamos..

Passo 2 – Photoshop FTW

Agora vamos abrir o Photoshop e arrastar a nossa imagem para lá..

Passo 3 – Correcções e Ajustes são sempre necessários

Vamos ter que apagar a fita da câmara no lado esquerdo.. Por isso, com a Brush Tool (B) e com um pincel circular duro com o tamanho perto de 250px vamos pintar de branco a fita da câmara até ficar assim:

Conseguiram? Não é precisa muita perfeição porque isto vai ficar praticamente irreconhecível..

Vamos também buscar a Burn Tool e com um pincel suave de cerca de 200px, vamos “queimar” um pouco nas zonas que eu mostro aqui em laranja:

Isto é apenas para se notar mais a silhueta da câmara no próximo passo..

A vossa imagem agora deve estar assim:

Passo 4 – Threshold faz Magia

Agora vamos ao menu Image>Adjustments>Threshold e vamos arrastar o ponteiro até termos algo que se pareça com uma câmara..

Se alguns detalhes da câmara não se notarem bem, é só cancelar e ir com a Burn Tool outra vez nas zonas que ainda não se notam.. Eu tive que passar várias vezes na parte de cima da câmara até essa zona se perceber..

Agora cliquem no OK e próximo passo:

Passo 5 – Nós queremos é Cor!

Vamos seleccionar a nossa layer e pressionando a tecla Alt, vamos clicar duas vezes na layer para a desbloquear..

Agora, vamos pressionar estes atalhos para remover o branco da imagem: Ctrl+A, Ctrl+C, Q, Ctrl+V, Q , Del.

Agora para tirar todo o cinzento também, vamos abrir os Levels (Ctrl+L) e vamos arrastar o ponteiro branco para o lado preto completamente..

Vamos criar uma nova Adjustment Layer:

E vamos escolher esta cor: #fff300.. É só inserir fff300 na caixa de texto que está na janela..

Vamos pressionar OK e agora vamos clicar com o botão direito do rato na máscara desta layer e escolher Delete Layer Mask para apagar a máscara.

Vamos agora adicionar uma layer normal e com o Paint Bucket pintá-la de branco.. Agora vamos mover esta layer para baixo da nossa câmara para ser o fundo.

Com o Ctrl pressionado, vamos clicar na miniatura da layer da câmara para criar uma selecção com os píxeis desta layer.. (Podem também clicar com o botão direito do rato na miniatura e escolher Select Pixels)

Agora vamos seleccionar a layer amarela e vamos pressionar o botão de criar máscara:

Deve agora estar amarelo só na zona da câmara..

Agora ponham a layer original da câmara invisível e mudem o Blending Mode da layer amarela para Linear Burn..

Vamos duplicar esta layer duas vezes e a uma delas deixamos desta cor, a outra mudamos para #00a0ea e a outra para #e5017a – é só clicar duas vezes no ícone amarelo da layer..

A câmara deve estar novamente em preto, certo? Para mudarmos isso, vamos com a Move Tool (V) seleccionar as layers uma a uma e mudá-las alguns píxeis de forma a não ficarem todas no mesmo lugar.. É só seleccionar e usar os botões direccionais do teclado para as mover.. Tentem ficar com algo assim:

O que fez a vossa imagem ficar assim (cliquem na imagem para aumentar):

E pronto, já aprenderam mais um estilo de imagem para os vossos projectos.. Vejam como fica aplicado a um logo:

Para usarem é só apagar o fundo branco, gravar como PNG com transparência e voilá

E já não falo mais por hoje.. Até à próxima =D

Artigos relacionados:

1. Como Fazer uma Montagem de uma T-Shirt no Photoshop Vamos aprender a fazer uma montagem super realista de uma t-shirt no Photoshop...

O tutorial vai ter quatro partes.. Na primeira parte, vamos fazer o fundo da imagem; na segunda vamos fazer o logo da imagem; na terceira vamos fazer o texto e na quarta vamos finalizar o logo e a imagem

Só é preciso o Photoshop para este tutorial.. Vamos começar:

Parte 1: O Fundo

Criem um novo documento no Photoshop.. Eu decidi fazer um wallpaper, por isso vou dar ao meu documento a dimensão 1920×1200..

Com a Paint Bucket Tool (G), preencham toda a layer com um cinzento à vossa escolha..

Agora, vão ao menu Filters>Render>Lighting Effects e brinquem com os parâmetros até obterem qualquer coisa que gostem.. Eu pus assim:

Aceitem as alterações e agora vamos a Filters>Blur>Gaussian Blur e vamos escolher um valor que ponha a imagem quase uniforme..

A minha ainda não ficou muito uniforme, por isso vou pressionar Ctrl+F para aplicar o último filtro usado novamente – que é o Gaussian Blur.

Podíamos agora aplicar uma textura ao nosso fundo ou uma cor, mas não vou fazer isso neste tutorial.. Mas vocês estejam à vontade para fazer o que quiserem..

Parte 2: O Logo

Agora vamos desenhar um foguetão com a Pen Tool (P).. Vamos criar um novo Grupo acima da nossa layer actual e criar uma nova layer lá dentro.

Certifiquem-se que a vossa Pen Tool está configurada para criar shapes.. É só clicar aqui:

Agora vamos ao menu View>Show>Grid e deve aparecer a grelha na vossa imagem.. Para a fazer aparecer e desaparecer, é só pressionar Ctrl+H..

Com a Grid visível vamos fazer zoom até cerca de 200% para se verem melhor os quadrados da grelha.. Agora com a Pen Tool vamos criar um ponto:

E agora vamos continuar a desenhar a estrutura do nosso foguetão com mais alguns pontos.. Ao pressionar prolongadamente, ele cria um ponto de Bezier, o qual permite desenhar uma curva.. Tentem obter qualquer coisa parecida com isto:

Podem sempre ajustar a posição dos pontos pressionando Ctrl e movendo-os para o novo local. E podem ajustar a curva deles com a tecla Alt..

Criem agora uma nova layer abaixo desta e vamos desenhar as.. mm.. como será que se chamam aquelas coisas que parecem asas?.. oh, que importa.. vocês sabem o que é..

Agora vamos buscar a Path Selection Tool (A) e vamos seleccionar esta “asa” e com a tecla Alt pressionada, vamos arrastar o path para o duplicarmos (depois de ter aparecido o clone, pressionem também a tecla Shift para o clone se deslocar alinhado com o original).

Com o clone ainda seleccionado vamos ao menu Edit>Transform Path>Flip Horizontal e movam o clone até parecer alinhado com a nave..

Com um dos paths ainda seleccionado, vamos desenhar com a Pen Tool o tubo por onde saem as chamas..

Lembrem-se, isto é uma ilustração, por isso não precisa de ser perfeita =D

Claro que se quiserem ser perfeccionistas, podem sempre criar os paths em layers separadas e alinhá-las com a Move Tool (V) e depois juntar tudo outra vez (Com a Path Selection Tool, seleccionem a máscara da layer a copiar e pressionem Ctrl+C e depois seleccionem a máscara da layer para onde querem copiar o path e pressionem Ctrl+V)..

Agora vamos alterar um pouco as cores do nosso foguetão porque não se percebe muito o que se passa ali.. É só clicar duas vezes no ícone da layer respectiva para mudar a cor..

Agora vamos criar uma nova layer abaixo das duas do foguetão e é nesta layer que vai ficar a parte amarela das chamas =D

Nesta layer, com a Pen Tool desenhem algo parecido com isto:

Com este objecto, vamos desenhar as nossas chamas =D

Com a Path Selection Tool posicionem a nossa chama logo a seguir ao tubo das chamas e se for preciso, redimensionem e rodem – é só pressionar Ctrl+T..

Para duplicar o objecto, já sabem: pressionar Alt e depois arrastar.. Para inverter, vão ao menu Edit>Transform Path>Flip Horizontal.

Tentem criar umas chamas assim:

Ok? Agora dupliquem esta layer – é só arrastá-la para o botão de nova layer -  e mudem a cor dela para vermelho..

Com a Move Tool, redimensionem o objecto para ficar numa posição realista e novamente com a Path Selection Tool mudem um pouco o aspecto dos nossos paths..

Que tal? Foi mais fácil do que o que pensavam, não foi?

Agora, numa nova layer acima de todas do foguetão, vamos desenhar a tão característica janela circular.. Com a Ellipse Tool (U)..

Como a janela não está muito interessante, vamos dar-lhe algum brilho.. Numa nova layer acima desta, de cor branca, vamos desenhar um círculo pequeno:

Com a Path Selection Tool, vamos duplicá-lo, e esticá-lo um pouco para ficar com bom aspecto..

Ok.. Quanto ao foguetão, acho que está tudo..

Parte 3: O Texto

Vamos fechar e esconder o Grupo do foguetão para não ocupar espaço na lista das layers e acima dele vamos criar uma nova layer e vamos escrever qualquer coisa com o tipo de letra Impact..

Vamos clicar com o botão direito do rato na layer do texto e escolher Convert to Shape.. Agora vamos seleccionar tudo (Ctrl+A) e vamos com a Move Tool centrar o texto na imagem:

Agora vamos aumentar o tamanho do texto para ocupar a maior parte do espaço.. Pressionem Shift e Alt enquanto aumentam para manter a relação altura-largura e redimensionar mantendo o centro da layer..

Vamos duplicar esta layer e na que estiver embaixo, vamos clicar com o botão direito do rato e escolher Rasterize Layer.. Isto transformou a nossa layer vectorial numa layer normal, que podemos editar.. Também mudei a cor da minha para preto pressionando Ctrl+I para inverter a cor, mas se a vossa for de outra cor, podem pressionar Ctrl+L para abrir os Levels e arrastar o node branco até ao lado preto.. Mudem o nome desta layer para SOMBRA.

Com a tecla Ctrl pressionada cliquem no ícone da layer sombra para criar uma selecção só com o conteúdo da layer, e vão ao menu Select>Modify>Contract e ponham 1px no valor e pressionem o Ok.. Isto fez diminuir toda a selecção em 1 pixel a toda a volta.. Agora vamos inverter a selecção – Ctrl+Shift+I – e vamos pressionar Del para apagarmos 1 pixel a toda a volta da nossa sombra..

Seleccionem a layer de texto que tem a máscara e diminuam a Opacity dela para 5%, de forma a quase não se ver.. E, pressionando Alt, arrastem a máscara para a nossa layer da sombra..

Com a Path Selection Tool seleccionem todas as letras na máscara da layer sombra e alterem o modo para Subtract:

Isto fez a layer desaparecer.. Mas não faz mal.. Agora, só vai aparecer o que sair para fora das letras, que é o que nós queremos =D

Agora vai começar a magia..

Seleccionem a layer sombra (não a máscara) e peguem na Rectangular Marquee Tool e seleccionem uma das letras do texto..

Com a Blur Tool a usar um pincel suave de cerca de 65px e com o Strength a 100%, vamos tentar criar uma sombra realista para parecer que a nossa imagem é uma folha de papel na qual cortamos algumas partes das letras com um x-acto e que as dobramos para fora da folha..

Lembrem-se, para uma sombra ser realista, tem que ficar menos visível e mais suave com a distância..

Tentem fazer assim:

Vamos agora fazer isto para cada letra.. Seleccionar e Blur.. Tentem aplicar mais blur nas zonas que fossem ficar mais afastadas do papel..

Depois de acabarem todas as letras, ponham a layer de cima completamente invisível para ver se as letras se percebem ou não..

O meu ficou assim:

Os que já tiverem feito clay renderings 3D vão achar este efeito muito semelhante ás sombras obtidas lá..

Ok.. Vamos agora dar alguma dimensão ao texto com iluminação..

Vamos duplicar a layer de texto que tem a máscara e vamos clicar com o botão direito do rato e escolher Rasterize Layer.. Depois vamos alterar a Opacity dela de volta para 100%..

Vamos alterar o Blending Mode desta layer para Overlay e pressionar Ctrl+L para abrir os Levels.. Lá, vamos arrastar o node branco até a layer ficar invisível..

Agora vamos buscar a Dodge Tool e vamos dar brilho ás partes das latras que estão mais afastadas do papel (as que têm mais sombra).. Temos de seleccionar novamente letra a letra e dar brilho onde for preciso com um pincel suave de cerca de 300px (aumentem ou diminuam conforme necessário)..

Vejam como as letras ganham logo um aspecto completamente novo..

Ok.. Agora o texto está pronto..

Parte 4: Finalizar

Vamos põr o Grupo do foguetão visivel e com a Move Tool vamos aumentá-lo e mudar a posição dele..

Vamos abrir o Grupo e vamos criar uma nova layer abaixo de todas.. Com a tecla Ctrl pressionada, vamos clicar na máscara da penúltima layer (a das chamas amarelas) para criar essa selecção e com a Paint Bucket Tool, vamos pintar essa selecção na nova layer de preto..

Agora com a Blur tool, vamos também criar as nossas sombras especiais aqui.. Lembrem-se, mais blur nas zonas que fiquem mais levantadas: pontas e tal..

E vamos agora fazer isto para cada layer do foguetão.. Criar nova layer abaixo da layer actual, criar selecção da layer actual, preencher com preto, blur..

Usem a Eraser Tool em algumas zonas em que seja preciso apagar um pouco de preto..

Agora vamos criar uma nova layer abaixo da layer do brilho e da respectiva sombra..

E vamos pressionar Ctrl e criar uma selecção com a layer das chamas do foguetão.. e depois com o Paint Bucket, preencher e nova layer na selecção com cinzento médio.. Agora vamos põr a layer a Overlay e pegar na Dodge Tool e dar algum volume ás chamas.. É só passar onde quisermos para dar brilho e pressionar Alt enquanto passamos para escurecer..

Agora vamos seleccionar a área das asas do foguetão, preencher a layer de cinzento aí e Dodge & Burn =D

Agora vamos fazer o mesmo para o centro do foguetão..

Agora vamos criar uma selecção com apenas a janela do foguetão e dar-lhe volume também.

E pronto.. Já está a nossa imagem..

Eu pus o fundo um pouco mais claro e gravei.. está aqui o resultado final:

Clicar na imagem para aumentar

Espero que tenham gostado e aprendido alguma coisa e até à próxima =D

Artigos relacionados:

1. Como desenhar um Ícone de Ficheiro Neste tutorial vamos aprender a desenhar um ícone de tipo de ficheiro no Photoshop...

www.vector-images.com – Alguns vectores gratuitos.. É preciso registar. Formatos CDR e EPS.
www.vectorportal.com – Vários vectores de estilos diversos em formato EPS.
www.digital-clipart.com – Muitos vectores em formato AI, EPS e CDR, em várias categorias. Há downloads free disponíveis – cliquem em samples.
www.brandsoftheworld.com – Site com practicamente todos os logos do mundo vectorizados.. Desde empresas a produtos. Em formato EPS.
www.freevectors.net – Site com imensos desenhos vectoriais.
www.vector4free.com – Quantidade enorme de vectores grátis.
www.qvectors.com – Site com várias imagens vectoriais, desde simbolos a desenhos completos. Vários formatos.
www.vectorjunky.com – Site com várias categorias de vectores.
www.vecteezy.com – Mais um site com montes de vectores.

Espero que seja útil para vocês!

Artigos relacionados:

1. Como fazer um wallpaper estilo blueprint no Inkscape Vamos aprender a fazer um wallpaper com um desenho técnico de um carro no Inkscape...