Shapes and Elements

Neste artigo, exploraremos todas as opções para criar e adicionar Formas e Elementos no Designer.

• Adicionar Formas e Elementos
• Opções de Formas e Elementos
  • Cores
  • Fundo
  • Link
  • Configurações
  • Efeitos
  • Animar
  • Posição
  • Bloquear e Copiar Estilo

Adicionar formas e elementos a um design é simples, mas com o Designer, há inúmeras opções para fazer suas palavras realmente se destacarem. De

Para mais informações sobre os elementos básicos do Designer, consulte nosso guia Começando com o Designer.

Adicionar Formas e Elementos

A opção Formas permite adicionar formas ou elementos pré-fabricados ao design.

Escolher Formas no Menu Superior abrirá a aba Elementos no Menu Lateral:

Aqui, você pode escolher entre Formas e Elementos para adicionar ao design. Há uma grande quantidade destes, então escolha os que atendem às suas necessidades.

Clicar em uma Forma ou Elemento irá adicioná-lo ao design:

As formas são reativas e podem ser redimensionadas ou rotacionadas à vontade:

Opções de Formas e Elementos

A Forma ou Elemento em si tem um conjunto completo de opções:

• Duplicar - Cria uma duplicata exata da forma ou elemento selecionado
• Excluir - Remove a forma ou elemento selecionado do design
• Mais
  • Copiar - Copia a forma ou elemento selecionado para ser Colado posteriormente
  • Copiar Estilo - Copia o estilo da forma ou elemento selecionado para transferir para outra forma ou elemento
  • Colar - Cola elemento da área de transferência sobre a forma ou elemento selecionado
  • Duplicar - Cria uma duplicata exata da forma ou elemento selecionado
  • Adicionar Componente -
  • Excluir - Remove a forma ou elemento selecionado do design
  • Camada - Opções para alterar a camada da forma ou elemento selecionado
    • Trazer para Frente - Traz a forma ou elemento selecionado uma camada acima
    • Trazer para o Topo - Traz a forma ou elemento selecionado para a camada superior
    • Enviar para Trás - Envia a forma ou elemento selecionado uma camada abaixo
    • Enviar para o Fundo - Envia a forma ou elemento selecionado para a camada inferior
  • Alinhar Elementos - Opções para alterar o alinhamento da forma ou elemento selecionado
    • Esquerda
    • Centro
    • Direita
    • Topo
    • Meio
    • Inferior
  • Link - Adiciona um URL à forma ou elemento selecionado.
  • Animar - Adiciona uma animação à forma ou elemento selecionado.

Clicar na Forma ou Elemento mudará o Menu Superior e será aplicado diretamente à seleção:

Cores

Selecionar a opção Cores abrirá a seção Cores no Menu Lateral. Selecionar qualquer uma dessas cores a aplicará à forma ou elemento selecionado:

Aqui, escolha entre cores predefinidas, cores já usadas neste design, ou através da opção Seletor de Cores.

Seletor de Cores

1. Seletor de Cor
2. Cor Atualmente Selecionada
3. Controle Deslizante de Cor
4. Controle Deslizante de Opacidade/Transparência
5. Entrada de Código de Cor
6. Alternador de Código - Alterna entre códigos de cores hexadecimais, RGB e HSLA
7. Cores Usadas Anteriormente

A Ferramenta Conta-Gotas permite escolher qualquer cor facilmente.

Fundo

Selecionar a opção Fundo abrirá a seção Fundo no Menu Lateral. Selecionar qualquer uma dessas cores as aplicará ao fundo da sua forma ou elemento:

Aqui, escolha entre cores predefinidas, cores já usadas neste design, ou através da opção Seletor de Cores.

Link

Selecionar a opção Link permitirá transformar sua forma ou elemento em um hiperlink. Abrirá a seção Opções de Link no Menu Lateral:

Clicar em Adicionar Link solicitará que você insira um URL ou selecione um arquivo:

Uma vez que um link ou arquivo tenha sido escolhido, mais opções aparecerão na seção Opções de Link:

Expandir a seção Escala fornecerá esta opção para seu arquivo:

Aqui, escolha como a imagem será dimensionada. Existem três opções:

• Ajustar (padrão) - Ajusta a imagem à tela.
• Esticar - Estica a imagem para preencher toda a tela.
• Zoom - Amplia a imagem para preencher toda a tela. Não recomendado para imagens pequenas em telas grandes, pois isso criará desfoque.

Expandir a seção Configurações fornecerá estas opções para seu URL ou Arquivo:

• Duração (segundos) - Quando o link é clicado ou tocado, quanto tempo o link ou arquivo será exibido antes de retornar ao design principal.
• Pré-carregar - Quando marcado, o site ou imagem será carregado quando o design for carregado. Isso reduz o tempo necessário para o site aparecer quando o link é clicado. No entanto, ter vários links precisando carregar pode causar atraso.

Expandir a seção Estilizador de Barra de Navegação e Fechar fornecerá estas opções para seu URL ou Arquivo:

Esta seção refere-se ao botão que aparecerá em suas telas quando for enviado para elas. Clicar ou tocar neste botão retornará você ao design original.

• Posição do Ícone - Mostra onde este ícone aparecerá. O padrão é Centro Inferior, mas pode ser colocado em qualquer lugar ao longo da parte superior ou inferior, ou desativado completamente.
• Estilo do Ícone - Permite definir o estilo do ícone. Escolha entre Etiqueta, Sólido, Redondo ou Padrão (veja acima)
• Tamanho do Ícone - Permite alterar o tamanho do ícone. Escolha entre Pequeno, Médio, Grande ou Padrão (veja acima)
• Cor do Ícone - Altere a cor HTML hexadecimal do ícone para melhor se adequar ao seu design.
• Cor de Fundo - Altere a cor HTML hexadecimal do fundo do ícone para melhor se adequar ao seu design.
• Opacidade - O controle deslizante permite alterar o quão opaco ou transparente é o fundo do ícone.
• Mostrar Barra de Navegação - Quando marcado, adiciona pequenas setas de navegação ao ícone. Permite navegar rapidamente através de vários links. Aparece assim:

Configurações

Selecionar o botão Configurações abrirá a seção Mapeamento de Dados no Menu Lateral:

Pressionar Criar Mapeamento de Dados permite tornar a forma ou elemento selecionado dinâmico, mapeado para uma de suas Fontes de Dados existentes. Veja nosso artigo sobre Fontes de Dados Dinâmicas com OptiSync para mais informações.

Efeitos

Selecionar a opção Efeitos permite alterar vários aspectos diferentes da sua forma ou elemento. Abrirá a seção Efeitos no Menu Lateral:

Aqui, você tem várias opções. Vamos analisar cada uma delas.

Expandir a seção Cor permite adicionar cor à forma ou elemento.

Isso é funcionalmente o mesmo que a opção Cores no Menu Superior de Formas e Elementos. Aqui, escolha entre cores predefinidas, cores já usadas neste design, ou através da opção Seletor de Cores.

Expandir a seção Fundo permite definir uma cor de fundo específica para a Forma ou Elemento.

Isso também é funcionalmente o mesmo que a opção Fundo no Menu Superior de Formas e Elementos. Aqui, escolha entre cores predefinidas, cores já usadas neste design, ou através da opção Seletor de Cores:

Expandir a seção Opacidade permite variar a opacidade da área selecionada - fundo e forma/elemento.

Isso pode ser ajustado com um controle deslizante. Abaixo está mostrada meia opacidade:

Expandir a seção Contorno permite adicionar um contorno à forma ou elemento, mas não ao fundo.

Você pode selecionar uma cor de um menu suspenso ou usar HTML hexadecimal, e usar o controle deslizante para alterar sua espessura:

Expandir a seção Sombra permite criar uma sombra na sua forma ou elemento. Por padrão, todos os controles deslizantes serão brancos.

Aplicar uma cor criará uma sombra:

Alterar os controles deslizantes permite alterar o desfoque e deslocar a sombra ao longo do eixo X ou Y.

Com um fundo transparente, a sombra aplica-se apenas à forma ou elemento em si:

Expandir a seção Gradiente apresentará várias opções de gradiente para sua forma ou elemento. Clicar em qualquer uma dessas opções de Gradiente a aplicará à sua forma ou elemento.

Expandir a seção Textura apresentará várias opções de textura para sua forma ou elemento. Clicar em qualquer uma dessas opções de textura as aplicará à sua forma ou elemento.

Animar

Clicar no botão Animar abrirá a seção Animar do Menu Lateral:

Para mais informações sobre os recursos de Animação do Designer, veja nosso artigo sobre Animação.

Posição

Selecionar o botão Posição abrirá a seção Posição do Menu Lateral.

• Trazer para o Topo - Traz a forma ou elemento selecionado para a camada superior
• Trazer para Frente - Traz a forma ou elemento selecionado uma camada acima
• Enviar para o Fundo - Envia a forma ou elemento selecionado para a camada inferior
• Enviar para Trás - Envia a forma ou elemento selecionado uma camada abaixo
• Alinhar à Página - Opções para alterar o alinhamento da forma ou elemento selecionado
  • Esquerda
  • Centro
  • Direita
  • Topo
  • Meio
  • Inferior
• Espaçar Uniformemente - Alinha a forma ou elemento dentro da caixa maior
  • Verticalmente
  • Horizontalmente
• Virar - Vira a forma ou elemento selecionado
  • Horizontal
  • Vertical
• Posição - Permite posicionamento específico da forma ou elemento no design
• Redimensionar - Permite redimensionamento preciso da forma ou elemento selecionado

Bloquear e Copiar Estilo

Pressionar o botão Bloquear bloqueará a forma ou elemento selecionado no lugar, impedindo que quaisquer alterações sejam feitas.

Isso é útil ao lidar com muitos elementos depois de colocar a forma ou elemento exatamente onde você deseja.

O botão Copiar Estilo permite aplicar rapidamente o estilo da forma ou elemento selecionado a outro.

Isso é útil para formatar rapidamente vários elementos.

Isso é tudo!

OptiSigns é líder em software de sinalização digital. Se você tiver perguntas adicionais, preocupações ou qualquer feedback sobre OptiSigns, sinta-se à vontade para entrar em contato com nossa equipe de suporte em support@optisigns.com.