Guía del usuario Cancelar

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 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 de Photoshop dividida en 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.

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 Desplazamiento, redimensión y ajuste de 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.

Creación de un sector a partir de una capa en Photoshop
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 basados en capa 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.

Visualización de sectores y opciones de sector

Puede visualizar sectores en Photoshop y en el cuadro de diálogo Guardar para Web. 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 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:
    • Seleccione la herramienta Seleccionar sector y haga clic en Mostrar sectores automáticos u Ocultar sectores automáticos en la barra de opciones.

    • 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:
    • 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 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.

Obtén ayuda de forma más rápida y sencilla

¿Nuevo usuario?