<?xml version='1.0' encoding='UTF-8'?><rss xmlns:atom='http://www.w3.org/2005/Atom' xmlns:openSearch='http://a9.com/-/spec/opensearchrss/1.0/' xmlns:georss='http://www.georss.org/georss' version='2.0'><channel><atom:id>tag:blogger.com,1999:blog-6857773259275968838</atom:id><lastBuildDate>Wed, 14 Oct 2009 05:33:39 +0000</lastBuildDate><title>Meditación Dispersa</title><description>tutoriales sobre pixel art, programación, diseño de aplicaciones.</description><link>http://pitfiend.blogspot.com/</link><managingEditor>noreply@blogger.com (Pitfiend)</managingEditor><generator>Blogger</generator><openSearch:totalResults>7</openSearch:totalResults><openSearch:startIndex>1</openSearch:startIndex><openSearch:itemsPerPage>25</openSearch:itemsPerPage><item><guid isPermaLink='false'>tag:blogger.com,1999:blog-6857773259275968838.post-8478811509665021845</guid><pubDate>Mon, 04 Feb 2008 07:22:00 +0000</pubDate><atom:updated>2008-02-24T20:36:44.758-05:00</atom:updated><category domain='http://www.blogger.com/atom/ns#'>Programas</category><category domain='http://www.blogger.com/atom/ns#'>Pixel Art</category><title>Otro programa para dibujar</title><description>&lt;p align="justify"&gt;Como siempre, revisando la Internet, descubr&amp;#237; un nuevo programa para editar im&amp;#225;genes. El programa en cuesti&amp;#243;n tambi&amp;#233;n es gratuito. Se llama PaintStar y se puede descargar de este sitio &lt;a href="http://wang.zhenzhou.googlepages.com"&gt;http://wang.zhenzhou.googlepages.com&lt;/a&gt;&lt;/p&gt;  &lt;p align="justify"&gt;Cuenta con funciones elementales y permite editar dibujos de 5000x5000 pixeles. Entre otras caracter&amp;#237;sticas puede abrir 30 formatos de fotos, tiene un librer&amp;#237;a de 100 filtros y efectos, m&amp;#250;ltiples capas, obtenci&amp;#243;n directa de fotos mediante mecanismos TWAIN, as&amp;#237; como capturas de pantalla.&lt;/p&gt;  &lt;p align="justify"&gt;Espero sea de utilidad.&lt;/p&gt;  &lt;div class="blogger-post-footer"&gt;&lt;hr/&gt;&lt;a href="http://pitfiend.blogspot.com"&gt;Meditaci&amp;oacute;n Dispersa&lt;/a&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/6857773259275968838-8478811509665021845?l=pitfiend.blogspot.com' alt='' /&gt;&lt;/div&gt;</description><link>http://pitfiend.blogspot.com/2008/02/otro-programa-para-dibujar.html</link><author>noreply@blogger.com (Pitfiend)</author><thr:total xmlns:thr='http://purl.org/syndication/thread/1.0'>0</thr:total></item><item><guid isPermaLink='false'>tag:blogger.com,1999:blog-6857773259275968838.post-1373643211807725762</guid><pubDate>Mon, 07 Jan 2008 19:16:00 +0000</pubDate><atom:updated>2008-01-10T13:43:03.646-05:00</atom:updated><category domain='http://www.blogger.com/atom/ns#'>Pixel Art</category><title>Pixel Art - Casita de pixels (parte 2)</title><description>&lt;p align="justify"&gt;En esta parte final del tutorial veremos como se le ponen detalles a la casita, para que sea mas &amp;quot;real&amp;quot;. Tambi&amp;#233;n se le pone color y se le aplica una t&amp;#233;cnica b&amp;#225;sica de sombreado que realza el trabajo final.&lt;/p&gt;  &lt;p align="justify"&gt;&lt;a href="http://picasaweb.google.com/pitfiend/WindowsLiveWriter/photo?authkey=JNAlwnfTQQA#5153917134001581634"&gt;&lt;img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" align="right" border="0" src="http://lh4.google.com/pitfiend/R4ZkU6X2rkI/AAAAAAAAAKU/9zG0xkMZvio/s144/techo.gif" /&gt;&lt;/a&gt;Primer paso para que nuestra casa de pixels se parezca m&amp;#225;s a una casa de verdad es hacer que el techo sea m&amp;#225;s real, por lo tanto, en nuestra casa ya existente lo que haremos ser&amp;#225; tomar solo el techo y duplicarlo, luego de lo cual lo sobre posicionaremos para lograr el efecto de doble capa, tal como se puede ver en la figura de la derecha. &lt;/p&gt;  &lt;p align="justify"&gt;&lt;a href="http://picasaweb.google.com/pitfiend/WindowsLiveWriter/photo?authkey=JNAlwnfTQQA#5153909806787374546"&gt;&lt;img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" align="right" border="0" src="http://lh6.google.com/pitfiend/R4ZdqaX2rdI/AAAAAAAAAJM/bzsZQDlymfM/s144/detalles.jpg" /&gt;&lt;/a&gt;Una ves concluido el techo y que estemos satisfechos con como quedo es momento de poner los dem&amp;#225;s detalles de una casa, vale decir, puerta y ventanas. N&amp;#243;tese que ambas ventanas, la del frente y la lateral tienen en mismo ancho y alto, adem&amp;#225;s la ventana del frente esta alineada horizontalmente con la puerta, que a su vez tambi&amp;#233;n tiene las mismas proporciones que las ventanas.&lt;/p&gt;  &lt;p align="justify"&gt;&lt;a href="http://picasaweb.google.com/pitfiend/WindowsLiveWriter/photo?authkey=JNAlwnfTQQA#5153909823967243778"&gt;&lt;img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" align="right" border="0" src="http://lh6.google.com/pitfiend/R4ZdraX2rgI/AAAAAAAAAJk/GWZoKzdhDHM/s144/detalles-final.jpg" /&gt;&lt;/a&gt;Cuando finalmente estamos conformes con los detalles del modelo, hacemos una limpieza r&amp;#225;pida de la imagen para dejarla tal como se muestra a la derecha. Tambi&amp;#233;n podemos hacer una breve pausa para determinar si vamos por la ruta correcta, definir la paleta de colores que vamos a usar, o tal vez poner mas detalles.&lt;/p&gt;  &lt;p align="justify"&gt;&lt;a href="http://picasaweb.google.com/pitfiend/WindowsLiveWriter/photo?authkey=JNAlwnfTQQA#5153909828262211122"&gt;&lt;img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" align="right" border="0" src="http://lh3.google.com/pitfiend/R4ZdrqX2rjI/AAAAAAAAAJ8/TyxGKDCXnrU/s144/color-general.jpg" /&gt;&lt;/a&gt;Luego de definir los colores que usaremos, le ponemos el color mas oscuro a toda la casa. De esta manera nos damos una idea de como terminara todo el modelo. V&amp;#233;ase que el color seleccionado (el cuadrado marr&amp;#243;n a la derecha de la casa) se aplica a todo, salvo el &amp;#225;rea de las ventanas.&lt;/p&gt;  &lt;p align="justify"&gt;&lt;a href="http://picasaweb.google.com/pitfiend/WindowsLiveWriter/photo?authkey=JNAlwnfTQQA#5153918607175364178"&gt;&lt;img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" align="right" border="0" src="http://lh3.google.com/pitfiend/R4ZlqqX2rlI/AAAAAAAAAKc/pWAoqsbW6QE/s144/color-vistas.gif" /&gt;&lt;/a&gt;Pero como no todos los colores de la casa son iguales, es necesario tener colores adicionales para los dem&amp;#225;s detalles, que tambi&amp;#233;n tienen que ser resaltados. Esto se logra aclarando u oscureciendo mas el color base. De ah&amp;#237; que sea fundamental no escoger un color muy oscuro.&lt;/p&gt;  &lt;p align="justify"&gt;&lt;a href="http://picasaweb.google.com/pitfiend/WindowsLiveWriter/photo?authkey=JNAlwnfTQQA#5153909828262211106"&gt;&lt;img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" align="right" border="0" src="http://lh3.google.com/pitfiend/R4ZdrqX2riI/AAAAAAAAAJ0/lbJVeYwibHk/s144/color-tonos.jpg" /&gt;&lt;/a&gt;Una vez definida una paleta de colores adecuada lo que resta es pintar con el m&amp;#233;todo que se prefiera, tratando de hacer notar las &amp;#225;reas iluminadas y las oscuras. Como se puede ver en la imagen a la derecha se pone especial &amp;#233;nfasis a las dos aguas del techo, una de ellas es mas clara que la otra, pero mantiene el patr&amp;#243;n de color de acuerdo con la paleta definida.&lt;/p&gt;  &lt;p align="justify"&gt;&lt;a href="http://picasaweb.google.com/pitfiend/WindowsLiveWriter/photo?authkey=JNAlwnfTQQA#5153919315844968034"&gt;&lt;img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" align="right" border="0" src="http://lh4.google.com/pitfiend/R4ZmT6X2rmI/AAAAAAAAAKk/IM-UtwWc6no/s144/color-detalles.gif" /&gt;&lt;/a&gt;Para que los bordes no sean tan r&amp;#237;gidos, se usa una t&amp;#233;cnica de delineado que consta en reemplazar algunas l&amp;#237;neas negras por otras en un color diferente. Con esto se logra suavizar el contorno de las ventas y el techo. Tambi&amp;#233;n se colocan l&amp;#237;neas adicionales para dar la sensaci&amp;#243;n de profundidad.&lt;/p&gt;  &lt;p align="justify"&gt;&lt;a href="http://picasaweb.google.com/pitfiend/WindowsLiveWriter/photo?authkey=JNAlwnfTQQA#5153909823967243794"&gt;&lt;img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" align="right" border="0" src="http://lh6.google.com/pitfiend/R4ZdraX2rhI/AAAAAAAAAJs/7WtDJ-NNEZA/s144/color-ventanas.jpg" /&gt;&lt;/a&gt;Las ventanas siempre son transl&amp;#250;cidas y dejan entrever lo que hay tras ellas. Por lo tanto es importante definir el grado de detalla que se le quiera dar a al imagen, para as&amp;#237; poder dibujar correctamente lo que hay tras ellas. Como este primer trabajo no es tan ambicioso, basta con poner algo detr&amp;#225;s de ellas para dar as&amp;#237; la impresi&amp;#243;n de que hay algo y que la casa no esta vac&amp;#237;a.&lt;/p&gt;  &lt;p align="justify"&gt;&lt;a href="http://picasaweb.google.com/pitfiend/WindowsLiveWriter/photo?authkey=JNAlwnfTQQA#5153909815377309154"&gt;&lt;img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" align="right" border="0" src="http://lh4.google.com/pitfiend/R4Zdq6X2reI/AAAAAAAAAJU/7tiOUeortqQ/s144/sombra-proyeccion.jpg" /&gt;&lt;/a&gt;Para completar el realismo de la casa, es necesario incorporar la sombra de la misma. El &amp;#225;rea sombreada corresponde a la superficie del techo, por lo tanto si hacemos una proyecci&amp;#243;n directa del techo al piso, tendremos una sombra bastante aceptable. Hay que tener en cuenta que la luz no incide directamente, sino que lo hace de lado por lo tanto, un lado de la casa estar&amp;#225; un poco mas iluminado y la sombra se prolongara hacia el lado opuesto.&lt;/p&gt;  &lt;p align="justify"&gt;&lt;a href="http://picasaweb.google.com/pitfiend/WindowsLiveWriter/photo?authkey=JNAlwnfTQQA#5153909819672276466"&gt;&lt;img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" align="right" border="0" src="http://lh5.google.com/pitfiend/R4ZdrKX2rfI/AAAAAAAAAJc/HzYwp-86vzo/s144/sombra-final.jpg" /&gt;&lt;/a&gt;El resultado final, es el que se puede apreciar en la figura de la derecha. N&amp;#243;tese que tambi&amp;#233;n se sombreo parte de la pared iluminada y se cambio el borde superior de uni&amp;#243;n de los lados del techo, dando de esta manera una aire de realidad a la construcci&amp;#243;n. Estos detalles son los que pueden hacer que una imagen sea espectacular.&lt;/p&gt;&lt;div class="blogger-post-footer"&gt;&lt;hr/&gt;&lt;a href="http://pitfiend.blogspot.com"&gt;Meditaci&amp;oacute;n Dispersa&lt;/a&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/6857773259275968838-1373643211807725762?l=pitfiend.blogspot.com' alt='' /&gt;&lt;/div&gt;</description><link>http://pitfiend.blogspot.com/2008/01/pixel-art-casita-de-pixels-parte-2.html</link><author>noreply@blogger.com (Pitfiend)</author><thr:total xmlns:thr='http://purl.org/syndication/thread/1.0'>0</thr:total></item><item><guid isPermaLink='false'>tag:blogger.com,1999:blog-6857773259275968838.post-301418346568319879</guid><pubDate>Fri, 23 Nov 2007 17:28:00 +0000</pubDate><atom:updated>2008-02-24T20:35:01.115-05:00</atom:updated><category domain='http://www.blogger.com/atom/ns#'>Programas</category><category domain='http://www.blogger.com/atom/ns#'>Pixel Art</category><title>Otro programa para dibujar</title><description>&lt;p style="text-align: justify"&gt;Recientemente un colaborador me comento la existencia de un programa para dibujo que yo no hab&amp;#237;a tomado en cuenta. As&amp;#237; que dirig&amp;#237; mi navegador a &lt;a href="http://www.getpaint.net/"&gt;http://www.getpaint.net&lt;/a&gt; para ver de que se trataba.&lt;/p&gt;  &lt;p style="text-align: justify"&gt;Mi sorpresa fue may&amp;#250;scula al encontrar otro programa gratuito, de calidad profesional, con cientos de opciones impresionantes, orientado al retoque de im&amp;#225;genes. A&amp;#250;n lo estoy probando y no dejo de sorprenderme de lo f&amp;#225;cil que resulta hacer las cosas.&lt;/p&gt;  &lt;p style="text-align: justify"&gt;Si bien no tiene capacidad para trabajar sobre la inmensa cantidad de formatos gr&amp;#225;ficos que tiene The Gimp, lo hace muy bien sobre los mas usados en general TGA, JPEG, BMP, GIF, TIFF, PNG y DDS, este &amp;#250;ltimo es usado frecuentemente en juegos al estar optimizado para el API Direct X.&lt;/p&gt;  &lt;p style="text-align: justify"&gt;Lo &amp;#250;nico que hecho en falta es la posibilidad de trabajar sobre archivos PhotoShop, pero bueno hay que recordar que es gratis y que no necesariamente tiene que tener todas las opciones que uno podr&amp;#237;a desear. Entre las funciones destacables, tenemos soporte de capas, efectos diversos como Blur, Emboss, distorsiones, pintado al &amp;#243;leo, dibujo a l&amp;#225;piz o tinta, quitar ojos rojos. Tambi&amp;#233;n se puede ajustar la relaci&amp;#243;n entre brillo y contraste, saturaci&amp;#243;n, cambiar a sepia, hacer blanco y negro.&lt;/p&gt;  &lt;p style="text-align: justify"&gt;En s&amp;#237;ntesis es una poderosa herramienta que bien vale la pena tener en el arsenal. Es actualizada frecuentemente, solo esta disponible para Windows con .Net 2.0 o superior. &amp;#191;Comente que es gratis?&lt;/p&gt;  &lt;div class="blogger-post-footer"&gt;&lt;hr/&gt;&lt;a href="http://pitfiend.blogspot.com"&gt;Meditaci&amp;oacute;n Dispersa&lt;/a&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/6857773259275968838-301418346568319879?l=pitfiend.blogspot.com' alt='' /&gt;&lt;/div&gt;</description><link>http://pitfiend.blogspot.com/2007/11/otro-programa-para-dibujar.html</link><author>noreply@blogger.com (Pitfiend)</author><thr:total xmlns:thr='http://purl.org/syndication/thread/1.0'>0</thr:total></item><item><guid isPermaLink='false'>tag:blogger.com,1999:blog-6857773259275968838.post-8392799448902055210</guid><pubDate>Thu, 22 Nov 2007 23:01:00 +0000</pubDate><atom:updated>2008-12-13T01:37:08.891-05:00</atom:updated><category domain='http://www.blogger.com/atom/ns#'>Pixel Art</category><title>Pixel Art - Casita de pixels (parte 1)</title><description>&lt;p style="text-align: justify"&gt;Paso casi un mes desde mi &amp;#250;ltima publicaci&amp;#243;n. Resulta un poco complicado publicar cuando falta tiempo para organizar notas y redactar. Aun as&amp;#237; se hace lo posible por tener todo listo.&lt;/p&gt;  &lt;p style="text-align: justify"&gt;Vamos a hacer una casita, pero supongo que aprenderemos m&amp;#225;s que eso. As&amp;#237; que para comenzar iniciemos por ejecutar el programa de dibujo que mas no acomode.&lt;/p&gt;  &lt;p style="text-align: justify"&gt;Podemos usar MS Paint para trabajar mientras conseguimos algo mejor, o sea necesario usar capas o transparencias, para lo cual yo recomiendo usar The Gimp, que me parece un excelente programa para dibujar con muchas opciones muy convenientes para estos menesteres.&lt;/p&gt;  &lt;p style="text-align: justify"&gt;&lt;a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_ElOr_VrLa-I/R0X56d8FfAI/AAAAAAAAAAg/9gmZ76TmOkI/s1600-h/cubo.gif"&gt;&lt;img id="BLOGGER_PHOTO_ID_5135785732950293506" style="float: right; margin: 0px 0px 10px 10px; cursor: hand" height="135" src="http://2.bp.blogspot.com/_ElOr_VrLa-I/R0X56d8FfAI/AAAAAAAAAAg/9gmZ76TmOkI/s320/cubo.gif" width="138" border="0" name="BLOGGER_PHOTO_ID_5135785732950293506" /&gt;&lt;/a&gt;Basta de charla, pasemos a la acci&amp;#243;n. Dibujemos un cubo, ver&amp;#225;n que es sencillisimo si comienzan con las l&amp;#237;neas horizontales y luego dibujan las verticales. El resultado final deber&amp;#237;a ser similar al que se puede apreciar a la derecha. Hay que recordar que esto es la base de la casa, as&amp;#237; que deber&amp;#237;a conservas una forma mas o menos tradicional. Experimentar con formas mas alargadas o achatadas podr&amp;#237;a alterar el resultado final del dibujo que estamos haciendo. Recuerden siempre mantener medidas f&amp;#225;ciles de dividir en dos o en tres segmentos, eso facilita tremendamente dibujar los dem&amp;#225;s elementos, como el techo a dos aguas o colocar la puerta y las ventas que veremos en otra entrega.&lt;/p&gt;  &lt;p style="text-align: justify"&gt;&lt;a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_ElOr_VrLa-I/R0X82N8FfFI/AAAAAAAAABI/3iF2d__2nQ8/s1600-h/medidas.gif"&gt;&lt;img id="BLOGGER_PHOTO_ID_5135788958470732882" style="float: right; margin: 0px 0px 10px 10px; cursor: hand" height="234" src="http://1.bp.blogspot.com/_ElOr_VrLa-I/R0X82N8FfFI/AAAAAAAAABI/3iF2d__2nQ8/s320/medidas.gif" width="138" border="0" name="BLOGGER_PHOTO_ID_5135788958470732882" /&gt;&lt;/a&gt;Retomando, hace un momento mencion&amp;#233; el techo a dos aguas. Ciertamente si hemos tenido la precauci&amp;#243;n de tener l&amp;#237;neas de longitud par, dividir en dos no deber&amp;#237;a ser muy complicado. La figura de la derecha indica claramente que la medida &amp;quot;horizontal&amp;quot; de mi cubo base es de 26 pixels, por lo tanto los segmentos que forman mi techo deben tener una longitud de 13 pixels cada uno. Mis figuras de referencia est&amp;#225;n agrandadas por motivos de publicaci&amp;#243;n, son tres veces mas grandes de lo que realmente obtendr&amp;#225;n dibujando. N&amp;#243;tese tambi&amp;#233;n que la media se hace en forma isom&amp;#233;trica tomando un lado como referencia.&lt;/p&gt;  &lt;p style="text-align: justify"&gt;&lt;a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_ElOr_VrLa-I/R0X57N8FfBI/AAAAAAAAAAo/47DSIbxybtA/s1600-h/techo-guias.gif"&gt;&lt;img id="BLOGGER_PHOTO_ID_5135785745835195410" style="float: right; margin: 0px 0px 10px 10px; cursor: hand" height="135" src="http://1.bp.blogspot.com/_ElOr_VrLa-I/R0X57N8FfBI/AAAAAAAAAAo/47DSIbxybtA/s320/techo-guias.gif" width="138" border="0" name="BLOGGER_PHOTO_ID_5135785745835195410" /&gt;&lt;/a&gt;Luego de haber dividido el segmento en dos, procedemos a trazar una vertical temporalmente en otro color para que nos sirva de referencia al dibujar nuestra gu&amp;#237;a para el techo, tal y como se muestra en la figura a la derecha. V&amp;#233;ase tambi&amp;#233;n que en este caso particular, una l&amp;#237;nea realmente horizontal respecto al punto de vista del dibujante, es en realidad una l&amp;#237;nea oblicua en el dibujo.&lt;/p&gt;  &lt;p style="text-align: justify"&gt;&lt;a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_ElOr_VrLa-I/R0X58d8FfEI/AAAAAAAAABA/-0txagSVfNg/s1600-h/techo-elevado.gif"&gt;&lt;img id="BLOGGER_PHOTO_ID_5135785767310031938" style="float: right; margin: 0px 0px 10px 10px; cursor: hand" height="135" src="http://2.bp.blogspot.com/_ElOr_VrLa-I/R0X58d8FfEI/AAAAAAAAABA/-0txagSVfNg/s320/techo-elevado.gif" width="138" border="0" name="BLOGGER_PHOTO_ID_5135785767310031938" /&gt;&lt;/a&gt;Tras haber duplicado la gu&amp;#237;a en color alterno, la figura de la derecha es una muestra de la base que debemos tener para ponerle techo, de manera que nuestra creaci&amp;#243;n se asemeje m&amp;#225;s a una casa de verdad. Dos de las l&amp;#237;neas horizontales que formaban el cubo, se removieron para dar paso a las gu&amp;#237;as del techo.&lt;/p&gt;  &lt;p style="text-align: justify"&gt;&lt;a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_ElOr_VrLa-I/R0X57t8FfCI/AAAAAAAAAAw/OylYDI59KI0/s1600-h/techo-prolongado-guias.gif"&gt;&lt;img id="BLOGGER_PHOTO_ID_5135785754425130018" style="float: right; margin: 0px 0px 10px 10px; cursor: hand" height="141" src="http://3.bp.blogspot.com/_ElOr_VrLa-I/R0X57t8FfCI/AAAAAAAAAAw/OylYDI59KI0/s320/techo-prolongado-guias.gif" width="213" border="0" name="BLOGGER_PHOTO_ID_5135785754425130018" /&gt;&lt;/a&gt;Como podemos ver en la figura de la derecha, nuevamente se hace uso de colores adicionales para trabajar sobre l&amp;#237;neas especificas. La l&amp;#237;nea roja es el eje central del techo mientras que las l&amp;#237;neas azules forman los planos del techo en si mismos. V&amp;#233;ase tambi&amp;#233;n que estas l&amp;#237;neas son paralelas a las gu&amp;#237;as de la base que hicimos previamente.&lt;/p&gt;  &lt;p style="text-align: justify"&gt;&lt;a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_ElOr_VrLa-I/R0X58N8FfDI/AAAAAAAAAA4/hm78hpg9N5c/s1600-h/techo-area-guia.gif"&gt;&lt;img id="BLOGGER_PHOTO_ID_5135785763015064626" style="float: right; margin: 0px 0px 10px 10px; cursor: hand" height="141" src="http://1.bp.blogspot.com/_ElOr_VrLa-I/R0X58N8FfDI/AAAAAAAAAA4/hm78hpg9N5c/s320/techo-area-guia.gif" width="207" border="0" name="BLOGGER_PHOTO_ID_5135785763015064626" /&gt;&lt;/a&gt;Teniendo como referencia la l&amp;#237;nea roja (el eje del techo), se traza una l&amp;#237;nea verde paralela a cierta distancia del borde de la base. De modo que permita formar claramente el plano izquierdo del techo. As&amp;#237; mismo se usa otra l&amp;#237;nea proyectada desde el cruce de las l&amp;#237;neas azul y verde, para determinar donde es que debe ir la l&amp;#237;nea correspondiente en el lado derecho.&lt;/p&gt;  &lt;p style="text-align: justify"&gt;&lt;a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_ElOr_VrLa-I/R0X82d8FfGI/AAAAAAAAABQ/3hcnDHI6vhQ/s1600-h/techo-completo.gif"&gt;&lt;img id="BLOGGER_PHOTO_ID_5135788962765700194" style="float: right; margin: 0px 0px 10px 10px; cursor: hand" height="141" src="http://2.bp.blogspot.com/_ElOr_VrLa-I/R0X82d8FfGI/AAAAAAAAABQ/3hcnDHI6vhQ/s320/techo-completo.gif" width="177" border="0" name="BLOGGER_PHOTO_ID_5135788962765700194" /&gt;&lt;/a&gt;Finalmente en el cruce de esta ultima l&amp;#237;nea, se traza otra paralela al eje del techo para concluir con la delimitaci&amp;#243;n del plano derecho, el cual concluye el techo. Queda solo un paso pendiente para concluir el dibujo de nuestra primera casita isom&amp;#233;trica.&lt;/p&gt;  &lt;p style="text-align: justify"&gt;&lt;a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_ElOr_VrLa-I/R0YE598FfHI/AAAAAAAAABY/Y8mI4PrvaJw/s1600-h/casa-base.gif"&gt;&lt;img id="BLOGGER_PHOTO_ID_5135797818988264562" style="float: right; margin: 0px 0px 10px 10px; cursor: hand" height="141" src="http://1.bp.blogspot.com/_ElOr_VrLa-I/R0YE598FfHI/AAAAAAAAABY/Y8mI4PrvaJw/s320/casa-base.gif" width="177" border="0" name="BLOGGER_PHOTO_ID_5135797818988264562" /&gt;&lt;/a&gt;Por &amp;#250;ltimo se elimina todas las l&amp;#237;neas que deber&amp;#237;an estar invisibles, dejando l&amp;#243;gicamente las dem&amp;#225;s&lt;/p&gt;  &lt;div class="blogger-post-footer"&gt;&lt;hr/&gt;&lt;a href="http://pitfiend.blogspot.com"&gt;Meditaci&amp;oacute;n Dispersa&lt;/a&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/6857773259275968838-8392799448902055210?l=pitfiend.blogspot.com' alt='' /&gt;&lt;/div&gt;</description><link>http://pitfiend.blogspot.com/2007/11/picel-art-casita-del-pixels-parte-1.html</link><author>noreply@blogger.com (Pitfiend)</author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://2.bp.blogspot.com/_ElOr_VrLa-I/R0X56d8FfAI/AAAAAAAAAAg/9gmZ76TmOkI/s72-c/cubo.gif' height='72' width='72'/><thr:total xmlns:thr='http://purl.org/syndication/thread/1.0'>0</thr:total></item><item><guid isPermaLink='false'>tag:blogger.com,1999:blog-6857773259275968838.post-4337086519333230179</guid><pubDate>Tue, 23 Oct 2007 07:00:00 +0000</pubDate><atom:updated>2008-12-13T01:37:09.351-05:00</atom:updated><category domain='http://www.blogger.com/atom/ns#'>Pixel Art</category><title>Pixel Art - Conceptos básicos</title><description>&lt;p style="text-align: justify"&gt;Ahora empieza lo divertido, como eso de hablar mucho y no hacer nada es mas aburrido que dormir solo, empezaremos a ver los conceptos b&amp;#225;sicos sobre pixel art.&lt;/p&gt;  &lt;p style="text-align: justify"&gt;Para comenzar lo mas importante que hay que recordar siempre es que esta clase de arte usa un concepto denominado dibujo isom&amp;#233;trico, esto quiere decir que cada l&amp;#237;nea que se trace debe ser de igual medida, dicho de otro modo, mantener la proporci&amp;#243;n aun cuando la inclinaci&amp;#243;n cambie. V&amp;#233;ase el detalle de esta cuadr&amp;#237;cula isom&amp;#233;trica&lt;/p&gt;  &lt;p&gt;&lt;a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_ElOr_VrLa-I/Rx2ciWyUJsI/AAAAAAAAAAM/1KV-CwlhBAY/s1600-h/cuadros.gif"&gt;&lt;img id="BLOGGER_PHOTO_ID_5124424065063593666" style="display: block; margin: 0px auto 5px; cursor: hand; text-align: center" alt="" src="http://1.bp.blogspot.com/_ElOr_VrLa-I/Rx2ciWyUJsI/AAAAAAAAAAM/1KV-CwlhBAY/s320/cuadros.gif" border="0" /&gt;&lt;/a&gt;&lt;/p&gt;  &lt;p&gt;Con esto en mente, ahora toca decidir que programa usar para dibujar. Aunque parezca una decisi&amp;#243;n dif&amp;#237;cil de tomar, solo por nombrar algunos ac&amp;#225; hay una listita para que se hagan una idea:&lt;/p&gt;  &lt;ul&gt;   &lt;li&gt;MS Paint (si ya se Microsoft de vez en cuando tiene aciertos y este lo encuentran en todos los Windows)&lt;/li&gt;    &lt;li&gt;The Gimp (gratis, lo pueden descargar de ac&amp;#225; &lt;a href="http://www.gimp.org"&gt;http://www.gimp.org&lt;/a&gt;)&lt;/li&gt;    &lt;li&gt;Photoshop (comercial mas detalles en &lt;a href="http://www.adobe.com"&gt;http://www.adobe.com&lt;/a&gt;)&lt;/li&gt;    &lt;li&gt;Paint Shop Pro (comercial mas detalles en &lt;a href="http://www.corel.com"&gt;http://www.corel.com&lt;/a&gt;)&lt;/li&gt;    &lt;li&gt;Pixia (gratis, lo pueden descargar de ac&amp;#225; &lt;a href="http://park18.wakwak.com/~pixia"&gt;http://park18.wakwak.com/~pixia&lt;/a&gt;) &lt;/li&gt; &lt;/ul&gt;  &lt;p&gt;La lista podr&amp;#237;a seguir y seguir pero eso no tiene sentido, as&amp;#237; que ustedes escojan el que mas les acomode y a dibujar se ha dicho. Yo no soy del clan de los puristas, as&amp;#237; que no me importa mucho si usan o no las herramientas como l&amp;#237;neas, c&amp;#237;rculos, rect&amp;#225;ngulos o relleno, solo recuerden que siempre resulta mejor, mas digno, hacerlo todo a mano. Para que esto sea as&amp;#237; es necesario saber algo mas.&lt;/p&gt;  &lt;p style="text-align: justify"&gt;Como estamos embalados y ya queremos dibujar lo primero que haremos son l&amp;#237;neas, si como los nenes del kinder, una vez que les salgan parecidas a estas:&lt;/p&gt; &lt;a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_ElOr_VrLa-I/Rx2ciWyUJtI/AAAAAAAAAAU/tejAY3mix1s/s1600-h/lineas.gif"&gt;&lt;img id="BLOGGER_PHOTO_ID_5124424065063593682" style="display: block; margin: 0px auto 5px; cursor: hand; text-align: center" alt="" src="http://1.bp.blogspot.com/_ElOr_VrLa-I/Rx2ciWyUJtI/AAAAAAAAAAU/tejAY3mix1s/s320/lineas.gif" border="0" /&gt;&lt;/a&gt;  &lt;p style="text-align: justify"&gt;que dicho sea de paso son consideradas l&amp;#237;neas perfectas, ya estaremos en condiciones de hacer l&amp;#237;neas en casi cualquier sentido. N&amp;#243;tese que cada l&amp;#237;nea tiene un pixel de ancho. Pr&amp;#243;ximamente dibujaremos una casa con techo a dos aguas.&lt;/p&gt;  &lt;div class="blogger-post-footer"&gt;&lt;hr/&gt;&lt;a href="http://pitfiend.blogspot.com"&gt;Meditaci&amp;oacute;n Dispersa&lt;/a&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/6857773259275968838-4337086519333230179?l=pitfiend.blogspot.com' alt='' /&gt;&lt;/div&gt;</description><link>http://pitfiend.blogspot.com/2007/10/conceptos-bsicos.html</link><author>noreply@blogger.com (Pitfiend)</author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://1.bp.blogspot.com/_ElOr_VrLa-I/Rx2ciWyUJsI/AAAAAAAAAAM/1KV-CwlhBAY/s72-c/cuadros.gif' height='72' width='72'/><thr:total xmlns:thr='http://purl.org/syndication/thread/1.0'>1</thr:total></item><item><guid isPermaLink='false'>tag:blogger.com,1999:blog-6857773259275968838.post-5128727115734143115</guid><pubDate>Fri, 19 Oct 2007 19:09:00 +0000</pubDate><atom:updated>2008-02-24T20:26:44.367-05:00</atom:updated><category domain='http://www.blogger.com/atom/ns#'>Pixel Art</category><title>Pixel Art - Un poco de historia y definición</title><description>&lt;span class="mw-headline" style="font-size: 130%"&gt;&lt;strong&gt;Historia&lt;/strong&gt;&lt;/span&gt;   &lt;br /&gt;  &lt;p align="justify"&gt;El termino &lt;em&gt;pixel art&lt;/em&gt; fue publicado por primera ve por Adele Goldberg y Robert Flegal del Centro de Investigaciones de Xerox en Palo Alto, all&amp;#225; por 1982. El concepto, sin embargo ya tenia mas de 10 a&amp;#241;os, cuando en 1972 Richard Shoup, tambi&amp;#233;n de Xerox, presento su programa SuperPaint.&lt;/p&gt;  &lt;p align="justify"&gt;Algunas formas de arte tradicional, como el bordado punto-cruz, el mosaico y el trabajo con cuentas, tiene mucha similitud con el &lt;em&gt;pixel art&lt;/em&gt; por la forma como se construyen las im&amp;#225;genes mediante peque&amp;#241;as unidades de color an&amp;#225;logas a los pixels de la computaci&amp;#243;n moderna.&lt;/p&gt; &lt;span class="mw-headline" style="font-size: 130%"&gt;&lt;strong&gt;Definici&amp;#243;n&lt;/strong&gt;&lt;/span&gt;   &lt;br /&gt;  &lt;p align="justify"&gt;Pixel Art se distingue de otras forma de arte digital por la insistencia de la edici&amp;#243;n manual de la imagen (sin la aplicaci&amp;#243;n de filtros, anti-alias autom&amp;#225;tico o modos especiales de render), muchas veces usando herramientas de acercamiento (zoom digital). De esta manera, se dice com&amp;#250;nmente que &amp;quot;cada pixel es colocado con mucho cuidado&amp;quot; para lograr el resultado deseado.&lt;/p&gt;  &lt;p align="justify"&gt;Los puristas en la escena del pixel art sostienen que el &amp;quot;verdadero&amp;quot; arte consiste en usar herramientas de dibujo que solo pintan pixels individuales tal como &amp;quot;L&amp;#225;piz&amp;quot;, y que los artista deben evitar todas las dem&amp;#225;s herramientas como &amp;quot;L&amp;#237;nea&amp;quot;, &amp;quot;Circulo&amp;quot;, &amp;quot;Rect&amp;#225;ngulo&amp;quot; o &amp;quot;Curva Bezier&amp;quot;. Algunos permiten por ejemplo el uso de herramientas como &amp;quot;L&amp;#237;nea&amp;quot; o &amp;quot;Rellenar&amp;quot;, debido a que sus efectos son f&amp;#225;cilmente replicables, tal vez no tan r&amp;#225;pido, por t&amp;#233;cnicas de pintado individual de pixels.&lt;/p&gt;  &lt;p align="justify"&gt;Debido a esta regla, los filtros de imagen (tales como &amp;quot;blur&amp;quot; o &amp;quot;alpha-blend&amp;quot;) o herramientas con anti-alias autom&amp;#225;tico est&amp;#225;n consideradas como herramientas no validas, ya que estas calcula los valores de cada pixel en forma autom&amp;#225;tica, contrastando contra la colocaci&amp;#243;n manual y precisa de pixels asociada al &lt;em&gt;Pixel Art&lt;/em&gt;.&lt;/p&gt;  &lt;p align="justify"&gt;Anti-Alias es una t&amp;#233;cnica usada para perfilar o suavizar l&amp;#237;neas que de otra manera se ver&amp;#237;an escalonadas. Ejemplos de esto en futuras entregas, as&amp;#237; como tutoriales de como dibujar y ser artista del pixel. Este texto fue tomado de Wikipedia.&lt;/p&gt;  &lt;div class="blogger-post-footer"&gt;&lt;hr/&gt;&lt;a href="http://pitfiend.blogspot.com"&gt;Meditaci&amp;oacute;n Dispersa&lt;/a&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/6857773259275968838-5128727115734143115?l=pitfiend.blogspot.com' alt='' /&gt;&lt;/div&gt;</description><link>http://pitfiend.blogspot.com/2007/10/pixel-art-un-poco-de-historia-y.html</link><author>noreply@blogger.com (Pitfiend)</author><thr:total xmlns:thr='http://purl.org/syndication/thread/1.0'>1</thr:total></item><item><guid isPermaLink='false'>tag:blogger.com,1999:blog-6857773259275968838.post-1833936149600369824</guid><pubDate>Mon, 15 Oct 2007 05:39:00 +0000</pubDate><atom:updated>2008-02-24T20:43:35.449-05:00</atom:updated><category domain='http://www.blogger.com/atom/ns#'>General</category><title>El Inicio</title><description>&lt;p align="justify"&gt;...y as&amp;#237;, hoy, comienza todo. D&amp;#237;a a d&amp;#237;a pretendo escribir ac&amp;#225; todo cuanto pueda. Publicar&amp;#233; tambi&amp;#233;n art&amp;#237;culos sobre programaci&amp;#243;n.&lt;/p&gt;  &lt;div class="blogger-post-footer"&gt;&lt;hr/&gt;&lt;a href="http://pitfiend.blogspot.com"&gt;Meditaci&amp;oacute;n Dispersa&lt;/a&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/6857773259275968838-1833936149600369824?l=pitfiend.blogspot.com' alt='' /&gt;&lt;/div&gt;</description><link>http://pitfiend.blogspot.com/2007/10/el-inicio.html</link><author>noreply@blogger.com (Pitfiend)</author><thr:total xmlns:thr='http://purl.org/syndication/thread/1.0'>0</thr:total></item></channel></rss>