Criando um banner no Google Web Designer

Etapa 1: Começando

O Google Web Designer é um ambiente de desenvolvimento gratuito para webmasters fornecendo a capacidade de criar páginas da Web, incluindo itens individuais, como banners usando CSS3 e HTML5. Para usar esta ferramenta, antes de tudo, você precisa baixar o arquivo de instalação do site oficial e instalar.

Faça o download do Google Web Designer do site oficial

Instalação do programa

1. Clique no link apresentado acima para ir para a página agora e clique no botão "Download Web Designer". Observe que o programa suporta apenas versões do Windows 7 e posterior.



2. Através da janela Salvar pop-up, selecione um lugar no seu computador e use o botão marcado no painel inferior.



3. Vá para a pasta com acabou de salvar o arquivo e clique duas vezes no botão esquerdo do mouse para executar a abertura. Como resultado, a janela de instalação deve ser aberta.

   

   O procedimento de instalação em si é realizado no modo totalmente automático, salvando todos os arquivos de trabalho para o diretório com outros programas no disco do sistema.

Autorização

1. Se você quiser salvar projetos na Internet ou em geral, crie um banner especificamente para os serviços internos do Google, vale a pena realizar autorização. Para fazer isso, execute o programa usando o ícone apropriado, feche a janela de boas-vindas e clique no botão "Login" no painel superior.



2. Especifique os dados da Conta do Google, clique em "Avançar" e confirme se necessário. Depois disso, a conta será adicionada imediatamente, sem exigir algumas configurações individuais.

Mudando de configurações

1. Tendo entendido com a preparação, agora é desejável fazer alterações nas configurações básicas do software para facilitar o trabalho no futuro. Usando o painel superior, expanda o menu Editar e selecione "Configurações" no final da lista.



2. Na guia "Main", você pode alterar o comportamento inicial do programa para abrir rapidamente projetos, atribuir uma pasta para salvar os modelos criados, bem como definir valores padrão para a especificação do anúncio ao criar.



3. A página a seguir "Modo de exibição de layout" contém os parâmetros de aparência do editor. Alterando as configurações apresentadas, você pode ajustar os objetos de grade e vinculação para posicionamento mais preciso dos elementos.



4. O Google Web Designer tem um editor de código com suas configurações. Assim, na guia "Código do Visualizador", você pode atribuir o estilo de design, definir os parâmetros de formatação e adicionar ligações-chave a tarefas.



5. A última guia "estendida" contém apenas dois parâmetros - "log" e "escala de aplicativo". No primeiro caso, a inclusão criará um log de alterações, enquanto o segundo item permite definir uma nova escala padrão para a área de trabalho do editor.

   Tome cuidado! Se você definir muita escala, os problemas com a falta de espaço na tela podem aparecer para itens importantes.

Quaisquer alterações feitas de alguma forma ou outras exigem uma reinicialização do programa. Se você acabou de começar a trabalhar com o editor, não se esqueça da possibilidade de redefinir as configurações usando um item separado em cada uma das guias.

Passo 2: Criando um banner

Ao configurar o programa, você pode começar a trabalhar no banner usando todas as opções para o Google Web Designer. No entanto, observe que este remédio é exclusivamente como um editor visual, permitindo que você poste apenas elementos prontos que são criados separadamente, por exemplo, no Photoshop.

Trabalhe com ferramentas

1. Depois de preparar o layout, você precisa se familiarizar com as ferramentas. No painel superior da atenção principal, a lista "Ver" merece, permitindo ativar e desativar os elementos auxiliares.



2. Através do menu "Janela", você pode desativar temporariamente um elemento de interface específico. Por exemplo, se você quiser fazer um banner estático, a "linha do tempo" só interferirá e, portanto, é melhor remover o tick apropriado.



3. As principais ferramentas do editor são apresentadas na coluna da esquerda. Não consideraremos cada opção, já que nem todos os itens são usados ​​ao criar, no entanto, recomendamos a experimentar a si mesmo.



4. Ao lado da barra de ferramentas é apresentado "anunciando anúncios" com várias contribuições. Atenção especial merece "eventos" responsáveis ​​por ação com um ou outro objeto de banner e "CSS", onde os parâmetros de estilo são definidos.



5. A parte direita do programa também possui um conjunto de ferramentas que permite controlar a cor, texto, estrutura de objetos, propriedades e simplesmente camadas. Como o conjunto principal de funções, as janelas são melhores para estudar de forma independente no processo de criação de um projeto.



6. Se necessário, usar a "linha do tempo" pode ser criada um banner animado. Ao mesmo tempo, para gerenciar a área principal do editor, use um espaço de fixação e LCM, bem como um bloco com parâmetros de escala.

Preenchendo um layout

1. Criar um banner sempre começa com o fundo e, portanto, depois de preparar um layout, abra a guia "Propriedades" e no bloco de página, use a subseção "Preencher". É bem possível instalar qualquer cor, incluindo um gradiente ou um fundo totalmente transparente.



2. Além da fila, adicione elementos gráficos preparados com antecedência. Você pode fazer isso na guia Biblioteca de objetos clicando no ícone "+" no painel inferior.



3. Selecione os arquivos gráficos desejados e clique em Abrir. Isso pode ser feito de uma só vez para todas as camadas necessárias e, separadamente, repetir essas ações.



4. Para acomodar, aperte a imagem desejada na guia Biblioteca de objetos e arraste o editor para a área principal.

   

   Você pode controlar a localização do objeto com arrastar e dimensionar usual com uma ferramenta de seleção ativa. Se necessário, você sempre pode usar guias.



5. Ao selecionar um arquivo gráfico no espaço de trabalho ou na guia Editor Estrutural, abra as "Propriedades". Há muito mais do que mais possibilidades do que no caso do fundo, por exemplo, configurações de fronteira ou recuos.



6. Se o desenho do banner fornecer a presença de texto, você poderá adicionar o item apropriado usando a ferramenta padrão do Google Web Designer. Clique no ícone "T" no painel esquerdo, clique na janela do editor principal e insira o conjunto desejado de caracteres.

   

   Para controlar o texto, selecione a camada na guia "Editor Estrutural", expanda o "Texto" e defina os parâmetros apropriados.

Definindo a animação

1. No bloco "Timeline", você pode adicionar e configurar os efeitos da animação. Para começar, clique no botão "Adicionar ícone" com o ícone "+".



2. Clique no ícone ".5s" entre os quadros e defina os parâmetros que você precisa. Por exemplo, você pode alterar a duração e o estilo da transição.



3. Cada bloco individual na "linha do tempo" é completamente independente dos outros. Para criar animações, altere alguns itens para sua discrição e verifique o resultado usando o botão Play.

   

   Depois de concluir o processo de edição, use o botão Repetir. Isso criará uma animação sem fim.

Adicionando eventos

1. Tendo entendido com o layout, você precisa adicionar eventos de transição para elementos individuais ou todo o banner como um todo. Para fazer isso, na coluna Inspetor do Setor, abra a guia Eventos e clique no ícone "+" no painel inferior.



2. Na janela que abre a lista "Propósito", selecione um objeto que será referenciado.



3. Na página do evento, expanda a página "Mouse" e selecione "Clique". Dependendo dos requisitos para o resultado, você pode combinar instalações diferentes.



4. Além da lista "Ação", abra a declaração do Google e defina o valor "Transição". Tal escolha irá torná-lo para que o usuário funcione para a página específica que você precisa na Internet.



5. Como "destinatário", selecione uma versão "gwd-ad".



6. No último estágio no campo "Identif. Indicadores »Verifique o link para o atalho e preencha" URL "especificando a página desejada. Use "OK" para salvar.

Trabalhe com código-fonte

1. Como mencionamos, o Google Web Designer contém um editor de código integrado. Pode ser ativado usando o botão "Código" no lado direito do painel superior.



2. Você pode fazer alterações na estrutura de banner usando não apenas o editor visual, mas também trabalhando diretamente com o código no arquivo do projeto. Isso pode ser muito útil ao alinhar uma infinidade de pequenos elementos ou adicionar eventos não fornecidos pelo programa.

As ações descritas devem ser o suficiente para criar um banner, independentemente do aplicativo. Ao mesmo tempo, você pode expandir significativamente as capacidades combinando essas ferramentas.

Etapa 3: Conclusão

Quando o banner é concluído e pronto para colocação no site, você pode ir para o último passo. Primeiro de tudo, vale a pena verificar como seu trabalho na página da Web real se parece com.

Pré-visualização

1. No painel superior, clique no botão Visualizar para abrir o menu adicional. Aqui você pode especificar o navegador com o qual o banner será aberto.



2. Ao abrir todas as funções e a aparência do banner é preservada, mas com alguns recursos. Por exemplo, mesmo se você instalou uma repetição infinita da animação, tudo será limitado aqui apenas uma iteração.



3. Se necessário, você sempre pode demonstrar o resultado para outras pessoas. Para fazer isso, selecione "Obter um link de compartilhamento" e confirme o acesso à Conta do Google.

   

   Como resultado, um link aparecerá na tela para ver o banner em tal modo conforme descrito acima. Claro, é possível apenas se você tiver uma conta.

Preservação e publicação

1. Para salvar o projeto, primeiro abra o menu Arquivo e use a opção Salvar. Depois disso, o arquivo de origem será salvo no computador e pode ser aberto subseqüentemente.



2. Você pode preparar um projeto para colocar no site abrindo o menu "Publicar" no canto superior direito do programa e selecionando uma das localizações do Save.



3. Altere os parâmetros na janela de publicação a seu critério, deixando apenas as caixas de seleção desejadas e clique em "Publicar". A poupança acontece rapidamente, independentemente do tamanho do projeto.

   

   Como resultado, a pasta pode ser encontrada no lugar Salvar. A colocação do banner no site difere na dependência do site e, em geral, não pertence mais ao procedimento de criação.