Как создать баннер в Google Web Designer и выставить на сайт

Здравствуйте, уважаемые друзья. Сегодня я расскажу вам, как создать баннер в Google Web Designer и разместить его на сайте.

Программных приложений (программ) и сервисов для создания баннеров, достаточно, много.

Да и сами баннеры тоже бывают разные: статические и динамические, различных форматов: GIF, FLASH, HTML5, размеров и цветов.

Мы уже рассматривали способы создания баннеров в Photoshop, а также создавали flash-баннеры.

А сегодня научимся делать баннеры в новейшем формате HTML5 с помощью бесплатного программного продукта Google Web Designer.

Причём этот редактор нравится мне точно так же, как и Фотошоп. Только в нём разобраться легче.

Что такое Google Web Designer?

Google Web Designer – это бесплатная среда разработки (программа) для веб-дизайнеров и веб-мастеров. Программа позволяет создавать веб-дизайн от баннеров до целых веб-страниц с применением стандартов HTML5 и CSS3.

Созданные баннеры и графические объекты с помощью этой программы имеют адаптивный дизайн и одинаково хорошо смотрятся на экранах компьютеров и мобильных устройствах.

Функционал программы богат и в то же время прост в освоении. За счёт этого можно создавать реалистичные анимационные 3D эффекты.

Основная часть разработки ведётся в визуальном редакторе. Так что знание HTML и CSS необязательно, но приветствуются. Так как помимо визуального редактора есть возможность вносить изменения непосредственно в готовый код, и в таком случае программные возможности ограничиваться только вашим умением и фантазией.

Установка программы Google Web Designer на компьютер.

Установка доступна на компьютерах с операционной системой Mac OS, версия 10.7 и выше, Windows 7 и выше, а также Lunix.

В остальном системные требования щадящие, кроме оперативной памяти, объём которой должен быть не менее 2 Гб.

Процесс установки очень простой.

Шаг 1. Загрузка установочного файла.

Откройте официальный сайт программы, пройдя по ссылке:

http://www.google.com/webdesigner/

На главной странице нажмите на кнопку «Download Web Designer Beta».

У вас загрузится установочный файл.

Шаг 2. Установка программы.

Запускайте двойным кликом левой клавиши мышки установочный файл. После чего начнётся процесс установки и загрузки остальных файлов программ. По этому интернет в этот момент должен быть подключён.

Первый запуск программ.

Запустив программу, перед вами появится диалоговое окно с выбором. Где можно будет выбрать готовый шаблон или открыть проект с чистого листа. А также здесь есть ссылка для выбора ваших проектов, с которыми вы работаете или работали ранее.

Мы будем создавать проект с чистого листа, и поэтому выбираем «Создать файл».

Далее, нужно выбрать тип разрабатываемого объекта «Баннер». Там же есть и другие типы, их вы тоже сможете изучить в процессе.

В разделе «Контекст» выбираете «Внешнее объявления». Там же есть возможность выбрать конкретно рекламную сеть, для которой создаётся объявление.

После указываете размеры баннера, имя и папку для хранения проекта. И жмёте на кнопку «ОК».

Перед вами откроется интерфейс программы и рабочая область в виде размеров баннера.

Знакомство с интерфейсом.

Верхняя панель представлена в виде пунктов меню, которые знакомы вам и по другим программам. А чуть ниже, здесь находятся инструменты для выравнивания графических объектов и изменения их размеров.

Левая панель представлена инструментами для управления графическими объектами: перемещение, 3d-моделирование, создание надписей, графических объектов, заливки и т. д.

Правая, панель содержит все инструменты для управления настройками графических объектов. Все инструменты разделены на разделы, что позволяет быстро найти нужный инструмент.

Раздел «Цвет» говорит сам за себя. В этом разделе собраны инструменты для работы с цветом. Но в основном этим разделом вы будете пользоваться мало, так как все настройки будете делать с конкретными объектами через их свойства.

«Свойства» это основной раздел, с которым вы будет работать. Он отвечает за размеры графических объектов, их положение в пространстве, присвоение идентификатора, изменение цвета, рамки, прозрачности и так далее.

«Компоненты» в этом разделе собраны инструменты, которые позволяют сделать объект кликабельным, вставить галерею, видео, аудио, карту, кнопку вызова и многое другое.

«События» отвечает за настройку действий для каждого объекта. То есть что будет происходить после нажатия на кнопку или проведения пальцем по баннеру.

«CSS» в этом разделе, выбрав предварительно графический объект, можно вносить изменения в его стили или создавать новые.

«Библиотека объектов» хранит в себе все графические объекты конкретного проекта. Здесь вы может их просматривать и удалять, если в процессе они больше не участвуют.

«Динамическая» содержит в себе динамические объекты, которые вы будете создавать в процессе создания баннеров.

Нижняя панель представлена кнопками переключения графического редактора в режим просмотра кода, предварительного просмотра и публикации проекта. А также здесь находится панель управления объектами на шкале времени. Именно здесь создаётся анимация.

Процесс создания баннера в Google Web Designer.

Итак, на этапе создания проекта мы выбрали пользовательские настройки баннера, то есть указали его ширину и высоту. Эти параметры можно изменить в правой панели, в разделе «Свойства». Задавайте те размеры исходя из места, где вы будете размещать готовый баннер.

Шаг 1. Подготовка изображений.

Начало создания любого баннера – это подготовка исходных изображений. Я буду создавать баннер на тренинг Евгения Вергуса «Мастер партнёрских продаж». Поэтому я подготовил вот такие изображения. Предварительно оптимизировав их для уменьшения веса. Идеальным, конечно, было бы ещё и размер изображений сразу изменить под размер баннера, но если вы этого не сделает, то сможете изменить размер прямо в Google Web Designer.

Шаг 2. Настройка фона.

Для настройки фона переходите в раздел «Свойства» — «Стиль». Используя эти инструменты, настраивает фон для баннера. Я решил сделать радиальный градиент с засвеченными уголками своего рода, как скотч по углам.

Можно также использовать фоновое изображение, но в таком случае вес баннера увеличится.

Шаг 3. Построение баннера.

На этом шаге нужно выстроить все графические элементы так, как они будут выглядеть в готово виде. То есть, вы просто перетаскиваете ваши заготовки из папки в программу. Для этого наводите мышку на графический объект, зажимаете левую кнопку мышки и тащите на рабочую область в программе.

Перетащив объект, в разделе «Свойства» присвойте ему идентификатор и сделайте другие настройки, если это необходимо.

Расположение графических элементов для своего баннера я выполнил следующим образом:

При этом на временной шкале каждый элемент тоже занял стартовую позицию.

Шаг 4. Настройка анимации.

Теперь вы должны решить, какой объект будет появляться первым, какой вторым и так далее. Вы должны составить своего рода сценарий.

Определившись с первым действующим объектом, выбираете его в нижней панели. И на временной шкале, подведя курсор мышки, нажимаете правую кнопку и выбираете пункт «Вставить ключевой кадр».

Именно этот кадр будет отвечать за то, как появится объект. То есть на этом кадре объект должен будет появиться. Но, вместе с ключевым кадром появился и исходный (в начале временной шкалы).

Щёлкаете по исходному кадру левой кнопкой мышки и можно приступать к настройке анимации. Я задумал, что коробка с тренингом будет появляться, как бы из глубины. Для этого в разделе «Свойства» я изменяю, размер объекта на нулевые значения, и прозрачность выставляю в ноль.

Далее, переключаетесь на ключевой кадр и возвращаете свойства объекта на исходные значения. Так, вы настраиваете анимацию. Плавность движения регулируется отдалением ключевого кадра от исходного.

Таким образом, вы настраиваете и другие объекты. Их вы можете переместить за пределы баннера (на исходном кадре), а на ключевом кадре вернуть их обратно в пределы баннера. Будет создаваться впечатления полёта графических объектов.

У меня после выстраивания графических объектов, вид на первом кадре выглядит так:

На временной шкале видно, как для каждого объекта назначен начальный и ключевой кадр.

Во время работы с анимацией, пользуйтесь кнопкой «Воспроизведение» для просмотра анимации.

Примечание: градиент фона пришлось изменить, так как вид его впоследствии мне разонравился.

Шаг 5. Настройка временных интервалов.

До этого момента мы создавали анимацию на шкале времени в расширенном режиме. Это же можно делать и в «быстром режиме». Для перехода в быстрый режим нужно нажать на кнопку, похожую на три квадратика, расположенных горизонтально. Находится она в нижней панели рядом с кнопкой «воспроизведения».

Быстрый режим напоминает работу с панелью анимации в Фотошопе. Здесь вы можете визуально формировать каждый кадр и изменять временной интервал между кадрами.

Если вам будет удобно работать в этом режиме, то вы можете делать всю анимацию здесь.

Шаг 6. Настройка действия (события).

Как правило, баннер содержит ссылку, которая ведёт на определённую страницу. В нашем случае в баннере есть кнопка с призывом. Логично, что при нажатии на кнопку, должна открываться страница с партнёрским предложением.

Итак, в левой панели выбираете раздел «Компоненты» — «Кнопка изображения». И переносите шаблон на кнопку.

Теперь нужно настроить действие для этого элемента. Нажимаете правую кнопку мышки на этом элементе и выбираете пункт «Добавить событие».

Далее, нужно выполнить определённую последовательность. Первым делом выбираем событие. В нашем случае это мышь и клик.

В качестве действия выбираете «Обычное объявление» — «Выход».

На следующем шаге выбираете «gwd-ad».

И остаётся ввести ссылку и нажать на кнопку «Сохранить».

Шаг 7. Предварительный просмотр и публикация баннера.

После того, как вы закончили с настройкой анимации и присвоили событие, нужно посмотреть предварительный результат. Для этого в нижней панели есть кнопка «Предварительный просмотр». Нажмите на неё и посмотрите, как выглядит ваш баннер.

Примечание: В некоторых случаях эта кнопка может не работать. Тогда посмотреть предварительный результат можно, запустив файл проекта в папке, где вы его храните.

Убедившись в готовности баннера, переходите к его публикации. Для этого в нижней панели нажимаете на кнопку «Опубликовать». На выбор будет предложено 3 варианта. Выбирайте «Опубликовать локально».

Далее, просматриваете настройки. Если, нужно меняете имя файла, настройки и нажимаете на кнопку «Опубликовать».

Размещение баннера на сайте.

После публикации у вас будет архив или папка, зависит от того, как вы публиковали. В этой папке будет файл index.html и изображения, задействованные при создании баннера.

Шаг 1. Копирование файлов баннера на сервер.

Всю эту папку нужно скопировать на ваш сайт. Для этого я использую ftp-соединение. Но, это также можно сделать с помощью файлового менеджера на хостинге.

Итак, копируем папку с файлами на сервер.

Шаг 2. Вставка баннера в сайтбар.

Так как готовый баннер – это html файл, то вставить его проще всего в качестве фреймового объекта.

Открываете административную панель WordPress – «Внешний вид» – «Виджеты». Выбираете текстовый виджет и вставляете в него вот этот код:

<iframe id="banner300x300" src="http://site.ru/ПАПКА С БАННЕРОМ/index.html" allowfullscreen="allowfullscreen"></iframe>

Шаг 3. Настройка стилей оформления.

Так как валидатор кода ругается на стили в коде html, то мы эти стили вставим в файл стилей. И это правильно.

В коде фрейма я прописал идентификатор баннера (banner300x300), к нему и будем применять стили.

Для этого переходите в раздел редактор «Внешний вид» – «Виджеты» – «Таблица стилей» и вставляете вот эти стили:

#banner300x300 {width:300px; height:300px; border: none;}

Идентификатор я обозначил по размеру баннера. Это удобно, когда вы размещаете на сайте несколько баннеров разных размеров.

По желанию вы можете добавить выравнивание баннера по центру или по правому краю, или другие стили на ваше усмотрение.

В итоге у меня получился вот такой баннер:

Другие баннеры, которые я тоже делал для партнёрки, но других размеров я покажу в видеоуроке.

Статья получилась объёмная, и сложная в написании. Поэтому для более подробного изучения материала рекомендую посмотреть видеоурок, где я шаг за шагом создаю баннер в Google Web Designer и размещаю его на сайте.

На этом сегодня всё. Жду ваших комментариев и до встречи в новых статьях и видеоуроках, где я расскажу о создании баннера с эффектом 3D.  Друзья, я желаю всем удачи!

С уважением, Максим Зайцев.