Vístete para Halloween con Arte Isométrico en Adobe Photoshop
Spanish (Español) translation by Cristian Marroquin (you can also view the original English article)



Has hecho un personaje de arte de pixel, se mira muy normal, y está vistiendo ropa regular. Pero Halloween se está acercando y debemos obtener una acción de truco o travesura.
Vamos a tomar nuestro personaje y el niño pequeño, y vestirlos como Batman y Chucky. Haremos una linterna de calabaza para ambientar.
Por favor ve a tutorial para crear personaje de arte isométrico si aun no tienes un personaje.
1. Niño
En el tutorial anterior hicimos nuestro personaje lo más pequeño posible, pero aún hay posibilidades de hacer más pequeño y hacerlo una versión infantil.
Paso 1
Recuerda mantener una copia original de tus personajes, para guardarlos en su uso futuro.
Ahora, con una copia del personaje original, podemos mover/superponer algunas secciones para hacerlo más pequeño, o podemos borrar algunas secciones de píxeles y luego traer las piezas devuelta, lo cual parecería como esto:



Paso 2
Ahora solo faltan algunos retoques para acortar el cuello, el brazo, y las piernas.



Le hemos dado un hijo a nuestro personaje, ¡y sin mucho trabajo!



2. Disfraz del Niño
Vamos a convertir a nuestro niño pequeño en un espantoso Chucky. Puedes ver algunas imágenes de referencia.
Paso 1
Aquí he cambiado los colores del pantalón un poco y los he convertido en un Overol. Las tiras y las líneas de arriba del overol son sombras más oscuras de azul. Y he añadido un pixel rojo en el pecho para el logo de "Good Guys". Es un detalle pequeño y no debe ser en alto contraste.



Paso 2
La camisa debe ser diferente. Así que crearemos una camisa manga larga con un tono de rojo más saturado y tiras oscuras alternantes.



Todas las tiras serán de colores diferentes, pero será mejor estéticamente si dos colores diferentes con el mismo nivel de brillo no están en contacto. Así que vamos aprobar mantener los colores más oscuros alternándose con los más claros.
Paso 3
Cambiaremos los colores de las tiras, pero los puños (de la camisa) y el cuello deben permanecer rojo como en el original.



Paso 4
Los pantalones deben tener también tener rayas, pero debido a la poca cantidad de píxeles que tenemos, vamos a usar el mismo rojo de la camisa con uno o dos píxeles más.



Paso 5
El cuerpo está hecho, así que vamos a cambiar el color del cabello a un rojo y darle al niño un cabello hacia atrás, para obtener una apariencia más cercana a Chucky.



Paso 6
Ahora vamos a tratar de obtener la apariencia más horripilante que Chucky tuvo en las películas, así que vamos añadir algunos pelos parados atrás de la cabeza y editar la iluminación del cabello.



Paso 7
Y, por supuesto, las cicatrices faciales, que podrían tener el mismo color como lo tiene en el cuello, pero podría también tener un tono más rojizo.



Paso 8
Un detalle final sería un cuchillo; al parecer Chucky tiene una afinidad con ellos. Podemos decir que lo está sosteniendo con la mano que no se ve, y solo añadiremos una cuchilla pequeña en al lado:



3. El Caballero de la Noche
Vamos a convertir nuestro personaje adulto en un héroe. De nuevo, puedes ver imágenes de referencia. He escogido hacer el traje de la película El Caballero de la Noche porque es una gran película.
Es una armadura un poco compleja; no seremos capaces de obtener todo en detalle (desafortunadamente el símbolo de murciélago en el pecho no es realmente posible de hacer a esta resolución) pero obtendremos un montón de detalles sutiles.
Paso 1
Vamos a comenzar haciendo la ropa de nuestro personaje toda negra. Usaremos cuatro sombras de gris para esto; estoy usando 50%, 20%, y 5%, la cual es la sombra que estoy usando en el esquema.



Paso 2
Para el traje del cuello mantendremos el cuello de la camisa original con la sombra más oscura, pero justo derriba vamos añadir algunos píxeles de la segunda sombra, y derriba de esa, otra línea de píxeles más oscuros. Así que mantendremos la línea del cuello y la línea de la mandíbula, y las líneas de píxeles más claras representan los platos del traje que cubren el cuello.



Paso 3
Ahora pinta toda la cabeza (a excepción de la boca, por supuesto) con la segunda sombra más oscura de gris. El agujero para la boca podría tener algunas formas diferentes. Esta es la forma que pensé que se miraría mejor, pero puedes probar diferentes alternativas.



Paso 4
La nariz serán dos píxeles verticales de gris más claro y los ojos estarán dos píxeles horizontales del gris más oscuro. En relación con nuestro personaje estas características tendrán píxeles desplazados, pero es para obtener un mejor resultado porque el gris oscuro que separa la nariz del agujero de la boca incrementa el contraste de estas características.



Paso 5
Ahora con el gris más claro haremos la iluminación que se extienda desde la parte superior de la cabeza a los pómulos, pero sin que se toquen con la nariz o el agujero de la boca.



Paso 6
Vamos añadir iluminación adicional, ahora con el gris más claro en el frente para más volumen y detalle; veremos cómo estas iluminaciones nuevas ayudan a transmitir el ceño fruncido amenazador que Batman siempre tiene.



Paso 7
Ahora para las orejas. Aquí en rojo hay nuevos píxeles que se ocuparán:



Y en la derecha la terminación que debería tener.
Ahora la capucha está completa. ¡A la armadura! Podemos dejar las sombras más claras de gris y usar las tres sombras más oscuras para el resto.
Paso 8
Vamos hacer todo el brazo gris (la sombra segunda sombra más oscura) y hacer la parte interna del brazo extendiéndose hacia el cuello (debe alinearse) para añadir un quiebre en el traje, representando el lugar donde esté la armadura.



Paso 9
Deja que los hombros estén iluminados en lugar (debe ser 35% de sombra) pero borra cualquier sobrante que ilumine debajo del cuello y añada algo de iluminación para los bíceps (dos píxeles los harán) y para el puño (un pixel).



Paso 10
Finalmente, para el brazo vamos añadir algunas sombras más oscuras; un par de píxeles (la sombra más oscura) debajo del hombro para lucir las placas de la armadura, y un pixel un poco hacia abajo del bíceps resaltado para hacer que l bíceps sobresalga un poco más. También añadiremos uno más justo derriba de la iluminación del puño para darle un toque de volumen al antebrazo.
Y, por supuesto, no olvides la marca famosa de Batman, las aletas.



Paso 11
Ahora para el pecho, vamos añadir una iluminación pequeña para el área del pectoral. Aquí es donde el símbolo de Batman va, pero tratar de añadirlo hará peor las cosas, así que es mejor dejarlo fuera. Nuestro Batman será aun reconocible.



Paso 12
Justo debajo de la línea de los pantalones vamos añadir el cinturón de Batman, que lo haremos de un color bronce, sin que destaque mucho. Vamos a rellenar el área entre el cinturón y el pectoral, con la sombra más oscura y un poco de insinuación a los abdominales que cada traje de este personaje siempre incluye.



En este caso hice "four-pack" pero pienso que es suficiente. El torso está terminado.
Paso 13
Ahora en las piernas, la única iluminación que tendremos será en los muslos, las rodilleras (deben verse como puntos exclamación) y los pies:



Paso 14
Vamos añadir más detalles con la sombra gris más oscura: un pixel un poco debajo de cada rodillera, y una línea vertical desde de la rodilla hasta la parte inferior de la bota.



Paso 15
Vamos también añadir algunos retoques al área de la ropa interior... no me refiero a ser gráficos, pero Batman viste una armadura en la ingle. Así que para obtener esos volúmenes he añadido algunas sombras mínimas encima de los muslos y algo de gris más claro por debajo del medio del cinturón.



De esta manera, solo hay un elemento que resta en el traje de Barman: ¡La capa!
Paso 16
Marcado en rojo están los píxeles que añadiremos, y la derecha cómo lo daremos color.



He añadido un pixel extra a la bota porque sin eso pienso que es más fácil confundir la capa con el tacón. Nota que hay un poco de gris más claro hacia la parte inferior de la capa y se ve que se corta en los hombres, como si viene del area de la clavícula.
Y de esta manera, ¡Batman está completo!



4. Linterna de Calabaza
Paso 1
Para hacer nuestra linterna de calabaza, comenzaremos de la mima manera que hicimos con nuestro personaje: con la cara. Los ojos y la boca de la linterna de calabaza son usualmente triangulares y en zigzag, así que debes poder usar un poco de inversión y líneas de zigzag para la boca.



Cuando la calabaza esté terminada puede ser un poco difícil de leer ya que los píxeles no están sólidamente unidos, así que los duplicaremos verticalmente (solo selecciona alt-empuja un pixel abajo) para que se parezca a esto:



Puedes usar ambas versiones y ver lo que se obtendrá al final.
Paso 2
Los bordes de la calabaza serán de 15 px de ancho por 13 px de alto, y la cara debe estar sobre el cuadrado por la vista superior que estamos usando.



Paso 3
Redondea los bordes del cuadrado y rellena con un color naranja.



Moveremos la cara un poco por el momento para darle a nuestra calabaza algo de textura: las crestas verticales que las calabazas tienden a tener. La línea negra encima es donde el tallo irá y donde las líneas deben idealmente juntarse. Aunque no podemos apropiadamente transmitir las líneas curvas y juntarlas en un tamaño pequeño, podemos probar:



Pero para las mayo parte simplemente serán líneas verticales.
Paso 4
Ahora vamos a poner la cara debajo y seleccionar una area encima para incrementar el brillo y transmitir la luz y el volumen de la calabaza un poco. He usado colores personalizados en vez de simplemente incrementar el brillo; puedes probar tonos más amarillos en los colores más claros más tonos más rojos en los más oscuros.



Paso 5
Para el tallo, debemos añadir una sombra de verde que no destaque mucho. Será de una línea de tres píxeles más bordes negros alrededor.



Paso 6
Y para terminar el tallo, vamos añadir una iluminación en la punta y reemplazar las líneas horizontales negras donde el tallo y la corteza se juntan con sombras más suaves; más oscuras que las del tallo y la corteza pero no muy negras.



Paso 7
Similarmente para la cara podemos usar un color que es más oscuro que la corteza, pero no tan negro, y eso ayuda a que sea un terminado más suave.



Paso 8
Como detalle final añadiremos una sombra. No necesitamos sombras antes, pero en este caso, la linterna de calabaza lo hace, como una forma que es considerablemente más ancha que su huella.
Me gusta usar negro a un 20% de Opacidad cuando se trata de sombras.
He mencionado, en el tutorial del personaje original, acerca de no usar negro en los bordes por esta razón; si has hecho bordes negros, entonces la varita mágica no será capaz de separar los bordes de la sombra. Esto es un gran problema, pero puede ser eventualmente una molestia.
Así que esta es la manera de que nuestra linterna de calabaza debe verse, y la imagen en la derecha muestra cómo debe verse si mantenemos la primera cara más delgada.



Me gustan los dos, pero la cara delgada puede ser más difícil de leer cuando se aplica zoom, y es más fácil para la textura de la calabaza interferir con el. Así que es más posible usar el más grueso.
¿Cómo Quién te Vistes?
Así que ahora has disfrazado a tus personajes y la linterna de calabaza está lista.
¿Hiciste la casa de este tutorial? Sin ninguna duda, los personajes se miran más geniales para truco y travesura con una casa detrás de ellos:



¡Espero que halla sido útil!
