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

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

 Создание баннера.

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

Перед тем как приступить к созданию баннера, вам не помешает подготовить исходные изображения. Я не буду заострять ваше внимание на создании конкретного баннера. Скажу только, что картинки для вашего будущего баннера полагается заранее оптимизировать для уменьшения веса. Конечно, идеальным вариантом было бы ещё и размер картинок модифицировать под размер баннера. Но не огорчайтесь, если вы этого еще не сделали. Вы сможете преобразовать размер прямо в Google Web Designer.

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

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

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

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

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

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

Для настройки анимации вам желательно решить, какой объект будет появляться первым, а какой - вторым, какой - третий и т.д. Получается, что вам потребуется составить своего рода сценарий. Когда вы наконец-то определитесь с тем, какой объект должен быть первым действующим объектом, то выбираете его в нижней панели программы. Затем подводите курсор мыши к временной шкале. На этой шкале нажимаете на правую кнопку мыши. В только что появившемся контекстном меню выбираете пункт «Вставить ключевой кадр«.

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

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

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

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

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

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

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

Мне лично быстрый режим в программе Google Web Designer напоминает работу в Фотошопе с панелью анимации. Здесь вы имеете возможность визуально формировать каждый кадр и, конечно же, изменять временной интервал между кадрами. Скажу сразу, что если вам понравилось работать в этом режиме, и вам удобно работать, то вы можете делать всю анимацию именно здесь.

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

Как вы сами знаете, что каждый баннер должен содержать в себе ссылку, ведущую на определенную страницу. Эта ссылка может выглядеть так, как вам угодно. В том числе и в виде кнопки. Обычно – это кнопка с призывом к действию. И логично будет предположить, что после нажатия на эту кнопку у вас откроется страница с партнерским предложением.

Поэтому, в левой панели вы находите раздел «Компоненты». А затем – «Кнопка изображения». И вам логично будет перенести шаблон на вашу кнопку. Затем вам необходимо настроить для этого элемента соответствующее действие. Для этого вы нажимаете правой кнопкой мыши на данном элементе и в появившемся контекстном меню выбираете пункт «Добавить событие».

Далее, вам не мешает выполнить действия в определенной последовательности. Первое, что вам потребуется, это выбрать событие. Предположим, это – мышь и клик. В качестве действия вы выбираете «Обычное объявление», а затем - «Выход». Следующий шаг – это выбор «gwd-ad». В итоге вам останется ввести ссылку и нажать на кнопку «Сохранить».

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

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

Обратите внимание на то, что данная кнопка может не работать в некоторых случаях. Если такое произошло, и кнопка не работает, то предварительный результат вы можете посмотреть другим способом. Для этого стоит запустить файл вашего проекта в той самой папке, где вы его храните.

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

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

После того, как вы нажали на кнопку «Опубликовать», у вас на компьютере появится папка или архив. Это будут зависеть от того, каким образом вы публиковали. Папка будет содержать в себе файл index.html и изображения, которые задействованы при создании баннера.

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

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

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

Теперь, когда папка с файлами вашего баннера загружена на ваш сайт через ftp-соединение, вам потребуется вставить его беспрепятственно в сайдбар.

Так как готовый баннер – это html файл, то вставить его проще всего в качестве фреймового объекта. Предположим, что вы работаете с WordPress. Тогда здесь открываете административную панель и выбираете пункт «Внешний вид», затем – «Виджеты». Потом находите текстовый виджет и вставляете в него код.

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

Стили необходимо вставить в файл стилей. Потому что валидатор кода ругается на стили в коде html. В коде фрейма вам необходимо прописать идентификатор баннера (например, banner300x300), к нему вы будете применять стили. Теперь переходите в раздел редактор «Внешний вид», затем – «Виджеты», затем – «Таблица стилей».И вставляете вот эти стили:

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

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

Если будет желание, то вы можете добавить выравнивание баннера. Обычно я выравниваю либо по центру, либо по правому краю. Можете пустить в ход и другие стили, но это уже на ваше усмотрение. Ну вот, наконец-то наш баннер готов.

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

Жду ваших комментариев и до встречи в новых статьях.

Я желаю всем удачи!