Descripción general de los sectores

Cuando diseñas gráficos para la web, distintas partes de una imagen a menudo necesitan comportarse de forma independiente. Un área puede vincular a una URL, otra puede cargar más rápido y otra puede necesitar diferentes configuraciones de mejora. Los sectores dividen una única imagen en una cuadrícula de piezas más pequeñas que funcionan juntas como una página web, mientras mantienen el control individual sobre cada sección.

Photoshop vuelve a ensamblar las imágenes divididas en páginas web mediante tablas HTML o capas CSS. Cuando exportas una imagen con sectores con el comando Archivo > Exportar > Guardar para Web, Photoshop guarda cada sector como un archivo independiente.También genera el HTML o CSS necesario para mostrar la imagen como una única composición en un explorador.

Cómo funcionan los sectores

Los sectores dividen una imagen según líneas de cuadrícula invisibles, creando secciones rectangulares que funcionan como archivos independientes. Cada sector mantiene su posición en el diseño general mientras funciona como un elemento independiente con sus propias propiedades, configuraciones de mejora y comportamientos.

Este enfoque ofrece algunas ventajas prácticas:

• Asignar diferentes vínculos URL para crear elementos de navegación en los que se puede hacer clic
• Aplicar distintas configuraciones de compresión para equilibrar la calidad y el tamaño de archivo en las distintas áreas
• Actualizar secciones individuales sin volver a exportar toda la composición

Tipo de sector según su creación

Photoshop clasifica los sectores según cómo se crean, y cada tipo se comporta de forma diferente al editar la imagen.

• Sectores de usuario: Secciones que defines manualmente con la herramienta Sector . Tienes control total sobre su tamaño, posición y propiedades, y permanecen en su lugar hasta que los mueves o modificas.
• Sectores basados en capas: Los sectores incluyen todos los píxeles de una capa. Sus límites se actualizan automáticamente cuando mueves o editas la capa. Funcionan bien para contenido que cambia con frecuencia, pero ofrecen menos control sobre el posicionamiento preciso que los sectores de usuario.
• Sectores automáticos: Sectores que ocupan el espacio restante en una imagen que no está cubierto por los sectores de usuario o los sectores basados en capas. Photoshop los genera automáticamente y los vuelve a generar cada vez que agregas, eliminas o modificas otros sectores.Todos los sectores automáticos de una imagen comparten la misma configuración de mejora.
• Subsectores: Un tipo especializado de sector automático que aparece cuando los sectores se superponen.Los subsectores muestran cómo Photoshop dividirá las áreas superpuestas cuando guardes el archivo mejorado.No puedes seleccionar ni editar los subsectores de forma independiente a los sectores subyacentes.

Tipo de sector por contenido

Los sectores también se clasifican según el tipo de contenido que contienen.

• Sectores de imagen: El tipo de sector predeterminado para contenido visual, que contiene datos de imagen de tu documento de Photoshop.
• Sectores sin imagen: Celdas de tabla vacías para texto HTML o colores uniformes.Photoshop no exporta estos como archivos de imagen, lo que los hace útiles para texto activo y seleccionable.
• Sectores de tabla: Sectores que definen cómo Photoshop estructura la tabla HTML que se usa para volver a unir una imagen dividida en sectores en un explorador.

Señales visuales de los sectores

Photoshop usa señales visuales para ayudarte a diferenciar los tipos de sector mientras trabajas.

• Líneas de sector: Las líneas continuas marcan los sectores de usuario o los sectores basados en capas, y las líneas punteadas marcan los sectores automáticos.
• Colores de sector: Los símbolos azules identifican los sectores de usuario y los sectores basados en capas, y los símbolos grises marcan los sectores automáticos.
• Números de sector: Los números en la esquina superior izquierda de cada sector van de izquierda a derecha y de arriba a abajo, y se actualizan automáticamente cuando reorganizas o modificas los sectores.
• Distintivos de sector: Los pequeños iconos identifican el contenido y el tipo de sector.Por ejemplo, un icono de imagen marca un sector de usuario con contenido de imagen, un icono de imagen tachada marca un sector de usuario sin contenido de imagen, y un icono de capa marca un sector basado en capas.

Reconocer estas distinciones visuales te ayuda a identificar rápidamente los tipos de sector y a trabajar de forma más eficiente con diseños de sectores complejos cuando divides páginas web en sectores.