01 marzo, 2017

Texto retro 3D con Illustrator: tutorial y recursos

El estilo “3D retro” en textos se sigue viendo a menudo, por lo que voy a explicar aquí paso a paso cómo crearlo. Además de la guía, añadiré también algunos recursos útiles relacionados. En definitiva, todo lo necesario para hacer un diseño de este tipo con Illustrator. Asi pues, totalmente editable y con salida vectorial.

Antes de nada, veamos a qué me refiero exactamente:

Aplicaciones del estilo 3D-retro

Básicamente, se trata de letras con volumen, perfilados y sombreado. Adicionalmente pueden tener o no alguna textura interior o exterior, como los puntos que se ven en la imagen (o texturas de tipo grunge, etc).

Más ejemplos:

Más ejemplos del estilo 3D-retro para textos

Debo reconocer que no sé exactamente en qué época se creó originalmente este atractivo estilo para las letras, aunque probablemente sería en la década de 1960 o incluso antes. Tras la II Guerra Mundial con toda probabilidad (no parece algo del Art Déco de los ‘30 o anterior). Sea como sea, desde luego es bonito y quedará muy bien en carteles y diseños muy variados.

Como digo, se ve relativamente a menudo. Sin ir más lejos aquí mismo en La Grafiteca; hablamos sobre él por ejemplo en la entrada “96 estilos retro-vintage para textos de calidad sobresaliente”. Como puede verse en la imagen de muestra, pertenecen a la misma tendencia:

Más ejemplos

En aquella ocasión se trató de archivos de Photoshop con el efecto aplicado, listos para usar. En esta entrada, en cambio, vamos a usar otro de los grandes programas de Adobe, concretamente Illustrator. Así pues esta vez vamos a trabajar con vectores. Esto es especialmente interesante, pues el formato vectorial no está limitado por tamaño o resolución, de forma que es el indicado para realizar diseños de gran formato, como carteles, posters y similares (en realidad es el indicado para impresión de cualquier tipo).

Así pues, ¿cómo podemos hacer un texto “retro-3D” de este tipo con Illustrator? Para responder esta pregunta vamos a seguir un interesante tutorial del gran diseñador británico Chris Spooner. Concretamente, el que realizó en su artículo “How To Create an Editable Retro Text Style in Illustrator”. Las letras “A” que pueden verse en la segunda imagen proceden de dicho artículo precisamente.

Las personas que tengan una versión relativamente avanzada de Illustrator, y entiendan el inglés escrito, pueden seguir la indicaciones que allí se dan, directamente. No obstante, Spooner no indica la versión del programa que usa, aunque seguramente será una bastante avanzada (CS6 mínimo, es probable que incluso CC). Así pues, con versiones anteriores hay pasos que pueden ser diferentes.

En esta adaptación que haré a continuación, se usará CS3 (que es el que tengo yo). Eso sí, debo advertir que se trata de un tutorial de nivel medio-avanzado (los más novatos pueden experimentar algunas dificultades).

Guía paso a paso para hacer un texto 3D retro con Illustrator CS3.

Logo Grafiteca realizado con Illustrator CS3 con efecto 3D-retro

El proceso es casi igual al que describe Spooner, así que recomiendo mirar también su artículo para ver las imágenes de muestra. Arriba puede verse el resultado al que yo he llegado. Básicamente los pasos son los siguientes:

  1. Crear un nuevo documento en Illustrator. A continuación, crear un rectángulo que lo cubra por completo y darle el color que queramos.
  2. Escribir la letra (o palabra o frase) a la queramos dar el estilo. A continuación, darles color transparente y color del trazo de contorno blanco, de unos 2-5 píxeles.
  3. Trabajaremos a continuación con el panel Apariencia (Appearance panel de la versión en inglés del programa). El siguiente paso es duplicar el trazo que acabamos de crear.
  4. A continuación, al trazo de debajo le aplicaremos un efecto de transformación. Para ello, teniéndolo seleccionado, iremos al menú Efecto/Distorsionar y Transformar/Transformar. Se nos abrirá una ventana con varias opciones. Esto es para aplicar el sombreado de color azul oscuro de la imagen. Es decir, el volumen o efecto 3D. En mi caso elegí mover 0.2mm horizontal y –0.2mm vertical. A continuación, establecí 12 copias (Spooner hizo 20 copias con 1px de desplazamiento, pero en CS3 el desplazamiento en píxeles no parece funcionar muy bien).
  5. A continuación podremos darle el color de relleno a las letras (de transparente lo cambiamos al que queramos, por ejemplo azul celeste como en la imagen).
  6. Para el sombreado más claro volveremos a hacer lo mismo de antes, pero poniendo más copias (en mi caso 30, Spooner puso 50). El color lo pondremos negro o muy oscuro, y bajaremos la opacidad a 20.
  7. Y ahora viene lo más complicado: la trama o textura de las letras. Según veo en el artículo de Spooner, esto es muy fácil con versiones avanzadas de Illustrator, pero con CS3 la cosa se complica. Básicamente, hay que crear una muestra de motivo, y añadirla la panel de muestras.
  8. Afortunadamente, el propio Spooner nos facilita las texturas de puntos de tipo halftone que se ven en las letras. Es un recurso muy útil y totalmente gratuito, que nos regala el diseñador británico. Para descargarlas, dirigirse a la entrada de su blog “free distressed halftone patterns”. En él podremos obtener unos cuantos patrones de puntos muy buenos para este tipo de diseños.
  9. En versiones avanzadas de Illustrator como la de Spooner, por lo visto basta con seleccionar el archivo con el patrón que nos guste, copiarlo y luego pegar directamente en Illustrator. Dicho patrón se añade al panel de muestras sin más, según cuenta. No sé si es así, y desde luego en CS3 esto no funciona. La forma de hacerlo es abrir el archivo de imagen en Illustrator (lo arrastramos hasta la ventana del programa, pero no al documento que tengamos abierto, es decir, lo abrimos en otra ventana). Una vez allí abrimos la ventana de Muestras y arrastramos la imagen entera directamente a dicho panel. Veremos que se añade a las Muestras de Motivo (recomiendo ocultar los demás tipos de muestras y dejar solo los Motivos). Una vez añadida, cogeremos la muestra directamente del panel y la arrastraremos hasta la otra ventana que tenemos abierta, la que tiene nuestras letras “retro-3D”. Solo con este procedimiento se me añadió a mí y pude usarla.
  10. Una vez tengamos nuestro motivo de puntos en el panel, podremos aplicarlo. Para ello, de nuevo en la ventana Apariencia duplicaremos el relleno azul, y en dicho duplicado, que pondremos encima, seleccionaremos nuestro motivo de puntos (en el panel de muestras antes comentado).
  11. Tapará por tanto al relleno azul debajo, por lo que le bajaremos la opacidad hasta un 15%. Y listo, trabajo terminado.

El resultado será un texto totalmente editable, al que podremos cambiar la tipografía, color, etc. Pongo una captura con todos los trazos y rellenos necesarios para que quede todo más claro:

Captura con los diversos trazos y rellenos usados en el tutorial

Lógicamente, cambiando el grosor de los trazos, el orden, la orientación del desplazamiento, etc, podrán obtenerse muchos resultados diferentes. Pero quedémonos con que el volumen (y por tanto el efecto 3D) se logra con el efecto Transformar (desplazamiento y repetición de dicho desplazamiento).

Recurso gratuito: Efectos retro 3D de Illustrator para textos.

Voy a completar este artículo con más recursos relacionados, que guardaré para mí mismo (y también por supuesto para los lectores y usuarios de La Grafiteca).

Serán especialmente útiles para aquellas personas que tengan dificultades en seguir estos tutoriales, ya sea mi guía o la de Spooner. Para facilitar todo aún más, el diseñador británico tiene otra entrada en la que ofrece directamente 10 efectos de este tipo, ya terminados y listos para usar. Son los siguientes:

Muestra de los 10 efectos 3D-retro que vienen en el pack

Para usarlos, recomiendo una vez más tener una versión muy avanzada del programa. Yo he podido utilizarlos con CS3, aunque con cierta dificultad técnica (afortunadamente, uno de los archivos que ofrece es un .AI que puede abrirse en versiones anteriores a la suya, bien hecho por su parte). La forma de hacerlo es abrir el archivo, coger directamente el texto que nos interese, y escribir lo que queramos, pues ya tienen los efectos aplicados. Todo lo demás lo borraremos.

De hecho, la primera imagen que abre este artículo la he realizado con el archivo de Spooner. Tiene además bastante buena resolución:

Detalle y ejemplo de uso de los efectos incluidos en el pack de Spooner

Un buen recurso, en definitiva. Así pues, demos gracias al diseñador británico, pues nos lo ofrece de forma totalmente gratuita, para uso libre y disponible además para PC y Mac (con archivo incluido para versiones antiguas de Illustrator, como antes he comentado).

Para obtenerlo, nos dirigiremos a su blog, concretamente a la entrada:

10 Free Retro Text Effect Graphic Styles for Adobe Illustrator | Blog.SpoonGraphics

Para no ser menos que él, voy a ofrecer yo también el archivo AI de Illustrator CS3 que he realizado siguiendo su tutorial, para así facilitar las cosas a las personas que quieran ahorrarse dicha tarea. Es el mismo que hemos visto antes más arriba, la imagen con el fondo color mostaza. Puede descargarse desde la siguiente ubicación:

Archivo de Illustrator CS3 con logo Grafiteca 3D-retro | GoogleDrive

Es también totalmente gratis (no hace falta mencionar autoría en caso de uso, aunque de hacerse será apreciado). Eso sí, comentar que la tipografía usada es Bebas Neue. Si no se tiene puede ponerse cualquier otra (enlace anterior para descargarla, es igualmente gratuita).

Comentarios y discusión sobre esta entrada