Tutorial Google Web Designer

7/22/2019 Tutorial Google Web Designer

http://slidepdf.com/reader/full/tutorial-google-web-designer 1/14

CONTEÚDO

2 Tutorial Google Web Designer – Apresentando a interface do GWD .............................. 1 3 Criar banner animado em HTML5 no Google Web Designer – Tutorial GWD ............... 4 4 Inserir imagens no Google Web Designer

– Tutorial GWD ................................................ 7

5 Inserir link ou área de click no Google Web Designer – Tutorial GWD ........................... 8 6 Agrupar objetos no Google Web Designer – Tutorial GWD ............................................. 10 7 Criar um objeto em HTML5 no Google Web Designer – Tutorial GWD ......................... 11 8 Animar um objeto no Google Web Designer – Tutorial GWD ......................................... 13

1 Tutorial Google Web Designer–

Apresentando a interface do GWD

Google Web Designer – Tutorial

Nesse tutorial apresentarei de forma geral as funções Google Web Designer de

modo que facilite os seus primeiros passos na ferramenta. Inicio descrevendo a

interface do Google Web Designer.

O Google Web Designer segue o padrão de layout das demais aplicações a sua

interface é composta por: Menu Principal(1), Barra de Ferramentas(2) , Painéis(3),

Linha do Tempo(4).

1- Menu Principal

No topo da janela o menu drop-down contém os seguintes itens: Arquivo(1.1),

Editar(1.2), Visualizar(1.3) e Ajuda(1.4):



1.1- Arquivo – No menu “Arquivo” com as funções novo, abrir, salvar arquivos e a função“Publicar” que permite a publicação direta as redes de anúncio.

1.2- Editar Com funções padrão como Desfazer, cortar, copiar e colar. Destaque para a função

“Cronograma” que tem opções de inserir ou remover frame-chave na time line.

1.3- Visualizar – Opções de Ajustar a tela, exibir ou omitir grades e grade 3D.

1.4- Ajuda – Exibe informações sobre alguns tópicos e tela de versão do Google Web Designer.

2 – Ferramentas

Na lateral esquerda temos os ícones das principais ferramentas e no topo

opções relacionadas a ferramenta selecionada.



2.1 – Ferramenta de seleção (V) – Possibilita a seleção do elemento, movimentação, transformação,

espaçamento e o alinhamento.

2.2- Ferramenta alterar objetos 3D (W) – Habilita a rotação do objeto em 3d

2.3- Ferramenta converter objetos em 3D (G) – Habilita a movimentação do objeto em 3 dimensões

2.4- Ferramenta Tag (D) – Habilita a criação de maneira simples de elementos em html em seu

documento.

2.5- Ferramenta Caneta (P) – Traça vetor através de laços e nós.

2.6- Ferramenta Texto (T) – Insere texto totalmente editável.

2.8 – Ferramenta Retângulo(R) / Ferramenta Oval(O) e Ferramenta Linha (L) – Desenha formas

básicas de acordo com a opção selecionada: Retângulo, Oval e Linha

2.9 – Ferramenta Preencher (K) – Modifica o preenchimento dos elementos

2.10- Ferramenta traço (k) – Modifica a cor e a espessura da linhas dos elementos

2.11- Ferramenta alternar cenário 3D (M) – Altera a visão 3d do projeto2.12- Ferramenta Mão (M) -

2.13- Zoom (Z) – Zoom in e out de deu projeto

3- Painéis

Na lateral direta estão os painéis que organizam itens que se modificam de

acordo com o elemento selecionado

3.1- Cor – Acesso a todas as opções de cores disponíveis.

3.2- Propriedades – Propriedades de acordo com o tipo de elemento selecionado

3.4- Componentes – Modelos de animações para aumentar a interação do usuário, disponível

inicialmente apenas para anúncios.

3.5- Eventos – Eventos para “Objetos de toque”, aqui você poderá indicar ações quando o seu objeto

for tocado.

3.6- Css – Você poderá ver todo o código com as classes que estão sendo utilizado no estilo.



4- Linha do Tempo

Através da Linha do Tempo do Google Web Designer você poderá criar

animações utilizando frame chave.

4.1- Visualização do design / Visualização do código – Habilita acesso a todo o código

4.2- Visualizar – Previews nos browsers instalados na máquina.

4.3- Publicar – Função igual ao item no Menu Principal.

4.4- Zoom – Controle sobre a visualização com zoom in e zoom out.

4.5- PagesLista de páginas do documento possibilitando a navegação entre elas.

Assim concluo a apresentação dos principais itens da interface do Google Web

Designer. Para mais tutoriais acesse a seguir conteúdo avançado sobre o Google Web

Designer:

Criar banner animado em HTML5 no Google Web Designer – Tutorial GWD

Crie banners interativos em HTML5 com o Google Web Designer – Tutorial GWD

2 Criar banner animado em HTML5 no

Google Web Designer – Tutorial GWD

Tutorial para como criar banner animado em HTML5 no Google Web Designer.

O Google Web Designer como apresentado no artigo anterior,TUTORIAL GOOGLE WEB

DESIGNER – APRESENTANDO A INTERFACE DO GWD, possui uma interface gráfica

simples e intuitiva o que facilitará os seus primeiros passos na ferramenta.

Caso você já tenha uma experiência com a ferramentas de animação como o 3D Max

ou Adobe Flash, perceberá que o Google Web Designer segue o layout padrão

simplificando as funções.

Esse tutorial utilizará funções abordadas nos artigos anteriores mais detalhadamente.

http://marketingdedesempenho.com.br/tutorial-google-web-designer-apresentando-interface-gwd/










Crie um banner animado em Html5 utilizando Google Web Designer com os seguintes

passos:

1 – Crie um novo documento acessessando “Arquivo/ Novo Arquivo” ou através do

atalho “Ctrl+N”. Defina as especif icações de seu novo documento:

- Automaticamente a ferramenta exibe as especificações para a criação de umAnúncio do Google do tipo Banner;

- Mantenha as configurações padrão de “Ambiente” e “Dimensões”;

- Defina o nome e local do projeto. Dê preferência para nomes descritivos, sem

caractere especial ou espaço;

- Altere para o “Modo de Animação” para a opção “Avançado”. O modo “Avançado”

habilita o controle total sobre a animação individual dos elementos em suas próprias

linhas do tempo. Já o modo “Rápido” habilita apenas a animação frame por frame.

Importante: Antes de seguir para a criação da peça, devemos planejar qual conteúdo

para adequarmos o tempo de animação e o peso máximo do banner. Tendo sempre

em mente os padrões de publicidade online do Google: 30 segundos de animação e

limite de peso de 50kb no padrão 300x250px.

2 – Stage e Background

Após a criação do arquivo você visualizará o stage do Google Web Designer com as

dimensões definidas na tela de “Novo Arquivo”, mas você poderá alterarespecificações como dimensão e estilo de seus stage no painel “Propriedade”.– Altere

o background do seu stage selecionando a opção “Estilo”, após o clique visualizará a

palheta de cor e as opções para preenchimento sólido e gradiente.



3- Desenhe uma forma no Google Web

Designer

Selecione a Ferramenta Retângulo, clique no local desejado e arraste até a forma

atingir a dimensão desejada.

Nos painéis laterais defina a cor de preenchimento e traço do objeto

Não se esqueça de definir no ID do objeto no painel “Propriedades”, dessa maneira

além de organizar o projeto facilitará localização e edição futuras

4- Anime os objetos com Google Web Designer

Todos os objetos poderão ser animados no Google Web

Designer, através da clássica de interpolação de movimentos criaremos animações

HTML5 a partir de especificações de valores diferentes para a propriedade de um

objeto em frames-chave diferentes

No exemplo a seguir, posicione o objeto na base do stage ao frame-chave inicial.

- Clique com o botão direito do mouse aos 00:01:00 na time-line e selecione a opção

“Inserir frame-chave”

- Selecione o frame-chave criado e mova o objeto da base para o topo do stage.

- Clique na opção “Reproduzir” acima de das camadas na time-line e visualize em seu

stage a movimentação criada.O Google Web Designer calcula a posição do objeto entre os frames-chave e cria uma

http://marketingdedesempenho.com.br/criar-objeto-html5-google-web-designer-tutorial-gwd/



http://marketingdedesempenho.com.br/animar-objeto-google-web-designer-tutorial-gwd/








interpolação intermediando os frames.

Cada objeto ou camada poderá ser animados separadamente.

5- Inserir link com o Tap Area

Crie objetos interativos um HTML5 através do Google Web Designer. Através da

interface gráfica do aplicativo insira links ou áreas de toque em objetos HTML5.Para criar um link no Google Web Designer você deverá:

- Selecionar no painel “Componentes” a opção “Área de Toque”, clique e arrastar a

opção para a área desejada em seu stage.

Defina o ID da área no painel “Propriedades”

- Clique nas arestas para redimensionar a área

- Clique no ícone de mais “+” no painel “Eventos”.

Na janela de Eventos

- Selecione em “Origem” a “Área de toque” que deseja atribuir o evento;

- Selecione o “Evento” “Toque/clique”;

- Selecione o “Destino” “Environment”;

- Selecione a “Ação” “Sair”;

- Insira no campo “URL” o endereço de destino e clique em

“Save”. Clique acima da time-line

na opção “Visualizar” para um preview em seu browser definido como padrão.

A seguir um exemplo de banner animado em HTML criado no Google Web Designer a

partir dessas ações listadas anteriormente:

3

Inserir imagens no Google WebDesigner – Tutorial GWD

http://marketingdedesempenho.com.br/inserir-link-area-click-google-web-designer-tutorial-gwd/






Aprenda com esse tutorial a inserir imagens no Google Web Designer.

Além de formas vetoriais você também poderá inserir imagens em seus projetos no

Google Web Designer.

Existem duas formas para inserir uma imagem no seu projeto:

- Através da “Ferramenta Tag” :

1 – Selecione a “Ferramenta Tag” e na barra de opções no topo da janela selecione a

opção “Elemento de imagem”

2- Clique e arraste no stage de seu projeto a área com a dimensão exata de sua

imagem.

3- Insira o ID da imagem no painel “Propriedades”

4- Insira o caminho de origem de sua imagem e o texto alternativo no painel “Image

Properties”

*Se a dimensão selecionada for diferente a imagem ficará distorcida, você poderá

alterar a qualquer momento a dimensão da área de sua camada da imagem no painel

“Propriedade” ou através do “Controle doe transformação” da “Ferramenta deSeleção(v)”

- Arrastando o arquivo para a janela do Google Web Designer

1- Localize em seus documentos a imagem desejada, selecione e arraste para a

janela do Web Designer.

2- Insira o ID da imagem no painel “Propriedades”

* A imagem será inserida com a dimensão original, garantindo assim que a imagem

não se distorça.

4 Inserir link ou área de click no Google

Web Designer – Tutorial GWDSaiba através desse tutorial como inserir link ou área de clique no Google Web

Designer.



Crie objetos interativos um HTML5 através do Google Web Designer. Através da

interface gráfica do aplicativo insira links ou áreas de toque em objetos HTML5.

Para criar um link no Google Web Designer você deverá:

- Selecionar no painel “Componentes” a opção “Área de Toque”, clique e arrastar a

opção para a área desejada em seu stage.

Defina o ID da área no painel “Propriedades”

- Clique nas arestas para redimensionar a área

- Clique no ícone de mais “+” no painel “Eventos”.

http://marketingdedesempenho.com.br/wp-content/uploads/2013/10/mktdesempenho_googlewebdesigner_eventos.jpg



Na janela de Eventos

- Selecione em “Origem” a “Área de toque” que deseja atribuir o evento

- Selecione o “Evento” “Toque/clique”

- Selecione o “Destino” “Environment”

- Selecione a “Ação” “Sair”

-Insira no campo “URL” o endereço de destino e clique em “Save”

Clique acima da time-line na opção “Visualizar” para um preview em seu browser

definido como padrão.

5 Agrupar objetos no Google Web

Designer – Tutorial GWDAprenda com esse tutorial agrupar objetos em HTML5 no Google Web Designer.

A maneira mais fácil de organizar e agrupar os seus objetos no Google Web Designer

é criando uma camada.

Para criar uma nova camada você deverá selecionar a “ferramenta

tag”

Definir na barra superior de opções o “Elemento Div”



Clique e arraste em seu stage a área qual deseja para a sua camada

Defina o ID no painel “Propriedades”

Clique na “ferramenta Seleção” e de um duplo clique sobre o objeto criado

Observe que a “migalha de pão”/breadcrumb acima da time-line haverá um novo

nível de profundidade na navegação.

Crie e anime os seus elemento dentro dessa camada criada

Retorne para a camada principal com um clique duplo fora da área da camada atual.

6 Criar um objeto em HTML5 no Google

Web Designer – Tutorial GWD

Este tutorial ensinará como criar um objeto em HTML5 no Google Web Designer.

Para desenhar uma forma como objeto no Google Web Designer você contará com

três opções de forma padrão:

“Ferramenta Retângulo(R)” – Traça objetos retângulares em HTML5;

http://marketingdedesempenho.com.br/wp-content/uploads/2013/10/mktdesempenho_googlewebdesigner_div.jpg

http://marketingdedesempenho.com.br/wp-content/uploads/2013/10/mktdesempenho_googlewebdesigner_div.jpg



“Ferramenta Oval(O)” – Traça objetos ovais em HTML5;

“Ferramenta Linha(R)” – Traça objetos lineares em HTML5;

Clique no local desejado e arrastar até a forma atingir a dimensão desejada.

Nos painéis laterais defina a cor de preenchimento e traço do objeto em HTML5.

Não se esqueça de definir no ID do objeto no painel “Propriedades”, dessa maneira

além de organizar o projeto facilitará localização e edição futuras.



7 Animar um objeto no Google Web

Designer – Tutorial GWD

Anime objetos em HTML5 com esse tutorial do Google Web Designer.

Todos os objetos poderão ser animados no Google Web Designer, através da clássica

interpolação de movimentos criaremos animações HTML5 a partir de especificações

de valores diferentes para a propriedade de um objeto em frames-chave diferentes

No exemplo a seguir, posicione o objeto na base do stage ao frame-chave inicial.-

Clique com o botão direito do mouse aos 00:01:00 na time-line e selecione a opção



“Inserir frame-chave”

- Selecione o frame-chave criado e mova o objeto da base para o topo do stage.

- Clique na opção “Reproduzir” acima de das camadas na time-line e visualize em seustage a movimentação criada.

O Google Web Designer calcula a posição do objeto entre os frames-chave e cria uma

interpolação intermediando os frames.

Você poderá definir a o número de repetições da animação de cada camada clicando

na opção “Definir repetição de animação”

Na janela “Looping de animação” você poderá definir “Nenhum” para não haver

repetições da animação, XX vezes para decidir quantas vezes animação será repetida

e “Infinito” para definir o looping infinito em sua animação.

Documents

Tutorial Google Web Designer