Agrupar y Organizar Imágenes

Al agrupar imágenes individuales, puedes acelerar y simplificar tu flujo de trabajo. Las imágenes agrupadas pueden moverse, ajustarse, estilizarse y duplicarse como una sola unidad.

A medida que agregas y agrupas objetos, tu página se convertirá en un intrincado mosaico de imágenes, stencils e iconos. Para refinar y editar tu diseño de manera efectiva, necesitarás identificar y localizar tanto objetos individuales como objetos anidados profundamente dentro de grupos más grandes.

Puedes hacerlo de forma rápida y sencilla, directamente en la página. Pero, a medida que tu proyecto se vuelva más complejo, probablemente quieras usar el Panel de Esquema.

El Panel de Esquema te ayuda a gestionar tu página —y agilizar tu flujo de trabajo— manteniendo todos tus objetos organizados dentro de una lista única y con capacidad de búsqueda.

En este artículo, aprenderás a agrupar, bloquear, organizar y alinear imágenes en la página. También te mostraremos cómo navegar y usar el Panel de Esquema para renombrar, buscar, reorganizar, bloquear, alternar la visibilidad y eliminar objetos.

Agrupar y desagrupar imágenes

Cuando los objetos están agrupados, pueden moverse, ajustarse, estilizarse y duplicarse como una sola unidad. La agrupación funciona para todos los objetos: imágenes, stencils, iconos y plantillas.

Para agrupar o desagrupar objetos, usa el botón Agrupar ubicado en la Barra de Herramientas Contextual.

Para agrupar objetos:

  1. Selecciona los objetos:

    • Arrastra el mouse sobre múltiples objetos

      o bien

    • Usa Ctrl/Cmd para seleccionar objetos uno a la vez

  2. Agrupa los objetos:

    • Navega a la Barra de Herramientas Contextual y haz clic en el botón Agrupar

      o bien

    • Haz clic derecho en uno de los objetos y elige Agrupar Selección

02.NEWImages-GroupOrganize-Ungroupobjects.gif

Para desagrupar objetos:

  • Selecciona el grupo de objetos que deseas desagrupar
  • Navega a la Barra de Herramientas Contextual y haz clic en el botón Desagrupar

o bien

  • Haz clic derecho en uno de los objetos y elige Desagrupar Selección

01.NEWImages-GroupOrganize-Groupobjects.gif

También puedes crear y anidar grupos dentro de grupos.

Para deshacer el anidamiento de grupos, el atajo de teclado Ctlr/Cmd + Shift + Alt/Option + G desempaqueta y aplana un grupo para crear un grupo de una sola capa.

Editar grupos de imágenes

Una vez que los objetos están agrupados, puedes moverlos, formatearlos y estilizarlos como un solo elemento. Pero puede que aún quieras editar un elemento individual por separado de su grupo.

Para acceder a un solo objeto dentro de un grupo, haz doble clic en ese objeto. Ahora puedes formatear, estilizar o eliminar ese elemento individual.

03.Images-GroupOrganize-EditGroupsofImages.gif

Entrar al grupo con un clic

Para seleccionar rápidamente un objeto anidado en cualquier lugar dentro de un grupo, mantén presionado Cmd/Ctrl y haz clic en ese objeto.

04.NEWStencil-EnterGroupwithShortcut.gif

Si deseas habilitar el acceso a elementos dentro de un grupo particular, también puedes usar la opción Entrar al grupo con un clic.

Cuando haces clic en un grupo, verás la casilla de verificación Entrar al grupo con un clic en el Panel de Formato, justo debajo de las coordenadas del grupo. Habilitar esta opción te permitirá seleccionar cualquier elemento del grupo con un solo clic.

05.NEWStencils-EnterGrouponClick.gif

Para hacer que la opción Entrar al grupo con un clic vuelva a ser visible, o para desactivarla:

Haz clic en cualquier elemento dentro del borde azul del grupo y presiona Esc

o bien

Selecciona el grupo dentro del Panel de Esquema

06.NEWStencils-DisableEnterGrouponClick.gif

Bloquear y desbloquear imágenes

Una vez que un objeto está bloqueado, queda fijo en su lugar y ya no puede moverse ni estilizarse. Esto te permite continuar editando el resto de los objetos en la página sin alterar las partes completadas de tu diseño.

Para trabajar con un objeto bloqueado, primero debes hacer clic en él intencionalmente. Para evitar la selección accidental de objetos bloqueados, estos no responden a la selección mediante arrastre del mouse.

Para bloquear una imagen:

  • Selecciona la imagen y luego usa el Menú Contextual al hacer clic derecho para elegir la opción Bloquear Selección, o usa el atajo de teclado: Ctrl/Cmd + L (este atajo funciona tanto para Bloquear como para Desbloquear)

o bien

  • En la parte superior del Panel de Formato, haz clic en el botón Bloquear a la derecha del Nombre del Objeto; dado que no puedes cambiar el tamaño ni la posición de un objeto bloqueado, todas las opciones de formato del objeto no estarán disponibles hasta que se desbloquee el objeto.

o bien

  • En el Panel de Esquema, haz clic en el botón Bloquear a la derecha del nombre de la imagen; el botón se oscurecerá cuando esté bloqueado.

Cuando esté bloqueado, la imagen mostrará un marco rojo al pasar el cursor y, una vez seleccionada la imagen, aparecerá un botón de bloqueo en la esquina superior izquierda del marco rojo. Ese botón puede usarse para desbloquear la imagen.

07.Images-GroupOrganize-LockanObject.gif

Para desbloquear una imagen:

  • Selecciona la imagen y haz clic en el botón Bloquear rojo en la esquina superior izquierda del borde rojo

o bien

  • Selecciona la imagen y luego usa el Menú Contextual al hacer clic derecho para elegir la opción Desbloquear Selección, o usa el atajo de teclado: Ctrl/Cmd + L (este atajo funciona tanto para Bloquear como para Desbloquear)

o bien

  • En el Panel de Esquema, haz clic en el botón Bloquear a la derecha del nombre de la imagen; el botón aparecerá en gris cuando esté desbloqueado.

08.Images-GroupOrganize-UnlockanObject.gif

Para bloquear o desbloquear una selección de imágenes:

  • Selecciona las imágenes y luego usa el Menú Contextual al hacer clic derecho para elegir la opción Desbloquear Selección, o usa el atajo de teclado: Ctrl/Cmd + L (este atajo funciona tanto para Bloquear como para Desbloquear)

Para desbloquear todos los objetos cuando hay una combinación de objetos bloqueados y desbloqueados en la página:

  1. Usa Ctrl/Cmd + A para seleccionar todos los objetos desbloqueados en la página
  2. Usa Ctrl/Cmd + L para bloquear todos los objetos
  3. Usa Ctrl/Cmd + L una vez más para desbloquear todos los objetos

Organizar y alinear imágenes

El Menú Desplegable de Organizar en la Barra de Herramientas Superior te permite superponer, alinear y distribuir objetos para crear un diseño limpio y equilibrado.

Organizar objetos

La función Organizar te permite apilar objetos y luego moverlos hacia adelante y hacia atrás a través de las capas.

Para organizar un objeto:

  1. Selecciona el objeto que deseas organizar
  2. Accede a la función Organizar:
  • Navega a la Barra de Herramientas Superior y haz clic en el botón Organizar para abrir el menú desplegable

    o bien

  • Haz clic derecho en el objeto para abrir el Menú Contextual y pasa el cursor sobre la opción Organizar para abrir el menú desplegable

  • Elige una acción de capas: Traer al Frente, Traer hacia Adelante, Enviar hacia Atrás, Enviar al Fondo

09.Images-GroupOrganize-ArrangeanObject.gif

Alinear objetos

La función de Alineación organiza los objetos a lo largo de un eje vertical u horizontal común, y los distribuye equitativamente dentro de su espacio compartido.

La Barra de Herramientas Contextual es la forma más rápida de alinear múltiples objetos. Cuando seleccionas más de un objeto, la barra de herramientas aparece automáticamente justo encima de esa selección. Junto con la alineación, la barra de herramientas también permite agrupar y desagrupar rápidamente los objetos seleccionados.

10.NEWImages-AlignContextualToolbar.gif

También puedes establecer un objeto de referencia —lo que significa que cualquier grupo seleccionado de objetos se alineará en relación con ese objeto.

Para establecer un objeto de referencia, selecciona varios objetos y luego haz clic en uno de ellos; aparecerá inmediatamente un borde azul grueso alrededor de ese objeto. Todos los objetos ahora se alinearán en relación con ese objeto de referencia designado.

Para deseleccionar el objeto de referencia, simplemente haz clic fuera de tu selección.

11.NEWImages-AligntoReferenceObject.gif

Hay otras tres formas de acceder a las opciones de Alineación:

  • Navega a la Barra de Herramientas Superior y haz clic en el botón Organizar para abrir el menú desplegable

o bien

  • Haz clic derecho en un objeto para abrir el Menú Contextual y pasa el cursor sobre la opción Alinear para abrir el menú desplegable

o bien

  • Navega a la Barra Lateral Derecha y abre el Panel de Formato. En la parte superior encontrarás los botones de Alineación y Distribución Rápida

12.NEWImages-AlignfromToolbars.gif

Cuando se selecciona un objeto único (u objetos 'Agrupados'), los controles de alineación alinearán el objeto en relación con los límites de la página. Ten en cuenta que esta función no está disponible cuando se usa la Barra de Herramientas Contextual.

13.NEWImages-AligntoPage.gif

Usar el Panel de Esquema

El Panel de Esquema mantiene todos tus objetos organizados dentro de una lista única y con capacidad de búsqueda.

Navega por los objetos y sus jerarquías en el Árbol de Esquema, o usa el campo de búsqueda para localizar rápidamente un objeto específico. Los iconos de Esquema delante de los nombres de los objetos facilitan la distinción entre los tipos de stencils.

Usa el Árbol de Esquema para renombrar, buscar, reorganizar, bloquear, alternar la visibilidad y eliminar objetos.

Para abrir el Panel de Esquema:

  1. Navega a la Barra Lateral Izquierda
  2. Haz clic en la Pestaña de Esquema. La pestaña se volverá azul y abrirá el Panel de Esquema

Para seleccionar un objeto en el Panel de Esquema:

  • Haz clic en su nombre. Si seleccionas un Grupo, haz clic en el icono de Flecha Izquierda para ver rápidamente el contenido y la jerarquía del Grupo.

14.Images-GroupOrganize-OutlinePanel.gif

Puedes bloquear y desbloquear objetos directamente desde el Panel de Esquema haciendo clic en el botón de bloqueo a la derecha del nombre del objeto. Obtén más información sobre el bloqueo de objetos aquí.

Para renombrar un objeto o grupo de objetos en el Panel de Esquema:

  1. El Panel de Esquema lista todos los objetos en la página: Imágenes, Stencils, Iconos y Plantillas
  2. Pasa el cursor sobre un elemento en el Árbol de Esquema y, en la página, un borde azul resaltará simultáneamente el objeto correspondiente
  3. Después de haber localizado el objeto, haz doble clic en su nombre para cambiarlo

15.Images-GroupOrganize-RenameinOutlinePanel.gif

Para buscar un objeto en el Panel de Esquema:

  1. Selecciona el Campo de Búsqueda en la parte superior del Panel de Esquema
  2. Escribe el nombre del elemento que deseas encontrar

16.Images-GroupOrganize-SearchinOutlinePanel.gif

Para reordenar un objeto o grupo de objetos en el Panel de Esquema:

  1. Selecciona el objeto que deseas mover
  2. Arrastra y suelta ese objeto hacia arriba o hacia abajo en el Árbol de Esquema
  3. Ten en cuenta que mover un objeto hacia arriba o hacia abajo dentro de una jerarquía de grupo, o hacia arriba y hacia abajo en el Árbol de Esquema, también afectará su organización de capas en la página

17.Images-GroupOrganize-ReorderinOutlinePanel.gif

Para eliminar un objeto o grupo de objetos desde el Panel de Esquema:

  1. Selecciona el objeto que deseas eliminar
  2. Usa la tecla Suprimir para eliminar ese objeto

Para ocultar un objeto, simplemente alterna la visibilidad del objeto haciendo clic en el icono de Ojo de Visibilidad a la derecha del nombre del objeto en el Árbol de Esquema.

18.Images-GroupOrganize-Togglethevisibility.gif

Cambiar la visibilidad de un objeto es esencial al agregar Interacciones. A menudo querrás que la interacción comience con el objeto en un estado invisible. Para obtener más información sobre Interacciones y creación de prototipos, ve aquí.