Google Web Designer. Урок по созданию html5 баннера

Видеоурок о создании html5 баннера в Google web designer. На самом деле я расскажу и покажу о трех разных баннерах: как импортировать объекты, как зациклить анимацию, как работать c svg и png файлами. Можно сказать, что получился некий учебник по новой программе. Вроде все просто и понятно.

Кликабельная навигация по ролику:
00:15 Что такое Adwords и контекстно медийная светь
01:10 Запрет на Flash от Mozilla, Chrome и Яндекс пинок дизайнерам для того чтобы начать заниматься html5 баннерами
8:03 Создание анимации в Google web designer
9:10 Какие файлы создает
9:48 Простой импорт svg-файов в новый проект
11:32 Работа с текстом и использование шрифтов из библиотеки Google Web Font
13:50 Что делать если нет подходящего шрифта?
15:10 Создание простой анимации в Гугл веб дизайнер
22:34 Работа с SVG-файлами
24:00 Варианты публикации файлы: локальная публикация
25:22 Html5 баннер в Google web designer
27:08 Вложенная анимация через группы
28:41 Создание инвертированной анимации, простой прием
29:07 3D на html5 в GWD
31:22 Зацикливание анимации вложенных символов
35:47 Новый баннер с использованием растровых изображений
40:58 Почему веб дизайнер бесплатный и почему его не надо качать с торрентов
42:26 Чего не хватает в программе

[KimVitaliy]

Очень поучительно . Большое спасибо . Волшебство, если совсем честно ...

[dkosarev]

Большое спасибо!
Видео очень быстро помогло понять все основы и разобраться в новом после Flash инструменте :)

[сансан-еи]

14:30 Если учесть что на выходе получаем "веб страницу", то чисто теоретически для того чтобы использовать шрифт которого нет в библиотеке Гугл нужно просто прописать (или заменить) путь до нужного шрифта в файле index.html, ведь по сути при сохранении проекта все его настройки нам доступы к редактированию через обычный блокнот, в том числе и картинки, а также при желании можно подключить какую нибудь аналитику (на хабре это описывалось) или же к примеру можно создать "шаблон" банера при этом спомощью программы автоматизаций сделать спомощью него баннеры под каждый ассортимент вашего товара, главное не выходить за определенные размеры поля (чтобы "не проплыла" верстка шаблона), вобщем это должно напоминать примерно создания баннеров в контекстной рекламе Яндекс, где по сути все действия ограничены, при этом получается неплохой результат (у топовых рекламодателей).

[WebDStudio]

Прикольно на видео фон сменил)))) зачет!!! просто кто не знает как делать хромакей и что это такое даже не заметят!))))

[max-trshchnk]

Интересно узнать более подробно о компоненте "Жест", как его можно использовать?

[olgast]

Даниил, скажите, как сохранять файл чтобы можно было редактировать его потом, я имею в виду как создать исходник? Чтобы можно было открыть к примеру на другом компьютере и продолжить редактирование?

[yastasyacom]

Спасибо за урок! Только у меня почему-то в google web designer не работают выбранные шрифты из web fonts, например тот же open sans меняется на times new roman. В чем м.б. причина?

[flashbullet]

Спасибо за отличный урок! Приложение конечно интересное, 3д вращение, настройка анимации кривыми особенно радует. Однозначно это реализовано хорошо, но функционал бедный по сравнению с Flash. Смысла пересаживатся не вижу, но несложный баннер при необходимости сделать можно. Так что нескоро еще забудем о Flash

[sergpeppper]

начал делать в adobe animate и параллельно в google designer баннер. в adobe timeline немного иначе себя ведет, я так и не смог задать движение элементам. В гугле напротив - быстро разобрался, но поскольку вижу его всего пару часов, то тупо ищу каждый инструмент по полчаса... Где же задать элементам гиперлинки?..

[voinywolnyprod]

анамировать крылья, анимировать тулафища, анимиравать глаза, дабавить облака

[assistent-pustoty]

Отличный урок, спасибо. Правда по указанной вами ссылке, вместо исходников готовые баннеры

[michaelqi]

Как поменять свойство без привязки к временной шкале? Если у меня элемент уже полностью анимирован, можно как-то переместить этот элемент в друге место(но что бы эго путь осталься таким же). У меня не выходит.

[vita]

Спасибо.Я только начала осваивать.К сожалению ( до того, как нашла ваши уроки) я скачала из интернета Google Web Designer- наверное у меня старая версия: нет внизу переключений на ..line?По вашей ссылке на офиц.сайт..там выдаёт, что для моб.устройств, а мне нужно на ноут. Помогите пожалуйста разобраться..это я туплю?!
Не пойму..у меня не открывает файлы в SVG и PNG..только хочет html..У меня что с настройками?! Help!

[tr]

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

[top-midjourney]

Данил, спасибо за урок.
Всё таки один вопрос остался, подскажите пожалуйста. При создании баннера выбираю адаптивный макет, внешнее объявление. Скажите, он будет адаптироваться сам таким образом под размеры экрана. Баннер размером 1280*173.
Заранеее спасибо!

[Mriloveg]

Круто, аналоги adobe muse гугл планирует делать?

[RoyalKirr]

У меня вопрос. Если у меня 3 слоя начинают движения в разное время но заканчиваются в одно, то как мне зациклить что бы при этом, сохранился правильный отступ по времени?

[АлександрМинаев-еп]

Здравствуйте, Данил.
Adobe Edge Animate CC или Google Web Designer на ваш взгляд является лучшим для создания баннеров сегодня?

[igor_]

Не получается редактировать svg, двойным кликом по объектам не появляются «хлебные крошки», эту функцию убрали?

[ЕвгенияИльина-ъц]

Подскажите пожалуйста. Что делать если элементы за пределами рабочей области остаются видны при просмотре?