<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Pixeis.net &#187; Artigos</title>
	<atom:link href="http://pt.pixeis.net/category/artigos/feed/" rel="self" type="application/rss+xml" />
	<link>http://pt.pixeis.net</link>
	<description>a tua revista online de arte digital</description>
	<lastBuildDate>Tue, 04 May 2010 02:01:49 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Software de Escrita para Blogs</title>
		<link>http://pt.pixeis.net/2009/11/software-de-escrita-para-blogs/</link>
		<comments>http://pt.pixeis.net/2009/11/software-de-escrita-para-blogs/#comments</comments>
		<pubDate>Thu, 26 Nov 2009 02:33:54 +0000</pubDate>
		<dc:creator>Ricardo Jorge</dc:creator>
				<category><![CDATA[Artigos]]></category>
		<category><![CDATA[blog]]></category>
		<category><![CDATA[cor]]></category>
		<category><![CDATA[download]]></category>
		<category><![CDATA[escrita]]></category>
		<category><![CDATA[fontes]]></category>
		<category><![CDATA[Open-Source]]></category>
		<category><![CDATA[pen drive]]></category>
		<category><![CDATA[software]]></category>
		<category><![CDATA[texto]]></category>
		<category><![CDATA[tipografia]]></category>

		<guid isPermaLink="false">http://pt.pixeis.net/?p=1604</guid>
		<description><![CDATA[Vamos ver vários programas que podemos usar para escrever para os nossos blogs


Artigos relacionados:<ol><li><a href='http://pt.pixeis.net/2008/12/como-fazer-uma-t-shirt-para-geeks-no-inkscape/' rel='bookmark' title='Permanent Link: Como Fazer uma T-Shirt para Geeks no Inkscape'>Como Fazer uma T-Shirt para Geeks no Inkscape</a> <small>Vamos aprender a criar uma imagem para uma t-shirt do princípio ao fim no Inkscape. Aprendam a vectorizar e a...</small></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p>Muitos de nós temos ou escrevemos para blogs. Mas muitas vezes, o editor online dos blogs não é o suficiente. Podemos querer guardar os rascunhos no nosso computador e editar depois. Para isso é que servem os vários programas de escrita para blogs.</p>
<p>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.</p>
<p>Podem ainda ver <a href="#_Lista_de_Comparação">no fim do artigo</a>, uma tabela com alguns detalhes dos vários programas, incluindo os links para as páginas oficiais.</p>
<h1>Microsoft Office Word</h1>
<p style="text-align: center"><a href="http://pt.pixeis.net/wp-content/uploads/2009/11/112609_0233_SoftwaredeE1.png" rel="shadowbox[post-1604];player=img;"><img class="aligncenter" src="http://pt.pixeis.net/wp-content/uploads/2009/11/112609_0233_SoftwaredeE1.png" alt="" width="619" height="382" /></a></p>
<p>O conhecido programa de escrita da Microsoft também serve para bloggar. É só ir a Novo&gt;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.</p>
<p>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.</p>
<p>O sistema de correcção ortográfica é dos melhores que já vi.</p>
<p>É 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:</p>
<h1>Windows Live Writer</h1>
<p style="text-align: center"><a href="http://pt.pixeis.net/wp-content/uploads/2009/11/112609_0233_SoftwaredeE2.png" rel="shadowbox[post-1604];player=img;"><img class="aligncenter" src="http://pt.pixeis.net/wp-content/uploads/2009/11/112609_0233_SoftwaredeE2.png" alt="" width="590" height="425" /></a></p>
<p>Este é um dos programas do pack <a href="http://download.live.com">Windows Live</a>, que também inclui o Messenger, Movie Maker, Mail, entre outros programas gratuitos para utilizadores de Windows.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>Recomendo vivamente que experimentem este programa, porque além de ser muito bom e estar todo em português, também é gratuito =D</p>
<p>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.</p>
<h1>BlogDesk</h1>
<p style="text-align: center"><a href="http://pt.pixeis.net/wp-content/uploads/2009/11/112609_0233_SoftwaredeE3.png" rel="shadowbox[post-1604];player=img;"><img class="aligncenter" src="http://pt.pixeis.net/wp-content/uploads/2009/11/112609_0233_SoftwaredeE3.png" alt="" width="570" height="409" /></a></p>
<p>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..</p>
<p>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.</p>
<p>Ele vem em inglês mas podem fazer no site oficial o download de packs de outras línguas – <span style="text-decoration: underline;">das quais português não faz parte</span> – este só vai servir para quem não escreve em português =/</p>
<h1>Qumana</h1>
<p style="text-align: center"><a href="http://pt.pixeis.net/wp-content/uploads/2009/11/112609_0233_SoftwaredeE4.png" rel="shadowbox[post-1604];player=img;"><img class="aligncenter" src="http://pt.pixeis.net/wp-content/uploads/2009/11/112609_0233_SoftwaredeE4.png" alt="" width="538" height="444" /></a></p>
<p>O Qumana tem um sistema integrado de rentabilização do blog por publicidade inserida directamente através do programa.</p>
<p>É 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.</p>
<h1>w.bloggar</h1>
<p style="text-align: center;"><a href="http://pt.pixeis.net/wp-content/uploads/2009/11/112609_0233_SoftwaredeE5.png" rel="shadowbox[post-1604];player=img;"><img class="aligncenter" src="http://pt.pixeis.net/wp-content/uploads/2009/11/112609_0233_SoftwaredeE5.png" alt="" width="575" height="433" /></a></p>
<p>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 – <span style="text-decoration: underline;">não tem português</span>. 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.</p>
<h1>Post2Blog</h1>
<p style="text-align: center;"><a href="http://pt.pixeis.net/wp-content/uploads/2009/11/112609_0233_SoftwaredeE6.png" rel="shadowbox[post-1604];player=img;"><img class="aligncenter" src="http://pt.pixeis.net/wp-content/uploads/2009/11/112609_0233_SoftwaredeE6.png" alt="" width="566" height="400" /></a></p>
<p>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).</p>
<h1>OpenOffice Writer</h1>
<p style="text-align: center;"><a href="http://pt.pixeis.net/wp-content/uploads/2009/11/112609_0233_SoftwaredeE7.png" rel="shadowbox[post-1604];player=img;"><img class="aligncenter" src="http://pt.pixeis.net/wp-content/uploads/2009/11/112609_0233_SoftwaredeE7.png" alt="" width="550" height="448" /></a></p>
<p>O conhecido Writer do OpenOffice tembém tem uma extensão para ganhar a capacidade de escrever para um blog. Basta ir <a href="http://extensions.services.openoffice.org/project/swp">aqui</a> 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.</p>
<h1>Lista de Comparação Rápida</h1>
<p>Aqui podem ver os vários programas, a sua compatibilidade quanto a sistemas operativos e ainda a sistemas de blog.</p>
<div>
<table style="border-collapse:collapse" border="0">
<colgroup>
<col style="width: 83px;"></col>
<col style="width: 72px;"></col>
<col style="width: 47px;"></col>
<col style="width: 41px;"></col>
<col style="width: 81px;"></col>
<col style="width: 61px;"></col>
<col style="width: 67px;"></col>
<col style="width: 98px;"></col>
<col style="width: 55px;"></col>
</colgroup>
<tbody>
<tr>
<td style="padding-left: 7px; padding-right: 7px; border-top:  solid black 3.0pt; border-left:  solid black 3.0pt; border-bottom:  solid black 3.0pt; border-right:  solid black 3.0pt">Nome</td>
<td style="padding-left: 7px; padding-right: 7px; border-top:  solid black 3.0pt; border-left:  none; border-bottom:  solid black 3.0pt; border-right:  solid black 1.0pt"><strong>Windows</strong></td>
<td style="padding-left: 7px; padding-right: 7px; border-top:  solid black 3.0pt; border-left:  none; border-bottom:  solid black 3.0pt; border-right:  solid black 1.0pt"><strong>Linux</strong></td>
<td style="padding-left: 7px; padding-right: 7px; border-top:  solid black 3.0pt; border-left:  none; border-bottom:  solid black 3.0pt; border-right:  solid black 3.0pt"><strong>Mac</strong></td>
<td style="padding-left: 7px; padding-right: 7px; border-top:  solid black 3.0pt; border-left:  none; border-bottom:  solid black 3.0pt; border-right:  solid black 1.0pt"><strong>WordPress</strong></td>
<td style="padding-left: 7px; padding-right: 7px; border-top:  solid black 3.0pt; border-left:  none; border-bottom:  solid black 3.0pt; border-right:  solid black 1.0pt"><strong>Blogger</strong></td>
<td style="padding-left: 7px; padding-right: 7px; border-top:  solid black 3.0pt; border-left:  none; border-bottom:  solid black 3.0pt; border-right:  solid black 1.0pt"><strong>TypePad</strong></td>
<td style="padding-left: 7px; padding-right: 7px; border-top:  solid black 3.0pt; border-left:  none; border-bottom:  solid black 3.0pt; border-right:  solid black 1.0pt"><strong>MovableType</strong></td>
<td style="padding-left: 7px; padding-right: 7px; border-top:  solid black 3.0pt; border-left:  none; border-bottom:  solid black 3.0pt; border-right:  solid black 3.0pt"><strong>Drupal</strong></td>
</tr>
<tr>
<td style="padding-left: 7px; padding-right: 7px; border-top:  none; border-left:  solid black 3.0pt; border-bottom:  solid black 1.0pt; border-right:  solid black 3.0pt"><a href="http://office.microsoft.com/pt-pt/word/">MS O Word</a> (1)</td>
<td style="background: #92d050; padding-left: 7px; padding-right: 7px; border-top:  none; border-left:  none; border-bottom:  solid black 1.0pt; border-right:  solid black 1.0pt"></td>
<td style="background: #c00000; padding-left: 7px; padding-right: 7px; border-top:  none; border-left:  none; border-bottom:  solid black 1.0pt; border-right:  solid black 1.0pt"></td>
<td style="background: #92d050; padding-left: 7px; padding-right: 7px; border-top:  none; border-left:  none; border-bottom:  solid black 1.0pt; border-right:  solid black 3.0pt"></td>
<td style="background: #92d050; padding-left: 7px; padding-right: 7px; border-top:  none; border-left:  none; border-bottom:  solid black 1.0pt; border-right:  solid black 1.0pt"></td>
<td style="background: #92d050; padding-left: 7px; padding-right: 7px; border-top:  none; border-left:  none; border-bottom:  solid black 1.0pt; border-right:  solid black 1.0pt"></td>
<td style="background: #92d050; padding-left: 7px; padding-right: 7px; border-top:  none; border-left:  none; border-bottom:  solid black 1.0pt; border-right:  solid black 1.0pt"></td>
<td style="padding-left: 7px; padding-right: 7px; border-top:  none; border-left:  none; border-bottom:  solid black 1.0pt; border-right:  solid black 1.0pt"></td>
<td style="background: #92d050; padding-left: 7px; padding-right: 7px; border-top:  none; border-left:  none; border-bottom:  solid black 1.0pt; border-right:  solid black 3.0pt"></td>
</tr>
<tr>
<td style="padding-left: 7px; padding-right: 7px; border-top:  none; border-left:  solid black 3.0pt; border-bottom:  solid black 1.0pt; border-right:  solid black 3.0pt"><a href="http://download.live.com/writer">Live Writer</a></td>
<td style="background: #92d050; padding-left: 7px; padding-right: 7px; border-top:  none; border-left:  none; border-bottom:  solid black 1.0pt; border-right:  solid black 1.0pt"></td>
<td style="background: #c00000; padding-left: 7px; padding-right: 7px; border-top:  none; border-left:  none; border-bottom:  solid black 1.0pt; border-right:  solid black 1.0pt"></td>
<td style="background: #c00000; padding-left: 7px; padding-right: 7px; border-top:  none; border-left:  none; border-bottom:  solid black 1.0pt; border-right:  solid black 3.0pt"></td>
<td style="background: #92d050; padding-left: 7px; padding-right: 7px; border-top:  none; border-left:  none; border-bottom:  solid black 1.0pt; border-right:  solid black 1.0pt"></td>
<td style="background: #92d050; padding-left: 7px; padding-right: 7px; border-top:  none; border-left:  none; border-bottom:  solid black 1.0pt; border-right:  solid black 1.0pt"></td>
<td style="background: #92d050; padding-left: 7px; padding-right: 7px; border-top:  none; border-left:  none; border-bottom:  solid black 1.0pt; border-right:  solid black 1.0pt"></td>
<td style="padding-left: 7px; padding-right: 7px; border-top:  none; border-left:  none; border-bottom:  solid black 1.0pt; border-right:  solid black 1.0pt"></td>
<td style="padding-left: 7px; padding-right: 7px; border-top:  none; border-left:  none; border-bottom:  solid black 1.0pt; border-right:  solid black 3.0pt"></td>
</tr>
<tr>
<td style="padding-left: 7px; padding-right: 7px; border-top:  none; border-left:  solid black 3.0pt; border-bottom:  solid black 1.0pt; border-right:  solid black 3.0pt"><a href="http://www.blogdesk.org/en/index.htm">BlogDesk</a></td>
<td style="background: #92d050; padding-left: 7px; padding-right: 7px; border-top:  none; border-left:  none; border-bottom:  solid black 1.0pt; border-right:  solid black 1.0pt"></td>
<td style="background: #c00000; padding-left: 7px; padding-right: 7px; border-top:  none; border-left:  none; border-bottom:  solid black 1.0pt; border-right:  solid black 1.0pt"></td>
<td style="background: #c00000; padding-left: 7px; padding-right: 7px; border-top:  none; border-left:  none; border-bottom:  solid black 1.0pt; border-right:  solid black 3.0pt"></td>
<td style="background: #92d050; padding-left: 7px; padding-right: 7px; border-top:  none; border-left:  none; border-bottom:  solid black 1.0pt; border-right:  solid black 1.0pt"></td>
<td style="padding-left: 7px; padding-right: 7px; border-top:  none; border-left:  none; border-bottom:  solid black 1.0pt; border-right:  solid black 1.0pt"></td>
<td style="padding-left: 7px; padding-right: 7px; border-top:  none; border-left:  none; border-bottom:  solid black 1.0pt; border-right:  solid black 1.0pt"></td>
<td style="background: #92d050; padding-left: 7px; padding-right: 7px; border-top:  none; border-left:  none; border-bottom:  solid black 1.0pt; border-right:  solid black 1.0pt"></td>
<td style="background: #92d050; padding-left: 7px; padding-right: 7px; border-top:  none; border-left:  none; border-bottom:  solid black 1.0pt; border-right:  solid black 3.0pt"></td>
</tr>
<tr>
<td style="padding-left: 7px; padding-right: 7px; border-top:  none; border-left:  solid black 3.0pt; border-bottom:  solid black 1.0pt; border-right:  solid black 3.0pt"><a href="http://www.qumana.com/">Qumana</a></td>
<td style="background: #92d050; padding-left: 7px; padding-right: 7px; border-top:  none; border-left:  none; border-bottom:  solid black 1.0pt; border-right:  solid black 1.0pt"></td>
<td style="background: #92d050; padding-left: 7px; padding-right: 7px; border-top:  none; border-left:  none; border-bottom:  solid black 1.0pt; border-right:  solid black 1.0pt"></td>
<td style="background: #92d050; padding-left: 7px; padding-right: 7px; border-top:  none; border-left:  none; border-bottom:  solid black 1.0pt; border-right:  solid black 3.0pt"></td>
<td style="background: #92d050; padding-left: 7px; padding-right: 7px; border-top:  none; border-left:  none; border-bottom:  solid black 1.0pt; border-right:  solid black 1.0pt"></td>
<td style="background: #92d050; padding-left: 7px; padding-right: 7px; border-top:  none; border-left:  none; border-bottom:  solid black 1.0pt; border-right:  solid black 1.0pt"></td>
<td style="background: #92d050; padding-left: 7px; padding-right: 7px; border-top:  none; border-left:  none; border-bottom:  solid black 1.0pt; border-right:  solid black 1.0pt"></td>
<td style="background: #92d050; padding-left: 7px; padding-right: 7px; border-top:  none; border-left:  none; border-bottom:  solid black 1.0pt; border-right:  solid black 1.0pt"></td>
<td style="background: #92d050; padding-left: 7px; padding-right: 7px; border-top:  none; border-left:  none; border-bottom:  solid black 1.0pt; border-right:  solid black 3.0pt"></td>
</tr>
<tr>
<td style="padding-left: 7px; padding-right: 7px; border-top:  none; border-left:  solid black 3.0pt; border-bottom:  solid black 1.0pt; border-right:  solid black 3.0pt"><a href="http://wbloggar.com/">w.bloggar</a></td>
<td style="background: #92d050; padding-left: 7px; padding-right: 7px; border-top:  none; border-left:  none; border-bottom:  solid black 1.0pt; border-right:  solid black 1.0pt"></td>
<td style="background: #c00000; padding-left: 7px; padding-right: 7px; border-top:  none; border-left:  none; border-bottom:  solid black 1.0pt; border-right:  solid black 1.0pt"></td>
<td style="background: #c00000; padding-left: 7px; padding-right: 7px; border-top:  none; border-left:  none; border-bottom:  solid black 1.0pt; border-right:  solid black 3.0pt"></td>
<td style="background: #92d050; padding-left: 7px; padding-right: 7px; border-top:  none; border-left:  none; border-bottom:  solid black 1.0pt; border-right:  solid black 1.0pt"></td>
<td style="background: #92d050; padding-left: 7px; padding-right: 7px; border-top:  none; border-left:  none; border-bottom:  solid black 1.0pt; border-right:  solid black 1.0pt"></td>
<td style="background: #92d050; padding-left: 7px; padding-right: 7px; border-top:  none; border-left:  none; border-bottom:  solid black 1.0pt; border-right:  solid black 1.0pt"></td>
<td style="background: #92d050; padding-left: 7px; padding-right: 7px; border-top:  none; border-left:  none; border-bottom:  solid black 1.0pt; border-right:  solid black 1.0pt"></td>
<td style="background: #92d050; padding-left: 7px; padding-right: 7px; border-top:  none; border-left:  none; border-bottom:  solid black 1.0pt; border-right:  solid black 3.0pt"></td>
</tr>
<tr>
<td style="padding-left: 7px; padding-right: 7px; border-top:  none; border-left:  solid black 3.0pt; border-bottom:  solid black 1.0pt; border-right:  solid black 3.0pt"><a href="http://www.bytescout.com/post2blog.html">Post2Blog</a></td>
<td style="background: #92d050; padding-left: 7px; padding-right: 7px; border-top:  none; border-left:  none; border-bottom:  solid black 1.0pt; border-right:  solid black 1.0pt"></td>
<td style="background: #c00000; padding-left: 7px; padding-right: 7px; border-top:  none; border-left:  none; border-bottom:  solid black 1.0pt; border-right:  solid black 1.0pt"></td>
<td style="background: #c00000; padding-left: 7px; padding-right: 7px; border-top:  none; border-left:  none; border-bottom:  solid black 1.0pt; border-right:  solid black 3.0pt"></td>
<td style="background: #92d050; padding-left: 7px; padding-right: 7px; border-top:  none; border-left:  none; border-bottom:  solid black 1.0pt; border-right:  solid black 1.0pt"></td>
<td style="background: #92d050; padding-left: 7px; padding-right: 7px; border-top:  none; border-left:  none; border-bottom:  solid black 1.0pt; border-right:  solid black 1.0pt"></td>
<td style="background: #92d050; padding-left: 7px; padding-right: 7px; border-top:  none; border-left:  none; border-bottom:  solid black 1.0pt; border-right:  solid black 1.0pt"></td>
<td style="background: #92d050; padding-left: 7px; padding-right: 7px; border-top:  none; border-left:  none; border-bottom:  solid black 1.0pt; border-right:  solid black 1.0pt"></td>
<td style="padding-left: 7px; padding-right: 7px; border-top:  none; border-left:  none; border-bottom:  solid black 1.0pt; border-right:  solid black 3.0pt"></td>
</tr>
<tr>
<td style="padding-left: 7px; padding-right: 7px; border-top:  none; border-left:  solid black 3.0pt; border-bottom:  solid black 3.0pt; border-right:  solid black 3.0pt"><a href="http://www.openoffice.org/">OO Writer</a> (2)</td>
<td style="background: #92d050; padding-left: 7px; padding-right: 7px; border-top:  none; border-left:  none; border-bottom:  solid black 3.0pt; border-right:  solid black 1.0pt"></td>
<td style="background: #92d050; padding-left: 7px; padding-right: 7px; border-top:  none; border-left:  none; border-bottom:  solid black 3.0pt; border-right:  solid black 1.0pt"></td>
<td style="background: #92d050; padding-left: 7px; padding-right: 7px; border-top:  none; border-left:  none; border-bottom:  solid black 3.0pt; border-right:  solid black 3.0pt"></td>
<td style="background: #92d050; padding-left: 7px; padding-right: 7px; border-top:  none; border-left:  none; border-bottom:  solid black 3.0pt; border-right:  solid black 1.0pt"></td>
<td style="background: #92d050; padding-left: 7px; padding-right: 7px; border-top:  none; border-left:  none; border-bottom:  solid black 3.0pt; border-right:  solid black 1.0pt"></td>
<td style="background: #92d050; padding-left: 7px; padding-right: 7px; border-top:  none; border-left:  none; border-bottom:  solid black 3.0pt; border-right:  solid black 1.0pt"></td>
<td style="background: #92d050; padding-left: 7px; padding-right: 7px; border-top:  none; border-left:  none; border-bottom:  solid black 3.0pt; border-right:  solid black 1.0pt"></td>
<td style="padding-left: 7px; padding-right: 7px; border-top:  none; border-left:  none; border-bottom:  solid black 3.0pt; border-right:  solid black 3.0pt"></td>
</tr>
</tbody>
</table>
</div>
<p>(1) – Vem com o Microsoft Office que custa a partir de 150€<br />
(2) – É preciso instalar <a href="http://extensions.services.openoffice.org/project/swp">esta extensão</a> para ele poder funcionar com blogs</p>
<p>Espero que isto vos tenha ajudado e até à próxima.</p>
<p>Nota: Este artigo foi escrito no Word, mas eu normalmente uso o Windows Live Writer =D</p>


<p>Artigos relacionados:<ol><li><a href='http://pt.pixeis.net/2008/12/como-fazer-uma-t-shirt-para-geeks-no-inkscape/' rel='bookmark' title='Permanent Link: Como Fazer uma T-Shirt para Geeks no Inkscape'>Como Fazer uma T-Shirt para Geeks no Inkscape</a> <small>Vamos aprender a criar uma imagem para uma t-shirt do princípio ao fim no Inkscape. Aprendam a vectorizar e a...</small></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://pt.pixeis.net/2009/11/software-de-escrita-para-blogs/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>Legibilidade</title>
		<link>http://pt.pixeis.net/2009/10/legibilidade/</link>
		<comments>http://pt.pixeis.net/2009/10/legibilidade/#comments</comments>
		<pubDate>Sun, 18 Oct 2009 23:55:17 +0000</pubDate>
		<dc:creator>Carlos Silva</dc:creator>
				<category><![CDATA[Artigos]]></category>
		<category><![CDATA[artes digitais]]></category>
		<category><![CDATA[cor]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[designer]]></category>
		<category><![CDATA[fontes]]></category>
		<category><![CDATA[logo]]></category>
		<category><![CDATA[papel]]></category>
		<category><![CDATA[publicidade]]></category>
		<category><![CDATA[texto]]></category>
		<category><![CDATA[tipografia]]></category>
		<category><![CDATA[web-design]]></category>

		<guid isPermaLink="false">http://pt.pixeis.net/?p=1566</guid>
		<description><![CDATA[Como escolher as fontes, tamanhos de letra, espaçamentos, locais na página e tudo o resto para tornar os vossos projectos mais legíveis


Artigos relacionados:<ol><li><a href='http://pt.pixeis.net/2009/09/como-desenhar-um-icone-de-ficheiro/' rel='bookmark' title='Permanent Link: Como desenhar um Ícone de Ficheiro'>Como desenhar um Ícone de Ficheiro</a> <small>Neste tutorial vamos aprender a desenhar um ícone de tipo de ficheiro no Photoshop...</small></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p>Somos bombardeados a todo instante com mensagens de todos os tipos, sob todas as formas, todas tentando nos fazer olhar, ouvir e reagir. Algumas dessas mensagens são mais importantes que outras, mas nem sempre as informações que realmente precisamos são fornecidas numa forma que prontamente podemos entender.</p>
<p>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.</p>
<p>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.<br />
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.<br />
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.</p>
<p>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.<br />
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.<br />
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.<br />
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.</p>
<p>Além disso, tende para a legibilidade de textos impressos mais direccionados para o crescimento da leitura em meios electrónicos.<br />
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”.<br />
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.<br />
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.</p>
<p>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.<br />
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.<br />
Os Programas de Multimédia tem a vantagem de envolver múltiplos sentidos simultaneamente, e assim, acomodar uma grande variedade de estilos de aprendizagem.</p>
<h1 style="font-size: 2em;">O que é a Tipografia?</h1>
<p>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.<br />
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…<br />
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.<br />
O termo “tipografia” pressupõe todos os meios de comunicação atrás referidos.<br />
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.</p>
<h1 style="font-size: 2em;">Breve História da escrita</h1>
<p>&#8220;&#8230; toda história da tipografia pode ser vista como um série de sucessivas adaptações a uma nova tecnologia&#8230; 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&#8230; depois, designers se tornam mais adaptados às limitações da nova tecnologia&#8230; Finalmente os designers desenvolvem novos desenhos de tipo que tiram vantagem da nova tecnologia&#8221; - Biegelow, C. in Boag, a. The representation of type on screen, pg 4</p>
<p><strong>Demonstração da aparência do traço causado por diferentes técnicas de escrita:</strong></p>
<div style="text-align: center;">
<dl style="display: block; margin-left: auto; margin-right: auto; text-align: center; background-color: #f3f3f3; padding-top: 4px; margin-top: 10px; margin-bottom: 10px; -webkit-border-top-right-radius: 3px 3px; -webkit-border-top-left-radius: 3px 3px; -webkit-border-bottom-left-radius: 3px 3px; -webkit-border-bottom-right-radius: 3px 3px; width: 346px; border: 1px solid #dddddd;">
<dt><img style="margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; display: block; padding: 0px; border: 0px initial initial;" title="image" src="http://pt.pixeis.net/wp-content/uploads/2009/10/image.png" border="0" alt="image" width="336" height="166" /></dt>
<dd style="font-size: 11px; line-height: 17px; padding-top: 0px; padding-right: 4px; padding-bottom: 5px; padding-left: 4px; margin: 0px;">(frutiger, 1999)</dd>
</dl>
</div>
<ol>
<li>Cortes rústicos em madeira</li>
<li>Esculpidos com cinzel</li>
<li>Hastes mergulhadas na tinta</li>
<li>Pincéis<br />
Penas côncavas</li>
<li>Tecidos</li>
<li>Bordados</li>
<li>Pirografia</li>
</ol>
<p>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.</p>
<p>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)</p>
<p><img style="display: block; float: none; margin-left: auto; margin-right: auto; border: 0px initial initial;" title="image" src="http://pt.pixeis.net/wp-content/uploads/2009/10/image1.png" border="0" alt="image" width="350" height="316" /></p>
<p>Quando os escribas já estavam munidos de papiro, pergaminho e tinta, os seus instrumentos eram o pincel ou as penas. Essa &#8220;novidade&#8221; 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 &amp; Símbolos de Adrian Frutiger.”</p>
<div style="text-align: center;">
<dl id="attachment_1544" style="display: block; margin-left: auto; margin-right: auto; text-align: center; background-color: #f3f3f3; padding-top: 4px; margin-top: 10px; margin-bottom: 10px; -webkit-border-top-right-radius: 3px 3px; -webkit-border-top-left-radius: 3px 3px; -webkit-border-bottom-left-radius: 3px 3px; -webkit-border-bottom-right-radius: 3px 3px; width: 608px; border: 1px solid #dddddd;">
<dt><img style="padding: 0px; margin: 0px; border: 0px none initial;" title="image.png" src="http://pt.pixeis.net/wp-content/uploads/2009/10/image2.png" alt="image.png" width="598" height="423" /></dt>
<dd style="font-size: 11px; line-height: 17px; padding-top: 0px; padding-right: 4px; padding-bottom: 5px; padding-left: 4px; margin: 0px;">A imagem mostra a mudança na escrita conforme o tempo e a posição da pena utilizada. (Frutiger, 1999)</dd>
</dl>
</div>
<p>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.<br />
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.</p>
<p><strong>Sistema de Gutemberg de fundição de tipos:</strong></p>
<p><img style="display: block; float: none; margin-left: auto; margin-right: auto; border: 0px initial initial;" title="image" src="http://pt.pixeis.net/wp-content/uploads/2009/10/image3.png" border="0" alt="image" width="350" height="406" /></p>
<p><strong>A</strong>. Punção</p>
<p><strong>B</strong>. Matriz de cobre</p>
<p><strong>C</strong>. Molde do tipo (sem a matriz)</p>
<p><strong>D </strong>e<strong> E</strong>. Molde do tipo aberto para retirada do tipo</p>
<p>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).</p>
<div style="text-align: center;">
<dl style="display: block; margin-left: auto; margin-right: auto; text-align: center; background-color: #f3f3f3; padding-top: 4px; margin-top: 10px; margin-bottom: 10px; -webkit-border-top-right-radius: 3px 3px; -webkit-border-top-left-radius: 3px 3px; -webkit-border-bottom-left-radius: 3px 3px; -webkit-border-bottom-right-radius: 3px 3px; width: 360px; border: 1px solid #dddddd;">
<dt><img style="margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; display: block; padding: 0px; border: 0px initial initial;" title="image" src="http://pt.pixeis.net/wp-content/uploads/2009/10/image4.png" border="0" alt="image" width="350" height="483" /></dt>
<dd style="font-size: 11px; line-height: 17px; padding-top: 0px; padding-right: 4px; padding-bottom: 5px; padding-left: 4px; margin: 0px;">Uma página do Génesis, da bíblia de Gutemberg.</dd>
</dl>
</div>
<p>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.<br />
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.<br />
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.</p>
<div style="text-align: center;">
<dl id="attachment_1547" style="display: block; margin-left: auto; margin-right: auto; text-align: center; background-color: #f3f3f3; padding-top: 4px; margin-top: 10px; margin-bottom: 10px; -webkit-border-top-right-radius: 3px 3px; -webkit-border-top-left-radius: 3px 3px; -webkit-border-bottom-left-radius: 3px 3px; -webkit-border-bottom-right-radius: 3px 3px; width: 528px; border: 1px solid #dddddd;">
<dt><img style="padding: 0px; margin: 0px; border: 0px none initial;" title="image.png" src="http://pt.pixeis.net/wp-content/uploads/2009/10/image5.png" alt="image.png" width="518" height="341" /></dt>
<dd style="font-size: 11px; line-height: 17px; padding-top: 0px; padding-right: 4px; padding-bottom: 5px; padding-left: 4px; margin: 0px;">Demonstração de Frutiger de como o traço dos tipos varia de acordo com a etnologia. (Frutiger, 1999)</dd>
</dl>
</div>
<p>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.<br />
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.</p>
<div style="text-align: center;">
<dl style="display: block; margin-left: auto; margin-right: auto; text-align: center; background-color: #f3f3f3; padding-top: 4px; margin-top: 10px; margin-bottom: 10px; -webkit-border-top-right-radius: 3px 3px; -webkit-border-top-left-radius: 3px 3px; -webkit-border-bottom-left-radius: 3px 3px; -webkit-border-bottom-right-radius: 3px 3px; width: 639px; border: 1px solid #dddddd;">
<dt><img style="display: block; padding: 0px; margin: 0px; border: 0px initial initial;" title="image" src="http://pt.pixeis.net/wp-content/uploads/2009/10/image6.png" border="0" alt="image" width="629" height="744" /></dt>
<dd style="font-size: 11px; line-height: 17px; padding-top: 0px; padding-right: 4px; padding-bottom: 5px; padding-left: 4px; margin: 0px;">Visão esquemática de uma Linotype. (Craig, 1979)</dd>
</dl>
</div>
<p>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&#215;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.</p>
<div style="text-align: center;">
<dl id="attachment_1549" style="display: block; margin-left: auto; margin-right: auto; text-align: center; background-color: #f3f3f3; padding-top: 4px; margin-top: 10px; margin-bottom: 10px; -webkit-border-top-right-radius: 3px 3px; -webkit-border-top-left-radius: 3px 3px; -webkit-border-bottom-left-radius: 3px 3px; -webkit-border-bottom-right-radius: 3px 3px; width: 347px; border: 1px solid #dddddd;">
<dt><img style="padding: 0px; margin: 0px; border: 0px none initial;" title="image.png" src="http://pt.pixeis.net/wp-content/uploads/2009/10/image7.png" alt="image.png" width="337" height="309" /></dt>
<dd style="font-size: 11px; line-height: 17px; padding-top: 0px; padding-right: 4px; padding-bottom: 5px; padding-left: 4px; margin: 0px;">Monitor de computador de uma fotocompositora (Craig, 1979)</dd>
</dl>
</div>
<p>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.</p>
<div style="text-align: center;">
<dl id="attachment_1550" style="display: block; margin-left: auto; margin-right: auto; text-align: center; background-color: #f3f3f3; padding-top: 4px; margin-top: 10px; margin-bottom: 10px; -webkit-border-top-right-radius: 3px 3px; -webkit-border-top-left-radius: 3px 3px; -webkit-border-bottom-left-radius: 3px 3px; -webkit-border-bottom-right-radius: 3px 3px; width: 538px; border: 1px solid #dddddd;">
<dt><img style="padding: 0px; margin: 0px; border: 0px none initial;" title="image.png" src="http://pt.pixeis.net/wp-content/uploads/2009/10/image8.png" alt="image.png" width="528" height="278" /></dt>
<dd style="font-size: 11px; line-height: 17px; padding-top: 0px; padding-right: 4px; padding-bottom: 5px; padding-left: 4px; margin: 0px;">Esquema de funcionamento de um tubo de raios catódicos (Richards,1980)</dd>
</dl>
</div>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<h1 style="font-size: 2em;">Legibilidade</h1>
<h2 style="font-size: 1.5em;">O Que é Legibilidade?</h2>
<p>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).<br />
A legibilidade é uma grandeza empírica, traduzível em números.<br />
Existem entretanto vários testes para a medir:</p>
<ul>
<li>A velocidade de leitura,</li>
<li>A compreensão (retenção de conteúdos),</li>
<li>O movimento ocular</li>
</ul>
<p>E ainda outros parâmetros e critérios.<br />
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.</p>
<div style="text-align: center;">
<dl style="display: block; margin-left: auto; margin-right: auto; text-align: center; background-color: #f3f3f3; padding-top: 4px; margin-top: 10px; margin-bottom: 10px; -webkit-border-top-right-radius: 3px 3px; -webkit-border-top-left-radius: 3px 3px; -webkit-border-bottom-left-radius: 3px 3px; -webkit-border-bottom-right-radius: 3px 3px; width: 185px; border: 1px solid #dddddd;">
<dt><img style="margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; display: block; padding: 0px; border: 0px initial initial;" title="image" src="http://pt.pixeis.net/wp-content/uploads/2009/10/image9.png" border="0" alt="image" width="175" height="160" /></dt>
<dd style="font-size: 11px; line-height: 17px; padding-top: 0px; padding-right: 4px; padding-bottom: 5px; padding-left: 4px; margin: 0px;">Teste de legibilidade de conteúdos mostrados no monitor. A aparelhagem analisa os movimentos oculares.</dd>
</dl>
</div>
<p>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.<br />
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.<br />
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.<br />
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.<br />
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.<br />
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.<br />
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.<br />
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”.<br />
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.</p>
<p>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”.<br />
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.<br />
A combinação do brilho de uma superfície com um grande contraste torna cansativa a nossa vista como podemos constatar mais a frente.</p>
<h1 style="font-size: 2em;">Métodos de investigação de Legibilidade</h1>
<p>Tinker, no seu livro, &#8220;Legibility of Print&#8221; enumera os seguintes métodos de investigação de legibilidade</p>
<ul>
<li>Velocidade de percepção</li>
<li>Perceptibilidade à distância</li>
<li>Perceptibilidade na visão periférica</li>
<li>Visibilidade</li>
<li>Fadiga na leitura</li>
<li>Velocidade de trabalho</li>
<li>Movimentos do olho</li>
</ul>
<h2 style="font-size: 1.5em;">Velocidade de percepção</h2>
<p>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.<br />
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)<br />
A duração das fixações e a direcção dos movimentos dependem de:</p>
<p><strong>a)</strong> as características do texto</p>
<p><strong>b)</strong> a maturidade cognitiva do leitor</p>
<p><strong>c)</strong> a sua concentração</p>
<p><strong>d)</strong> a visão e a fadiga ocular</p>
<p><strong>e)</strong> a iluminação</p>
<p><strong>f)</strong> a distância do olho ao texto</p>
<p><strong>g)</strong> a postura do corpo</p>
<p><strong>h)</strong> o tipo de letra e papel.</p>
<p><img style="display: block; float: none; margin-left: auto; margin-right: auto; border: 0px initial initial;" title="image" src="http://pt.pixeis.net/wp-content/uploads/2009/10/image10.png" border="0" alt="image" width="515" height="242" /></p>
<p>Durante uma fixação, existe um limite para a quantidade de informação que pode ser assimilada.<br />
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.<br />
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.</p>
<div style="text-align: center;">
<dl style="display: block; margin-left: auto; margin-right: auto; text-align: center; background-color: #f3f3f3; padding-top: 4px; margin-top: 10px; margin-bottom: 10px; -webkit-border-top-right-radius: 3px 3px; -webkit-border-top-left-radius: 3px 3px; -webkit-border-bottom-left-radius: 3px 3px; -webkit-border-bottom-right-radius: 3px 3px; width: 321px; border: 1px solid #dddddd;">
<dt><img style="margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; display: block; padding: 0px; border: 0px initial initial;" title="image" src="http://pt.pixeis.net/wp-content/uploads/2009/10/image11.png" border="0" alt="image" width="311" height="488" /></dt>
<dd style="font-size: 11px; line-height: 17px; padding-top: 0px; padding-right: 4px; padding-bottom: 5px; padding-left: 4px; margin: 0px;">Fixações: Capa de Visible Language, volume XV, Nº2. Movimento, direcção e pontos de fixação que estão impressos na capa deste volume dedicado aos estímulos visuais e reconhecimento das palavras na leitura</dd>
</dl>
</div>
<h2 style="font-size: 1.5em;">Perceptibilidade à distância</h2>
<p>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.<br />
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.</p>
<h2 style="font-size: 1.5em;">Perceptibilidade na visão periférica</h2>
<p>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.</p>
<h2 style="font-size: 1.5em;">Visibilidade</h2>
<p>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.<br />
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.<br />
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.</p>
<h2 style="font-size: 1.5em;">Fadiga na leitura</h2>
<p>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.</p>
<h2 style="font-size: 1.5em;">Velocidade de trabalho</h2>
<p>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.</p>
<h2 style="font-size: 1.5em;">Movimentos do olho</h2>
<p>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.<br />
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.</p>
<div style="text-align: center;">
<dl style="display: block; margin-left: auto; margin-right: auto; text-align: center; background-color: #f3f3f3; padding-top: 4px; margin-top: 10px; margin-bottom: 10px; -webkit-border-top-right-radius: 3px 3px; -webkit-border-top-left-radius: 3px 3px; -webkit-border-bottom-left-radius: 3px 3px; -webkit-border-bottom-right-radius: 3px 3px; width: 451px; border: 1px solid #dddddd;">
<dt><img style="margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; display: block; padding: 0px; border: 0px initial initial;" title="image" src="http://pt.pixeis.net/wp-content/uploads/2009/10/image12.png" border="0" alt="image" width="441" height="252" /></dt>
<dd style="font-size: 11px; line-height: 17px; padding-top: 0px; padding-right: 4px; padding-bottom: 5px; padding-left: 4px; margin: 0px;">Exemplo de movimento dos olhos. A figura de cima mostra os movimentos de olho de uma boa leitura de duas linhas de um texto, enquanto a figura de baixo mostra um mau leitor lendo uma linha do mesmo texto. A letra B indica o começo e E o final, a letra R mostra uma regressão (Tinker, 1969)</dd>
</dl>
</div>
<h2 style="font-size: 1.5em;">Estrutura do Traço</h2>
<p>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.<br />
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.<br />
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.</p>
<div style="text-align: center;">
<dl style="display: block; margin-left: auto; margin-right: auto; text-align: center; background-color: #f3f3f3; padding-top: 4px; margin-top: 10px; margin-bottom: 10px; -webkit-border-top-right-radius: 3px 3px; -webkit-border-top-left-radius: 3px 3px; -webkit-border-bottom-left-radius: 3px 3px; -webkit-border-bottom-right-radius: 3px 3px; width: 338px; border: 1px solid #dddddd;">
<dt><img style="margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; display: block; padding: 0px; border: 0px initial initial;" title="image" src="http://pt.pixeis.net/wp-content/uploads/2009/10/image13.png" border="0" alt="image" width="328" height="444" /></dt>
<dd style="font-size: 11px; line-height: 17px; padding-top: 0px; padding-right: 4px; padding-bottom: 5px; padding-left: 4px; margin: 0px;">Proporção entre espessura e altura dos caracteres (Frutiger, 1999)</dd>
</dl>
</div>
<h2 style="font-size: 1.5em;">Altura do X</h2>
<p>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.<br />
Existe ainda um limite a partir do qual a legibilidade é prejudicada por falta de distinção entre os caracteres, por exemplo entre o &#8220;n&#8221; e o &#8220;h&#8221; 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.</p>
<p><img style="display: block; float: none; margin-left: auto; margin-right: auto; border: 0px initial initial;" title="image" src="http://pt.pixeis.net/wp-content/uploads/2009/10/image14.png" border="0" alt="image" width="550" height="498" /></p>
<h2 style="font-size: 1.5em;">Facilidade de Leitura</h2>
<p>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.<br />
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.<br />
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.<br />
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.<br />
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.<br />
Atenção, claro que são todas perfeitamente legíveis e agradáveis de ler, contudo umas mais eficazes do que outras.<br />
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.<br />
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.<br />
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.<br />
Deve-se adaptar o estilo ao caso que se pretende para que o leitor se sinta confortável.</p>
<p style="text-align: center;"><strong>TheSans</strong></p>
<div style="text-align: center;">
<dl style="display: block; margin-left: auto; margin-right: auto; text-align: center; background-color: #f3f3f3; padding-top: 4px; margin-top: 10px; margin-bottom: 10px; -webkit-border-top-right-radius: 3px 3px; -webkit-border-top-left-radius: 3px 3px; -webkit-border-bottom-left-radius: 3px 3px; -webkit-border-bottom-right-radius: 3px 3px; width: 413px; border: 1px solid #dddddd;">
<dt><img style="margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; display: block; padding: 0px; border: 0px initial initial;" title="image" src="http://pt.pixeis.net/wp-content/uploads/2009/10/image15.png" border="0" alt="image" width="403" height="266" /></dt>
<dd style="font-size: 11px; line-height: 17px; padding-top: 0px; padding-right: 4px; padding-bottom: 5px; padding-left: 4px; margin: 0px;">Parte da extensa família Thesis. É a junção da família TheMix e TheSerif. Designer: Luc(as) de Groot. Ano: 1994-9. Editora: FontFabrik</dd>
</dl>
</div>
<p><img style="display: block; float: none; margin-left: auto; margin-right: auto; border: 0px initial initial;" title="image" src="http://pt.pixeis.net/wp-content/uploads/2009/10/image16.png" border="0" alt="image" width="338" height="58" /><img style="display: block; float: none; margin-left: auto; margin-right: auto; border: 0px initial initial;" title="image" src="http://pt.pixeis.net/wp-content/uploads/2009/10/image17.png" border="0" alt="image" width="338" height="58" /><img style="display: block; float: none; margin-left: auto; margin-right: auto; border: 0px initial initial;" title="image" src="http://pt.pixeis.net/wp-content/uploads/2009/10/image18.png" border="0" alt="image" width="338" height="40" /></p>
<h1 style="font-size: 2em;">Fluência</h1>
<h2 style="font-size: 1.5em;">Manipulação do espaço</h2>
<p><img style="display: block; float: none; margin-left: auto; margin-right: auto; border: 0px initial initial;" title="image" src="http://pt.pixeis.net/wp-content/uploads/2009/10/image19.png" border="0" alt="image" width="148" height="67" />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.<br />
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.<br />
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.<br />
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.</p>
<p>As melhores fontes contêm até 1000 pares de kern enquanto a maioria delas contém entre de 200 e 500 pares.</p>
<div style="text-align: center;">
<dl style="display: block; margin-left: auto; margin-right: auto; text-align: center; background-color: #f3f3f3; padding-top: 4px; margin-top: 10px; margin-bottom: 10px; -webkit-border-top-right-radius: 3px 3px; -webkit-border-top-left-radius: 3px 3px; -webkit-border-bottom-left-radius: 3px 3px; -webkit-border-bottom-right-radius: 3px 3px; width: 539px; border: 1px solid #dddddd;">
<dt><img style="margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; display: block; padding: 0px; border: 0px initial initial;" title="image" src="http://pt.pixeis.net/wp-content/uploads/2009/10/image20.png" border="0" alt="image" width="529" height="658" /></dt>
<dd style="font-size: 11px; line-height: 17px; padding-top: 0px; padding-right: 4px; padding-bottom: 5px; padding-left: 4px; margin: 0px;">Caracteres com kern adequado e sem kern regulado</dd>
</dl>
</div>
<h2 style="font-size: 1.5em;">Espaço entre palavras</h2>
<p>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.<br />
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».<br />
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.</p>
<p>É 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.<br />
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.<br />
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.<br />
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.<br />
Segundo &#8220;The Tames and Hudson Manual of Typography&#8221; o espaçamento entre as palavras é igual ao tamanho de um i minúsculo.</p>
<p><img style="display: block; float: none; margin-left: auto; margin-right: auto; border: 0px initial initial;" title="image" src="http://pt.pixeis.net/wp-content/uploads/2009/10/image21.png" border="0" alt="image" width="332" height="51" /></p>
<h2 style="font-size: 1.5em;">Espaço entre linhas</h2>
<p>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.<br />
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.<br />
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.<br />
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.<br />
Este valor deverá ser ajustado com a quantidade de espaço entre linha adequada.<br />
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:</p>
<p><strong>6 Pontos</strong><br />
Linhas de 14 picas com entrelinhamento entre 2 e 4pt<br />
Linhas de 12 picas com entrelinhamento entre 1 e 4pt<br />
Linhas de 28 picas com entrelinhamento entre 2 e 4pt<br />
<strong>8 Pontos</strong><br />
Linhas de 14 picas com entrelinhamento entre 2 e 4pt<br />
Linhas de 21 picas com entrelinhamento entre 2 e 4pt<br />
Linhas de 28 picas com entrelinhamento entre 1 e 4pt<br />
Linhas de 36 picas com entrelinhamento entre 2 e 4pt<br />
<strong>9 Pontos</strong><br />
Linhas de 14 picas com entrelinhamento entre 1 e 4pt<br />
Linhas de 18 picas com entrelinhamento entre 1 e 4pt<br />
Linhas de 30 picas com entrelinhamento entre 1 e 4pt<br />
<strong>10 Pontos</strong><br />
Linhas de 14 picas com entrelinhamento entre 1 e 4pt<br />
Linhas de 19 picas com entrelinhamento entre 2 e 4pt<br />
Linhas de 31 picas com entrelinhamento de 2pt (margem)<br />
<strong>11 Pontos</strong><br />
Linhas de 16 picas com entrelinhamento entre 1 e 2pt<br />
Linhas de 25 picas com ou sem entrelinhamento<br />
Linhas de 34 picas com entrelinhamento entre 1 e 2pt<br />
<strong>12 Pontos<br />
</strong>Linhas de 17 picas com entrelinhamento entre 1 e 4pt<br />
Linhas de 25 picas com ou sem entrelinhamento<br />
Linhas de 33 picas com entrelinhamento entre 1 e 4pt</p>
<h2 style="font-size: 1.5em;">Cor</h2>
<p>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.<br />
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.<br />
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).</p>
<p>Os resultados mais significantes foram apresentados abaixo:</p>
<p><strong>Legibilidade comparada entre contraste negativo e positivo velocidade de leitura:</strong></p>
<div>
<table style="cursor: default; border: 1px dashed #bbbbbb;" border="0" cellspacing="0" cellpadding="2" width="339" align="center">
<tbody>
<tr>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="150" valign="top"><strong>Arranjo comparado</strong></td>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="187" valign="top"><strong>Diferença em %</strong></td>
</tr>
<tr>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="150" valign="top">Preto no branco</td>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="187" valign="top">0</td>
</tr>
<tr>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="150" valign="top">Branco no preto</td>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="187" valign="top">-10.5</td>
</tr>
</tbody>
</table>
</div>
<p><strong>Opinião dos leitores:</strong></p>
<div>
<table style="cursor: default; border: 1px dashed #bbbbbb;" border="0" cellspacing="0" cellpadding="2" width="338" align="center">
<tbody>
<tr>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="150" valign="top"><strong>Arranjo</strong></td>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="186" valign="top"><strong>Percentagem preferida</strong></td>
</tr>
<tr>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="150" valign="top">Preto no branco</td>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="186" valign="top">77.7</td>
</tr>
<tr>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="150" valign="top">Branco no preto</td>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="186" valign="top">22.3</td>
</tr>
</tbody>
</table>
</div>
<p><strong>Legibilidade da impressão colorida sobre papel colorido e velocidade de leitura (Tinker, 1969)</strong></p>
<table style="cursor: default; border: 1px dashed #bbbbbb;" border="0" cellspacing="0" cellpadding="2" width="546" align="center">
<tbody>
<tr>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="388" valign="top"><strong>Combinação de cor comparada com preto sobre branco</strong></td>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="156" valign="top"><strong>Diferença em %</strong></td>
</tr>
<tr>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="388" valign="top">Preto no branco</td>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="156" valign="top">0.0</td>
</tr>
<tr>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="388" valign="top">Verde sobre branco</td>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="156" valign="top">-3.0</td>
</tr>
<tr>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="388" valign="top">Preto sobre amarelo</td>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="156" valign="top">-3.4</td>
</tr>
<tr>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="388" valign="top">Vermelho sobre amarelo</td>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="156" valign="top">-3.8</td>
</tr>
<tr>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="388" valign="top">Verde sobre vermelho</td>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="156" valign="top">-10.6</td>
</tr>
<tr>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="388" valign="top">Laranja sobre preto</td>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="156" valign="top">-13.5</td>
</tr>
<tr>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="388" valign="top">Laranja sobre branco</td>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="156" valign="top">-20.9</td>
</tr>
<tr>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="388" valign="top">Vermelho sobre verde</td>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="156" valign="top">-39.5</td>
</tr>
<tr>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="388" valign="top">Preto sobre púrpura</td>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="156" valign="top">-51.5</td>
</tr>
</tbody>
</table>
<p><strong>Nível de compreensão de texto para texto impresso à cores sobre fundo branco (Weildon, 1966)</strong></p>
<table style="cursor: default; border: 1px dashed #bbbbbb;" border="0" cellspacing="0" cellpadding="2" width="370" align="center">
<tbody>
<tr>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="236" valign="top"><strong>Cor utilizada no texto</strong></td>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="46" valign="top"><strong>Boa</strong></td>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="49" valign="top"><strong>Média</strong></td>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="37" valign="top"><strong>Má</strong></td>
</tr>
<tr>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="236" valign="top">Preto</td>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="46" valign="top">70%</td>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="49" valign="top">19%</td>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="37" valign="top">11%</td>
</tr>
<tr>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="236" valign="top">Cor de baixa intensidade (púrpura)</td>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="46" valign="top">51%</td>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="49" valign="top">13%</td>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="37" valign="top">36%</td>
</tr>
<tr>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="236" valign="top">Cor de média intensidade (azul)</td>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="46" valign="top">29%</td>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="49" valign="top">22%</td>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="37" valign="top">49%</td>
</tr>
<tr>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="236" valign="top">Cor opaca (verde)</td>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="46" valign="top">10%</td>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="49" valign="top">13%</td>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="37" valign="top">77%</td>
</tr>
<tr>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="236" valign="top">Cor de alta intensidade (ciano)</td>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="46" valign="top">10%</td>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="49" valign="top">9%</td>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="37" valign="top">81%</td>
</tr>
</tbody>
</table>
<p><strong>Nível de compreensão de leitura para texto com fundo cinza. (Weildon, 1966)</strong></p>
<table style="cursor: default; border: 1px dashed #bbbbbb;" border="0" cellspacing="0" cellpadding="2" width="370" align="center">
<tbody>
<tr>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="236" valign="top"><strong>Cor utilizada no texto</strong></td>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="46" valign="top"><strong>Boa</strong></td>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="49" valign="top"><strong>Média</strong></td>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="37" valign="top"><strong>Má</strong></td>
</tr>
<tr>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="236" valign="top">Preto sobre branco</td>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="46" valign="top">70%</td>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="49" valign="top">19%</td>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="37" valign="top">11%</td>
</tr>
<tr>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="236" valign="top">Preto sobre preto 10%</td>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="46" valign="top">63%</td>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="49" valign="top">22%</td>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="37" valign="top">15%</td>
</tr>
<tr>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="236" valign="top">Preto sobre preto 20%</td>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="46" valign="top">33%</td>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="49" valign="top">18%</td>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="37" valign="top">49%</td>
</tr>
<tr>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="236" valign="top">Preto sobre preto 30%</td>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="46" valign="top">3%</td>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="49" valign="top">10%</td>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="37" valign="top">87%</td>
</tr>
</tbody>
</table>
<h2 style="font-size: 1.5em;">Organização espacial</h2>
<p>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.</p>
<h2 style="font-size: 1.5em;">Princípio da gravidade de leitura.</h2>
<p>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.<br />
O diagrama de Gutemberg mostra o percurso que o olho faz pela página</p>
<p><img style="display: block; float: none; margin-left: auto; margin-right: auto; border: 0px initial initial;" title="image" src="http://pt.pixeis.net/wp-content/uploads/2009/10/image22.png" border="0" alt="image" width="250" height="355" /></p>
<p><strong>1.</strong> Zona óptica primária<br />
<strong>2.</strong> Âncora terminal<br />
<strong>3</strong> e <strong>4.</strong> Zonas Mortas<br />
<strong>5.</strong> Centro óptico<br />
<strong>6.</strong> Coentro Geométrico</p>
<h2 style="font-size: 1.5em;">Teoria da forma (Gestalt)</h2>
<p>Uma das técnicas da New Typography, tinha como base na teoria de Gestalt, desenvolvida nas décadas de 20 e 30 na Alemanha.<br />
Uma frase associada à teoria de Gestalt é: &#8220;O todo é maior que a soma das partes&#8221;.<br />
Os princípios mais relevantes para a tipografia são os seguintes:</p>
<p>• • • ••••••••• • • • • • • •<br />
Agrupamento por proximidade.</p>
<p>&#8230;&#8230;&#8230;&#8230;&#8230;&#8221;&#8221;&#8221;&#8221;&#8221;&#8221;&#8221;&#8221;&#8221;&#8221;&#8230;&#8230;&#8230;&#8230;..<br />
Agrupamento por similaridade</p>
<p>[••••] (••) {••}<br />
Agrupamento por fechamento</p>
<p>|&#8230;..|&#8230;|..|&#8230;..|&#8230;..|&#8230;..|&#8230;.|&#8230;.|&#8230;|<br />
Agrupamento por repetição</p>
<p>.; ; : . ; . : . . : : . :: ; ; . :<br />
Agrupamento por continuação</p>
<p>.: ; .. &#8220;&#8221; . : ; ;;;::&#8230;.&#8221; &#8216;<br />
Agrupamento por relação figura -fundo</p>
<p>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.</p>
<h2 style="font-size: 1.5em;">Sintagrama do leitor</h2>
<p>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.<br />
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.<br />
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.</p>
<p><strong>Métodos de configuração de Twymn (1979), com as conjecturadas regras de leitura de Waller (Waller, 1988)</strong></p>
<div>
<table style="cursor: default; border: 1px dashed #bbbbbb;" border="0" cellspacing="0" cellpadding="2" width="451" align="center">
<tbody>
<tr>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="224" valign="top"><strong>Configuração</strong></td>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="225" valign="top"><strong>Regras de leitura implícitas</strong></td>
</tr>
<tr>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="224" valign="top">Puramente linear</td>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="225" valign="top">Começa no começo e continua até o fim</td>
</tr>
<tr>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="224" valign="top">Linear interrompido</td>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="225" valign="top">Começa no começo e continua até o fim, desconsiderando as interrupções, que são arbitrárias; a cada interrupção continua a ser lida na próxima linha, coluna ou página</td>
</tr>
<tr>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="224" valign="top">Lista</td>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="225" valign="top">Começa em algum ponto relevante e deixa a responsabilidade do que estiver lendo determinar qual parte (conectada) é lida depois</td>
</tr>
<tr>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="224" valign="top">Matriz</td>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="225" valign="top">Selecciona um dos tópicos de cada eixo e lê a intersecção entre eles, ou vice-versa. Ou compara os conteúdos de uma determinada coluna ou linha, ou compara o conteúdo de todas as colunas ou linhas</td>
</tr>
<tr>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="224" valign="top">Leitura directa não linear</td>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="225" valign="top">Começa no(s) ponto(s) focal(is) da publicação e continua como instruído ou como parecer razoável</td>
</tr>
<tr>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="224" valign="top">Opções não lineares</td>
<td style="color: #000000; font-size: 11px; cursor: text; margin: 8px; border: 1px dashed #bbbbbb;" width="225" valign="top">Faz como quiser</td>
</tr>
</tbody>
</table>
</div>
<h1 style="font-size: 2em;">Da Imprensa aos Media Electrónicos</h1>
<p>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.<br />
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, &#8220;blogs&#8221; e a &#8220;World Wide Web&#8221; – cuja natureza é estarem em contínua mudança.<br />
A primeira característica do Internet é ser uma rede &#8220;anárquica&#8221;, 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 &#8220;on-line&#8221;, portanto em tempo real. Os meios de comunicação da Internet vão do correio electrónico – através de &#8220;células&#8221; de múltiplos utilizadores (ou MUD´s) – espaços virtuais que permitem manter conversas e simples descrições da acção &#8211; 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.<br />
A Rede é talvez um dos meios de comunicação que será crucial para a sobrevivência da espécie no século XXI.<br />
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&#8230;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.<br />
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).<br />
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 &#8220;cibernautas&#8221; 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.<br />
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.<br />
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.<br />
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).<br />
Com o aparecimento da imprensa tornou-se possível reproduzir as obras dos escritores em grande escala, tornando baixo os custos de produção.<br />
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.</p>
<h1 style="font-size: 2em;">Reprodução Electrónica</h1>
<p>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.<br />
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.<br />
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 &#8211; a imaterialidade dos signos nos ecrãs em comparação com a tinta sobre a página &#8211; 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.<br />
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.<br />
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)</p>
<h1 style="font-size: 2em;">Destruição do “Velho livro”?</h1>
<p>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.<br />
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).<br />
Hoje em dia, está destinado a perder o seu domínio como veículo de conhecimento sendo substituído pelo livro electrónico.<br />
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.<br />
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.<br />
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.<br />
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.<br />
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.<br />
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.</p>
<h2 style="font-size: 1.5em;">“ Novo livro electrónico pode ter papel e tinta”</h2>
<p>Entrevista a Roger Chartier por Cristiane Costa <em>in</em> JORNAL DO BRASIL (<a href="http://jbonline.terra.com.br/destaques/bienal/entrevista1.html" target="_blank">link</a>)</p>
<p>“<strong>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?<br />
</strong>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.</p>
<p><strong>Quais as principais mudanças trazidas pelo computador?<br />
</strong>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.</p>
<p><strong>Em quanto tempo o senhor acredita que a informática seja capaz de produzir um livro electrónico perfeito? Como ele seria?<br />
</strong>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&#8230;</p>
<p><strong>Mas o lançamento do E-Paper pode mudar esse cenário, não?</strong><br />
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 &#8211; de maneira que não se quebrem velhos hábitos de leitura. Um livro feito com papel e tinta, ainda que electrónicos. <strong>”</strong></p>
<h1 style="font-size: 2em;">Hipermédia</h1>
<p>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.<br />
A tradição manuscrita da linguagem e do conhecimento foi posta em causa devido à existência da hipermédia.<br />
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.<br />
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.<br />
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.<br />
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.<br />
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.<br />
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.<br />
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.<br />
É 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.</p>
<h1 style="font-size: 2em;">Caracteres Tipográficos no ecrã</h1>
<p>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.<br />
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.<br />
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.<br />
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.<br />
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.<br />
É 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.<br />
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.</p>
<h1 style="font-size: 2em;">Legibilidade no ecrã</h1>
<p>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).<br />
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.<br />
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.<br />
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.<br />
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.<br />
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.<br />
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.</p>
<h2 style="font-size: 1.5em;">Melhorar a legibilidade on-line</h2>
<ul>
<li>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.</li>
<li>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.</li>
<li>Use um tamanho de letra que as pessoas possam ler claramente. Deixe a letra pequena para advertências legais, bibliografia, notas no rodapé, etc.</li>
<li>Utilize texto estático: o texto em movimento a piscar, ou que muda de tamanho tem uma leitura mais difícil.</li>
<li>Alinhe o texto à esquerda para ter um ponto fixo para começar a leitura; o olho se move mais rapidamente.</li>
<li>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.</li>
<li>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.</li>
<li>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.</li>
<li>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.</li>
</ul>
<h2 style="font-size: 1.5em;">A melhor maneira de escrever para um Sitio Web</h2>
<p>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:</p>
<p><strong>Conselhos para escrever para a web:</strong></p>
<ul>
<li>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.</li>
<li>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.</li>
<li>Hierarquia da informação: use 3 ou 4 níveis de subtítulos</li>
<li>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. &#8220;Uma ideia por parágrafo&#8221; deve ser o objectivo.</li>
<li>Use linguagem simples, reduza o uso de metáforas e uma linguagem complicada.</li>
<li>Corrija a ortografia: um erro pode comprometer a seriedade e a imagem do site.</li>
<li>Faça uso do meio: utilize hiperligações de texto para desmembrar um documento em vários.</li>
</ul>
<h2 style="font-size: 1.5em;">Formatar textos para uma boa legibilidade na Web</h2>
<p>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.<br />
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.</p>
<p><img style="display: block; float: none; margin-left: auto; margin-right: auto; border: 0px initial initial;" title="image" src="http://pt.pixeis.net/wp-content/uploads/2009/10/image23.png" border="0" alt="image" width="403" height="200" /></p>
<p>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.<br />
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.<br />
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.</p>
<h2 style="font-size: 1.5em;">Como Escrever Uma hiperligação</h2>
<p>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.<br />
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 &#8220;click aqui&#8221;.<br />
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.<br />
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.<br />
Para melhorar a usabilidade, não mude a cor das hiperligações a sua cor habitual é o azul.</p>
<p><strong>Nos documentos da Internet há três tipos de hiperligações:</strong></p>
<p><strong>Estruturais ou de navegação:</strong> botões a páginas subordinadas, barras, opções.<br />
<strong>Associativas:</strong> dentro do corpo da mesma página. Desviam para outros pontos dentro do mesmo documento, em outros documentos, ou a páginas externas.<br />
<strong>Referencial:</strong> um conjunto de hiperligações que conduzem a temas relacionados. Usualmente colocados em uma tabela próxima a informação principal.</p>
<h2 style="font-size: 1.5em;">Multimédia</h2>
<p>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.<br />
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.<br />
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.<br />
Ofereça versões ampliadas (ou &#8220;pesadas&#8221;) quando realmente vale a pena (ex. imagem de microscópio).<br />
As animações chamam a atenção do navegante, porém podem ser extremamente lentas.</p>
<p><strong>Em baixo veja alguns usos básicos de animação:</strong></p>
<ul>
<li>Mostrar transições: usado para indicar mudanças de estado (ex.: passagem do estado liquido para o gasoso).</li>
<li>Indicar a dimensionalidade: por exemplo, fazer zoom.</li>
<li>Ilustrar mudanças com o tempo: ex. A evolução da contaminação de um rio com o tempo.</li>
<li>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.</li>
<li>Enriquecer uma representação gráfica: ex. Ícones que indicam acções, ou como enviar um e-mail.</li>
<li>Mostrar estruturas tridimensionais: ex.: estrutura de uma casa.</li>
</ul>
<p>O som deve complementar, e não competir com a informação na tela.<br />
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.<br />
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.</p>
<h1 style="font-size: 2em;">Conclusão</h1>
<p>Todas as resoluções encontradas são só indicações para chegarmos a um bom caminho.<br />
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.<br />
David Carson, escreveu:<br />
&#8220;<em>Se alguém tivesse que colocar os designers gráficos em categorias, elas seriam três: solucionadores de problemas, estrelas e pragas.</em></p>
<p><em>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.</em></p>
<p><em>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.</em>&#8221;</p>
<p>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.</p>
<p>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.<br />
As pesquisas científicas a este campo viriam trazer muita informação útil que deveria ser ensinada nas escolas e faculdades de design.<br />
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.<br />
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.<br />
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.<br />
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.<br />
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.<br />
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.<br />
Cada livro, da primeira a ultima página, abranja, um pequeno mundo frágil e presente dando-nos o conhecimento.</p>
<p>Bibliografia</p>
<p>Cebular, Gregory (s/d): &#8220;Internet as a Mass Medium&#8221;, in<br />
&lt;http://oak.cats.ohiou.edu/~gc431997/tdgac.htm&gt; (acesso: 26 Dezembro 2007)</p>
<p>Costa, Cristiane (2001): &#8221;Novo livro eletrônico pode ter papel e tinta&#8221; in &lt;http://jbonline.terra.com.br/destaques/bienal/entrevista1.html&gt; (acesso: 28 Dezembro 2007)</p>
<p>Mourão, José Augusto (2001): &#8220;Passagens&#8221;, &#8220;Da Imprensa aos Media Electrónicos&#8221; e &#8220;O que é o hipertexto?&#8221;, in &lt;http://www.triplov.com/hipert/passag.htm&gt;, &lt;http://www.triplov.com/hipert/imprensa.htm&gt; (acesso:30 Dezembro de 2007)</p>
<p>Avellar e Duarte Consultoria e Design (2005): “Legibilidade em tela”, in &lt;http://www.avellareduarte.com.br/projeto/conteudo/textos/textos1g.htm&gt; (30 Dezembro 2007)</p>
<p>Palomino, Luis: “Texto de papel vs. digital” in<br />
&lt;http://blog.pucp.edu.pe/item/13721&gt; (Acesso 4 Janeiro 2008)</p>
<p>Pinto, Cláudia M. J. (2004): “Do androids dream of electronic books? “, in<br />
&lt;http://www1.ci.uc.pt/diglit/DigLit%20Ensaios/Ensaios%202003-2004/Ensaio19.htm&gt; (acesso 21Dezembro)</p>
<div id="_mcePaste">Bernard, Michael L: “How should text be presented within a website?” in</div>
<div id="_mcePaste">&lt;http://psychology.wichita.edu/optimalweb/text.htm&gt; (acesso 21 Dezembro)</div>
<div></div>
<div>Macedo-Rouet, Mónica (2003): “Legibilidade de revistas eletrônicas de divulgação científica” in &lt;http://www.ibict.br/cionline/viewarticle.php?id=50&amp;layout=html&gt; (acesso 3 Janeiro 2008)</div>
<div></div>
<div>
<div>Stolfi, Ariane (2002) “Introdução” in<br />
&lt;http://finetanks.com/referencia/intro.php&gt; (acesso 3 de Janeiro)</div>
</div>
<p>Cardoso, Cláudio (18/05/97): &#8220;Notas Sobre a Geografia do Ciberespaço&#8221;, in &lt;http://www.facom.ufba.br/pretextos/claudio3.html&gt;, (acesso: 4 Janeiro 2007)</p>
<p>Marques, José (3/12/07):” Do androids dream of electronic books?” in<br />
&lt;http://becrevs.blogspot.com/2007/12/do-androids-dream-of-electronic-books.html&gt; (acesso 28 Dezembro 2007)</p>


<p>Artigos relacionados:<ol><li><a href='http://pt.pixeis.net/2009/09/como-desenhar-um-icone-de-ficheiro/' rel='bookmark' title='Permanent Link: Como desenhar um Ícone de Ficheiro'>Como desenhar um Ícone de Ficheiro</a> <small>Neste tutorial vamos aprender a desenhar um ícone de tipo de ficheiro no Photoshop...</small></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://pt.pixeis.net/2009/10/legibilidade/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>Como fazer um wallpaper estilo blueprint no Inkscape</title>
		<link>http://pt.pixeis.net/2009/08/como-fazer-umwallpaper-estilo-blueprint-no-inkscape/</link>
		<comments>http://pt.pixeis.net/2009/08/como-fazer-umwallpaper-estilo-blueprint-no-inkscape/#comments</comments>
		<pubDate>Mon, 17 Aug 2009 18:36:06 +0000</pubDate>
		<dc:creator>Ricardo Jorge</dc:creator>
				<category><![CDATA[Artigos]]></category>
		<category><![CDATA[Inkscape]]></category>
		<category><![CDATA[Tutoriais]]></category>
		<category><![CDATA[artes digitais]]></category>
		<category><![CDATA[carros]]></category>
		<category><![CDATA[Concept Car]]></category>
		<category><![CDATA[desenho]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[fontes]]></category>
		<category><![CDATA[fotos]]></category>
		<category><![CDATA[Illustrator]]></category>
		<category><![CDATA[ilustração]]></category>
		<category><![CDATA[logo]]></category>
		<category><![CDATA[Mazda]]></category>
		<category><![CDATA[Open-Source]]></category>
		<category><![CDATA[pen tool]]></category>
		<category><![CDATA[texto]]></category>
		<category><![CDATA[vector]]></category>
		<category><![CDATA[vectores]]></category>
		<category><![CDATA[wallpaper]]></category>

		<guid isPermaLink="false">http://pt.pixeis.net/?p=1361</guid>
		<description><![CDATA[Vamos aprender a fazer um wallpaper com um desenho técnico de um carro no Inkscape


Artigos relacionados:<ol><li><a href='http://pt.pixeis.net/2008/12/como-fazer-uma-t-shirt-para-geeks-no-inkscape/' rel='bookmark' title='Permanent Link: Como Fazer uma T-Shirt para Geeks no Inkscape'>Como Fazer uma T-Shirt para Geeks no Inkscape</a> <small>Vamos aprender a criar uma imagem para uma t-shirt do princípio ao fim no Inkscape. Aprendam a vectorizar e a...</small></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p style="text-align: left;">Olá, neste tutorial vamos ver como criar uma imagem totalmente no <a href="http://www.inkscape.org/" target="_blank">Inkscape</a> a partir de uma foto e vai ficar assim:</p>
<p><a href="http://pt.pixeis.net/wp-content/uploads/2009/08/Final.png" rel="shadowbox[post-1361];player=img;"><img class="aligncenter size-large wp-image-1362" title="Final" src="http://pt.pixeis.net/wp-content/uploads/2009/08/Final-550x343.png" alt="Final" width="550" height="343" /></a>Para isto, precisamos de duas coisas: uma foto do carro que queremos e o logo da marca do carro.</p>
<p>Eu escolhi o <strong>Mazda Kazamai</strong> porque mostra de forma muito nítida a espectacular nova política de design Nagare da Mazda. Podem obter a foto que vamos usar <a title="é a segunda foto da página" href="http://www.netcarshow.com/mazda/2008-kazamai_concept/03.htm" target="_blank">aqui</a> e o logo da Mazda obti no site <a href="http://www.brandsoftheworld.com/">BrandsOfTheWorld</a>, mas vem em formato EPS, por isso converti-o para podermos usar no Inkscape e podem obter o ficheiro convertido <a href="http://pt.pixeis.net/wp-content/uploads/2009/08/Mazda-Logo.svg">aqui</a>.</p>
<h1>1 – Novo Ficheiro</h1>
<p>Abram o Inkscape e pressionem Ctrl+Shift+D para abrir as configurações do ficheiro. Vamos alterar a dimensão da imagem para 1920x1200px:</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="propriedades" src="http://pt.pixeis.net/wp-content/uploads/2009/08/propriedades.jpg" border="0" alt="propriedades" width="387" height="545" /></p>
<p>Vamos agora fechar esta janela e arrastar a foto para a imagem..<img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="foto" src="http://pt.pixeis.net/wp-content/uploads/2009/08/foto.jpg" border="0" alt="foto" width="449" height="290" /></p>
<p>Rodem a roda do rato para fazerem zoom e pressionem a roda enquanto movem o rato para se moverem pela imagem.</p>
<h1>2 – Dar rodas ao nosso Mazda</h1>
<p>Vamos pegar na ferramenta dos círculos:</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="circle" src="http://pt.pixeis.net/wp-content/uploads/2009/08/circle.jpg" border="0" alt="circle" width="227" height="29" /></p>
<p>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):</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="roda1" src="http://pt.pixeis.net/wp-content/uploads/2009/08/roda1.jpg" border="0" alt="roda1" width="360" height="233" /></p>
<p>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.</p>
<p>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:</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="fill" src="http://pt.pixeis.net/wp-content/uploads/2009/08/fill.jpg" border="0" alt="fill" width="191" height="75" /></p>
<p>Isto vai abrir uma barra lateral com as opções de preenchimento do objecto seleccionado.. Cliquem no X para tirar o preenchimento.</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="nofill" src="http://pt.pixeis.net/wp-content/uploads/2009/08/nofill.jpg" border="0" alt="nofill" width="225" height="99" /></p>
<p>E agora vamos a Pintura de Traço e vamos escolher a cor branca:</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="branco" src="http://pt.pixeis.net/wp-content/uploads/2009/08/branco.jpg" border="0" alt="branco" width="352" height="311" /></p>
<p>(É só pressionar o botão do rato no interior do triângulo e arrastar até à zona branca)</p>
<p>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):</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="estilodetraco" src="http://pt.pixeis.net/wp-content/uploads/2009/08/estilodetraco.jpg" border="0" alt="estilodetraco" width="351" height="310" /></p>
<p>Vamos agora buscar a ferramenta de selecção:</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="seleccionar" src="http://pt.pixeis.net/wp-content/uploads/2009/08/seleccionar.jpg" border="0" alt="seleccionar" width="256" height="30" /></p>
<p>E vamos desactivar este botão na barra de cima do Inkscape do lado direito (só o primeiro):</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="opcoes" src="http://pt.pixeis.net/wp-content/uploads/2009/08/opcoes.jpg" border="0" alt="opcoes" width="165" height="39" /></p>
<p>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:</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="duplicar" src="http://pt.pixeis.net/wp-content/uploads/2009/08/duplicar.jpg" border="0" alt="duplicar" width="117" height="35" /></p>
<p>E ao novo círculo vamos redimensionar pressionando Ctrl e Shift até ficar do tamanho da jante:</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="jante" src="http://pt.pixeis.net/wp-content/uploads/2009/08/jante.jpg" border="0" alt="jante" width="390" height="390" /></p>
<h2>2.5 – Alinhar a foto</h2>
<p>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..)</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="roda2" src="http://pt.pixeis.net/wp-content/uploads/2009/08/roda2.jpg" border="0" alt="roda2" width="372" height="370" /></p>
<p>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:</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="alinhar" src="http://pt.pixeis.net/wp-content/uploads/2009/08/alinhar.jpg" border="0" alt="alinhar" width="428" height="166" /></p>
<p>Ok.. já temos a foto alinhada por isso já podemos passar ao próximo passo</p>
<h1>3 – Vectorizar a imagem</h1>
<p>Vamos buscar a <a href="http://pt.wikipedia.org/wiki/Curva_de_Bézier" target="_blank">Bezier</a> Tool:</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="bezier" src="http://pt.pixeis.net/wp-content/uploads/2009/08/bezier.jpg" border="0" alt="bezier" width="286" height="28" /></p>
<p>E vamos começar a traçar a linha exterior do carro.</p>
<p>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..</p>
<p>Experimentem já criar formas aleatórias para treinar e vamos começar com o carro =D</p>
<p>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:</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="ponto1" src="http://pt.pixeis.net/wp-content/uploads/2009/08/ponto1.jpg" border="0" alt="ponto1" width="431" height="291" /></p>
<p>Agora largo o botão do rato e clico para adicionar o próximo ponto da linha.</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="ponto3" src="http://pt.pixeis.net/wp-content/uploads/2009/08/ponto3.jpg" border="0" alt="ponto3" width="508" height="385" /></p>
<p>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.<img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="ponto4" src="http://pt.pixeis.net/wp-content/uploads/2009/08/ponto4.jpg" border="0" alt="ponto4" width="409" height="181" /></p>
<p>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.</p>
<p>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:</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="ultimoponto" src="http://pt.pixeis.net/wp-content/uploads/2009/08/ultimoponto.jpg" border="0" alt="ultimoponto" width="513" height="264" /></p>
<p>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)</p>
<p>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&#8217;s e automaticamente aparecerão os pontos iniciais e finais para se continuar o traço =D</p>
<p>O meu final ficou assim:</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="tracadoexterior" src="http://pt.pixeis.net/wp-content/uploads/2009/08/tracadoexterior.jpg" border="0" alt="tracadoexterior" width="550" height="194" /></p>
<p>Agora vamos traçar a janela do carro (eu comecei no vértice do lado esquerdo):</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="janela" src="http://pt.pixeis.net/wp-content/uploads/2009/08/janela.jpg" border="0" alt="janela" width="433" height="94" /></p>
<p>E a janela de trás:</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="tras" src="http://pt.pixeis.net/wp-content/uploads/2009/08/tras.jpg" border="0" alt="tras" width="474" height="354" />E o pára-brisas:</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="parabrisas" src="http://pt.pixeis.net/wp-content/uploads/2009/08/parabrisas.jpg" border="0" alt="parabrisas" width="478" height="114" />E os faróis traseiros (tive que diminuir ainda mais a largura do traço para 1px):</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="faroistraseiros" src="http://pt.pixeis.net/wp-content/uploads/2009/08/faroistraseiros.jpg" border="0" alt="faroistraseiros" width="432" height="256" /></p>
<p>Aquela coisa de alumínio na lateral do carro em baixo..</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="coisaestranha" src="http://pt.pixeis.net/wp-content/uploads/2009/08/coisaestranha.jpg" border="0" alt="coisaestranha" width="514" height="100" /></p>
<p>E um traço a dividir a parte branca da carroçaria e as partes em plástico escuro:</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="tracolateral" src="http://pt.pixeis.net/wp-content/uploads/2009/08/tracolateral.jpg" border="0" alt="tracolateral" width="550" height="147" /></p>
<p>E os dois traços da porta:</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="porta" src="http://pt.pixeis.net/wp-content/uploads/2009/08/porta.jpg" border="0" alt="porta" width="550" height="273" /></p>
<p>A partir de agora vamos fazer uns traços um pouco diferentes.. Vamos começar pelos das cavas das rodas:</p>
<p>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:</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="cava" src="http://pt.pixeis.net/wp-content/uploads/2009/08/cava.jpg" border="0" alt="cava" width="550" height="245" /></p>
<p>Agora é melhor diminuir a largura do traço para 3px..</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="circulocava1" src="http://pt.pixeis.net/wp-content/uploads/2009/08/circulocava1.jpg" border="0" alt="circulocava1" width="550" height="303" /></p>
<p>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:</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="angulo1" src="http://pt.pixeis.net/wp-content/uploads/2009/08/angulo1.jpg" border="0" alt="angulo1" width="538" height="388" /></p>
<p>E o outro círculo lá, vamos arrastar até ao lado esquerdo da linha da cava da roda:</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="cavafinal1" src="http://pt.pixeis.net/wp-content/uploads/2009/08/cavafinal1.jpg" border="0" alt="cavafinal1" width="550" height="248" /></p>
<p>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:</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="arc" src="http://pt.pixeis.net/wp-content/uploads/2009/08/arc.jpg" border="0" alt="arc" width="99" height="38" /></p>
<p>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:</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="degradelinear1" src="http://pt.pixeis.net/wp-content/uploads/2009/08/degradelinear1.jpg" border="0" alt="degradelinear1" width="351" height="175" /></p>
<p>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:</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="dropdown" src="http://pt.pixeis.net/wp-content/uploads/2009/08/dropdown.jpg" border="0" alt="dropdown" width="251" height="280" /></p>
<p>Escolham o primeiro e na barra da transparência reduzam para completamente transparente:</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="transparente" src="http://pt.pixeis.net/wp-content/uploads/2009/08/transparente.jpg" border="0" alt="transparente" width="236" height="408" /></p>
<p>Agora seleccionem o ponto do meio e ponham completamente visível e o terceiro ponto completamente invisível também..</p>
<p>Como ficou agora o traçado da cava da roda? Já podem fechar a janela dos degradês.</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="tracadocavaroda" src="http://pt.pixeis.net/wp-content/uploads/2009/08/tracadocavaroda.jpg" border="0" alt="tracadocavaroda" width="550" height="406" /></p>
<p>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</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="cavas" src="http://pt.pixeis.net/wp-content/uploads/2009/08/cavas.jpg" border="0" alt="cavas" width="550" height="229" /></p>
<p>Agora adicionar uma linha na grelha frontal para marcar a forma dessa parte do carro (pus com 2px de largura):</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="nariz" src="http://pt.pixeis.net/wp-content/uploads/2009/08/nariz.jpg" border="0" alt="nariz" width="331" height="206" /></p>
<p>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:</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="gradiente" src="http://pt.pixeis.net/wp-content/uploads/2009/08/gradiente.jpg" border="0" alt="gradiente" width="217" height="31" /></p>
<p>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:</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="gradientenariz" src="http://pt.pixeis.net/wp-content/uploads/2009/08/gradientenariz.jpg" border="0" alt="gradientenariz" width="356" height="161" /></p>
<p>Agora abaixo da janela de trás:</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="linhatraseira" src="http://pt.pixeis.net/wp-content/uploads/2009/08/linhatraseira.jpg" border="0" alt="linhatraseira" width="458" height="352" /></p>
<p>E:</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="atras" src="http://pt.pixeis.net/wp-content/uploads/2009/08/atras.jpg" border="0" alt="atras" width="520" height="270" /></p>
<p>E todas as outras zonas que precisam de mais definição:</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="zona1" src="http://pt.pixeis.net/wp-content/uploads/2009/08/zona1.jpg" border="0" alt="zona1" width="533" height="481" /></p>
<p>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:</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="gradientes" src="http://pt.pixeis.net/wp-content/uploads/2009/08/gradientes.jpg" border="0" alt="gradientes" width="359" height="315" /></p>
<p>E já podem usar o de 3 pontos outra vez:</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="frente" src="http://pt.pixeis.net/wp-content/uploads/2009/08/frente.jpg" border="0" alt="frente" width="550" height="397" /></p>
<p>E novamente na arte lateral do carro:</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="sideart" src="http://pt.pixeis.net/wp-content/uploads/2009/08/sideart.jpg" border="0" alt="sideart" width="550" height="283" /></p>
<p>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:</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="centrojante" src="http://pt.pixeis.net/wp-content/uploads/2009/08/centrojante.jpg" border="0" alt="centrojante" width="468" height="358" /></p>
<p>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:</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="degroup" src="http://pt.pixeis.net/wp-content/uploads/2009/08/degroup.jpg" border="0" alt="degroup" width="77" height="37" /></p>
<p>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.</p>
<p>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:</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="alinhar" src="http://pt.pixeis.net/wp-content/uploads/2009/08/alinhar1.jpg" border="0" alt="alinhar" width="259" height="73" /></p>
<p>Alterem a opção em cima para <strong>Último Seleccionado</strong> (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.</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="simbolo" src="http://pt.pixeis.net/wp-content/uploads/2009/08/simbolo.jpg" border="0" alt="simbolo" width="373" height="362" /></p>
<p>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.</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="logosrodas" src="http://pt.pixeis.net/wp-content/uploads/2009/08/logosrodas.jpg" border="0" alt="logosrodas" width="550" height="202" /></p>
<p>Como o carro já está vectorizado, podemos apagar a foto de referência, já não vamos precisar mais dela.</p>
<h1>4 – Alterar o fundo I</h1>
<p>Vamos ao menu Ficheiro&gt;Propriedades do Desenho e vamos alterar a cor do fundo da imagem.. Actualmente está transparente, vamos alterar para um azul assim:</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="cordofundo" src="http://pt.pixeis.net/wp-content/uploads/2009/08/cordofundo.jpg" border="0" alt="cordofundo" width="448" height="457" /></p>
<h1>5 – Alterar traços da imagem</h1>
<p>Vamos verificar todas as linhas do carro e alterar os traços importantes para uma largura maior e os menos importantes para uma inferior:</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="tracados" src="http://pt.pixeis.net/wp-content/uploads/2009/08/tracados.jpg" border="0" alt="tracados" width="833" height="318" /></p>
<p>Alterei a linha exterior para 5px, a das rodas para 6px, a das jantes para 4, e mais algumas alterações menores.</p>
<p>6 &#8211; Decorar o wallpaper</p>
<p>Vamos criar uma grelha para dar um estilo de blueprint ao wallpaper. Vão ao menu Ver&gt;Grelha e deverá aparecer uma grelha na imagem..</p>
<p>Com a ferramenta de Bezier, criem um desenho assim:</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="grelha1" src="http://pt.pixeis.net/wp-content/uploads/2009/08/grelha1.jpg" border="0" alt="grelha1" width="550" height="369" /></p>
<p>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:</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="grelha2" src="http://pt.pixeis.net/wp-content/uploads/2009/08/grelha2.jpg" border="0" alt="grelha2" width="405" height="424" /></p>
<p>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:</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="nos" src="http://pt.pixeis.net/wp-content/uploads/2009/08/nos.jpg" border="0" alt="nos" width="195" height="30" /></p>
<p>Apaguei os pontos do path que estavam fora do wallpaper:</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="grelha3" src="http://pt.pixeis.net/wp-content/uploads/2009/08/grelha3.jpg" border="0" alt="grelha3" width="561" height="360" /></p>
<p>Agora se quiserem, podem fazer outro path com linhas mais estreitas:</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="grelha4" src="http://pt.pixeis.net/wp-content/uploads/2009/08/grelha4.jpg" border="0" alt="grelha4" width="511" height="326" /></p>
<p>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:</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="grelha5" src="http://pt.pixeis.net/wp-content/uploads/2009/08/grelha5.jpg" border="0" alt="grelha5" width="468" height="301" /></p>
<p>Agora é só alterar um pouco o aspecto destas novas grelhas que fizemos..</p>
<p>Vamos seleccionar as duas grandes e alterar a largura do traço delas para 3px e das mais pequenas para 1px:</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="grelha6" src="http://pt.pixeis.net/wp-content/uploads/2009/08/grelha6.jpg" border="0" alt="grelha6" width="467" height="304" /></p>
<p>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..</p>
<h1>6 – Decorar a imagem</h1>
<p>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):</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="grelha7" src="http://pt.pixeis.net/wp-content/uploads/2009/08/grelha7.jpg" border="0" alt="grelha7" width="453" height="291" /></p>
<p>Pus a largura do traço deste rectângulo a 5px. Agora vamos ao menu Caminho&gt;Traço para caminho..</p>
<p>Já podem esconder a grelha novamente.</p>
<p>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:</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="simbolomazda" src="http://pt.pixeis.net/wp-content/uploads/2009/08/simbolomazda.jpg" border="0" alt="simbolomazda" width="380" height="152" /></p>
<p>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.</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="fonte" src="http://pt.pixeis.net/wp-content/uploads/2009/08/fonte.jpg" border="0" alt="fonte" width="613" height="406" /></p>
<p>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):</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="kazamai" src="http://pt.pixeis.net/wp-content/uploads/2009/08/kazamai.jpg" border="0" alt="kazamai" width="465" height="146" /></p>
<p>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):</p>
<p><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="kazamaibottom" src="http://pt.pixeis.net/wp-content/uploads/2009/08/kazamaibottom.jpg" border="0" alt="kazamaibottom" width="465" height="176" /></p>
<p>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:</p>
<p><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="rect" src="http://pt.pixeis.net/wp-content/uploads/2009/08/rect.jpg" border="0" alt="rect" width="356" height="123" /></p>
<p>E vamos seleccionar também a palavra Kazamai e vamos alinhar o rectângulo verticalmente e horizontalmente ao centro da palavra Kazamai.</p>
<p>Vamos agora duplicar o nosso rectângulo e alinhar o duplicado com a palavra Mazda também horizontalmente e verticalmente.</p>
<p>Agora vamos seleccionar o rectângulo branco que desenhámos à volta da imagem e um dos rectângulos novos e vamos ao menu Caminho&gt;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</p>
<p><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="espacos" src="http://pt.pixeis.net/wp-content/uploads/2009/08/espacos.jpg" border="0" alt="espacos" width="494" height="317" /></p>
<p>Vamos agora seleccionar todo o carro (apenas o carro) e vamos agrupá-lo de forma a podermos manipulá-lo como a apenas um objecto.</p>
<p>Depois vamos alterar a configuração da barra Alinhar e Distribuir para &#8220;Página&#8221; e vamos alinhar o carro ao centro da página horizontalmente e verticalmente.</p>
<p>Vamos desenhar uma linha assim ao lado de uma das rodas:</p>
<p><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="tamanho" src="http://pt.pixeis.net/wp-content/uploads/2009/08/tamanho.jpg" border="0" alt="tamanho" width="374" height="377" /></p>
<p>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&#8243;):</p>
<p><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="polegadas" src="http://pt.pixeis.net/wp-content/uploads/2009/08/polegadas.jpg" border="0" alt="polegadas" width="417" height="300" /></p>
<p>Vamos agora desenhar um para a altura do carro (1500mm):</p>
<p><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="altura" src="http://pt.pixeis.net/wp-content/uploads/2009/08/altura.jpg" border="0" alt="altura" width="261" height="315" /></p>
<p>E um para o comprimento do carro (4520mm):</p>
<p><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="comprimento" src="http://pt.pixeis.net/wp-content/uploads/2009/08/comprimento.jpg" border="0" alt="comprimento" width="420" height="120" /></p>
<p>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:</p>
<p><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="linhaespaco" src="http://pt.pixeis.net/wp-content/uploads/2009/08/linhaespaco.jpg" border="0" alt="linhaespaco" width="261" height="323" /></p>
<p>Vamos seleccionar os dois pontos que criamos e vamos clicar neste botão da barra superior:</p>
<p><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="botão" src="http://pt.pixeis.net/wp-content/uploads/2009/08/boto.jpg" border="0" alt="botão" width="228" height="38" /></p>
<p>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:</p>
<p><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="full1" src="http://pt.pixeis.net/wp-content/uploads/2009/08/full1.jpg" border="0" alt="full1" width="495" height="315" /></p>
<p>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:</p>
<p><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="mazdalogo" src="http://pt.pixeis.net/wp-content/uploads/2009/08/mazdalogo.jpg" border="0" alt="mazdalogo" width="166" height="163" /></p>
<p>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:</p>
<p><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="fundo" src="http://pt.pixeis.net/wp-content/uploads/2009/08/fundo.jpg" border="0" alt="fundo" width="525" height="345" /></p>
<p>E na barra lateral do Preenchimento, escolham o Degradê Radial e cliquem em Editar.</p>
<p>Vamos alterar o ponto actual para transparente e o outro para completamente opaco. Alterem os pontos do gradiente a vosso gosto:</p>
<p><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="pontosgradiente" src="http://pt.pixeis.net/wp-content/uploads/2009/08/pontosgradiente.jpg" border="0" alt="pontosgradiente" width="342" height="234" /></p>
<p>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:</p>
<p><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="botaodois" src="http://pt.pixeis.net/wp-content/uploads/2009/08/botaodois.jpg" border="0" alt="botaodois" width="180" height="37" /></p>
<p>E pronto, já está a nossa obra prima =D</p>
<p>É só gravar e ir ao menu Ficheiro&gt;Exportar Bitmap, escolher Página e alterar as dimensões para 1920 e 1200 e exportar.</p>
<p>O meu resultado final: <a href="http://pt.pixeis.net/wp-content/uploads/2009/08/Final.png" rel="shadowbox[post-1361];player=img;"></a></p>
<p><a href="http://pt.pixeis.net/wp-content/uploads/2009/08/Final.png" rel="shadowbox[post-1361];player=img;"><img class="aligncenter size-large wp-image-1362" title="Final" src="http://pt.pixeis.net/wp-content/uploads/2009/08/Final-550x343.png" alt="Final" width="550" height="343" /></a></p>
<p>Espero que tenham gostado e até à próxima. Classifiquem e comentem =D</p>


<p>Artigos relacionados:<ol><li><a href='http://pt.pixeis.net/2008/12/como-fazer-uma-t-shirt-para-geeks-no-inkscape/' rel='bookmark' title='Permanent Link: Como Fazer uma T-Shirt para Geeks no Inkscape'>Como Fazer uma T-Shirt para Geeks no Inkscape</a> <small>Vamos aprender a criar uma imagem para uma t-shirt do princípio ao fim no Inkscape. Aprendam a vectorizar e a...</small></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://pt.pixeis.net/2009/08/como-fazer-umwallpaper-estilo-blueprint-no-inkscape/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>Sites com Vectores Grátis</title>
		<link>http://pt.pixeis.net/2009/05/sites-com-vectores-gratis/</link>
		<comments>http://pt.pixeis.net/2009/05/sites-com-vectores-gratis/#comments</comments>
		<pubDate>Fri, 29 May 2009 15:56:53 +0000</pubDate>
		<dc:creator>Carlos Silva</dc:creator>
				<category><![CDATA[Artigos]]></category>
		<category><![CDATA[Downloads]]></category>
		<category><![CDATA[arte]]></category>
		<category><![CDATA[desenho]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[download]]></category>
		<category><![CDATA[ilustração]]></category>
		<category><![CDATA[Inkscape]]></category>
		<category><![CDATA[logo]]></category>
		<category><![CDATA[vector]]></category>
		<category><![CDATA[vectores]]></category>

		<guid isPermaLink="false">http://pt.pixeis.net/?p=1208</guid>
		<description><![CDATA[Hoje mostro-vos links para alguns sites com download gratuito de vectores em vários formatos!


Artigos relacionados:<ol><li><a href='http://pt.pixeis.net/2009/08/como-fazer-umwallpaper-estilo-blueprint-no-inkscape/' rel='bookmark' title='Permanent Link: Como fazer um wallpaper estilo blueprint no Inkscape'>Como fazer um wallpaper estilo blueprint no Inkscape</a> <small>Vamos aprender a fazer um wallpaper com um desenho técnico de um carro no Inkscape...</small></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p style="text-align: left;">Hoje mostro-vos links para alguns sites com download gratuito de vectores em vários formatos!</p>
<p><a href="http://vector-images.com/samples_clipart.php" target="_blank">www.vector-images.com</a> &#8211; Alguns vectores gratuitos.. É preciso registar. Formatos CDR e EPS.<br />
<a href="http://www.vectorportal.com/" target="_blank">www.vectorportal.com</a> &#8211; Vários vectores de estilos diversos em formato EPS.<br />
<a href="http://digital-clipart.com/text/links_catalogs_samples.htm" target="_blank">www.digital-clipart.com</a> &#8211; Muitos vectores em formato AI, EPS e CDR, em várias categorias. Há downloads free disponíveis &#8211; cliquem em samples.<br />
<a href="http://www.brandsoftheworld.com/">www.brandsoftheworld.com</a> &#8211; Site com practicamente todos os logos do mundo vectorizados.. Desde empresas a produtos. Em formato EPS.<br />
<a href="http://www.freevectors.net/" target="_blank">www.freevectors.net</a> &#8211; Site com imensos desenhos vectoriais.<br />
<a href="http://vector4free.com/vectors">www.vector4free.com</a> &#8211; Quantidade enorme de vectores grátis.<br />
<a href="http://qvectors.com/">www.qvectors.com</a> &#8211; Site com várias imagens vectoriais, desde simbolos a desenhos completos. Vários formatos.<br />
<a href="http://www.vectorjunky.com/">www.vectorjunky.com</a> &#8211; Site com várias categorias de vectores.<br />
<a href="http://www.vecteezy.com/">www.vecteezy.com</a> &#8211; Mais um site com montes de vectores.</p>
<p>Espero que seja útil para vocês!</p>


<p>Artigos relacionados:<ol><li><a href='http://pt.pixeis.net/2009/08/como-fazer-umwallpaper-estilo-blueprint-no-inkscape/' rel='bookmark' title='Permanent Link: Como fazer um wallpaper estilo blueprint no Inkscape'>Como fazer um wallpaper estilo blueprint no Inkscape</a> <small>Vamos aprender a fazer um wallpaper com um desenho técnico de um carro no Inkscape...</small></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://pt.pixeis.net/2009/05/sites-com-vectores-gratis/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Revistas PDF</title>
		<link>http://pt.pixeis.net/2009/02/revistas-pdf/</link>
		<comments>http://pt.pixeis.net/2009/02/revistas-pdf/#comments</comments>
		<pubDate>Tue, 17 Feb 2009 19:11:09 +0000</pubDate>
		<dc:creator>Carlos Silva</dc:creator>
				<category><![CDATA[Artigos]]></category>
		<category><![CDATA[abstracto]]></category>
		<category><![CDATA[arte]]></category>
		<category><![CDATA[artes digitais]]></category>
		<category><![CDATA[desenho]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[download]]></category>
		<category><![CDATA[e-zines]]></category>
		<category><![CDATA[ilustração]]></category>
		<category><![CDATA[prendas]]></category>
		<category><![CDATA[texto]]></category>
		<category><![CDATA[tipografia]]></category>
		<category><![CDATA[Tutoriais]]></category>
		<category><![CDATA[web-design]]></category>

		<guid isPermaLink="false">http://www.pixeis.net/?p=947</guid>
		<description><![CDATA[Deixo-vos aqui links para revistas de design e arte que podem ler para estar sempre a par das novidades e aprender sempre coisas novas


Artigos relacionados:<ol><li><a href='http://pt.pixeis.net/2009/01/como-fazer-um-wallpaper-abstracto-no-photoshop/' rel='bookmark' title='Permanent Link: Como Fazer um Wallpaper Abstracto no Photoshop'>Como Fazer um Wallpaper Abstracto no Photoshop</a> <small>Vamos aprender a fazer um Wallpaper impressionante, mas também muito simples no Photoshop...</small></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p>Olá a todos, eu sou o Carlos Silva.. Já tinha recebido o convite para deixar aqui neste espaço algumas opiniões mas só agora é que surgiu oportunidade.. A proposta que o Ricardo me fez, foi criar um espaço onde os leitores pudessem ler coisas sobre o mundo do Design.</p>
<p style="text-align: justify;">Convite aceite logo, apesar do pouco tempo que tenho, mas cada pequeno contributo irá fazer deste site um magnífico espaço.</p>
<p style="text-align: justify;">Desde já irei falar um pouco de todas as áreas do Design, portanto os temas serão:</p>
<p style="text-align: justify;">Tipografia, Flash, Ilustração, Curiosidades, Designers, Exposições, Concursos, Fotografia, Blog&#8217;s de Design, Mags, entre outros.</p>
<p style="text-align: justify;">Para começar a abrir o apetite dos nossos leitores, e porque a conversa já vai longa aqui ficam 4 revistas disponibilizadas gratuitamente em formato PDF e que se dedicam a divulgar a arte gráfica nas suas mais variadas vertentes. Algumas são referências bem estabelecidas, outras são projectos muito recentes.</p>
<p style="text-align: justify;">
<p><a href="http://base-v.org/maguila.shtml" target="_blank"><strong><span style="color: #3366ff;">Maguila Mag</span></strong></a><strong> [Brasileiro]</strong></p>
<p><strong>Áreas:</strong> Ilustração | Fotografia</p>
<p><strong><a href="http://www.pinnaclemagazine.tv/" target="_blank"><span style="color: #3366ff;">Pinnacle Magazine</span></a></strong><strong> [Inglês]</strong></p>
<p><strong>Áreas:</strong> Ilustração | Música | Lifestyle</p>
<p><strong><a href="http://www.molokoplus-mag.com" target="_blank"><span style="color: #3366ff;">Moloko</span></a></strong><strong> [Russo]</strong></p>
<p><strong>Áreas:</strong> Ilustração | Música | Fotografia</p>
<p><strong><a href="http://www.inversus.pt" target="_blank"><span style="color: #3366ff;">Inversus</span></a></strong><strong> [Português]</strong></p>
<p><strong>Áreas:</strong> Ilustração | Fotografia | Cultura</p>
<p>E falta este site, <strong><a href="http://www.pdf-mags.com" target="_blank"><span style="color: #3366ff;">Pdf Mags</span></a></strong> <strong>[Inglês]<span style="font-weight: normal;"> que tem uma coleção enorme de links para sites de revistas de todos os assuntos</span></strong></p>
<p style="text-align: justify;">Fiquem a espera e aguardem surpresas.</p>
<p style="text-align: justify;">Até já,</p>
<p style="text-align: justify;">Carlos</p>


<p>Artigos relacionados:<ol><li><a href='http://pt.pixeis.net/2009/01/como-fazer-um-wallpaper-abstracto-no-photoshop/' rel='bookmark' title='Permanent Link: Como Fazer um Wallpaper Abstracto no Photoshop'>Como Fazer um Wallpaper Abstracto no Photoshop</a> <small>Vamos aprender a fazer um Wallpaper impressionante, mas também muito simples no Photoshop...</small></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://pt.pixeis.net/2009/02/revistas-pdf/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>10 Espectaculares Fontes Gratuitas</title>
		<link>http://pt.pixeis.net/2009/01/10-espectaculares-fontes-gratuitas/</link>
		<comments>http://pt.pixeis.net/2009/01/10-espectaculares-fontes-gratuitas/#comments</comments>
		<pubDate>Sun, 18 Jan 2009 19:16:58 +0000</pubDate>
		<dc:creator>Ricardo Jorge</dc:creator>
				<category><![CDATA[Artigos]]></category>
		<category><![CDATA[Downloads]]></category>
		<category><![CDATA[download]]></category>
		<category><![CDATA[fontes]]></category>
		<category><![CDATA[texto]]></category>
		<category><![CDATA[tipografia]]></category>

		<guid isPermaLink="false">http://www.pixeis.net/?p=702</guid>
		<description><![CDATA[Como a maior parte das fontes famosas são sempre entre 30 e 180€, decidi juntar algumas boas fontes que vão dar um toque especial aos vossos trabalhos e que são gratuitas


Artigos relacionados:<ol><li><a href='http://pt.pixeis.net/2009/05/sites-com-vectores-gratis/' rel='bookmark' title='Permanent Link: Sites com Vectores Grátis'>Sites com Vectores Grátis</a> <small>Hoje mostro-vos links para alguns sites com download gratuito de vectores em vários formatos!...</small></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p>Vamos directamente ao assunto: pelo que se vê por aí, ainda há muita gente que não dá atenção ao tipo de letra que usa.. Alguns usam sempre <strong>Arial/Helvetica</strong> ou <strong>Times New Roman</strong> e outros acham que escolher a <strong>Comic Sans</strong> vai enriquecer o seu trabalho, quando de facto vai fazer o contrário &#8211; a sério, não estou a brincar, perguntem a qualquer designer se gosta da fonte Comic Sans e vão vê-lo(a) a abrir os olhos, virar costas, nunca mais falar convosco e banir-vos do messenger. Até podem assinar <a href="http://www.petitionspot.com/petitions/bancomicsans" target="_blank">aqui a petição para banir a fonte Comic Sans (em inglês)</a> =D</p>
<p style="text-align: justify;">E, visto que várias pessoas dão mais valor à escolha das fontes que ao conteúdo, pode-se dizer que a tipografia é demasiado importante para se sobrevalorizar.</p>
<p style="text-align: justify;">Mas como a maior parte das fontes famosas, tipo a <strong>Century Gothic</strong>, <strong>Futura</strong>, <strong>Frutiger</strong>, <strong>Univers</strong>, <strong>Thesis</strong>, entre outras, são sempre entre <strong>30 </strong>e <strong>180</strong><strong>€</strong>, decidi juntar algumas boas fontes que vão dar um toque especial aos vossos trabalhos e que são gratuitas..</p>
<h3>Cliquem nas imagens para as aumentar</h3>
<p style="text-align: justify;"><img class="aligncenter size-medium wp-image-704" title="Gentium" src="http://pt.pixeis.net/wp-content/uploads/2009/01/gentium-300x91.png" alt="Gentium" width="300" height="91" /></p>
<p style="text-align: justify;">1- <strong>Gentium</strong>- <a href="http://en.wikipedia.org/wiki/Gentium" target="_blank">Wiki</a> &#8211; <a href="http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&amp;item_id=Gentium_basic" target="_blank">Download</a></p>
<p style="text-align: justify;"><a href="http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&amp;item_id=Gentium_download" target="_blank"></a><a rel="attachment wp-att-705" href="http://pt.pixeis.net/2009/01/10-espectaculares-fontes-gratuitas/districtthin/"><img class="aligncenter size-medium wp-image-705" title="DistrictThin" src="http://pt.pixeis.net/wp-content/uploads/2009/01/districtthin-300x87.png" alt="DistrictThin" width="300" height="87" /></a></p>
<p style="text-align: justify;"><a rel="attachment wp-att-705" href="http://pt.pixeis.net/2009/01/10-espectaculares-fontes-gratuitas/districtthin/"></a>2- <strong>District Thin</strong> &#8211; <a href="http://www.philsfonts.com/freefont.html" target="_blank">Download</a></p>
<p style="text-align: justify;"><a href="http://www.philsfonts.com/freefont.html" target="_blank"></a><a rel="attachment wp-att-708" href="http://pt.pixeis.net/2009/01/10-espectaculares-fontes-gratuitas/printclearly/"><img class="aligncenter size-medium wp-image-708" title="PrintClearly" src="http://pt.pixeis.net/wp-content/uploads/2009/01/printclearly-300x87.png" alt="PrintClearly" width="300" height="87" /></a></p>
<p style="text-align: justify;"><a rel="attachment wp-att-708" href="http://pt.pixeis.net/2009/01/10-espectaculares-fontes-gratuitas/printclearly/"></a>3- <strong>Print Clearly</strong> &#8211; <a href="http://www.bvfonts.com/fonts/details.php?id=45" target="_blank">Download</a></p>
<p style="text-align: justify;"><a href="http://www.bvfonts.com/fonts/details.php?id=45" target="_blank"></a><a rel="attachment wp-att-711" href="http://pt.pixeis.net/2009/01/10-espectaculares-fontes-gratuitas/sophia/"><img class="aligncenter size-medium wp-image-711" title="Sophia" src="http://pt.pixeis.net/wp-content/uploads/2009/01/sophia-300x91.png" alt="Sophia" width="300" height="91" /></a></p>
<p style="text-align: justify;"><a rel="attachment wp-att-711" href="http://pt.pixeis.net/2009/01/10-espectaculares-fontes-gratuitas/sophia/"></a>4- <strong>Sophia </strong>- <a href="http://www.menschengeist.de/aidfonts.htm" target="_blank">Download</a></p>
<p style="text-align: justify;"><a href="http://www.menschengeist.de/aidfonts.htm" target="_blank"></a><a rel="attachment wp-att-712" href="http://pt.pixeis.net/2009/01/10-espectaculares-fontes-gratuitas/versasanscon/"><img class="aligncenter size-medium wp-image-712" title="VersaSansCon" src="http://pt.pixeis.net/wp-content/uploads/2009/01/versasanscon-300x76.png" alt="VersaSansCon" width="300" height="76" /></a></p>
<p style="text-align: justify;"><a rel="attachment wp-att-712" href="http://pt.pixeis.net/2009/01/10-espectaculares-fontes-gratuitas/versasanscon/"></a>5- <strong>Versa Sans Con</strong> &#8211; <a href="http://www.gmkfreefonts.com/fontspc/v/VersaSansCon-Light.html" target="_blank">Download</a></p>
<p style="text-align: justify;"><a href="http://www.gmkfreefonts.com/fontspc/v/VersaSansCon-Light.html" target="_blank"></a><a rel="attachment wp-att-715" href="http://pt.pixeis.net/2009/01/10-espectaculares-fontes-gratuitas/anivers/"><img class="aligncenter size-medium wp-image-715" title="Anivers" src="http://pt.pixeis.net/wp-content/uploads/2009/01/anivers-300x77.png" alt="Anivers" width="300" height="77" /></a></p>
<p style="text-align: justify;"><a rel="attachment wp-att-715" href="http://pt.pixeis.net/2009/01/10-espectaculares-fontes-gratuitas/anivers/"></a>6- <strong>Anivers </strong>- <a href="http://new.myfonts.com/fonts/exljbris/anivers/" target="_blank">Download</a> (é preciso registar-se no site)</p>
<p style="text-align: justify;"><a rel="attachment wp-att-716" href="http://pt.pixeis.net/2009/01/10-espectaculares-fontes-gratuitas/fertigopro/"><img class="aligncenter size-medium wp-image-716" title="FertigoPro" src="http://pt.pixeis.net/wp-content/uploads/2009/01/fertigopro-300x77.png" alt="FertigoPro" width="300" height="77" /></a></p>
<p style="text-align: justify;"><a rel="attachment wp-att-716" href="http://pt.pixeis.net/2009/01/10-espectaculares-fontes-gratuitas/fertigopro/"></a>7- <strong>Fertigo </strong><strong>Pro </strong>- <a href="http://new.myfonts.com/fonts/exljbris/fertigo-pro/" target="_blank">Download</a> (é preciso registar-se no site)</p>
<p style="text-align: justify;"><a rel="attachment wp-att-719" href="http://pt.pixeis.net/2009/01/10-espectaculares-fontes-gratuitas/galileo/"><img class="aligncenter size-medium wp-image-719" title="Galileo" src="http://pt.pixeis.net/wp-content/uploads/2009/01/galileo-300x81.png" alt="Galileo" width="300" height="81" /></a></p>
<p style="text-align: justify;"><a rel="attachment wp-att-719" href="http://pt.pixeis.net/2009/01/10-espectaculares-fontes-gratuitas/galileo/"></a>8- <strong>Galileo </strong>- <a href="http://www.fontspace.com/casady-and-greene/galileoflf" target="_blank">Download</a></p>
<p style="text-align: justify;"><a href="http://www.fontspace.com/casady-and-greene/galileoflf" target="_blank"></a><a rel="attachment wp-att-720" href="http://pt.pixeis.net/2009/01/10-espectaculares-fontes-gratuitas/covington/"><img class="aligncenter size-medium wp-image-720" title="Covington" src="http://pt.pixeis.net/wp-content/uploads/2009/01/covington-300x87.png" alt="Covington" width="300" height="87" /></a></p>
<p style="text-align: justify;"><a rel="attachment wp-att-720" href="http://pt.pixeis.net/2009/01/10-espectaculares-fontes-gratuitas/covington/"></a>9- <strong>Covington </strong>- <a href="http://www.dafont.com/covington.font" target="_blank">Download</a></p>
<p style="text-align: justify;"><a href="http://www.dafont.com/covington.font" target="_blank"></a><a rel="attachment wp-att-721" href="http://pt.pixeis.net/2009/01/10-espectaculares-fontes-gratuitas/kontrapunkt/"><img class="aligncenter size-medium wp-image-721" title="Kontrapunkt" src="http://pt.pixeis.net/wp-content/uploads/2009/01/kontrapunkt-300x62.png" alt="Kontrapunkt" width="300" height="62" /></a></p>
<p style="text-align: justify;"><a rel="attachment wp-att-721" href="http://pt.pixeis.net/2009/01/10-espectaculares-fontes-gratuitas/kontrapunkt/"></a>10- <strong>Kontrapunkt</strong> &#8211; <a href="http://www.kontrapunkt.dk/news/ddprize_typeface_of_the_year_2004#downloads" target="_blank">Download</a></p>
<p style="text-align: justify;">Agora já não têm desculpa para usar sempre as fontes do costume ;D</p>
<p style="text-align: justify;">Se quiserem, podem fazer o download deste <a href="http://www.mediafire.com/file/mmngcttzzgi/10Fontes.pdf" target="_blank">ficheiro PDF</a> para imprimir e ver as 10 fontes em texto quando quiserem.</p>
<p style="text-align: justify;">Até à próxima =D</p>


<p>Artigos relacionados:<ol><li><a href='http://pt.pixeis.net/2009/05/sites-com-vectores-gratis/' rel='bookmark' title='Permanent Link: Sites com Vectores Grátis'>Sites com Vectores Grátis</a> <small>Hoje mostro-vos links para alguns sites com download gratuito de vectores em vários formatos!...</small></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://pt.pixeis.net/2009/01/10-espectaculares-fontes-gratuitas/feed/</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
		<item>
		<title>Descobre o ContextFree</title>
		<link>http://pt.pixeis.net/2009/01/descobre-o-contextfree/</link>
		<comments>http://pt.pixeis.net/2009/01/descobre-o-contextfree/#comments</comments>
		<pubDate>Sat, 10 Jan 2009 03:08:05 +0000</pubDate>
		<dc:creator>Ricardo Jorge</dc:creator>
				<category><![CDATA[Artigos]]></category>
		<category><![CDATA[abstracto]]></category>
		<category><![CDATA[arte]]></category>
		<category><![CDATA[cartão de visita]]></category>
		<category><![CDATA[cartões de visita]]></category>
		<category><![CDATA[código]]></category>
		<category><![CDATA[ContextFree]]></category>
		<category><![CDATA[fractal]]></category>
		<category><![CDATA[Illustrator]]></category>
		<category><![CDATA[Inkscape]]></category>
		<category><![CDATA[Open-Source]]></category>
		<category><![CDATA[programar]]></category>
		<category><![CDATA[vector]]></category>
		<category><![CDATA[Vladstudio]]></category>
		<category><![CDATA[wallpaper]]></category>

		<guid isPermaLink="false">http://www.pixeis.net/?p=628</guid>
		<description><![CDATA[Vamos ver o ContextFree, um programa usado para "programar" imagens que podemos usar para enriquecer os nossos projectos


Artigos relacionados:<ol><li><a href='http://pt.pixeis.net/2009/08/como-fazer-umwallpaper-estilo-blueprint-no-inkscape/' rel='bookmark' title='Permanent Link: Como fazer um wallpaper estilo blueprint no Inkscape'>Como fazer um wallpaper estilo blueprint no Inkscape</a> <small>Vamos aprender a fazer um wallpaper com um desenho técnico de um carro no Inkscape...</small></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p>Muitas vezes os designers têm uma certa imagem que precisa de mais qualquer coisa ou está demasiado simples e vazia e falta algo para a melhorar.. Mas o quê? Podiam desenhar alguma coisa espectacular, mas provavelmente não têm tempo/imaginação/disposição/vontade para isso.. Vá lá, eu sei que já vos aconteceu isto.. shh, eu não digo a ninguém</p>
<p style="text-align: justify;">Aqui é que entra o <a href="http://www.contextfreeart.org/" target="_blank">ContextFree</a>.. Este programa Open-Source cria imagens com &#8220;código&#8221; escrito por nós.. Exemplo:</p>
<div class="mceTemp mceIEcenter" style="text-align: justify;">
<dl id="attachment_647" class="wp-caption aligncenter" style="width: 90%;">
<dt class="wp-caption-dt" style="text-align: left; "> <span style="color: #ff9900;">startshape AMINHAIMAGEM</span> //isto diz qual vai ser o objecto inicial,  neste caso chamei-lhe <strong>AMINHAIMAGEM </strong></p>
<p style="text-align: justify;"><span style="color: #ff9900;">rule AMINHAIMAGEM{</span> //isto diz a constituição do objecto <strong>AMINHAIMAGEM</strong></p>
<p style="text-align: justify;"><span style="color: #ff9900;">CIRCLE{}</span> //que vão ser <strong>círculos</strong></p>
<p style="text-align: justify;"><span style="color: #ff9900;">RODAR {size 0.9 y 1.1} </span>//isto cria o objecto <strong>RODAR </strong>com o tamanho a diminuir para <strong>90</strong><strong>% </strong>em cada passo e a posição a variar para <strong>Y </strong>em <strong>1.1</strong> por passo</p>
<p style="text-align: justify;"><span style="color: #ff9900;">}</span></p>
<p style="text-align: justify;"><span style="color: #ff9900;">rule RODAR { </span>//isto diz a constituição do objecto <strong>RODAR</strong></p>
<p style="text-align: justify;"><span style="color: #ff9900;">AMINHAIMAGEM {rotate 25}</span> //que é o objecto <strong>AMINHAIMAGEM </strong>mas com rotação de <strong>25º</strong> por cada passo</p>
<p style="text-align: left; "><span style="color: #ff9900;">}</span></p>
</dt>
</dl>
</div>
<p>E este pedacinho de &#8220;código&#8221; vai dar esta imagem:</p>
<p style="text-align: justify;"><a rel="attachment wp-att-630" href="http://pt.pixeis.net/2009/01/descobre-o-contextfree/simples/"><img class="aligncenter size-medium wp-image-630" title="simples" src="http://pt.pixeis.net/wp-content/uploads/2009/01/simples-300x272.png" alt="simples" width="300" height="272" /></a>Não parece uma imagem complicada de fazer noutro programa? E aqui foi simples =D</p>
<p style="text-align: justify;">E é óbvio que estas imagens não são &#8211; nem tentam ser &#8211; obras de arte, mas são o suficiente para enriquecer um fundo, um cartão de visita, uma splash page ou outra imagem qualquer.</p>
<p style="text-align: justify;">Para verem que tipo de coisas o programa é capaz, é só irem ao <a href="http://www.contextfreeart.org/index.html" target="_blank">site oficial</a> á secção da <a href="http://www.contextfreeart.org/gallery/" target="_blank">galeria</a>, onde estão imensas imagens e o respectivo código que os utilizadores põem no site para todos poderem ver e usar =D</p>
<p style="text-align: justify;">O programa tem a capacidade de gravar as imagens finais como JPG, PNG e <span style="text-decoration: underline;">SVG</span> &#8211; sim, SVG.. vocês sabem o que isto quer dizer &#8211; formato vectorial que podem abrir no Inkscape ou no Illustrator e alterar à vontade</p>
<p>Vejam só aqui alguns exemplos impressionantes:</p>
<div class="mceTemp mceIEcenter" style="text-align: center;">
<dl id="attachment_638" class="wp-caption   aligncenter" style="width: 224px;">
<dt class="wp-caption-dt"><a rel="attachment wp-att-638" href="http://pt.pixeis.net/2009/01/descobre-o-contextfree/fractal-fern1/" target="_blank"><img class="size-full wp-image-638 " title="fractal-fern" src="http://pt.pixeis.net/wp-content/uploads/2009/01/fractal-fern1.jpg" alt="fractal-fern1" width="214" height="300" /></a></dt>
<dd class="wp-caption-dd">Fractal Fern de MrFoo</dd>
</dl>
</div>
<div class="mceTemp mceIEcenter" style="text-align: center;">
<dl id="attachment_639" class="wp-caption aligncenter" style="width: 195px;">
<dt class="wp-caption-dt"><a rel="attachment wp-att-639" href="http://pt.pixeis.net/2009/01/descobre-o-contextfree/fractal-tree-9/" target="_blank"><img class="size-full wp-image-639 " title="fractal-tree-9" src="http://pt.pixeis.net/wp-content/uploads/2009/01/fractal-tree-9.jpg" alt="fractal-tree-9" width="185" height="300" /></a></dt>
<dd class="wp-caption-dd">Fractal Tree 9 de erikmartin</dd>
</dl>
</div>
<div class="mceTemp mceIEcenter" style="text-align: center;">
<dl id="attachment_640" class="wp-caption aligncenter" style="width: 356px;">
<dt class="wp-caption-dt"><a href="http://www.contextfreeart.org/gallery/view.php?id=849" target="_blank"><img class="size-full wp-image-640" title="combustion" src="http://pt.pixeis.net/wp-content/uploads/2009/01/combustion.jpg" alt="Combustion de lazymoon" width="346" height="300" /></a></dt>
<dd class="wp-caption-dd">Combustion de lazymoon</dd>
</dl>
</div>
<div class="mceTemp mceIEcenter" style="text-align: center;">
<dl id="attachment_641" class="wp-caption aligncenter" style="width: 297px;">
<dt class="wp-caption-dt"><a href="http://www.contextfreeart.org/gallery/view.php?id=985" target="_blank"><img class="size-full wp-image-641" title="galactica" src="http://pt.pixeis.net/wp-content/uploads/2009/01/galactica.jpg" alt="Galactica de vdimas" width="287" height="300" /></a></dt>
<dd class="wp-caption-dd">Galactica de vdimas</dd>
</dl>
</div>
<div class="mceTemp mceIEcenter" style="text-align: center;">
<dl id="attachment_642" class="wp-caption aligncenter" style="width: 310px;">
<dt class="wp-caption-dt"><a href="http://www.contextfreeart.org/gallery/view.php?id=1257" target="_blank"><img class="size-full wp-image-642" title="alien-infection" src="http://pt.pixeis.net/wp-content/uploads/2009/01/alien-infection.jpg" alt="Alien Infection de mycelium" width="300" height="300" /></a></dt>
<dd class="wp-caption-dd" style="text-align: center;">Alien Infection de mycelium</dd>
</dl>
</div>
<p style="text-align: center;">E mesmo as que já vêm no próprio <strong>ContextFree </strong>como exemplos:</p>
<p style="text-align: center;"><a href="http://pt.pixeis.net/wp-content/uploads/2009/01/quad-city.jpg" rel="shadowbox[post-628];player=img;"><img class="aligncenter size-medium wp-image-643" title="quad-city" src="http://pt.pixeis.net/wp-content/uploads/2009/01/quad-city-293x300.jpg" alt="quad-city" width="293" height="300" /></a><a href="http://pt.pixeis.net/wp-content/uploads/2009/01/underground.png" rel="shadowbox[post-628];player=img;"><img class="aligncenter size-medium wp-image-644" title="underground" src="http://pt.pixeis.net/wp-content/uploads/2009/01/underground-300x197.png" alt="underground" width="300" height="197" /></a><a href="http://pt.pixeis.net/2009/01/descobre-o-contextfree/snowflake/"><img class="aligncenter size-medium wp-image-645" title="snowflake" src="http://pt.pixeis.net/wp-content/uploads/2009/01/snowflake-261x300.png" alt="snowflake" width="261" height="300" /></a><a href="http://pt.pixeis.net/wp-content/uploads/2009/01/tangle.jpg" rel="shadowbox[post-628];player=img;"><img class="aligncenter size-medium wp-image-646" title="tangle" src="http://pt.pixeis.net/wp-content/uploads/2009/01/tangle-240x300.jpg" alt="tangle" width="240" height="300" /></a>Então? Não podem dizer que as imagens não são úteis.. Esta última até foi usada pelo incrível Vlad Gerasimov do site <a href="http://www.vladstudio.com/" target="_blank">VladStudio</a> para fazer este espectacular wallpaper:</p>
<div class="mceTemp mceIEcenter" style="text-align: center;">
<dl id="attachment_647" class="wp-caption aligncenter" style="width: 410px;">
<dt class="wp-caption-dt"><a href="http://www.vladstudio.com/wallpaper/?frosted" target="_blank"><img class="size-full wp-image-647" title="frosted" src="http://pt.pixeis.net/wp-content/uploads/2009/01/frosted.jpg" alt="Frosted do Vlad Gerasimov" width="400" height="300" /></a></dt>
<dd class="wp-caption-dd">Frosted do Vlad Gerasimov</dd>
</dl>
</div>
<p style="text-align: center;">Espero que gostem de experimentar o programa e que vos seja útil =D</p>
<p style="text-align: center;">Até à próxima</p>


<p>Artigos relacionados:<ol><li><a href='http://pt.pixeis.net/2009/08/como-fazer-umwallpaper-estilo-blueprint-no-inkscape/' rel='bookmark' title='Permanent Link: Como fazer um wallpaper estilo blueprint no Inkscape'>Como fazer um wallpaper estilo blueprint no Inkscape</a> <small>Vamos aprender a fazer um wallpaper com um desenho técnico de um carro no Inkscape...</small></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://pt.pixeis.net/2009/01/descobre-o-contextfree/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Os Gadgets (ou não) que Todos os Designers Vão Querer este Natal</title>
		<link>http://pt.pixeis.net/2008/12/os-gadgets-que-todos-os-designers-vao-querer-este-natal/</link>
		<comments>http://pt.pixeis.net/2008/12/os-gadgets-que-todos-os-designers-vao-querer-este-natal/#comments</comments>
		<pubDate>Wed, 17 Dec 2008 03:42:46 +0000</pubDate>
		<dc:creator>Ricardo Jorge</dc:creator>
				<category><![CDATA[Artigos]]></category>
		<category><![CDATA[autocolantes]]></category>
		<category><![CDATA[cartões de memória]]></category>
		<category><![CDATA[designer]]></category>
		<category><![CDATA[Eye-Fi]]></category>
		<category><![CDATA[fotos]]></category>
		<category><![CDATA[gadgets]]></category>
		<category><![CDATA[Gorillapod]]></category>
		<category><![CDATA[Kidrobot]]></category>
		<category><![CDATA[lápis]]></category>
		<category><![CDATA[Mimobot]]></category>
		<category><![CDATA[Mimoco]]></category>
		<category><![CDATA[Munny]]></category>
		<category><![CDATA[Natal]]></category>
		<category><![CDATA[Origami]]></category>
		<category><![CDATA[pen drive]]></category>
		<category><![CDATA[post-it]]></category>
		<category><![CDATA[prendas]]></category>
		<category><![CDATA[tablet]]></category>
		<category><![CDATA[Wacom]]></category>
		<category><![CDATA[wireless]]></category>

		<guid isPermaLink="false">http://www.pixeis.net/?p=67</guid>
		<description><![CDATA[Está a chegar o Natal.. E que melhor que a internet para encontrar todas as coisas que farão um designer sorrir? ]]></description>
			<content:encoded><![CDATA[<p style="text-align: justify;">Bem, está a chegar o Natal.. E que melhor que a internet para encontrar todas as coisas que farão um designer sorrir? Nada, por isso vou-vos mostrar aqui várias ideias para coisas que poderão comprar para vocês ou para os amigos designers</p>
<p style="text-align: justify;"><a href="http://pt.pixeis.net/wp-content/uploads/2008/12/stickerbook.png" rel="shadowbox[post-67];player=img;"><img class="aligncenter size-medium wp-image-177" title="stickerbook" src="http://pt.pixeis.net/wp-content/uploads/2008/12/stickerbook.png" alt="" width="268" height="241" /></a></p>
<p style="text-align: justify;"><span style="color: #3366ff;"><strong>StickerBook</strong></span><strong> </strong>- Isto é um pequeno livro cheio de autocolantes com imagens feitas por nós ou escolhidas de uma colecção enorme disponível no site. Que prenda mais personalizada que esta? Custam a partir de €6.89 e vêm de Inglaterra.</p>
<p style="text-align: justify;">Podem encontrá-los em <a href="http://www.moo.com/products/stickers.php" target="_blank">www.moo.com</a></p>
<p style="text-align: justify;">
<p style="text-align: justify;"><a href="http://pt.pixeis.net/wp-content/uploads/2008/12/munny.jpg" rel="shadowbox[post-67];player=img;"><img class="aligncenter size-medium wp-image-178" title="munny" src="http://pt.pixeis.net/wp-content/uploads/2008/12/munny-288x300.jpg" alt="" width="288" height="300" /></a><span style="color: #3366ff;"><strong>Munny</strong></span><strong> </strong>- Quem nunca quis ter um Munny? O famoso boneco de vinil da Kidrobot que se pode personalizar á vontade.. É só pesquisar pelo google e vão-se encontrar espectaculares resultados do acto de dar um Munny a um designer.. Existem de vários tamanhos, desde pequenos para pendurar na árvore de natal, até enormes de 45cm de altura.. Também existem de várias cores, desde brancos, pretos, até coloridos que brilham no escuro. É óbvio que os preços variam bastante de acordo com o tamanho, indo desde 2,95US$ para os porta-chaves até 199US$ para os Mega Munny de 45cm de altura.</p>
<p style="text-align: justify;">Podem ser comprados no site <a href="http://www.kidrobot.com" target="_blank">www.kidrobot.com</a>, vindos dos EUA.</p>
<p style="text-align: justify;">
<p style="text-align: justify;"><a href="http://pt.pixeis.net/wp-content/uploads/2008/12/origaminotepad.jpg" rel="shadowbox[post-67];player=img;"><img class="aligncenter size-medium wp-image-179" title="origaminotepad" src="http://pt.pixeis.net/wp-content/uploads/2008/12/origaminotepad-300x120.jpg" alt="" width="300" height="120" /></a><span style="color: #3366ff;"><strong>Origami </strong><strong>Note </strong><strong>Pad</strong></span><strong> </strong>- Este é um aparentemente vulgar bloco de notas excepto pelas márcas-de-águas nas páginas de cerca de 10 construções de origami diferentes.. Ou seja, usa-se a folha, e depois é só ver as instruções, montar e colocar numa prateleira com todas as outras constuções de papel.. Custam £2.00 e vêm de Inglaterra.</p>
<p style="text-align: justify;">Podem ser comprados em <a href="http://www.suck.uk.com/product.php?rangeID=106&amp;showBar=1" target="_blank">www.suck.uk.com</a>.</p>
<p style="text-align: justify;">
<p style="text-align: justify;"><a href="http://pt.pixeis.net/wp-content/uploads/2008/12/drumstickpencil.jpg" rel="shadowbox[post-67];player=img;"><img class="aligncenter size-medium wp-image-180" title="drumstickpencil" src="http://pt.pixeis.net/wp-content/uploads/2008/12/drumstickpencil-300x77.jpg" alt="" width="300" height="77" /></a><span style="color: #3366ff;"><strong>Drumstick Pencil</strong></span> &#8211; Uma vez numa empresa fabricante de baquetas uma das máquinas avariou-se e o calor foi tão forte que o interior das baquetas ficou carbonizado e para surpresa dos empregados dava para escrever com elas.. Eles tentaram fabricar mais, mas não conseguiram produzir mais nenhuma, por isso aqui estão as que ainda existem.. mm.. ok, eu admito, nada disto é verdade.. mas não é uma história interessante para contar enquanto oferecem estas baquetas/lápis a um desenhador ou músico? <img src='http://pt.pixeis.net/wp-includes/images/smilies/icon_biggrin.gif' alt=':D' class='wp-smiley' />  Custam £5.00 e vêm de Inglaterra.</p>
<p style="text-align: justify;">Podem ser comprados em <a href="http://www.suck.uk.com/product.php?rangeID=81&amp;rangeNew=1&amp;showBar=1" target="_blank">www.suck.uk.com</a>.</p>
<p style="text-align: justify;">
<p style="text-align: justify;"><a href="http://pt.pixeis.net/wp-content/uploads/2008/12/wacomcintiq.jpg" rel="shadowbox[post-67];player=img;"><img class="aligncenter size-medium wp-image-181" title="wacomcintiq" src="http://pt.pixeis.net/wp-content/uploads/2008/12/wacomcintiq-300x200.jpg" alt="" width="300" height="200" /></a><span style="color: #3366ff;"><strong>Tablets</strong> <strong>Wacom</strong></span><strong> </strong>- Bem, é provável que vocês já tenham um destes, mas nunca nos consamos de ver os productos espectaculares da Wacom.. as suas tablets de desenho são usadas em por designers e artistas de todo o mundo.. Os preços variam imenso, desde 45€ para a Bamboo Fun até 2000€ pela Cintiq de 21&#8243; que está na imagem.</p>
<p style="text-align: justify;">A Wacom não tem loja online, por isso podem comprar por um dos sites da Amazon, como o da Inglaterra <a href="http://www.amazon.co.uk/" target="_blank">www.amazon.co.uk</a>.</p>
<p style="text-align: justify;">
<p style="text-align: justify;"><a href="http://pt.pixeis.net/wp-content/uploads/2008/12/gorillapod.jpg" rel="shadowbox[post-67];player=img;"><img class="aligncenter size-medium wp-image-182" title="gorillapod" src="http://pt.pixeis.net/wp-content/uploads/2008/12/gorillapod-300x175.jpg" alt="" width="300" height="175" /></a><span style="color: #3366ff;"><strong>Gorillapod</strong></span><strong> </strong>- Para quem gosta de fotografia, este é o melhor tripé que vão encontrar.. Com o Gorillapod vão poder colocar a câmara estável num plano inclinado, &#8220;agarrada&#8221; a um poste de iluminaçao, a um ramo de árvore, etc.. Os Gorillapod são dobráveis e o maior deles suporta até 3Kg!! É óbvio que estes são muito mais úteis se o utilizador tiver um controlo remoto da câmara, mas mesmo que não tenha, as fotos vão se muito mais nítidas do que quando a câmara está nas nossas mãos <img src='http://pt.pixeis.net/wp-includes/images/smilies/icon_biggrin.gif' alt=':D' class='wp-smiley' /> . Os preços variam entre 21,95€ até 119,95€.</p>
<p style="text-align: justify;">Podem comprá-los a partir do site original <a href="http://joby.com/products/gorillapod/" target="_blank">www.joby.com/</a> e vêm dos EUA.</p>
<p style="text-align: justify;">
<p style="text-align: justify;"><a href="http://pt.pixeis.net/wp-content/uploads/2008/12/eyefi.jpg" rel="shadowbox[post-67];player=img;"><img class="aligncenter size-medium wp-image-185" title="eyefi" src="http://pt.pixeis.net/wp-content/uploads/2008/12/eyefi-300x137.jpg" alt="" width="300" height="137" /></a><span style="color: #3366ff;"><strong>Eye</strong><strong>-Fi</strong></span><strong> </strong>- Ok, não ficam fartos de ter de ligar a câmara ao pc cada vez que voltam de um fim de semana divertido para as poderem mandar para a vossa página pessoal, ou mandar por e-mail e tal? Bem.. com este estes cartões da Eye-Fi, metade desses problemas já eram.. Eles parecem cartões normais, mas além dos 2GB de memória têm também um transmissor wireless, por isso, é só chegar a casa, ligar a câmara, e através da vossa rede wireless, o cartão vai mandar automaticamente todas as fotos para o vosso pc sem fios.. Se tiverem uma conta no Flickr, Picasa ou outro de 20 serviços online de partilha de fotos, o Eye-Fi vai automáticamente fazer upload das fotos para lá <img src='http://pt.pixeis.net/wp-includes/images/smilies/icon_biggrin.gif' alt=':D' class='wp-smiley' /> .. Custam de 79,99US$ a 129,99US$.</p>
<p style="text-align: justify;">Podem comprá-los no site original <a href="http://www.eye.fi/" target="_blank">www.eye.fi</a> e vêm dos EUA.</p>
<p style="text-align: justify;">
<p style="text-align: justify;"><a href="http://pt.pixeis.net/wp-content/uploads/2008/12/mimobot.jpg" rel="shadowbox[post-67];player=img;"><img class="aligncenter size-medium wp-image-186" title="mimobot" src="http://pt.pixeis.net/wp-content/uploads/2008/12/mimobot-300x177.jpg" alt="" width="300" height="177" /></a><span style="color: #3366ff;"><strong>Mimobot</strong></span><strong> </strong>- Claro que qualquer lista de prendas para designers tinha que incluir os Mimobot&#8217;s, umas drives USB com estilo.. Qualquer um pode usar as pen drives simples ou transparentes ou metalizadas.. mas quem quer transportar os seus documentos com estilo tem que usar um destes <img src='http://pt.pixeis.net/wp-includes/images/smilies/icon_biggrin.gif' alt=':D' class='wp-smiley' /> .. Todos os Mimobot&#8217;s são criados por designers, havendo vários temas no site, desde o Master Chief do Halo aos personagens dos Happy Tree Friends &#8211; podendo-se comprar a versão simpática e sorridente ou a versão sangrenta e mutilada <img src='http://pt.pixeis.net/wp-includes/images/smilies/icon_biggrin.gif' alt=':D' class='wp-smiley' /> .  Se o aspecto exterior não vos convenceu, saibam também que os Mimobot&#8217;s fazem um som ao serem inseridos no computador e outro ao serem retirados que depende do Mimobot em questão, oiçam demonstrações <a href="http://www.mimoco.com/mimory/mimobyte" target="_blank">aqui</a>. Os preços é que não são tão simpáticos, variando entre 39,95US$ para os de 1GB até 109,95US$ para os de 8GB.. Mas costumam haver promoções frequentemente e podem comprar o Mimobot que querem por menos do que é normal.</p>
<p style="text-align: justify;">Podem ser comprados a partir do site original <a href="http://www.mimoco.com" target="_blank">www.mimoco.com</a> e vêm dos EUA.</p>
<p style="text-align: justify;">
<p style="text-align: justify;"><a href="http://pt.pixeis.net/wp-content/uploads/2008/12/messengerbag.jpg" rel="shadowbox[post-67];player=img;"><img class="aligncenter size-medium wp-image-187" title="messengerbag" src="http://pt.pixeis.net/wp-content/uploads/2008/12/messengerbag.jpg" alt="" width="220" height="220" /></a><span style="color: #3366ff;"><strong>Custom-Made Photo Bags</strong></span> &#8211; Para os que querem oferecer uma prenda mais personalizada, estão aqui estas bolsas e malas da Photojojo.. Apenas têm que fazer upload de uma foto ou imagem e escolher a mala que preferem.. Eles imprimem num material durável e os preços variam conforme a mala entre 30US$ e 120US$.</p>
<p style="text-align: justify;">Podem ser compradas em <a href="http://www.photojojo.com/store/made-to-order/custom-photo-bags/" target="_blank">www.photojojo.com</a> e vêm dos EUA.</p>
<p style="text-align: justify;">Para os Portugueses: não se esqueçam que têm que pagar imposto alfandegário para artigos que comprem que venham de fora da União Europeia.. e isso é uma dor de cabeça.. por isso mais vale comprarem só coisas que estejam na UE</p>
<p style="text-align: justify;">Ok, foram estas as minhas sugestões.. Se souberem de alguma que achem que devia estar na lista, escrevam um comentário ;D</p>
]]></content:encoded>
			<wfw:commentRss>http://pt.pixeis.net/2008/12/os-gadgets-que-todos-os-designers-vao-querer-este-natal/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

