Agrupar e Organizar Ícones

Ao agrupar ícones, você pode acelerar e simplificar seu fluxo de trabalho. Assim como outros objetos, ícones agrupados podem ser movidos, ajustados, estilizados e duplicados como uma única unidade.

À medida que você adiciona e agrupa novos elementos, sua página se tornará um mosaico intrincado de ícones, stencils e imagens. Para refinar e editar seu design de forma eficaz, você precisará identificar e localizar tanto objetos individuais quanto objetos aninhados em grupos maiores.

Você pode fazer isso de forma rápida e fácil diretamente na página. Mas provavelmente também vai querer usar o Painel de Camadas.

O Painel de Camadas ajuda você a gerenciar sua página e simplificar seu fluxo de trabalho, mantendo todos os seus objetos organizados em uma única lista pesquisável.

Neste artigo, você aprenderá como agrupar, bloquear, organizar e alinhar ícones na página. Também mostraremos como navegar e usar o Painel de Camadas para renomear, pesquisar, reorganizar, alternar visibilidade e excluir ícones e outros objetos.

Agrupar e desagrupar ícones

Quando os objetos são agrupados, eles podem ser movidos, ajustados, estilizados e duplicados como uma única unidade. O agrupamento funciona para todos os objetos: ícones, modelos, imagens e stencils.

Para agrupar ou desagrupar ícones, use o botão Grupo localizado na Barra de Ferramentas Contextual.

Para agrupar ícones:

  1. Selecione ícones:

    • Arraste o mouse sobre vários ícones

      ou

    • Use Ctrl/Cmd para selecionar ícones um por um

  2. Agrupe ícones:

    • Navegue até a Barra de Ferramentas Superior e clique no botão Grupo

      ou

    • Clique com o botão direito em um dos ícones e escolha Agrupar Seleção

01.NEWIcons-GroupOrganize-GroupIcons.gif

Para desagrupar ícones:

  1. Selecione o grupo de ícones que deseja desagrupar

  2. Navegue até a Barra de Ferramentas Contextual e clique no botão Desagrupar

    ou

    Clique com o botão direito em um dos ícones e escolha Desagrupar Seleção

02.NEWIcons-GroupOrganize-UngroupIcons.gif

Você também pode criar e aninhar grupos dentro de grupos.

Para desfazer o aninhamento de grupos, o atalho de teclado Ctrl/Cmd + Shift + Alt/Option + G desempacota e nivela um grupo para criar um grupo de camada única.

Editar grupos de ícones

Depois que os objetos são agrupados, você pode movê-los, formatá-los e estilizá-los como um único elemento. Mas ainda pode ser necessário editar um elemento individual separadamente do grupo.

Para acessar um único objeto dentro de um grupo, dê um duplo clique nesse objeto. Agora você pode formatar, estilizar ou excluir esse elemento individual.

03.NEWIcons-GroupOrganize-EditGroupofIcons.gif

Entrar no Grupo ao Clicar

Para selecionar rapidamente um objeto aninhado em qualquer lugar dentro de um grupo, mantenha pressionado Cmd/Ctrl e clique nesse objeto.

04.Stencil-EnterGroupwithShortcut.gif

Se você quiser habilitar o acesso a elementos dentro de um grupo específico, também pode usar a opção Entrar no grupo ao clicar.

Quando você clica em um grupo, verá a caixa de seleção Entrar no grupo ao clicar no Painel de Formato, logo abaixo das coordenadas do grupo. Habilitar esta opção permite selecionar qualquer elemento do grupo com um único clique.

05.NEWStencils-EnterGrouponClick.gif

Para tornar a opção Entrar no grupo ao clicar visível novamente, ou para desativá-la:

Clique em qualquer elemento dentro da borda azul do grupo e pressione Esc

ou

Selecione o grupo no Painel de Camadas

06.NEWStencils-DisableEnterGrouponClick.gif

Bloquear e desbloquear ícones

Quando um objeto é bloqueado, ele fica fixo no lugar — e não pode mais ser movido ou estilizado. Isso permite que você continue editando o restante dos objetos na página sem perturbar as partes concluídas do seu design.

Para trabalhar com um objeto bloqueado, você deve primeiro clicar nele intencionalmente. Para evitar a seleção acidental de objetos bloqueados, eles não respondem à seleção por arrastar com o mouse.

Para bloquear um ícone:

  • Selecione o ícone e use o Menu de Contexto do botão direito para escolher a opção Bloquear Seleção, ou use o Atalho de Teclado: Ctrl/Cmd + L (este atalho funciona tanto para Bloquear quanto para Desbloquear)

ou

  • Na parte superior do Painel de Formato, clique no botão Bloquear à direita do Nome do Objeto; como você não pode alterar o tamanho ou a posição de um objeto bloqueado, todas as opções de formatação do objeto ficarão indisponíveis até que ele seja desbloqueado.

ou

  • No Painel de Camadas, clique no botão Bloquear à direita do nome do ícone; o botão ficará escuro quando bloqueado.

Quando bloqueado, o ícone exibirá uma borda vermelha ao passar o cursor e, uma vez selecionado, um botão de bloqueio aparecerá no canto superior esquerdo da borda vermelha. Esse botão pode ser usado para desbloquear o ícone.

07.NEWIcons-GroupOrganize-Lock.gif

Para desbloquear um ícone:

  • Selecione o ícone e clique no botão Bloquear vermelho no canto superior esquerdo da borda vermelha

ou

  • Selecione o ícone e use o Menu de Contexto do botão direito para escolher a opção Desbloquear Seleção, ou use o Atalho de Teclado: Ctrl/Cmd + L (este atalho funciona tanto para Bloquear quanto para Desbloquear)

ou

  • No Painel de Camadas, clique no botão Bloquear à direita do nome do ícone; o botão ficará acinzentado quando desbloqueado.

08.NEWIcons-GroupOrganize-Unlock.gif

Para bloquear ou desbloquear uma seleção de ícones:

  • Selecione os ícones e use o Menu de Contexto do botão direito para escolher a opção Desbloquear Seleção, ou use o Atalho de Teclado: Ctrl/Cmd + L (este atalho funciona tanto para Bloquear quanto para Desbloquear)

Para desbloquear todos os objetos quando há uma mistura de objetos bloqueados e desbloqueados na página:

  1. Use Ctrl/Cmd + A para selecionar todos os objetos desbloqueados na página
  2. Use Ctrl/Cmd + L para bloquear todos os objetos
  3. Use Ctrl/Cmd + L mais uma vez para desbloquear todos os objetos

Organizar e alinhar ícones

O Menu Suspenso Organizar na Barra de Ferramentas Superior permite sobrepor, alinhar e distribuir objetos para criar um design limpo e equilibrado.

Organizando Objetos

O recurso Organizar permite empilhar objetos e movê-los para frente e para trás pelas camadas.

Para organizar um objeto:

  1. Selecione o objeto que deseja organizar
  2. Acesse o recurso Organizar:
  • Navegue até a Barra de Ferramentas Superior e clique no botão Organizar para abrir o menu suspenso

    ou

  • Clique com o botão direito no objeto para abrir o Menu de Contexto e passe o cursor sobre a opção Organizar para abrir o menu suspenso

  • Escolha uma ação de camada: Trazer para Frente, Avançar, Enviar para Trás, Enviar ao Fundo

09.NEWIcons-GroupOrganize-Arrange.gif

Alinhar Objetos

O recurso Alinhamento organiza objetos ao longo de um eixo vertical ou horizontal comum e os distribui igualmente dentro do espaço compartilhado.

A Barra de Ferramentas Contextual é a maneira mais rápida de alinhar vários objetos. Quando você seleciona mais de um objeto, a barra de ferramentas aparece automaticamente logo acima dessa seleção. Além do alinhamento, a barra de ferramentas também permite agrupar e desagrupar rapidamente os objetos selecionados.

Você também pode definir um objeto de referência — ou seja, qualquer grupo de objetos selecionado será alinhado em relação a esse objeto.

Para definir um objeto de referência, selecione vários objetos e clique em um deles; uma borda azul espessa aparecerá imediatamente ao redor desse objeto. Todos os objetos agora serão alinhados em relação a esse objeto de referência designado. Para desmarcar o objeto de referência, basta clicar fora da seleção.

11.Icons-ReferenceObject.gif

Existem três outras maneiras de acessar as opções de Alinhamento:

  • Navegue até a Barra de Ferramentas Superior e clique no botão Organizar para abrir o menu suspenso

ou

  • Clique com o botão direito em um objeto para abrir o Menu de Contexto e passe o cursor sobre a opção Alinhar para abrir o menu suspenso

ou

  • Navegue até a Barra Lateral Direita e abra o Painel de Formato. Na parte superior, você encontrará os Botões de Alinhamento Rápido e Distribuição

12.Icons-AligntoPage.gif

Quando um único objeto (ou objetos 'Agrupados') está selecionado, os controles de alinhamento alinharão o objeto em relação aos limites da página. Observe que esta função não está disponível ao usar a Barra de Ferramentas Contextual.

13.Icons-AlignfromToolbars.gif

Usando o Painel de Camadas

O Painel de Camadas mantém todos os seus objetos organizados em uma única lista pesquisável.

Navegue pelos objetos e suas hierarquias na Árvore de Camadas, ou use o campo de pesquisa para localizar rapidamente um objeto específico. Os ícones de camada na frente dos nomes dos objetos facilitam a distinção entre tipos de stencil.

Use a Árvore de Camadas para renomear, pesquisar, reorganizar, alternar visibilidade e excluir objetos.

Para abrir o Painel de Camadas:

  1. Navegue até a Barra Lateral Esquerda
  2. Clique na Aba de Camadas. A aba ficará azul e abrirá o Painel de Camadas

Para selecionar um objeto no Painel de Camadas:

Clique em seu nome. Se você selecionar um Grupo, clique no ícone de Seta para a Esquerda para visualizar rapidamente o conteúdo e a hierarquia do Grupo.

14.NEWIcons-GroupOrganize-OutlinePanel.gif

Você pode bloquear e desbloquear objetos diretamente no Painel de Camadas clicando no botão de bloqueio à direita do nome do objeto. Saiba mais sobre como bloquear objetos aqui.

Para renomear um objeto ou grupo de objetos no Painel de Camadas:

  1. O Painel de Camadas lista todos os objetos na página: Ícones, Modelos, Imagens e Stencils
  2. Passe o cursor sobre um item na Árvore de Camadas e, na página, uma borda azul destacará simultaneamente o objeto correspondente
  3. Depois de localizar o objeto, dê um duplo clique em seu nome para alterá-lo

15.NEWIcons-GroupOrganize-RenameIconinOutlinePanel.gif

Para pesquisar um objeto no Painel de Camadas:

  1. Selecione o Campo de Pesquisa na parte superior do Painel de Camadas
  2. Digite o nome do item que deseja encontrar

16.NEWIcons-GroupOrganize-SearchforanobjectinOutlinePanel.gif

Para reordenar um objeto ou grupo de objetos no Painel de Camadas:

  1. Selecione o objeto que deseja mover
  2. Arraste e solte esse objeto para cima e para baixo na Árvore de Camadas
  3. Observe que mover um objeto para cima ou para baixo dentro de uma hierarquia de grupo, ou para cima e para baixo na Árvore de Camadas, também afetará sua organização de camadas na página

17.NEWIcons-GroupOrganize-ReorderanobjectinOutlinePanel.gif

Para excluir um objeto ou grupo de objetos do Painel de Camadas:

  1. Selecione o objeto que deseja excluir
  2. Use a tecla Delete para remover esse objeto

Para ocultar um objeto, basta alternar sua visibilidade clicando no ícone Olho de Visibilidade à direita do nome do objeto na Árvore de Camadas.

18.NEWIcons-GroupOrganize-Togglethevisibility.gif

Alterar a visibilidade de um objeto é essencial ao adicionar Interações. Muitas vezes, você vai querer que a interação comece com o objeto em estado invisível. Para saber mais sobre Interações e prototipagem, acesse aqui.