Tecnología y Coaching para Emprendedores

Tutorial Básico para Manipular la Tipografía en Illustrator

adobe-illustrator

En este post vamos a aprender a manipular la tipografía en Illustrator para luego exportarla a Photoshop y darle los efectos y retoques que queramos. El concepto es sencillo, pero si nunca has ido a una clase de diseño gráfico o Illustrator, te puedes volver loco para aprender a hacerlo. Es algo que me gusta mucho porque sirve tanto para la creación de logos y posters, como para utilizar en diseño web y darle un toque especial a los contenidos. Este artículo se dirige principalmente a los diseñadores web que no saben Illustrator o tienen unos conocimientos muy básicos, porque imagino que a los diseñadores gráficos les parecerá algo muy básico. Aún así, vale la pena repasar el concepto y tenerlo en mente, porque ayuda a crear diseños más orginales.

Siento si a veces explico lo básico con mucho detalle, pero mi deseo es que estos conocimientos puedan ser también utilizados por personas que nunca han trabajado con Illustrator, pues creo que el conocimiento ha de ser accesible para todos y son muchos los diseñadores web que raramente han trabajado con Illustrator.

En este ejemplo he utilizado la tipografía “Futura Bold”, esta tipografía es la utilizada por Absolute, una marca de vodka bastante conocida. queremos crear. Pero podéis usar cualquier tipografía y, tal y como veremos, manipularla para expandir lo que nos interese. El resultado final será este:

Manipular la tipografía con Illustrator

Lo primero que deberemos hacer es abrir Illustrator, escoger la herramienta texto (la T del panel izquierdo, igual que la de Photoshop) y una vez seleccionada, en la parte superior seleccionar la fuente que queremos, en mi caso Futura Bold, y darle un tamaño de 150pt aproximadamente, no por nada, sino porque al ser la tipografía más grande nos será más fácil editarla. Escribimos la palabra que queramos, en este caso he utilizado Barna para jugar con los efectos de la B.

Pasos a seguir

Una vez hemos escrito “Barna”, hemos de seleccionar el texto. Para hacerlo, pulsamos la flecha negra y clicamos sobre él, de este modo lo hemos seleccionado todo.

Una vez seleccionado el texto, pusamos Ctrl+Shift+O (en Mac en lugar de Ctrl pulsamos la tecla de Command). Ahora ya tenemos el texto vectorizado.

El siguiente paso es que queremos manipular cada letra por separado, por lo que utilizamos el comando Ctrl+Shift+G, y ahora ya podemos manipular la B sin problemas.

Hemos de buscar una imagen que nos guste, que no tenga mucho peso, porque sino el archivo será demasiado pesado y no nos interesa por temas de eficiencia. Para este ejemplo he utilizado esta imagen:

Para insertarla en nuestra área de trabajo, iremos a File > Place..

Y ahora pulsaremos el botón superior que pone Image Trace:

Veremos que la imagen queda en blanco y negro con sólo los rasgos remarcados. Lo siguiente será pulsar Expand, también en el panel superior, justo donde antes estaba “Image Trace”

Ahora veremos que han aparecido unos puntitos azules alrededor de la figura, esto es porque la hemos vectorizado. Lo siguiente es que queremos eliminar el fondo blanco de la figura y quedarnos sólo con el negro. Para ello, deseleccionamos la imagen, pulsando en cualquier sitio fuera de la imagen, y seleccionamos la flecha blanca del panel izquierdo. También la podemos seleccionar pulsando la tecla A. Ahora pulsamos dentro de la imagen en la zona de fondo blanco y damos a la tecla suprimir. Ya tenemos sólo la silueta de la figura.

Modificando la tipografía..

Ahora el problema es que la B tiene dos agujeros. Si sobreponemos la imagen a la B tal y como es, no se distinguirá que es una pareja, debido a que hay fondo blanco. Lo que nos interesa es poner la imagen en una zona que sea toda negra. Para ello, lo que haremos en este caso es manipular la letra B.

Con la flecha negra de selección, movemos la imagen de la pareja a un sitio que no nos moleste para manipular la B. Una vez hecho esto, seleccionamos la flecha blanca de selección directa. Y con ella pulsamos en el contorno del agujero inferior de la B. Es importante haber vectorizado el texto tal y como se explica más arriba, de otro modo no podremos hacer este paso.

Una vez seleccionado, veremos que aparecen unos puntitos azules alrededor del agujero de la B, tal y como se puede ver en la imagen adjunta. Cuando tenemos esto así, pulsamos suprimir, con lo que borraremos el agujero blanco. Es posible que tengamos que pulsar la tecla suprimir dos o tres veces seguidas para que se borre del todo. Una vez hecho esto, tenemos una B con sólo el agujero superior.

Y ahora viene la parte divertida, y es combinar la imagen y la letra B, para dar el efecto que queremos practicar aquí. Reducimos el tamaño de la imagen hasta que quepa en la parte del agujero de la B. Que no os pase como a mí cuando no sabía Illustrator y venía de Photoshop que me pasaba el día con el Ctrl+T, en Illustrator no se hace así. Es tan fácil como seleccionar la imagen con la flecha negra y pulsando en una esquina de la imagen, reducirla. Para que la imagen no se distorsione de tamaño, mantenemos pulsada la tecla Shift mientras arrastramos.

Una vez tenemos el tamaño de imagen deseado, lo ponemos justo encima del espacio en negro de la letra B, tal y como se puede ver en la imagen. Es importante arrastrar la imagen con la flecha negra y no la blanca, porque la flecha negra selecciona toda la imagen, mientras que la blanca sólo selecciona puntos del trazado.

Una vez hecho esto, necesitamos la herramienta Pathfinder. Si no la tenemos activada, la podemos encontrar dentro del menú Window > Pathfinder o bien con las teclas Ctrl+Shift+F9.

Lo que vamos a hacer ahora es seleccionar con la flecha negra la B y la figura, para ello simplemente pulsamos la flecha y sin dejarla de pulsar, la arrastramos para seleccionar la B y la imagen, sin seleccionar ninguna otra letra. No es necesario que selecciones toda la B, con que selecciones sólo una parte de la letra y de la figura, ya se habrá seleccionado todo.

Una vez hecho esto, pulsamos el segundo botón desde la izquierda de Pathfinder:

y tachán! Ha ocurrido la magia:

Si no nos gusta cómo ha quedado, con Ctrl+Z deshacemos el paso anterior, con lo que podemos volver a modificar la imagen y ponerla donde más nos guste.

Extra

Si te has quedado con ganas de más, te explico un último truco que a mí personalmente me encanta. Imagínate ahora que lo que quieres es que la parte superior de la B sea más ancha. Es tan fácil como seleccionar la pluma blanca, y pulsar en el trazado, en la zona que quieres expandir. Una vez seleccionado el punto de trazado, dale a la flecha que apunta a la derecha del teclado, verás que se expande que el punto seleccionado se desplaza a la derecha. Y si quieres que se desplace más rápido, mantén pulsada la tecla Shift. En el caso de querer hacer lo contrario, pulsas la flecha izquierda del teclado y ya está. Con este truco, es fácil manipular la tipografía.

Otra manera es que una vez seleccionado el punto del trazado con la flecha blanca, simplemente lo arrastres hacia donde quieras que se mueva. Hay veces que te será más útil hacerlo así y otras que preferirás el método anterior, lo importante es que sepas que tienes varias opciones disponibles.

Conclusión

Este ha sido un tutorial básico para aquellos que tenéis nulos o pocos conocimientos de Illustrator y queréis aprender a manipular la tipografía para hacer efectos como el de este artículo. Es importante distinguir entre la pluma negra y la pluma blanca, la pluma negra lo selecciona todo, mientras que la blanca selecciona puntos del trazado, permitiéndonos manipularlo. Pienso que estos efectos no sólo son útiles para diseño gráfico, sino también para diseño web, pues nos pueden permitir manipular los textos y con ello crear diseños más atractivos. Para cualquier duda, deja un comentario y miraré de ayudarte en lo que pueda.


Comentarios

  • Joshua

    Gracias por el tutorial!

  • Shashicamisetas

    Muy bien explicado. ¡Voy a empezar a seguir este blog!.

  • DariYo

    me pareció interesante este tutorial……ahora ya tengo un truco mas para aplicar en mi corta carrera de aprendiz de ilustrador………..otra cosa…quisiera saber como utilizar la varita mágica de ilustrador……..gracias.