Fondos, patrones y degradados

Sin nada seleccionado, el panel Background define el fondo de la parte actual. La misma zona construye superposiciones decorativas y un degradado de varias paradas que puedes aplicar a un fondo o al relleno de cualquier objeto.

Vistazo rápido

1. Deselecciona todo y luego abre la pestaña Background (Alt+3), o la sección Background del panel de propiedades.
2. Elige solid, gradient o image para el fondo de la página.
3. Abre Patterns (Alt+7) para colocar un patrón geométrico, de texto, de iconos o de imagen sobre el lienzo.
4. Abre la tarjeta Gradient, o la pestaña de degradado de una muestra de relleno, para construir un degradado de varias paradas para un fondo o un objeto.
5. Ajusta los controles de color, opacidad y espaciado propios de cada función hasta que quede bien.

Referencia detallada

Fondo de página

Modo	Notas
Solid	Un único color plano
Gradient	El mismo editor de degradados de varias paradas que se usa para los rellenos de objetos, ver más abajo
Image	Súbela o elígela de tu biblioteca, con un modo de ajuste y, para ajustes recortados, un ancla de posición

Modos de ajuste para un fondo de imagen:

Modo	Comportamiento
Fill	Escala la imagen para cubrir el lienzo, recortando lo que sobresalga
Fit	Escala la imagen para que quepa entera dentro del lienzo, sin recorte
Crop	Rellena el lienzo desde un ancla elegida: arriba a la izquierda, arriba al centro, arriba a la derecha, centro, abajo a la izquierda, abajo al centro o abajo a la derecha
Tile	Repite la imagen a su tamaño original

Los fondos de imagen también incorporan controles deslizantes de brillo, contraste y saturación, una cantidad de desenfoque, un ajuste predefinido de escala de grises, sepia o inversión, y una superposición de color con su propia opacidad.

Patrones geométricos

Doce patrones en mosaico se superponen al lienzo como una capa decorativa:

Patrones
Líneas diagonales, cuadrícula, puntos, rombos, ondas, estrellas, tramado cruzado, tablero de ajedrez, triángulos, hexágonos, círculos, medio desvanecido

Control	Rango	Por defecto
Color	Cualquier color	Blanco
Opacidad	5-100%	30%
Espaciado	0,5x-5x	1x
Desenfoque	0-20 px	0

Un patrón geométrico se añade como una única superposición bloqueada que rellena la página por detrás de tu contenido. Hacer clic en otra tarjeta de patrón sustituye la superposición actual en lugar de apilar una segunda, y los controles de color, opacidad y espaciado vuelven a componer el mosaico de la superposición en vivo mientras los arrastras.

Superposiciones en mosaico

Más allá de los 12 patrones geométricos, la sección Patterns también puede repetir en mosaico texto, iconos o imágenes como una superposición repetida:

Tipo	Qué repite	Controles adicionales
Patrón de texto	Una palabra o frase repetida, con cualquier fuente	Filas, columnas, espacio, ángulo, espaciado entre letras
Patrón de iconos	Hasta 8 iconos de la biblioteca de iconos, en modo único, doble o mixto	Rotación, desenfoque y escala por icono
Patrón de imagen	Hasta 8 imágenes subidas o de la biblioteca	Rotación, desenfoque, escala y desplazamiento de posición aleatorios para un aspecto disperso

Los tres comparten color (donde corresponda), opacidad, número de filas y columnas, espacio y ángulo de rotación, y cada uno se inserta como un objeto agrupado que puedes quitar y volver a aplicar. Cada tipo tiene además su propio botón Remove, y volver a aplicarlo reconstruye el grupo a partir de los ajustes actuales.

Cuadrícula

Una tarjeta Grid aparte construye una cuadrícula de celdas de marcador de posición, útil como punto de partida de un collage más que como textura:

Control	Rango	Por defecto
Columnas	1-12	3
Filas	1-12	2
Espacio	0-40 px	4 px
Radio del borde	0-50 px	0
Opacidad de celda	0-100%	100%

Seis ajustes predefinidos rápidos cubren diseños habituales, desde 2x1 hasta 4x4.

Degradados

Un único editor de degradados de varias paradas es compartido por los fondos de página y el relleno de cualquier objeto:

Control	Opciones
Tipo	Lineal, radial, angular, diamante
Paradas	2 o más, cada una con su propia posición, color y opacidad; arrástralas a lo largo de la barra, o añade y quita paradas
Flip	Invierte el orden de las paradas
Rotate	Gira el degradado 90 grados cada vez
Ajustes predefinidos	Un conjunto seleccionado de parejas y tríos de colores ya preparados
Cuentagotas	Toma un color de cualquier punto de la pantalla, donde el navegador lo admita

Abre el editor de degradados desde la pestaña de degradado de una muestra de relleno cuando hay un objeto seleccionado, o desde la tarjeta Gradient del panel Background cuando no hay nada seleccionado. La tarjeta Gradient del panel Background es un control ligero: muestra una vista previa en vivo más los botones Apply y Remove, y refleja el degradado que esté cargado en el selector de color del panel derecho.

Paso a paso

Un fondo de póster en degradado

1. Haz clic en un punto vacío del lienzo para deseleccionar todo y luego abre la pestaña Background (Alt+3).
2. Abre la tarjeta Gradient. Muestra una vista previa en vivo junto a un botón Apply y un botón Remove.
3. Construye el degradado en la pestaña de degradado del selector de color del panel derecho: define el tipo (lineal, radial, angular o diamante), arrastra las paradas a lo largo de la barra y da a cada parada su propio color y opacidad. Usa Rotate para girar un degradado lineal, o Flip para invertir el orden de las paradas.
4. De vuelta en la tarjeta Gradient, haz clic en Apply. El degradado rellena el fondo de la página y la vista previa de la tarjeta se actualiza para coincidir.
5. Para revertir, haz clic en Remove (la X junto a Apply). El fondo vuelve al último color sólido.

Un patrón sutil detrás del texto

1. Sin nada seleccionado, abre Patterns (Alt+7).
2. Haz clic en una tarjeta de patrón como Dots o Grid. Se repite en mosaico por toda la página como una superposición bloqueada situada detrás de tu contenido.
3. Ajusta Color cerca del color de fondo para que la textura quede discreta.
4. Baja la Opacidad a más o menos un 10-20% para que el texto y las fotos sigan siendo legibles.
5. Usa Spacing (0,5x a 5x) para apretar o soltar el mosaico. Hacer clic en otra tarjeta de patrón sustituye la superposición actual en lugar de apilar una segunda.

Una marca de agua de texto repetida

1. Abre la pestaña Background (Alt+3) y busca los controles de Text pattern.
2. Escribe la palabra o frase (el valor por defecto es BRAND), luego elige una fuente, un tamaño y un grosor.
3. Define las filas y columnas de la cuadrícula, un espacio y un ángulo (la inclinación por defecto es de -45 grados para una marca de agua diagonal).
4. Ajusta el color y baja la opacidad (el valor por defecto es 20%).
5. Haz clic en Apply. La marca de agua se inserta como un único grupo seleccionable que puedes mover o eliminar, y Remove lo borra.

Un mosaico de imágenes disperso

1. En la pestaña Background, abre los controles de Image pattern.
2. Añade hasta 8 imágenes desde la pestaña Gallery, o arrastra archivos a la pestaña Upload.
3. Define el tamaño del mosaico, las filas, las columnas y el espacio.
4. Activa Randomize para dispersar los mosaicos: añade una rotación aleatoria (más o menos un rango elegido), un desenfoque aleatorio, una escala aleatoria hasta 0,5x y un desplazamiento de posición para que las imágenes no queden alineadas en una cuadrícula rígida.
5. Haz clic en Apply para insertar el patrón como un único grupo. Remove lo borra.

Tareas habituales

Objetivo	Cómo
Color de página sólido	Deselecciona, abre Background, elige un color sólido
Relleno en degradado sobre un objeto	Selecciona el objeto, abre la pestaña de degradado de su muestra de relleno, construye el degradado ahí
Reutilizar un degradado como fondo de página	Constrúyelo en el selector de color, luego Background > tarjeta Gradient > Apply
Textura de marca tenue	Patterns, opacidad baja, un color cercano al fondo, espaciado más amplio
Marca de agua diagonal	Patrón de texto con un ángulo de inclinación y opacidad baja
Cuadrícula de partida para un collage de fotos	Tarjeta Grid, define columnas y filas, luego coloca imágenes en las celdas

Resolución de problemas

El degradado se ve con bandas

Un degradado ancho de dos paradas sobre un área grande puede mostrar escalones visibles entre los colores. Añade una parada intermedia, o acerca los dos colores de los extremos en tono, para suavizar la transición.

Un patrón hace que un diseño pequeño se vea recargado

Un mosaico que se lee bien a tamaño completo puede convertirse en ruido una vez que el diseño se reduce. Sube el Spacing para que el motivo sea más grande y disperso, baja la opacidad o elige un patrón más simple (puntos o líneas diagonales en lugar de estrellas o hexágonos).

El patrón se desvaneció al subir el desenfoque

El control de desenfoque del patrón geométrico suaviza la superposición reduciendo su opacidad a medida que sube el valor, no añadiendo un desenfoque real. Si el patrón está desapareciendo, baja el desenfoque y usa el control deslizante de Opacidad directamente en su lugar.

Aplica el degradado después de editarlo

La tarjeta Gradient refleja el degradado que esté cargado en ese momento en el selector de color del panel derecho. Si un cambio no aparece en la página, haz clic en Apply de nuevo para enviar las últimas paradas al fondo.

Atajos de teclado

Atajo	Acción
Alt+3	Abrir el panel Background
Alt+7	Abrir el panel Patterns

Consejos

Mantén baja la opacidad del patrón

Los patrones se sitúan por encima del fondo pero por detrás de tu contenido. Una opacidad baja y un color cercano al fondo evitan que compitan con el texto y las fotos.

Empieza un degradado desde un ajuste predefinido

Elige un ajuste predefinido, luego cambia los colores de sus paradas por los tuyos. Es más rápido que construir un degradado parada por parada, y la dirección y el número de paradas ya son razonables.

Relacionado

• Formas para rellenos sólidos y en degradado sobre objetos individuales
• Iconos para el conjunto de iconos que usan los patrones de iconos
• Panel de propiedades para el relleno de objetos y la sección Background de la página
• Páginas ya que cada página conserva su propio fondo