Efecto de texto de papel recortado

En el número de septiembre de 2008, la revista Wired presentó un nuevo diseño de encabezados para algunas de sus secciones. Estos diseños fueron creados por Mario Hugo exclusivamente para la revista.

La simplicidad y delicadeza de éstos me impactaron al punto de decidirme a escribir un instructivo sobre éste efecto para Photoshop. A pesar de que el efecto es un poco diferente al original, corresponde darle todo el crédito al diseñador Mario Hugo.

La tipografía original fue creada especialmente para la revista. Por lo tanto tuve que buscar una alternativa. La famosa Baby Teeth fue la primera que me vino a la mente. Afortunadamente hay unas cuantas variantes similares y gratuitas. Una de ellas es Disco Deck de Iconian Fonts.

Este es un instructivo muy extenso. No se debe a que el efecto sea complicado de lograr. Simplemente los pasos están muy detallados para que los principiantes también puedan acceder a realizar este trabajo.

NOTA SOBRE LA TRADUCCION DEL ARTICULO: Este artículo es una traducción directa de un tutorial que escribí originalmente en Inglés para mi blog Photoshop Roadmap. Las capturas de pantalla pertenecen a la versión en Inglés. Sepan disculpar si la traducción de los comandos no es la correcta. Será muy bien recibida cualquier corrección que me puedan indicar. Como ayuda adicional pueden descargar un PDF con la traducción de los comandos de Photoshop en Inglés y Castellano.

Creación del fondo

Vamos a FILE > NEW… (ARCHIVO > NUEVO…) y creamos un documento nuevo de 600px x 200px con fondo blanco. La imagen siguiente les muestra los datos completos:

Ahora vamos a crear el gradiente para el fondo. Este gradiente lo vamos a utilizar más adelante en el efecto de texto. 1 - Seleccionamos la herramienta de gradientes. 2 - Hacemos click en gradiente.

1 - Creamos un gradiente nuevo utilizando los parámetros que muestra la imagen de abajo. 2 - Hacemos click en el botón que dice NEW (NUEVO) y le damos un nombre cualquiera. 3 - De esta manera, el gradiente nuevo va a aparecer último en la lista de gradientes.

Seleccionamos la herramienta de gradientes y luego, desplegamos el menu de gradientes (1). Seleccionamos el gradiente que acabamos de crear en el paso anterior (2). Y también marcamos la opción ANGLE GRADIENT (ANGULAR) (3)

La imagen que sigue muestra cómo aplicar el gradiente. Colocamos la cruz en el rincón superior izquierdo de la imagen. Hacemos click y la arrastramos hacia la derecha.

Es muy importante colocar el inicio (punto 1) del gradiente bien arriba a la derecha. Inclusive puede estar por fuera de la imagen, pero no conviene hacerlo dentro de la imagen porque el resultado no se va a quedar bien.

Debido a que estamos haciendo un gradiente con la opción ANGLE GRADIENT, no importa donde soltamos el botón (punto 2) en tanto y en cuanto mantengamos la línea horizontal.

El resultado debería ser similar a éste:

Preparación del texto

Este paso involucra mucho más que escribir una palabra. Hay que crear uina capa o layer para cada letra. Esto es necesario porque cada letra va a tener su propio Layer Style asignado.

Antes de comenzar, descargamos la fuente gratuita Disco Deck font y luego la instalamos en el sistema.

En el caso de que no sepan cómo hacerlo, sigan estas instrucciones para MAC o PC.

Luego de instalar la fuente, tomamos la herramienta de texto y seleccionamos la tipografía Disco Deck que acabamos de instalar. Le asignamos un tamaño de 150px y escribimos la letra C.

Hacemos CTRL + ENTER (en las PC) o COMMAND + RETURN (en las MAC) para liberar la herramienta del modo de escritura.

Hacemos click otra vez con la herramienta de texto en otro lugar de la pantalla para crear un nuevo Layer de texto. Escribimos la letra R y liberamos la herramienta de texto nuevamente presionando CTRL + ENTER (en PC) or COMMAND + RETURN (en las MAC).

Hay que repetir los mismos pasos hasta tener la palabra completa, teniendo en cuenta que debe haber una sola letra por Layer. En la imagen que sigue, se puede visualizar la paleta de Layers con la disposición de las letras.

Para conseguir el efecto de superposición que se ve en el resultado final, tenemos que acomodar un poco a las letras. Simplemente seleccionemos la herramienta de mover, marcamos la opción de AUTO SELECT y movemos cada una de las letras hasta que queden levemente superpuestas entre si.

Creación y aplicación del Estilo de Capa con el efecto de papel

Para conseguir el efecto de sombreado del papel recortado vamos a crear un LAYER STYLE (ESTILO DE CAPAS) y lo aplicaremos a cada una de las letras. Debido a que las letras son diferentes entre si, vamos a tener que modificar la posición del gradiente en cada una de ellas. Esa es la razón por la cual cada letra está en una capa por separado.

Vamos a la PALETA DE CAPAS y seleccionamos la capa que contiene a la letra C.

Luego, seleccionamos GRADIENT OVERLAY (SUPERPOSICION DE DEGRADADO) del menú desplegable de LAYER EFFECTS (ESTILOS DE CAPAS).

Una vez abierta la ventana de LAYER STYLE (ESTILO DE CAPA), copiamos los datos que muestran las capturas de pantalla que están a continuación.

El gradiente que vamos a utilizar es el mismo que creamos al comienzo del artículo.

NO VAMOS A CERRAR LA VENTANA HASTA NO TERMINAR CON TODOS LOS PASOS QUE SIGUEN.

Seguimos con la ventana abierta y hacemos click en STYLES (ESTILOS) y luego hacemos click también en el botón NEW STYLE… (NUEVO ESTILO) y le asignamos un nombre al estilo. Este estilo que acabamos de crear va a ser el último en la lista de estilos. AHORA SÍ, FINALMENTE, CERRAMOS LA VENTANA DE LAYER STYLE (ESTILO DE CAPA).

Para poder aplicar el estilo nuevo a cada letra seleccionamos una capa (1) y luego hacemos click en el estilo que creamos recientemente que está ubicado en la STYLES PALETTE (PALETA DE ESTILOS) (2). La imagen que sigue ilustra el proceso.

Repetimos los mismos pasos para cada letra. En esta etapa no hay que preocuparse por cómo queda ubicado el estilo en cada letra. Eso lo resolveremos en pasos posteriores. Por ahora lo importante es que cada letra tenga asignado el estilo nuevo que creamos. Al finalizar de colocar el estilo, la imagen debería quedar similar a la siguiente:

Ajuste de detalles del efecto en cada letra.

Si prestamos atención, vamos a notar que el gradieente está mal ubicado en casi todas las letras con excepción de la C. Vamos a corregir eso rotando y moviendo los gradientes hasta ubicarlos en la posición correcta.Go to the

Comencemos con la letra R. Vamos a la LAYERS PALETTE (PALETA DE LAYERS). Seleccionamos el layer de la letra R y hacemos click en la flechita que se encuentra a la derecha de la paleta. (1). Esta flechita va a desplegar todos los efectos asignados al layer. Hacemos doble click en el efecto GRADIENT OVERLAY (SUPERPOSICION DE DEGRADADO) (2). A continuación, se va a abrir la ventana de LAYER STYLES (ESTILOS DE CAPA) mostrandonos todos los datos del efecto seleccionado.

Movemos la ventana de LAYER STYLE (EFECTO DE CAPA) un poco hacia la derecha hasta que podamos ver la imagen de la letra R que está por debajo. Esto hay que hacerlo porque sólo se se puede arrastrar con el mouse el gradiente cuando la ventana de LAYER STYLE (EFECTO DE CAPA) está abierta.

Primero, escribimos -90 en la casilla de ángulo del efecto de GRADIENT OVERLAY (SUPERPOSICION DE GRADIENTE). También se puede arrastrar el control de ángulo hasta que indique -90 grados. TODAVIA NO CERRAMOS LA VENTANA DE LAYER STYLE (EFECTO DE CAPA).

Inmediatamente vamos a ver como el gradiente de la letra R cambia su rotación y queda vertical en lugar de horizontal. En el paso siguiente vamos a mover el gradiente un poco hacia la izquierda para que quede mejor ubicado.

La ventana de LAYER STYLE (ESTILO DE CAPA) debería estar abierta todavía. Si no es así, entonces la abrimos y la acomodamos nuevamente como fuera explicado en los pasos previos. Ahora hacemos click sobre el gradiente de la letra R y lo arrastramos levemente hacia la izquierda. La imagen que sigue muestra el proceso y el resultado:

Una vez realizado esto, cerramos la ventana de LAYER STYLE (ESTILO DE CAPA). El resultado debería ser el siguiente:

Repetimos el proceso para todas las letras restantes. La imagen que sigue, muestra los cambios que hay que realizar y el resultado final:

Un toque de color

Ya terminamos el efecto. Considerando que cada letra tiene su propio LAYER STYLE (ESTILO DE CAPA) podemos asignarle un color distinto al gradiente de cada letra. Pero en lugar de hacer eso, vamos a agregarle un toque de color más delicado.

Creamos una nueva capa por sobre todas las demas. 1 - Seleccionamos la última capa, la que contiene a la letra T. 2 - Hacemos click en icono de ADJUSTMENT LAYERS (CAPAS DE AJUSTE) y seleccionamos SOLID COLOR (COLOR SOLIDO). 3 - Automáticamente se va a crear una nueva capa de color sólido y, al mismo tiempo, se va a abrir la ventana de selección de color.

Elegimos un color. No importa cuál sea ya que se podrá cambiar más adelante, sin dañar la imagen. Para este ejemplo usamos #FFA200. Hacemos click en OK y la capa se va a rellenar con ese color.

Luego vamos a la LAYERS PALETTE (PALETA DE CAPAS). Desplegamos el menú de BLENDING MODES (MODOS DE FUSION) (1) y seleccionamos SOFT LIGHT (LUZ SUAVE) (2).

Con esto hemos finalizado el efecto de texto de papel recortado. Sería interesante probar este efecto con distintas tipografías. Los que quieran compartir sus resultados, pueden hacerlo dejando un mensaje con un link a la imagen en la sección de comentarios.

Tags: efectos de texto, papel