Cómo crear un efecto de desarrollo de fondo de dos capas con la división

Si está buscando una forma en que se destaque su sitio, le recomendamos que descubra cómo crear fondos de dos capas. Crear fondos de dos capas te ayudará a llevar la vida de los antecedentes moviéndose. En el tutorial de hoy, le mostraremos cómo crear un diseño de fondo de dos capas. Este tutorial contiene tres partes:
Preparación de dos archivos de imagen en Adobe Photoshop
Creando diseño dentro del div
Aplicar efectos para animar antecedentes
¡Podrá descargar los archivos JSON de forma gratuita! Vamos a eso.
Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla. Escritorio

Móvil

Descargue el aspecto gratuito para poner su mano en el aspecto gratuito, primero deberá descargarlo usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
1. Cree archivos de imagen en Photoshop Elija la imagen del producto con un fondo limpio y abra en Photoshop en la primera parte de este tutorial, crearemos los archivos de imagen que usaremos en el tutorial de división. Para crearlos, usaremos Adobe Photoshop, pero no dude en usar cualquier otro software de edición de imágenes. El efecto de la imagen de fondo de dos capas funcionará mejor si la imagen con la que trabaja tiene:
Un enfoque claro en un objeto dentro de la imagen
Un fondo limpio
La imagen a continuación es un ejemplo perfecto. Puede encontrar este archivo de imagen en la carpeta plegada zip en el área de descarga de esta publicación.
Capa duplicada Una vez que haya abierto la imagen en Photoshop, clone la capa original una vez. Trabajaremos en la capa duplicada.

Oculte la capa original para asegurarse de que veamos el resultado a medida que avanzamos hacia abajo, esconde la capa original.

Cree PNG a partir de la selección del objeto 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, el JPEG PlacAun del fondo sin objeto
Separamos el objeto de sus antecedentes, para que podamos manejarlos individualmente una vez en el entorno de la Divica. Para comenzar a seleccionar el objeto, elija la “Herramienta de selección rápida” en la barra de herramientas e intente cubrir la mayor cantidad posible del objeto.
Seleccione + Selección de máscara Notará que la selección de objetos aún no es lo suficientemente buena. Puede mejorar el aspecto de su selección utilizando la opción “Selección y máscara” cuando se hace clic correctamente en la selección. Una vez que llegues allí, puedes jugar con opacidad, suavidad, etc.
Cree una máscara de capa en la selección Aunque hemos creado una selección suave, todavía hay partes dentro del objeto que aún no se seleccionan. 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:


La selección Finetune dentro de la máscara con pinceles Una vez que se ha creado la capa, puede comenzar a usar un pincel para cambiar la máscara de la capa. Asegúrese de que su máscara de capa esté seleccionada.


Usando un cepillo negro (# 000) eliminará partes de la máscara de capa

Usar un cepillo blanco (#FFF) se agregará partes posteriores de la máscara de capa
Use un pincel que no tenga mucha dureza para que no se especifique.
Verifique el doble de la máscara con la capa de color. Siempre puede verificar la máscara de la capa colocando una capa de color debajo. Las capas de color le darán más fácil si te perdiste un lugar.
Guarde la selección de PNG como un archivo de imagen separado Cree un nuevo archivo ahora que tiene su selección PNG de su objeto, puede clonar toda la capa para que pueda volver a él en cualquier momento. En la siguiente parte, usaremos la capa duplicada para crear la imagen de fondo sin objeto. El tamaño de nuestro objeto es mucho más pequeño que el tamaño inicial del archivo, por lo que crearemos un nuevo archivo para nuestro objeto y lo traeremos. Ayuda a la selección en el nuevo archivo Copiar su capa con su capa en el nuevo archivo que creó.




Exportar para la web y exportarla para la web como PNG.

Comprime el archivo de imagen PNG de imagen con un fondo transparente tiende a tener un tamaño de archivo más grande, por lo que es aconsejable comprimir el archivo utilizando un instrumento de su elección.


¡Elimine el objeto de la máscara de capa de selección de imagen original al archivo original de Photoshop! Allí, crearemos la imagen de fondo sin objeto. Para hacer esto, usamos la capa superior en nuestro archivo. Primero, asegúrese de que su máscara de capa esté seleccionada.

Invierta la máscara y luego acceda a las propiedades de esta capa y haga clic en “Invertir”.

Aplique la máscara de capa, ahora notará que el objeto es transparente dentro de la capa inicial. Aplicaremos la máscara de capa a nuestra capa haciendo clic derecho y seleccionando “Aplicar la capa”.

Llene el espacio vacío usando la herramienta de clonación, tenemos un agujero en el medio, que debemos llenar. Existe la herramienta de clonación en cuestión. Seleccione el tamaño del cepillo de su elección y complete la imagen. No tiene que ser muy preciso con esto, dentro del tutorial de división, colocaremos el objeto encima.

Guarde la imagen sin un objeto de exportación para la web después de haber completado la imagen de fondo sin objeto, puede guardarla como un archivo JPEG para una calidad del 70%. Complete el archivo de imagen Asegúrese de comprimir esta imagen.

2 Abra una nueva página y agregue una nueva sección. Cargue la imagen de fondo que creó en la primera parte del tutorial.

Espacio ir a la pestaña de diseño de la sección y aplique algunos valores de espaciado personalizados. El margen inferior que agregamos nos ayudará a ver el efecto cayendo en su lugar. Normalmente, este margen será reemplazado por las siguientes secciones de su diseño.





Margen inferior: 100 VH

Revestimiento superior:

Desktop: 100 PX

Tableta y teléfono: 50 px
Levante inferior:
Desktop: 100 PX
Tableta: 600 PX
Teléfono: 500 PX
Agregue la estructura de la columna de la fila # 1 Continuar agregando una nueva fila utilizando la siguiente estructura de columna:
Dimensión sin agregar módulos, abra la configuración de la fila y cambie el ancho y el ancho máximos. Estas configuraciones permitirán que la fila llegue a la izquierda y a la derecha del contenedor de sección todo el tiempo. De esta manera, podemos asegurar que PNG y las imágenes de fondo tengan el mismo equilibrio en todo el tamaño de la pantalla.
Ancho: 100%
Ancho máximo: 100%

El espacio ir a la configuración de espaciado de la fila y elimine todos los rellenos predeterminados e inferiores.

SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Posición y luego reposicione toda la fila.

Posición: Absoluto
Ubicación:
Desktop: centro

Tableta y teléfono: el centro inferior
Brecha vertical:
Escritorio: /
Tableta y teléfono: 30 VH
Agregue el módulo de imagen en una fila Cargue la imagen PNG Después de haber completado la configuración de la fila, agregue un módulo de imagen en una fila y cargue el archivo PNG que creó en la primera parte del tutorial.
Alineación Vaya a la pestaña Diseño y cambie la alineación de la imagen.
Alineación de imágenes: centro
La dimensión cambia la configuración de dimensionamiento adicional.

Ancho:

Escritorio: 36%
Tableta y teléfono: 60%

Agregue la estructura de la fila # 2 de la columna y luego, agregue otra fila a la sección utilizando la siguiente estructura de columnas:
Color del sótano Abra la configuración de la fila y cambie el color de fondo.
Color de fondo: #ffffff
La dimensión cambia la configuración de dimensionamiento adicional.

Ancho: 90%

Ancho máximo: 550 PX
Alineación de filas:

Escritorio: izquierda
Tableta y teléfono: centro
El espacio luego aplica algunos valores de llenado personalizados.
Revestimiento superior: 11%
Finamiento inferior: 11%
ENLIZACIÓN IZQUIERDA: 5%

Revestimiento derecho: 5%
Brecha horizontal Agregue un desplazamiento horizontal a la configuración de posición.
Brecha horizontal:
Escritorio: 5%
Tableta y teléfono: 0%

Agregue el módulo de texto no. 1 en la columna 1 Agregar contenido H2 es hora de agregar módulos, comenzando con un primer módulo de texto que contiene contenido H2.
Configuración de texto H2 Estilice el texto H2 de la siguiente manera:
2 Sección de fuentes: Kumbh Sans
Rúbrica 2 Dimensión de texto:

Escritorio: 90 PX

Tableta: 60 PX
Teléfono: 45 PX
Agregue el módulo de texto no. 2 en la columna 1 Agregar descripción Contenido Agregue otro módulo de texto justo debajo del anterior e ingrese un contenido de descripción.
Configuración de texto Cambie la configuración de texto del módulo en consecuencia: Fuente Texto: Kumbh Sans
Altura de la línea de texto: 2em
Agregue el módulo de botón a la columna 1 Agregue una copia El último módulo que necesitamos en esta columna es un módulo de botón. Agregue una copia de su elección.

Botón de configuración Botón Stilet según:

Use estilos personalizados para el botón: Sí
Botón de tamaño de texto: 20 PX
El color del texto del botón: # 6B6443

El ancho del nudo del botón: 0 PX

El rasgo de botón de botón: 0 px
Botón de fuente: Kumbh Sans
Botón de peso de fuente de fuente: en negrita
Muestra el icono del botón: Sí
Icono de botón de colocación: izquierda
Muestre el icono solo en el cursor para el botón: no

La sombra de la caja también incluye un tono de caja.
Posición horizontal de la sombra de la caja: 0 px
Box Shadow Posición vertical: 2 PX
Shadow Color: # 6B6443
3. Agregue los efectos del movimiento vertical de la imagen en la última parte de este tutorial, nos centraremos en agregar los efectos de desarrollo al módulo de imagen que contiene el archivo de imagen PNG. Abra la configuración del módulo, explore la pestaña avanzada y aplique la siguiente configuración de movimiento vertical:

Habilitar el movimiento vertical: sí
Comenzando el desplazamiento:
Escritorio: 0
Tableta y teléfono: 4 (al 0%)

Brecha promedio:
Escritorio: 0
Tableta y teléfono: 0 (al 97%)
Compensación final:
Escritorio: 0
Tableta y teléfono: -2 (100%)
Movimiento horizontal de la imagen Completamos nuestro diseño utilizando la siguiente configuración de movimiento horizontal:
Active el movimiento horizontal: sí
Comenzando el desplazamiento:
Escritorio: 0 (al 0%)
Tableta y teléfono: 0


Brecha promedio:
Escritorio: 0 (al 65%)
Tableta y teléfono: 0 (al 97%)
Compensación final:
Desktop: -10 (al 100%)
Tableta y teléfono: 0
Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Escritorio
Pensamientos finales En esta publicación, le mostré cómo crear un fondo de dos capas y animarlo con los efectos de contaminación incrustados. En la primera parte del tutorial, preparamos los archivos de imagen en Adobe Photoshop. En la segunda parte del tutorial, nos centramos en usar los archivos de imagen dentro de la división para crear un diseño receptivo. ¡Podrías descargar el archivo JSON gratis! 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 obtener más información sobre Divi y obtener más regalos de la Divicidad, 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 beneficios de este contenido gratuito.