Texto editable tipo nube

por

El panel de los estilos de capa puede ser un gran aliado para generar efectos muy llamativos y prácticos a la hora de crear titulares. En esta ocasión vamos a crear un efecto de texto tipo nube con Photoshop que vamos a poder modificar a nuestro gusto una vez creado.

Suscríbete a mi canal: 

Creación de un texto tipo nube en Photoshop

Tal vez sea uno de los procesos más sencillo de aplicar en Photoshop, pero que consigue unos resultados fantásticos.

Con tan sólo elegir la tipografía más adecuada para el efecto nube, y aplicar una serie de efectos con el panel de los estilos de capa, conseguiremos unos encabezados o titulares con un texto tipo nube para utilizar en cualquier proyecto.

Como el tiempo es oro a la hora de trabajar, todo aquel no no tenga tiempo de seguir este tutorial o busque otra combinación de efectos, puede adquirir este efecto ya creado a un precio muy asequible a través de este enlace.

boton comprar en envato
Enlace de afiliado

Tamaño de documento

Aunque al trabajar con tipografías sin rasterizar, que son tratadas como vectores en vez de píxeles, no es muy importante el tamaño que elijamos de documento, hacerlo con un lienzo y una resolución correcta ayudará a que realicemos el efecto tipo nube con mejores resultados.

Una vez que lo tengas terminado, puedes reservarlo en un archivo en tu biblioteca para hacer uso de él y añadirlo sin problemas a cualquier trabajo que lo necesite, cambiando el texto, la tipografía y la escala a conveniencia.

Los datos que he manejado para trabajar en este nuevo documento son los siguientes:

  • Tamaño: 210x100mm
  • Resolución: 300ppp
  • Modo de color: CMYK
  • Fondo: Gris oscuro (C60 M50 Y50 K50)
documento nuevo para texto tipo nube
Propiedades del nuevo documento

Una vez creado el nuevo documento en Photoshop, añadimos unas guías a modo de márgenes con espacio suficiente para manipular el texto que pongamos.

Arrastrando las guías desde la zona de las reglas, las colocamos a 2cm por cada lado del documento.

guías en el documento de photoshop
Guías añadidas al documento

Crear la capa principal del texto

Para esta ocasión elegiremos una fuente gruesa con formas redondeadas, que permita generar un volumen y efectos agradables.

  • Tipografía: Lilita One (Descarga gratis aquí)

Con la herramienta texto escribimos cualquier palabra, que quede centrada dentro de las guías, y asignamos un color diferente al blanco. Ese texto podemos modificarla después las veces que queramos.

Texto para crear el efecto nube
Texto para el efecto nube

Seleccionamos la capa que contiene el texto, picamos con el botón de la derecha del ratón sobre ella o desplegamos el menú del panel de las capas y la convertimos en un «Objeto inteligente«..

convertir texto en objeto inteligente en Photoshop
Convertir texto en objeto inteligente

Para editar el objeto inteligente podemos picar dos veces sobre el icono de la capa o volver a desplegar el menú del panel de de las capas y seleccionar «Editar contenido».

Se abrirá otra pestaña en Photoshop con el texto y el fondo transparente, donde hay que ampliar el tamaño del lienzo manteniendo el tamaño de la capa.

En el menú superior vamos a «Imagen > Tamaño de lienzo» y añadimos suficiente espacio para que respire el texto.

Al guardar los cambios, estos se trasladarán automáticamente al documento original, por lo que podemos cerrar la pestaña del objeto inteligente sin problemas.

Cambiar tamaño de lienzo del objeto inteligente en Photoshop
Tamaño de lienzo del objeto inteligente

Crear capas para configurar los efectos

Antes de empezar a dar valores a los estilos de capa necesitamos duplicar 4 veces la capa del objeto inteligente. Para eso seleccionamos la capa y presionamos cuatro veces «ctrl + J» en Windows o «cmdo. + J» en Mac.

Si no manejamos bien los atajos de teclado, podemos volver a desplegar el menú del panel de las capas y buscar la opción «Duplicar capa».

Renombramos las capas como «efecto 1», «efecto 2», «efecto 3» y «efecto 4» de arriba a abajo.

Las cuatro capas tendrás el valor «Relleno» al 0%.

Porcentaje de relleno de la capa 1
Relleno al 0% en las capas

Seleccionamos las cuatro nuevas capas y las agrupamos en una carpeta presionando «ctrl + G» en Windows o «cmdo. + G» en Mac. O desde el menú del panel de las capas buscamos «Nuevo grupo a partir de capas…».

Nombramos el grupo como «efecto nube».

La capa principal del objeto inteligente será la que manipulemos una vez creado todo el proceso para cambiar el texto o la tipografía, así que como no la necesitamos la ocultamos picando en el icono de vista.

grupo de capas para texto tipo nube con photoshop
Crear capas para los efectos

Configuración de los estilos de capa

Los valores a continuación pueden variar dependiendo del tamaño del archivo y del tipo de fuente utilizado, por lo que es posible que haya que modificarlos en cada caso y según vuestra apreciación.

Para editar los estilos, en cada capa se pica con el ratón dos veces al lado del nombre de la capa, o teniendo seleccionada la capa, se abre el menú superior «Capa > Estilo de capa > Opciones de fusión».

Estilos de capa para «efecto 1»

  • SOMBRA INTERIOR:
    • Fusión: Normal
    • Color: Azul (C70 M10 Y0 K0)
    • Opacidad: 50%
    • Ángulo: -60º (desactivar luz global)
    • Distancia: 10px
    • Retraer: 40%
    • Tamaño: 10px
Valores sombra interior "efecto 1"
Valores sombra interior «efecto 1»
Resultado de la capa "efecto 1" (resto de capas ocultas)
Resultado de la capa «efecto 1» (resto de capas ocultas)

Estilos de capa para «efecto 2»

  • SUPERPOSICIÓN DE COLORES:
    • Fusión: Normal
    • Color: Blanco (C0 M0 Y0 K0)
    • Opacidad: 100%
Valores superposición de colores "efecto 2"
Valores superposición de colores «efecto 2»
  • SOMBRA PARALELA:
    • Fusión: Multiplicar
    • Color: Negro (C40 M0 Y0 K100)
    • Opacidad: 25%
    • Ángulo: 120º (desactivar luz global)
    • Distancia: 15px
    • Retraer: 0%
    • Tamaño: 0px
Valores sombra paralela "efecto 2"
Valores sombra paralela «efecto 2»
Resultado de la capa "efecto 2" (resto de capas ocultas)
Resultado de la capa «efecto 2» (resto de capas ocultas)

Estilos de capa para «efecto 3»

  • TRAZO:
    • Tamaño: 20px
    • Posición: Exterior
    • Fusión: Normal
    • Opacidad: 100%
    • Color: Azul (C70 M10 Y0 K0)
Valores trazo "efecto 3"
Valores trazo «efecto 3»
  • RESPLANDOR EXTERIOR:
    • Fusión: Normal
    • Opacidad: 100%
    • Color: Blanco
    • Técnica: Más suavizado
    • Extender: 100%
    • Tamaño: 40px
Valores resplandor exterior «efecto 3»
Resultado de la capa «efecto 3» (resto de capas ocultas)

Estilos de capa para «efecto 4»

  • RESPLANDOR EXTERIOR:
    • Fusión: Multiplicar
    • Opacidad: 25%
    • Color: Negro (C40 M0 Y0 K100)
    • Técnica: Más suavizado
    • Extender: 75%
    • Tamaño: 60px
Valores resplandor exterior "efecto 4"
Valores resplandor exterior «efecto 4»

Esta capa hay que desplazarla hacia abajo y la derecha para crear un efecto de sombra bajo el resto de capas.

Resultado de la capa «efecto 4» (resto de capas ocultas)

Al mostrar todas las capas podemos observar el resultado de todo el proceso. Si no nos gusta algún detalle podemos rectificar los valores de los «estilos de capa» hasta encontrar el que más nos guste.

Resultado final (todas las capas de efectos visibles)
Juan Martín

Juan Martín

Soy el creador y autor del blog «J Solución creativa», una persona como tú que intenta ganarse la vida en internet. Intento llenar mi blog con contenido útil que pueda ayudar a quien lo necesite y conseguir, con esfuerzo, generar autoempleo y vivir de ello. Si te parece interesante puedes apuntarte a mi newsletter.

Deja un comentario

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Al dejar un comentario se solicitan datos como tu email y nombre que se almacenan en una cookie para que no tengas que volver a completarlos en próximas visitas. Para enviar un comentario debes aceptar nuestra política de privacidad.

– Responsable de los datos: Juan Martín Pascual
– Finalidad: Controlar spam, gestión y moderación de comentarios
– Legitimación: Tu consentimiento expreso
– Destinatario: Base de datos alojada en SiteGround Spain S.L. dentro de la UE. Ver política de privacidad de Siteground.
– Derechos: Acceso, rectificación, supresión, limitación, portabilidad y olvido de sus datos

Te aviso de las novedades

Suscríbete a mi boletín y te enviaré el nuevo contenido cuando se publique

VERIFICACIÓN

Para terminar, sólo tienes que confirmar el correo que te hemos enviado.

Pin It on Pinterest

Share This
Ir al contenido