Cómo crear imágenes de texto Knockout para encabezados Divi impresionantes


Las imágenes de texto que noquean pueden abrir muchas oportunidades para diseñar encabezados únicos en Divi. La creación de un efecto de texto knockout se puede hacer fácilmente usando un editor de fotos como Photoshop usando la opción incorporada de fusión de knockout. Básicamente, esto le permite crear imágenes con texto transparente (que parece haber sido eliminado de la imagen).

Y las imágenes de texto eliminatorias son realmente divertidas de usar en Divi. Debido a que el texto de la imagen es transparente, puede agregar cualquier tipo de fondo detrás del texto para diseños únicos.

En este tutorial, le mostraré cómo crear una imagen con un efecto de texto extraordinario usando Photoshop. Luego, también cubriré cómo usar la imagen en Divi para crear un hermoso encabezado en minutos.

La inspiración para este diseño proviene de uno de nuestros sitios Divi favoritos en Marx creativo.

Vistazo

Aquí hay un adelanto del diseño que crearemos en este tutorial.

Aquí el diseño final con el efecto de paralaje CSS establecido para la imagen de fondo del módulo de imagen.

texto eliminatorio

Así es como se ve en un dispositivo móvil.

texto de nocaut

Cómo crear una imagen de texto Knockout usando Photoshop

(incrustar) https://www.youtube.com/watch?v=xzLfk64OlW0 (/ incrustar)

Suscríbete a nuestro canal de Youtube

Para crear una imagen de texto noqueado en Photoshop, primero cree un nuevo documento y establezca las dimensiones en un ancho de 700 px y una altura de 300 px.

texto eliminatorio

A continuación, haga clic en el color de primer plano (o la herramienta Cuentagotas) y configure el color de primer plano en # 121212.

texto eliminatorio

Utilice la herramienta Bote de pintura para colorear toda la capa. Esto servirá como color de fondo de la imagen.

texto eliminatorio

Ahora es el momento de agregar nuestro texto a la imagen. Utilice la herramienta Texto horizontal para agregar una nueva capa de texto sobre la capa de fondo. Puedes diseñar el texto como quieras usando las opciones de texto en la parte superior. Para este ejemplo, estoy usando lo siguiente:

Fuente: Poppins
Peso de fuente: semi-negrita
Color: #ffffff (puede ser cualquier cosa porque el texto se volverá transparente)
Tamaño del texto: 260px
Alineación del texto: centro

Luego, escriba el texto que desee (estoy usando "Divi") y centre el cuadro de texto sobre la capa de fondo.

texto eliminatorio

Haga clic derecho en la capa con el texto y seleccione "Opciones de fusión" en el menú contextual.

texto eliminatorio

En la sección Fusión avanzada, busque la opción de eliminación y seleccione Poco profundo en el menú desplegable.

Luego, configure la opción Opacidad de relleno en 0%.

texto eliminatorio

texto de nocaut

Exportar el archivo seleccionando Archivo> Exportar> Guardar para Web (heredado).

texto eliminatorio

Asegúrese de guardar el archivo como png para preservar la transparencia en la imagen.

texto eliminatorio

Uso de la imagen de texto Knockout para crear un encabezado en Divi

Ahora que su imagen está lista, puede comenzar a diseñar su encabezado en Divi.

Crear una nueva página

Primero, cree una nueva página. Asigne un título a su página y haga clic para usar Divi Builder.

texto eliminatorio

Seleccione la opción "Construir desde cero".

texto eliminatorio

Crear el diseño del encabezado

Luego, cree una sección regular con una fila de una columna.

texto eliminatorio

Después de eso, agregue un módulo de imagen a la fila.

texto eliminatorio

Cargue la imagen eliminatoria que acaba de crear en el módulo de imagen.

texto eliminatorio

A continuación, agregue una imagen de fondo al módulo de imagen con un efecto de paralaje (True Parallax o CSS).

texto eliminatorio

Haga que el centro de la imagen esté alineado y dé a la imagen un ancho personalizado que coincida con el ancho de la imagen real.

  • Alineación de la imagen: centro
  • Ancho: 700px

texto de nocaut

Actualice la configuración de la fila de la siguiente manera:

  • Relleno personalizado: 0px arriba, 0px abajo

texto eliminatorio

Dale a la sección el mismo color de fondo que usaste al crear la imagen eliminatoria. Abra la configuración de la sección y actualice lo siguiente:

  • Color de fondo: # 121212

texto eliminatorio

Para agregar texto de encabezado adicional, primero agregue una nueva fila de dos columnas.

texto eliminatorio

Luego, agregue un módulo de texto a column2.

texto eliminatorio

Actualice el contenido del módulo de texto de la siguiente manera:

divi web design

Your content goes here. Edit or remove this text inline or in the module Content settings.

texto eliminatorio

Luego actualice la configuración de diseño de la siguiente manera:

  • Fuente de texto: Poppins
  • Tamaño del texto del texto: 16px
  • Fuente de encabezado: Poppins
  • Color del texto del encabezado: # 9b89f4

La fuente del texto coincide con la fuente utilizada para la imagen de texto eliminada.

texto eliminatorio

¡Eso es! Ahora tiene un diseño de encabezado único con un efecto de texto extraordinario.

Resultado final

Aquí el diseño final con el verdadero efecto de paralaje establecido para la imagen de fondo del módulo de imagen.

texto de nocaut

Aquí el diseño final con el efecto de paralaje CSS establecido para la imagen de fondo del módulo de imagen.

texto eliminatorio

Así es como se ve en un dispositivo móvil.

texto de nocaut

Creación de una imagen de logotipo Knockout en Photoshop

El efecto knockout también se puede aplicar a las imágenes. Por ejemplo, puede crear una imagen de logotipo eliminatoria. Para hacer esto, cree un nuevo documento en Photoshop. Darle la capa base del color de su elección. Luego, arrastre su logotipo al documento para crear una nueva capa. Asegúrese de que su logotipo sea un png con fondo transparente. Luego, centra el logo dentro del documento.

texto de nocaut

Elija la herramienta Varita mágica. Luego mantén presionada la tecla Mayús y haz clic en los diferentes elementos que componen tu logo.

texto eliminatorio

Con los elementos seleccionados, haga clic derecho en la capa de la imagen del logotipo y seleccione "Opciones de fusión".

texto eliminatorio

En la sección Fusión avanzada, busque la opción de eliminación y seleccione Poco profundo en el menú desplegable.

Luego, configure la opción Opacidad de relleno en 0%.

texto de nocaut

Exporte el archivo como png. Luego, siga los mismos pasos para agregar la imagen del logotipo eliminatorio al encabezado de su página utilizando Divi Builder.

A continuación, se muestra un ejemplo de cómo se verá un logotipo eliminatorio.

texto eliminatorio

Pensamientos finales

Crear un texto o una imagen de logotipo noqueados no es realmente tan difícil de hacer con un editor de fotos como Photoshop. Y, una vez que tenga esa imagen eliminatoria, puede usarla para crear un encabezado único para su sitio web Divi. Divi tiene tantas opciones integradas para agregar fondos personalizados que se mostrarán a través de la transparencia de su imagen. Espero que esto te sirva de inspiración para crear hermosos diseños para tu próximo proyecto.

Espero tener noticias tuyas en los comentarios.

¡Salud!