<?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; Projectos</title>
	<atom:link href="http://pt.pixeis.net/category/projectos/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>Texturas de Papel Rasgado</title>
		<link>http://pt.pixeis.net/2009/02/texturas-de-papel-rasgado/</link>
		<comments>http://pt.pixeis.net/2009/02/texturas-de-papel-rasgado/#comments</comments>
		<pubDate>Tue, 17 Feb 2009 18:24:54 +0000</pubDate>
		<dc:creator>Ricardo Jorge</dc:creator>
				<category><![CDATA[Downloads]]></category>
		<category><![CDATA[Photoshop]]></category>
		<category><![CDATA[Projectos]]></category>
		<category><![CDATA[Tutoriais]]></category>
		<category><![CDATA[montagem]]></category>
		<category><![CDATA[papel]]></category>
		<category><![CDATA[régua]]></category>
		<category><![CDATA[scanner]]></category>
		<category><![CDATA[texturas]]></category>
		<category><![CDATA[Wacom]]></category>
		<category><![CDATA[web-design]]></category>

		<guid isPermaLink="false">http://www.pixeis.net/?p=923</guid>
		<description><![CDATA[Vamos aprender a fazer as nossas próprias texturas de papel rasgado. Quem quiser pode fazer o download das texturas já prontas a usar sem ter que fazer os passos anteriores


Artigos relacionados:<ol><li><a href='http://pt.pixeis.net/2009/01/como-fazer-texturas-impressoes-digitais/' rel='bookmark' title='Permanent Link: Como Fazer Texturas: Impressões Digitais'>Como Fazer Texturas: Impressões Digitais</a> <small>Vamos usar guache para pintarmos impressões digitais numa folha de papel e depois digitalizar e pôr no Photoshop.. Vão ver...</small></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p>Actualmente muitos designers gostam de dar um estilo mais natural e não tão digital aos seus sites, usando elementos relativos à sua profissão &#8211; régua, lápis, borracha, pincel, wacom, bloco de notas e papel.. papel.. E que melhor para dar ao papel a aparência de papel que papel rasgado?</p>
<p>Então decidi fazer este artigo a mostrar como fazer texturas de papel rasgado de boa qualidade em vez das simulações digitais no Photoshop que a maior parte usa..</p>
<p><strong>Se quiserem fazer o download dos ficheiros, </strong><span style="color: #ff9900;"><a href="http://pt.pixeis.net/2009/02/texturas-de-papel-rasgado/#download"><strong>cliquem aqui</strong></a></span><strong> para ir para o fundo do artigo onde está o link para o download</strong></p>
<p>Mas para os que querem ver o que se passa nos bastidores, continuem a ler =D</p>
<h1>Material Necessário:</h1>
<p>- <strong>Papel de embrulho</strong> de uma cor sólida (eu comprei um vermelho por €0,40 e só usei um pouco)<br />
- <strong>Papel A4</strong> de uma cor que tenha muito contraste à do papel de embrulho (eu usei roxo)<br />
- <strong>Régua </strong>e <strong>Tesoura</strong>/<strong>X-acto</strong> (todos facultativos)<br />
- <strong>Scanner</strong></p>
<p>Eu escolhi papel de embrulho por ser barato em relação a muitos tipos de papéis, por ser fácil de encontrar nas mais diversas cores e por ter cada lado da folha de uma cor (uma colorida e uma branca)</p>
<p>Aqui está o que eu usei:</p>
<p><img class="aligncenter size-full wp-image-924" title="papel" src="http://pt.pixeis.net/wp-content/uploads/2009/02/papel.jpg" alt="papel" width="550" height="413" /></p>
<h1>Passo 1</h1>
<p>Então vamos lá começar a rasgar..</p>
<p>Cortei uma fita de papel, dividi-a em quatro e experiementei rasgar os pedaços de 4 formas diferentes: com e sem régua e com a parte colorida virada para cima e para baixo</p>
<p>A técnica que resulta melhor é com a parte colorida virada para cima (sem comparação) e com régua faz uma parte rasgada demasiado perfeita, por isso mais vale rasgar á mão..</p>
<p>Então rasguei depois vários pedaços de vários tamanhos do papel e fui digitalizar tudo.. Para digitalizar, ponham o papel rasgado no meio do scanner com a parte colorida a ser digiralizada e depois coloquem a folha de cor contrastante por cima, para depois vermos a diferença entre a parte rasgada (branca) e o fundo (agora da cor da folha.. sem folha seria também branco)</p>
<p>Eu usei estas características na digitalização:</p>
<p><img class="aligncenter size-full wp-image-925" title="scanner" src="http://pt.pixeis.net/wp-content/uploads/2009/02/scanner.jpg" alt="scanner" width="387" height="355" /></p>
<p>Então depois de digitalizar, obti isto que vou guardar para se poder usar nas imagens que quiser depois..</p>
<p><img class="aligncenter size-full wp-image-926" title="photoshoppy" src="http://pt.pixeis.net/wp-content/uploads/2009/02/photoshoppy.jpg" alt="photoshoppy" width="370" height="465" /></p>
<h1>Passo 2</h1>
<p>Normalmente este estilo é usado para simular papel normal branco  ou pautado de caderno.. Mas nós vamos mais longe e vamos usar uma imagem para parecer que está imprimida e que o papel está rasgado.. Por isso precisamos de uma imagem.. Eu vou usar esta:</p>
<p><img class="aligncenter size-full wp-image-932" title="waterwaves" src="http://pt.pixeis.net/wp-content/uploads/2009/02/waterwaves.png" alt="waterwaves" width="550" height="550" /></p>
<p>Vou criar um novo documento do Photoshop que vai ser a imagem final.. Vamos imaginar que é a header de um site, por isso vou criá-lo com a resolução de 550&#215;200..</p>
<p>Arrastem a imagem que querem usar (eu vou usar a dar ondas) para o novo documento..</p>
<p>Agora vamos ao documento do scanner e com a Rectangular Marquee Tool vou seleccionar uma zona com melhor aspecto e vou pressionar Ctrl+C para copiar..</p>
<p>No novo documento documento, pressiono Ctrl+V para colar e depois redimensionei e posicionei com a Move Tool:</p>
<p><img class="aligncenter size-full wp-image-933" title="colar1" src="http://pt.pixeis.net/wp-content/uploads/2009/02/colar1.jpg" alt="colar1" width="585" height="242" /></p>
<p>Vou ao documento do scanner e copio uma parte para a zona de baixo da imagem e colo na nova imagem..</p>
<p><img class="aligncenter size-full wp-image-934" title="colar2" src="http://pt.pixeis.net/wp-content/uploads/2009/02/colar2.jpg" alt="colar2" width="558" height="208" /></p>
<h1>Passo 3</h1>
<p>Agora vamos usar a Clone Stamp Tool para criar os lados e o centro da imagem =D</p>
<p>Junto as duas layers do papel numa só (seleccionem a de cima e pressionem Ctrl+E)</p>
<p>Então com a Clone Stamp Tool vamos escolher um pincel suave pequeno (cerca de 20px) e vamos escolher uma zona do lado da imagem e colar na parte que falta..  Para escolher o local de origem, Pressionem a tecla Alt e cliquem onde querem.. Depois é só clicar noutro local, e ele vai colar lá o que seleccionaram:</p>
<p><img class="aligncenter size-full wp-image-935" title="clone-stamp" src="http://pt.pixeis.net/wp-content/uploads/2009/02/clone-stamp.jpg" alt="clone-stamp" width="385" height="426" /></p>
<p>Fazemos então isto para os dois lados da imagem, e depois para o centro:</p>
<p><img class="aligncenter size-full wp-image-936" title="clonestamped" src="http://pt.pixeis.net/wp-content/uploads/2009/02/clonestamped.jpg" alt="clonestamped" width="550" height="200" /></p>
<p>Agora temos que substituir a parte roxa pelo nosso fundo e a parte vermelha pela nossa imagem..</p>
<p>Fundo primeiro..</p>
<h1>Passo 4</h1>
<p>Vou criar uma layer com o findo final da imagem.. Vou preenchê-lo com azul, uma mancha de branco no meio, preto dos lados e imenso gaussian blur (Filter&gt;Blur&gt;Gaussian Blur) para ficar com um gradiente =D</p>
<p><img class="aligncenter size-full wp-image-937" title="fundo1" src="http://pt.pixeis.net/wp-content/uploads/2009/02/fundo1.jpg" alt="fundo1" width="550" height="200" /></p>
<p>Agora ponho esta layer abaixo de todas as outras, ponho a da imagem das ondas invisível e vamos tratar da de papel..</p>
<p>Com a Eyedropper Tool, vou seleccionar o roxo que está à volta do papel.. Agora vamos ao menu Select&gt;Color Range e isto vai seleccionar todo o roxo na nossa imagem.. Quanto mais baixo for o valor que escolhermos, mais próximas do nosso roxo vão ser as cores que ele vai &#8220;aceitar&#8221; na selecção criada.. Vamos escolher um valor de forma a que a parte rasgada (branca) fique a cinzento escuro (se ficar branca, não se vai ver depois.. se ficar preta, vai ficar demasiado opaca &#8211; o que também não queremos uma vez que essa parte é apenas algumas fibras de papel e por isso é ligeiramente transparente)..</p>
<p style="text-align: center; "><img class="aligncenter size-full wp-image-938" title="colorrange" src="http://pt.pixeis.net/wp-content/uploads/2009/02/colorrange.jpg" alt="colorrange" width="538" height="292" /></p>
<p style="text-align: center; ">
<p style="text-align: left; ">Aceitamos a selecção e com a layer do papel seleccionada, clicamos no botão de criar uma máscara para a layer:</p>
<p style="text-align: left; "><img class="aligncenter size-full wp-image-939" title="mask1" src="http://pt.pixeis.net/wp-content/uploads/2009/02/mask1.jpg" alt="mask1" width="472" height="336" /></p>
<p style="text-align: left; ">Como seleccionamos a parte roxa, e a máscara depende da selecção, agora só vemos a parte roxa da imagem, por isso vamos clicar na máscara, e com ela seleccionada pressionar Ctrl+I para inverter.. Agora já deve aparecer o inverso.. Só a parte de papel =D</p>
<p style="text-align: left; "><img class="aligncenter size-full wp-image-940" title="masked" src="http://pt.pixeis.net/wp-content/uploads/2009/02/masked.jpg" alt="masked" width="550" height="200" /></p>
<p style="text-align: left; ">Agora a parte vermelha..</p>
<h1>Passo 5</h1>
<p style="text-align: left; ">Mesma coisa: Eyedropper Tool, seleccionar o vermelho, ir ao menu Select&gt;Color Range e seleccionar de forma a ficar todo o vermelho incluído:</p>
<p style="text-align: center; "><img class="aligncenter size-full wp-image-941" title="colorrange2" src="http://pt.pixeis.net/wp-content/uploads/2009/02/colorrange2.jpg" alt="colorrange2" width="531" height="300" /></p>
<p style="text-align: left;">Clicamos em Ok, e desta vez, seleccionamos a imagem que queremos que apareça no papel (a das ondas) e  criamos a máscara lá.. Temos de ter essa layer acima da que tem o papel obviamente, ou não se vai ver =P</p>
<p style="text-align: left;">Na minha imagem ainda se notavam alguns pixeis vermelhos, por isso seleccionei a máscara da imagem das ondas e pressionei Ctrl+L para editar os levels:</p>
<p style="text-align: left;"><img class="aligncenter size-full wp-image-942" title="levels" src="http://pt.pixeis.net/wp-content/uploads/2009/02/levels.jpg" alt="levels" width="528" height="462" /></p>
<p style="text-align: left;">Que tal está o resultado final?</p>
<p style="text-align: left;"><img class="aligncenter size-full wp-image-943" title="final1" src="http://pt.pixeis.net/wp-content/uploads/2009/02/final1.jpg" alt="final1" width="550" height="200" /></p>
<p style="text-align: left;">Claro que não está muito realista porque não tem sombras..</p>
<h1>Passo 6</h1>
<p style="text-align: left;">Podemos adicionar umas sombras e até algum Warp como no tutorial dos <a href="http://pt.pixeis.net/?p=863" target="_blank">selos</a> =D</p>
<p style="text-align: left;">E o resultado foi este:</p>
<p style="text-align: left;"><img class="aligncenter size-full wp-image-944" title="final2" src="http://pt.pixeis.net/wp-content/uploads/2009/02/final2.jpg" alt="final2" width="550" height="200" /></p>
<p style="text-align: left;">Mm.. Talvez o Blur tenha sido demasiado..</p>
<p style="text-align: left;">De qualquer maneira, agora já sabem fazer imagens destas =D</p>
<p><a name="download"></a></p>
<p style="text-align: left;">Para fazerem o <strong>download </strong>do ficheiro com o papel já pronto a usar e com transparência e tudo, cliquem <a href="http://www.pixeis.net/contador.php?url=http://www.mediafire.com/file/jifygtnyczz/PapelRasgado.zip" target="_blank">aqui</a>.</p>
<p style="text-align: left;">Espero que tenham gostado e até à próxima =D</p>


<p>Artigos relacionados:<ol><li><a href='http://pt.pixeis.net/2009/01/como-fazer-texturas-impressoes-digitais/' rel='bookmark' title='Permanent Link: Como Fazer Texturas: Impressões Digitais'>Como Fazer Texturas: Impressões Digitais</a> <small>Vamos usar guache para pintarmos impressões digitais numa folha de papel e depois digitalizar e pôr no Photoshop.. Vão ver...</small></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://pt.pixeis.net/2009/02/texturas-de-papel-rasgado/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Como Fazer Texturas: Impressões Digitais</title>
		<link>http://pt.pixeis.net/2009/01/como-fazer-texturas-impressoes-digitais/</link>
		<comments>http://pt.pixeis.net/2009/01/como-fazer-texturas-impressoes-digitais/#comments</comments>
		<pubDate>Tue, 20 Jan 2009 18:18:58 +0000</pubDate>
		<dc:creator>Ricardo Jorge</dc:creator>
				<category><![CDATA[Illustrator]]></category>
		<category><![CDATA[Inkscape]]></category>
		<category><![CDATA[Photoshop]]></category>
		<category><![CDATA[Projectos]]></category>
		<category><![CDATA[Tutoriais]]></category>
		<category><![CDATA[cartão de visita]]></category>
		<category><![CDATA[impressão digital]]></category>
		<category><![CDATA[pincel]]></category>
		<category><![CDATA[scanner]]></category>
		<category><![CDATA[texturas]]></category>
		<category><![CDATA[tinta]]></category>

		<guid isPermaLink="false">http://www.pixeis.net/?p=761</guid>
		<description><![CDATA[Vamos usar guache para pintarmos impressões digitais numa folha de papel e depois digitalizar e pôr no Photoshop.. Vão ver que é mais divertido que simplesmente tirar texturas da net


Artigos relacionados:<ol><li><a href='http://pt.pixeis.net/2009/01/pack-7-impressoes-digitais/' rel='bookmark' title='Permanent Link: Pack 7 Impressões Digitais'>Pack 7 Impressões Digitais</a> <small>Temos aqui um pack de 7 impressões digitais para fazerem o download e usarem nos vossos projectos sem restrições...</small></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p>Olá, hoje vamos sujar as mãos.. Literalmente.. Vamos usar <a href="http://pt.wikipedia.org/wiki/Guache" target="_blank">guache</a> para pintarmos impressões digitais numa folha de papel e depois digitalizar e pôr no Photoshop.. E se quiserem, vectorizar alguma no Inkscape ou Illustrator..</p>
<p style="text-align: justify;">Vão ver que é mais divertido que simplesmente tirar texturas da net.. Ainda mais porque texturas de impressões digitais são difíceis de encontrar.. Mãos à obra =D</p>
<h1>Material Necessário:</h1>
<p style="text-align: justify;"><span style="color: #ff9900;"><strong><img class="aligncenter size-full wp-image-762" title="material" src="http://pt.pixeis.net/wp-content/uploads/2009/01/material.jpg" alt="material" width="550" height="388" /><br />
</strong></span></p>
<p style="text-align: justify;"><strong>Papel branco</strong> &#8211; Pode ser de impressora.. Eu usei papel normal A4 de 80g</p>
<p style="text-align: justify;"><strong>Guache preto</strong> ou outra cor muito escura &#8211; Tecnicamente, podem usar outro tipo qualquer de tinta, mas guache é à base de água, por isso vai sair muito facilmente dos vossos dedos e de todas as coisas que sujarem =D.. Ah, e é fácil de encontrar à venda</p>
<p style="text-align: justify;"><strong>Pincel </strong>- Ou outra coisa qualquer que dê para misturar a tinta com a água e colocar algumas gotas de vez em quando no:</p>
<p style="text-align: justify;"><strong>Pano de limpar óculos</strong> &#8211; Neste caso também podem usar outro tipo qualquer de pano.. Mas este oferece algumas vantagens: é pequeno, tem um tecido muito suave e feito com linhas muito finas que vai deixar tinta uniformements pelo vosso dedo.. E é gratuito: simplesmente vão a uma óptica qualquer e peçam um (é fácil se estiverem a usar óculos no momento)</p>
<p style="text-align: justify;"><strong>Copo com muito pouca quantidade de água</strong> &#8211; Para misturar o guache aqui dentro</p>
<p style="text-align: justify;"><strong>Contentor para o pano de limpar óculos </strong>- Eu usei uma tampa para copo de plástico que encontrei por aqui..</p>
<p style="text-align: justify;"><strong>Scanner</strong></p>
<p style="text-align: justify;"><strong><a href="http://www.adobe.com/products/photoshop/photoshopextended/" target="_blank">Photoshop</a></strong></p>
<p style="text-align: justify;">Ok.. então vamos lá começar..</p>
<p style="text-align: justify;">Ponham algum guache na água do copo até ter uma consistência oleosa.. Não pode ser muito líquido, porque não se ia ver as marcas no papel..</p>
<p style="text-align: justify;">Dobrem o pano e coloquem-no no contentor e deitem algum do líquido no pano:</p>
<p style="text-align: justify;"><img class="aligncenter size-full wp-image-764" title="tinta" src="http://pt.pixeis.net/wp-content/uploads/2009/01/tinta.jpg" alt="tinta" width="550" height="413" /></p>
<p style="text-align: justify;">Agora, preparem uma folha de papel e ponham o dedo na tinta do pano e espalhem a tinta para não ficar muita quantidade no dedo e ponham o dedo no papel para marcar a impressão digital.. Se for necessário, ponham mais algumas gotas de tinta no pano com o pincel</p>
<p style="text-align: justify;">Façam isto várias vezes, com várias quantidades de tinta e com vários dedos até terem a folha cheia:</p>
<p style="text-align: justify;"><img class="aligncenter size-full wp-image-765" title="scan" src="http://pt.pixeis.net/wp-content/uploads/2009/01/scan.jpg" alt="scan" width="550" height="756" /></p>
<p style="text-align: justify;">Ok? Agora podem limpar tudo enquanto a tinta seca no papel.. O guache deve sair facilmente só com água e sabão..</p>
<p style="text-align: justify;">Quando a folha estiver seca, ponham no scanner e digitalizem.. Eu usei estas definições:</p>
<p style="text-align: justify;"><img class="aligncenter size-full wp-image-766" title="scanner" src="http://pt.pixeis.net/wp-content/uploads/2009/01/scanner.jpg" alt="scanner" width="385" height="353" /></p>
<p style="text-align: justify;">E depois da demorada digitalização, obti uma imagem com 5100x7014px.. Isto é bem grande.. São  35,7 MegaPíxeis..</p>
<p style="text-align: justify;">Ok, agora mandem a vossa imagem para o Photoshop e com a Rectangular Marquee Tool (M) e vamos alterar as impressões digitais uma a uma (apenas as melhores)..</p>
<p style="text-align: justify;"><img class="aligncenter size-full wp-image-767" title="impressao" src="http://pt.pixeis.net/wp-content/uploads/2009/01/impressao.jpg" alt="impressao" width="523" height="477" /></p>
<p style="text-align: justify;">Seleccionem uma das que estiver bem definida e pressionem Ctrl+C para a copiar e depois vão ao menu File&gt;New e cliquem em Ok, uma vez que o Photoshop automáticamente extrai as dimensões e características do que vocês têm seleccionado..</p>
<p style="text-align: justify;">No novo documento, pressionem Ctrl+V para colar a impressão digital numa nova layer..</p>
<p style="text-align: justify;">Agora vamos tirar algum do ruído da imagem.. Para isso, vamos a Filter&gt;Blur&gt;Gaussian Blur e lá vamos usar um valor pequeno.. Eu usei 2px..</p>
<p style="text-align: justify;">Agora vamos ao menu Image&gt;Adjustments&gt;Threshold e vamos deslizar o handle até ficarmos com uma imagem usável:</p>
<p style="text-align: justify;">
<div class="mceTemp mceIEcenter" style="text-align: justify;">
<dl id="attachment_768" class="wp-caption aligncenter" style="width: 310px;">
<dt class="wp-caption-dt"><a href="http://pt.pixeis.net/wp-content/uploads/2009/01/threshold.jpg" rel="shadowbox[post-761];player=img;"><img class="size-medium wp-image-768 " title="threshold" src="http://pt.pixeis.net/wp-content/uploads/2009/01/threshold-300x281.jpg" alt="cliquem na imagem para aumentar" width="300" height="281" /></a></dt>
<dd class="wp-caption-dd">cliquem na imagem para aumentar</dd>
</dl>
</div>
<p style="text-align: justify;">Agora gravem a imagem como ficheiro PNG e vamos abrir o programa de vectores..</p>
<p style="text-align: justify;">Eu vou usar o Inkscape, mas o processo no Illustrator também é muito simples: Novo documento, Importar a imagem, Vectorizar (Live Trace no Illustrator e Trace Bitmap no Inkscape) e gravar como vector..</p>
<p style="text-align: justify;">Então obti isto:</p>
<p style="text-align: center;"><a href="http://pt.pixeis.net/wp-content/uploads/2009/01/impressaodigital.png" rel="shadowbox[post-761];player=img;"><img class="size-full wp-image-769 aligncenter" title="impressaodigital" src="http://pt.pixeis.net/wp-content/uploads/2009/01/impressaodigital.png" alt="impressaodigital" width="421" height="648" /></a></p>
<p style="text-align: justify;">Que tal? Não ia ficar bem como fundo nas vossas imagens vectoriais? Ou num cartão de visita de uma empresa de segurança =D</p>
<p style="text-align: justify;">Agora só precisam de fazer o mesmo para todas as impressões digitais que parecerem boas na imagem digitalizada..</p>
<p style="text-align: justify;">Se não se quiserem dar ao trabalho, podem fazer o download das impressões digitais já vectorizadas <a href="http://pt.pixeis.net/?p=790" target="_blank">neste artigo</a>.</p>
<p style="text-align: justify;">Espero que tenham gostado e que mostrem os vossos resultados nos comentários, até à próxima =D</p>


<p>Artigos relacionados:<ol><li><a href='http://pt.pixeis.net/2009/01/pack-7-impressoes-digitais/' rel='bookmark' title='Permanent Link: Pack 7 Impressões Digitais'>Pack 7 Impressões Digitais</a> <small>Temos aqui um pack de 7 impressões digitais para fazerem o download e usarem nos vossos projectos sem restrições...</small></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://pt.pixeis.net/2009/01/como-fazer-texturas-impressoes-digitais/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>

