<?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>Marcelo Kohl</title>
	<atom:link href="http://kohl.com.br/feed" rel="self" type="application/rss+xml" />
	<link>http://kohl.com.br</link>
	<description></description>
	<lastBuildDate>Tue, 17 Apr 2012 00:23:20 +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>Desenho Animado &#8211; Parte 1 &#8211; Introdução</title>
		<link>http://kohl.com.br/1301</link>
		<comments>http://kohl.com.br/1301#comments</comments>
		<pubDate>Tue, 17 Apr 2012 00:02:32 +0000</pubDate>
		<dc:creator>kohl</dc:creator>
				<category><![CDATA[Estudos]]></category>
		<category><![CDATA[animação]]></category>
		<category><![CDATA[Curso]]></category>
		<category><![CDATA[Tutorial]]></category>

		<guid isPermaLink="false">http://kohl.com.br/?p=1301</guid>
		<description><![CDATA[Dar vida a uma idéia transformando-a numa animação é o sonho de muitos, mas não é uma tarefa fácil pra ninguém. Mesmo o stopmotion, que é uma das técnicas de [...]]]></description>
			<content:encoded><![CDATA[<p>Dar vida a uma idéia transformando-a numa animação é o sonho de muitos, mas não é uma tarefa fácil pra ninguém. Mesmo o stopmotion, que é uma das técnicas de animação mais simples que existem, requer o minimo de conhecimento e estudo, muito suor e um bom tempo investido pra sair algo com o mínimo de qualidade.</p>
<p>O <em><strong>PROPÓSITO</strong></em> deste e dos próximos artigos intitulados &#8220;Desenho Animado&#8221; é o de aprender e organizar o meu aprendizado na área de animação, no mesmo momento em que crio uma animação para fixar os estudos. Todos os passos, ideias, referências, ferramentas que forem utilizadas serão compartilhados e explicados nos próximos artigos. Será um tipo de curso básico pra se ter uma visão geral dos processos e conceitos da arte de animar.</p>
<p>As <em><strong>TÉCNICAS DE ANIMAÇÃO </strong></em>mais conhecidas são as seguintes:</p>
<ul>
<li><strong>Desenho animado (2D)</strong> &#8211; É aquele que se faz desenhando quadro a quadro no papel ou num programa de pc.</li>
<li><strong>Stop Motion</strong> &#8211; Esse é feito com fotos, seja de bonecos de massinha, pessoas (Pixilation) ou qualquer objeto. A moral dessa técnica é animar com uma sequencia de fotos.</li>
<li><strong>Animação 3D</strong> &#8211; É feita com programas de computador que criam imagens em 3 dimensões. Um exemplo de animação 3D é o filme do Shrek.</li>
<li><strong>Rotoscopia</strong> &#8211; Nessa técnica se filma os movimentos reais das pessoas, pega cada imagem de cada quadro do filme e se desenha por cima da imagem do filme pra &#8220;capturar&#8221; os movimentos das pessoas filmadas.</li>
<li><strong>Animação de recortes</strong> &#8211; Imagine-se recortando de uma revista a imagem de uma cabeça de uma pessoa, a imagem de um corpo doutra página, braços, pernas, tudo separado, e depois junta-los na mesa e usar da técnica de fotos de stopmotion pra anima-los. É basicamente isso.</li>
</ul>
<p>Além dessas técnicas, existem outras formas de dar vida aos objetos ou aos desenhos, tais como animação direto na película do filme, animação no canto dos cadernos das aulas chatas(Flipbook), além de todas as possibilidades de animação que técnica stopmotion permite, tais como animar com desenhos na areia, luzes, tintas, pinturas na parede, comida, lixo, focas, etc&#8230; . Mas uma coisa é certa, pro espectador pouco importa a técnica escolhida, o que realmente importante pra ele é um trabalho bem elaborado. Por isso escolha a técnica que vc se sinta mais a vontade em criar. Um bom video com alguns exemplos de técnicas de  animação: <iframe src="http://www.youtube.com/embed/wq21A5PL64Y" frameborder="0" width="660" height="400"></iframe></p>
<p>Os <em><strong>PASSOS PARA CRIAR UMA ANIMAÇÃO </strong></em>de responsa, independentemente da técnica escolhida, são praticamente os mesmos :</p>
<ul>
<li><strong>Argumento</strong> &#8211; No argumento você precisa descrever sua ideia de forma clara para o que roteirista não tenha dificuldade em criar o roteiro e para que talvez um investidor possa entende-la e tenha alguma chance dele gostar do projeto e consequentemente banca-lo.</li>
<li><strong>Roteiro</strong> &#8211; Este é o documento onde se descrever e organizam as cenas, de forma numerada, cada cena possui informações como diálogos, cenários, som, observações, etc.</li>
<li><strong>Storyboard</strong> &#8211; Aqui se desenha as cenas do roteiro, já se imaginando a posição dos personagens, angulo da câmera, etc. É basicamente um quadro da cena representado em desenho. Sua maior utilidade é visualizar a animação antes da criação, isso evita refação na produção.</li>
<li><strong>Animatic</strong> &#8211; É a junção dos desenhos do storyboard num vídeo já com o timming certo. Praticamente um storyboard animado.</li>
<li><strong>Model Sheet</strong> - ou &#8220;folhas modelo&#8221;, é um documento com o desenho das poses básicas dos personagens. Serve pra estabelecer a forma como o personagem tem que ser desenhado, as características visuais do personagem.</li>
<li><strong>Produção</strong> &#8211; Bom, depois de definidos o roteiro, o storyboard e o model sheet, que são partes cruciais pra o desenvolvimento de uma boa animação, é hora da diversão e da ralação. Ai depende da técnica escolhida, que no meu caso seria a hora de pegar o papel e o lápis e esquecer do mundo. (: Nessas hora é importante ter em mente os <em>princípios da animação</em> que descrevo logo abaixo.</li>
<li><strong>Finalização </strong>- Depois de feito todos os desenhos (ou fotos, depende da técnica), é hora de junta-los num programa que sequencia as imagens. Colocar efeitos sonoros, músicas, efeitos especiais, e tudo mais.</li>
</ul>
<p>Ah! Os passos para criar filmes, seriados, novelas, etc, são bem parecidos com estes descritos acima.</p>
<p>Os <em><strong>12 PRINCÍPIOS DA ANIMAÇÃO </strong></em>é o resultado de uma pesquisa que a Walt Disney fez na década de 30, mas em miúdos estes princípios são o bom senso na hora de animar. Por simples observação, quem curte animar, de certa forma já tem em mente alguns desses conceitos e os aplica automaticamente quando produz uma animação, isso por que a maior parte destes princípios são representações das leis da física.</p>
<ul>
<li><strong>Timming</strong> &#8211; Considero este o mais importante, porque o tempo de duração de cada ação de um objeto ou personagem define a personalidade, peso, humor, etc. É também o timming o grande responsável pelo interesse do espectador no seu filme, se o filme for muito parado com pouca troca de cenas, ninguém vai ter saco pra terminar de assisti-lo, e se for muito acelerado, sem explicar a estória plenamente, provável que ninguém entenda também.</li>
<li><strong>Slow In e Slow Out </strong>- Eu compararia esse princípio com a inércia dos objetos na vida real. Role uma bola no chão e observe-a até ela parar, ela não para do nada, ela vai parando aos poucos, este seria o<em> Slow Out</em>. E o<em> Slow In</em> é o mesmo efeito, mas no início do movimento.  Outro exemplo prático seria a aceleração e desaceleração dum carro. Seja um movimento de braço, uma bigorna caindo ou o movimento de uma arvore balançando ao vento numa tarde de inverno, precisa seguir esse princípio pra parecer real.</li>
<li><strong>Movimento em Arcos</strong> -  Um bom exemplo de movimento em arco é o da cabeça virando de um lado para o outro, num movimento de &#8220;não&#8221;. Ela parece que gira de forma retilínea, mas naturalmente ela faz uma pequena curva para baixo, um movimento bem sutil, mas que tem grande impacto no realismo da animação. Repare quando sua cabeça gira de um lado pro outro naturalmente, sem forçar um movimento reto. Quando se joga uma bola para cima ela dificilmente ira percorrer uma linha reta na subida e na descida, se  desenhar o trajeto da bola o desenho sairá parecido com um arco.</li>
<li><strong>Squash e Strech</strong> - Se você jogar um balão dágua no chão, no momento em que ele tocar o solo, ele fará um <em>Squash</em> (comprimir), se ele não estourar, ele fará um <em>Strech</em> (esticar) na volta. Percebeu? Squash e Strech são aqueles movimentos que dão uma certa flexibilidade ao objeto ou ao personagem, muito usado quando o gato cai de uma certa altura e quando toca o chão da aquele efeito exagerado de encolhimento.</li>
<li><strong>Antecipação</strong> - É a ação que antecede a ação principal. Um exemplo: A ação que queres mostrar é a de um cara martelando um tomate, mas pra animação ficar realista, antes dele mover o braço do ponto inicial até o tomate, ele precisa pegar impulso, precisa antecipar o movimento, então ele erguendo a mão pra trás. Quando o Coiote vai correr atras do Papa-Léguas, ele se prepara (antecipa) encolhendo uma perna, inclina um pouco o corpo pra trás, e ai sim, ele se projeta pra frente e sai correndo. Praticamente toda ação tem uma antecipação, caso contrário, parece um movimento mecânico.</li>
<li><strong>Exagero</strong> &#8211; Esse princípio é mais perceptível nas animações estilo cartoon, quando o personagem abre a boca num tamanho duas vezes o original pra demonstrar espanto ou quando o cãozinho faz cara de choro com os olhos exageradamente expressivos. Isto é usado pra ressaltar um movimento ou expressão que se queira dar destaque. É usado também em desenhos mais realistas, mas de forma sutil.</li>
<li><strong>Follow Through and Overlapping Action (Continuidade e sobreposição da ação)</strong> &#8211; Seria a ação e reação no desenho, se uma moça corre, uma das reações disto é o movimento dos cabelos ou do tecido do vestido, se a moça correr e o cabelo e o vestido não reagirem com o vento, ficará estranho. Se ela parar bruscamente, os cabelos e o vestido se projetam pra frente também. É a reação das partes inertes e flexíveis relacionadas a um movimento.</li>
<li><strong>Ação secundária</strong> &#8211; Pedro, Mel e Joca estão fugindo num opala branco, numa cena de perseguição de carros, Pedro está no banco de trás, Mel esta sentada no carona e Joca é o motorista e também o foco principal na cena. Joca manobra o caro fazendo expressões faciais, movimentos com o braço no volante e vezes olha pelo retrovisor com um olhar tenso. Esta seria a ação primária. Agora imagine essa cena com Mel e Pedro parados como bonecos sem se balançarem quando Joca faz uma curva perigosa ou por qualquer outro motivo, dessa forma a cena ficaria bem estranha. Ação secundária seriam todas essas animações que não são o foco mas que são reações da ação principal.</li>
<li><strong><strong>Staging</strong> (<strong>Encenação</strong>)</strong> &#8211; Você precisa mostrar numa cena a ação de um personagem dobrando um papel e fazendo um avião, dependendo do ângulo da câmera e da posição dos braços e do corpo do personagem, a cena pode parecer misturada e confusa e não passar a ideia sugerida. A ideia do <em>Staging </em>é a de deixar o mais claro possível a ação do personagem. Uma boa técnica é a de visualizar a silhueta do personagem, se na silhueta a ação estiver clara, provavelmente no desenho final estará clara também.</li>
<li><strong><strong>Straight Ahead Action and Pose to Pose</strong> </strong>- Este, pelo menos pra mim, foi o princípio mais complexo de entender. Estes são dois métodos diferentes para criar uma animação. Seria como duas formas diferentes de escrever um texto, numa você  escreve o texto do início até o fim sem pensar na frente, e noutra você primeiro escreve o início de cada tópico do texto, depois volta e desenvolve cada tópico. No <em>Straight Ahead</em> (animação direta) você desenha do primeiro frame até o ultimo, sem se preocupar com as poses seguintes da ação que estas desenhando, a vantagem disso é uma animação mais fluida e espontânea. No <em>Pose to Pose</em> você desenharia as poses principais que existem entre o início e o final da cena, pra depois animar entre o intervalo de cada pose, dessa forma se tem mais controle sobre a animação, evitando erros.</li>
<li><strong>Solid Drawind (Personalidade)</strong> &#8211; É como o personagem se apresenta, este princípio depende do traço do desenhista também, dependendo da personalidade do personagem, o processo de animação muda, isso por que o estilo e a velocidade da movimentação personagem dependem de sua personalidade, entre outras coisas.</li>
<li><strong>Apelo</strong> &#8211; Um desenho atraente é fundamental numa animação, não importa o estilo, mas o desenho tem que ser harmonioso e agradável de se ver, caso contrário o espectador perderá o interesse no filme logo de cara.</li>
</ul>
<p>Esta seria minha visão geral sobre os passos pra se entrar(nem que seja um pouquinho) no mundo da animação. Todas as informações desse artigo foram baseadas em minhas pesquisas na internet e interpretadas por alguém(eu) que está começando na área de animação e suscetível a enganos. Portanto não usem este artigo, nem nenhum outro que acharem na internet, como fonte única de informação. (:</p>
<p>Conforme eu for aprimorando meu conhecimento na área de animação, irei melhorando e refinando este artigo.</p>
<p>Alguns bons sites que encontrei no garimpo net afora:</p>
<ul>
<li>Mais sobre a técnica  de animação Strainght-Ahead e Pose to Pose: <a href="http://www.allanbrito.com/2007/02/09/tecnicas-de-animacao/">www.allanbrito.com/2007/02/09/tecnicas-de-animacao</a></li>
<li>História da animação: <a href="http://pt.wikipedia.org/wiki/Hist%C3%B3ria_da_anima%C3%A7%C3%A3o">pt.wikipedia.org/wiki/Hist%C3%B3ria_da_anima%C3%A7%C3%A3o</a></li>
<li>Bela explicação de como é feito um desenho animado:<a href="http://mundoestranho.abril.com.br/materia/como-e-feito-um-desenho-animado">mundoestranho.abril.com.br/materia/como-e-feito-um-desenho-animado</a></li>
<li>Mais sobre os 12 princípios: <a href="http://www.mundogump.com.br/os-12-principios-da-animacao/">mundogump.com.br/os-12-principios-da-animacao</a></li>
<li>Ótimo programa sobre animação nacional na TV Brasil: <a href="http://tvbrasil.ebc.com.br/animania">tvbrasil.ebc.com.br/animania</a></li>
</ul>
<p><img style="display:none;" class="alignnone size-thumbnail wp-image-1341" title="animation_intro" src="http://kohl.com.br/uploads/animation_intro-300x192.png" alt="" width="300" height="192" /></p>
]]></content:encoded>
			<wfw:commentRss>http://kohl.com.br/1301/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Stencil bicicleta de asfalto</title>
		<link>http://kohl.com.br/1296</link>
		<comments>http://kohl.com.br/1296#comments</comments>
		<pubDate>Thu, 22 Mar 2012 23:25:10 +0000</pubDate>
		<dc:creator>kohl</dc:creator>
				<category><![CDATA[Stencilando]]></category>
		<category><![CDATA[Download]]></category>
		<category><![CDATA[Stencil]]></category>
		<category><![CDATA[SVG]]></category>

		<guid isPermaLink="false">http://kohl.com.br/?p=1296</guid>
		<description><![CDATA[Deixo aqui um desenho rápido que fiz dum stencil daquelas bicicletas de sinalização de ciclovia. (:]]></description>
			<content:encoded><![CDATA[<p>Deixo aqui um desenho rápido que fiz dum stencil daquelas bicicletas de sinalização de ciclovia. (:</p>
<p><img class="alignnone size-full wp-image-1297" title="bike" src="http://kohl.com.br/uploads/bike.png" alt="" width="660" height="385" /></p>
<p><a   href="http://kohl.com.br/uploads/bike.zip"    class="button  medium   green "><span >Baixar bike.svg</span></a></p>
]]></content:encoded>
			<wfw:commentRss>http://kohl.com.br/1296/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Estampando camiseta com stencil &#8211; 2 cores</title>
		<link>http://kohl.com.br/771</link>
		<comments>http://kohl.com.br/771#comments</comments>
		<pubDate>Tue, 07 Feb 2012 00:07:12 +0000</pubDate>
		<dc:creator>kohl</dc:creator>
				<category><![CDATA[Stencilando]]></category>
		<category><![CDATA[Camiseta]]></category>
		<category><![CDATA[Stencil]]></category>
		<category><![CDATA[Tutorial]]></category>
		<category><![CDATA[Video]]></category>

		<guid isPermaLink="false">http://kohl.com.br/?p=771</guid>
		<description><![CDATA[Olá amigos, tenho recebido alguns emails com dúvidas sobre stencil, e uma dúvida frequente é a de como estampar camiseta com mais de uma cor. Como tudo nessa vida, o [...]]]></description>
			<content:encoded><![CDATA[<p>Olá amigos, tenho recebido alguns emails com dúvidas sobre stencil, e uma dúvida frequente é a de como estampar camiseta com mais de uma cor. Como tudo nessa vida, o processo de <em>stencilar</em> uma camiseta com mais de uma cor é bem simples.</p>
<p>Primeiro você precisa de um desenho em duas ou mais cores. Escolhido o desenho, você precisa separar as cores em imagens diferentes. Nesse tutorial vou usar uma famosa obra do Banksy, a Flower Riot. Ela tem a parte preta e a parte das flores que tem varias cores, mas vamos considerar as flores como se fossem de uma unica cor(chapa).<br />
Pra cada cor que você queira em sua estampa, você terá uma chapa diferente (cor = chapa).<br />
No exemplo abaixo serão duas chapas de stencil, uma preta (folha 1) e uma da cor das flores (folha 2).</p>
<p><img class="alignnone size-full wp-image-778" title="tuto_stencil_2_cores_folhas" src="http://kohl.com.br/uploads/tuto_stencil_2_cores_folhas.png" alt="" width="660" height="249" /></p>
<p>No caso desse desenho, apenas usei um editor de imagem para dar um contraste na Folha 1 e cortar a parte colorida e escurecer na Folha 2. Trampo bem simples, pra fazer uma imagem P&amp;B de uma foto coloria, digamos, de uma pessoa, já seria outro esquema.<br />
Mas não vou explicar como usar um editor de imagem pra separar as cores nesse tutorial, mesmo porque cada caso é um caso. Futuramente quem sabe eu faça um tutorial sobre isso, mas mais abrangente.</p>
<p>Fique atento na hora de separar, você precisa sempre manter as proporções do desenho em todas as folhas. É interessante que as folhas tenham o mesmo tamanho pra que as imagens encaixem uma em cima da outra. Veja na animação abaixo:</p>
<p><img class="alignnone size-full wp-image-779" title="tuto_stencil_2_cores_comparacao" src="http://kohl.com.br/uploads/tuto_stencil_2_cores_comparacao.gif" alt="" width="400" height="452" /></p>
<p>Bom, feito as imagens, coloque-as no Open Office ou no Word e certifique-se de que elas estão na proporção correta e então imprima-as. Corte o stencil como explicado no <a href="http://kohl.com.br/112">tutorial de stencil</a>.</p>
<p><img class="alignnone size-full wp-image-790" title="tuto_stencil_2_cores_folhas_cortes" src="http://kohl.com.br/uploads/tuto_stencil_2_cores_folhas_cortes.jpg" alt="" width="660" height="312" /></p>
<p>Com o stencil cortado da Folha 1 e o da Folha 2 não precisa de mais nada, apenas pintar a camiseta como no <a href="http://kohl.com.br/453">tutorial de estampar camisetas com stencil</a>.</p>
<p>Dica 1: Eu costumo pintar as cores claras primeiro e por ultimo o preto, se for o caso.<br />
Dica 2: Espere secar bem a primeira mão de tinta pra em seguida pintar a próxima cor. Se o clima onde tu moras for quente e pouco úmido em torno de meia hora acredito que seque. Mas sempre toque com o dedo de leve na tinta da camiseta pra ver se esta bom ou não.</p>
<p>Fiz um vídeo rápido pra demonstrar o processo e já aproveitei pra também mostrar como se aplica a cola permanente.<br />
<iframe src="http://www.youtube.com/embed/Z8DNSaB-EJU" frameborder="0" width="660" height="420"></iframe></p>
<p>O resultado final é esse:<br />
<img class="alignnone size-full wp-image-1099" title="tuto_stencil_2_cores_camiseta_final" src="http://kohl.com.br/uploads/tuto_stencil_2_cores_camiseta_final.jpg" alt="" width="660" height="495" /></p>
<p>Espero que tenha ficado claro no vídeo como foi pintado as cores das flores com uma unica chapa e com o pincel. Obviamente que não precisava disso, as flores poderiam ser de uma unica cor também.</p>
<p>Faça download do doc usado pra imprimir essa estampa.<br />
<a   href="http://kohl.com.br/uploads/tuto_stencil_2_cores.zip"    class="button  medium   green "><span >Baixar arquivos</span></a></p>
<p>Divirtam-se (:</p>
]]></content:encoded>
			<wfw:commentRss>http://kohl.com.br/771/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>O Velho</title>
		<link>http://kohl.com.br/576</link>
		<comments>http://kohl.com.br/576#comments</comments>
		<pubDate>Tue, 15 Nov 2011 17:58:23 +0000</pubDate>
		<dc:creator>kohl</dc:creator>
				<category><![CDATA[Desenhos]]></category>
		<category><![CDATA[Inkscape]]></category>
		<category><![CDATA[Stencil]]></category>
		<category><![CDATA[SVG]]></category>
		<category><![CDATA[Vetor]]></category>

		<guid isPermaLink="false">http://stencilando.kohl.com.br/?p=576</guid>
		<description><![CDATA[Deixo aqui um vetor em formato SVG. Já com as pontes, pronto pra cortar. Pra editar podes usar o programa Inkscape, que é um programa gratuito e open source.]]></description>
			<content:encoded><![CDATA[<p>Deixo aqui um vetor em formato SVG. Já com as pontes, pronto pra cortar.<br />
Pra editar podes usar o programa <a title="Inkscape" href="http://inkscape.org/" target="_blank">Inkscape</a>, que é um programa gratuito e open source.</p>
<p><img class="alignnone size-medium wp-image-577" title="o_velho" src="http://kohl.com.br/uploads/o_velho.png"/></p>
<p><a   href="http://kohl.com.br/uploads/o_velho.zip"    class="button  medium   green "><span >Baixar vetor SVG</span></a></p>
]]></content:encoded>
			<wfw:commentRss>http://kohl.com.br/576/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Sinapse da Inovação</title>
		<link>http://kohl.com.br/1023</link>
		<comments>http://kohl.com.br/1023#comments</comments>
		<pubDate>Sun, 06 Nov 2011 19:25:00 +0000</pubDate>
		<dc:creator>kohl</dc:creator>
				<category><![CDATA[Portfólio]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Jquery]]></category>

		<guid isPermaLink="false">http://kohl.com.br/?p=1023</guid>
		<description><![CDATA[Desenvolvi a interface do sistema sinapse, de uma maneira inteiramente funcional para que o programador não tivesse trabalhos de ajustes, utilizando as linguagens...]]></description>
			<content:encoded><![CDATA[<script type='text/javascript' src='http://kohl.com.br/wp-content/themes/salutary/js/src/galleria.js?ver=3.3.1'></script>
<script type='text/javascript' src='http://kohl.com.br/wp-content/themes/salutary/js/src/themes/classic/galleria.classic.js?ver=3.3.1'></script>
<script type="text/javascript">
		/* <![CDATA[ */
		jQuery(document).ready(function($) {
			$("#galleria21").galleria({
				transition: "fade",
				autoplay:false,
				height:420,
				image_crop: true
			});
		});	
		/* ]]> */
		</script><div class="three_fourth">
<div id="gal_content">
<div id="galleria21" style="width:660px; height:420px;">
<div><a href="http://kohl.com.br/wp-content/themes/salutary/timthumb.php?src=http://kohl.com.br/uploads/sinapse_01.jpg&amp;w=660&amp;h=420&amp;zc=1&amp;q=100" ><img src="http://kohl.com.br/uploads/sinapse_01-80x50.jpg"   width="80" height="50" /></a></div>
<div><a href="http://kohl.com.br/wp-content/themes/salutary/timthumb.php?src=http://kohl.com.br/uploads/sinapse_02.jpg&amp;w=660&amp;h=420&amp;zc=1&amp;q=100" ><img src="http://kohl.com.br/uploads/sinapse_02-80x50.jpg"   width="80" height="50" /></a></div>
<div><a href="http://kohl.com.br/wp-content/themes/salutary/timthumb.php?src=http://kohl.com.br/uploads/sinapse_03.jpg&amp;w=660&amp;h=420&amp;zc=1&amp;q=100" ><img src="http://kohl.com.br/uploads/sinapse_03-80x50.jpg"   width="80" height="50" /></a></div>
<div><a href="http://kohl.com.br/wp-content/themes/salutary/timthumb.php?src=http://kohl.com.br/uploads/sinapse_04.jpg&amp;w=660&amp;h=420&amp;zc=1&amp;q=100" ><img src="http://kohl.com.br/uploads/sinapse_04-80x50.jpg"   width="80" height="50" /></a></div>
<div><a href="http://kohl.com.br/wp-content/themes/salutary/timthumb.php?src=http://kohl.com.br/uploads/sinapse_05.jpg&amp;w=660&amp;h=420&amp;zc=1&amp;q=100" ><img src="http://kohl.com.br/uploads/sinapse_05-80x50.jpg"   width="80" height="50" /></a></div>
<div><a href="http://kohl.com.br/wp-content/themes/salutary/timthumb.php?src=http://kohl.com.br/uploads/sinapse_06.jpg&amp;w=660&amp;h=420&amp;zc=1&amp;q=100" ><img src="http://kohl.com.br/uploads/sinapse_06-80x50.jpg"   width="80" height="50" /></a></div>
<div><a href="http://kohl.com.br/wp-content/themes/salutary/timthumb.php?src=http://kohl.com.br/uploads/sinapse_07.png&amp;w=660&amp;h=420&amp;zc=1&amp;q=100" ><img src="http://kohl.com.br/uploads/sinapse_07-80x50.png"   width="80" height="50" /></a></div>
</div>
</div>
</div>
<div class="one_fourth last">
<div class="teaserbg"  style="width:100%;">
<div class="teaserborder"  style="">
Tecnologia: CSS, HTML, Javascript, Jquery</p>
<hr />
<p>Criado em: 10/2011</p>
<hr />
<p>Site: <a href="http://sinapsedainovacao.com.br" target="_blank">sinapsedainovacao.com.br</a></p>
<hr />
<p>Sobre: Desenvolvi a interface do sistema sinapse, de uma maneira inteiramente funcional para que o programador não tivesse trabalhos de ajustes, utilizando as linguagens CSS e HTML para criar a parte visual e a linguagem Javascript para animar os efeitos de transição e aparecimento das caixas de login e modais. Utilizando o mínimo de imagens para reduzir o tempo de carregamento das páginas.
</p></div>
</div>
<p><!--end:teaserbg--></div>
<div class="clear"></div>
]]></content:encoded>
			<wfw:commentRss>http://kohl.com.br/1023/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Cola permanente, camisetas e chapa</title>
		<link>http://kohl.com.br/568</link>
		<comments>http://kohl.com.br/568#comments</comments>
		<pubDate>Fri, 28 Oct 2011 22:47:16 +0000</pubDate>
		<dc:creator>kohl</dc:creator>
				<category><![CDATA[Stencilando]]></category>
		<category><![CDATA[Dúvidas]]></category>
		<category><![CDATA[Stencil]]></category>

		<guid isPermaLink="false">http://stencilando.kohl.com.br/?p=568</guid>
		<description><![CDATA[Olá, Depois que conheci o seu blog, me interessei demais por fazer Stencil em camisetas Agora já estou super animado, consegui várias artes que me interessam para colocar na camiseta [...]]]></description>
			<content:encoded><![CDATA[<blockquote><p>Olá,</p>
<p>Depois que conheci o seu blog, me interessei demais por fazer Stencil em camisetas<br />
Agora já estou super animado, consegui várias artes que me interessam para colocar na camiseta<br />
Mas preciso de umas dicas que fiquei com dúvida:</p>
<p>1-) A Cola permanente que você passa no stencil é para fixa-lo à camiseta? Ela sai depois com facilidade? Precisa mesmo dessa cola, ou pode ser feito sem ela?</p>
<p>2-) Qual o material do stencil que você usa no vídeo tutorial para a camiseta? não consigo identificar (Seria Vinil ou acetato mesmo?)</p>
<p>3-) Qual o preço mínimo de uma camiseta&#8230; assim, sem contar lucro, somente a soma de todos os materiais +ou- (só para eu ter uma base)</p>
<p>Obrigado desde já.<br />
Caetano</p></blockquote>
<p>1- Então, eu uso a cola permanente pra suprimir as manchas de tinta que &#8220;vazam&#8221; por baixo do stencil. Mas tu podes pintar uma camiseta sem usar cola permanente na chapa de stencil, só fica sujeito a mais frisos de tinta indesejados. Mas nada grave tb, eu que sou perfeccionista com as camisetas mesmo xD E a cola permanente não sai do stencil com facilidade, só com solvente, por isso eu uso as pastas L pra guardar o stencil com cola permanente.</p>
<p>2- Pra criar as radiografias eu uso chapa de raio-x que passo nos hospitais e clinicas pedindo. Acho muito melhor que os acetados e vinis comprados nas lojas, são mais resistentes, finos e fáceis de cortar. Mas o que é normalmente usando é um vinil branco comprado em lojas de desenho.</p>
<p>3- Na época que eu tava vendendo camisetas eu passava numa fabrica aqui pra comprar as malhas em quantidade, ai pagava menos, gastava cerda de 7Reais numa boa malha branca. Mas ultimamente parei com as camisetas e to repensando essa logística.</p>
<p>Abraços</p>
]]></content:encoded>
			<wfw:commentRss>http://kohl.com.br/568/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Creative Commons</title>
		<link>http://kohl.com.br/498</link>
		<comments>http://kohl.com.br/498#comments</comments>
		<pubDate>Thu, 20 Oct 2011 20:53:36 +0000</pubDate>
		<dc:creator>kohl</dc:creator>
				<category><![CDATA[Todas]]></category>
		<category><![CDATA[Creative Commons]]></category>

		<guid isPermaLink="false">http://stencilando.kohl.com.br/?p=498</guid>
		<description><![CDATA[A partir de hoje oficializo o que já não deixava de ser: O conteúdo do site é livre pra qualquer pessoa utilizar, publicar e coisar como achar melhor, desde que [...]]]></description>
			<content:encoded><![CDATA[<p>A partir de hoje oficializo o que já não deixava de ser: O conteúdo do site é livre pra qualquer pessoa utilizar, publicar e coisar como achar melhor, desde que atribua a autoria. Farei isso colocando no rodapé do site um link do <a title="Creative Commons" href="http://www.creativecommons.org.br/" target="_blank">Creative Commons</a> e marcando o post com a tag &#8220;Creative Commons&#8221;, assim deixando claro pra quem entra no site que o conteúdo aqui pode ser utilizado por terceiros sem problemas. Pra quem não conhece, um quote do Wikipedia sobre esse projeto&#8230;</p>
<blockquote><p><strong>Creative Commons</strong> é uma organização não governamental sem fins lucrativos localizada em São Francisco, Califórnia, nos Estados Unidos, voltada a expandir a quantidade de obras criativas disponíveis, através de suas licenças que permitem a cópia e compartilhamento com menos restrições que o tradicional <em>todos direitos reservados</em>. Para esse fim, a organização criou diversas licenças, conhecidas como licenças Creative Commons.<br />
<a href="http://pt.wikipedia.org/wiki/Creative_Commons">http://pt.wikipedia.org/wiki/Creative_Commons</a></p></blockquote>
<p>Abaixo tem um vídeo muito bacana mostrando como funciona o creative commons. Vale a pena ver!<br />
<iframe src="http://www.youtube.com/embed/izSOrOmxRgE" frameborder="0" width="640" height="480"></iframe></p>
<blockquote><p>Seja criativo, é fácil quando você não precisa de intermediários.</p></blockquote>
<p>PS: Tomei essa atitude de deixar claro que parte do conteúdo aqui no blog é livre por que hoje recebi um email pedindo autorização pra usar o conteúdo do site num trabalho acadêmico.</p>
]]></content:encoded>
			<wfw:commentRss>http://kohl.com.br/498/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Intranet Senai</title>
		<link>http://kohl.com.br/1238</link>
		<comments>http://kohl.com.br/1238#comments</comments>
		<pubDate>Mon, 10 Oct 2011 14:26:58 +0000</pubDate>
		<dc:creator>kohl</dc:creator>
				<category><![CDATA[Portfólio]]></category>
		<category><![CDATA[PNG]]></category>

		<guid isPermaLink="false">http://kohl.com.br/?p=1238</guid>
		<description><![CDATA[ Estudo de usabilidade para a intranet do SENAI. Foram criadas mais de 100 telas e 3 layouts diferentes em...]]></description>
			<content:encoded><![CDATA[<script type="text/javascript">
		/* <![CDATA[ */
		jQuery(document).ready(function($) {
			$("#galleria21").galleria({
				transition: "fade",
				autoplay:false,
				height:420,
				image_crop: true
			});
		});	
		/* ]]> */
		</script><div class="three_fourth">
<div id="gal_content">
<div id="galleria21" style="width:660px; height:420px;">
<div><a href="http://kohl.com.br/wp-content/themes/salutary/timthumb.php?src=http://kohl.com.br/uploads/senai_01.jpg&amp;w=660&amp;h=420&amp;zc=1&amp;q=100" ><img src="http://kohl.com.br/uploads/senai_01-80x50.jpg"   width="80" height="50" /></a></div>
<div><a href="http://kohl.com.br/wp-content/themes/salutary/timthumb.php?src=http://kohl.com.br/uploads/senai_02.jpg&amp;w=660&amp;h=420&amp;zc=1&amp;q=100" ><img src="http://kohl.com.br/uploads/senai_02-80x50.jpg"   width="80" height="50" /></a></div>
<div><a href="http://kohl.com.br/wp-content/themes/salutary/timthumb.php?src=http://kohl.com.br/uploads/senai_03.jpg&amp;w=660&amp;h=420&amp;zc=1&amp;q=100" ><img src="http://kohl.com.br/uploads/senai_03-80x50.jpg"   width="80" height="50" /></a></div>
<div><a href="http://kohl.com.br/wp-content/themes/salutary/timthumb.php?src=http://kohl.com.br/uploads/senai_04.jpg&amp;w=660&amp;h=420&amp;zc=1&amp;q=100" ><img src="http://kohl.com.br/uploads/senai_04-80x50.jpg"   width="80" height="50" /></a></div>
<div><a href="http://kohl.com.br/wp-content/themes/salutary/timthumb.php?src=http://kohl.com.br/uploads/senai_05.jpg&amp;w=660&amp;h=420&amp;zc=1&amp;q=100" ><img src="http://kohl.com.br/uploads/senai_05-80x50.jpg"   width="80" height="50" /></a></div>
<div><a href="http://kohl.com.br/wp-content/themes/salutary/timthumb.php?src=http://kohl.com.br/uploads/senai_06.jpg&amp;w=660&amp;h=420&amp;zc=1&amp;q=100" ><img src="http://kohl.com.br/uploads/senai_06-80x50.jpg"   width="80" height="50" /></a></div>
</div>
</div>
</div>
<div class="one_fourth last">
<div class="teaserbg"  style="width:100%;">
<div class="teaserborder"  style="">
Tecnologia: PNG</p>
<hr />
<p>Criado em: 10/2011</p>
<hr />
<p>Sobre: Estudo de usabilidade para a intranet do SENAI. Foram criadas mais de 100 telas e 3 layouts diferentes em png pra análise dos componentes da intranet.
</p></div>
</div>
<p><!--end:teaserbg--></div>
<div class="clear"></div>
]]></content:encoded>
			<wfw:commentRss>http://kohl.com.br/1238/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Fishbone</title>
		<link>http://kohl.com.br/838</link>
		<comments>http://kohl.com.br/838#comments</comments>
		<pubDate>Sat, 10 Sep 2011 17:30:51 +0000</pubDate>
		<dc:creator>kohl</dc:creator>
				<category><![CDATA[Desenhos]]></category>
		<category><![CDATA[Inkscape]]></category>
		<category><![CDATA[SVG]]></category>
		<category><![CDATA[Todas]]></category>
		<category><![CDATA[Vetor]]></category>

		<guid isPermaLink="false">http://kohl.com.br/?p=838</guid>
		<description><![CDATA[]]></description>
			<content:encoded><![CDATA[<p><img class="alignnone size-full wp-image-840" title="fishbone" src="http://kohl.com.br/uploads/fishbone1.png" alt="" width="660" height="431" /></p>
<p><a   href="http://kohl.com.br/uploads/fishbone.zip"    class="button  medium   green "><span >Baixar vetor SVG</span></a></p>
]]></content:encoded>
			<wfw:commentRss>http://kohl.com.br/838/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Simplex</title>
		<link>http://kohl.com.br/1050</link>
		<comments>http://kohl.com.br/1050#comments</comments>
		<pubDate>Thu, 20 Jan 2011 15:59:34 +0000</pubDate>
		<dc:creator>kohl</dc:creator>
				<category><![CDATA[Portfólio]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Jquery]]></category>

		<guid isPermaLink="false">http://kohl.com.br/?p=1050</guid>
		<description><![CDATA[Esse projeto foi estruturado pretendendo ter uma fácil troca de tema. O css foi criado separando cores do restante do estilo num arquivo css a parte. Assim basta...]]></description>
			<content:encoded><![CDATA[<script type="text/javascript">
		/* <![CDATA[ */
		jQuery(document).ready(function($) {
			$("#galleria21").galleria({
				transition: "fade",
				autoplay:false,
				height:420,
				image_crop: true
			});
		});	
		/* ]]> */
		</script><div class="three_fourth">
<div id="gal_content">
<div id="galleria21" style="width:660px; height:420px;">
<div><a href="http://kohl.com.br/wp-content/themes/salutary/timthumb.php?src=http://kohl.com.br/uploads/simplex_01.jpg&amp;w=660&amp;h=420&amp;zc=1&amp;q=100" ><img src="http://kohl.com.br/uploads/simplex_01-80x50.jpg"   width="80" height="50" /></a></div>
<div><a href="http://kohl.com.br/wp-content/themes/salutary/timthumb.php?src=http://kohl.com.br/uploads/simplex_02.jpg&amp;w=660&amp;h=420&amp;zc=1&amp;q=100" ><img src="http://kohl.com.br/uploads/simplex_02-80x50.jpg"   width="80" height="50" /></a></div>
<div><a href="http://kohl.com.br/wp-content/themes/salutary/timthumb.php?src=http://kohl.com.br/uploads/simplex_03.jpg&amp;w=660&amp;h=420&amp;zc=1&amp;q=100" ><img src="http://kohl.com.br/uploads/simplex_03-80x50.jpg"   width="80" height="50" /></a></div>
<div><a href="http://kohl.com.br/wp-content/themes/salutary/timthumb.php?src=http://kohl.com.br/uploads/simplex_04.jpg&amp;w=660&amp;h=420&amp;zc=1&amp;q=100" ><img src="http://kohl.com.br/uploads/simplex_04-80x50.jpg"   width="80" height="50" /></a></div>
<div><a href="http://kohl.com.br/wp-content/themes/salutary/timthumb.php?src=http://kohl.com.br/uploads/simplex_05.jpg&amp;w=660&amp;h=420&amp;zc=1&amp;q=100" ><img src="http://kohl.com.br/uploads/simplex_05-80x50.jpg"   width="80" height="50" /></a></div>
<div><a href="http://kohl.com.br/wp-content/themes/salutary/timthumb.php?src=http://kohl.com.br/uploads/simplex_06.png&amp;w=660&amp;h=420&amp;zc=1&amp;q=100" ><img src="http://kohl.com.br/uploads/simplex_06-80x50.png"   width="80" height="50" /></a></div>
</div>
</div>
</div>
<div class="one_fourth last">
<div class="teaserbg"  style="width:100%;">
<div class="teaserborder"  style="">
Tecnologia: CSS, HTML, Javascript, Jquery</p>
<hr />
<p>Criado em: 01/2011</p>
<hr />
<p>Site: <a href="http://kohl.com.br/wp-content/uploads/2012/03/simplex_full.png" target="_blank">Ver screenshot</a></p>
<hr />
<p>Sobre: Esse projeto foi estruturado pretendendo ter uma fácil troca de tema. O css foi criado separando cores do restante do estilo num arquivo css a parte. Assim basta criar um novo arquivo css e apenas trocar o código das cores que se tem um novo tema. Após criar o tema é preciso apenas adicionar uma chamada dele num array no javascript. Também nesse projeto foi estudado e definido os componentes html que seriam usados e entregue num único arquivo html para o programador utilizar na criação do sistema.
</p></div>
</div>
<p><!--end:teaserbg--></div>
<div class="clear"></div>
]]></content:encoded>
			<wfw:commentRss>http://kohl.com.br/1050/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

