Crear un Parque de Arte de Pixel Isométrico en Adobe Photoshop

Si quieres hacer una ciudad con arte de pixel, entonces un parque sería una adición buena y necesaria. Los elementos que cubriremos en este tutorial serían, de hecho, útiles para hacer accesorios de otras clases de escenas, como un jardín dentro de los edificios, o terrazas.

Por favor revisa los tutoriales introductorios en esta serie y la lección del árbol de arte de pixel.

1. Define el Tamaño y el Diseño del Parque

Usualmente comienzo definiendo el tamaño de lo que haré basado en el tamaño del personaje. Pero para el área del parque, puede no ser tan útil tener el personaje sobre el lienzo.

Paso 1

Pero podemos aun ponerlo ahí por el mero hábito.

Estamos haciendo un rectángulo grande. Podría ser el cuadrado perfecto si quieres—de hecho, eso puede ser ideal para la plaza central de un ciudad. Pero pensé que hacerlo ancho en un lado y angosto en otro lo haría menos aburrido, y también, iguala el ancho de la Alcaldía del tutorial anterior, que podría eventualmente ser útil.

Paso 2

Redondea las esquinas, y la forma básica para el parque está completa.

¿Podría ser este la lección más fácil? (pista: no)

Paso 3

Siempre revisa las imágenes de referencia cuando estés haciendo tus propias creaciones, crear un moodboard, bosquejar las opciones y probar múltiples alternativas. Por supuesto, por ahora seguiremos un diseño que hice, que espero que te guste. Será muy típico, parque clásico: poste de luz antigua genial, un mirador, una fuente, y más.

Comencemos con el paisaje básico. Tendremos un camino yendo a través en medio del parque.

Hay muchas maneras de encontrar el centro. Aquí hay uno que podrías probar: has dos lineas paralelas que formen el camino y córtalo en el portapapeles, luego selecciona el área del centro del parque con la Herramienta Varita Mágica (ponla en Contiguo), y luego pega; Photoshop pegará automáticamente el portapapeles en el centro de tu selección.

Paso 4

Un camino recto en el medio del parque puede un poco aburrido también. Las referencias para los diseños de parque muestran todas clases de caminos en curva, elevados, pero evitaré muchas curvas, ya que inevitablemente traen lineas ásperas en nuestros diseños. Así que en vez, añadiremos algo de complejidad añadiendo ángulos al camino.

Así que hice una linea horizontal recta de una esquina hacia el camino. El círculo donde ellos se conocen será útil para encontrar el ancho correcto del camino, independientemente de su dirección. Las reglas para el círculo son: debe ser dos veces más ancho que su alto, y sus bordes deben igualar las dos lineas del camino.

Déjalo en una nueva capa. La linea superior del círculo define la linea superior para el área horizontal nueva del camino.

Paso 5

Aquí está esta área del camino, con el círculo de referencia y las lineas extras innecesarias borradas.

Paso 6

Vamos a reflejar el camino para la esquina opuesta. Puedes simplemente copiar las lineas anteriores, pegarlas y luego rotarlas 180° (Edición > Transformar > Rotar 180°.)

Paso 7

Añadiremos otro camino que va verticalmente a través del parque. El círculo se vuelve útil de nuevo para obtener el ancho del camino correcto.

Paso 8

Aquí están los bordes para la nueva área del camino.

Paso 9

Limpia el medio, y vamos a añadir un cambio más en el ángulo del camino.

Nota las esquinas algo redondeadas.

Paso 10

Refleja ese camino de nuevo, y porqué no rellenarlo con algo de grama, en las áreas que no está el camino.

Paso 11

Haremos las formas básicas del mirador como una guía que dibujaremos de nuevo luego, y comenzaremos haciendo un octágono; usa la Herramienta Polígono para crea una forma de 8 lados.

Luego escala a 50% verticalmente para que se adecue a la vista isométrica, y luego cambia el tamaño (mientras mantienes las proporciones) a un tamaño que te guste en el parque.

Paso 12

Vamos a usar tamaños diferentes para el octágono porque añadiremos algunos escalones y se harán más pequeños concentricamente. Así que al lado del octágono original, tengo una copia de ella a 90% del tamaño original y al lado de ese tengo un octágono a 80% del tamaño del original.

Mantendré otra copia para el octágono medio para usarlo como techo, luego, y otra copia de la grande en lado opuesto del parque, para ayudarme a colocar la fuente luego.

Sus colores son alterados un poco para que podamos distinguir las formas.

Paso 13

Los tres octágonos superiores serán los escalones y el piso, así que tendrán algo de altura; puedes seleccionarlos, copiarlos y pegarlos en su lugar (o mantener presionado Alt mientras mueves) y mover hacia arriba 2 píxeles. También invertí sus colores para ser capaz de distinguir las formas aparte.

Paso 14

Y aquí están luego de ser colocadas concentricamente.

Paso 15

Coloca el techo sobre la base, lo suficientemente alto para que el personaje pueda pararse dentro.

Paso 16

Parece que no seremos capaces de evitar las lineas puntiagudas en el techo, pero está bien. Haz 2:1 lineas a lo largo del las lineas diagonales superiores del techo, y extiéndelas de manera que se junten en el medio; eso será la punta del techo del mirador.

Las lineas rectas deben extenderse desde la punta de las esquinas visibles del octágono. Estas lineas pueden ser hechas dando click en la punta de la Herramienta Lápiz, manteniendo presionando Mayus, y luego dando click en una esquina. Una linea automáticamente se forma entre los dos puntos.

Paso 17

Ahora haremos las formas básicos que serán la guía para nuestra fuente. Comencemos con un círculo y un rectángulo más ancho que el círculo.

Luego centralas y combinalas. Debe verse como el planeta Saturno sólido.

Paso 18

Copia esta forma tres veces más, y únelas en las esquinas para hacer un cuadrado como este:

Borra las espacios dentro y rota la forma 45°. Eso será la forma de nuestra fuente.

Similarmente al mirador, esta forma se repetirá concentricamente, solo que esta vez el truco de cambiar el tamaño deja mucho que desear ya que la mezcla de cuadrados y círculos resulta en los anchos de las formas variados.

Nota que tan angostas son las esquinas vs. que tan grueso el semi-círculo se vuelve en su centro.

Paso 19

Aquí hay una solución rápida. Da doble click a la capa para ir a Estilos de Capa, y añade Trazo con un buen tamaño, poniendo la posición a "Centrado".

Paso 20

Vamos a añadir otro Trazo a eso. Podemos hacerlo copiando la combinación (Edición > Copiar Combinado) si tienes una capa de fondo, haciendo invisible para copiar la forma de la fuente. En una nueva capa con los elementos pegados, añade otro (incluso más grueso) trazo.

Y obtendremos esto:

Estas esquinas no son muy bonitas y los círculos no son perfectos, pero esto será solo una referencia del trabajo real, que haremos bien.

Paso 21

Escala de nuevo las formas que hicimos a 50% de altura, y luego a un tamaño similar al octágono de referencia que teníamos en lugar. Pega la forma de la fuente sobre el octágono.

Y borra el octágono.

Y ahora tenemos estas ideas de diseño abajo. Notarás que hay una simetría en nuestro parque, que para el diseño que pensé era el mejor, pero los diseños no siempre tienen que ser simétricos.

2. Crea y Expande la Vegetación

Vamos a trabajar en los diferentes elementos que añadiremos al parque. Algunos son muy simples, otros definitivamente no.

Si no has pasado en el tutorial de árbol de pixel isométrico, ahora sería el tiempo de hacerlo.

Paso 1

Obtén tu árbol.

Paso 2

Hazlo en un árbol pequeño.

Solo has un ovalo simple, e incluye algo de sombra de los bordes para mantener algo el volumen. Luego reduce el árbol y la sombra.

Paso 3

Haz ese árbol pequeño en un arbusto. Tiene una forma muy parecida al huevo, no tronco.

¡Y de esta manera obtienes tres tipos de árboles!

Paso 4

Encontraremos lugares para hacer las flores. Ellas se miran bien e incrementan la variedad de la vegetación sin mucho trabajo.

No nos preocupemos de los tallos o las hojas. Aquí hay una forma de flor simple e isométricamente posible: solo cuatro pétalos y un borde suave (verde como la grama, pero más oscura).

Hice la parte baja del borde un poco más oscura para que actúe como una proyección de sombra. Modifica para tener colores múltiples cuando lo hagas.

3. Crea los Postes de Luz

Vamos a hacer nuestros postes de luz. Tendremos un número de ellos dándole clase al parque.

Paso 1

Será muy delgado, y definitivamente más alto que el personaje.

Paso 2

No es necesario, pero quería añadir una base de cemento.

Añade lago de luz y sombras. Recomiendo evitar una apariencia de degradado-y cuando se hace la sombra, en general, pero es más fácil ser tentado con cilindros.

Además, querrás darle un poco de transparencia a la parte de vidrio.

4. Crea los Bancos

¿Dónde más las personas se sentarán?

Paso 1

A superficie de la silla del banco debe alcanzar la rodilla del personaje, en cuanto a la altura.

Paso 2

Para terminar la estructura, añade algunas piernas y un respaldo. Luego dale color y textura.

Paso 3

Es fácil para un pieza simple de mobiliario para terminarlo en cuatro vistas diferentes. Una vista extra es lograda simplemente volteando horizontalmente.

Paso 4

La vista trasera necesita algo de trabajo, pero es muy simple—solo mueve el borde opuesto hacia atrás de la superficie de la silla. Cambia el color de los bordes como lo necesites.

Y voltea para la vista extra.

5. Crea el Mirador

Vamos a trabajar en la versión definitiva del mirador.

Paso 1

Aquí está la guía.

Trabaja en una nueva capa.

Puedes comenzar con las lineas exteriores.

Paso 2

Si quieres lograr lineas más ordenadas de lo que las guías sugieren, entonces hazlas más ordenadas.

Aquí estoy añadiendo iluminación en la parte frontal de las esquinas de los escalones, e iluminación un poco diferente para el techo.

Paso 3

Puedes deshacerte de la guía.

Vamos añadir las columnas que sostienen el techo, y también un poco de recorte blanco debajo del techo.

Paso 4

Le estoy dando a los escalones el mismo color que el cemento de base que usé para el poste de la lampara, para mantener las cosas cohesivas.

Debe ser una luz gris, representando el cemento, el concreto.

Paso 5

Añade algo de sombra a los escalones.

Paso 6

Suaviza las lineas. No hay necesidad para negro en las lineas de la esquina donde dos superficies se juntan. También suavicé algunas otras lineas en los escalones solo para reduir el contraste en esas partes.

Paso 7

Añade algo de color al techo y sombras diferentes. ¿Cómo piensas que la luz debería reflejar el octágono del techo?

Paso 8

Suaviza la iluminación del techo. Es especialmente preferible mantener el contraste bajo en todas las lineas del techo porque son puntiagudas, no la clase idea en un arte de píxeles de lineas.

Paso 9

Vamos a darle al techo algo de textura—no tejas realmente, sino un montón de lineas paralelas.

Puedes comenzar con punteros en los lados frontales, en una nueva capa.

Luego añade las lineas que la cubren completamente.

Paso 10

Las lineas deben ir en un ángulo diferente en el lado que está cerca; debe ser paralelas hacia ese lado.

Haz eso y borra el exceso de lineas.

Paso 11

Y repite para el lado siguiente.

Solo necesitamos trabajar en uno de los lados, porque obtendremos el otro lado simplemente volteando.

Paso 12

Añade otro grupo de lineas, justo luego de la iluminación de las esquinas del techo. Y borra los píxeles que van justo sobre la iluminación.

Paso 13

Y ahora puedes voltear horizontalmente para cubrir todos los lados.

Paso 14

Disminuye la opacidad de la capa a 10% (o prueba 5% hacia arriba para ver lo que prefieres). Y luego puedes fusionar.

Paso 15

Aquí añadí unas mejoras extras. Primero, un poco de blanco extra debajo del techo.

Y luego bajé un poco el techo para cubrir la parte negra formada por el área trasera de los escalones.

Paso 16

Y para reducir los grises, vamos a añadir un poco de bancos. Podría ir con cuatro, pero me gusta como se ve con dos.

Organiza las capas. Sino, solo borra las partes del banco que están cubiertas por el techo y las columnas.

¡El mirador está completo!

6. Crea la Fuente

Ahora vamos a la fuente. Este puede ser el punto de enfoque de la pieza.

Paso 1

Aquí está nuestra guía, y en una nueva capa podemos inmediatamente corregir esas esquinas suavizadas. Necesitamos trabajar en un cuadrante de la guía; el resto puede ser logrado volteando horizontalmente y verticalmente.

He añadido estas lineas que ayudan a mantener la misma distancia en estos paralelos. También mantendré esos píxeles como parte de las curvas.

Paso 2

Puedes hacer "mano alzado" para las curvas, y luego editar y mover un poco de píxeles alrededor.

Aquí están las curvas luego de un poco de limpieza.

Paso 3

Aquí se ve cómo las lineas se miran luego de voltear horizontalmente y verticalmente para completar la forma de la fuente. Puedes no necesitar las guías  de la forma de la fuente.

Hice un poco de retoque a las curvas en un cuadrante (y cuando lo hice, reemplacé loso otros tres con una nueva).

Paso 4

Ahora añade algo de color: el color del cemento previo para el piso alrededor del a fuente y una sombra más clara para lo que será la parte superior de los muros de la fuente.

Paso 5

Vamos a levantar los muros un poco.

Podría haberlo levando un poco más, pero no me gusta como se miran las lineas, chocando en contra de las lineas alrededor del piso de cemento.

Pero esta altura estará bien. El personaje puede sentarse cómodamente en el reborde.

Paso 6

Añade algunas esquinas verticales, cierra esos volúmenes y añade algo de agua.

Paso 7

Añade un poco de sombra e iluminación de acuerdo a cómo piensas que la luz trabajaría en los muros.

Y alfo de iluminación a todas esas curvas en la punta que apuntan hacia nosotros.

Paso 8

Vamos a suavizar esas lineas en los lados del muro, por debajo de la parte superior. Ellas podrían también ser borradas, pero pienso que dan un efecto bueno.

Deben ser como los colores del muero pero alrededor de 20% más oscuras.

También añade y suaviza esas lineas dentro y las lineas donde la superficie se junta.

Paso 9

Tendremos algunos cuencos flotando derriba de la piscina. Vamos a añadir la base para ellos, comenzando con un círculo en el centro de la piscina. El círculo debe ser dos veces más ancho que su alto.

Puedes hacer estos círculos con la Herramienta Marco Elíptico. Rellena la selección elíptica con el color del borde y contrae la selección (Selección > Modificar > Contraer...) por un pixel para rellenar el interior del color que quieras darle al círculo.

Paso 10

Haz el círculo en un cilindro.

Y dale la misma terminación como los muros de la piscina.

Paso 11

Ahora en una nueva capa, añadiremos un círculo derriba de esta base de cilindro. Esto será el cuenco más bajo, y también el más grande de nuestra fuente.

Paso 12

Añade otro cilindro más pequeño en una nueva capa derriba de la anterior.

Paso 13

Y luego otra vez.

Estos son todas las cuencos que necesitaremos.

Paso 14

Aplica algo de color al primer cuenco; colores de agua en el centro pero más claro en los bordes.

Paso 15

Repite para los otros dos cuencos.

Paso 16

Ahora vamos a conectas los cuencos para que no estén mágicamente flotando derriba de la fuente.

Las bases y los pedestales para estas fuentes pueden ser floridas, pero por nuestra vista superior solo obtendremos un vistazo, tan simple que un circulo o esfera puede ser suficiente para hacer el truco.

Aplica la sombra y suaviza el interior de las lineas.

Paso 17

Y luego extiende el pedestal para conectar el segundo cuenco.

Así mismo con el tercero.

Paso 18

Para terminar de convenir estos volúmenes, puedes querer añadir un poco de sombra en el interior de los cuencos. Estas son formas cóncavas y pienso que la luz actuaría de esta manera en esta forma.

Aplica a los otros dos cuencos, incluso aunque es menos notable en ellas.

Y tienes las formas hechas.

Paso 19

¿Pero qué del agua? Vamos a tener cuidado de eso, añadiendo no una, no tres, sino ¡tres efectos de agua!

Primero, una reflexión de agua. El agua en movimiento puede mirarse un poco como dunas, así que haremos un simple motivo que se mire como un montón de dunas pequeñas. Comenzaremos con un motivo a cuadros distorsionado.

Y luego darles a estos cuadrado más una forma de delta.

Paso 20

Aquí, en otra capa hice estas formas para definir la superficie del agua, las áreas donde aplicaré mi motivo.

Paso 21

Aquí está el motivo repetido sobre el agua, aplicado solamente sobre la máscara morada y en la nueva capa. Es un color similar al interior de la piscina, pero más brillante.

Paso 22

Puedes cambiar el modo de fusión para la capa de motivo a superponer u otra configuración que quieras y disminuir la Opacidad. Y luego, si quieres, fusiona.

Paso 23

Vamos a tener agua fluyendo desde cada cuenco a medida que las gotas fluyan. Eso significa que golpearán la superficie del agua donde este círculo denota.

Paso 24

Aquí en rojo, para la visibilidad, están las gotas que usaré. Cerca de la parte superior están un poco más juntas, pero a medida que caen, la distancia entre cada gota incrementa (por un gigantesco pixel - 1px).

Estoy usando dos versiones de estas lineas—una es simplemente 1 px más alta en el lienzo que la otra.

Paso 25

Vamos a darle a las gotas un color de agua clara. Y colocarlas alrededor del círculo, manteniendo la alternancia y sin mucho toque entre las lineas.

Paso 26

Haz las gotas previas invisibles. Ahora vamos a añadir chapoteos pequeños sobre la superficie, lo que será donde las gotas golpeen.

Así que tomaremos el círculo donde las gotas caerán pero darles una apariencia de motivo de mancha.

Paso 27

Una vez que mezclemos esas dos cosas (dando a las gotas que caen menos opacidad) debes obtener un efecto de agua convincente.

Paso 28

Aplica el chapoteo a las superficies de los cuencos.

Paso 29

Y aplica a las gotas que caen a ellos también (también disminuí un poco la opacidad para la parte más alta del cuenco).

¡Y así obtienes una fuente de parque bonita, con agua y convincente, y simple!

7. Colocar los Elementos

Con la cantidad de elementos y espacio para colocarlos, las posibilidades pueden ser casi infinitas. Prueba alternativas diferentes. Me gusta mantener los elementos un poco dispersos, solo lo suficiente para expresar abundancia, pero manteniendo las cosas organizadas. Pero puedes querer un enfoque más saturado.

Paso 1

Las dos cosas que ya sabemos dónde estarán son el mirador y la fuente. Ponlas justo sobre las guías.

Paso 2

Y borra las guías.

Vamos a añadir los postes de las lamparas. Tres por lado se mira suficiente para mi. También me gusta ponerlas en este espacio y alinearlas con las esquinas.

Los otros tres puntos en el otro lado del césped son guías para el lugar de los poste de las lamparas para ese lado. Para obtener esas marcas; solo copia los postes, rota a 180° y ponlas sobre el otro lado del césped. Los postes de lamparas estarán al revés, pero eso está bien porque solamente los usarás para marcar los puntos.

Paso 3

Pon los postes de luz en los puntos correspondientes en el otro lado de la césped.

Paso 4

Vamos a colocar algunos bancos mirando hacia la fuente, ¿O quien sabe, para alimentar a los pajaritos?

Paso 5

Puse los tres árboles más pequeños cerca de la fuente, en el borde del parque: cuatro de ellos, espaciados justamente.

Ellos chocan un poco con el espacio de la fuente, así que lo moví un poco. Y también moví el mirador para corresponderlo simétricamente y para que halla también espacio suficiente en ese lado para otros cuatro árboles pequeños.

Paso 6

¡Ahora vamos a desplegar los árboles más grandes!

Como dije, me gusta mantener mis elementos un poco esparcidos. De igual modo, hay más elementos por ser añadidos en el ambiente, así que no habrá espacios en blanco—excepto por los espacios abiertos pequeños, que el parque necesita.

Paso 7

Ahora añade algunas flores aquí y allá. Ponlas donde te parezcan. Las puse juntas en una linea, conectando con el poste de luz. Su lugar debe ser un poco aleatorio, pienso.

Paso 8

¿Y con los arbustos pequeños? Vamos a encontrarles un buen lugar. Hat una escasez de emoción en el mirador y sus alrededores. Me di cuenta que los arbustos ayudan a arreglar eso.

Y con eso hemos encontrado un lugar para todos nuestros elementos.

8. Añadir Algunas Texturas

Hay un poco de trabajo por hacer antes de terminar el parque.

Paso 1

Vamos añadir algo de color al camino.

Paso 2

Les daremos un motivo con estilo de piedra.

Comienza con algunas lineas verticales, 4 px aparte, algunas 5 px aparte. Luego añade lineas horizontales para hacer las piedras individuales. Puede ser tedioso hacer un motivo más grande, pero un motivo más grande e bueno porque trae menos problemas.

Para terminarlo, tejé algunas veces para tener una mejor idea de cómo se iguala a los bordes.

Paso 3

Aplica el color que seleccionamos y una sombra más oscura de ella a las lineas. Trabajará mejor si es sutil, así que los colores solo varían por un pequeño porcentaje en brillo.

Haremos algunas piedras más oscuras y algunas más claras. Para espaciarlas, es más fácil colorearlas en sombras notables, antes de reemplazarlas con los colores finales de trazado.

Paso 4

Embaldosa repetidamente sobre toda el área del camino, en una Nueva Capa. Colócala (¿Las lineas chocan con las lineas verticales del parque? Si es así, muevela alrededor un poco.)

Paso 5

Y con la Herramienta Varita Mágica selecciona el área original, invierte la selección y en la capa de motivo, presiona Suprimir. Y obtendrás esto.

Paso 6

Para el césped podemos aplicar esta textura simple, ¡Que probablemente he usado en la mitad de los tutoriales!

Paso 7

Y haz lo mismo como con el motivo del piso.

Embaldosa...

... y quita el exceso.

Paso 8

Y finalmente suaviza la superficie de las lineas. Donde el césped se une al camino, añade sobra entre el color de ambas superficies pero más oscuras que ellos. Haz algo similar para los bordes del césped y el camino.

El parque está listo y puede ser colocado en una superficie urbana como lo es una acera.

¡Buen Trabajo! ¡Lo Haz Hecho!

¡Felicidades! ¡El parque es un éxito! Los ciudadanos de pixel parecen que están felices.

He añadido algunos detalles finales: el personaje, un par de tórtolas y un toque de iluminación en la parte frontal de los bordes del césped, para darle un efecto visual que se pare cerca de un pulgar más alto que el resto de la superficie.

Un parque sería definitivamente añade mucho más a la escena de una ciudad. Y los elementos pueden ser usados de nuevo, los bancos, las lamparas, y los árboles. Así que espero que valores este tutorial.