Cómo crear secciones elegantes de información del producto con imágenes divididas por división

El hecho creativo con imágenes definitivamente puede ayudarlo a llamar la atención sobre sus CTA en esta publicación, le mostraremos cómo recrear una hermosa sección de información de productos con imágenes divididas. El diseño que recreamos es hermoso, atractivo y se puede personalizar de acuerdo con sus necesidades. ¡Podrá descargar el archivo JSON del archivo 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 esquema de imagen dividido gratuito de forma gratuita para poner su mano en la imagen dividida gratuita, 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.
Te has suscripto satisfactoriamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos! Suscríbase a nuestro canal de YouTube Crear efecto de imagen dividido con Photoshop e Illustrator antes de comenzar con DIV, debe tener un conjunto de imágenes listas para cargar. Debido a que este es un efecto de imagen dividido, necesita dos imágenes que encajen bien. Necesitará dos tamaños de imagen diferentes: 960 PX de ancho con altura de 1200 px para escritorio y 600 px de ancho con altura de 1200 px para tabletas y dispositivos móviles.
Paso 1: Seleccione las imágenes Seleccione dos imágenes HD de sus productos.
Paso 2: Elimine los fondos de eliminación de fondo para crear cortes. Puede usar cualquier programa que desee. Pero aquí hay una guía paso por paso para Photoshop.

Paso 3: Abra un nuevo proyecto en Illustrator, abra un nuevo proyecto en Illustrator, 1920px de ancho y altura de 1200px.


Paso 4: Agregue una guía vertical. Agregue una guía vertical a través del centro del lienzo en blanco. Asegúrese de que esté en el centro.

Paso 5: Importar o colocar las imágenes de corte Coloque ambas imágenes cortadas en el lienzo.

Paso 6: Inicio Vista Split Haga dos duplicados de cada imagen. Use la función de corte para dividirlos en la mitad en diferentes lugares. Primero en el centro y luego un poco menos y algo más para duplicados. Ahora tendrá tres versiones divididas de cada imagen.

Paso 7: Complete el efecto utilizando los diferentes recortes divididos, encuentre la mejor composición para sus imágenes. Asegúrese de que el borde derecho de cada imagen esté justo en la guía central del lienzo. Intente cambiar el tamaño de las imágenes para que se ajusten mejor. Recuerde que el lienzo tiene el tamaño de una pantalla de ancho completo, para ajustar el tamaño de las imágenes en consecuencia. Verifique dos veces si el borde derecho de cada imagen toca la guía central. Cree dos nuevos tableros de arte y cambielos para que coincidan con cada lado, asegurándose de que estén separados en la guía central. Exportar para la web, un libro de trabajo a la vez y guardar como .png. Ahora tienes dos fotos diferentes. Tanto 960 PX de ancho como 1200 px de alto.

Paso 9: Restablecer el tamaño de la tableta y el cambio de tamaño móvil ambas imágenes a 960 PX de ancho con altura de 1200 px. Asegúrese de cortar el fondo transparente, no toque la imagen. Hice que Photoshop cambiara el tamaño del lienzo con el ancla en el costado de la imagen.

¡Comencemos a recrear! Agregue una nueva sección de fondo ahora, que hemos pasado por la primera parte del tutorial, ¡es hora de comenzar con Div! Cree una nueva página o agregue una nueva sección a una página existente. Agregue un fondo de gradiente a la sección.


Antecedentes: gradiente

Color One: White Off # F7F7F7
Segundo color: verde fresco # B7E778
Dirección de gradiente: 90 grados
Posición inicial y final: 50%
Extienda y luego cambie la configuración de espaciado de la sección.
Revestimiento superior: 5VW

Levante inferior: 12 VWVIBILIDAD Eventualmente ajusta la visibilidad.
Desbordamiento vertical y horizontal: oculto
Agregue la primera fila La estructura de la columna Continúe agregando una nueva fila utilizando la siguiente estructura de columnas:

Dimensión Ajuste la configuración de dimensionamiento de la fila.
El ancho de la canaleta: 2

Ancho: 100%

Ancho máximo: 100%
Sparto Agregue algunos valores de llenado personalizados.
Revestimiento superior e inferior: 2 VW
Configuración de la columna 1 Gire luego acceda a la configuración de la columna 1 y cambie los valores de traducción de transformación.

Translación de transformación: -2vw eje y
Configuración La columna 2 Transforma Haga lo mismo para la columna 2.

Transformación de transformación: eje x 2vw
Agregue un módulo de texto a la columna 1 Agregar contenido es hora de comenzar a agregar módulos. Agregue un módulo de texto a la columna 1 con un contenido H2 de su elección.

El texto del título En la pestaña Diseño, cambie la configuración del texto del encabezado.
El nivel del texto del encabezado: H2

Fuente H2: Corben

Alineación H2:
Escritorio: izquierda
Tableta + teléfono: centro
H2 Color de texto: Muy oscuro gris # 3a3a3a
Tamaño de texto H2:
Escritorio: 7VW
Tableta + teléfono: 16VW
Espacio y luego ajusta el espacio.
Margen derecho:
Escritorio: -1VW

Tableta + teléfono: 0VW
Junta derecha:
Tableta + teléfono: 35VW
Agregue un módulo de texto a la columna 2 Agregar contenido ahora, agregue un módulo de texto a la segunda columna. Ingrese un contenido H2 de su elección.
El texto del título luego estiliza el texto del título de la siguiente manera.
El nivel del texto del encabezado: H2

Fuente H2: Corben

Alineación H2:
Escritorio: izquierda
Tableta + teléfono: correcto
H2 Color de texto: Muy oscuro gris # 3a3a3a
Tamaño de texto H2:
Escritorio: 7VW
Tableta + teléfono: 14VW
Finalmente espaciado, ajuste la distancia. Superior Marja:
Tableta: -12VW
Teléfono: -14VW


Borde izquierdo:
Desktop + tableta: -0.5VW
Junta derecha:
Tableta + teléfono: 17VW
Agregue la estructura de la columna de la segunda fila Continuar agregando una nueva fila a su sección utilizando la siguiente estructura de columnas:
Dimensión Abra la configuración de la fila y ajuste la configuración del tamaño.
El ancho de la canaleta: 1
Igualar las alturas de la columna: sí

Ancho: 100%

Ancho máximo: 100%
Extienda y luego cambie la configuración de espaciado.
Margen superior:
Escritorio: -15VW
Tableta: -36VW

Teléfono: -40VW
Revestimiento superior e inferior:
Escritorio: 0VW
Tableta: 9VW
Teléfono: 12VW
CSS personalizado Complete la configuración de la fila agregando una sola línea de código CSS al elemento principal de la fila. Esto ayudará a mantener imágenes en un solo lugar.
Artículo principal: Pantalla: Flex;
Pantalla: Flex;
Agregue el módulo de imagen a la columna 1 Agregue la imagen Agregue la imagen de medioLtft a la columna 1.

Imagen:
Escritorio: imagen de 960 px de ancho
Tableta + teléfono: la imagen con un ancho de 600 px

Dimensión Haga el módulo de imagen ancho completo.
Fuerza el ancho completo: si
Agregue el módulo de imagen a la columna 2 Agregar imagen Agregue la mitad derecha de la imagen en la columna 2.
Imagen:

Escritorio: imagen de 960 px de ancho
Tableta + teléfono: la imagen con un ancho de 600 px

Dimensión Haga este módulo de imagen de ancho completo.
Fuerza el ancho completo: si
Agregue la tercera fila La estructura de la columna, ¡pasamos la siguiente fila! Elija la siguiente estructura de columnas:
Dimensión Ajuste el tamaño de la fila de la siguiente manera:

El ancho de la canaleta: 4
Ancho: 100%

Ancho máximo: 100%

Espacio y luego ajusta el espacio. La marja superior:
Escritorio: -38VW
Tableta + teléfono: -14VW
Configuración de la columna 1 Espacio Antes de agregar módulos, ajuste el espacio en las columnas. Comience con la columna 1.

Forro izquierdo:
Escritorio: 7VW
Tableta + teléfono: 12VW
Junta derecha:

Escritorio: 15 VW
Tableta + teléfono: 12VW
Configuración de la columna 2 Espacio y luego ajusta la configuración de espaciado de la columna 2
Forro izquierdo:
Escritorio: 15 VW
Tableta + teléfono: 12VW
Junta derecha:

Escritorio: 7VW
Tableta + teléfono: 12VW
Agregue un módulo de texto a la columna 1 Agregar contenido Agregue un módulo de texto en la columna 1 y agregue un contenido H3.
Fondo cambia el color de fondo.
Color de fondo
Color: Muy oscuro gris # 333333
El texto del título luego estiliza el texto del encabezado.

El nivel del texto del encabezado: H3

Fuente H3: Corben
Alineación H3: centro
Color de fuente H3: White discapacitado # F7F7F7

Tamaño de fuente H3:
Escritorio: 2.2VW
Tableta: 6.4VW
Teléfono: 7VW
Espacio de letras H3: 3 PX
El espacio agregue algunos valores de espaciado personalizados.
Revestimiento superior:
Desktop + tableta: 0.2VW
Teléfono: 1VW
Levante inferior:

Escritorio: 0.5 VW
Tableta: 1.2VW
Teléfono: 1VW
El borde llena la configuración del módulo agregando algunas esquinas redondeadas.
Esquinas redondeadas: 1VW las cuatro esquinas
Duplique el módulo de texto y tire de la columna 2 ahora, copie el módulo de texto y tírelo a la columna 2.
Cambie el contenido, por supuesto, deberá cambiar el contenido del módulo de texto duplicado.
Agregue el módulo de llamada a Action a la columna 1 Agregar contenido en el módulo de texto en la columna 1, agregue un módulo de acción con un contenido de contenido.

Título
Botón

Cuerpo

Agregue un enlace Continuar agregando un enlace al botón CTA.Fundal y agregue un color de fondo en la tableta y el móvil.

Color de fondo:
Tableta + teléfono: blanco oscuro # f7f7f7
El texto del título En la pestaña Diseño, estilice la configuración del texto H4.
El nivel del texto del encabezado: H4

Font H4: abre sans

H4 Color: Muy oscuro gris # 333333
Tamaño de texto H4:
Escritorio: 1.4VW

Tableta: 4.5VW
Teléfono: 7VW
Distancia entre letras H3: 2 PX
Línea H3 Altura: 1.5em
El cuerpo del texto luego cambia la configuración del texto del cuerpo.
Font Corp: Open Sans
Alineación del texto del cuerpo: Centro
Color of Body Text: Muy oscuro gris # 333333
Tamaño de fuente del cuerpo:
Escritorio: 0.9VW

Tableta: 3VW
Teléfono: 4VW
La altura de la línea del cuerpo: 1.8em
Estilización y botón de botón.
Botón Tamaño de texto:
Escritorio: 1VW
Tableta: 2.2VW
Teléfono: 3.8VW
El color de la fuente del botón: Muy oscuro gris # 333333

El color del fondo de fondo:
Tableta + móvil: verde fresco # b7e778
El ancho del nudo del botón:
Escritorio: 1 PX
Botón de borde de color:
Escritorio: Muy oscuro gris # 333333
El raspón del botón del botón: 1VW
Espacio y agregue algunos valores de espaciado personalizados.
Margen superior:
Desktop + tableta: -2VW
Teléfono: 3VW
Forro izquierdo y derecho:
Escritorio: 0VW

Tableta + teléfono: 4VW
Border por último, pero no menos importante, estilice el borde en diferentes tamaños de pantalla.
Esquinas redondeadas: 1 VW todas las esquinas
Estilos de borde:
Tableta + teléfono: las cuatro caras
El ancho de la frontera:
Tableta + teléfono: 1 PX

Color del borde:
Tableta + teléfono: gris muy cerrado # 333333
Duplique el módulo de acción a la acción y tire de la columna 2 duplicar el módulo de exhortación y tírelo a la columna 2.
Cambie el contenido para completar el diseño, cambie el contenido en el módulo duplicado y haya terminado. Vista previa ahora que hemos recorrido todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla.Escritorio
Móvil
Conclusión En esta publicación, le mostré cómo crear una sección de información del producto con imágenes divididas con Div.Explicamos cómo crear imágenes divididas utilizando el software de edición de imágenes y continuamos usando los archivos en nuestro diseño de la división.Esperamos que este diseño lo inspire a ser creativo con sus propias imágenes de productos.Si tiene alguna pregunta o sugerencia, ¡no dude en dejar un comentario en la sección de comentarios a continuación!