Spanish (Español) translation by Cristian Marroquin (you can also view the original English article)
Continuaremos el trabajo de nuestro mundo de arte isométrico, y en esta ocasión añadiremos un lugar de trabajo industrial a nuestra biblioteca. Puede ser bueno hacer que parezca aburrido, pero eso no significa que no sea bonito.
Usaremos algunas texturas de ladrillo de nuevo, algunos elementos metálicos, chimeneas grandes y humo. ¡Comencemos!
Revisa los tutoriales anteriores en esta serie si no lo has hecho; muchas lecciones cubren consejos de Photoshop y trucos específicos del arte del pixel que pueden no ser necesariamente mencionados en tutoriales futuros.
Todo esto trabajo isométrico, geométrico y pixelado puede tornarse difícil o tedioso; si encuentras en trabajo poco atractivo, siéntete libre de comprar las gráficas isométricas hechas en Envato Market.
1. Define las Dimensiones
Saca al personaje pixel fuera. Vamos a hacer una fábrica de dos niveles de alto—no será grande, pero será una caja grande con chimeneas altas y columnas de humo grandes, así que será un tamaño respetable.
Consideré hacer un techo con dientes de sierra (muy común en las representaciones de fábricas), pero entonces pensé que no era necesario y probablemente no es muy común en estos días. Aun así haremos nuestro edificio muy industrial.
Paso 1
Usa el personaje para encontrar el nivel de altura que quieras y luego duplica.
Añadí lineas extras (4 px entre cada una) para cada nivel como guía para la textura del ladrillo para ser añadidas luego. De esta manera soy consciente de las lineas de ladrillos mientras coloco las ventanas y otros elementos arquitecturales.
Derriba del segundo nivel dejé una linea extra para que el techo tenga un borde pequeño.
Paso 2
Ahora definiremos el ancho de la estructura. Debe ser lo suficientemente grande para un camión—¡aunque aun no hemos cubierto el camión en estos tutoriales aun!
Paso 3
Ahora añadiremos algo de profundidad. Esto no necesite ser un tamaño justo; podremos editar cuando añadamos las ventanas.
Paso 4
Cierra algunas superficies añadiendo lineas extras. También, querrás definir el ancho de la puerta metálica que añadiremos en el frente.
Paso 5
Estos serán los anchos de las ventanas. Debajo de las ventanas tendremos una puerta, así que básicamente necesitaremos hacer las lineas tan anchas como esperamos que la puerta sea. El resto de las ventanas no tendrán puertas, pero para la consistencia (y para hacer el trabajo más fácil) todas serán del mismo ancho.
Puedes luego cerrar el volumen añadiendo las lineas de esquina restante.
Paso 6
Aquí hemos añadido un poco de profundidad a la puerta y a las ventanas.
Paso 7
Y luego añadir un poco más de profundidad para obtener el reborde del techo.
2. Crea Estructuras Adicionales
Hemos hecho nuestra caja grande. El edificio será simple, pero hay algunas pocas estructuras más que realmente dirán que es una fábrica: a saber, las chimeneas grandes.
Paso 1
Aquí comencé añadiendo el borde de un cuadrado como una señal para la chimenea. También marqué la distancia entre la chimenea añadiendo una linea distante equitativamente en el lado opuesto de la caja de la chimenea. Estas lineas nos ayudarán a hacer la base para las chimeneas.
Haz esto en una Nueva Capa.
Paso 2
Vamos añadir otra linea, así como la última que van alrededor de la parte trasera del cuadrado de referencias para la chimenea. Alinea la última linea con el techo y comienza a extenderlo donde añadiremos dos chimeneas más.
Paso 3
Haz las nuevas chimeneas a una distancia igual. No haré las chimeneas y su base centrada o completamente simétrica. Puedes hacerlo si quieres, pero a veces algunos diseños de puerta comienzan cuando dejas ir la simetría rígida o el balance.
Paso 4
Este será el ancho de la base. Quiero que se aleje un poco de la fachada, así que la hice que no se alineara con el frente un poco.
Paso 5
La base será una caja larga con un poco de altura, como algunas escalones.
Paso 6
Termina la caja que conforma la base con las lineas de esquina extra y limpia las lineas de atrás.
Añadí algunas marcas rosadas que igualan la esquina del techo para ayudar a mover y colocar la base en el nivel del suelo, donde se igualará a la esquina inferior izquierda.
Paso 7
La caja ha sido colocada en un nivel de suelo. Ahora puedes borrar las lineas de marca.
Paso 8
Estos son los tres cilindros que conforman la chimenea. ¿Son lo suficientemente largas?
Para hacerlas puedes, en una Nueva Capa, dibujar un círculo con sus bordes que se igualen a los bordes de los cuadrados de referencia de la chimenea. El círculo puede ser hecho con una Herramienta de Marco Elíptico, rellenando la selección elíptica con el color de borde y luego borrando los píxeles del interior que puede ser hecho contrayendo la selección (Selección > Modificar > Contraer...) por 1 px y presionando suprimir.
Una vez que tengas el círculo, copia y pegalo en la parte superior, directamente arriba, en la altura que quieras, y luego añade lineas verticales para terminar la forma.
Paso 9
Borra las lineas innecesarias. Añade los círculos del interior para abrir la chimenea.
He editado el círculo exterior para hacerlo, en mi punto de vista, una vista más limpia. Más limpio a veces puede ser mejor que precisión en pixel de arte.
Con eso, la mayoría de la estructura está hecha.
3. Termina la Superficie del Edificio
Vamos a colorear y dar textura, a medida que añadamos varios detalles al edificio.
Paso 1
He usado una textura de ladrillo en mucho tutoriales en esta serie. No quiero abusar, pero me gusta la textura de ladrillo, así que haremos una versión un poco diferente y más simple esta vez.
Quiero que la fábrica sea de tono oscuro, así que escogí un color parecido al chocolate para ello. Es aplicado para todos los muros en la misma sombra, por el momento.
Las lineas de textura son un poco discorde, así que les daremos una sombra mejor. Es fácilmente hecho con la Herramienta Bote de Pintura con la casilla de Contiguo marcada (si las lineas de textura tienen un color único...de otra manera cambiarás el color de todo que comparte la misma sombra dentro de la capa/selección).
Paso 2
Ahora bajaremos la parte de arriba de la puerta y las ventanas y quitar las lineas innecesarias en esa área.
Paso 3
La ventana más frontal ha sido hecha para tener una puerta en el primer nivel, así que demosle un marco.
Puedes comenzar añadiendo una sombra más oscura de café en el lado derecho (o no importa que lado mientras sea consistente con las otras piezas). Recuerda también agregar sombra a las lineas del ladrillo un poco más oscuras en el lado de la sombra.
Paso 4
Para no hacer la fábrica muy aburrida, añadiremos otro color, en la parte superior e inferior.
Aquí está la parte superior con un nuevo color crema (¿quizás es una fábrica de crema de chocolate?) con algunas sombras agregadas. Como es usual, recomendaría hacer las sombra más claras en la parte superior y las más oscuras en el lado derecho—su brillo puede cambiar desde 8% a 15%.
Paso 5
Aplica color en la parte inferior.
Paso 6
No necesitaremos lineas de ladrillo para la parte inferior.
Paso 7
Haremos que la base de las chimeneas igualen la parte superior de la estructura, así que colorearemos el techo con un color gris oscuro.
Paso 8
Y aquí una textura simple es aplicada para obtener superficies grises oscuras—puede ser la grava o cual sea un buen material para la superficie del techo.
También vamos a añadir iluminación en la parte superior, y lineas más oscuras y organizadas. Y disminuir el contraste en las esquinas interiores, donde las superficies se juntan.
Paso 9
Así que vamos a tomar los pasos de arriba y aplicarlos a la base de la chimenea, con la única diferencia de que esta caja no tiene un bordillo como el techo.
Paso 10
Ahora vamos a darle un gris genial a las chimeneas. Podría también funcionar un gris cálido cerca de 40° Tono, pero como ya tenemos muchos colores cálidos, opté por un tono más frío.
Puedes tratar de hacer que se mire como el concreto, o puedes hacer las lineas blancas y rojas que una chimenea a veces tiene. Probé esos y preferí la apariencia de concreto.
Paso 11
Termina el sombreado en la parte superior de las chimeneas.
Terminé alterando las lineas originales un poco, pero pienso que es lo mejor porque, como mencioné antes, más limpio puede ser mejor que precisión en arte de pixel.
Por supuesto, no necesitas dibujar todos estos elementos tres veces—puedes hacer una de las chimeneas y cuando estés feliz con ello, copialo para las otras dos.
Paso 12
Ahora añadiremos algo de sombra a las chimeneas. Hay muchas maneras de hacer sombreado cilíndrico. Aquí hay solo una linea brillante que sale del borde izquierdo y una más oscura en el borde derecho, y añadí un pequeño borde serrado para deshacerme de las lineas verticales perfectas que las lineas tenían; hacían que las chimeneas se vieran un poco lustrosas.
Paso 13
Ahora vamos a hacer la parte superior de las ventanas. Puedes dejarlas cuadradas, pero tengo un arco en mente.
Aquí es lo que hice para obtener la forma de arco.
Toma esto como pasos múltiples; solo pensé que era conveniente demostrar el progreso de una fachada.
En una Nueva Capa, toma el círculo que es del mismo ancho que la ventana y pon un sesgo vertical (Edición > Transformación Libre) a 26.5°. Luego mantén solo el borde. Limpia las lineas para mejorar el progreso. Y finalmente haz tus propias ediciones al círculo; si puedes hacer que las lineas sean menos dentadas o más redondas, hazlo.
Una vez que tengas la versión final de la ventana, puedes aplicarlo al resto de las ventanas.
Paso 14
Vamos añadir la iluminación a las ventanas (y la puerta). La iluminación va como usual justo en la esquina, pero en los arcos puede ser un poco engañoso en la parte superior, donde la linea de iluminación tiene que ser de una manera hecho en un borde oscuro.
Aquí hay una pista de la parte superior que se desvanece—está cerca de ser negro, luego solo café oscuro y luego se desvanece. La iluminación se incrementa y se desvanece así como la misma área donde las lineas negras se desvanecen. Ellas corren de lado a lado en esa área pequeña. Añade un toque de una sombra más oscuro del color del ladrillo en el muro, un poco debajo de esa área.
Una vez hecho, aplica el resto de las ventanas.
Paso 15
Ahora vamos a dibujar la parte de abajo de las ventanas.
Es muy sencillo para la ventana; mantendremos el color del ladrillo, solo con una sombra más clara.
Para las ventanas largas he tratado de darle una inclinación ligera en la parte inferior del marco; las lineas son muy cortas pero van hacia arriba en una diagonal 1:1 y eso le da a las ventanas, pienso, una dimensión extra. Los colores permanecen crema (pero una sombra más clara) para igualar la base.
Paso 16
Un truco más para darle a la base una dimensión extra: se proyecta un poco en las esquinas. Alguna iluminación en la linea superior de la base ayuda a obtener ese volumen extra.
Paso 17
Así que vamos a trabajar en la puerta metálica. Moví las lineas un poco porque quería que la linea inferior fuera muy delgada. También bajé el contraste para las texturas de las lineas.
Paso 18
Prueba añadir una iluminación en la linea inferior—puede parecer un poco labial, que pienso que funciona para una puerta que se enrolla. De hecho, puede resaltar un poco en la esquina derecha donde el suelo, muro y puerta se juntan.
Finalmente, disminuye el contraste en las esquinas interiores donde las superficies se juntan.
Paso 19
En la puerta y en la ventana.
Casi me iba con una puerta amarilla clara ya que iba bien con el resto de los cores y hubiera añadido algo que resaltara. Pero al final la mantuve oscura, como chocolate oscuro ... pienso que esta hubiera sido una fábrica de chocolate.
La puerta es muy simple. Solo añadí un rectángulo interior, una luz poco sutil y tres píxeles metálicos para representar la cerradura.
Paso 20
Las ventanas, como usualmente las prefiero, obtienen un tono aqua-marino pero no tan brillante o muy saturado. Los marcos alrededor de las ventanas podrían haber sido un poco blanco, pero me decidí hacerlos al mismo color de la puerta, solo un poco más claros.
Paso 21
Pudo haber sido suerte, pero fui capaz de añadir carriles a las ventanas en un intervalo regular mientras miro las partes de abajo diferentes de las ventanas altas y de las cortas. Las ventanas están bien sea que tengan o no carriles.
Aquí es como las añadí, con el efecto de ventana usual (una sombra más oscura del color de la ventana que tenga forma de L, paralelo a los bordes lejanos de cada marco).
Paso 22
Aquí es como lucen luego de limpiarlas.
Paso 23
En cuanto a la textura de ladrillo, haremos eso con un enfoque diferente que en las lecciones anteriores.
Ya tenemos las lineas horizontales, así que podremos, en una Nueva Capa, dibujar las lineas verticales. Solo necesitaremos dibujar algunas de ellas y entonces podremos copiar (Alt-Empujar) sobre toda la superficie. Le dará estas lineas verticales una sombra un poco más oscura que las horizontales. En los puntos donde las lineas horizontales y verticales se juntan, la linea vertical prevalecerá, razón por la cual he dibujado las verticales sobre las horizontales.
Paso 24
Para aplicar la textura, ve a la capa con los muros café y selecciona el ladrillo y los colores de la linea del ladrillo con la Herramienta Varita Mágica. Luego vuelve a la capa con las lineas de textura, invierte la selección (Selección > Invertir) y presiona Suprimir.
Luego solo quita las lineas del interior de los bordes de las ventanas y dale a las lineas el deseado color café.
Es una textura simple pero efectiva. Antes de proceder, trataremos una alternativa rápida.
Paso 25
Aquí en una Nueva Capa añadí un color diferente (solo por el contraste) a los píxeles de la parte superior y de los bordes frontales de los ladrillos; así que cada ladrillo tiene una clase de L apuntando en la esquina que está más al frente.
De nuevo, solo necesitas dibujar algunas ladrillos y luego duplicar de nuevo y de nuevo has que hallas cubierto todas las superficies.
Paso 26
Luego solo convierte las lineas en las sombras más claras que el color del fondo del ladrillo y obtienes este efecto de ladrillo levantado.
Me gusta, pero no estoy convencido de ello; parece como que está desordenando el gráfico un poco mientras no se mira, en mi opinión, es mucho mejor que la versión que no tiene el efecto. Así que continuaré sin ella.
Pero fue una buena opción para probar o mantenerlo para uso futuro.
4. Añade Elementos Industriales
No estoy seguro de que tipo de fábrica es ... o puede ser verdad que sea algo relacionado al chocolate, pero al no estar seguro de qué maquinaria la fábrica usa, añadirás elementos para hacer que apariencia sea más industrial.
Paso 1
Aquí está la guía de posicionamiento (Nueva Capa) para los elementos que añadiremos.
El cuadrado más grande será el tanque de agua (¿o algún otro liquido?). Los más pequeños serán ventilación para el techo y los otros, no estoy seguro, pero se adecuan bien.
Paso 2
Ya he cubierto lo que es la ventilación en el tutorial para hacer un apartamento, pero aquí está de nuevo, un manera muy simple de hacerlo.
Para lograr una apariencia metálica, alteré el tono con el brillo, así que las sombras más brillantes se vuelven más cálidas, cerca al amarillo mientras las sombras más oscuras se vuelven más heladas.
Paso 3
Ahora haremos un cuadrado más grande en un tanque de agua.
Primero haremos el cilindro. La sombra debería ser negro aplicado a 10%-20% de Opacidad—tiendo a usar 15%. En el último paso aquí, hay un poco de ancho extra para el círculo superior del cilindro.
Paso 4
Ese ancho extra ayudará a darle una punta cónica que estas cosas parecen tener.
Dale un gris y algo de color oscuro para las piernas, o quizás el mismo gris para el resto del tanque.
Paso 5
Y aquí está las sombra. Sigue el mismo estilo de la sombra de las chimeneas, pero añadí más sombras porque esta es una forma más ancha y se mira un poco escaso con solo tres sombras.
La sombra de la parte superior debe tener formas de cuñas dirigidas a la parte superior del tanque.
Paso 6
Ahora en las cajas que puede ser o no ser unidades de aire acondicionado.
Las cajas son muy simples. Esto debe ser un poco metálico y que tenga algo de ventilación o algo para hacerla un poco menos simple.
Paso 7
Aquí las cajas son terminadas y las mangueras/cables tienen un poco de sombra para mostrar un poco más de volumen, iluminando los bordes que se adecuen mejor con el ambiente.
Paso 8
Ahora añadiremos otro tanque. Este será más pequeño, posicionado horizontalmente y tener una tubería que conecte con la fábrica.
Vamos a hacer el rectángulo en un cubo y eso en un cilindro dibujando los círculos en los bordes. Mantendremos esta forma elevada un poco en relación a la sombra.
Paso 9
Ahora aplicaremos colores metálicos y sombra cilíndrica.
La sombra café en la parte inferior se intensifica para ser una reflexión del suelo. No estoy seguro si se logró, pero lo mantuve.
Paso 10
Añadiremos un poco de sombra cónica en el círculo del frente y crea la tubería, que se parece más a una pajilla.
Paso 11
Le di a la tubería un color diferente de los tanques ya que es un material diferente. Incrementé la iluminación en el recodo de la tubería porque es donde pienso que brillará más, siendo metálico.
Finalmente, añade algo que lo sostenga y suaviza las lineas de las esquinas donde la superficie se juntan.
Paso 12
Aquí todos los elementos han sido colocados.
Paso 13
Puedes quitar las lineas guía.
Y para hacer que este trabajo en pixel mejor, tomemos la tubería del tanque pequeño y conectarlo a la base de la chimenea, fácilmente logrando algo de complejidad extra.
5. Haz el Humo
He dibujado un pixel de nubes/humo en un momento, pero he sentido necesario crear algo de humo para nuestra fábrica.
Este es un elemento (no como la ventana de vidrio) que muchos artistas de pixel probablemente harían diferentemente uno del otro.
De igual modo, aquí está mi enfoque.
Paso 1
Comienza haciendo algunos bocetos rígidos (en Nueva Capa) de la forma básica que quieres darle a las columnas de humo. Deben comenzar con el mismo ancho como en el interior de la columna pero luego extenderse ... así como se extienden también se diluyen y se desvanecen.
Este boceto no necesita ser lindo, pero dará una idea de lo que las formas terminadas parecerán y una guía para las formas y curvas que darás a tus columnas.
Las tres columnas de humo deben fluir similarmente, pero no queremos hacer una columna y repetirla dos veces, porque no se miraría bien; parecería holgazán.
Paso 2
Ahora hagamos nuestros bocetos en una columna de humo.
Decidí hacer las formas cuadradas, que me gusta, al ser un arte de pixel. Así que comienza a trazar sobre los bocetos (en una Nueva Capa) con lineas verticales y horizontales.
Luego redondea las esquinas. Tendría sentido hacer las esquinas redondeadas más anchas y más redondas a medida que la columna de humo suba, y que sea nítidas cuando estén cerca en la parte inferior.
Luego, para terminar el bordeado, haz algunas lineas que vayan hacia adentro de la forma como si el soplo del humo superpone con el resto de la columna.
Paso 3
Ahora vamos a ponernos un poco psicodélicos por un momento.
Queremos que el humo se diluya a medida que se levanta, y haremos eso bajando la opacidad gradualmente hacia la parte superior, pero trabajaremos en eso con diferentes opacidades usando colores claros.
De otro modo sería una molestia trabajar con el color final en diferentes opacidades (la Herramienta Varita Mágica no puede incluso separar las opacidades sin algo de retoque.)
Así que lo que decidí hacer fue tener cuatro sombras diferentes en cada columna. La primera, la usé justo derriba del escape de la chimenea y también funciona un poco de luz de la sombra para la columna. Las otras tres sombras se extienden un poco igualmente.
Le di a las área donde las sombras diferentes se unen un patrón de transición. También hice sombras diferentes para el borde, que, junto con el humo, debe desvanecerse a medida que la columna va hacia arriba.
Una vez que todo esté hecho, puedes comenzar a reemplazar los colores funky con los diferentes colores de opacidad del humo, que hice casi un color blanco, con un poco de tono amarillo.
Hice las opacidades desde la parte inferior a la parte superior: 80%, 60%, 40% y 20% en el relleno. Y los bordes más suaves (desde el inferior al superior): 20%, 10%, 5%.
Paso 4
Por supuesto, esto es hecho para todos los tres bosquejos, idealmente simultáneamente para que sean más consistentes.
Aquí está el proceso para las tres columnas.
Paso 5
Y aquí están aplicadas a la estructura—haciendo que la fábrica esté completa al 100%.
La Fábrica está Abierta y Funcionando. ¡Felicidades!
El trabajo ha dado frutos. La fábrica está operando, las columnas de humo se miran mejor y limpias para que no contaminen, y ahora vamos a equipar una ciudad con algunos elementos de industria, dando a tus personajes de art de pixel un lugar donde trabajar y darle a tu ciudad de pixel más variedad y vida.
¡Espero que esto halla sido productivo!
By
