Tutorial Google Web Designer

 

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  ........................... 8  5  Inserir link ou área de click no Google Web Designer – Tutorial GWD ...........................

6  Agrupar objetos no Google Web Designer – Tutorial GWD ................... .......................................... .......................... ...10    ......................... 11  7  Criar um objeto em HTML5 no Google Web Designer – Tutorial GWD......................... ......................................... 13  8  Animar um objeto no Google Web Designer – Tutorial GWD .........................................

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” “Arquivo”   com as funções novo, abrir, salvar arquivos e a função “Publicar” que “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 frame -chave na time line. 1.3- Visualizar –  Visualizar –  Opções  Opções de Ajustar a tela, exibir ou omitir grades e grade 3D. 1.4- Ajuda –  Ajuda –  Exibe  Exibe informações sobre alguns tópicos e tela de versão vers ão do Google Web Designer.

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

opções relacionadas a ferramenta selecionada.

 

 

2.1 –  2.1  –  Ferramenta   Ferramenta de seleção (V) –  (V)  –  Possibilita   Possibilita a seleção do elemento, movimentação, transformação, espaçamento e o alinhamento. 2.2- Ferramenta alterar objetos 3D (W) –  (W)  –  Habilita  Habilita a rotação do objeto em 3d 2.3- Ferramenta converter objetos em 3D (G) –  (G) –  Habilita  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) –  (P)  –  Traça  Traça vetor através de laços e nós. 2.6- Ferramenta Texto (T) –  (T) –  Insere  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 Linha 2.9 –  2.9  –  Ferramenta  Ferramenta Preencher (K) –  (K) –  Modifica  Modifica o preenchimento dos elementos 2.10- Ferramenta traço (k) –  (k) –  Modifica  Modifica a cor e a espessura da linhas dos elementos 2.11- Ferramenta alternar cenário 3D (M) –  (M)  –  Altera  Altera a visão 3d do projeto 2.12- Ferramenta Mão (M) 2.13- Zoom (Z) –  (Z) –  Zoom  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 –  Cor –  Acesso  Acesso a todas as opções de cores disponíveis. 3.2- Propriedades –  Propriedades –  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 –  Eventos para “Objetos de toque”, aqui você poderá indicar ações quando o seu objeto for tocado. 3.6- Css –  Css –  Você  Você poderá ver todo o código com as classes que estão 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 –  código –  Habilita  Habilita acesso a todo t odo o código 4.2- Visualizar –  Visualizar –  Previews  Previews nos browsers instalados na máquina. 4.3- Publicar –  Publicar –  Função  Função igual ao item no Menu Principal. 4.4- Zoom –  Zoom –  Controle  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 – T  Tu u torial GWD Tutorial para como criar banner animado em HTML5 no Google Web Designer.

O Google Web Designer como apresentado no artigo anterior, anterior ,TUTORIAL GOOGLE WEB DESIGNER – APRESENTANDO A INTERFACE DO GWD, 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.

 

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 icações de seu novo documento: - Automaticamente a ferramenta exibe as especificações para a criação de um Anú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  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á alterar especifica çõ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 preenchimen preenchimento to sólido e gradiente.

 

 3-  Desenhe uma forma no Google Web  3-

Designer

 

Selecione a Ferramenta Retângulo, Retângulo, clique no local desejado e arraste até a forma atingir a dimensão desejada. Nos painéis laterais defina a cor de preenchime preenchimento nto 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  4Designer 

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ç especificações õ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

 

interpolação intermediando intermediando os frames. Cada objeto ou camada poderá ser animados separadamente. Area   5-  Inserir link com o Tap Area 5Crie 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 paine l “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 Web Designer – T  Tu u torial 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” :  

selec ione a 1 – Selecione a “Ferramenta Tag” e na barra de opções no topo da janela selecione 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” transformação” da “Ferramenta de de Seleçã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 Web Designer. 2- Insira o ID da imagem no painel “Propriedades”   * A imagem será inserida in serida 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 – T  Tu u torial GWD Saiba 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”. 

 

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”  

c lique em “Save”   - Insira no campo “URL” o endereço de destino e clique 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 – T  Tu u torial GWD Aprenda 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 t ime-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 – T  Tu u torial 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;

 

 

 “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 preenchiment preenchimento o 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 – T  Tu u torial 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 diferente diferentes s 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 interpolação intermediando 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.