Você está na página 1de 14

CONTEDO

2 3 4 5 6 7 8 Tutorial Google Web Designer Apresentando a interface do GWD .............................. 1 Criar banner animado em HTML5 no Google Web Designer Tutorial GWD ............... 4 Inserir imagens no Google Web Designer Tutorial GWD ................................................ 7 Inserir link ou rea de click no Google Web Designer Tutorial GWD ........................... 8 Agrupar objetos no Google Web Designer Tutorial GWD ............................................. 10 Criar um objeto em HTML5 no Google Web Designer Tutorial GWD......................... 11 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 funes 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 padro de layout das demais aplicaes a sua interface composta por: Menu Principal(1), Barra de Ferramentas(2) , Painis(3), Linha do Tempo(4).

1- Menu Principal
No topo da janela o menu drop-down contm os seguintes itens: Arquivo(1.1), Editar(1.2), Visualizar(1.3) e Ajuda(1.4):

1.1- Arquivo No menu Arquivo com as funes novo, abrir, salvar arquivos e a funo Publicar que permite a publicao direta as redes de anncio. 1.2- Editar Com funes padro como Desfazer, cortar, copiar e colar. Destaque para a funo Cronograma que tem opes de inserir ou remover frame-chave na time line. 1.3- Visualizar Opes de Ajustar a tela, exibir ou omitir grades e grade 3D. 1.4- Ajuda Exibe informaes sobre alguns tpicos e tela de verso do Google Web Designer.

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

opes relacionadas a ferramenta selecionada.

2.1 Ferramenta de seleo (V) Possibilita a seleo do elemento, movimentao, transformao, espaamento e o alinhamento. 2.2- Ferramenta alterar objetos 3D (W) Habilita a rotao do objeto em 3d 2.3- Ferramenta converter objetos em 3D (G) Habilita a movimentao do objeto em 3 dimenses 2.4- Ferramenta Tag (D) Habilita a criao de maneira simples de elementos em html em seu documento. 2.5- Ferramenta Caneta (P) Traa vetor atravs de laos e ns. 2.6- Ferramenta Texto (T) Insere texto totalmente editvel. 2.8 Ferramenta Retngulo(R) / Ferramenta Oval(O) e Ferramenta Linha (L) Desenha formas bsicas de acordo com a opo selecionada: Retngulo, Oval e Linha 2.9 Ferramenta Preencher (K) Modifica o preenchimento dos elementos 2.10- Ferramenta trao (k) Modifica a cor e a espessura da linhas dos elementos 2.11- Ferramenta alternar cenrio 3D (M) Altera a viso 3d do projeto 2.12- Ferramenta Mo (M) 2.13- Zoom (Z) Zoom in e out de deu projeto

3- Painis
Na lateral direta esto os painis que organizam itens que se modificam de acordo com o elemento selecionado

3.1- Cor Acesso a todas as opes de cores disponveis. 3.2- Propriedades Propriedades de acordo com o tipo de elemento selecionado 3.4- Componentes Modelos de animaes para aumentar a interao do usurio, disponvel inicialmente apenas para anncios. 3.5- Eventos Eventos para Objetos de toque, aqui voc poder indicar aes quando o seu objeto for tocado. 3.6- Css Voc poder ver todo o cdigo com as classes que esto sendo utilizado no estilo.

4- Linha do Tempo
Atravs da Linha do Tempo do Google Web Designer voc poder criar animaes utilizando frame chave. 4.1- Visualizao do design / Visualizao do cdigo Habilita acesso a todo o cdigo 4.2- Visualizar Previews nos browsers instalados na mquina. 4.3- Publicar Funo igual ao item no Menu Principal. 4.4- Zoom Controle sobre a visualizao com zoom in e zoom out. 4.5- PagesLista de pginas do documento possibilitando a navegao entre elas. Assim concluo a apresentao dos principais itens da interface do Google Web Designer. Para mais tutoriais acesse a seguir contedo avanado 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 grfica simples e intuitiva o que facilitar os seus primeiros passos na ferramenta. Caso voc j tenha uma experincia com a ferramentas de animao como o 3D Max ou Adobe Flash, perceber que o Google Web Designer segue o layout padro simplificando as funes. Esse tutorial utilizar funes 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 atravs do atalho Ctrl+N. Defina as especificaes de seu novo documento: - Automaticamente a ferramenta exibe as especificaes para a criao de um Anncio do Google do tipo Banner; - Mantenha as configuraes padro de Ambiente e Dimenses; - Defina o nome e local do projeto. D preferncia para nomes descritivos, sem caractere especial ou espao; - Altere para o Modo de Animao para a opo Avanado. O modo Avanado habilita o controle total sobre a animao individual dos elementos em suas prprias linhas do tempo. J o modo Rpido habilita apenas a animao frame por frame. Importante: Antes de seguir para a criao da pea, devemos planejar qual contedo para adequarmos o tempo de animao e o peso mximo do banner. Tendo sempre em mente os padres de publicidade online do Google: 30 segundos de animao e limite de peso de 50kb no padro 300x250px. 2 Stage e Background Aps a criao do arquivo voc visualizar o stage do Google Web Designer com as dimenses definidas na tela de Novo Arquivo, mas voc poder alterar especificaes como dimenso e estilo de seus stage no painel Propriedade. Altere o background do seu stage selecionando a opo Estilo, aps o clique visualizar a palheta de cor e as opes para preenchimento slido e gradiente.

3- Desenhe uma forma no Google Web

Designer Selecione a Ferramenta Retngulo, clique no local desejado e arraste at a forma atingir a dimenso desejada. Nos painis laterais defina a cor de preenchimento e trao do objeto No se esquea de definir no ID do objeto no painel Propriedades, dessa maneira alm de organizar o projeto facilitar localizao e edio futuras 4- Anime os objetos com Google Web Designer

Todos os objetos podero ser animados no Google Web Designer, atravs da clssica de interpolao de movimentos criaremos animaes HTML5 a partir de especificaes 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 boto direito do mouse aos 00:01:00 na time-line e selecione a opo Inserir frame-chave - Selecione o frame-chave criado e mova o objeto da base para o topo do stage. - Clique na opo Reproduzir acima de das camadas na time-line e visualize em seu stage a movimentao criada. O Google Web Designer calcula a posio do objeto entre os frames-chave e cria uma

interpolao intermediando os frames. Cada objeto ou camada poder ser animados separadamente. 5- Inserir link com o Tap Area Crie objetos interativos um HTML5 atravs do Google Web Designer. Atravs da interface grfica 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 opo rea de Toque, clique e arrastar a opo 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 Ao Sair; - Insira no campo URL o endereo de destino e clique em

Save.

Clique acima da time-line

na opo Visualizar para um preview em seu browser definido como padro. A seguir um exemplo de banner animado em HTML criado no Google Web Designer a partir dessas aes listadas anteriormente:

3 Inserir imagens no Google Web Designer Tutorial GWD

Aprenda com esse tutorial a inserir imagens no Google Web Designer. Alm de formas vetoriais voc tambm poder inserir imagens em seus projetos no Google Web Designer. Existem duas formas para inserir uma imagem no seu projeto: - Atravs da Ferramenta Tag : 1 Selecione a Ferramenta Tag e na barra de opes no topo da janela selecione a opo Elemento de imagem 2- Clique e arraste no stage de seu projeto a rea com a dimenso 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 dimenso selecionada for diferente a imagem ficar distorcida, voc poder alterar a qualquer momento a dimenso da rea de sua camada da imagem no painel Propriedade ou atravs do Controle doe transformao da Ferramenta de Seleo(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 dimenso original, garantindo assim que a imagem no se distora.

4 Inserir link ou rea de click no Google Web Designer Tutorial GWD


Saiba atravs desse tutorial como inserir link ou rea de clique no Google Web Designer.

Crie objetos interativos um HTML5 atravs do Google Web Designer. Atravs da interface grfica 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 opo rea de Toque, clique e arrastar a opo 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 Ao Sair - Insira no campo URL o endereo de destino e clique em Save Clique acima da time-line na opo Visualizar para um preview em seu browser definido como padro.

5 Agrupar objetos no Google Web Designer Tutorial GWD


Aprenda com esse tutorial agrupar objetos em HTML5 no Google Web Designer. A maneira mais fcil 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 opes 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 Seleo e de um duplo clique sobre o objeto criado Observe que a migalha de po/breadcrumb acima da time-line haver um novo nvel de profundidade na navegao.

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 trs opes de forma padro: Ferramenta Retngulo(R) Traa objetos retngulares em HTML5;

Ferramenta Oval(O) Traa objetos ovais em HTML5;

Ferramenta Linha(R) Traa objetos lineares em HTML5;

Clique no local desejado e arrastar at a forma atingir a dimenso desejada. Nos painis laterais defina a cor de preenchimento e trao do objeto em HTML5. No se esquea de definir no ID do objeto no painel Propriedades, dessa maneira alm de organizar o projeto facilitar localizao e edio 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 podero ser animados no Google Web Designer, atravs da clssica interpolao de movimentos criaremos animaes HTML5 a partir de especificaes 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 boto direito do mouse aos 00:01:00 na time-line e selecione a opo

Inserir frame-chave

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

- Clique na opo Reproduzir acima de das camadas na time-line e visualize em seu stage a movimentao criada. O Google Web Designer calcula a posio do objeto entre os frames-chave e cria uma interpolao intermediando os frames.

Voc poder definir a o nmero de repeties da animao de cada camada clicando na opo Definir repetio de animao Na janela Looping de animao voc poder definir Nenhum para no haver repeties da animao, XX vezes para decidir quantas vezes animao ser repetida e Infinito para definir o looping infinito em sua animao.