Descargar 9 superposiciones de imagen en forma gratuita para Div

La forma en que muestra imágenes en su sitio web realmente puede marcar la diferencia en el diseño general que crea. Con las opciones de división integrada, ya puede aplicar varias configuraciones de diseño que lo ayudarán a mostrar las imágenes de una manera sorprendente, piense en los bordes y las sombras de la caja, por ejemplo. Pero si desea darle a sus imágenes una forma más única, esta publicación lo ayudará. Compartiremos 9 imágenes superpuestas en forma gratuita que puede descargar y usar en cualquier sitio web que cree. Después de compartir estas imágenes superpuestas en forma, también le mostraremos cómo aprovecharlas mientras construye un sitio web con Div. Esperamos que este tutorial lo inspire a crear su propio tipo de superposiciones de imagen.
¡Vamos a eso! Vista previa antes de ingresar el tutorial y la descarga, para ver rápidamente el resultado que puede esperar en diferentes tamaños de pantalla. Escritorio

Teléfono

Descargue las superposiciones de imagen en forma gratuita para poner sus manos en las superposiciones de la imagen, primero deberá descargarlas 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á aún más división de bondades y un paquete Divaut gratuito todos los lunes y viernes! Si ya está en la lista, simplemente ingrese el 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!
Acercarse
Las superposiciones de la imagen en el formulario que puede encontrar en la carpeta de descarga están listas para usar si las combina con una fila blanca y / o una sección de la sección
Si desea ajustar las superposiciones de la imagen formada de acuerdo con otro color de fondo, deberá exportar las superposiciones de la imagen formada en otro color utilizando el archivo Illustrator incluido en la descarga anterior.
Le mostraremos cómo cambiar el color superpuesto de la imagen en la primera parte del tutorial (usando Adobe Illustrator)
Luego iremos a la división y cargaremos una de las superposiciones de la imagen formada en un módulo de imagen.
También agregaremos una imagen de fondo y un fondo de gradiente al módulo de imagen, que se mostrará superponiendo la imagen en la forma
Cambiar las superposiciones de las imágenes en el formulario en la sección Color del lector con Adobe Illustrator Abra el archivo Illustrator en la carpeta de descarga como se menciona en el enfoque de esta publicación, si desea usar las superposiciones en forma de imagen en un fondo blanco, está Listo para usar. Solo los archivos PNG que puede encontrar en la carpeta de descarga. Sin embargo, si desea usar las superposiciones de imagen formadas en una fila diferente y / o una sección de una sección, deberá cambiar manualmente el color utilizando el archivo Adobe Illustrator que también se incluye en la carpeta de descarga. Cambiar el color dura poco o no en absoluto y le permite usar las superposiciones de la imagen formada en cualquier sitio web que cree, así que pasemos por los pasos. En primer lugar, deberá abrir el archivo Adobe Illustrator. Seleccione la forma de la imagen superpuesta una vez que haya abierto el archivo, encontrará 9 placas de arte diferentes con superposiciones de imagen que puede usar para cualquier propósito. Seleccione el que desea editar.
Cambie el color para que coincida con el color de fondo de la sección Continúe cambiando el color del color al mismo color de fondo que tiene la intención de usar para su turno y / o sección.

Seleccione Artboard Una vez que se cambia el color, puede seleccionar todo el piso que contiene la superposición de la imagen.

Guarde la superposición en forma de PNG en forma de PNG y guárdelo como un archivo de imagen PNG accediendo a Archivo> Exportar> Guardar para Web.


¡Empecemos a crear!

¡Suscríbase a nuestro canal de YouTube, agregar una nueva sección es el momento de moverse a la división y crear el resultado! Crear una página nueva o abrir una existente y agregar un nuevo regular


Agregue el módulo de imagen a la columna 1 Cargue la superposición de las imágenes en forma El único modo que necesitaremos en la columna 1 es un módulo de imagen. Toda la magia sucederá aquí. Comenzaremos cargando la imagen superpuesta. Notarás que parte de la imagen es completamente transparente. Esto permitirá que la imagen de fondo y el fondo de gradiente se muestren en los siguientes pasos.

El fondo de gradiente continúa y agregue un fondo de gradiente.

Color 1: # AA2BFF

Color 2: # 09f7eb

Imagen de fondo y cargar una imagen de fondo PNG o simplemente una normal, si no desea que se muestre el fondo de gradiente. También puede descargar las ilustraciones que utilizamos accediendo a la próxima publicación que creamos sobre cómo cambiar un fondo de gradiente.
Tamaño de la imagen de fondo: portada
Posición de la imagen de fondo: el centro inferior

Repetir la imagen de fondo: sin repetición
Dimensión Otro paso importante para que este tutorial funcione es la activación de la opción “Fuerza el ancho completo” en la configuración de dimensionamiento del módulo de imagen. Esto asegurará que el fondo de gradiente y la imagen de fondo se mostrarán solo a través del área transparente de superposición de la imagen formada.
Fuerza el ancho completo: si
Agregue el módulo de texto de título en la columna 2 agrega contenido para moverse a la segunda columna. Aquí, el primer módulo que necesitamos es un modo de texto. Agregue un contenido de su elección. Configuración de texto luego, acceda a la configuración del texto del encabezado y realice algunos cambios.

2 Sección de fuentes: Ancient Didone
Título 2 Fuente de peso: Bold

Rúbrica 2 Dimensión de texto: 45 PX

Rúbrica 2 Espaciación de litros: -2 PX
Espacio Agregar un margen personalizado.
Margen superior: 100 PX
Agregue el módulo de descripción de texto en la columna 2 agrega contenido El segundo módulo que necesitamos es una descripción del modo de texto. Ingrese un contenido de su elección.
Configuración de texto Entonces, acceda a la configuración del texto y cambie la orientación del texto del módulo.

Orientación de texto: justificar
Dimensión Cambiar el ancho y en la configuración del tamaño.

Ancho: 63%

Agregue un módulo de botón a la columna 2 Agregue una copia Siguiente y el último módulo que necesitamos es un módulo de botón. Ingrese un contenido de su elección.
Continúe el botón Continuar accediendo a la configuración del botón y cambiando la apariencia del botón.

Use estilos personalizados para el botón: Sí
Tamaño de texto de texto: 17 PX

El color del texto del botón: #ffffff

Color de gradiente 1: # AA2BFF
Color de gradiente 2: # 09F7EB
Dirección de gradiente: 111 grados
El ancho del nudo del botón: 0 PX
Botón Raza: 100 PX
Distancia entre letras y botones: -2 PX
Peso de fuente: Ultra Bold

Estilo de fuente: mayúscula
Spaction agregue algunos botones personalizados adicionales.
Revestimiento superior: 10 px
Finamiento inferior: 10 PX
ENNIZACIÓN IZQUIERDA: 50 PX

Revestimiento derecho: 50 PX
Box Shadow Por último, pero no menos importante, complete el diseño agregando un tazón sutil al botón. Poniendo la falta de claro la sombra de la caja: 50 PX
Poder de extender la sombra de la caja: -5 PX
Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla.
Escritorio

Teléfono
Pensamientos finales En esta publicación, hemos compartido 9 imágenes superpuestas en forma gratuita para la división que puede usar para cualquier tipo de sitio web que cree.Esperamos que este tutorial lo haya inspirado a crear sus propias superposiciones de imagen únicas que pueda reutilizar constantemente.Si tiene alguna pregunta o sugerencia, asegúrese de dejar un comentario en la sección de comentarios a continuación.