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

Publicado el 23/02/2021 | 2 comentarios

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.

Anuncio: 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 programas especializados como 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.

¿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 las esquinas redondeadas

En este caso, no podemos hablar de una máscara, pero creo que puede ayudar a entender el resto...

De hecho, es el Propiedad CSS radio del borde que simplemente redondea las esquinas de una imagen. Si tu imagen original es cuadrada, será fácil hacerla perfectamente redonda aplicando un borde-radio del 100% y la buena noticia es que Divi te permite hacerlo 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 están al 0% => la imagen es cuadrada
  • Ejemplo 2 : las 4 esquinas están al 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 esperes más. 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 gradiente en 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

Siguiente:

  1. Vuelve 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 La opción "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 encima 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ñadir un gradiente radial en 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, entonces 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 obtener 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, porque Divi por sí solo no será suficiente...

Así que, en primer lugar, tendrá que crear sus máscaras personalizadas 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 formas, crearás la máscara que desees y elegirás 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 definir 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 - Creación de 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 a 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 eficiente con mi formación en Divi !

Créer des masques avec Divi
Create Divi masks simply
Crea mascaras con Divi
masques images divi

1.170 palabras

5

A ti también te debería gustar:

Page d’erreur 404 personnalisée : avec et sans le Divi Thème Builder

Página de error 404 personalizada: con y sin el Divi Theme Builder

¿Ha pensado en personalizar la página de error 404 de su sitio? ¿No? Pues debería hacerlo: no sólo es fácil de hacer, sino que también podría reducir su tasa de rebote. La idea es mantener en su sitio al internauta que pasaría por allí. Descubre el tutorial paso a paso + el vídeo.

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 *

Je souhaite recevoir les news du blog Astuces Divi !

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

Pínchalo en Pinterest

Acciones
Comparte esto