División de páginas web en sectores

Los sectores dividen una imagen en imágenes más pequeñas que se montan en una
página web utilizando una tabla HTML o capas CSS. Con la división de la imagen, es
posible asignar diferentes enlaces URL para crear la navegación de la página o para
optimizar cada parte de la imagen utilizando sus propios ajustes de optimización.

Con el comando Guardar para Web y dispositivos, puede exportar y optimizar una
imagen con sectores. Photoshop guarda cada sector como un archivo independiente y
genera los códigos HTML o CSS necesarios para mostrar la imagen con sectores.

Página web dividida en

sectores.

Cuando trabaje con sectores, no olvide estos conceptos básicos:

 Para crear un sector puede utilizar la herramienta Sector o bien crear un sector
basado en capas.
 Una vez creado un sector, puede seleccionarlo mediante la herramienta
Seleccionar sector y, después, puede moverlo, cambiar su tamaño o alinearlo
con otros sectores.
 Puede definir las opciones para cada sector, como el tipo de sector, el nombre y
la URL, en el cuadro de diálogo Opciones de sector.
 Puede optimizar cada sector con diferentes ajustes de optimización en el cuadro
de diálogo Guardar para Web y dispositivos.

Tipos de sector

Los sectores se distinguen por el tipo de contenido (Tabla, Imagen, Sin imagen) y por la
forma en que se han creado (usuario, basado en capas, automático).

Los sectores creados con la herramienta Sector se denominan sectores de usuario; los
sectores creados de una capa se denominan sectores basados en capas. Cuando crea un
nuevo sector de usuario o un sector basado en capas, se generan sectores automáticos
adicionales para las áreas restantes de la imagen. Es decir, los sectores automáticos
rellenan el espacio de la imagen no definido por sectores de usuario ni por sectores
basados en capas. Los sectores automáticos se regeneran siempre que se añaden o editan
sectores de usuario o sectores basados en capas. Puede convertir sectores automáticos
en sectores de usuario.

Estos tres tipos de sectores tienen un aspecto diferente; los sectores de usuario y los
basados en capas están definidos mediante una línea continua, mientras que los
automáticos están definidos mediante una línea discontinua. Además, los sectores de
usuario y los sectores basados en capas muestran un icono distinto. Puede elegir entre
mostrar u ocultar sectores automáticos, lo que facilita la visualización del trabajo con
sectores de usuario y sectores basados en capas.

Un subsector es un tipo de sector automático que se genera al crear sectores que se

superponen. Los subsectores indican cómo se dividirá la imagen al guardar el archivo
optimizado. Aunque los subsectores están numerados y muestran un símbolo de sector,
no se pueden seleccionar ni editar independientemente del sector subyacente. Los
subsectores se regeneran siempre que se organiza la pila de sectores.

Los sectores se pueden crear mediante diversos métodos:

 Los sectores automáticos se generan de forma automática.

 Los sectores de usuario se crean con la herramienta Sector.
 Los sectores basados en capas se crean con el panel Capas.

Seccionado de una página web

Puede utilizar la herramienta Sector para dibujar directamente líneas de sectores sobre
una imagen y luego diseñar un gráfico con capas y crear segmentos basados en capas.

Creación de un sector con la herramienta Sector

1. Seleccione la herramienta Sector . (Pulse la tecla C para desplazarse por las

herramientas agrupadas con la herramienta Recortar).

Todos los sectores existentes aparecen automáticamente en la ventana de

documento.

2. Seleccione un ajuste de estilo en la barra de opciones:

Normal

Determina las proporciones del sector conforme se arrastra.

Proporción fija

Define una proporción altura-anchura. Introduzca la proporción en números

enteros o decimales. Por ejemplo, para crear un sector con el doble de anchura
de altura, introduzca 2 para la anchura y 1 para la altura.
 Tamaño fijo

Especifica la altura y la anchura del sector. Introduzca los valores de píxeles en

números enteros.

3. Arrastre en el área en la que desea crear un sector. Pulse Mayús y arrastre para limitar
el sector a un cuadrado. Mantenga pulsada la tecla Mayús (Windows) o la tecla Opción
(Mac OS) mientras arrastra para dibujar desde el centro. Utilice Vista > Ajustar a para
alinear un nuevo sector con una guía u otro sector de la imagen. Consulte Mover,
cambiar el tamaño y ajustar los sectores de usuario.

Creación de sectores a partir de guías

1. Añada guías a una imagen.

2. Seleccione la herramienta Sector y haga clic en Sectores a partir de guías en la barra de
opciones.

Cuando se crean sectores a partir de guías, se eliminan todos los sectores

existentes.

Creación de un sector a partir de una capa

Un sector basado en capa incluye todos los datos de píxeles de la capa. Si mueve la capa
o edita el contenido de la capa, el área del sector se ajusta automáticamente para incluir
los nuevos píxeles.

Un sector basado en capas se actualiza al modificar la capa de origen.

Los sectores basados en capa son menos flexibles que los sectores de usuarios, no
obstante, puede convertir ("ascender") un sector basado en capa en un sector de usuario.
Consulte Conversión de sectores automáticos y sectores basados en capas en sectores de
usuario.

1. Seleccione una capa en el panel Capas.

2. Seleccione Capa > Nuevo sector basado en capa.
Nota:

No utilice un sector basado en capas cuando tiene previsto mover la capa a lo largo de
una gran área de la imagen durante una animación, ya que la dimensión del sector puede
superar un tamaño manejable.

Conversión de sectores automáticos y basados en capa en sectores de

usuario

Un sector basado en capas está ligado al contenido de píxeles de una capa, la única
forma de moverlo, combinarlo, dividirlo, redimensionarlo y alinearlo consiste en editar
la capa, a no ser que lo haya convertido en un sector de usuario.

Todos los sectores automáticos de una imagen se encuentran enlazados y comparten los
mismos ajustes de optimización. Si desea definir diferentes ajustes de optimización para
un sector automático, necesita ascenderlo a sector de usuario.

1. Con la herramienta Seleccionar sector , seleccione uno o varios sectores para

convertirlos.
2. Haga clic en Ascender en la barra de opciones.

Nota:

Es posible ascender un sector automático desenlazándolo en el cuadro de

diálogo Guardar para Web y dispositivos. Consulte Trabajo con sectores en el
cuadro de diálogo Guardar para Web y dispositivos

Visualización de sectores y opciones de sector

Puede visualizar sectores en Photoshop y en el cuadro de diálogo Guardar para Web y

dispositivos. Las siguientes características pueden ayudar a identificar y diferenciar
sectores:

Líneas de sectores

Definen los límites de un sector. Las líneas continuas indican que el sector es un sector
de usuario o un sector basado en capas; las líneas discontinuas indican que el sector es
un sector automático.

Colores de sectores

Diferencian los sectores de usuario y los sectores basados en capas de los sectores
automáticos. Por defecto, los sectores de usuario y los sectores basados en capas tienen
símbolos azules, mientras que los sectores automáticos tienen símbolos grises.

Además, el cuadro de diálogo Guardar para Web y dispositivos utiliza ajustes de color
para atenuar los sectores no seleccionados. Estos ajustes se manifiestan por motivos de
visualización y no afectan el color de la imagen final. Por defecto, el ajuste de color
para los sectores automáticos es dos veces la cantidad del mismo para los sectores de
usuario.

Números de sectores

Los sectores se numeran de izquierda a derecha y de arriba abajo, empezando en la

esquina superior izquierda de la imagen. Si cambia la disposición o el número total de
sectores, los números se actualizan para reflejar el nuevo orden.

Distintivos de sector

Los siguientes distintivos o iconos indican determinadas condiciones.

Sector de usuario con imagen.

Sector de usuario sin imagen.

El sector está basado en capa.

Visualización u ocultación de los límites de sectores

1. Seleccione Vista > Mostrar > Sectores. Para mostrar u ocultar sectores junto con otros
elementos, utilice el comando Extras. Consulte Visualización u ocultación de extras.

Visualización u ocultación de sectores automáticos

1. Realice una de las siguientes acciones:

o Seleccione la herramienta Seleccionar sector y haga clic en Mostrar
sectores automáticos u Ocultar sectores automáticos en la barra de
opciones.
o Seleccione Vista > Mostrar > Sectores. Los sectores automáticos
aparecen con el resto de los sectores.

Visualización u ocultación de números de sector

1. Realice una de las siguientes acciones:

o En Windows, seleccione Edición > Preferencias > Guías, cuadrícula y
sectores.
o En Mac OS, seleccione Photoshop > Preferencias > Guías, cuadrícula y
sectores.
2. En Sectores, haga clic en Mostrar números de sector.
Cambio del color de las líneas de sectores

1. En Windows, seleccione Edición > Preferencias > Guías, cuadrícula y sectores; en

Mac OS, seleccione Photoshop > Preferencias > Guías, cuadrícula y sectores.
2. En Líneas de sectores, elija un color del menú Color de línea.

Después del cambio de color, las líneas del sector seleccionado se muestran
automáticamente en un color de contraste.