Cómo crear máscaras sutiles con patrón de fondo con división (3 ejemplos)

Las nuevas máscaras con modelos de fondo de la división han abierto muchas opciones de diseño de fondo. Funciona muy bien con los colores y los modelos de fondo para crear muchos modelos únicos. En esta publicación, veremos cómo crear máscaras sutiles con un modelo de fondo con Div. También discutiremos las ventajas de usar una máscara sutil y crearemos tres ejemplos. Vamos a empezar. Suscríbase a nuestra vista previa del canal de YouTube la máscara del fondo antes de comenzar el diseño, aquí hay un vistazo a lo que construiremos en este tutorial de división. Máscara con el modelo de fondo Ejemplo uno

Ejemplo dos de la máscara

Ejemplo tres de la máscara

Cómo crear una máscara de máscara de fondo cubrirá el modelo de fondo y permitirá que aparezcan partes del modelo. Funciona excelente con los colores y los modelos de fondo. Puede ajustar el fondo para que coincida con el contenido, ajustar el contenido para que coincida con el fondo o ajustarlos en ambos. Primero, abra la configuración para la sección en la que desea agregar la máscara de fondo.

Entonces deberá elegir un color de fondo para la sección. Desplácese hacia abajo hacia el fondo. Con la pestaña de fondo seleccionada, elija el color de fondo del selector de color.

Luego deberá elegir un modelo de fondo y establecer su tamaño y ubicación. Seleccione la pestaña Modelo de fondo y haga clic en Agregar fondo.

Abre una lista de opciones de modelo. Elija su modelo de la lista. Llenará la sección.

Luego deberá elegir una máscara de fondo y ajustar su color y configuración para que coincida con su diseño. Seleccione la pestaña de fondo y haga clic en Agregar el fondo.

Otra forma se abrirá con opciones de máscara. Elija la máscara de fondo de la lista. La máscara será blanca hasta que elija un color. Grabe la configuración de la máscara de fondo para obtener el aspecto deseado. Puede cambiar el tamaño, la posición, la dirección en la que se enfrentan la máscara, la rotación y más. El juego con estas configuraciones puede ayudarte a crear algunos modelos interesantes.

Aquí hay un vistazo al fondo que acabo de crear sin módulos. Los colores son similares, pero son lo suficientemente diferentes como para destacarse. Esto le impide distraer.

Cómo crear una máscara sutil con el modelo de fondo Una de las mejores directivas de diseño para un fondo es hacerlo sutil. No debe ser el punto focal del diseño de la página. Úselo para la textura de fondo para crear una pequeña cantidad de variación visual. Su contenido debe estar en el centro de atención. Use la máscara de fondo para admitir el contenido. Aquí hay algunas cosas a considerar al crear una máscara de fondo sutil.

Elija los colores correctos Elija colores para sus patrones y máscaras que no difieren mucho del color de fondo de la sección. Los colores no deben tener un alto contraste entre ellos. Los colores deben ser lo suficientemente diferentes como para ver la máscara y los patrones, pero no tanto que sean abrumadores. Use el mismo color para el patrón y el fondo, luego elija un color ligeramente más claro o más oscuro para la máscara. Ajuste para la legibilidad prioriza la legibilidad en su diseño. La liberación siempre debe ser una prioridad para que el diseño se vea bien. El contenido de un diseño que se ve bien, pero es difícil de leer. Las dimensiones personalizadas pueden brindarle más flexibilidad en el diseño y darle un diseño más único. Pruebe todas las configuraciones de máscara de fondo Juegue con todas las configuraciones de máscara de fondo para ver qué puede crear. También pruebe la configuración con la configuración del modelo de fondo para ver lo que le gusta. Todas estas configuraciones pueden funcionar juntas para crear algunos modelos interesantes. Ejemplos de máscara de modelo de fondo sutil ahora, para ver tres ejemplos sutiles de modelo de fondo. Agregue la máscara de fondo a la sección Hero de la página de destino corporativo gratuito, que está disponible en el Div. Aquí hay un vistazo a la página original antes de agregar las máscaras del modelo de fondo.
También cambiaremos los colores de fondo de los botones. Usando los mismos conceptos de diseño sutiles, los resaltaremos más que en el fondo. El divisor es otro elemento que veremos que cambia su color, pero este elemento usa transparencia para obtener su color desde el fondo, por lo que no tendremos que hacer cambios de color. Máscara con ejemplo de modelo de fondo Este ejemplo usará los colores y botones de fondo originales. Fondo Para nuestro primer ejemplo, utilizamos el color de fondo original de este aspecto: #1D1D25. También mantendremos el color original del botón – #4C594C
Color de fondo: #1D1D25

El color del botón: #4C594C

Modelo de fondo Seleccione el modelo de fondo y elija Diagonal Stripes 2. Cambie el color del modelo a #383838.
Patrón de fondo: Diagonal Stripes 2
Color del modelo: #383838

Tamaño del modelo: tamaño real
Repita el origen del modelo: arriba a la izquierda
Repetir modelo: repite
La máscara de fondo, seleccione la pestaña de fondo. Elija CARET y configure el color en #383838.
Máscara: Caret
Máscaras de color: #383838

Bajo el color de la máscara, seleccione la opción de transformación horizontal y la relación de apariencia de retrato. Cierre la configuración de la sección y guarde su trabajo.
Transformación: horizontal
Relación de apariencia: alta (retrato)


Máscara con el modelo de fondo Ejemplo dos Para el segundo ejemplo, cambiaremos los colores de fondo y los botones morados.
Color del sótano Abra la configuración de la sección. Asegúrese de estar en la pestaña Color de fondo y cambie el color de fondo a #483C56.
Color de fondo: #483C56

El modelo de fondo, seleccione el modelo de fondo y elija Tufted para el fondo. Cambiar el color del modelo a #635C84. Modelo de cuidados

Color del modelo: #635C84
Luego elija un tamaño personalizado. Abre otro conjunto de opciones. Cambie el ancho a 10 VW.

Tamaño: tamaño personalizado
Ancho: 10 VW
Repita el origen del modelo: arriba a la izquierda

Repetir modelo: repite
La máscara de fondo ahora es el momento de configurar nuestra máscara de fondo. Seleccione la pestaña de máscara de fondo y elija la máscara llamada Arch. Cambie su color a #67557a.
Máscara: arh
Máscaras de color: #67557a
Luego establezca las opciones de transformación en horizontal, vertical y rotación. Para la relación, elija la opción ancha o de paisaje. Cierre la configuración de la sección.

Transformación: horizontal, vertical y rotación
Relación de apariencia: ancho (paisaje)
Botón Finalmente ajuste el botón CTA en esta sección para héroes. Queremos combinar con el diseño, pero queremos destacar. Abra la configuración del botón. Solo tendremos que cambiar el color de fondo. Puede ser un color similar al fondo, pero lo suficientemente diferente como para que no pierda en la página. Elegiremos un color más brillante para el fondo. Dejaremos el color del texto igual.

Seleccione la pestaña de diseño, desplácese hacia abajo hasta el fondo y cambie el color de fondo del botón en #8B4DC1. Esto nos trae el contraste que queremos y funciona muy bien con el fondo púrpura. Cierre la configuración del botón y guarde la página.
Color de fondo para el botón: #8B4DC1
Masilla de modelo de fondo Ejemplo tres Para el tercer ejemplo, cambiaremos los colores del fondo y los botones verdes utilizando los mismos conceptos que los dos ejemplos anteriores.

El color de fondo primero, abra la configuración de la sección. Con la pestaña Color de fondo seleccionada, cambie el color de fondo a #497762. Fondo: #497762

El modelo de fondo luego, seleccione el modelo de fondo, elija cuadrados y cambie el color a #3A604E. Dejaremos los cuadrados del tamaño inicial y aplicaremos la máscara sobre la mayoría de ellos.
Modelo de fondo: cuadrados

Color del modelo: #3A604E

Tamaño del modelo: tamaño real
Repita el origen del modelo: arriba a la izquierda

Repetir modelo: repite
La máscara de fondo, seleccione la pestaña de fondo. Elija líneas diagonales para la máscara y cambie el color a #3A604E.
Máscara: líneas diagonales
Máscaras de color: #3A604E
Luego establezca la transformación en horizontal y elija la opción ancha o de paisaje para la relación de aparición. Establezca el tamaño de la cubierta y la posición de la máscara en el centro de arriba. Cierre la configuración de la sección.
Transformación: horizontal

Relación de apariencia: ancho (paisaje)
Tamaño: cubierta
Posición de la máscara: Centro arriba

Botón Finalmente, abra la configuración del botón y seleccione la pestaña Diseño. Desplácese hacia abajo y cambie el color de fondo del botón a #61A380. Cierre la configuración del módulo y guarde su trabajo.
Color de fondo para el botón: #61A380
Resultados La máscara del modelo de fondo aquí es lo que parece nuestro modelo de fondo en la sección del héroe de nuestra apariencia. MOVIMIENTO MODEMA DE MOVIMIENTO Ejemplo de resultado
Ejemplo de máscara de dos resultados
Ejemplo de máscara de tres resultados