Cómo hacer un listón con mensaje en Photoshop

En este tutorial, vamos a crear un pequeño listón con mensaje en Photoshop, el cual puedes colocar en la esquina superior derecha de un diseño. ¡Estos pequeños listones resultan muy modernos y de estilo Web2.0, sobre todo en diseños web! ¡Es un efecto bastante fácil de hacer, y en este tutorial añadiremos algo de sombra y luz para hacerlo más atractivo!

Paso 1:

Para empezar este tutorial, como siempre, comenzaremos con un bonito degradado radial. Soy adicto a los degradados radiales, ¡tú también deberías serlo! Estoy usando una combinación de bonitos azules. Estos son los códigos de color exactos:

Color 1 - #0e324f

Color 2 - #062033

Funciona bien si pones el punto de luz del degradado en la esquina superior derecha, donde colocaremos nuestro pequeño listón. Esto tiene que ver con la forma en que vamos a añadir la luz y la sombra más tarde.

Paso 2:

Ahora este paso no es realmente necesario, pero voy a añadir una letra M gigante para colocar mi listón de mensaje. Cuando el listón interactúa con el fondo de esta manera, tiene un aspecto aún más atractivo.

Así que hago una M gigante en blanco y la pongo en Superponer y la desvanezco al 40% para que tenga un poco de degradado radial y se adapte a las luces y sombras.

Las luces y las sombras son tus amigas, harán que tus diseños se vean mucho más bonitos. En el mundo real y en el diseño impreso, se obtienen luces y sombras de la luz (luz solar, luz eléctrica, lo que sea), pero en la pantalla todo es más bien uniforme. Por eso, es conveniente añadir un poco de sombra y luz para darle vida a todo. Ten en cuenta que esto no funciona tan bien en la impresión.

Paso 3:

A continuación, en una nueva capa, dibuja un rectángulo largo con un gris claro. Hazlo muy largo porque cuando lo gires después, necesitarás que los extremos sean lo suficientemente largos. Añade también algo de texto. Escribí "Made with Love!" en un tipo de letra agradable: Gill Sans Ultra Bold. Tengo predisposición a las fuentes gruesas porque me parecen simpáticas y llamativas.

Paso 4:

Ahora voy a tomar una forma de corazón del conjunto de formas de Photoshop. Puedes conseguirlas haciendo clic en tu herramienta Formas personalizadas (U) en el menú de Herramientas. A continuación, dirígete a la parte superior de la pantalla y pulsa la pequeña flecha hacia abajo junto a Forma, como se muestra. Si aún no tienes muchas formas, haz clic en la flecha que apunta a la derecha y añádelas.

Paso 5:

Entonces, utilizando esa forma de corazón, en una nueva capa dibujé un lindo y pequeño corazón rojo. La combinación de rojo, blanco y azul se ve muy bien.

El truco con este tipo de combinaciones de colores es muy sencillo. Primero hay que tener un color principal (en este caso el azul) y luego utilizar los otros colores para resaltar ese color principal. Así pues, si tenemos mucho azul, una cantidad media de gris claro y un poquito de rojo realmente destaca.

La segunda cosa que hay que recordar es que algunas combinaciones de colores chocan entre sí. Por ejemplo, si pones ese rojo directamente sobre el azul, será desagradable a la vista. Así que aquí utilicé el gris claro como color intermedio.

Paso 6:

Ahora, para que el rojo resalte de verdad, he seleccionado la capa del corazón, he creado una nueva capa encima y, con un color rojo aún más claro, he dibujado un pequeño degradado en la esquina superior derecha. De este modo, nuestro corazón tiene un degradado radial y, de nuevo, ¡utilizamos luces y sombras!

También añadí una tenue sombra difuminada al texto "Made with Love" utilizando el modo de fusión Sombra paralela. Para ello, haz clic con el botón derecho del ratón en esa capa y selecciona Opciones de fusión. A continuación, marca Sombra paralela. Establece la Distancia a 0 y cambia el color para que sea un gris claro de manera que no esté demasiado fuerte. No añadas una sombra normal porque queremos que estas letras formen parte del listón, no que se sitúen sobre él.

Paso 7:

Ahora quiero añadir bordes al listón, así que mantengo pulsada la tecla Ctrl y hago clic en la capa del listón para seleccionarlo todo, luego creo una nueva capa y pego un color gris más oscuro. Luego voy a Selección > Modificar > Contraer y contraigo la selección en 2 píxeles.

A continuación le doy a borrar para eliminar el centro de ese gris oscuro, dejando sólo los bordes. (Ten en cuenta que tienes que pulsar la flecha derecha un par de veces, luego pulsar borrar, luego pulsar la flecha izquierda un par de veces y pulsar borrar de nuevo para obtener los bordes izquierdo y derecho).

Paso 8:

Bien, ahora tenemos nuestro listón de mensaje, tiene bordes, un mensaje y un bonito corazón rojo que destaca.

Lo siguiente que hay que hacer es seleccionar todas las capas de el listón de mensaje y combinarlas en una sola capa. Lo hacemos porque estamos a punto de realizar la rotación.

Si rotas sin combinar el texto y los bordes, puedes obtener algunos efectos extraños. Photoshop tiende a desenfocar y a generar irregularidades al rotar, así que es mejor minimizar los efectos combinando todo. ¡Por supuesto, esto significa que tienes que asegurarte de que tu listón de mensaje está totalmente terminado antes de combinarlo!

Combinar también tiene el beneficio añadido de que podemos usar Sobreexponer y Subexponer más adelante para sombrear e iluminar. Verás lo que quiero decir en breve...

Paso 9:

Así que ahora, pulsa Ctrl+T para transformar, mantén pulsada la tecla Mayús y gira el listón de mensajes a un ángulo de 45'.

Paso 10:

Ahora mueve el listón de mensajes hacia arriba, a la derecha. Ya se ve muy bien, pero ahora hay que añadir un poco de sombras y demás.

Crea una nueva capa en la parte superior y selecciona un color gris claro. Mantén pulsada la tecla Ctrl y haz clic en la capa del listón para seleccionar todos sus píxeles. A continuación, dibuja un degradado que vaya de gris claro a transparente y dibújalo desde arriba hacia abajo. Luego dibuja un segundo desde abajo hacia arriba.

Deberías obtener algo parecido a la imagen de arriba: un poco de gris procedente de la parte superior y un poco más procedente de la parte inferior.

Paso 11:

Ahora cambia el Modo de fusión de esta nueva capa a Multiplicar. Como usamos un bonito gris tenue, dará una buena cantidad de sombra. Si usaste un gris más oscuro, puede que tengas que volver a atenuar la opacidad.

Paso 12:

Ahora vuelve a la capa del listón propiamente dicha. Cambia a la herramienta Subexponer (O) y elige un pincel grande y difuso para trabajar.

Añade poco a poco una subexposición sutil en la parte inferior y superior del listón. En la configuración de la herramienta Subexponer, es posible que quieras asegurarte de que la Exposición está razonablemente baja (yo utilicé el 20%). Esto te permite hacer un efecto más sutil sin que quede sobreexpuesto.

Cuando hayas terminado de añadir la subexposición de la parte superior e inferior, puedes, si quieres, mantener pulsada la tecla Alt y pincelar suavemente el centro. Si mantienes pulsada la tecla Alt cuando la herramienta Subexponer está seleccionada, se convierte en Sobreexponer.

Subexponer y Sobreexponer son efectos opuestos entre sí. Subexponer oscurece y Sobreexponer aclara. Son herramientas bastante útiles, aunque hay que usarlas con sutileza o, de lo contrario, se puede armar un poco de lío.

Paso 13:

Así que ahora que nuestro listón se ve bien, vamos a añadir una sombra detrás de él.

Crea una capa debajo del listón.

Ahora mantén pulsada la tecla Ctrl y haz clic en la capa del listón para seleccionar sus píxeles y en la capa de abajo, rellénalo con un gris medio.

A continuación, anula la selección, pulsa la flecha hacia abajo un par de veces y la flecha hacia la izquierda un par de veces para que tu nueva capa esté en la parte inferior y a la derecha del listón de mensaje (como se muestra)

Esta será nuestra capa de sombra.

Paso 14:

Pon tu capa de sombra en Multiplicar y luego ve a Filtro > Desenfocar > Desenfoque gaussiano y utiliza un ajuste de unos 3-4px. Conseguirás que se produzca una bonita sombra.

Paso 15:

Ahora queremos que nuestro listón de mensajes parezca abultado en el centro. Esto significa que la sombra sería menor tanto en la parte superior como en la inferior porque el listón está más cerca del fondo. ¿Tiene sentido?

Básicamente, si algo está lejos del fondo, su sombra es más grande, y si está más cerca su sombra es más pequeña...

A continuación, toma la herramienta Borrador (E) y, con un pincel grande y difuso, borra suavemente un poco de la sombra en la parte superior e inferior de modo que se desvanezca en ambos extremos.

Paso 16:

Y ahí tienes el producto final: ¡un bonito listón de mensaje!