Share
En este tutorial, aprenderá a usar una combinación del método SSR (Escala, Cizalla, Rotar) y las guías de Adobe Illustrator para hacer un robot isométrico. Las imágenes isométricas son perfectas para diagramas y sprites de juegos. Así que veamos cómo hacer este lindo robot isométrico ...
Abre un nuevo documento de Illustrator. El tamaño y la resolución del documento no son muy importantes, así que elija algo con lo que se sienta cómodo..
Antes de comenzar, es importante definir a qué nos referimos cuando decimos que dibujaremos un isometrico objeto.
La perspectiva isométrica es una forma de dibujar un objeto 3D en 2D. Se usa en dibujos técnicos, ciudades de dibujos animados y juegos en 2D que quieren verse en 3D. La perspectiva isométrica es preferible a la perspectiva normal porque todos los objetos tendrán el mismo tamaño, sin importar lo lejos que estén del espectador..
Comenzaremos por configurar una cuadrícula isométrica para que actúe como nuestras guías. Las técnicas que te mostraré en este artículo se basan en el Método SSR, que significa escala, cortar, girar. Además de este método, las guías de Illustrator serán útiles más adelante al alinear formas en perspectiva isométrica.
Cree las guías usando este Consejo rápido: Cómo crear una cuadrícula isométrica en menos de 2 minutos. A continuación, active las Guías inteligentes en Ver> Guías inteligentes.
Como actualización rápida del método SSR, crearemos la parte frontal, lateral y superior de un cubo. Comience dibujando un cuadrado con la herramienta Rectángulo (M) y manteniendo presionada la tecla Mayús mientras arrastra el mouse. Haga tres copias del cuadrado, que se convertirán en la parte superior y dos lados de un cubo isométrico.
Empezaremos por hacer la parte superior. Haga clic con el botón derecho en el cubo y seleccione Transformar> Escala e ingrese un valor de 86.062% en el campo No uniforme> Entrada vertical. A continuación, haga clic nuevamente con el botón derecho y seleccione Transformar> Corte, e ingrese un ángulo de corte de 30 grados. Para el paso final, haga clic con el botón derecho y seleccione Transformar> Girar, e ingrese un ángulo de -30 grados.
Alternativamente, puede usar la ventana Transformar con el mismo procedimiento: simplemente cambie la altura (denotada H) a 86.062%, luego la cizalla a 30 grados, y finalmente la rotación a -30 grados. Ambos métodos producirán los mismos resultados..
Para hacer los lados izquierdo y derecho del cubo podemos seguir el mismo procedimiento, con diferentes ángulos de cizalla y rotación. Estos valores se resumen en la imagen de abajo..
Con estas técnicas bajo nuestro cinturón, podemos pasar a hacer nuestro personaje robot. El robot que haré en este tutorial es el personaje principal de un juego isométrico en el que he estado trabajando, Robotok.io.
Comience activando la cuadrícula 2D normal haciendo clic en Ver> Mostrar cuadrícula (Ctrl + "). Dado que el robot es bastante rectangular, podemos usar la herramienta Rectángulo (M) para completar las funciones principales. La herramienta Pluma (P) y la Herramienta de selección directa (A) también son útiles y nos permiten darle un poco de carácter al robot.
Usando la parte frontal del robot como referencia, podemos dibujar el lado del robot. Aquí he usado la herramienta Segmento de líneas (\) para poner algunas líneas azules detrás de la imagen para ayudar a alinear las secciones del cuerpo del robot. Puede mover las líneas hacia arriba y hacia abajo a cualquier parte del dibujo en el que esté trabajando actualmente. Tener las partes alineadas correctamente facilitará los pasos posteriores, cuando usamos estas vistas para hacer que el robot sea isométrico.
Haga una copia de la vista lateral y cambie el color del trazo a gris. Ahora podemos dibujar los brazos en la parte superior de la vista lateral, lo que hace que sea más fácil ver nuestras nuevas líneas. También podemos ajustar la ubicación de nuestras líneas horizontales azules para ayudarnos a alinear la vista lateral del brazo con el frente.
El robot también necesita una mochila para guardar todas sus cosas, así que dibujemos eso en la vista lateral usando el mismo método..
Finalmente, dibuje la parte posterior del robot utilizando la parte frontal y lateral como referencia. Aquí he usado líneas más claras en la parte posterior de la cabeza para ayudar a que estas líneas se destaquen de las demás, ya que muestran el volumen de la cabeza..
Ahora que tenemos los planos en su lugar, podemos comenzar a construir el robot 3D utilizando nuestro método isométrico SSR y las guías que hicimos anteriormente. Comencemos trabajando solo con la cabeza y el cuerpo (por ahora, deje los brazos y la mochila fuera) del robot para construir una vista frontal isométrica.
Haga una copia de la parte frontal del robot, retire los brazos y SSR para que quede en el lado izquierdo (Escala: 86.062%, Corte: -30, Rotar: -30). Repita el proceso SSR con la parte posterior del robot, asegurándose de retirar los brazos.
Ahora haremos lo mismo con el lado del robot (sin brazo), pero lo transformaremos en el lado derecho (Escala: 86.062%, Corte: 30, Rotar: 30). Haga una copia que podamos usar para el otro lado del robot..
Para colocar los dos lados del robot, seleccione todo el lado del robot con la Herramienta de selección (V) y luego cambie a la Herramienta de selección directa (A).
Arrastre el punto de anclaje superior izquierdo para superponerlo con la esquina correspondiente en la vista frontal. Cuando la guía inteligente dice ancla (en texto cian), suelta el botón del ratón.
Haz lo mismo con el otro lado del robot. Una vez que se haya colocado el lado más alejado del robot, manténgalo seleccionado y presione Ctrl + Shift + [para mover esas formas detrás de las otras.
Alinear la parte posterior de la cabeza del robot es un poco más complicado. En este punto, debemos desactivar la cuadrícula (Ctrl + ") y activar nuestras guías isométricas (Ctrl +;). Seleccionar todo el robot (V) y cambiar a la Herramienta de selección directa (A). Seleccionar uno de los puntos en en la parte superior frontal de la cabeza del robot, y arrástrela para que encaje con la guía. Podemos usar esta línea de guía para alinear la parte posterior del robot con la parte frontal.
Seleccione la parte posterior (V) y cambie a la Herramienta de selección directa (A). Arrastre el robot desde un punto en la parte superior de su cabeza hasta la misma línea con la que alineamos el frente. Ahora arrástrelo a lo largo de esta línea hasta que el contorno posterior se alinee con los lados de la cabeza del robot.
Ahora podemos seleccionar los puntos de la parte posterior de la cabeza en la vista lateral (ver imagen) con la Herramienta de selección directa (A), usando la tecla Mayús presionada para obtener los dos puntos a la vez. Arrastre estos puntos para que coincidan con la parte posterior de la cabeza (nuevamente, espere hasta que la palabra ancla aparece en texto cian antes de soltar). Una vez que estos puntos están en su lugar, ya no necesitamos la parte posterior del robot y podemos eliminarlos seleccionando todas las formas con la Herramienta de selección (V) y presionando Eliminar.
Para rematar la forma de la cabeza, podemos usar la herramienta Pluma (P) para dibujar en la parte superior. Haga clic en cada uno de los 4 puntos que forman la parte superior de la cabeza del robot, cada vez que espera la palabra ancla a aparecer. Finalmente, conecte el último borde. Presione Ctrl + [varias veces para mover esta nueva forma hacia atrás hasta que pueda ver todas las formas de la antena. Si vas demasiado lejos, usa Ctrl +] para volver a avanzar.
La antena del robot está compuesta por dos piezas: un cono y una esfera..
Para hacer un cono isométrico, comenzamos con dos círculos superpuestos (paso a), con uno más grande que el otro, y los colocamos en SSR para que sean planos como la parte superior de un cubo (paso b). Manteniendo Shift, mueva el círculo más pequeño hacia arriba verticalmente hasta que la forma sea la altura que desea (paso c). Con la herramienta Agregar punto de anclaje (+), agregue puntos a los lados del círculo inferior como se muestra (paso d). Luego use la Herramienta de selección directa (A) para seleccionar los puntos internos de ambos círculos y eliminarlos con la tecla Eliminar (paso e). Vuelva a cambiar a la herramienta Pluma (P) y conecte los puntos restantes (paso f) para hacer su cono (paso g).
A continuación podemos realizar la esfera isométrica para la parte superior de la antena. Dibuja un círculo, y eso es todo! Una esfera isométrica es simplemente un círculo regular (paso h). Coloca la antena encima de la cabeza del robot..
A continuación, podemos colocar el cuerpo del robot utilizando las mismas técnicas que usamos para hacer la cabeza. Elimine las formas del cuello (ya que no podemos ver el cuello desde esta vista) y el lado lejano del cuerpo que ya no es visible. Esto ayudará a limpiar nuestra visión del robot..
Use la Herramienta de selección (V) para seleccionar el lado cercano del robot (patas y cuerpo). Cambie a la Herramienta de selección directa (A) y arrastre el lado del cuerpo por una esquina para alinearse con la esquina correspondiente en la parte frontal.
Ahora haga una Copia del lado (Ctrl + C, Ctrl + V) y arrastre esa copia al lado lejano del robot usando el mismo método para alinear los puntos (vea el lado izquierdo de la imagen).
Para dibujar en la parte superior del cuerpo, cambie a la Vista del esquema usando Ctrl + Y y use la herramienta Pluma (P) para conectar los cuatro puntos en la parte superior del cuerpo (de la misma manera que hicimos la parte superior de la cabeza). Cambia la vista de nuevo presionando Ctrl + Y de nuevo.
Ahora vamos a centrarnos en las piernas. La vista lateral de la pierna ya está en su lugar, por lo que podemos usarla como una guía para el lado frontal. Use la Herramienta de selección directa (A) para seleccionar puntos en pares, podemos mover las formas para alinearlas con los lados. Use la tecla Mayús y haga clic para seleccionar dos puntos a la vez y arrástrelos para alinearlos con el lado de la pierna. Las guías inteligentes te ayudarán a alinear los puntos exactamente..
Cuando hayas terminado una pierna, usa la herramienta de selección (V) para seleccionar todas las formas y hacer una copia (Ctrl + C, Ctrl + V). Coloque la nueva copia como la otra pata en el robot. Ahora presione Ctrl + Shift + [para mover esta pierna a la capa más baja, de modo que quede detrás del cuerpo del robot. Eliminar las formas no utilizadas para limpiar la imagen..
En este punto, el cuerpo del robot debería estar completo, y podemos pasar a los brazos.
Primero, haga una copia del robot y agrupe la cabeza y el cuerpo por separado. Cambia el color del trazo a gris. Aísle las diversas formas de los brazos y SSR en las vistas frontal y lateral.
El brazo se compone de cuatro partes: el hombro, la parte superior del brazo, el antebrazo y la garra..
Comenzaremos trabajando en el antebrazo, ya que es el más sencillo de manipular. Alinee las formas frontales y laterales de los brazos hacia arriba con el cuerpo gris y entre sí. Ajuste los puntos en el lado del antebrazo para alinearse con el frente, asegurándose de seleccionar los puntos en pares para mantener la perspectiva.
Use la herramienta Pluma (P) para completar el resto del antebrazo. Para este paso, es útil hacer copias de formas para usarlas como guías (como hicimos con la cabeza y el cuerpo).
La parte difícil de los brazos es el cilindro que conecta el hombro al antebrazo del robot. Para hacer esta forma, comenzaremos dibujando un círculo y haciendo una copia de ella (Ctrl + C, Ctrl + V). Ahora SSR un círculo para ajustarse al lado del robot, y SSR el otro para encajar en la parte superior del antebrazo. Coloque estos círculos en el hombro y la parte superior del antebrazo como se muestra..
Use la herramienta Pluma (P) para hacer una nueva forma que parezca que conectaría los dos círculos (como se muestra). Seleccione los dos círculos y la forma que los conecta con la Herramienta de selección (V) y haga clic en Pathfinder> Agregar a área de forma, luego Expandir para fusionarlos en una forma.
Use Ctrl + [y Ctrl +] para colocar correctamente esta forma detrás de la cresta en el antebrazo.
Para hacer el cilindro hueco para el hombro es necesario dividirlo en dos partes: la parte delante del brazo y la parte detrás.
Comience haciendo una copia del círculo del hombro en el lado del cuerpo del robot (Ctrl + C, Ctrl + F). Usando las guías (presione Ctrl +; para activarlas), arrastre un poco el segundo círculo hacia afuera para darle cierta profundidad al cilindro del hombro (vea el diagrama a continuación).
Use la herramienta Agregar punto de anclaje (+) para agregar puntos en los bordes de los dos círculos (vea el diagrama, agregue puntos en los círculos rojos). Ahora haz una copia de las formas. Una copia de se usará para hacer la parte delantera del hombro, y la otra para hacer la parte posterior.
Use la Herramienta de selección directa (A) para eliminar los puntos innecesarios en ambas copias y terminar con dos líneas en cada caso. Utilice la herramienta Pluma (P) para volver a conectar los puntos. Vuelva a colocar las piezas juntas, y ahí lo tienen: un frente y una parte posterior para su hombro.
Ahora podemos hacer la garra del robot usando una técnica similar a la forma en que hicimos el hombro..
Tome las formas de garra SSR'd y alinéelos con las guías. Al alinear formas, simplemente elija cualquier punto en una forma, alinéelo con una línea de guía y luego asegúrese de colocar el punto correspondiente en el segundo objeto en el mismo lugar. Aquí, he elegido la esquina superior izquierda del cuadrado de cada garra como punto de referencia y, como puede ver, ambos están posicionados en la misma línea guía..
Haga una copia de la parte frontal de la garra y use el lado como referencia de ancho (como se muestra a continuación) para colocar esta copia como la parte posterior del objeto..
Una vez que hemos utilizado la vista lateral de la garra para determinar el ancho, la forma ya no es necesaria y podemos eliminarla.
Comenzaremos a rellenar la garra haciendo la forma verde en el objeto de abajo. Haga una copia de las dos mitades de la garra y elimine todos los puntos que no formarán parte del lado de la garra con la Herramienta de selección directa (A) y la tecla Eliminar. A continuación, utilice la herramienta Pluma (P) para conectar las dos mitades. Ahora podemos colocar el lado de la garra en nuestro objeto..
Usando la misma técnica podemos rellenar el interior de la garra (púrpura) y, para completar, también podemos hacer el borde inferior (azul).
Con el brazo delantero listo, podemos usar los mismos métodos para construir el otro brazo del robot.
La mayoría de este brazo se puede copiar directamente desde el primer brazo y se puede ajustar mediante la herramienta de selección directa. La mano del robot, por ejemplo, es completamente idéntica, por lo que no necesitamos volver a dibujarla. Recuerde que los objetos isométricos son del mismo tamaño, sin importar qué tan lejos estén del espectador, a diferencia de la verdadera perspectiva, por lo que la garra del brazo lejano será del mismo tamaño que la de cerca..
Lo último que vamos a agregar al robot es su mochila. Me gusta hacer una copia de todo, agrupar cada brazo de forma independiente (Ctrl + G) y ajustar el color del trazo para que sea más claro. De esa manera podemos mantener cada parte del cuerpo separada para futuras ediciones (como hacer una vista posterior, o si quisiéramos animar al robot) y te ayuda a ver en qué estás trabajando ahora mismo..
Use el método SSR en la vista lateral de la mochila que dibujamos anteriormente y luego colóquela en el lado del robot. Dado que la mochila es curva, no necesita mucho trabajo para que encaje en la perspectiva isométrica. Si no se ve bien, use la herramienta de selección directa (A) para ajustar los puntos individuales.
Use la herramienta Pluma (P) para dibujar el frente de la correa sobre el hombro del robot.
Aquí me he movido la cabeza y el brazo delantero para que podamos ver fácilmente dónde va a ir la mochila. Una vez dibujada la mochila, podemos volver a añadir estas formas..
¡Y ahí está él! Para unificarlo un poco, seleccione todo el robot y cambie el ancho del trazo a un valor. En este caso, elegí 1 punto, pero esto depende de qué tan grande ha dibujado su sprite.
Este robot ya está listo para algunos colores.!
El primer paso es cambiar el color del trazo a algo menos áspero que negro. Aquí he elegido el gris oscuro, pero dependiendo de tu sprite es posible que desees mezclar un poco de color.
A continuación podemos rellenar algunos colores base. Use la Herramienta de selección (V) para seleccionar todo el robot (excepto los ojos) y cambie el color de relleno a gris.
Seleccione los ojos, la boca, el botón y la pantalla y cámbielos para que tengan un color de relleno blanco. Colorea la mochila naranja, y haz el botón rojo..
El siguiente paso es elegir una dirección para la fuente de luz. Decidí hacerlo desde la izquierda, así que de frente al robot..
El sombreado de aquí en adelante puede ser tan detallado o simple como desee. He optado por mantener el sombreado relativamente simple e ignorar el hecho de que algunos objetos pueden proyectar sombras sobre otros. Esto hará que sea más fácil usar el sprite en animaciones más tarde..
Comience seleccionando todas las formas que estarán en la sombra y cambiando su color de relleno a un gris más oscuro. A continuación, seleccione todas las formas que estarán directamente en la luz y rellénelas con un gris más claro. Para las formas planas, esto es fácil, pero las sombras en superficies curvas requerirán más trabajo.
Para ilustrar cómo podemos sombrear las superficies curvas, considere el cuerpo de la mochila.
Copie esta forma y péguela en el frente usando Ctrl + C, Ctrl + F. Ahora deshágase del trazo y establezca el color de relleno en naranja oscuro..
Ahora podemos usar la herramienta Eliminar punto de ancla (-) para recortar esta forma, y luego la Herramienta de selección directa (A) para ajustarla en la forma de una sombra. Para arreglar el golpe, hacemos otra copia del cuerpo de la mochila y la pegamos en el frente. Elimine el relleno de esta nueva forma y muévalo hacia adelante (Ctrl +]) para colocarlo delante de la forma de sombra.
Utilice este método para crear sombras para el resto de la mochila, así como para las otras superficies curvas, como los cilindros en los brazos y la antena..
Para darle al robot un poco más de carácter, podemos agregar algunos puntos destacados a sus articulaciones y pies..
Aquí he hecho las muñecas y los pies de un gris más oscuro, y los codos y los pies más claros. También he hecho los ojos un poco más oscuros para resaltarlos. Tenga en cuenta la fuente de luz cuando agregue más colores, ya que necesita mantener el sombreado constante.
Para hacer que el robot se destaque un poco más, podemos darle un contorno ligeramente más grueso..
Seleccione todo el robot, Copiar y Pegar al frente (Ctrl + C, Ctrl + F). Haga clic en Pathfinder> Agregar al área de forma, luego en Expandir para obtener una única forma combinada. Cambia el color de relleno a blanco para que podamos claramente la nueva forma..
Es probable que esta forma sea un poco desordenada (debido al hecho de que algunas formas no están perfectamente alineadas), por lo que podemos usar la herramienta Eliminar punto de ancla (-) para limpiarla un poco eliminando los puntos feos. Concéntrese en asegurarse de que los bordes más externos sean lisos, ya que eso será todo lo que podamos ver cuando hayamos terminado.
Ahora use la ventana Trazo para cambiar el tipo de esquina para que sea la opción central, "Redondear unión". Esto hará que las esquinas sean suaves. Aumenta el ancho de trazo de esta forma a 3 puntos.
Seleccione la forma de contorno y presione Ctrl + Mayús + [para enviar esta forma al fondo.
Aquí hay una imagen de los dos robots uno al lado del otro: uno con el contorno y el otro sin. El contorno unifica la forma del robot y lo ayudará a destacar sobre un fondo más complejo.
Vamos a darle algo al robot para que se pare. Dado que se utilizará en un tablero de juego isométrico, una ficha de juego parece una buena opción. Haz un cuadrado y luego SSR para que quede plano como la parte superior de un cubo. Coloca la baldosa debajo del robot usando Ctrl + Mayús + [para moverlo hacia la parte posterior.
En el último paso le daremos al robot una sombra simple. Haz un círculo, y SSR para que sea plano como el azulejo. Cambie el color de relleno a gris oscuro y luego establezca su Opacidad en aproximadamente el 15%. Coloque la sombra debajo de todo, excepto el mosaico (Ctrl + Shift + [, luego Ctrl +] para subir un nivel).
Y ahí lo tenemos: un adorable robot isométrico. Utilice estas técnicas para hacer sprites isométricos para juegos, diagramas técnicos o para agregar un toque 3D a sus diseños..
Accentsconagua