A interface do Google Web Designer

O Google Web Designer tem uma grande área central para a criação de projetos e a edição de código. Ao redor dessa área central, há uma barra de ferramentas, uma barra de opções da ferramenta, uma linha do tempo e um conjunto de painéis que permitem modificar elementos e adicionar componentes ou eventos e muito mais.

O documento

No centro da interface do Google Web Designer, você vê o documento atual.

Duas visualizações de documentos diferentes estão disponíveis:

  • A Visualização de design mostra as imagens, o texto e outros elementos visuais do documento exatamente como eles serão exibidos em um navegador. O cenário branco representa a área visível do anúncio ou da página da Web.
  • A Visualização de código mostra o código do documento com a formatação e a codificação de cores apropriadas.

É possível personalizar a Visualização de design e a Visualização de código com a configuração das suas preferências.

1. Barra de ferramentas 2. Barra de opções da ferramenta 3. Cronograma  4. Painéis 5. Barra de visualização

Barra de visualização

Na barra de visualização, escolha entre a Visualização de design e a Visualização de código, bem como visualizar seu documento em um navegador e publicar o anúncio.

Ferramentas

Com a barra de ferramentas, é possível criar e manipular os elementos no cenário. Ela contém ferramentas para a criação de texto e elementos de página simples, ferramentas de seleção de cores e ferramentas 3D.

Ferramenta Descrição

Ferramenta Seleção
Selecione e mova objetos no cenário.

Ferramenta de trajetória de animação
Desenhe trajetórias de animação curvas para elementos animados. O recurso não está disponível para anúncios HTML para AMP.

Ferramenta Girar objeto 3D
Gire objetos em três dimensões.

Ferramenta de translação de objeto 3D
Mova objetos em três dimensões.

Ferramenta do elemento
Crie tags HTML de qualquer tipo ao clicar e arrastar no cenário.

Ferramentas Caneta, Oval, Retângulo e Linha
Crie desenhos em SVG, incluindo formas básicas, com a ferramenta Forma, e curvas de Bézier usando a Caneta.

Ferramenta Texto (T)
Adicione ou edite texto.

Máscaras Retângulo, Oval e Polígono
Adicione uma máscara de trajetória de corte a um elemento.

Ferramentas Preenchimento, Traço e Gradiente
Modifique a cor dos elementos no seu projeto, incluindo o preenchimento do elemento e os preenchimentos de traço e gradientes.

Ferramenta Girar cenário 3D
Altere a visualização em 3D do projeto.

Ferramenta Mão
Altere a visualização no cenário.

Ferramenta Zoom
Aumente e diminua o zoom do criativo.

Ferramenta de redimensionamento da janela de visualização
Altere o tamanho da janela de visualização em que você está criando conteúdo. O recurso não está disponível para anúncios HTML para AMP.

Opções da ferramenta

Na parte superior, a barra de opções da ferramenta mostra opções para a ferramenta selecionada no momento. Por exemplo, quando a ferramenta de texto está selecionada, a barra de opções da ferramenta exibe opções de fonte e layout do texto.

Linha do tempo

Modo rápido
Modo avançado

A linha do tempo permite criar animações usando frames-chave. No Modo rápido, a animação é criada cena a cena. No Modo avançado, você anima cada elemento separadamente.

Painéis

Os painéis são: Cor, Propriedades, Texto, Componentes, CSS, Responsivo, Eventos, Dinâmico, Biblioteca, Validador de anúncios e Ferramenta de contorno. É possível redimensionar, reordenar, combinar e fechar os painéis. Saiba mais sobre a organização de painéis.

Guias do documento

Se você abrir vários documentos, os nomes dos arquivos correspondentes serão exibidos em guias diferentes. É possível alternar os documentos abertos clicando em uma guia ou pressionando Ctrl+Tab para acessar o próximo documento. Use o atalho Shift+Ctrl+Tab para visualizar o anterior.

Se as guias do documento não se ajustarem à janela, clique no ícone Mais à direita das guias e veja uma lista de todos os arquivos abertos em um menu pop-up. Selecione o documento que você quer acessar ou passe o cursor sobre o nome de arquivo correspondente. Depois, clique em x para fechá-lo.

Isso foi útil?
Como podemos melhorá-lo?