Making of Robot Earth 3009 Ilustración tipográfica

Lo que vas a crear
Este tutorial se publicó originalmente en octubre de 2009 como tutorial de Tuts + Premium. Ahora está disponible de forma gratuita para ver. Aunque este tutorial no utiliza la última versión de Adobe Illustrator, sus técnicas y procesos siguen siendo relevantes. 

Durante este tutorial, te mostraré el proceso para crear uno de mis carteles de tipo ilustrado. Me encanta trabajar en todas mis ilustraciones para el equilibrio y el ritmo que proporciona a un diseño, pero especialmente me encanta crear imágenes fuera de tipo ... el diseñador gráfico que tengo dentro me obliga a hacerlo!

Para obtener recursos más increíbles, consulte nuestra increíble selección de robots vectoriales disponibles a través de GraphicRiver. O solicite la ayuda de un profesional de diseño de Envato Studio para el diseño de robot personalizado.

1. Cómo preparar su boceto y documento

Paso 1

Tengo una pasión por los robots, la ciencia ficción y la tipografía, así que, ¿qué mejor oportunidad tendría para crear un póster que fusione los tres? Después de reunir algunas referencias de robots y hojear algunos de los temas de "The Spirit" de Will Eisner (búsquelo… un artista de cómic que fue un maestro en el tipo ilustrado), comencé por obtener un diseño muy aproximado para el póster de mi película falsa papel. 

Mi visión fue crear un gran robot (que también sirve como el tipo para el título de la película) vagando amenazadoramente a través de una ciudad devastada por la guerra.

Paso 2

Con la idea inicial fuera de mi cerebro y en mi cuaderno de bocetos, me mudé a Adobe Illustrator. La siguiente tarea fue configurar mi documento. Creé un 11 "por 14" la mesa de trabajo y, una vez abierto, optimizó mi espacio de trabajo abriendo y organizando los paneles y barras de herramientas de uso frecuente. Mi debe tener los paneles incluyen Personaje, Pionero, Alinear, Capas, Muestras, Color, Transparencia, Gradiente, y Carrera.

2. Cómo agregar los elementos iniciales

Paso 1

Tiendo a usar muchas capas en mis ilustraciones, y esta no fue la excepción. La primera capa que siempre creo es un "marco" blanco. Lo puse como mi capa superior, y actúa como una máscara para todas las ilustraciones debajo de ella. De esa manera, puedo extender las imágenes en capas más allá de la mesa de trabajo, pero sin preocuparme por verlas.

Comencé con un rectángulo del tamaño de la mesa de trabajo, y luego creé uno más grande que coloqué detrás de él, los seleccioné y utilicé Frente menos opción en el Pionero panel. Bloqueé esta capa y la dejé así para el resto del proyecto..

Paso 2

Después de agregar algunas capas nuevas en el Capas Panel, comencé a mezclar algunos colores personalizados. Siempre descarto todos los colores genéricos de Illustrator y mezclo mi propio esquema simple y limitado en CMYK

También es muy útil, al mezclar tus propios colores en el Color panel, para establecerlos como "Spot Color". Esto te permite haga doble clic ese color en el Muestras panel en cualquier momento, ajuste el CMYK mezclar, y hacer que esos cambios se apliquen automáticamente a cualquier instancia de ese color en su documento. 

Imaginé una paleta de colores cálidos para esta ilustración, y creé un bronceado rojo, uno marrón y unos pocos para comenzar..

Paso 3

Después de agregar un rectángulo sólido de color a la capa de fondo, coloqué un escaneo del boceto en la capa de escaneo (Archivo> Lugar), cambie su tamaño para que se ajuste a la página y establezca Modo de fusión a Multiplicar utilizando la Transparencia panel. Esto elimina todo el blanco de una imagen colocada y le permite trabajar en capas debajo de ella mediante viendo a través eso.

También agregué una segunda capa de marco que serviría como un elemento de primer plano por el cual el robot estaría caminando (verás más adelante que abandoné este elemento para la pieza final).

3. Cómo agregar el texto

Paso 1

A continuación, comencé a desbastar el cuerpo del robot. Comenzando con el tipo recto, diseñé una composición de tipo plano que eventualmente se convertiría en el torso del robot. Anote el nombre cambiado de "Robot Earth 57" a "Robot Earth 3009". Pensé que 3009 serviría como una mejor base para caderas robot.

Paso 2

Arrastre el cuerpo de texto plano sobre el escaneo aproximado y, con él aún seleccionado, elegí Herramienta de transformación gratuita.

Paso 3

Esta herramienta es una gran adición a Illustrator, aunque un poco difícil de usar. Le permite escalar un objeto en perspectiva, que es justo lo que el médico ordenó para esta imagen. Comencé moviendo el cursor sobre uno de los cuadros blancos abiertos en la esquina del grupo seleccionado y lo moví ligeramente hasta que desaparecieran los cuadros blancos. Mientras mantenía el mouse presionado, presioné Comando-Alt-Shift.

Esto obliga al arte a desviarse hacia el espacio con perspectiva. Al liberar cualquiera de esa combinación de pulsaciones de teclas, mientras mantiene la selección con el mouse, libera una restricción, por lo que puede obtener algunos efectos bastante sofisticados. Mi mejor consejo es experimentar generosamente para dominarlo..

Etapa 4

Con la perspectiva deseada lograda, deseleccioné el arte y desactivé la capa con el boceto escaneado..

Paso 5

Finalmente, dividí el tipo en capas separadas: "robot", "tierra", "3009" y los dos bloques de hombro. Esto permitió un mayor control al trabajar en cada sección..

4. Cómo agregar profundidad al texto

Paso 1

Nunca dejé las partes divertidas para el final, salté y comencé a trabajar en la cabeza del robot. Quería que tuviera el efecto de una serie de máquinas cubiertas por una cúpula de vidrio transparente. Comenzando con una forma de media píldora-cápsula, copié (Comando-C) y pegado en el frente (Comando-F) y acarició la copia. Entonces convertí ese camino en contornos (Objeto> Ruta> Trazo de esquema).

A continuación, copié la forma original de la cúpula y la pegué en el frente para asegurarme de que estaba perfectamente alineada. Con eso aún seleccionado, seleccioné el nuevo trazo delineado, entré en el Pionero panel, y presionado Intersecarse. Me quedé con una forma perfectamente contorneada a la forma de cúpula que serviría como una borde iluminado Para la cúpula de cristal transparente. A continuación, agregué el sesos del robot mediante la adición de formas simples juntas.

Los envié detrás de la forma de cúpula, que puse a Multiplicar en el Transparencia panel. Finalmente, copié la forma original de la cúpula y la pegué completamente en la parte posterior y puse el color en blanco. Esto me permitió colocar el ensamblaje del cabezal en cualquier fondo de color sin que se vea ese fondo a través de la pieza de vidrio multiplicada.

Paso 2

Una vez que se terminó la perspectiva, comencé a agregar dimensión a cada uno de los caracteres en el tipo de cuerpo. Creé una caja en ángulo que servía como un lado de las letras y luego la copié, repetí y ajusté una y otra vez hasta que las letras parecían tener volumen..

Para un poco más de interés visual, deslicé la palabra "tierra" un poco hacia atrás para crear la ilusión de que era una profundidad más corta que la palabra "robot". Para limpiar mi trabajo de dimensiones, creé guías temporales utilizando trazos blancos bloqueados (que luego tiré). Éstos aseguraron que la perspectiva de las cajas de dimensiones permaneciera consistente con la de las letras originales..

Con la dimensión terminada, caí en la cabeza que creé anteriormente para ver cómo se estaba configurando mi robot.

5. Cómo agregar extremidades y detalles finales

Paso 1

Lo siguiente en la agenda era crear algunas piernas para el robot. Siempre asegurándome de que la perspectiva coincidiera visualmente con el resto del cuerpo, hice intencionalmente sus piernas más bajas de superficies grandes y planas para acomodar los trozos del tipo que había previsto para ellos.

Paso 2

No contento con el aspecto de mi borde de bordes duros, pensé que el robot se vería más fresco caminando a través de las nubes de polvo creadas por la destrucción que acababa de infligir a la ciudad. 

Imprimí una pequeña copia del archivo y coloqué un papel de calco sobre esa imagen. Luego dibujé mis nubes en el papel de calco, las escaneé y dejé caer la imagen en una capa de escaneo detrás del robot. De esta manera, tuve una buena plantilla para hacer el arte vectorial final de.

Paso 3

Finalmente estaba listo para comenzar a agregar todo mi tipo de soporte. Comencé seleccionando y torciendo el bloqueo del hombro izquierdo del robot para que pareciera estar girando a media zancada.

Etapa 4

A continuación, creé "¿Es este el fin de la humanidad?" escriba lockup como un gráfico plano y, usando el Sesgar y Herramientas de escala, mapeado en el lado del hombro.

Paso 5

Finalmente, hice lo mismo para los créditos de los actores, productores y directores en la pierna, y agregué un crédito ficticio de estudio por encima del hombro derecho. También puedes ver que comencé a renderizar las nubes de polvo de las que hablé en el paso anterior.

Paso 6

La garra del robot comenzó como una forma de círculo simple con el centro fuera de ella (Conquistador> Frente Menos). Luego copié la forma, la pegué en la parte posterior y coloreé la nueva forma de un verde más claro. 

A continuación, creé un círculo concéntrico y agregué la fecha de estreno de la película y "Destroying Theatres" con el Escriba en una herramienta de ruta. Finalmente, dibujé la dimensión de conexión entre los dos círculos, agregué algunos detalles a la articulación de la muñeca y sesgué el tipo con la Escala y Herramientas de sesgo hasta que obtuve el efecto deseado.

Paso 7

Mi siguiente tarea fue crear un efecto metálico acanalado en los brazos del robot. Podría haber creado una sección, copiarla y repetirla manualmente a lo largo del brazo, pero obtener un espaciado uniforme solo con la vista tomaría una eternidad. Afortunadamente, hay una manera mucho mejor.

Comencé creando una sección del brazo tubular, que consistía en el divisor para cada sección, las sombras y los resaltes. Luego arrastré esa sección agrupada a la Cepillos paleta y seleccionado Pincel de patrón de las opciones disponibles en el cuadro de diálogo que apareció. Entonces golpeo DE ACUERDO en el siguiente cuadro de diálogo de pincel.

Paso 8

A continuación, hice un Dupdo del trazo verde que sirve como la base del brazo y pegado al frente (se muestra aquí a la izquierda del trazo original para propósitos de tutorial). Apliqué el pincel de patrón recién hecho a ese trazo y ... ¡voilá! La sección del tubo que creé se repite a lo largo del camino. Puede ser necesaria alguna experimentación para lograr el efecto adecuado, pero Pinceles de patrón son una excelente manera de obtener efectos de gran apariencia y espaciados uniformemente a lo largo de un camino.

Paso 9

Dirigiéndome a la recta final, dirigí mi atención al paisaje urbano al fondo. Había creado edificios para una ilustración anterior (¡trabajos de reciclaje!), Pero no fueron destruidos, como pretendía que aparecieran aquí..

Una simple máscara con un borde dentado sobre el edificio original logró el aspecto desmoronado que buscaba, y la adición de un patrón de cuadrícula de bordes desiguales detrás del edificio representó vigas en I expuestas. Finalmente, una inclinación añadida a cada edificio cosió el Sólo destruido por un robot de 100 pies mira que iba por.

Paso 10

Con todos los elementos de la ilustración creada, solo tuve que agregar algo de profundidad mediante el uso de múltiples sombras. Para cualquier superficie que pensé podría usar una sombra, simplemente Copiado y Pegado en frente, configurar esa nueva copia como un degradado lineal en el Gradiente panel, póngalo en Multiplicar, y apuntado la dirección de la sombra con el Herramienta gradiente.

Continué agregando muchas más formas multiplicadas a lo largo de la pieza para una apariencia sombreada de manera uniforme..

Paso 11

Para un toque final amenazante, agregué rayos de ojo que salían de los ojos del robot. Formas blancas ajustadas a un Opacidad de 50% logrado este efecto.

¡Impresionante trabajo! Ya estás hecho!

La tipografía ilustrada es una de mis pasiones, así que espero que hayas disfrutado de mi recorrido por uno de los diseños de robots basados ​​en tipos más feroces que hayas visto jamás. La imagen final está abajo. Puedes ver la versión grande aquí..

Robots vectoriales divertidos de GraphicRiver

¿No puedes conseguir suficientes robots vectoriales? Vea nuestra increíble selección de robots vectoriales de GraphicRiver para obtener recursos de diseño más increíbles. Disfruta de uno de nuestros favoritos enumerados a continuación!

Vector plano modernos robots

¡Este colorido conjunto de robots vectoriales está listo para conquistar el mundo! Completos con diseños planos modernos y magníficos esquemas de color, estos robots seguramente cautivarán los calcetines de cualquier intruso. Cree una cuenta de Envato hoy para descargar estos recursos útiles.