Consejos Divi No.111

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

Actualizado el 23/02/21

1153 palabras

4 minutos de lectura
2 comentarios

Este artículo contiene enlaces de afiliados reconocibles por el icono porcentaje (%) → Soy un enlace de afiliado

Podrías usar máscaras en tus imágenes para cambiar su forma tradicional, daría una originalidad a su diseño.

Por ejemplo, usted podría añadir un máscara redonda, triángulo o estrella ¡Por ejemplo! De todos modos, todo es posible. Y eso es lo que te sugiero que descubras en este nuevo tutorial: cómo aplicar máscaras a sus imágenes con Divi

Encontrará explicaciones detalladas y un video explicativo.

1 – ¿Qué es una máscara y por qué usarlo?

Una máscara es un término utilizado a menudo en gráficos y software especializado como fotoshop, por ejemplo. Es una "caché" que cubre una imagen para darle la forma deseada.

En la web, usted podría utilizar todo tipo de máscaras para dar formas originales a sus imágenes. Cambia el formato clásico que ves en todas partes y puede dar un aspecto muy gráfico a tu diseño.

¿Lo sabías? Puedes probar Divi gratis visitando en esta página y haciendo clic en "Pruébalo GRATIS"

2 - Hacer una imagen redonda o ovalada con esquinas redondeadas

En este caso, no podemos hablar de máscaras, pero creo que puede ayudarte a entender lo siguiente...

Es, de hecho, el CSS property border-radius que simplemente permite redondear los ángulos de una imagen. Si tu imagen original es cuadrado, será fácil devolverlo perfectamente redondo aplicando a 100% frontera-radius y la buena noticia es que Divi te permite hacerlo en 2 clics:

Haga una imagen redonda con Divi
Una imagen cuadrada se vuelve redonda usando la propiedad border-radius 100%

Como se ve en la imagen anterior, puede redondear fácilmente las esquinas de una imagen cuadrada yendo a la pestaña Estilo Frontera y definir cada ángulo con un valor del 100% (no 100px).

En los 3 ejemplos =

  • Ejemplo 1: ángulos son 0% = confianza imagen es cuadrada
  • Ejemplo 2: Los 4 ángulos son de 100% = Imagen de confianza se vuelve redondo
  • Ejemplo 3: Sólo un ángulo es 0% y el otro 3 son 100% = curso obtienes una figura asimétrica que ofrece cierto estilo

¡Pero hay un trasero! Esto fue posible porque mi imagen original era cuadrado :

Haga una imagen ovalada de una imagen rectángulo
Una imagen rectángulo no puede llegar a ser redonda

Si miras la imagen anterior, comprenderás rápidamente que usando la propiedad border-radius on a relación imagen-paisajeNo podemos conseguir una foto redonda. Tu imagen se convertirá en oval y tiene absolutamente sentido.

Sin embargo, esto puede satisfacer alguna necesidad de diseño, imagino...

Pero entonces, ¿cómo conseguir una imagen redonda desde Imagen rectangular ???

¡No te demores! Descubre el tema Divi aquí. !

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

La respuesta viene... Como no puede obtener una imagen redonda de una imagen en formato paisajístico, puede utilizar otra función de Divi: Agregar un gradiente a la imagen... Un gradiente particular, ciertamente, pero un gradiente de todos modos!

Así es como:

  1. Primero añadir un Módulo de texto
  2. Eliminar el texto de espera
  3. En la pestaña Contenido > Antecedentes configuración del módulo de texto, añadir una imagen de fondo.
  4. En este punto, usted no ve la imagen todavía porque "la caja" es todavía demasiado estrecha.
  5. Vaya a la pestaña Estilo > Spacing > Margin interno añadir unos 150 px en la parte superior e inferior (los valores pueden cambiar dependiendo del tamaño de las imágenes). Su imagen aparece.
Imagen de máscara radial - parte 1
Añadir un módulo de texto y colocar una imagen de fondo

Siguiente:

  1. Vuelve a la pestaña Contenido > Antecedentes para añadir un gradiente.
  2. El primer valor de su gradiente debe ser color transparente y el segundo valor el color de su sección. Por mi ejemplo, mi sección es blanca, así que elijo blanco. Si mi sección fuera negra o roja, habría elegido estos colores.
  3. Luego coloca este gradiente en la imagen, comprobando la opción « Imagen de fondo del título ».
  4. Editar gradiente para hacerlo RADIAL para LINEARIO, luego la posición de inicio y final al 50%. Ahí tienes. una máscara redonda cubre su imagen, ya sea cuadrado o rectangular.
  5. Si lo desea, puede añadir texto arriba o utilizar otras características de Divi para traer originalidad: hacer una rotación del módulo, una animación o una efecto zoom Por ejemplo...
Imagen de máscara radial - parte 2
Añadir gradiente radial a la imagen para simular máscara redonda

4 - Añadir la bevel a la imagen

También puede hacer una bevel en su imagen, para esto, puede seguir el tutorial anterior (este del capítulo 3) al punto 8, entonces es el tipo de gradiente que cambia:

Imagen con bisel
Imagen con ángulo de bisel

Por este ejemplo, elegí:

  • Degradación lineal (en lugar de radial)
  • Dirección de gradiente: 111° por ejemplo
  • Posición de inicio: 79% por ejemplo
  • Posición final 50% por ejemplo.

Pero por supuesto, utilice los valores que desea obtener la renderización deseada.

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

Para este último consejo, necesitará software de terceros como Affinity Designer, Illustrator o Photoshop Por ejemplo, porque Divi solo no será suficiente...

Así que, al principio, tendrás que darte cuenta Máscaras personalizadas en su software:

Crear una máscara en el software editor de imágenes
Máscara de corazón hecha con Affinity Designer

Con la Formas, te darás cuenta de máscara de su elección y usted elegirá el Color adecuado. Asegúrese de exportar a Formato PNG para mantener la transparencia.

De vuelta en Divi:

  1. Añadir a Módulo de imagen
  2. Importa tu Máscara de formato PNG
  3. En la pestaña Contenido > Antecedentes, añadir la imagen de fondo de su elección
  4. Puedes activar el paralaja para dar un efecto deslizante desplazando la página si lo deseas.
añadir una máscara a una imagen
Añadir imagen de fondo a la máscara PNG

Finalmente, recuerde definir un color de fondo para su sección (5), debe ser del mismo color que tu máscara Si desea que el efecto sea exitoso:

La sección de color idéntica al color de la máscara
El color de la sección debe ser idéntico al color 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 permite crear sus máscaras directamente desde el Editor Visual.

plugin Divi Mask
Divi Mask Plugin

Divi Mask permite hacer esto con formas preconfigurables y editables o con formas personalizadas (importar imágenes SVG). Añade un nuevo módulo al Divi Builder con estilos únicos para imágenes y fondos.

Esta es una extensión premium (24$) que encontrarás en la Elegantthemes marketplace. También te invito a descubrir el tutorial sobre este tema.

7 - Máscaras sobre imágenes: el tutorial en vídeo!

Acabas de verlo, las máscaras en tus imágenes son muy fáciles de hacer! En el video, encontrará la realización de estos efectos y algunos consejos adicionales:

Si el vídeo no aparece, aquí está el enlace

¿Necesita más recursos en Divi? Visita Elegante Themes blog lleno de ideas y tutos! O aprender cómo utilizar eficazmente este tema a través de mi entrenamiento Divi !

Crear máscaras con Divi
Crear máscaras Divi simplemente
Crema mascaras con Divi

Obtener Divi

Entrenamiento Divi

Libro electrónico Divi

Consejos gratis

Cuestionario Divi

Entrenamiento en vivo

icono 256x256

Proudly translated by wpLingua, la extensión de traducción para WordPress ¡Que me desarrolle! SEO-Friendly / Automático / Editable

2 Observaciones

  1. ivan chosse
  2. Lycia Diaz

Presentar un comentario

Su dirección de correo electrónico no será publicada. Los campos obligatorios se indican con *

Este sitio utiliza Akismet para reducir indeseables. Más información sobre cómo se utilizan sus datos de retroalimentación.