domingo, 3 de octubre de 2010

3- ¡Haciendo nuestro primer cubo ísometrico!

Hola de nuevo ¿Cómo estan?
Bueno.. Al tema. Está vez aprenderemos sobre que papel desempeña la ísometria en el pixel art, y haremos una practica jugando con un cubo y la isometria como mencione en la anterior entrada.

La ísometria según Wikipedia ...
Una isometría es una aplicación matemática entre dos espacios métricos que conserva las distancias entre los puntos

De lo anterior podemos deducir, si ya viste funciones en algebra, por lógica aplicaras tales conceptos y comparando lo anterior, más funciones y el pixel art, quiere decir que es el espacio que existe entre una linea de pixeles o puntos ¿Sigues sin entender? pues para eso estamos, para aprender, con la siguiente imagen podras entender a que me refiero ..


Como podemos observar, la linea que tiene un punto de color verde arriba es ísometrica, la que tiene un punto rojo no es ísometrica. En la ísometrica podemos observar un patrón de uniformidad entre los pixeles. (A eso hace referencia la ísometria en el pixel art), en la roja podemos ver una linea con una cantidad de pixeles inestables, y repito, por lo tanto no es ísometrica. Pues bien.. Sí aún has llegado hasta aqui, ¡Te felicito! ahora sigue la acción, así que ¡Abre el paint y manos a la obra! (Sí, el paint de windows)
 
Debes saber que lo primero que se hace cuando se trabaja en pixel art, es acercar el zoom, para eso seleccionas la herramienta 'Lupa' y das click dentro de cualquier espacio en blanco, así veras todo más grande.En la imagen anterior, creamos una linea ísometrica (como la mostrada anteriormente) lo que haremos
es seleccionarla toda (que por cierto, la herramienta seleccionar está arriba de todas al lado de una estrella, tal herramienta es para seleccionar en cuadrados como lo indica su forma, la estrella es para seleccionar segun el trazo que quieras darle a mano) bueno, como deciamos, seleccionamos y luego presionamos el click derecho y pinchamos en la opción 'Copiar', despues de haber echo esto, nos saldra una copia exacta de la linea. (vease la siguiente imagen)



¿Te ha salido todo bien hasta ahora? entonces es una buena señal. Bueno, volviendo al tema, ahora en la imagen anterior podemos observar la copia de la linea que habiamos echo (el del paso anterior), ahora lo que haremos sera seleccionar solo la linea que copiamos, y presionamos click derecho, nos abrira un menú (como en la imagen) cuando salga pinchamos sobre la opción 'Voltear o girar' (como en la imagen) y posteriormente nos saldra un cuadro con varias opciones, nosotros le daremos a la opción 'Voltear horizontalmente' y ¡Wala!, la copia nos quedara exactamente opuesta que la linea original ¿Te salio así? ¡Perfecto! ahora lo que haremos sera acomodar la copia en similitúd con la primera, ¿Como así? en la siguiente imagen aparece como debera quedar, no te preocupes tan rapido.

¿Bonito, no? bueno, despues de que nuestras lineas quedasen como en la imagen anterior, la seleccionaremos de nuevo e iremos a la opción 'Copiar' y la pegamos abajo de la original, luego nos quedaran dos, en la copia que acabamos de hacer de nuevo hacemos click derecho y nos saldra el menú ese, pincharemos de nuevo en la opción 'Voltear o girar' y está vez le daremos click en la opción 'Voltear verticalmente' y nos quedara una linea mirando a la otra ¿Te salio así? pues entonces tienes futuro en esto. Ahora debes juntar las dos copias que tiene de forma que hagan una especie de baldosa. Una vez que quede una baldosa, la copiaras y la pegaras debajo de la original y.. ¿De qué forma? como en la siguiente imagen..



Así se supone que deberia de quedarte (obvio sin las lineas de color rosa, es solo para que te guies en algo que explicaré a continuación) entonces.. ya va teniendo forma de cubo¿No? , ahora lo que haremos sera trazar unas lineas encima de las flechas rosas, pero ya que tú, querido aprendiz no las hiciste (porque no tienes necesidad, ya eres un crack en esto!) lo que haras sera imaginarlas y encima trazaras lineas rectas, que unan la baldosa de la parte superior con la inferior. ¿Y como debera quedarte? pues como en la siguiente imagen..

 


Si hasta ahora, todos los puntos te han salido bien, dejame decirte sinceramente que.. ¡Tienes futuro en esto! bien, ahora lo que haremos sera.. ¿Ves lo que señala la flecha rosa? sí..sí, la grandota esa, bueno, está flecha
señala dos pixeles negros, lo que debes hacer es eliminar esos dos pixeles, una vez estos pixeles esten borrados, procedes a eliminar todo lo que sea de color rosa en la imagen. Y luego seleccionaras la herramienta 'Lupa' y le daras click de nuevo a la imagen, está vez te alejara el zoom y debera haberte quedado algo así ..


 


Ahora lo que haras sera ir a la parte inferior izquierda de el paint, presionaras en 'Archivo' y luego en 'Guardar como' lo guardaras en formato (.PNG) ojo, solamente lo guardaras en formato .png para conservar la calidad de los pixeles. Si llegaste al final exitosamente, te presento mis más sinceros respetos. Con más dedicación y aprendizaje (que ese te lo brindo yo por medio de el blog) algún dia podrias enseñarle a los demás tambien, para que aprendan.y sí por si acaso, no has entendido muy bien este tutorial, aqui elabore un video, para que veas como se supone, deberia ser el resultado de cada paso y cual seria el resultado final, pero claro, textualmente aprenderas más. Sin más preambulos, para ver el video pulsa ahi -> Video


Dicho lo anterior queda decir que espero hallas aprendido está vez y estes satisfecho con este último tutorial y recuerda haber guardado el cubo porque en el siguiente tutorial usaremos de nuevo el cubo, pero está vez aprenderas a aplicar sombras e iluminación en su forma más basica y te asombraras de lo lindo que quedara. No olvides enviarme tu sugerencias o dudas a Contactohaidako@gmail.com o bien, puedes seguirme tambien en twitter.

Follow haidako on Twitter
Saludos,
Haidako

1 comentario: