Partilhar

Como usar o Google Web Designer

Por Vanessa Lopes. Atualizado: 16 janeiro 2017
Como usar o Google Web Designer
Imagem: idesigndream.com

A Google lançou uma ferramenta que ajuda na criação de conteúdo HTML5, chamada de Google Web Designer. Esta ferramenta está disponível em versão beta e pode ser baixada gratuitamente. O Google Web Designer pretende atrair tanto usuários com mais conhecimentos de programação como amadores, visto que contém funcionalidades que exigem mais conhecimento e outras que nem tanto. Com esta ferramenta é possível criar o seu site com um design interativo e compatível com qualquer dispositivo, tablet, smartphone ou pc. Esta é uma solução ideal para criar o design da sua página web. Se ainda não sabe como usar o Google Web Designer, não perca este artigo de umComo!

Também lhe pode interessar: Como editar HTML num blog de WordPress
Passos a seguir:
1

O download da versão do Google Web Designer é gratuito e, para o fazer basta acessar a google.com/webdesigner e clicar no botão "Download Web Designer Beta".

Como usar o Google Web Designer - Passo 1
2

Siga as instruções de instalação do programa e após estar instalado abra-o. Para começar o seu projeto tem de criar um novo ficheiro. Para isso vá a File - New File. Nesta tela deve escolher se quer criar uma propaganda, um ficheiro HTML ou um ficheiro CSS, JavaScript ou XML. Independentemente da escolha que fizer, deve dar um nome ao ficheiro e escolher o local onde o pretende guardar. No caso de pretender criar um anúncio, deve definir as medidas do mesmo. Em qualquer ficheiro criado você também deverá escolher o modo de animação (Animation Mode), se o pretende rápido (quick), ideal para quem não tem muita experiência neste campo, ou avançado (advanced), para quem já tiver alguns conhecimentos.

Como usar o Google Web Designer - Passo 2
3

Esta ferramenta é muito visual, por isso o Google Web Designer permite-lhe que se foque apenas na criação do design. Todos os códigos são gerados pelo programa, por isso não tem de se preocupar com isso. Sempre que quiser pode vê-los ou alterá-los, caso tenha conhecimentos de programação. Para isso, basta clicar no separador "Code view" que fica logo abaixo da tela de trabalho.

Como usar o Google Web Designer - Passo 3
4

O programa tem várias opções para a criação de animações, que podem ser direcionadas tanto para iniciantes como para avançados. Dependendo de se na criação do ficheiro você escolheu o modo de animação quick ou advanced, terá acesso a diferentes animações. No modo rápido, você constrói as imagens cena por cena e faz uma pré-visualização para ver se precisa de ser modificado. Enquanto que no modo avançado, você tem um maior controle em cada elemento da animação e consegue ver os layers, permitindo modificar qualquer coisa até que fique como deseja.

5

Também é possível manipular todo o conteúdo em 3D do site, utilizando a ferramenta de rotatividade de objetos. Com esta ferramenta é possível ver todos os ângulos do objeto, o que permite uma visão mais completa do design.

Como usar o Google Web Designer - Passo 5
6

O programa também conta com uma ferramenta de caneta, que permite uma espécie de desenho livre. Esta funcionalidade funciona de forma similar à ferramenta pen tool do Photoshop, se já estiver familiarizado será mais fácil.

Como usar o Google Web Designer - Passo 6
7

Com o Google Web Designer também é possível criar conteúdos para galeria, mapas e vídeos do YouTube embutidos.

Como usar o Google Web Designer - Passo 7
8

O Google Web Designer é uma plataforma com ferramentas que lhe facilitarão a construção de um site e é a solução ideal para as diferentes necessidades que esta tarefa acarreta. Comece a usar o programa e explore todas as possibilidades que ele tem para lhe oferecer!

Se pretende ler mais artigos parecidos a Como usar o Google Web Designer, recomendamos que entre na nossa categoria de Internet.

Conselhos
  • Já experimentou o Google Web Designer? Partilhe a sua experiência conosco!

Escrever comentário sobre Como usar o Google Web Designer

O que lhe pareceu o artigo?
2 comentários
A sua avaliação:
Web
helpful post. You can checkout our Web Development Service service.
A sua avaliação:
Vinicius Kohn
Prezados, quando clico na ferramenta caneta não aparece a opção de circulo e quadrado. Como devo proceder?

Como usar o Google Web Designer
Imagem: idesigndream.com
1 de 7
Como usar o Google Web Designer

Voltar ao topo da página