http://www.galeriatripiyon.

com Tutoriales Tripiyon

Guía Píxel-Art – Isometría

1
GUÍA DE PIXEL ART
Isometría.

ESTA GUÍA ES UNA TRADUCCIÓN DEL TUTORIAL DE ZOGGLES:

CRÉDITOS:
Version 2.0 (Last Update: Nov 19, 2002)

Copyright © 2002 Zoggles pixels@zoggles.co.uk

Web de enlace: Pixel-zone

–1–

© Tripiyon
http://www.galeriatripiyon.com Tutoriales Tripiyon

Guía Píxel-Art – Isometría

1. INTRODUCCIÓN
En este tutorial vamos a ver como es una Vista Isométrica y como se pueden crear los gráficos en esta
visión.

2. ISOMÉTRICAS EN LAS MATEMÁTICAS.

La Vista Isométrica está basada en la vista de una rejilla girada en una elevación. Esto da la rejilla
formando un diamante como se muestra más abajo, proporciona cierta representación tridimensional de la
perspectiva de un objeto u objetos y en particular es favorece la fabricación de modelos.

Tradicionalmente, la Vista Isométrica está basada sobre un ángulo de 30°, sin embargo, en una pantalla
de ordenador este ángulo dará una línea diagonal irregular y sucia como puede ser visto en el diagrama
abajo. Por esta razón se usa un ángulo aproximado de 26,565º, que crea una línea regular y limpia.

–2–

© Tripiyon
http://www.galeriatripiyon.com Tutoriales Tripiyon

Guía Píxel-Art – Isometría

Por supuesto esta figura mágica de 26.565° es inútil cuando se está haciendo Píxel Art sin isometría. Sin
embargo, es bastante importante si se está desarrollando cualquier Isometría, ya que nos marcara las
líneas de fuga de las perspectiva de los objetos que dibujemos. Todo lo que se necesita saber para crear
esta línea es que está compuesta por líneas horizontales de dos píxeles puestas en diagonal entre ellas, tal
como se ve en el dibujo superior.

3. DOS TIPOS DE CONSTRUCCIÓN

Hay dos métodos principales para dibujar gráficos isométricos según lo ilustrado abajo. Tipo A (cubos
rojos), una línea de tres pixeles en las esquinas superiores e inferiores, y el Tipo B (cubos verdes) una
línea de dos píxeles.

–3–

© Tripiyon
http://www.galeriatripiyon.com Tutoriales Tripiyon

Guía Píxel-Art – Isometría

Si se está planeando dibujar un solo objeto, cualquier método puede estar bien, aunque aconsejaría el
Tipo A ya que se obtienen unas esquinas más limpias y mejor iluminadas. Sin embargo, si se planea
dibujar un embaldosado o elementos apilados como en el dibujo de abajo, definitivamente hay que usar el
Tipo B, ya que con el Tipo A se nos generarían líneas irregulares como las que se ven en el dibujo,
debido a que se han usado en la esquinas de los elementos líneas de tres píxeles.

Las tres flechas indican las pequeñas interferencias que aparecen al usar el Tipo A. Con el Tipo B sin
embargo, no existe este problema y se consigue un borde limpio y agradable, obteniendo las líneas rectas.
Asimismo, una rejilla consistirá en líneas limpias.

–4–

© Tripiyon
http://www.galeriatripiyon.com Tutoriales Tripiyon

Guía Píxel-Art – Isometría

Desde luego hay varias opciones para sombrear, destacar y contornear. En la imagen de abajo se muestran
algunas combinaciones básicas. La decisión de cual utilizar depende del estilo de gráficos que se está
intentando crear.

4. CONSTRUIR UNA REJILLA

Como antes se ha explicado, el Tipo B es el mejor método para construir una rejilla gráfica o
embaldosada isométrico. Aunque se pueden dibujar bien las diagonales negras cuando atraviesan ángulos
rectos, se hace menos evidente cuando se dibujan azulejos de diferentes colores.

–5–

© Tripiyon
http://www.galeriatripiyon.com Tutoriales Tripiyon

Guía Píxel-Art – Isometría

Para conseguir un embaldosado correctamente, las líneas negras sólo serían usadas como base sobre dos
lados de cada cuadrado, tal como se ve en la imagen superior. En las imágenes de abajo se puede ver el
embaldosado con las piezas por separado para su mejor comprensión, también se puede ver como
quedarían una vez están juntas las baldosas, es importante tener en cuenta que las esquinas derecha e
izquierda tienen dos píxeles en altura.

–6–

© Tripiyon
http://www.galeriatripiyon.com Tutoriales Tripiyon

Guía Píxel-Art – Isometría

En la siguiente imagen ampliada se pueden ver los puntos de contacto entre todas las esquinas y se puede
apreciar lo que se comenta más arriba sobre las esquinas derechas e izquierdas.

Debajo se pueden ver dos imágenes que pueden ser útiles para futuros trabajos. El de la derecha es una
rejilla básica isométrica, a la izquierda tenemos en la parte de abajo el patrón con el que podríamos
construir una rejilla isométrica básica y encima se puede ver una ampliación del patrón para apreciar
mejor los píxeles que lo componen

5. CONSTRUCCIÓN DE FORMAS BÁSICAS

A continuación unos ejemplos de construcción de bloques y formas:

–7–

© Tripiyon
http://www.galeriatripiyon.com Tutoriales Tripiyon

Guía Píxel-Art – Isometría

–8–

© Tripiyon
http://www.galeriatripiyon.com Tutoriales Tripiyon

Guía Píxel-Art – Isometría

Los círculos son la parte más difícil de las imágenes isométricas. Mientras que un círculo horizontal o
círculo plano es un isométrico relativamente simple, esas ruedas y círculos verticales son mucho más
difíciles.

–9–

© Tripiyon
http://www.galeriatripiyon.com Tutoriales Tripiyon

Guía Píxel-Art – Isometría

– 10 –

© Tripiyon
http://www.galeriatripiyon.com Tutoriales Tripiyon

Guía Píxel-Art – Isometría

El círculo superior es fácil de dibujar, sin embargo los laterales son más complicados y se pueden hacer
tal como se ven en las imágenes superiores, una vez se tiene el círculo por medio de Transformación
Libre, sesgamos hasta que encaje en el lateral del cubo.

Truco
Otra buena forma de hacerlo es creando una selección con la Herramienta Marco Elíptico,
para lo que creamos un círculo perfecto con la casilla Suavizar de la barra de opciones de la
Herramienta desactivada. Después por medio de Selección>Transformar selección,
modificamos el círculo como nosotros queramos y por último con la Herramienta Lápiz dibujamos los
píxeles de todo el borde, tal como podemos ver en la imagen inferior.

– 11 –

© Tripiyon
http://www.galeriatripiyon.com Tutoriales Tripiyon

Guía Píxel-Art – Isometría

6. CAMBIAR UNA IMAGEN 2D A ISOMÉTRICO

Es importante comprender que no se debe sesgar una imagen de 2D para hacerla isométrica. Ya
que una imagen de 2D no muestra ninguna profundidad, si quisiéramos hacerla isométrica para darle esa
profundidad, no bastaría con sesgarla ya que los resultados obtenidos no serían óptimos, debido a que al
sesgar se suavizarían los píxeles de la imagen.

Nota
Hay excepciones donde se hace casi necesario sesgar, como el caso explicado en el capítulo
anterior para hacer círculos.

Si miramos la imagen superior, podemos ver dos miniaturas en 2D iguales y ambas podrían ser la vista
2D de las vistas isométricas que se muestran.
Es necesario hacer notar que si sesgamos cualquiera de esas miniaturas con un ángulo de 26.565° no
obtendríamos una vista isométrica auténtica ya que se estiraría más de lo deseado.

– 12 –

© Tripiyon
http://www.galeriatripiyon.com Tutoriales Tripiyon

Guía Píxel-Art – Isometría

La imagen anterior demuestra que sesgar una imagen hará que el objeto aparezca aplastado.
Si miramos el dibujo central podemos comprobar que x1 > x2 y a misma altura nos queda el dibujo
aplastado al haberse estirado. El ejemplo a la derecha demuestra la versión matemáticamente correcta. En
efecto, la primera imagen se ha aplastado horizontalmente. No obstante nos puede resultar útil crearnos
unas guías tal como se ve en el dibujo de la derecha y reconstruir el dibujo en base a esas guías. El sesgar
también tenderá a crear un suavizado de píxeles indeseado, como ya se ha dicho.
Si aún así se quisiera usar el método de sesgar, habría que calcular el porcentaje de aplastamiento
horizontal que sufriría la vista 2D al sesgarla. Para ello hay que calcular ‘x’.

Una vez calculado ‘x’, habría que dividir este valor para ‘x’ por la anchura original ‘2’ y se multiplica por
‘100’.
1.7889 ÷ 2 x 100 = 89.443 %

7. ESCULPIENDO
Un método que a veces puede resultar ser más fácil, es usar formas más grandes y ESCULPIR hacia
fuera las áreas no deseadas. Ejemplo: La mesa de abajo.

Primero delimitamos las patas de la mesa..

– 13 –

© Tripiyon
http://www.galeriatripiyon.com Tutoriales Tripiyon

Guía Píxel-Art – Isometría

Ya que estamos trabajando con capas y la mesa la estamos dibujando en otra capa, simplemente borramos
las áreas no deseadas

Sin embargo, el resultado hasta ahora es bastante plano. Las patas no tienen ninguna profundidad y
parecen de papel. Tenemos que añadir las caras ocultas de las patas.

Finalmente, la línea roja que hemos venido usando es sustituida por un línea negra que está en armonía
con la iluminación de la mesa.

8. COLOREADO Y SOMBREADO
Hasta ahora, se ha demostrado solamente la matemáticas y la construcción básica sin hacer referencia al
coloreado ni al sombreado que se ha usado. Sin embargo todos los ejemplos anteriores habrán dado una
buena indicación de cómo se sombrean los objetos. Particularmente el ejemplo de la tabla arriba.
Para el estilo isométrico de “comic” es típico un contorno oscuro o negro alrededor del borde del
objeto. (no en las esquinas internas).
Para el coloreado de un objeto sólido, hay cuatro sombras principales (y se requiere un color para el
contorno). La sombra más clara se utiliza como toque de luz en el borde superior. La segunda más clara
se utiliza en la superficie superior donde incide más luz. Las otras dos se utilizan en los diversos lados de
los revestimientos para ir dando sombras. En la mesa de arriba, se ha usado la segunda sombra (superficie
superior) para que destaque más el borde de la mesa (primera sombra o más clara). La primera habría
parecido demasiado brillante para una cara “sombreada”.
Como breve ejemplo, se ha creado el contorno de una estructura.

– 14 –

© Tripiyon
http://www.galeriatripiyon.com Tutoriales Tripiyon

Guía Píxel-Art – Isometría

Podemos ver ahora la estructura anterior donde se han rellenado todas sus caras con las distintas sombras.

Después, se han quitado las líneas negras internas y se han substituido por toques de luz (un color o
sombra más claro) y de vez en cuando una sombra más oscura. Nótese que se ha puesto solamente la línea
de luz en las esquinas convexas (A). Para las esquinas cóncavas (B) se ha usado una sombra más oscura
de las sombras que quedan a ambos lados.

– 15 –

© Tripiyon
http://www.galeriatripiyon.com Tutoriales Tripiyon

Guía Píxel-Art – Isometría

Se agregan ahora algunas ventanas.

Para dar más profundidad a las ventanas se añaden unos bordes más oscuros y más claros según se ve en
la imagen inferior.

Por último se ha agregado hierba y una sombra del edificio sobre la hierba.

Aquí está el resultado final a tamaño real:

– 16 –

© Tripiyon
http://www.galeriatripiyon.com Tutoriales Tripiyon

Guía Píxel-Art – Isometría

9. CONSTRUCCIÓN DE UNA CASA

En este ejemplo se puede ver la construcción de una casa tipo Comic con vista isométrica.

– 17 –

© Tripiyon
http://www.galeriatripiyon.com Tutoriales Tripiyon

Guía Píxel-Art – Isometría

– 18 –

© Tripiyon
http://www.galeriatripiyon.com Tutoriales Tripiyon

Guía Píxel-Art – Isometría

– 19 –

© Tripiyon
http://www.galeriatripiyon.com Tutoriales Tripiyon

Guía Píxel-Art – Isometría

– 20 –

© Tripiyon
http://www.galeriatripiyon.com Tutoriales Tripiyon

Guía Píxel-Art – Isometría

RESULTADO FINAL

– 21 –

© Tripiyon
http://www.galeriatripiyon.com Tutoriales Tripiyon

Guía Píxel-Art – Isometría

10. CONSTRUCCIÓN DE UNA CABAÑA

Este ejemplo está lejos de la visión tipo “Comic” y muestra los pasos para crear una cabaña en un
proyecto donde no usé este estilo.
Para el terreno se ha usado como base un azulejo regular isométrico, se ha dibujado el Line-Art del
modelo y se le ha añadido un color base.

Nota

Line-Art se le llama al contorno básico sobre el que se va a trabajar el modelo.

Se sustituye todo el Line-Art por un tono más claro para dar un toque de luz o un tono más obscuro para
dar un toque de sombra, respecto a los colores del modelo.

– 22 –

© Tripiyon
http://www.galeriatripiyon.com Tutoriales Tripiyon

Guía Píxel-Art – Isometría

Se añaden algunos rasgos básicos a la cabaña y se crea la forma del pórtico.

Usando la Herramienta Pincel, se añaden algunas pinceladas más obscuras al tejado para conseguir darle
un aspecto 'cubierto con paja'.

Después se agregan unas pinceladas más claras al tejado para dar más profundidad, y se le hace una
pequeña variación a los colores de las paredes para darle un aspecto más viejo.

– 23 –

© Tripiyon
http://www.galeriatripiyon.com Tutoriales Tripiyon

Guía Píxel-Art – Isometría

Se agrega una sombra negra de la cabaña en una capa aparte entre la capa del terreno y la de la cabaña.

Reducimos la opacidad de esta capa al 30%.

Agregamos unos pequeños trazos sobre el terreno para crear una textura de hierba.

– 24 –

© Tripiyon
http://www.galeriatripiyon.com Tutoriales Tripiyon

Guía Píxel-Art – Isometría

Por último se añaden algunas flores y la senda que lleva a la cabaña.

Con esto último llegamos a el resultado final.

11. OTROS EJEMPLOS

– 25 –

© Tripiyon
http://www.galeriatripiyon.com Tutoriales Tripiyon

Guía Píxel-Art – Isometría

– 26 –

© Tripiyon
http://www.galeriatripiyon.com Tutoriales Tripiyon

Guía Píxel-Art – Isometría

– 27 –

© Tripiyon