Spanish (Español) translation by Cristian Marroquin (you can also view the original English article)
En este tutorial aprenderás a cómo crear un carro de píxel isométrico. Ten tu personaje listo; va para un viaje.
Vamos a crear un sedán relativamente genérico. No será muy complejo, lo cual es ideal para reciclar muchas veces en la misma ilustración (¡útil si estas creando una escena de ciudad!). Pero incluso aunque será genérico, no lastimará ver algunas imágenes de referencia; quizás hay elementos de diseño simples de modelos de carros reales que puedes incorporar en tu gráfico de carro.
Asegúrate de que hallas leído el tutorial de personaje de píxel isométrico; cubre lo básico para el estilo de ilustración, y vamos a usar el personaje creado en esta lección como una clase de vara de medir para el carro.
1. Volúmenes
Vamos a comenzar con las formas principales del carro, más que todo rectángulos de primero y luego algunas formas interesantes.
Paso 1
Vamos a crear un carro de tamaño común. Así que debe ser más ancho que dos de nuestros personajes, por supuesto, ya que al menos dos pueden sentarse lado a lado en él, y la longitud debe ser cerca el doble del ancho. Así que vamos a crear un rectángulo para representar la huella.
Paso 2
Las esquinas no serás rectas ni puntiagudas, así que vamos a redondearlas un poco.
Paso 3
Selecciona y copia el rectángulo redondeado y luego rellena con negro.
Disminuye la opacidad en esta capa a 20%.
Consejo: puedes cambiar el porcentaje de la opacidad presionando los números en tu teclado mientras la Herramienta Mover está activa. Presionando 2 iguala a 20% de opacidad.
Paso 4
Una vez que hallas disminuido la opacidad del relleno del rectángulo, pega el rectángulo original justo sobre él, déjalo en una nueva capa, y muévelo 4 px arriba. Tenemos la sombra de nuestro carro lista; recuerda actualizarla si en cualquier pinto puedes cambiar las dimensiones del carro.
Paso 5
Ahora duplica las líneas inferiores del cuerpo del carro y pon la copia 10 px más alta (recuerda que puedes hacer esto seleccionándolo, luego presionando Alt-Mayus-Arriba) o ajusta esta altura a medida que se ajuste; mantén tu personaje alrededor en otra capa para que puedas comparar el tamaño cuando sea que quieras.
Paso 6
Vamos a unir estos dos rectángulos y borrar las líneas de fondo hasta que obtengamos esta clase de ladrillo volador.
Paso 7
Le daremos al carro un parachoques trasero que se proyecte hacia afuera un poco, seleccionando las dos esquinas superiores y moviéndolas un píxel abajo (y dos a través).
Paso 8
Ahora vamos añadir un rectángulo a donde quisieras que las ventanas y el parabrisas se comiencen a proyectar.
Paso 9
Dibuja una línea diagonal (1:1) desde la esquina más izquierda de este nuevo rectángulo, y duplícala para que dos diagonales paralelas se proyecten fuera de la forma de ladrillo. Estas líneas se juntarán en la punta con una línea nueva de 2:1, que será el techo del carro.
El
techo no debe ser un poco más alto que las líneas superiores anteriores (y debe
preferiblemente ser un número par de píxeles más alto, si quieres ser obsesivo
con los detalles).
Paso 10
Ahora para en la esquina del frente del nuevo rectángulo necesitaremos otro par de líneas para definir el parabrisas. Sin embargo, no serán diagonales como las primeras líneas diagonales porque los parabrisas casi siempre se van haciendo angostos a medida que van para arriba, así que serán líneas 1:2.
Paso 11
Vamos a unir estas líneas del parabrisas para obtener los esquemas completos para el parabrisas frontal. Borra los píxeles restantes dentro de estas líneas.
Paso 12
Ahora necesitamos otra línea 2:1 para el esquema superior de la ventana.
Vamos a deshacernos de los píxeles desordenados:
Y crea una línea bonita para unir la parte superior e inferior de la ventana en la parte de atrás del carro; yo escogí esquinas redondeadas para crearlas:
Paso 13
Termina la barra superior del carro añadiendo un esquema trasero (con una esquina redondeada) y una línea vertical en la ventana para separar el frente y la parte de atrás.
2. Llantas
Ahora hemos llegado a un nuevo elemento: un círculo.
Es relativamente fácil darle vuelta a la vista frontal de un elemento plano en una vista isométrica poniendo el sesgado a 26.5°.
Haciendo eso resultaría en esto:
Primero, tienes el círculo frontal; luego, lo tienes con el sesgado de 26.5°; y finalmente pules las líneas de bits irregulares.
Pero haremos nuestras llantas de manera diferente para tener más control sobre la estética y menos irregularidades, y terminar con las llantas con apariencia redonda.
Paso 1
Vamos a usar el personaje para poner un poco de altura. La línea inferior aquí es el nivel del suelo, la línea media es la línea inferior del cuerpo del carro, y la línea superior será la parte superior de la llanta. Luego de las personas, las llantas usualmente van hacia un nivel medio de los muslos, así que estas serán un poco grandes, pero está bien.
Paso 2
Ahora vamos a añadir dos líneas verticales para obtener un cuadrado. Borra el resto de los píxeles (está bien mantener los bits de la línea media para crear el posicionamiento más fácilmente luego).
Este cuadrado serán las fronteras de nuestro círculo. Está bien si se mira un poco más alto que ancho. Las dos líneas verticales aquí están 7 px aparte.
Paso 3
Aquí en rojo está el círculo que estaré usando; se mantiene en líneas rectas para que se mire bien, pero lo suficientemente redonda.
En negro está el círculo terminado, con los píxeles guía borrados.
Paso 4
Es tiempo de añadir las llantas a nuestro carro. Aquí está mi lugar sugerido.
Pero siéntete libre de probar algunos diferentes lugares.
Es útil mover estos elementos alrededor con las teclas de flecha mientras se está en una capa diferente, para encontrar donde pienses que se mirarán mejor. Una vez que estés en el punto justo, puedes combinarlas.
3. Detalles y Colores
Hemos obtenido muchas de las líneas principales terminadas, así que es tiempo de comenzar a rellenar en todas las áreas blancas con detalles y colores.
Paso 1
Vamos a terminar las llantas. La goma de la llanta debe ser más gruesa, así que vamos a añadir una fila extra de píxeles alrededor den interior del círculo, como esto:
No hay necesidad de hacerlo en ambas llantas; trabajaremos en una hasta que terminemos y la copiaremos.
Paso 2
Rellena el círculo interior blanco con gris o cualquier color que quieras para los rines.
Aquí hay un poco de detalle en el trabajo en gris más oscura añadido al rin. Estamos trabajando en detalles tan pequeños que es importante estar constantemente revisando la apariencia cuando se da zoom; si no se "lee" organizadamente, entonces debes simplificar.
Paso 3
Usualmente el suavizado debe ser evitado en el arte píxel isométrico, pero pienso que en tan pequeñas excepciones de escala puede ser hecho. En este caso, el suavizado ayuda a hacer que los píxeles en el medio del rim se vean como un círculo concéntrico. Eso es lo mucho que se puede agregar de detalle a un elemento tan pequeño.
Paso 4
Para terminar la llanta he añadido un píxel extra de suavizado para hacer el rim se mire menos irregular, y también he añadido un par de píxeles como iluminación para la goma de la llanta.
La llanta está terminada, así que ahora puede ser aplicada al otro círculo:
Paso 5
Para hacer las ventanas, puedes probar añadir iluminación y reflexiones o probar mostrar más detalles del interior. Puede haber muchas maneras de hacerlo. El estilo que uso, pienso que logra el efecto de la ventana sin mucho trabajo.
Rellena las áreas de la ventana con un agua marina oscuro o azul.
Debe ser más ligero que el color del contorno, pero no por mucho.
Paso 6
Ahora vamos añadir detalles más claros con una sombra más clara de azul/agua marina, como si la luz golpeara cualquier cosa que está cerca del vidrio (el panel, el timón y los bordes de la puerta), dejando el resto en oscuridad. No hay necesidad de preocuparse de mucho detalle aquí.
Está hecho para que parezcan que las ventanas están polarizadas.
Paso 7
¡Vamos añadir el color del carro!
Aquí hay una elección audaz.
Añade una sombra más oscura en el área inferior. Un 15% menos de brillo debe funcionar.
Paso 8
Usaremos solamente la parte frontal de la línea que va a través del medio del carro. Selecciónalo y cópialo muchas veces debajo; crearemos los faroles, y otros detalles con estos píxeles.
Pero la línea de lado no la necesitaremos realmente, así que bórrala.
Paso 9
Rellena los píxeles entre estas líneas nuevas con blanco o algo de color iluminado que se destaque en los faroles.
Paso 10
Ahora añadiremos la parrilla, cortando a través del medio del área blanca que hemos hecho. La parrilla será un gris oscuro, solo un poco más claro que el color de contorno.
Los faroles del lado izquierdo es solo un píxel ancho porque se asume que va a la redonda de la esquina del carro, lo cual es muy correcto, geométricamente hablando.
Paso 11
Ahora la línea inferior hará la neblina de luz y la placa de la licencia. Ve y borra los píxeles negros y blancos innecesarios.
Paso 12
Para terminar estos detalles vamos a disminuir el contraste en las líneas alrededor de los píxeles blancos, haciéndolos una sombra negra del color del carro, pero un poco más brillantes del color de contorno.
Paso 13
Ahora que mucha de la "cara" del carro está terminada, es una buena oportunidad de suavizar algunas esquinas, a media que nos acercamos a la apariencia final.
Aquí he suavizado la esquina sobre la luz izquierda y la esquina derecha sobre el maletero, así como la esquina inferior del parachoques trasero. Pienso que estos cambios hacen que el carro parezca más deportivo.
Paso 14
Añade iluminación donde pienses que sea necesario (imágenes de referencia pueden ayudar).
Pienso que las luces a la par de los bordes ayudan a transmitir una apariencia metálica, así que las apliqué a muchos de los bordes.
Paso 15
Y aquí estoy añadiendo una nueva sobra más clara en algunas áreas seleccionadas que quiero que resaltan un poco.
Recuerda que puedes hacer una sombra más clara reduciendo su saturación. Útil en caso de que tengas 100% de brillo, pero la sombra no tenga luz suficiente.
Un área de luz grande sobre el capó pienso que ayuda a traer el volumen del carro y lo hace verse metálico.
Las luces necesitadas irán en el borde del techo y alrededor de las ventanas.
Paso 16
Ahora vamos a añadir un par de mangos para la puerta. Simplemente serán dos píxeles más claros sobre dos píxeles más oscuros.
Similarmente, puedes añadir el parachoques de la puerta del carro:
Paso 17
Detalles opcionales menores: disminuye el contraste para la parte de atrás del techo.
Paso 18
Vamos añadir algunos retrovisores.
Serán como esto:
Con uno de ellos viéndose ancho y el otro delgado ya que es como se vea solo el borde.
Encuentra un buen punto para colocarlos.
Borra cualquier píxel innecesario y limpia el contraste alto innecesario.
Paso 19
¡Y eso es lo mucho que se puede hacer para tu carro!
¿Cómo se mira a la par de tu personaje? ¿Preferirías hacer más ancho, más largo o más pequeño? Estos cambios no son difíciles de hacer. Pero pienso que este tamaño es bueno.
4. Variaciones
Es muy fácil de crear versiones de colores diferentes de tu carro. Puedes ir a Imagen > Ajustes > Tono/Saturación... para encontrar fácilmente otros colores que te pueden gustar. Aplica los cambios solo a las áreas apropiadas y edita los colores individualmente si es necesario.
Pronto, tendrás un grupo, listo para que ocupen las calles de la ciudad de arte de píxel.
¡Tú Vehículo ha sido Terminado!
Espero que estés feliz con tu(s) carro(s).
No sería muy difícil convertir ese sedan en un SUV o un carro compacto. Añade algunas líneas o accesorios, y tu inventario podría crecer.
Revisa el tutorial de la casa si quieres más de arte de píxel.
Espero que haya sido útil y no muy complicado.
