Cómo hacer ruedas de patín realistas en Illustrator

Usando la herramienta 3D Revolve de Illustrator, crearemos un conjunto de ruedas de monopatín realistas y mapearemos nuestras propias ilustraciones en la rueda. Cubriremos técnicas avanzadas, como usar la herramienta de revolución, preparar la obra de arte, mapearla a las superficies 3D y algunos trucos geniales para agregar los toques finales..

Vista previa de la imagen final

A continuación se muestra el diseño final en el que trabajaremos.. 

Paso 1

Antes de comenzar, debo recordarle que Adobe Illustrator no fue diseñado para ser utilizado como un motor de renderizado 3D como Maya, Cinema 4D, 3DS o cualquiera de esos otros programas 3D. Es por eso que el primer paso de este tutorial es liberar algo de RAM en su máquina. Así que cierre esas aplicaciones y programas innecesarios que se están ejecutando para ayudar a Illustrator a concentrarse en presentar apariencias en lugar de luchar por la memoria. Y como siempre, guardar a menudo..

Paso 2

Comencemos abriendo Illustrator y creando un nuevo documento; establezca las unidades en 400 píxeles de ancho por 600 píxeles de alto (sugiero mantener este como un documento pequeño para conservar la memoria). Debajo del botón Avanzado, establezca el modo de color en RGB y configure los Efectos de trama a 300 píxeles por pulgada. El uso de esta alta resolución es parte de lo que ocupa mucha memoria, pero me gusta ver los efectos con el mejor detalle. Podría establecerlo más bajo si no tiene una computadora poderosa, pero tenga en cuenta que los gradientes y otros gráficos pueden parecer un poco gruesos. Haga clic en Aceptar para empezar a rodar..

Paso 3

Me gusta configurar todos mis paneles antes de comenzar para que no tenga que seguir yendo al menú Ventana y abrirlos manualmente. Aquí hay una captura de pantalla de los paneles más utilizados para este tutorial. Adelante, colócalas en un lugar conveniente..

Vamos a utilizar una cuadrícula para dibujar la rueda: la simetría perfecta es muy importante cuando se utiliza la revolución en 3D y el mapeo a la superficie. Vaya a Edición> Preferencias> Guías y cuadrícula, y elija la configuración como se muestra (cambié el color de la cuadrícula también a algo más claro). Haga clic en Aceptar y, si no puede ver la cuadrícula, use Comando + "para activarlo. También queremos activar la función Ajustar a la cuadrícula, así que presione Comando + Mayús +". También puede acceder a la cuadrícula y ajustar en el menú Ver. Esto es lo que usarás para la primera capa (lo llamé "Formas y representación").

Etapa 4

Para crear la rueda, vamos a utilizar el método del torno, algo así como cortar un bate de béisbol al girar un bloque de madera. El contorno de la rueda es como las instrucciones de tallado y la herramienta 3D Revolve actuará como el torno para hacerla girar.

Así que encienda sus reglas (Comando + R) y arrastre una guía desde el lado hasta una de las líneas de la cuadrícula en su mesa de trabajo. Seleccione la herramienta Pluma (P) y comience a trazar sus puntos como se muestra (Vaya a Edición> Preferencias> Selección de pantalla de anclaje y use la configuración que se muestra para ayudarlo a ver los puntos de anclaje). Debido a que estos se convertirán en superficies 3D, cuantos menos puntos utilice, mejor.

Cuando crees la mitad superior de la ruta, cópiala y pégala (o Alt + arrastra la ruta y verás un icono de doble flecha para que sepas que está copiando), voltéala a lo largo del eje horizontal y alinéala con el otro camino Auméntelo un poco (dos flechas Mayús + Arriba) para que se superpongan, luego seleccione los dos puntos medios en el lado derecho con la herramienta Selección directa (A) y presione Comando + J para unir los dos caminos. Una vez que se unen, puede desactivar la función Ajustar a la cuadrícula y, a continuación, volver a capturar esos dos puntos, seleccionar la herramienta Eliminar punto de ancla (-) y eliminarlos..

Luego puede usar la herramienta Convertir punto de ancla (Mayús + C) para agregar un poco de curvatura al borde derecho de nuestra rueda y en cualquier otro lugar. Consulte la captura de pantalla para conocer la posición correcta del punto de anclaje al crear la trayectoria de la rueda. ¡Recuerda que la simetría es clave! Cuando haya terminado de crear la ruta, puede desactivar la cuadrícula (Comando + "), las guías (Comando +;) y ajustar (Comando + Mayús +").

Paso 5

Vea la captura de pantalla para ver cómo se convertirá en 3D Revolve la ruta que acaba de crear. Probé muchos caminos y encontré que este es el mejor para mapear. Puede ver que las curvas alrededor de los bordes superior e inferior le dan un efecto de iluminación más realista, en lugar de las ruedas superiores planas. Una diferencia notable es que las ruedas superiores planas tienen una gran superficie frontal para mapear. En las ruedas que creamos, la superficie frontal se divide en dos anillos, lo que nos da un núcleo interno y externo.

Paso 6

Es hora de convertir ese camino en una rueda. Seleccione la trayectoria de la rueda, cambie el color del trazo a gris claro (o el color que desee que sea la rueda), presione la tecla Alt y arrástrela para copiarlo y vaya a Efectos> 3D> Revolución. Asegúrese de conservar su ruta original en caso de que quiera volver y volver a dibujarla.

Vamos a crear una rueda sentada sobre otra rueda. Para comenzar, cree la rueda superior y aplique la configuración como se muestra en la captura de pantalla (luego, escalé la rueda superior a 57.5px de ancho en el panel de transformación). Luego, con una copia de la ruta original, cree la rueda inferior con la configuración que se muestra (escala de hasta 60px de ancho).

Utilicé el sombreado / iluminación por defecto para las ruedas. El sombreado plástico predeterminado funciona bien para imitar el uretano sin ningún ajuste, pero también puedes jugar con la fuente de luz. Solo recuerda mantener la iluminación constante para todas las ruedas..

Paso 7

Ahora que tiene las dos ruedas principales, es hora de diseñar los gráficos que se asignarán a las ruedas. Para mantenerlo organizado, lo configuraremos en una capa diferente (etiquetaremos la capa "estructura de mapeo"). Copia y pega las dos ruedas en esa capa.

Seleccione la rueda inferior y presione la tecla Alt y arrástrela hacia el lado derecho, envíela hacia la parte posterior y bájela un poco (por ejemplo, 58 px de ancho). Luego, pulse la tecla Alt y arrastre esa rueda hacia el lado izquierdo, envíelo hacia la parte posterior, escálelo un poco más (alrededor de 56px de ancho) y presione un poco hacia arriba. El objetivo es crear la ilusión de profundidad. Coloca las ruedas en tu página donde las quieras porque no las moveremos después de esto.

Nota: Me he dado cuenta de que al escalar objetos 3D en Illustrator, algunas veces se caerán y agregarán superficies dependiendo del tamaño del objeto. Si eso sucede, simplemente ajuste el tamaño un poco y vuelva a revisar las superficies.

Paso 8A

Cuando creamos el camino para la rueda, nos aseguramos de que hubiera la menor cantidad de puntos de anclaje posibles. Esto será crucial cuando se trata de cartografiar el arte. Si su ruta es demasiado compleja, Illustrator dividirá las superficies en partes pequeñas, lo que dificultará el trabajo con ellas..

Con nuestras ruedas en su lugar, es hora de ponerles unos gráficos dulces. Usando 3D Revolve, terminamos con un objeto 3D que tiene múltiples superficies. Esas superficies son a lo que mapearemos el arte. Puedes crear lo que quieras en Illustrator; Mientras lo conviertas en un símbolo, puedes asignarlo a una superficie. El objetivo es acercarlo lo más posible al área de superficie, luego ajustar más adelante en el editor de símbolos.

Echemos un vistazo a las superficies creadas por el 3D Revolve. Selecciona una rueda y asegúrate de tener una buena vista de ella porque aparecerán dos cuadros de diálogo. Para ver nuestras superficies, vaya al Panel de Apariencia, haga doble clic en el efecto Revolución 3D para ingresar al cuadro de diálogo Revolución 3D (muévala a un lado cada vez), luego haga clic en Mapa de Arte para abrir el cuadro de diálogo Mapa de Arte.

Si tienes el camino exacto que yo, tendrás 11 superficies. Una vez en el cuadro de diálogo Map Art, puede recorrer las superficies con la flecha; La superficie activa se resaltará en rojo. Veremos la superficie dos para el núcleo interno, y la superficie 11 para el núcleo externo. También puede expandir el cuadro de diálogo Map Art arrastrando la esquina, lo que expandirá su vista de la superficie.

Paso 8B

Necesitamos que nuestra rueda sea lo más cercana posible al área de superficie real para que no se distorsione cuando usamos el método Estirar para ajustar. Dado que la superficie 3D real es un círculo y la circunferencia es a lo que nos estamos asignando, la fórmula para encontrar la circunferencia de un círculo es un buen comienzo, 2 (Pi) r. Descubrí que usar tres en lugar de Pi es más fácil y puedes usar el ancho de la trayectoria de tu rueda como el radio, en este caso, 57.5px de ancho.

Por lo tanto, seleccione la rueda superior, revise su panel de información para la W y conéctelo en la fórmula: 2x3x57.5 = 345. Para encontrar la altura, utilicé la herramienta Regla, debajo de la herramienta Cuentagotas, para obtener la altura de la rueda desde el borde interior hasta el borde exterior y apareció 32px (aparece en el panel de información). Como la superficie de nuestra rueda está dividida en dos partes, cada una tendrá una altura de 16 px (ya que 32/2 es 16).

Para crear el gráfico exterior, use la herramienta Rectángulo (M) con un relleno de color brillante y cree un rectángulo de 345 píxeles de ancho por 16 píxeles de alto. El ancho del bucle interno es aproximadamente el 75% del bucle externo, por lo tanto, haga de ese rectángulo un color de relleno brillante diferente y aproximadamente 260px de ancho por 16px de alto. Alinéalos al centro para una buena medida..

Puede hacer un solo clic en la mesa de trabajo con la herramienta Rectángulo para ingresar valores directamente, o usar el panel Escala para cambiar los rectángulos existentes. Utilizo el rectángulo como marcador de posición para el gráfico, como un poco de pintura adicional en la rueda. Puede eliminarlo y todo lo que esté dentro del rectángulo se asignará directamente a la superficie de la rueda.

Paso 8C

Vamos a probarlo. Abra su panel de Símbolos y arrastre el gráfico del bucle exterior hacia él. Aparecerá un diálogo de Opciones de símbolo en el que lo llamarás "testOuter". Seleccione Gráfico como el tipo y elija el punto de registro medio. Haga lo mismo para el gráfico de bucle interno, pero en su lugar, denomínelo "testInner". Ahora son instancias de símbolos en el escenario. Para editarlos, puede hacer doble clic para ingresar al modo de edición de símbolos (el diálogo que aparece le dice eso). Es casi lo mismo que el modo aislado. Puede cambiar cualquier aspecto de su símbolo y se actualizará en su objeto 3D cuando vaya a reasignarlo, moverlo o deshacerlo (cualquier cosa para que se vuelva a mostrar).

Para mapear sus símbolos, seleccione su rueda superior, obtenga una buena vista de ellos y vaya al cuadro de diálogo Map Art en el paso 8A. En ese diálogo, busque la superficie exterior (11) y debajo del símbolo desplegable, elija el símbolo "prueba exterior". Colocará ese símbolo en su superficie, y debería quedar bien. Para que se ajuste perfectamente, haga clic en el botón Escalar para ajustar en la parte inferior izquierda y hace exactamente lo que dice. Esto te ayudará cuando tengas que alinearlo con varios objetos 3D al mantenerlo consistente. Si desea mover parte del gráfico, hágalo en el modo de edición de símbolos. Puede cambiar la casilla de verificación de vista previa para verla en la rueda.

Haga lo mismo para el bucle interno (superficie dos), pero antes de cerrar el cuadro de diálogo, desmarque Vista previa y marque Shade Artwork, luego haga clic en Aceptar para salir y ver su arte. Ese botón mágico Shade Artwork le da a tu arte las mismas propiedades de sombreado que tu objeto 3D Revolve y crea un gráfico de rueda de aspecto realista. Nota: tener Vista previa y Sombrear ilustraciones al mismo tiempo realmente consumirá una gran cantidad de memoria RAM. Así que trata de evitar eso.

Paso 8D

Así que la prueba funcionó, ahora es el momento de hacer un arte más complejo y aplicarlo a todas las ruedas. Decidí ir con un rasta tema de earthtone para el mio Con esta captura de pantalla, puede ver cómo la posición de la rueda y la posición del texto coinciden con el gráfico de la rueda que creé.

Básicamente toma nuestro rectángulo como una tira de papel y lo dobla hacia la parte superior de la rueda donde se encuentran los dos extremos. Cuando mapeamos el arte utilizando Estirar para ajustar, funciona tomando el límite del símbolo y extendiéndolo sobre la superficie. Para que funcione correctamente, no puede haber texto u objetos fuera de ese límite, así que asegúrese de que el rectángulo contenga todo dentro de su parámetro.

Una vez que tenga su arte donde le guste, conviértalos en símbolos (a menos que ya lo estén), y vaya al cuadro de diálogo Map Art para actualizar sus mapas de superficie. Si algo no encaja bien, haga doble clic en su símbolo en el escenario para ingresar al modo de edición de símbolos y ajuste según sea necesario. Aplica tus mapas de superficie a todas las ruedas restantes..

Paso 9

Todavía hay algunos detalles esenciales a los que hay que prestar atención después de ajustar los gráficos de su rueda. Primero, enmascaremos la rueda superior para que parezca que parte de ella está dentro de la rueda inferior. Para hacer la máscara, dibuje una Elipse (L) con un relleno negro al 50% de opacidad (puede que tenga que mover la parte superior hacia arriba para que pueda ver lo que está haciendo) e intente hacer coincidir la curva de las ruedas inferiores internas núcleo.

Seleccione el círculo que acaba de hacer y use la herramienta Selección directa (A) para estirar la forma de la máscara y cubrir toda la rueda superior. Lo que cubrimos con la máscara se mostrará, así que asegúrese de que un poco de la rueda no esté cubierta en la parte inferior..

Cuando la máscara esté en su lugar, cambie el color a blanco y la opacidad al 100%, seleccione la forma de la máscara y córtela (Comando + X). Luego selecciona la forma de la rueda y ve al panel de Transparencia. Haga doble clic en el espacio vacío de la miniatura en el lado derecho (al lado de la miniatura de la rueda) para enmascarar la rueda, luego presione Comando + F para pegar la forma de la máscara blanca en su lugar. La rueda debería ser visible ahora. Asegúrate de hacer clic en la miniatura de la rueda para salir del modo de máscara, y habrás terminado con esa parte.

Paso 10

A continuación, simulamos un agujero en el centro de la rueda en lugar de colocar uno allí, lo que nos obligaría a expandir el objeto. Un agujero falso de la rueda nos permite aún asignar gráficos a la rueda. Así que trace el círculo interior de la rueda con la herramienta Pluma (relleno negro, 50% de opacidad) y ajuste los puntos según sea necesario con la herramienta Convertir punto de ancla (Mayús + C).

Una vez que termine el círculo, muévalo hacia un lado, presione la tecla Alt y arrástrela hacia afuera un poco para copiar la forma, y ​​configúrela como en la captura de pantalla. Seleccione ambas formas, vaya al panel de Pathfinder, presione la tecla Alt y haga clic en el ícono Dividir (el primero en la parte inferior izquierda) para separarlas.

Desagrupe y extraiga las dos formas que necesita (como se muestra), y coloree la forma exterior con un degradado del color de la rueda, oscuro a la izquierda y más claro a la derecha. La sección más grande del círculo es la parte del agujero; por ahora debería ser blanco (lo cambiaremos para que coincida con el fondo más adelante). Agrupe (Comando + G) esas dos formas y colóquelas en la rueda. Luego agrúpalos en la forma de la rueda para mantenerlos juntos.

Paso 11

Tendremos que agregar sombras debajo de todo el juego de ruedas, debajo de la rueda superior, y a la izquierda y derecha de la rueda delantera. Comience haciendo cuatro elipsis negros, colocándolos en su obra de arte y luego usando Desenfoque gaussiano (Efecto> Desenfocar> Gaussiano) para hacer la sombra.

La cantidad de desenfoque depende del tamaño de la elipse, por lo que la más grande será de aproximadamente 60px y las formas más pequeñas serán de aproximadamente 35px. Siéntase libre de adaptarse para obtener el aspecto correcto. Con los que estén en su lugar, cambie la transparencia a Multiplicar. Establecí la opacidad al 60% para las formas más pequeñas y al 55% para la forma del fondo grande.

Para finalizar, use la herramienta Selección directa (A) para ajustar sus sombras a las formas apropiadas. Ajusté un poco las sombras laterales para que quepan en el lado de las ruedas y no en el suelo o en la parte superior de las ruedas. Ajusté la sombra inferior para extender más hacia la parte posterior izquierda que hacia la frontal.

Paso 12

Ahora que tiene el aspecto completo del juego de ruedas, es hora de configurar el diseño final del anuncio. Agarre todas las ruedas y sombras y agrúpelas. Copie ese grupo y cree una nueva capa (etiquételo como "Diseño final del anuncio"), luego presione Comando + F para pegarlos en su nueva capa. Aquí es donde añadiremos el entorno para montar nuestras ruedas..

Siguiendo con el tema del tono de la tierra, pensé que los pondría en escena en una configuración de tipo interior. Lo primero es crear el fondo. Saque su herramienta Rectángulo (M) y haga clic en la mesa de trabajo una vez. Haga las dimensiones del mismo tamaño que su mesa de trabajo (400px de ancho por 600px de alto). Utilice el panel Alinear para alinearlo con el centro de la mesa de trabajo.

Rellénalo con un degradado sin trazo. Esto es solo un gran gradiente lineal en un ángulo de 90 grados. En el panel de degradado, de izquierda a derecha, es de color marrón oscuro a marrón claro, luego de azul claro a azul más oscuro, esto crea un horizonte con tierra y cielo azul..

Envíelo a la parte posterior y, con él aún seleccionado, puede mover los controles deslizantes de degradado para ubicar la línea del horizonte. Cuando haya terminado, bloquéelo en el panel Capas. También creé una pequeña montaña en el horizonte con la herramienta Pluma, y ​​la desdibujé 5px con Gaussian Blur. No te preocupes por el agujero de la rueda todavía.

Paso 13

Agreguemos algunas rocas a la suciedad: dibuje algunas formas de roca con la herramienta Pluma, coloréelos con diferentes tonos de gris pardusco rocoso, agrúpelas y presione la tecla Alt y arrástrela alrededor de la suciedad para crear múltiples copias..

Escálelos para que coincidan con la profundidad a la que están, más pequeños en la parte posterior, más grandes en el frente. Luego compáralos con tu herramienta de selección y agrúpalos. Agregue una sombra pequeña (Efecto> Estilizar> Sombra). Colóquelos en la posición correcta de la capa y bloquee la capa. Ahora podemos añadir la hierba..

Paso 14

Hacer hierba es bastante rápido porque es solo un cepillo. Al igual que los pinceles en Photoshop, puede crear pinceles de dispersión en Illustrator que hagan el trabajo por usted. Primero, use la herramienta Pluma con un relleno verde y sin trazo para crear algunas hojas de hierba. Luego coloréelos con diferentes tonos de verde (las hojas de la hierba deben ser más oscuras en la parte posterior y más claras en la parte delantera). Una vez que tenga un poco de hierba, agrupe las cuchillas y abra el panel Pinceles. Arrastre la hierba al panel Pinceles donde se le presentará un diálogo de Pincel nuevo. Elija el tipo Nuevo Pincel de dispersión, asígnele un nombre, inserte los valores que se muestran a continuación y haga clic en Aceptar.

Ahora, use la herramienta Lápiz para dibujar una ruta sin relleno en su mesa de trabajo y luego seleccione su pincel de hierba en el panel Pinceles - campos instantáneos de hierba. También puedes probar esto con las rocas: haz algunas rocas y arrástralas al panel de Pinceles para crear un pincel de dispersión para tus rocas. Además, si quieres un vivir haga una vista previa de su pincel, cree el pincel y aplíquelo a un trazo, luego haga doble clic en el pincel en el panel Pinceles y ajuste la configuración con Vista previa activada.

Así que aquí dibujé un trazado curvo con un trazo de 2 píxeles, apliqué el pincel de hierba haciendo clic en el nombre del pincel en el panel Pinceles y lo expandí (Objeto> Expandir apariencia). Es más fácil rotar y voltear cuando se expande, además de que ocupa menos RAM. Así que duplique el objeto de pasto expandido y refleje a lo largo del eje vertical (Objeto> Transformar> Reflejar), selecciónelos y agrúpelos, aplique un Desenfoque Gaussiano de 4px y muévalos al frente (Comando + Mayús + Soporte derecho).

Para enmascarar el césped, creé un rectángulo del tamaño de la mesa de trabajo, lo centré en la mesa de trabajo y, con el rectángulo seleccionado, presioné Mayús mientras hacía clic en el césped para agregarlo a la selección. Luego haz clic derecho y elige Crear trazado de recorte. Después de eso, bloquea tu capa y sigue adelante..

Paso 15

Para terminar, agregué un resplandor solar y un poco de brillo detrás de las ruedas, un pequeño efecto de viñeta y algo de texto. Para el resplandor solar, dibuje un rectángulo alto y delgado (alrededor de 35px de ancho por 600px de alto), en un color que pueda ver por ahora. Use la herramienta Selección directa para traer los dos puntos de anclaje inferiores con las teclas de flecha para crear una forma de piedra angular.

Con esta opción seleccionada, vaya a Efectos> Distorsionar y transformar> Transformar, y use los números que se muestran a continuación, luego haga clic en Aceptar para transformarla. Bajé un poco la mía después. Establezca el color de relleno en blanco, sin trazo, configure la opacidad en 25% y el modo de fusión en pantalla. Lo coloqué justo detrás de la capa de ruedas..

Luego, de la misma manera en que enmascaramos el césped, enmascaramos el resplandor solar para mostrar sobre la parte del cielo del fondo. Después de enmascarar el resplandor solar, establezca la opacidad al 50% y bloquéela. El brillo es solo una elipse blanca con un efecto de Desenfoque Gaussiano de 50px y una Transparencia establecida en 80% en el Modo de pantalla. Colóquelo detrás de las ruedas pero delante del estallido estelar (use las teclas Comando + Soporte izquierdo y Comando + Tecla derecha para mover el objeto entre capas).

Para hacer que el orificio de la rueda coincida con el fondo, seleccione directamente (A) el orificio y, utilizando la herramienta Eyedroper, haga clic en la montaña para muestrear el mismo color marrón. Luego, con el orificio de la rueda aún seleccionado, cópielo y péguelo en su lugar, cambie el color a blanco y agregue un poco de Desenfoque Gaussiano (alrededor de 15px). Cambia el modo de mezcla a pantalla y baja la opacidad poco a poco hasta que se integre, la mía terminó en un 80%. Ya debería estar incluido en la capa "ruedas y sombras", así que bloquéelo cuando haya terminado con ese paso.

Paso 16

Para la viñeta, dibuje un rectángulo del tamaño de la mesa de trabajo, céntrelo con el panel Alinear y rellénelo con un degradado radial de blanco a gris medio (utilicé K = 30 del panel de muestras). Luego, establezca el modo de fusión en Multiplicar en el panel Transparencia y mueva su posición de capa justo encima del rayo solar, luego bloquéelo. Ahora simplemente ingrese un texto, elija su fuente favorita y use Efectos> Deformar> Arco para que se doble un poco.

Conclusión

A estas alturas, debería parecer bastante dulce, así que salga y vea qué más puede obtener la herramienta de rotación 3D. La imagen final está abajo..