Divi Tips n°111

Aplica máscaras y formas a tus imágenes con Divi

Publicado el 23/02/2021 | 2 comentarios

1.170 palabras

5

Puedes usar máscaras en tus imágenes para cambiar su forma tradicional, esto le daría una originalidad a tu diseño.

Por ejemplo, puedes añadir una máscara redonda, triangular o de estrella. En resumen, todo es posible. Y eso es lo que te propongo descubrir en este nuevo tutorial : cómo aplicar máscaras a tus imágenes con Divi...

Encontrará explicaciones detalladas y un vídeo explicativo.

Aviso: este artículo contiene enlaces de afiliación que reconocerá fácilmente. Los enlaces clásicos están en púrpura y los enlaces patrocinados están en rosa.

1 - ¿Qué es una máscara y por qué utilizarla?

Una máscara es un término que se utiliza a menudo en el diseño gráfico y en los programas informáticos especializados, como el photoshop, por ejemplo. Es una "máscara" que cubre una imagen para darle la forma deseada.

En la web, puedes utilizar todo tipo de máscaras para dar formas originales a tus imágenes. Es un cambio del formato clásico que vemos en todas partes y puede dar un aspecto muy gráfico a su diseño de la página.

¿Lo sabías? Puede probar Divi de forma gratuita visitando en esta página y haciendo clic en "PRUEBA GRATUITA

2 - Hacer un cuadro redondo u ovalado con esquinas redondeadas

En este caso, no podemos hablar de una máscara, pero creo que puede ayudar a entender lo que sucede a continuación.

De hecho, es el Propiedad CSS borde-radio que simplemente redondea las esquinas de una imagen. Si su imagen original es cuadrada, será fácil hacerla perfectamente redonda aplicando un radio de borde del 100% y la buena noticia es que Divi le permite hacer esto en 2 clics:

Rendre une image ronde avec Divi
Una imagen cuadrada se convierte en redonda utilizando la propiedad border-radius al 100%.

Como puede ver en la imagen anterior, puede redondear fácilmente las esquinas de una imagen cuadrada yendo a la pestaña Estilo > Borde y estableciendo cada esquina con un valor de 100% (no 100px).

En los 3 ejemplos =

  • Ejemplo 1: los ángulos son 0% => la imagen es cuadrada
  • Ejemplo 2: las 4 esquinas son 100% => la imagen se vuelve redonda
  • Ejemplo 3: sólo un ángulo está al 0% y los otros 3 al 100% => se obtiene una figura asimétrica que ofrece algo de estilo 😜

Pero hay un pero. Esto fue posible porque mi imagen original era cuadrado :

Rendre une image ovale à partir d'une image rectangle
Una imagen rectangular no puede convertirse en redonda

Si observa la imagen anterior, podrá ver rápidamente que el uso de la propiedad border-radius en un imagen con relación al paisajeNo se puede obtener una imagen redonda. Su imagen se volverá ovalada y eso es bastante lógico.

Sin embargo, puede satisfacer algunas necesidades de diseño, supongo...

Pero entonces, ¿cómo se consigue una imagen redonda a partir de una imagen rectangular?

No se demore. Descubra el tema Divi aquí !

3 - Aplicar una máscara redonda a una imagen con Divi

La respuesta está por llegar... Ya que no puedes obtener una imagen redonda a partir de una imagen apaisada, puedes utilizar otra función de Divi: añadir un degradado a la imagen... Un gradiente poco habitual, por supuesto, pero un gradiente al fin y al cabo.

Así es como se hace:

  1. Primero añada un módulo de texto
  2. Borrar el texto de espera
  3. En la pestaña Contenido > Fondo de la configuración del módulo de texto, añada una imagen de fondo.
  4. En esta fase, todavía no se puede ver la imagen porque la "caja" es todavía demasiado estrecha.
  5. Vaya a la pestaña Estilo > Espaciado > Margen interior para añadir unos 150px a la parte superior e inferior (los valores pueden cambiar dependiendo del tamaño de la imagen). Aparece tu imagen.
Image masque radial - partie 1
Añadir un módulo de texto y colocar una imagen de fondo

Entonces:

  1. Vuelva a la pestaña Contenido > Fondo para añadir un degradado.
  2. El primer valor de su gradiente debe ser un color transparente y el segundo valor debe ser el color de su sección. Para mi ejemplo, mi sección es blanca, así que elijo el blanco. Si mi sección fuera negra o roja, habría elegido esos colores.
  3. A continuación, coloque este gradiente en la imagen, marcando la opción "Esta es la imagen de fondo del título..
  4. Cambie el gradiente a RADIAL en lugar de LINEAR, y luego inicie y termine la posición al 50%. Ahora tienes una máscara redonda que cubre tu imagen, ya sea cuadrada o rectangular.
  5. Si lo desea, puede añadir texto en la parte superior o utilizar otras funciones de Divi para añadir originalidad: girar el módulo, animarlo o crear un efecto zoom por ejemplo...
Image masque radial - partie 2
Añade un degradado radial a la imagen para simular una máscara redonda

4 - Añadir un bisel a la imagen

También puedes hacer un bisel en tu imagen, para ello puedes seguir el tutorial anterior (el del capítulo 3) hasta el punto número 8, luego es el tipo de degradado el que cambia:

Image avec biseau
Imagen con ángulo biselado

Para este ejemplo, he elegido :

  • Gradiente lineal (en lugar de radial)
  • Dirección del gradiente: 111° por ejemplo
  • Posición inicial: 79% por ejemplo
  • Posición final 50%, por ejemplo.

Pero, por supuesto, utilice los valores que desee para conseguir el aspecto deseado.

5 - Utilice una máscara de cualquier forma (estrella, corazón, triángulo, etc.)

Para este último consejo, necesitarás un software de terceros como Affinity Designer, Illustrator o Photoshop por ejemplo, ya que Divi por sí solo no será suficiente...

Así que, en primer lugar, tendrá que hacer sus propias máscaras en su software:

Créer un masque dans le logiciel de retouche d'image
Máscara de corazón hecha con Affinity Designer

Con la herramienta de forma, puedes crear la máscara que desees y elegir el color adecuado. Asegúrate de exportarlo en formato PNG para mantener la transparencia.

De vuelta en Divi :

  1. Añade un Módulo de imagen
  2. Importe su máscara en formato PNG
  3. En la pestaña Contenido > Fondo, añada la imagen de fondo que desee
  4. Puede activar el parallax para dar un efecto de deslizamiento para desplazarse por la página si lo desea.
ajouter un masque sur une image
Añadir una imagen de fondo a una máscara PNG

Por último, no olvides establecer un color de fondo para tu sección (5), debe ser del mismo color que tu máscara si quieres que el efecto tenga éxito:

La couleur section identique à la couleur du masque
El color de la sección debe ser idéntico al de la máscara

6 - Crear máscaras con Divi Mask

Si las soluciones anteriores no satisfacen sus necesidades, la alternativa es utilizar una extensión que le permita crear sus máscaras directamente desde el Visual Builder.

Divi Mask plugin
Plugin Divi Mask

Divi Mask le permite hacer precisamente eso con formas preconfiguradas y editables o con formas personalizadas (importación de imágenes SVG). Añade un nuevo módulo al Divi Builder con estilos únicos para imágenes y fondos.

Se trata de una extensión premium (24 dólares) que puedes encontrar en la página web mercado de Elegantthemes. También le invito a descubra el tutorial sobre este tema.

7 - Máscara en las imágenes: ¡el video tutorial!

Como acabas de ver, ¡las máscaras en tus imágenes son muy fáciles de hacer! En el vídeo encontrarás la realización de estos efectos y algunos consejos adicionales:

Si la vidéo ne s’affiche pas, voici le lien

¿Necesitas más recursos sobre Divi? Visite el blog de ElegantThemes que está lleno de ideas y tutoriales. O aprenda a utilizar este tema de forma eficaz con mi formación en Divi !

Créer des masques avec Divi
Create Divi masks simply
Crea mascaras con Divi
obtenir divi bouton
quizz divi bouton
newsletter bouton
formation divi bouton
guide divi pdf bouton
bouton support divi

Puede que a ti también te guste:

Comment changer une image au survol de la souris ?

¿Cómo cambiar una imagen al pasar el ratón por encima?

Si no estás usando las opciones de hover disponibles en Divi, ¡te estás perdiendo algo! Aquí tienes un ejemplo de cómo utilizarlos que te puede resultar útil. En este tutorial y vídeo, te muestro cómo cambiar una imagen al pasar el ratón por encima.

2 Commentaires

  1. ivan chosse

    Merci! ça donne des idées! ah si je pouvais avoir vos compétences!!! hihihi

  2. Lycia Diaz

    Ça a à venir Ivan !

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.