Crear una Cartelera de Arte de Píxel Isométrico en Adobe Photoshop

La publicidad está en todas partes, y es posible que necesites de ella en el mundo de arte de píxel. Así que hoy vamos a encontrar cómo hacer una imagen regular en su equivalente de arte de píxel isométrico, haciéndolo una cartelera publicitaria.

Por favor refiere al tutorial de personaje de arte de píxel isométrico antes de hacer este.

1. Dimensiones

Vamos a primero la cartelera; este será nuestro lienzo de nuestro lienzo para mucho de nuestro trabajo.

Vamos a usar el personaje para definir la altura del poste.

Paso 1

Cuatro veces más alto que la altura del personaje está bien, lo cual hará fácil ajustarlo luego.

Paso 2

El ancho de nuestro poste puede ser puesto cerca del ancho de nuestro personaje.

Paso 3

Termina de bordear el poste. La línea inferior se curvea un poco para mostrar que el poste es cilíndrico.

Paso 4

Y luego vamos añadir las líneas para la cartelera misma.

Paso 5

Rellena con color.

Paso 6

Y añade algo de sombreado, especialmente para darle volumen al cilindro.

Nuestro lienzo está listo.

2. Adaptando la Imagen

El arte de píxel isométrico no es hecho para que se mire realista, así que para incorporar apropiadamente una fotografía en una escena de arte de píxel, la imagen debe pasar a través de un proceso de transformación para hacer que el estilo se iguale al resto de la ilustración.

Primero, vamos a necesitar una imagen.

Paso 1

Puse esta publicidad de hamburguesa, pero podrías hacer publicidad de un carro o de lo que te guste. También, puedes usar esta imagen si quieres.

He añadido el nombre de la hamburguesa porque será parte de la publicidad y porque la quiero en una fuente grande y estilizada. Habrás más letras, pero será mejor hacer el resto en píxeles.

Paso 2

Para adaptar la imagen a la vista isométrica, necesitas transformar (Edición > Transformación Libre) la foto poner el Sesgado Vertical a 26.5°.

Y luego cambiar el tamaño para que se iguale a la cartelera. Es buena idea hacerlo en una capa derriba de la cartelera y con algo de transparencia a la capa para ver los bordes de la cartelera detrás.

Paso 3

Puedes continuar recortando y ajustando la imagen. Aquí me he asegurado de que la hamburguesa y la palabra estuviesen posicionadas dentro del lienzo de la cartelera.

Paso 4

Ya que estoy usando un color de fondo sólido, lo he aplicado al lienzo de la cartelera: rojo sobre toda una línea de luz en la parte superior del borde.

Ahora procedamos...

3. Letrero

Para las letras más pequeñas, será mejor trabajar directamente píxel por píxel. Lo haremos, pero primero tendremos el nombre de la hamburguesa, que fue hecha en letras grandes.

Paso 1

Aquí he cambiado la "C", la "I" y la "O" sobre la letra de referencia (pero en una capa diferente), y en vez de trazar todas las letras, he copiado la "o" porque el resto de las letras son suficientemente similares a ella.

Paso 2

El resto de las letras no debe tomar mucho trabajo por hacer.

Paso 3

Añadiremos más detalles a la publicidad. Vamos a decir que Clogger es una nueva hamburguesa que las personas deben probar. Así que añadiremos la palabra "NEW" (NUEVO) a la par de Clogger en un letra pequeña e inclinada.

Podemos obtener la "N", "E" y la "W" (y muchas de las letras en el alfabeto) fácilmente de estas formas con apariencia de "8".

Paso 4

Borra algunos píxeles y tendrás la palabra que quieras.

Paso 5

Normalmente es mejor evitar el suavizado, pero estas "reglas" son más flexibles en una imagen 2D dentro del arte de píxel isométrico. Aquí, la palabra Clogger tiene un tratamiento de suavizado y también un poco de sombra.

Paso 6

Añadiremos las letras para guiar a los clientes al restaurante. Tendremos el "ONLY AT (´SOLO EN´) [logo de restaurante]"

Así que necesitaremos tres líneas pequeñas por letra, y serán, en este caso, solo tres píxeles de ancho. De nuevo, podemos obtener las letras que necesitamos de una estructura básica.

He decidido crear un logo simple. Solo algo que refleje un logo de comida rápida reconocible.

Paso 7

Luego pon la letra en la cartelera.

Y si quieres, puedes ir y combinarlas con la capa de a cartelera.

4. Trazado y Pixelado

Para comenzar a trazar la hamburguesa, deja la cartelera en una capa y la referencia en otra capa arriba, y comienza a trabajar en una nueva capa derriba de todas las anteriores.

Paso 1

Aquí he trazado los panes con las líneas negras, usando líneas más organizadas y menos irregulares, tanto como sea posible.

Paso 2

Puedes rellenar los panes con negro para hacer una forma sólida y luego rellenarlo del color que usarás para el pan, que puede ser extraído con el cuentagotas, si es así como lo deseas hacer.

Paso 3

Ahora vamos añadir detalles al pan. Echaremos un ojo a los lados interiores del pan, que son usualmente más claros.

Paso 4

Luego añadiremos sombra—para el lado inferior del pan es más para transmitir volumen, mientras que en la parte superior es para mostrar las áreas horneadas más oscuras del pan.

Paso 5

La idea es reducir la complejidad de las formas, así como el número de colores, así que una sombra más oscura e iluminación será suficiente para completar el coloreado de los panes.

Paso 6

Añade un detalle final al pan: semillas de sésamo. Son píxeles claros con un poco de sombra debajo. Puedes hacer las sombras en una capa diferente con negro y luego reducir la opacidad. Si quieres, prueba modos de fusión diferentes para la capa.

Paso 7

Ahora que los panes han sido terminados, vamos a movernos a la carne. Haremos las dos idénticas para que solo necesitemos hacer solo una. si comenzamos a mover un poco las referencias—de hecho, es mejor hacerlo a menos que estés haciendo una versión pixelada del retrato, en cuyo caso, te gustaría obtener algo igual.

Ahora que estamos haciendo un poco de divergencia de la referencia y evitar confusión con todo el desorden que tienen los píxeles, nos moveremos al lado y miraremos por referencia sin necesidad de trazar justo en ello.

Paso 8

Aquí están nuestras dos piezas de carne coloreadas y la referencia no será una distracción.

Paso 9

Vamos a darle volumen a uno de nuestras piezas de carne: más clara en la parte de arriba y también en el centro.

A diferencia del resto de nuestro arte de píxel, no usaremos bordes oscuros para estos elementos, ya que estamos haciendo imágenes 2D y no un elemento 3D en el mundo de arte de píxel.

Paso 10

Termina el sombreado y copia para las dos piezas de carne. Luego en una nueva capa debes añadir algo de textura para la carne. No necesita ser complejo del todo.

Paso 11

Pero debe ser sutil, así que ajusta la opacidad y luego combina la imagen.

Paso 12

La carne está terminada. Vamos a ponerles queso.

Una sola línea de píxeles amarillos en toda la carne será un buen punto de partida.

Paso 13

Ahora vamos hacer las esquinas del queso que caigan en la carne. Esto se está poniendo delicioso.

Debe ser compensar un poco. Notarás que la esquina más grande del queso es básicamente la misma para las dos piezas de carne, pero en posiciones diferentes, y luego hay un poco de otra esquina meramente saliendo en (posiciones diferentes).

Paso 14

Añade algo de sombra al queso. Los bordes deben ser más claros y el lado derecho es un poco más oscuro. También, un poco de sombra sobre la carne ayuda a darles volumen y contraste.

El queso está terminado.

Paso 15

Ahora iremos a los vegetales. Tendremos un pedazo grande de tomate y sobre la capa de pepinillos/cosas verdes y derriba de eso algo de cebolla/mayonesa/y las cosas-blancas. Mucho de nuestra referencia.

Paso 16

Y aquí le daremos a estos elementos algo de volumen con el sombreado: más claros en el centro, y en el caso de la rodaja de tomate, también en la parte superior.

Hay diferentes áreas claras para las cosas verdes, que debe ayudar a transmitir la idea de tres diferentes pepinillos. Lo mismo con las cosas blancas.

Paso 17

Para terminar estos vegetales estoy añadiendo una sombra/borde híbrido que ayude a separaros y hacerlos que sobresalgan un poco más. Es simplemente una línea más oscura a través del borde superior de cada elemento.

Paso 18

Vamos a continuar haciendo más grande nuestra hamburguesa con rellenos más deliciosos.

En el medio tendremos los aros de cebolla. En una nueva capa puedes hacer algunas formas básicas para ello. Debe sentirse como una forma libre, así que ve y haz garabatos en el, haciendo algunas formas ondeantes.

Paso 19

Las formas ondeantes serían los aros, así que serán más gruesos en el medio y más delgados en los bordes, a medida que desaparecen en la hamburguesa. Rellena el resto del espacio con un color más oscuro y más rojo.

Paso 20

Añade una sombra más oscura a los aros, y un toque más claro de píxeles, como un toque grasoso a los aros.

Si estás a gusto con los aros de cebolla puedes combinarlo con la capa.

Paso 21

Y finalmente haremos algo muy similar a los rellenos de la parte inferior, que será carne de cerdo desgarrada.

Las formas para esto son irregulares, pero más cuadradas. Solo un poco de estos pedazos pequeños, que pueden ser garabateados también. Deben ser hechas en una nueva capa.

Paso 22

Y luego colea con rojo o café con un tono más oscuro en los lados e incluso más oscuro de entre medio y alrededor de las formas.

Paso 23

Haz algunas sombras. Las líneas más oscuras ayudan a distinguir los volúmenes, pero no necesitan funcionar como los bordes, así que borraremos algunos de estos.

Paso 24

Como con los aros, añadiremos algunos píxeles claros, como bits de grasa brillante.

Moví el pan que está abajo un píxel arriba porque pensé que se miraría mejor.

Ahora estoy feliz con mi hamburguesa. He combinado todos los elementos en una capa.

Paso 25

Y para terminar he añadido una sombra que se proyecta a la hamburguesa.

¡Y eso es todo! ¡La cartelera está terminada!

¡Felicidades!

La cartelera está completa. La Clogger se ve muy deliciosa; arterias obstruídas suenan como un pequeño precio a pagar.

Ahora sabes cómo hacer una imagen en arte de píxel isométrico. ¡Espero que eso sea útil!