Aqui va un efecto rápido, que de vez en cuando, nos puede salvar de más de un apuro. Se trata de dar el efecto de cristales rotos en una fuente, efecto bastante utilizado en según que películas de una determinada época. El efecto final es algo similar a esto:

Así que…vayamos a ello. No es difícil.

1.- Abre un archivo nuevo en Illustrator.

2.- Escribe el texto al que quieras aplicarle el efecto. Piensa que cuanto más gruesas sean las letras mejor; y procura que las letras estén bastante juntas. Juega con el tracking, etc… En este caso, he utilizado directamente la fuente “impact” sin tocar ningún valor y a 60 puntos.

3.- Selecciona letra por letra y cámbialas de tamaño. Unas mayores, otras menores…

4.- Bien, una vez lo tengas, expándelo todo en “Objeto > Expandir”

5.- Crea una nueva capa…

6.- … y selecciona la pluma (P)

7.- Entonces dibuja triángulos a modo de las formas de cristales rotos. Fíjate en la captura inferior de este paso y del siguiente.

8.- Así es como queda.

9.- Ahora selecciona un triángulo…

10.- … y le das a “Objeto > Trazado > Dividir objetos debajo“. Verás que una vez hecho, el triángulo “desaparece”. Bien, no problemo, vas bien. Pero ahora tienes que repetir este proceso en todos los triángulos 

11.- El resultado es esta; que no ves los triángulos, verdad? 

12.- Bien, pues ahora selecciona todo el texto…

13.- Y lo desagrupas en “Objeto > Desagrupar”

14.- Y ahora viene el trabajo duro… Selecciona una parte de una letra…

15.- Y la redimensionas. En grande o a pequeña, da igual. Tienes muchos “trocitos” con los que jugar, jejeje.

16.- Una vez hayas acabado, puede que te quede algo similar a esto.

17.- Ya es lo que buscábamos, no? 

Esta vez, vamos a crear un sencillo y efectivo efecto elegante en letras. Para ello utilizaremos el Photoshop y el Illustrator. Pero no se me emocione la parroquia, que aunque parezca largo, pesado o dificil, no lo es en absoluto (he capturado cada paso, para que nadie pueda perderse ).

Este tutorial está traducido de la web de Wegraphics, asi pues mi mérito solamente está en traducir paso a paso este efectivo tutorial.

En definitiva, que si seguiis los pasos correctamente, os quedará algo similar a esto:

vayamos a ello…

1.- ILLUSTRATOR: Crea un nuevo documento en Illustrator. En este caso, lo haremos de 2000 x 1500 píxeles.

2.- ILLUSTRATOR: Escoge una letra que te guste y escribe tu texto (en el ejemplo estamos trabajando a 280 puntos). Para este ejemplo he utilizado la misma fuente que la del tutorial “original”. Aquí te la puedes descargar.

3.- ILLUSTRATOR: Bien, ahora pasaremos las letras a contornos. Selecciona tu escrito y ves a “Texto > Crear contornos”

4.- ILLUSTRATOR: Ahora le daremos un “grosor” aplicando en “Objeto > Trazado > Desplazamiento”

5.- ILLUSTRATOR: En este caso, le damos un grosor de 25 píxeles…

6.- ILLUSTRATOR: y os quedará algo semejante a esto.

7.- ILLUSTRATOR: Ahora seleccionamos la herramienta de selección directa (A)

8.- ILLUSTRATOR: y clicamos en los extremos del grosor que hemos creado en cada palabra (apretando mayúsculas puedes seleccionar todo)

9.- ILLUSTRATOR: Ahora abrimos la ventana “Buscatrazos” (“Ventana > Buscatrazos“)

10.- ILLUSTRATOR: y con las líneas exteriores seleccionadas, le damos al botón “Combinar” (mira la captura inferior)

11.- ILLUSTRATOR: Bien, de haberlo hecho bien, os debería quedar algo semejante a esto, verdad?

12.- ILLUSTRATOR: Pues ahora localizaremos la capa donde está lo que hemos hecho (en la ventana capas, es la que tendrá un rectángulo a la derecha de un color, en este caso, el azul)

13.- ILLUSTRATOR: …y la ponemos en modo invisible (clic en el ojo izquierdo)

14.- ILLUSTRATOR: Ahora podemos ver el texto inferior !!

15.- ILLUSTRATOR: Lo agrupamos en “Objeto > Agrupar” (o CTRL/CMD G)

16.- ILLUSTRATOR: y le aplicamos un color cualquiera. El que querais, no importa, luego lo cambiaremos, ahora sencillamente es pa no liarnos.

17.- ILLUSTRATOR: Vuelve a localizar la capa del filete exterior, y conviertela en visible (clic otra vez donde debería estar el ojo para que vuelva a aparecer)

18.- ILLUSTRATOR: Vamos por aquí, nop?

19.- ILLUSTRATOR: Ahora selecciona todo el texto de color…

20.- ILLUSTRATOR: …y combinalo con el botón “Combinar” de la paleta “Buscatrazos”

21.- PHOTOSHOP: Ahora abre el Photoshop (no cierres el Illustrator !!) y crea un nuevo archivo de las mismas dimensiones (en este caso, 2000 x 1500 píxeles)

22.- PHOTOSHOP: Al color frontal le daremos un valor de gris (mira la captura inferior) Para seleccionar el color, dale 2 clics en el recuadro de color inferior de la paleta flotante de herramientas)

23.- PHOTOSHOP: Selecciona la herramienta “Pote de pintura” (G) y dale a la ventana, verás que se vuelve todo de color gris.

24.- ILLUSTRATOR: Vuelve a Illustrator y selecciona las letras de color; copialas (Edición > Copiar)…

25.- PHOTOSHOP: Y en el Photoshop pegas la selección en “Edición > Pegar”

26.- PHOTOSHOP: Dale al OK en “Objeto inteligente” cuando te aparezca esta ventanita

27.- ILLUSTRATOR: Ahora volvemos a Illustrator y haremos lo mismo con el filete exterior… Seleccionalo y cópialo.

28.- PHOTOSHOP: …y en Photoshop lo pegas.

29.- PHOTOSHOP: Bien… ahora tenemos esto en Photoshop, verdad?

30.- PHOTOSHOP: Selecciona la capa del filete exterior y dale 2 clics. En la ventana que se abrirá, dale una opacidad del 0% en la sección “Opciones de fusión: A medida”

31.- PHOTOSHOP: En la sección “Superposición de colores” dale 2 clics al recuadro de color…

32.- PHOTOSHOP: Y pon estos valores (solamente hay que poner 1 opción, automáticamente las demás se adaptan)

33.- PHOTOSHOP: Ahora ves a la selección “Sombra inferior” y pon los valores de la captura inferior.

34.- PHOTOSHOP: Ok, ya tenemos el filete exterior preparado. Ahora haremos lo mismo pero con las letras de colores. Seleccionalas y 2 clics en la capa…

35.- PHOTOSHOP: …y lo mismo, opacidad al 0%…

36.- PHOTOSHOP: En superposición de colores…

37.- PHOTOSHOP: Dale estos valores…

38.- PHOTOSHOP: Y en la sección “Bisel y relieve”, sigue estos valores…

39.- PHOTOSHOP: Este es el color marcado antes (5d5d5d)

40.- PHOTOSHOP: Ok… ya está.

41.- PHOTOSHOP: Aquí, lo que se hace es darle algo de textura para que no quede todo tan liso y “limpio”. Crea una nueva capa (“Capa > Nueva > Capa“)

42.- PHOTOSHOP: Píntala del gris (es el mismo gris del principio el 3f3f3f)

43.- PHOTOSHOP: Añadele ruido en “Filtro > Ruido > Añadir ruido”

44.- PHOTOSHOP: Y pon algo similar a la captura inferior…

45.- PHOTOSHOP: Para finalizar, selecciona esta última capa y ponla en modo “Superponer” y con una opacidad del 10%

Listo, ya lo tienes. Uf

Entra una Comic Sans en un bar…

…y el camarero le dice: “Aquí no servimos a tipos como tú.” (Vía Microsiervos) xD

Y aprovechando que hablamos de tipografías, otra maravilla de la revista de diseño Grafik Tasarim, en donde Baris Sarhan y Ahmet Eken nos muestran la verdadera “Anatomía” de las letras genial. (Vía Diego Mattei)

Fuente:

También denominado “tipo de letra” (QUE NO ES LO MISMO QUE TIPOGRAFÍA !!!), es el conjunto de carácteres que componene una familia tipográfica. Por ejemplo, tenemos la Helvetica con todas sus variantes, no?. Pues a todo el conjunto este se le denomina FUENTE o TIPO DE LETRA.

Tipografía:

Es el arte, técnica de manejo y selección de fuentes (o tipos)

Ejemplo práctico:

Esta revista tiene buenas fuentes=Esta revista posee unos tipos de letras buenos (o correctos, bonitos, etc…). Ello no significa que estén bien maquetadas !! (tema como para no un post, no…un blog entero !!
Esta revista tiene una buena tipografía=Esta revista ha sido maquetada (en cuanto a tipos de letra se refiere) de manera correcta (elegante, bonita, etc…) Sencillo, no?.

Existen muchos blogs de grandes autores versados en estas dignas artes (unos tipos duros, maquetadores, en caja baja, etc…[ perdón por los que me dejo, no es representativo ]) que, seguramente, aclararían y detallarían hasta el infinito estas pobres definiciones. (por lo que ruego a los susodichos, que si pasaran por aquí, dado el caso, y quisieran esclarecer aún más el asunto, estaríamos encantados de recibir sus nuevas)

ACLARACIÓN: Esto es sólo una explicación básica, fundamental (y quisquillosa) orientada a esclarecer el significado de ambas palabras. No me crucifiquen, los gurús tipográficos por ello.

Cuanto más pequeña sea la fuente, menos se aprecian los círculos blancos que deja en su interior para ahorrarnos el preciado líquido. Una original idea para documentos de andar por casa, y que muchas veces son la mayoría de casos.
Evidentemente, es gratuita

Aquí teneis el trozo de la película propiamente dicha.

The Universal Declaration of Human Rights from Seth Brau on Vimeo.