Si está buscando una manera de hacer que su sitio web se destaque, es posible que desee aprender a crear fondos de doble capa. La creación de fondos de doble capa ayudará a que su imagen de fondo cobre vida a través del movimiento. En el tutorial de hoy, le mostraremos cómo crear un diseño de fondo de doble capa con Divi . Este tutorial contiene tres partes:
- Preparación de dos archivos de imagen en Adobe Photoshop
- Creando el diseño dentro de Divi
- Aplicar los efectos de desplazamiento para animar el fondo
¡También podrá descargar los archivos JSON y de imagen de forma gratuita!
Hagámoslo.
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Descarga el diseño GRATIS
Para poner sus manos en el diseño gratuito, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando el formulario a continuación. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No será «resuscrito» ni recibirá correos electrónicos adicionales.
@media only screen and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:before { border-top-color: #ffffff !important; border-left-color: transparent !important; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !important; border-left-color: transparent !important; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:before { background: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !important } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 strong { font-family: «Open Sans», Helvetica, Arial, Lucida, sans-serif; }.et_bloom .et_bloom_optin_1 .et_bloom_form_container p, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p strong, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form input, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form button span { font-family: «Open Sans», Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !important;}
Descárgalo gratis
Únase al boletín informativo de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
1. Crear archivos de imagen en Photoshop
Elija la imagen del producto con un fondo limpio y ábralo en Photoshop
En la primera parte de este tutorial, vamos a crear los archivos de imagen que usaremos a lo largo del tutorial de Divi. Para crearlos, usaremos Adobe Photoshop, pero puede usar cualquier otro software de edición de imágenes de su elección. El efecto de imagen de fondo de doble capa funcionará mejor si la imagen con la que está trabajando tiene:
- Un enfoque claro en un objeto dentro de la imagen.
- un fondo limpio
La imagen de abajo es un ejemplo perfecto. Puede encontrar este archivo de imagen en la carpeta comprimida compartida en el área de descarga de esta publicación.
Duplicar capa
Una vez que haya abierto la imagen dentro de Photoshop, clone la capa original una vez. Estaremos trabajando en la capa duplicada.
Ocultar capa original
Para asegurarse de que vemos el resultado a medida que avanzamos en el tutorial, oculte la capa original.
Crear PNG a partir de la selección de objetos en la imagen
Use la herramienta de selección rápida en la placa
En total, necesitaremos dos archivos de imagen para el tutorial:
- un PNG del objeto, en este caso, la placa
- un JPEG del fondo sin el objeto
Estamos separando el objeto de su fondo, por lo que podemos manipularlos individualmente una vez dentro del entorno Divi.
Para comenzar a seleccionar el objeto, elija la «Herramienta de selección rápida» en la barra de herramientas e intente cubrir la mayor parte posible del objeto.
Seleccionar + Selección de máscara
Notarás que la selección de objetos aún no es lo suficientemente buena. Puede ajustar el aspecto de su selección utilizando la opción «Seleccionar y enmascarar» al hacer clic con el botón derecho en la selección. Una vez allí, puedes jugar con la opacidad, la suavidad, etc.
Crear una máscara de capa a partir de la selección
Aunque hemos creado una selección suave, todavía hay partes dentro del objeto que aún no están seleccionadas. Agregaremos manualmente estas partes a nuestra selección haciendo clic en el botón de máscara de capa que puede ver en la pantalla de impresión a continuación:
Máscara Finetune Selection Inside con pinceles
Una vez que se haya creado su máscara de capa, puede comenzar a usar un pincel para modificar la máscara de capa. Asegúrate de que tu máscara de capa esté seleccionada.
- Usar un pincel negro (#000) eliminará partes de su máscara de capa
- Usar un pincel blanco (#fff) agregará partes posteriores de su máscara de capa
Usa un pincel que no tenga demasiada dureza, para que no tengas que ser muy preciso.
Máscara de doble verificación con capa de color
Siempre puede volver a verificar su máscara de capa colocando una capa de color debajo de ella. Las capas de colores lo delatarán más fácilmente si te has perdido un lugar.
Guardar selección de PNG como archivo de imagen independiente
Crear nuevo archivo
Ahora que tiene la selección PNG de su objeto, puede clonar toda la capa, por lo que siempre puede volver a ella. En la siguiente parte, usaremos la capa duplicada para crear la imagen de fondo sin el objeto.
El tamaño de nuestro objeto es mucho más pequeño que el tamaño del archivo inicial, por lo que vamos a crear un nuevo archivo para nuestro objeto y traerlo.
Ajustar selección en archivo nuevo
Copie y pegue la capa con su máscara de capa dentro del nuevo archivo que ha creado.
Exportar para Web
Y exportarlo para web como PNG.
Comprimir archivo de imagen
Los archivos PNG con fondos transparentes tienden a tener un tamaño de archivo más grande, por lo que se recomienda comprimir el archivo con la herramienta de su elección.
Eliminar objeto en la imagen original
Seleccionar máscara de capa
¡Volvamos al archivo inicial de Photoshop! Allí, vamos a crear la imagen de fondo sin el objeto. Estamos usando la capa superior dentro de nuestro archivo para hacer eso. Primero, asegúrese de que su máscara de capa esté seleccionada.
Invertir máscara
Luego, ve a las propiedades de esta capa y haz clic en «Invertir».
Aplicar máscara de capa
Ahora notará que el objeto es transparente dentro de la capa inicial. Vamos a aplicar la máscara de capa a nuestra capa haciendo clic derecho y seleccionando «Aplicar máscara de capa».
Rellene el espacio vacío con la herramienta de clonación
Todavía tenemos un agujero en el medio, que debemos llenar. Ahí es donde la herramienta de clonación es útil. Seleccione un tamaño de pincel de su elección y rellene la imagen. No necesitas ser súper exacto con esto, dentro del tutorial de Divi, vamos a colocar el objeto encima.
Guardar imagen sin objeto
Exportar para Web
Una vez que haya completado la imagen de fondo sin el objeto, puede guardarla como un archivo JPEG con una calidad del 70 %.
Comprimir archivo de imagen
Asegúrate de comprimir esta imagen también.
2. Crea un efecto de fondo de doble capa en Divi
Agregar nueva sección
Subir imagen de fondo
Una vez que tenga ambos archivos de imagen a su alcance, ¡es hora de cambiar a Divi! Abra una nueva página y agregue una nueva sección. Cargue la imagen de fondo que ha creado en la primera parte del tutorial.
Espaciado
Pase a la pestaña de diseño de la sección y aplique algunos valores de espaciado personalizados. El margen inferior que estamos agregando nos ayudará a ver el efecto en su lugar. Normalmente, este margen será reemplazado por las siguientes secciones de su diseño.
- Margen inferior: 100vh
- Acolchado superior:
- Escritorio: 100px
- Tableta y teléfono: 50px
- Acolchado inferior:
- Escritorio: 100px
- Tableta: 600px
- Teléfono: 500px
Añadir Fila #1
Estructura de la columna
Continúe agregando una nueva fila usando la siguiente estructura de columnas:
Dimensionamiento
Sin agregar módulos todavía, abra la configuración de la fila y cambie el ancho y el ancho máximo. Esta configuración permitirá que la fila toque los lados izquierdo y derecho del contenedor de sección en todo momento. De esta manera, podemos asegurarnos de que las imágenes PNG y de fondo tengan el mismo equilibrio en todos los tamaños de pantalla.
- Ancho: 100%
- Ancho máximo: 100%
Espaciado
Vaya a la configuración de espaciado de la fila a continuación y elimine todo el relleno superior e inferior predeterminado.
- Relleno superior: 0px
- Relleno inferior: 0px
Posición
Luego, cambie la posición de toda la fila.
- Posición: Absoluta
- Ubicación:
- Escritorio: Centro
- Tableta y teléfono: Parte inferior central
- Desplazamiento vertical:
- Escritorio: /
- Tableta y teléfono: 30vh
Agregar módulo de imagen a la fila
Subir imagen PNG
Una vez que haya completado la configuración de la fila, agregue un módulo de imagen a la fila y cargue el archivo PNG que creó en la primera parte del tutorial.
Alineación
Pase a la pestaña de diseño y cambie la alineación de la imagen.
- Alineación de imagen: Centro
Dimensionamiento
Cambie la configuración de tamaño a continuación.
- Ancho:
- Escritorio: 36%
- Tableta y teléfono: 60%
Añadir Fila #2
Estructura de la columna
Luego, agregue otra fila a la sección usando la siguiente estructura de columnas:
Color de fondo
Abra la configuración de la fila y cambie el color de fondo.
- Color de fondo: #ffffff
Dimensionamiento
Modifique la configuración de tamaño a continuación.
- Ancho: 90%
- Ancho máximo: 550px
- Alineación de filas:
- Escritorio: Izquierda
- Tableta y teléfono: Centro
Espaciado
Luego, aplique algunos valores de relleno personalizados.
- Acolchado superior: 11%
- Acolchado inferior: 11%
- Relleno izquierdo: 5%
- Relleno derecho: 5%
Desplazamiento Horizontal
También estamos agregando un desplazamiento horizontal a la configuración de posición.
- Desplazamiento horizontal:
- Escritorio: 5%
- Tableta y teléfono: 0%
Agregue el módulo de texto n.º 1 a la columna 1
Agregar contenido H2
Es hora de agregar módulos, comenzando con un primer módulo de texto que contenga algo de contenido H2.
Configuración de texto H2
Estilo el texto H2 de la siguiente manera:
- Encabezado 2 Fuente: Kumbh Sans
- Título 2 Tamaño del texto:
- Escritorio: 90px
- Tableta: 60px
- Teléfono: 45px
Agregue el Módulo de Texto #2 a la Columna 1
Agregar contenido de descripción
Agregue otro módulo de texto justo debajo del anterior e inserte algún contenido de descripción de su elección.
Configuración de texto
Cambie la configuración de texto del módulo en consecuencia:
- Fuente del texto: Kumbh Sans
- Altura de línea de texto: 2em
Agregar copia
El último módulo que necesitamos en esta columna es un módulo de botones. Agregue alguna copia de su elección.
Configuración de botones
Dale estilo al botón en consecuencia:
- Usar estilos personalizados para el botón: Sí
- Tamaño del texto del botón: 20px
- Color del texto del botón: #6b6443
- Ancho del borde del botón: 0px
- Radio del borde del botón: 0px
- Fuente del botón: Kumbh Sans
- Peso de la fuente del botón: Negrita
- Mostrar icono de botón: Sí
- Ubicación del icono del botón: Izquierda
- Solo mostrar icono al pasar el mouse sobre el botón: No
Sombra de la caja
Incluye también una sombra de caja.
- Posición horizontal de la sombra del cuadro: 0px
- Posición vertical de la sombra del cuadro: 2px
- Color de sombra: #6b6443
3. Agregar efectos de desplazamiento
Movimiento vertical de la imagen
En la última parte de este tutorial, nos centraremos en agregar los efectos de desplazamiento al módulo de imagen que contiene el archivo de imagen PNG. Abra la configuración del módulo, navegue a la pestaña avanzada y aplique la siguiente configuración de movimiento vertical:
- Habilitar movimiento vertical: Sí
- Compensación inicial:
- Escritorio: 0
- Tableta y teléfono: 4 (al 0%)
- Desplazamiento medio:
- Escritorio: 0
- Tableta y teléfono: 0 (al 97 %)
- Compensación final:
- Escritorio: 0
- Tableta y teléfono: -2 (al 100 %)
Movimiento horizontal de la imagen
Estamos completando nuestro diseño usando las siguientes configuraciones de movimiento horizontal:
- Habilitar movimiento horizontal: Sí
- Compensación inicial:
- Escritorio: 0 (al 0%)
- Tableta y teléfono: 0
- Desplazamiento medio:
- Escritorio: 0 (al 65 %)
- Tableta y teléfono: 0 (al 97 %)
- Compensación final:
- Escritorio: -10 (al 100%)
- Tableta y teléfono: 0
Avance
Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Pensamientos finales
En esta publicación, le mostramos cómo crear un fondo de doble capa y animarlo con los efectos de desplazamiento incorporados de Divi. En la primera parte del tutorial, hemos preparado los archivos de imagen dentro de Adobe Photoshop. En la segunda parte del tutorial, nos enfocamos en usar los archivos de imagen dentro de Divi para crear un diseño receptivo. ¡También pudo descargar el archivo JSON de forma gratuita! Si tiene alguna pregunta o sugerencia, no dude en dejar un comentario en la sección de comentarios a continuación.
Si está ansioso por aprender más sobre Divi y obtener más regalos de Divi, asegúrese de suscribirse a nuestro boletín de correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener los beneficios de este contenido gratuito.