Saiba como Utilizar o Google Web Designer e Assista um Vídeo Tutorial
O Google Web Designer é uma ferramentafree para Design
A possibilidade de usar serviços e ferramentas gratuitas é com certeza algo que todo mundo gosta. Usar serviços e ferramentas de qualidade também!
Quando estas duas características se juntam então, é maravilhoso! Não é nenhuma novidade que este é o caso dos serviços e ferramentas que são disponibilizados hoje pela empresa Google: muito do que é desenvolvido é livre e de excelente performance / qualidade.
Neste post apresento uma das ferramentas da Google: o Google Web Designer. A seguir, falo um pouco sobre a o aplicativo, sobre suas funcionalidades básicas, e indicamos um video tutorial bem objetivo (cerca de 26 minutos).
Sobre o Google Web Designer
Este software de Web Design foi lançado em Setembro de 2013 pela Google, a princípio para a criação de anúncios dinâmicos usando HTML5 , CSS3 e JavaScript .
Apesar de ter este objetivo específico (criar anúncios), a ferramenta está sendo aproveitada por seus usuários para criar sites dinâmicos com animações e elementos 3D . No vídeo que disponibilizamos a seguir, o instrutor explica que o software permite a customização das dimensões dos arquivos, garantindo a flexibilidade de seu uso, apesar de algumas limitações.
O software pode ser usado tanto por quem não tem intimidade com programação e deseja criar conteúdos interativos como também profissionais experientes com programação, graças a possibilidade de trabalhar com códigos HTML5 , CSS3 e Javascript .
Obs.: apestar de poder ser utilizado para criar páginas, o Google Web Designer parece não abrir páginas que não foram criadas pelo próprio aplicativo.
Download da ferramenta
Antes de começar a ler sobre as funcionalidades e aprender com o vídeo tutorial, é importante que instale a ferramenta:
Como Usar Google Web Designer: Tutorial Resumido
Instalação do Google Web Designer
O processo de instalação é simples. O link disponibilizado na página do Google Web Designer faz a instalação automaticamente e cria o atalho na área de Trabalho (no caso do Sistema Operacional Windows).Acessando o Software
Ao acessar o programa e criar um novo arquivo, você irá visualizar alguns padrões que devem ser escolhidos. Caso Você deseje criar realmente um anúncio, deve escolher o formato, tais como: Banner , Ampliável e Intersticial.
- Banner : este padrão permite que você crie um banner com qualquer dimensão padrão de anúncios do Google, ou mesmo customize a dimensão pretendida.
- Ampliável : escolha este padrão cado deseje criar um anúncio com tamanho ajustável, o que é interessante para que o anúncio se ajuste a dispositivos móveis.
- Intersticial : caso deseje criar anúncios com animações.
Caso deseje criar uma página qualquer em vez de um anúncio , deve escolher a opção "Outros" para criar um arquivo em branco. Existem as opções #HTML, #JavaScript, XML e #CSS.
Perceba que você pode escolher onde irá salvar seu arquivo e optar entre modo de animação rápido ao avançado (este segundo, habilita todas as funcionalidades).
Menus e Funcionalidades
- Em Editar , as funções básicas de edição, tais como copiar, recortar, colar, além de alguns recursos de animação.
- Em Visualizar , você pode conferir alguns recursos especiais, tais como:
- Visualizar circunscritos, para uma área específica que você delimitou
- Ajustar a grade e objetos
- Exibir grade 3D
- Visualizações: frontal, superior e lateral para ver o trabalho que você está criando sob diversas perspectivas
- Tópicos de Ajuda, para consultar o uso das funções e conhecer atalhos
Além do menu principal, você terá a disposição:
- Uma barra de Funções na parte superior da tela, com as opções:
- Alinhar (aresta superior, centro vertical, etc.).
- Distribuir (aresta superior, aresta inferior, etc.)
- Mover (a diante, para trás, etc.)
- À direita, você encontra os painéis:
- Um painel de cores
- Propriedades, onde você pode selecionar diversos elementos (body, div, field), e trabalhar suas atribuições, tais como posição, tamanho e estilos)
- Componentes, onde você pode atribuir a interatividade do usuário com o elemento criado: como irá reagir, qual será a área de toque, definir uma navegação de galeria, áudio , entre outros componentes.
- CSS: onde poderá trabalhar estilos.
- Na barra inferior, poderá optar pela visualização da página (visualização do Desing), Visualização do Código, e poderá testar a visualização em diferentes navegadores: Chrome, Firefox e Internet Explorer.
- Abaixo desta barra inferior, você visualiza o painel de animação, onde pode adicionar quadros ou remover quadros e ter as opções de "reproduzir" e "parar" para conferir como está ficando a sua animação. Perceba que existe a opção de "modo avançado" com mais alternativas.
- Na esquerda, você encontra uma barra de ferramentas: seleção, alternar objetos 3D, converter objetos 3D, tags, caneta , texto, retângulo, alternar cenário 3D, preencher, traço, ferramenta de mão e ferramenta de zoom.
Alguns destaques da Ferramenta
Apesar de não disponibilizar todos elementos que são utilizados por profissionais em Web Design, a ferramenta pode ser considerada impressionante, por disponibilizar desde a versão beta propriedades como sliders para imagens e àreas de toque.
Sliders para imagens : é possível criar tanto anúncios quanto páginas que apresentam desverias imagens de forma interativa.
Áreas de toque : funcionalidade é essencial para criação de banners, páginas ou aplicativos que usam touchscreen .
Vantagens e Desvantagens
Vantagens :
- É grátis.
- Fácil de criar animações
- Ótimo para quem precisa criar algo de forma prática, rápida e sem perder a qualidade
Desvantagens :
- Não é uma aplicação completa para web design profissional
- Não é possível abrir e editar arquivos HTML não criados na própria ferramenta
Exemplo de Utilização
No vídeo a seguir, disponibilizado pelo HX Tutors , você pode ver um exemplo de utilização, onde o autor cria um elemento e faz a demonstração da ferramenta, alternando entre a visualização do design e a visualização do código.
Vídeo Tutorial Google Web Designer por HX Tutors
Continue estudando web design e ferramentas relacionadas:
- Vídeos Tutoriais sobre Web Design
- Curso gratuito online de Photoshop CS5
- Curso de Indesign CS6 online grátis
- Cursos online de Autocad grátis
