O Google Web Designer tem uma grande área central para a criação de projetos e a edição de códigos. Ao redor dela, 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 de código com a configuração das suas preferências.
1. Barra de ferramentas 2. Barra de opções da ferramenta 3. Linha do tempo 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 Trajetória de animação |
Desenhe trajetórias de animação curvas para elementos animados. O recurso não está disponível para HTML para AMP nem para anúncios gráficos. |
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 |
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 Pano de fundo poligonal, oval e retangular |
Adicione um div com um filtro de pano de fundo. O recurso está disponível somente para documentos de imagem e vídeo. |
Ferramentas Preencher, Traço e Gradiente |
Modifique a cor dos elementos no projeto, incluindo o preenchimento do elemento, de traço e de gradiente. |
Ferramenta conta-gotas |
Selecione a cor de um elemento no cenário. |
Ferramenta de rotação de 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. |
 Cor de preenchimento e de traço |
Mude a cor ativa de preenchimento e de traço (borda). |
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
O cronograma 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
Estes são alguns dos painéis: Cor, Propriedades, Texto, Componentes, CSS, Efeitos de CSS, Responsivo, Eventos, Dinâmico, Biblioteca, Validador de anúncios e Painel de navegação. É possível redimensionar, reordenar, combinar e fechar os painéis. Saiba mais sobre a organização dos 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. Para isso, clique em uma guia ou pressione 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 