Autor Tema: Pixel Art - Isometrico  (Leído 9017 veces)

Desconectado NDSi

  • PHPero Avanzado
  • ****
  • Mensajes: 410
  • Karma: 8
  • Sexo: Masculino
    • Ver Perfil
Pixel Art - Isometrico
« en: 25 de Octubre de 2009, 04:26:23 am »
PIXEL ART ISOMETRICO

Hola a todos, esto es algo que aprendí últimamente sobre el pixel art, sobre isometrica para ser mas específicos. Las imagenes son de otra pagina web (la dare al final) pero el tutorial esta redactado por mi. No se mucho asique espero que entiendan que intento aportar siquiera algo al foro.


El estilo isométrico es dibujado casi en una proyección dimétrica isométrica. Esto se vé mucho en juegos para producir la sensación de un entorno tridimensional sin usar un ordenador con verdadero potencial para producir gráficos en 3D. Técnicamente, un ángulo isométrico debería ser de 30 grados desde la horizontal, pero esto no produce un buen resultado en pixel art ya que los píxeles en estas líneas no siguen una sucesión regular. Para solucionar esto, se toman pendientes de una razón de 1:2 píxeles, llevando a un ángulo de aproximadamente 26.565 grados. (Definicion de Taringa).

ISO- CUADRO

  • Lo primero que debes saber para iniciarte en esto es hacer un iso-cuadro (asi llamo yo a lo que seria una baldosa del suelo de habbo). Para hacer un iso-cuadro debes hacer una linea vertical siempre con la formula "2PX > 1PX HACIA ARRIBA O ABAJO > 2PX" y asi sucesivamente.
    Te deberia quedar una linea masomenos asi.


  • Ahora solo debes copiar esa linea, pegarla de nuevo y girarla en horizontalmente y colocarla al lado de esta. Luego la copias dos veces mas y la giras verticalmente y la pegas, copias la ultima pegada y la giras horizontalmente y la acomodas. Por si no me explique deberia quedarte algo asi.


  • ¡Ya esta tu iso-cuadro, ahora solo usa la creatividad y podras hacer grandes cosas!


ISO-CUBO

  • Ahora de una manera muy sencilla aprenderemos a hacer un cubo estilo isometrico. Crea un iso-cuadro, copialo y pegalo justo debajo del primero, luego, une los tres vértices inferiores del iso-cuadro con una linea recta, une los tres vértices inferiores del iso-cuadro de arriba con los otros tres inferiores del de abajo. Borra las lineas que sobren y te quedara algo asi.


  • Agregale los colores y sombras para que quede mas 'real' y listo, ¡ya sabes hacer un iso-cubo!


ISO-PIRAMIDE

  • Ahora aprenderas a crear una piramide isometrica, es mucho mas facil de lo que crees, una ves que enganchas la tecnica es pan comido. Crea un iso-cuadro y borrale la parte superior. Justo en el medio de las dos partes inferiores de lo que quedo del iso-cuadro haz una linea recta hacia arriba. Haz otras dos diagonales en direccion al punto mas alto de la linea recta (o el punto que alcance la diagonal) RECUERDA HACER LAS DIAGONALES CON LA FORMULA "2PX > 1PX A LA DERECHA O LA IZQUIERDA > 2PX".



ISO- CILINDRO

  • Este es el paso final. Para crear un cilindro primer crea un iso-cuadro. Dentro de el crea un circulo de color rojo para distinguirlo. Copia el iso-cuadro (con el circulo rojo tambien) y pegalo arriba de el iso-cuadro original (esto sera la parte de arriba del cilindro)


  • Una ves echo eso, solo se debe hacer una linea recta de cada costado de los círculos rojos, eliminar las lineas que sobran y listo.


  • Tambien si quieres puedes no usar el iso-cuadro y hacer directamente el circulo.

Fuente : BioRUST

Algo para que se inspiren...

Eso fue todo, espero que les guste ya que ami me gusto redactarlo, un saludo, si algo no se entiende, algun error o algo con respecto al tema, respondan.

Saludos PHPeros.

Comunidad PHPeros

Pixel Art - Isometrico
« en: 25 de Octubre de 2009, 04:26:23 am »

Desconectado Siquillote

  • PHPero Master
  • ******
  • Mensajes: 4.229
  • Karma: 179
  • Sexo: Masculino
    • Ver Perfil
Re:Pixel Art - Isometrico
« Respuesta #1 en: 25 de Octubre de 2009, 09:47:13 am »
Oye muy buen tutorial :D Yo no soi fanatico de esto del Pixel Art pero para aprender mas sobre diseño grafico ¿Pues que tiene de malo empezar de 0?

Gracias NDSi por el tuto , me voi a poner a practicar. Gracias por todo :D

#Fdo. Physlet

Desconectado Masato

  • PHPero Avanzado
  • ****
  • Mensajes: 480
  • Karma: 12
  • Sexo: Masculino
  • <?php echo "Solo quiero aprender php"; ?>
    • Ver Perfil
    • Masato Design!
Re:Pixel Art - Isometrico
« Respuesta #2 en: 25 de Octubre de 2009, 22:18:21 pm »
Muy bueno, aunque yo los circulos isometricos los hacía de otra forma, ahora no me acuerdo bien del todo, pero era dentro de un cuadrado y de hay teníamos que ir marcando semi circulos con el compas (yo tuve una materia llamada DIBUJO TÉCNICO donde se aprende a dibujar en Isometrico y en Vista Caballera)

Desconectado Hugox

  • PHPer@ Fijo
  • ***
  • Mensajes: 104
  • Karma: 5
  • Sexo: Masculino
  • Vamos a Aprender
    • Ver Perfil
    • UrbaMix
Re:Pixel Art - Isometrico
« Respuesta #3 en: 28 de Octubre de 2009, 17:06:24 pm »
esta bueno el tuto pa el cilindro :P

Desconectado Siquillote

  • PHPero Master
  • ******
  • Mensajes: 4.229
  • Karma: 179
  • Sexo: Masculino
    • Ver Perfil
Re:Pixel Art - Isometrico
« Respuesta #4 en: 01 de Noviembre de 2009, 16:29:19 pm »
Ahora estoi trabajando en esto muy pronto os enseñaré como lo hizé :D

#Fdo. Physlet