Formato, Estilo e Cor Geral

Depois que elementos de design – stencils, templates, imagens e ícones – são adicionados à página, eles são chamados de Objetos.

Todos os objetos – Stencils, Ícones e Imagens – podem ser estilizados e personalizados no Painel de Formato – e compartilham muitos dos mesmos controles de formatação.

As imagens também têm ferramentas de edição adicionais como recorte, remoção de fundo e patching que você pode ler em Formatar, Editar e Substituir Imagens.

Neste artigo, apresentaremos o Painel de Formato e mostraremos como personalizar stencils usando os controles de formatação geral que se aplicam a todos os objetos. Também mostraremos como salvar um estilo personalizado para um stencil específico.

Alguns stencils têm seus próprios controles de formatação adicionais específicos para seu uso: Notas e Anotações, Smart Shapes, Gráficos, Tabelas e todos os stencils de Diagrama e Baseados em Texto. Cobriremos cada um desses casos específicos nos artigos subsequentes desta seção.

Painel de formato

Vá para a Barra Lateral Direita e clique na Aba Formato. A aba ficará azul e abrirá o Painel de Formato. O Painel de Formato também abre automaticamente quando você dá um duplo clique em qualquer stencil que não seja de texto (enquanto um duplo clique em um stencil de texto abrirá a Janela de Formatação Rápida de Texto).

O Painel de Formato é dividido em Seções com controles de formatação específicos. As seções são recolhíveis, portanto clicar no nome de uma seção ocultará ou revelará essa seção.

O painel sempre exibirá as seções padrão comuns a todos os stencils: Tamanho e Posição, Preenchimentos e Traços, Opacidade, Sombra Projetada e Desfoque.

Se um stencil vem com capacidades de estilo adicionais específicas para seu uso, o painel exibirá uma seção dedicada com essas opções. Cobrimos cada um desses casos nos artigos a seguir.

Selecionar, dimensionar, posicionar, girar e inverter

Quando você seleciona um único objeto, o nome desse objeto é exibido no topo do painel, logo acima de suas coordenadas. Isso facilita localizar e identificar esse objeto no Painel de Camadas.

Quando você seleciona múltiplos objetos, o painel exibe o número de objetos nesse grupo, para ajudá-lo a confirmar sua seleção antes de aplicar quaisquer alterações de estilo ou transformações.

Os controles de Tamanho, Posição, Girar e Inverter são agrupados abaixo das coordenadas, e cada uma dessas ações pode ser realizada tanto no painel quanto na página.

Tamanho

Na página, use as alças de redimensionamento para alterar o tamanho do objeto.

No Painel de Formato, use as entradas de Largura e Altura para valores precisos e ajuste fino, e use as teclas de seta do teclado se quiser alterar esses valores incrementalmente.

Bloqueie as proporções de um objeto com o botão Bloquear proporção. Após bloquear um objeto, você precisará desbloquear a proporção se quiser redimensioná-lo no eixo horizontal ou vertical.

Posição

Na página, selecione um objeto e arraste-o para a posição desejada.

No Painel de Formato, defina a posição do objeto inserindo as coordenadas exatas nos campos de entrada. A posição do objeto é medida em distância de pixel a partir das margens esquerda e superior. Você pode usar as teclas de seta do teclado para alterar esses valores incrementalmente.

Girar

Na página, clique na alça de rotação no topo do objeto e arraste para girar.

No Painel de Formato, insira o valor em graus no Campo de Entrada de Rotação. Você pode alterar o valor usando as teclas de seta do teclado.

Dar um duplo clique na alça de Rotação redefine rapidamente o Ângulo de Rotação para '0'.

Inverter

Você pode inverter um objeto tanto horizontal quanto verticalmente.

Na página, selecione uma Alça de Redimensionamento e arraste-a pela linha central desse objeto para redimensionar e inverter simultaneamente.

No Painel de Formato, os Botões de Inversão vertical e horizontal invertem o objeto enquanto mantêm seu tamanho e proporção.

Transformação em Massa

Nossa ferramenta de Transformação em Massa permite formatar múltiplos objetos simultaneamente. Este recurso está habilitado por padrão e é baseado no usuário (ou seja, quando você o habilita ou desabilita, essa preferência é aplicada a todos os seus projetos).

Uma vez que você selecionou os objetos que deseja transformar, pode aplicar o mesmo dimensionamento (largura e/ou altura) ou as mesmas coordenadas X ou Y. Você também pode girar ou inverter em massa, horizontal ou verticalmente.

Isso ajuda a manter as coisas organizadas – independentemente de você estar trabalhando em wireframes, diagramas ou whiteboards. Dimensionamento e posicionamento consistentes tornam qualquer layout mais fácil de ler de relance.

Para usar a ferramenta Transformação em Massa:

1. Verifique o Painel de Formato e certifique-se de que o botão Ativar transformação em massa está habilitado.
2. Selecione múltiplos objetos arrastando o mouse sobre os elementos ou usando Shift + Clique para selecioná-los individualmente
3. Insira novas dimensões nas entradas de Largura/Altura, ou novas coordenadas nas entradas X/Y.
4. Se quiser desativar o recurso de transformação em massa, basta clicar no botão novamente.

Você também pode aplicar o tamanho ou as coordenadas de um objeto ao restante dos objetos na seleção:

1. Clique em qualquer objeto dentro de uma seleção para designá-lo como objeto de referência.
2. O objeto de referência será destacado com uma moldura azul espessa.
3. As dimensões e coordenadas do objeto de referência serão exibidas em cinza claro nas entradas.
4. Para aplicar qualquer um desses valores a cada objeto na seleção, basta digitar esses números exatos sobre os cinzas e pressionar a tecla Enter/Return.

Preenchimentos e traços coloridos, e gradientes

Você pode aplicar alterações de cor aos Preenchimentos e Traços dos objetos usando o Seletor de Cor na seção Preenchimentos e Traços do Painel de Formato. À medida que você adiciona cores, a lista de Cores do Projeto na parte inferior do seletor agrupará essas amostras.

Preenchimentos

Para preencher um objeto com cor, vá para a seção Preenchimentos e Traços e clique em Cor de Preenchimento para abrir o Popover do Seletor de Cor.

A Entrada de Cor aceita os seguintes formatos de cor: HEX de 8, 6 e 3 dígitos, RGB, RGBA, HSL, HSLA, LAB, LCH, bem como cores HTML nomeadas (por exemplo, red, green, blue, tomato, etc.).

• Selecione a Aba de Amostras para escolher um esquema de cores do Moqups Classic, Material Design, Bootstrap, iOS, HTML, TailwindCSS ou IBM Carbon Design. Esta aba também exibe as cores que você já usou no seu projeto.

  ou

• Selecione a Aba do Seletor para criar suas próprias cores personalizadas.

Em ambas as abas, você pode…

1. Inserir um código de formato de cor
2. Ajustar a opacidade da cor de preenchimento
3. Usar o conta-gotas para combinar uma cor; para ativar o conta-gotas, use nossa extensão do Chrome ou Firefox.

Traços

Traço refere-se à linha do próprio objeto.

Para ajustar a cor do traço, vá para o Painel de Formato e, na seção Preenchimentos e Traços, clique em Cor do Traço. Aqui, você também pode definir a opacidade do traço.

Abaixo das configurações de cor, você pode escolher a Largura do Traço e definir o Estilo do Traço como Sólido, Pontilhado ou Tracejado.

Gradientes

Gradientes criam combinações graduais de cores entre duas ou mais cores. Eles podem ser aplicados tanto a Preenchimentos quanto a Traços.

Para aplicar um gradiente…

1. Clique em Cor de Preenchimento ou Cor do Traço
2. No topo do Popover do Seletor de Cor, você pode escolher entre três Tipos de Preenchimento: Sólido, Gradiente linear e Gradiente radial.
3. Para gradientes, selecione Linear ou Radial.
4. O Controle deslizante de Gradiente tem dois Pontos de Parada padrão que podem ser movidos para frente e para trás para ajustar o ponto de início e fim do gradiente.
5. Clique em um Ponto de Parada para aplicar uma cor do Campo de Cor. O Ponto de Parada permanecerá azul enquanto ativo. Você pode fazer ajustes de cor adicionais abaixo usando os controles deslizantes de Matiz ou Opacidade, ou selecionando entre uma gama de amostras de cor derivadas da cor atualmente ativa.
6. Para adicionar mais pontos de parada, passe o cursor em qualquer lugar ao longo do Controle deslizante de Gradiente até ver o ícone '+'; clique no controle deslizante para adicionar um novo ponto de parada.
7. Para remover um ponto de parada, arraste-o para baixo até ele desaparecer.
8. Use o ícone Inverter à direita do Controle deslizante de Gradiente para reverter a ordem das cores.

Os controles no canto superior esquerdo permitem ajustar o Ângulo do gradiente (para Linear) ou o Centro (para Radial). Para ainda mais precisão, você pode definir o Ângulo Linear por grau, ou o Centro do Radial por coordenadas X/Y nos campos de entrada correspondentes.

O gradiente Radial também tem uma opção de Esticar que expande o gradiente Radial às margens do objeto.

Substituir cores

Este recurso torna possível atualizar rapidamente seu esquema de cores à medida que você avança de wireframes de baixa fidelidade para mockups de alta fidelidade – e finalmente para designs e protótipos polidos.

Você pode optar por substituir uma cor em todo o Projeto Inteiro, na Página Atual ou dentro de uma Seleção específica de objetos.

Para substituir uma cor no Projeto Inteiro ou na sua Página Atual:

1. Desselecione todos os objetos na página

2. Expanda a seção Substituir Cores no Painel de Formato

3. Selecione Página Atual ou Projeto Inteiro

4. Marque caixas para escolher Preenchimentos, Traços ou Cor do Texto

5. Clique na cor do projeto que deseja substituir

6. Selecione a cor de substituição de

   • Cores do projeto
   • Amostras
   • Seletor
   • Inserindo um código hex

Para substituir uma cor dentro de uma Seleção de objetos:

1. Selecione um ou mais objetos

2. Expanda a seção Substituir Cores no Painel de Formato

3. Selecione Página Atual ou Projeto Inteiro

4. Marque caixas para escolher Preenchimentos, Traços ou Cor do Texto

5. Clique na cor do projeto que deseja substituir

6. Selecione a cor de substituição de

   • Cores do projeto
   • Amostras
   • Seletor
   • Inserindo um código hex

Opacidade, sombras e desfoque

Opacidade

O controle deslizante de Opacidade ajusta a Opacidade global de um objeto inteiro ou grupo de objetos. Se quiser personalizar a opacidade com mais precisão, você também pode ajustar a opacidade do Traço (veja acima), juntamente com a Opacidade global, para um resultado visual combinado.

Sombra

Para adicionar uma Sombra a um objeto, navegue até o Painel de Formato e abra a seção Sombra Projetada.

Habilite a sombra para definir a cor, opacidade, ângulo, distância e tamanho da sombra.

Desfoque

Para adicionar um Desfoque a um objeto, navegue até o Painel de Formato, abra a seção Desfoque e habilite o controle deslizante de Desfoque. O recurso de Desfoque é particularmente útil ao simular uma janela popover ou modal.

Cantos arredondados

Você pode arredondar os cantos de um objeto tanto pelo Painel de Formato, na seção Cantos Arredondados, quanto diretamente na página, usando as alças personalizadas do objeto.

Para arredondar cantos pelo Painel de Formato:

• Use a seção Cantos Arredondados e insira valores nas entradas. Por padrão, os quatro campos de entrada estão sincronizados. Inserir um valor em uma entrada propagará esse valor para os outros cantos.
• Para inserir valores diferentes para cada canto, desselecione o ícone Sincronizar todos os cantos localizado entre as quatro entradas.
• Habilite Escalar Raio se quiser que os cantos arredondados sejam dimensionados proporcionalmente ao redimensionar um objeto.

Para arredondar cantos diretamente na Página:

• Para arredondar todos os cantos simultaneamente, arraste qualquer uma das alças personalizadas azul-claras em direção ao centro do objeto.
• Para arredondar um canto específico (apenas stencil Retângulo), segure Option/Alt e arraste a alça relevante em direção ao centro.

Copiar e Colar Estilos

Depois de personalizar um objeto, você pode aplicar essa personalização a outro objeto ou grupo de objetos.

Para copiar e colar estilos:

1. Selecione o objeto do qual deseja copiar os estilos
2. Clique com o botão direito e escolha Copiar Estilos ou pressione Alt/Option + C
3. Selecione o objeto onde deseja aplicar esses estilos
4. Clique com o botão direito e escolha Colar Estilos ou pressione Alt/Option + V

Copiar Propriedades

Se quiser copiar aspectos específicos da formatação de um objeto, você pode usar a ferramenta Copiar propriedades.

Para cada uma das seções de estilo dentro do Painel de Formato, você encontrará um botão no canto superior direito que copia as configurações para aquela opção de formatação específica (por exemplo, Texto, Opacidade, Padding, Sombra Projetada, etc).

Para copiar propriedades de um objeto:

1. Selecione o objeto do qual deseja copiar suas propriedades
2. Abra o Painel de Formato e encontre a seção de formatação que deseja copiar
3. Clique no botão Copiar propriedades
4. Selecione o objeto onde deseja aplicar esses estilos
5. Clique com o botão direito e escolha Colar Estilos ou pressione Alt/Option + V

Salvar estilos personalizados para stencils

Quando você salva um estilo personalizado para um stencil, toda vez que você adicionar um tipo específico de stencil à página, esse objeto adotará seu estilo personalizado.

Para salvar um estilo personalizado para um tipo de stencil:

1. Estilize um objeto stencil na página usando o Painel de Formato
2. Selecione esse objeto
3. Clique com o botão direito para abrir o Menu de Contexto
4. Escolha Salvar estilo personalizado para esse tipo de stencil
5. Todos os objetos subsequentes desse tipo agora refletirão esse estilo

Para remover um estilo personalizado de um tipo de stencil:

1. Selecione o objeto stencil na página
2. Clique com o botão direito para abrir o Menu de Contexto
3. Escolha Limpar estilo personalizado para esse tipo de stencil

Para remover estilos personalizados de todos os seus tipos de stencil:

1. Selecione o objeto stencil na página
2. Clique com o botão direito para abrir o Menu de Contexto
3. Escolha Limpar todos os estilos salvos

Perguntas e respostas

Como posso ver exemplos de stencils que já foram formatados – seja em uma página ou dentro de um projeto?

Nosso site tem uma seção inteira dedicada a Templates prontos. Lá, você encontrará exemplos profissionalmente projetados e casos de uso em quatro categorias: Wireframes e Mockups, Mapeamento e Diagramação, Gráficos e Infográficos e Planejamento e Ideação. Clicar em qualquer um desses templates os abrirá no aplicativo Moqups e permitirá que você experimente, personalize e salve.