Bienvenido a la última parte de esta serie de 2 partes sobre cómo recrear nuestros filtros de color, efectos y ejemplos de modo de fusión con Divi . Puede consultar nuestra página de demostración de filtros para ver estos ejemplos y tener una idea de lo que crearemos juntos.
En el último tutorial, recreé las secciones n.º 1, n.º 2 y n.º 3 de la página de demostración de filtros. Destaqué cómo usar los modos de fusión Luminosity, Multiply y Overlay combinados con una serie de filtros y efectos para crear algunos ejemplos inspiradores. Estoy emocionado de saltar al extremo derecho y terminar donde lo dejamos.
Hoy, le mostraré cómo recrear las secciones n.° 4 y n.° 5 de la demostración, además de resaltar los diferentes filtros, efectos y modos de fusión (como Inclusión y Pantalla) utilizados en esas secciones. Incluso revisaré cómo usar filtros y efectos para los módulos de mapa y video.
Empecemos.
Aquí están las dos secciones que crearemos hoy.
Cómo recrear los filtros de color, efectos y ejemplos de modo de fusión con Divi (Parte 2)
Suscríbete a nuestro canal de Youtube
Recreando la Sección #4
Modo de fusión utilizado: filtros de exclusión
y efectos utilizados: matiz, saturación, inversión
Esta sección utiliza el modo de fusión Exclusión combinado con filtros y efectos para crear un color gris consistente para la imagen de fondo que no sacrifica demasiada saturación de color. Esta es una excelente alternativa para usar un fondo superpuesto siempre que desee mantener los detalles de una imagen de fondo. La combinación Exclusion en el logotipo es definitivamente un punto culminante en la forma en que muestra una versión más clara de los colores de fondo. Así es como lo construyes.
Agregar una sección regular
Primero agregue una nueva sección regular con una fila de una columna. Antes de agregar nuestro primer módulo, acceda a la configuración de la sección y, en la pestaña de contenido, agregue una imagen de fondo. Aquí está el que estoy usando …
Además, seleccione Usar efecto de paralaje en «SÍ» y use el método True Parallax .
En la pestaña Diseño…
Relleno personalizado: 0px arriba, 0px a la derecha, 0px abajo, 0px a la izquierda
Guardar ajustes
Editar la fila
Después de que la imagen de fondo de su sección esté en su lugar, hagamos que la fila abarque todo el ancho de la sección y agreguemos un color de fondo para usar en nuestra combinación de exclusión. Vaya a Configuración de fila y actualice lo siguiente:
En la pestaña Contenido…
Color de fondo: #00ffaa
En la pestaña Diseño…
Usar ancho personalizado: SÍ
Unidad: %
Ancho personalizado: 100 %
Relleno personalizado: 288 px arriba, 0 px a la derecha, 288 px abajo, 0 px a la izquierda
Tono: 208 grados
Saturación: 0 %
Invertir: 100 %
Modo de fusión: exclusión
Agregar la imagen del logotipo
Recuerde que todo lo que agregue dentro de la fila heredará el modo de fusión que se establece en la configuración de la fila
(en este caso, es el modo de fusión de Exclusión). Agreguemos el logotipo en el centro de la sección ingresando un módulo de imagen en la fila de una columna y en la pestaña de contenido de la configuración de su imagen, cargue la imagen de su logotipo. Aquí está el que estoy usando:
En la pestaña Diseño…
Alineación de la imagen: Centro
Animación: Rollo
Intensidad de la animación: 31 %
Opacidad inicial de la animación: 100 %
Como puede ver, el logotipo negro hereda la combinación de exclusión al «cancelar» cualquier negro detrás de él y el resultado es un fondo más brillante para el logotipo. ¡Fresco!
Eso es todo para la sección #4.
Recreando la Sección #5
Modo de fusión utilizado: filtros de pantalla
y efectos utilizados: saturación, brillo y contraste
Esta sección es probablemente mi diseño favorito de todos. Puede que me equivoque, pero parece que un diseñador podría tardar horas en crearlo, no minutos. No puedo dejar de pensar en el valor que esto le traería a un freelancer que lucha con el lado del diseño de las cosas (como yo). Lo más destacado aquí es el modo de fusión Pantalla que multiplica las capas de abajo y produce una versión más ligera de la mezcla que la del modo de fusión Multiplicar que vimos en la sección 2. A continuación se explica cómo crearlo.
Crear una sección regular
Cree una sección regular con una fila de 2 columnas (1/2 1/2) y no agregue ningún módulo para que podamos actualizar la configuración de nuestra sección.
Dado que hemos estado usando la misma configuración de diseño básica para cada una de nuestras secciones a lo largo de las demostraciones, sigamos adelante y usemos la opción de clic derecho y copiemos el estilo de la sección anterior y péguelo en nuestra nueva sección. Ahora todo lo que tenemos que hacer es cambiar la imagen de fondo. Aquí está el que estoy usando …
Editar la fila
Ahora que tenemos nuestra sección completa, pasemos a editar la configuración de nuestra fila.
En la pestaña de contenido…
Color de fondo de la columna 1: #ffffff
En la pestaña de diseño…
Hacer esta fila de ancho completo: SÍ
Usar ancho de medianil personalizado: SÍ
Ancho de medianil: 1
Igualar alturas de columna: SÍ
Relleno personalizado: 0px superior, 0px derecha, 0px inferior, 0px columna izquierda
1 relleno personalizado: 40px arriba, 40px derecha, 40px abajo, 40px izquierda
Modo de fusión: Pantalla
Guardar ajustes
En la columna de la izquierda agregue un módulo de texto con el siguiente encabezado:
|
01
|
<h2>The Only Tool You'll Ever Need</h2> |
Actualice las opciones en la pestaña Diseño…
Seleccione la pestaña H2
Encabezado 2 Fuente: Lato
Encabezado 2 Peso de fuente:
Encabezado pesado 2 Alineación de texto: Encabezado central
2 Tamaño de texto: 9vw (escritorio), 16vw (tableta), 40px (teléfono inteligente)
Encabezado 2 Espaciado entre letras: -0.02em
Veamos cómo se ve cuando agrega un botón con el modo de combinación Pantalla seleccionado. Agregue un módulo de botón debajo del módulo de texto actual e ingrese el botón Texto «Descargar» en la pestaña de contenido.
En la pestaña Diseño…
Alineación del botón: Centro
Usar estilos personalizados para el botón: SÍ
Tamaño del texto del botón: 24 px
Color del texto del botón: #ffffff
Color de fondo del botón: #a58461
Ancho del borde del botón: 0 px
Espaciado entre letras del botón: 4 px
Fuente del botón: Lato
Peso de la fuente: Pesado
Estilo de fuente: Mayúsculas (TT)
Mostrar icono de botón: NO
Color de fondo de botón flotante: #000000
Espaciado de letras de botón flotante: 4px
Margen personalizado: 80 px en la parte superior
Relleno personalizado: 12 px en la parte superior, 24 px a la derecha, 12 px en la parte inferior, 24 px a la izquierda
Agregue la segunda imagen en la columna derecha
Ahora estamos listos para nuestra segunda imagen en la columna de la derecha. Agregue un módulo de imagen en la columna de la derecha y cargue su imagen en la pestaña de contenido .
En la pestaña Diseño…
Forzar ancho completo: SÍ
Saturación: 0 %
Brillo: 113 %
Contraste: 173 %
Uso de las opciones de filtro en mapas y videos
En el pasado, los módulos de mapa y video tenían opciones de diseño limitadas. Esto se debe en gran parte al hecho de que ambos son incrustaciones. El módulo de mapa incorpora un mapa de Google y el módulo de video incorpora un video. Cambiar los colores de un mapa de Google requeriría un código avanzado para que se vea de la manera que desea. Y aunque puede ajustar la configuración de colores en sus propios videos durante el proceso de edición, esto no es tan fácil cuando el video ya está creado e incrustado en su página. Pero estas opciones de filtro han agregado una poderosa herramienta de diseño que le brinda cierto control sobre la configuración de color en el frente.
La mejor manera de aprender a usar estos filtros con estos módulos es probarlo usted mismo. Si recién está comenzando, es un poco como ajustar la configuración de pantalla en su televisor o monitor. A veces tienes que jugar con él para conseguirlo exactamente como te gusta.
Nota: Puede notar que el Módulo de mapa tiene dos conjuntos de filtros dentro de la pestaña de diseño de configuración del mapa. Esto se debe a que un conjunto controla los efectos de filtro para el mapa sin cambiar los pines. El otro conjunto también controla el pin.
Si se confunde y desea obtener más información sobre todos estos modos de fusión y efectos de filtro, puede consultar estos enlaces:
http://photoblogstop.com/photoshop/photoshop-blend-modes-explained
https://helpx.adobe.com/premiere-pro/using/blending-modes.html
Compatibilidad entre navegadores
Las opciones del modo de fusión dentro del generador visual utilizan la propiedad css mix-blend-mode para crear los efectos de fusión. La propiedad css mix-blend-mode es compatible con la mayoría de los navegadores . IE no lo admite actualmente y también hay algunas limitaciones dentro de Safari.
Los efectos de filtros para el constructor usan la propiedad Filter css que es compatible con casi todos los navegadores (incluso Edge). Sin embargo, IE todavía no es compatible.
Terminando
Espero que hayan disfrutado de esta serie de 2 partes. Mi objetivo número 1 al escribir esto es presentarle nuevas opciones de diseño que lo inspirarán a crear mejores sitios web. Los ejemplos utilizados aquí no deben considerarse como un todo, sino como fragmentos individuales destinados a despertar su imaginación para explorar las posibilidades. Elegí no abordar todas las secciones en la página de demostración simplemente porque las otras secciones usaban técnicas similares de mezcla y filtro y no quería sobrecargar la publicación con repeticiones.
Antes de irme, quiero animarte a que te familiarices con estos modos de fusión y filtros. Pueden ser un poco confusos, pero he descubierto que tener incluso una comprensión rudimentaria de lo que hacen estas opciones ahorrará tiempo y ayudará en el proceso creativo.
Como siempre, espero saber de usted en los comentarios.
¡Salud!