Photos, GIFs, and QR Codes in Designer

Neste artigo, abordaremos como adicionar e editar Fotos, GIFs e Códigos QR no Designer.

• Fotos
  • Fundo
  • Filtro
  • Recortar
  • Máscara
  • Substituir
  • Removedor de Fundo
  • Link
  • Configurações
  • Efeitos
  • Animar
  • Posição
  • Bloquear / Copiar Estilo
• GIPHY
• Códigos QR

Usando o Designer, você pode usar uma ampla variedade de fotos de banco de imagens, GIFs do GIPHY e códigos QR personalizáveis para tornar seus designs mais dinâmicos.

Para obter informações gerais sobre o aplicativo Designer, consulte nosso guia Primeiros Passos no Designer.

Essas opções podem ser acessadas no Menu Lateral do Designer:

Fotos

Selecionar a opção Fotos abrirá a seção Fotos do Menu Lateral:

Aqui, você pode pesquisar qualquer tipo de foto de banco de imagens que deseja usar. Uma vez selecionada, ela será colocada no design.

Para editar a foto, selecione-a. As opções do Menu Superior mudarão:

Vamos abordar cada uma dessas opções.

Fundo

A opção Fundo permite alterar a camada de fundo da foto.

Filtro

A opção Filtro abre o Menu Lateral, permitindo selecionar diferentes filtros para adicionar à sua foto:

Recortar

A opção Recortar permite recortar a foto ou imagem selecionada.

A área de recorte pode ser arrastada, expandida e retraída, com opções de Proporção e a capacidade de virar e girar a imagem. Uma prévia da imagem recortada está presente no canto superior direito da tela, e o tamanho da imagem é indicado. Por fim, a área de recorte pode ser alterada para ser um Retângulo ou Círculo.

Máscara

Clicar na opção Máscara abrirá a opção Máscara no Menu Lateral.

Selecionar uma Forma no menu Máscara aplicará automaticamente uma máscara dessa forma à imagem. A imagem ainda pode ser movida após a aplicação da máscara.

Clicar em Editar Máscara permitirá mover a própria máscara ao redor da imagem. Clicar em Inverter trocará as áreas que estão sendo mascaradas. Clicar em Aplicar Máscara reaplicará a máscara na imagem.

Substituir

A opção Substituir permite substituir a imagem ou foto por uma imagem do dispositivo atual. Isso pode ser acessado através do Menu Superior ou da barra de ação rápida:

Removedor de Fundo

A opção Removedor de Fundo detecta e remove automaticamente fundos de imagens. Atualmente, suporta apenas remoção automática e não é possível apagar ou restaurar o fundo de forma personalizada.

Você precisará aguardar o ícone de carregamento terminar:

Uma vez concluído, clique em Salvar, e o fundo terá desaparecido.

Link

Selecionar a opção Link permite transformar sua foto ou imagem em um elemento interativo, usado principalmente para quiosques. Isso abrirá a seção Opções de Link na Barra de Navegação Esquerda:

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

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

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

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á essas opções para seu link:

• Duração (segundos) - Quando o link é clicado ou tocado, quanto tempo o link ou ativo será exibido antes de retornar ao design principal. Isso começa a partir do último toque na tela ou momento em que o link foi clicado.
• Pré-carregar - Quando marcado, o site 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 que precisam ser carregados pode causar atraso.

Expandir a seção Estilizador de Barra de Navegação e Fechamento fornecerá essas opções para seu link:

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 desligado totalmente.
• Estilo do Ícone - Permite definir o estilo do ícone. Escolha entre Rótulo, 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 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. Fica assim:

Configurações

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

Clicar em Criar Mapeamento de Dados permite tornar o texto 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 do seu texto. Isso abrirá a seção Efeitos no Menu Lateral:

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

Expandir a seção Cor permite adicionar cor à foto ou imagem.

Selecione entre cores predefinidas, cores usadas neste design ou através do seletor de cores.

Expandir a seção Fundo permite definir uma cor de fundo específica para a foto ou imagem. Isso é funcionalmente o mesmo que a opção Fundo do menu superior.

Expandir a seção Opacidade permite variar a opacidade da área selecionada - fundo e texto juntos.

Isso pode ser ajustado através do controle deslizante. Abaixo é mostrada meia opacidade:

Expandir a seção Contorno permite adicionar um contorno à foto ou imagem. Você pode selecionar uma cor de um menu suspenso ou usar o seletor de cores e usar o controle deslizante para alterar sua espessura.

Expandir a seção Sombra permite criar uma sombra na foto ou imagem. Por padrão, todos os controles deslizantes estarão brancos.

Aplicar uma cor criará uma sombra, e alterar os controles deslizantes permite alterar o desfoque e deslocar a sombra ao longo do eixo X ou Y.

Expandir a seção Gradiente apresentará várias opções de gradiente para seu texto. Clicar em qualquer uma dessas opções de Gradiente a aplicará ao seu texto.

A seção Textura é semelhante à de Gradiente. Ela apresentará várias opções de textura para seu texto. Clicar em qualquer uma dessas opções de textura as aplicará ao seu texto.

Animar

Selecionar o botão Animar permitirá adicionar animações às suas fotos ou imagens. Clicar nele abrirá a área Animar no Menu Lateral:

Existem várias opções para adicionar Animações ao seu design. Para mais informações sobre isso, veja nosso artigo sobre Animações.

Posição

Selecionar a opção Posição abrirá a seção Posição do Menu Lateral. Isso permite posicionar com precisão a foto ou imagem, ou alterar sua camada.

• Trazer para Frente - Traz a foto ou imagem selecionada para a camada superior
• Avançar - Traz a foto ou imagem selecionada uma camada acima
• Enviar para Trás - Traz a foto ou imagem selecionada para a camada inferior
• Recuar - Traz a foto ou imagem selecionada uma camada abaixo
• Alinhar à Página - Opções para alterar o alinhamento da foto ou imagem selecionada
  • Esquerda
  • Centro
  • Direita
  • Topo
  • Meio
  • Inferior
• Espaçar Uniformemente - Alinha a foto ou imagem dentro da seleção maior
  • Verticalmente
  • Horizontalmente
• Virar - Vira a foto ou imagem selecionada
  • Horizontal
  • Vertical
• Posição - Permite o posicionamento específico da foto ou imagem no design
• Redimensionar - Permite o redimensionamento preciso do elemento de foto ou imagem selecionado
• Manter Proporção - Quando marcado, mantém a proporção ao redimensionar

Bloquear / Copiar Estilo

Clicar no botão Bloquear bloqueará a foto ou imagem selecionada no lugar, impedindo que quaisquer alterações sejam feitas nela.

Isso é útil ao lidar com muitos elementos em um design.

O botão Copiar Estilo permite aplicar rapidamente o estilo da foto selecionada a outra.

Isso é útil para estilizar rapidamente várias fotos.

GIPHY

A opção GIPHY no Menu Lateral permite escolher entre uma variedade de Adesivos, GIFs, Emojis e opções de Texto animado para colocar em seu design.

A função Pesquisar permite encontrar o GIF, Adesivo, Emoji ou Texto animado que deseja usar do GIPHY. Uma vez selecionados, eles serão colocados em seu design e animarão automaticamente:

Estes podem ser ajustados ainda mais usando o botão Posição.

Clicar neste enquanto o GIF está selecionado abrirá a guia Posição no Menu Lateral:

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

Manter Proporção - Quando marcado, mantém automaticamente a proporção ao redimensionar.

Usar como Fundo - Quando marcado, permite que o GIF seja usado como Fundo no design.

Código QR

A opção Código QR no Menu Lateral permite adicionar um código QR a qualquer design. Clicar em Adicionar Código QR oferece várias opções:

Escolha:

• URL do Site - Envia o usuário para o site quando o código QR é escaneado
• Email - Envia um email para um endereço específico quando o código QR é escaneado.
• Texto - Exibe texto quando o usuário escaneia o código QR
• Ligar - Faz uma chamada telefônica quando o usuário escaneia o código QR
• SMS - Envia uma mensagem de texto para um número específico quando o código QR é escaneado
• Loja de Aplicativos - Envia o usuário para a Apple Store ou Google Play Store quando o código QR é escaneado.
• Facebook - Envia o usuário para a página do Facebook quando o código QR é escaneado.
• Instagram - Envia o usuário para a página do Instagram quando o código QR é escaneado.
• X - Envia o usuário para o perfil do X quando o código QR é escaneado.
• WiFi - Dá ao usuário acesso a uma rede WiFi quando o código QR é escaneado.
• WhatsApp - Envia uma mensagem no WhatsApp quando o código QR é escaneado.
• Ativo - Escolha um ativo OptiSigns para o usuário ver quando o código QR é escaneado.

Clicar em Atualizar Código QR permite alterar o tipo de código QR ou atualizar qualquer informação.

Por fim, vários códigos QR podem ser adicionados ao design, se desejado.

É isso!

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