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

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

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

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

А сегодня научимся делать баннеры в новейшем формате 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 Гб.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Привет трудящимся! Макс, я пытался сделать баннер, так сказать, анимированый или как его там, короче с эффектом переключения, но так и не вышло. У меня другой фотошоп видимо, по твоим инструкциям делал. Надо будет замутить с помощью этой штуковина, а то стыдно даже, до сих пор баннеры не научился создавать (:

Иван, привет. Пробуй, учись. Дело интересное и нужное. Желаю удачи!

Иван, в этом мы похожи Я вот за два года тоже к этому так и не приспособился.

Максим, спасибо огромное! Получилось. ) Хотя пришлось повозиться с цикличностью элементов. На шкале времени продолжительность «ключевого кадра» поначалу делал только на период отображения данного элемента, а когда таких элементов много и у каждого свой отрезок был, при проигрывании баннера получалась каша, т.к. все элементы были в цикле сами по себе. К сожалению, у тебя на видео про это не сказано было. Может еще какое-то решение есть более правильное, но вышел из положения, что всем элементам установил одинаковый промежуток по времени, только в определенный момент делал ненужный элемент невидимым (непрозрачность 0).

Еще была проблема, что при проигрывании баннера в Google Web Designer все смотрелось хорошо, а после записи и просмотре баннера в браузере отображалось совсем другое. В чем именно проблема не понял, но когда для всех слоев начал делать отдельную div-группу, стало все нормально.

Вес баннера получился не маленький, но в целом, учитывая, что страница у меня тяжелая, этот баннер грузится быстрее всех. Посмотри: http://www.giport.ru/ (под блоком Главные Новости, 200х120пикс, про Туры.)

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

Здравствуйте, Эд. Про цикличность и объединение отдельных слоёв в блоки ДИВ я рассказывал в следующем уроке http://1zaicev.ru/kak-sdelat-banner-html5-v-google-web-designer-s-effektom-3d/ А ещё в скором времени я подготовлю урок по работе с несколькими страницами и настройкой цикличности с их помощью. Кстати, ваше решение задачи с цикличностью тоже можно успешно использовать. И ваш готовый баннер тому отличное подтверждение! По поводу ГуглДиска и увеличения скорости загрузки, то такая схема должна сработать. С обычной графикой работает. На баннерах не проверял, но надо тоже попробовать.

Здравствуйте Максим, а можно вопрос не по этой программе, я делаю баннера в эйдже, первый раз делаю для гугла, до этого на другие сайты все норм становился… гугл валидатор не принимает, сначала тег с размером нужно было добавить, я вписала ручками в html, все равно он не принимает, а еще и ссылки я так понимаю мой код ему не нравиться … вы не могли бы показать скрин баннера html файла как Google Web Designer его компилит ? Заранее спасибо

Здравствуйте, Анна. В этой статье есть архив с материалами урока, скачайте его и посмотрите код: https://1zaicev.ru/kak-sdelat-banner-html5-v-google-web-designer-s-effektom-3d/

Максим, нужна твоя помощь! В общем, хочу поменять шрифт и размер букв в комментариях, но не могу.. Облазил весь Css и чёт не нашёл, ты случайно не знаешь, как это сделать?

Вань, привет. Посмотри сначала класс блока с комментариями, а после найди этот класс в файлах темы. Сделать это можно в Total Commander. Найдёшь класс и тогда стили присваивай. Посмотри файл style.min.css и убери в первой строке стиль font-size: 1.25rem; . Проверил через панель вебмастера в браузере.

Максим, всё получилось с первого раза, благодарю за помощь! Ты прям, мой спаситель! Эх, так вовремя и что самое главное эффективно ответил, молодец!