¿Cómo construir un fondo de mosaico para su HTML5 y CSS3 sitio

A menudo, usted quiere una imagen de fondo para cubrir toda la página en su página web HTML 5 y CSS 3. Esto puede ser más difícil de lo que parece, ya que no sabe lo grande que la página estará en el navegador del usuario.

Peor aún, las imágenes grandes pueden tomar una gran cantidad de espacio y ralentizar la experiencia del usuario. La solución común es utilizar una imagen en mosaico que está diseñado para repetir en el fondo. Gimp tiene algunas herramientas muy útiles para la construcción de imágenes en mosaico.

Recordemos que el background-repeat propiedad CSS le permite especificar cómo un fondo repite. La configuración por defecto se repite infinitamente el fondo, tanto en los ejes X e Y. También puede configurar el fondo de repetir horizontalmente (repetir-x), Verticalmente (repetir-y), O nada en absoluto (no-repeat).

El objetivo de un fondo de mosaico es hacer un relativamente pequeño gráfico llenar toda la página y se ven como una imagen más grande. El secreto es la creación de la imagen por lo que es difícil ver que la imagen se repite. He aquí una manera de hacer un fondo de mosaico en Gimp. Por supuesto, se puede adaptar esta técnica para sus propios fines.

Crear una nueva imagen.
El tamaño de la imagen es importante. imágenes más pequeñas son mucho más eficientes para descargar, pero el patrón es mucho más evidente. Comience con 256 por 256 píxeles.
Construir un patrón aleatorio.
Puede utilizar la técnica de filtro de plasma o probar una técnica similar eligiendo Filtros → Renderizado → → Diferencia nubes nubes. El filtro Nubes de diferencia crea una imagen en escala de grises, pero con una serie de opciones interesantes. La opción enlosable crea un patrón que está listo para baldosas. Juega con estas opciones hasta que llegue algo interesante.
Ajustar el contraste.
Para el mejor efecto, desea una distribución relativamente uniforme de los valores de claro a oscuro. La forma más sencilla de hacerlo es a través de la herramienta de normalización automática (Colores → Auto → Normalizar).
Elija un gradiente.
Vamos a añadir colores a su patrón usando una técnica llamada mapeo gradiente. Utilice el cuadro de diálogo de degradado (Ventanas acoplables → Diálogos → Gradientes) para recoger un gradiente. Los colores más oscuros en su mapa de imagen para los colores a la izquierda de la pendiente, y colores más claros se asignan a la izquierda. Puede ajustar los colores, así que no se preocupe si los colores no son exactamente lo que quiere.
Utilice la herramienta Mapa de degradado (Colores &# 10154- Mapa &# 10154- Mapa de degradado) para asignar los colores del gradiente a su patrón de nubes.
Compensar la imagen para poder ver el embaldosado.
La forma más fácil de ver si los cuadros de imagen así es para compensar la imagen. Esto pone a los bordes en el centro para que pueda ver cómo la imagen se verá cuando múltiples copias están uno junto al otro. Abrir el diálogo Offset seleccionando Capa → Transformar → Offset. El cuadro de diálogo de desplazamiento tiene una mano x / 2, y Botón / 2. Haga clic en el botón para ver cómo su imagen se ve.
Limpiar la imagen si es necesario.
Si elige la opción de Tileable cuando se construyó la imagen de la nube, la nueva imagen se verá bien. Si no es así, es posible que tenga algunas costuras visibles. Utilice las herramientas de tinta corrida y Clon para limpiar estas costuras si es necesario. Aplicar la corrección de herramienta por segunda vez para comprobar si sus costuras se ven bien.
Aplicar filtros para obtener el efecto deseado.
Es posible que desee colorear la imagen o difuminar un poco para cubrir cualquier artefacto de su limpieza. Recuerde que las imágenes de fondo deben ser muy oscuro o muy claro con un contraste muy bajo si desea que el texto legible.
Probar la imagen por guardar la imagen en formato XCF y un formato comprimido (como PNG), construir una página sencilla utilizando la imagen como fondo, y la carga de la página en el navegador para asegurarse de que las baldosas de la forma esperada.