HTML5 баннер в Google Web Designer и загрузка на сайт

Автор Andrei Golubev
HTML5 баннер в Google Web Designer и загрузка на сайт

Всем привет.

Вы масса на проводе и сегодня мы будем делать баннерную рекламу понятно, что многим. Она надоела. Но никуда от него не деться.

Если вы в дизайнер делать её в любом случае придётся причём не просто картинка с текстом 1 аммиачная анимированный баннер html5 вроде такого, но для начала сделай мне, что попроще.

Не бойтесь аббревиатурой 405 с кодом также нужно уметь работать, но непосредственно в ходе мы будем ковыряться совсем немного. У нас есть визуальный редактор. Гугл веб дизайнер. Замечательная программа которая позволяет сразу видит то, что вы получите на выходе создаем здесь новый файл — это будет внешне объявления с размерами 468 на 60 пикселей поставил галочку адаптивный макет и режим анимации расширенный и сохраним проект с названием баннер там где нам нужно жмём. О'кей появляется рабочее поле и я сразу настрою фон баннера чтобы он был прозрачным потому, что лично меня очень раздражают разноцветные прямоугольники на сайтах далее. Что будет в самой рекламе. Я хочу поместить свой логотип и немного текстом начнём с логотипом импортировать объекты я добавляем сюда некоторые изображения — это формат освежи. Гугл веб дизайнер отличное переваривает этот формат правда — это будет не встроенный в Code Inline svg path внешнего файла сейчас я отредактирую его размеры 50 50 и дальше выравниваю по контейнеру во-первых здесь должно быть отмечено галочка. Здесь также должно быть отмечено галочку управления трансформации. Ну, а я выравниваю логотип. Сначала по горизонтальный, а затем по вертикали посередине теперь я хочу сделать чтобы логотип плавно появлялся при открытии страницы на которой расположен этот баннер вставляем первый ключевой кадр на самом деле он сразу становится вторым. Потому, что первый офд добавляется на 0 секунде. И теперь я могу редактировать состояния объектов в зависимости от времени для этого как раз есть вот — это временная шкала у меня отмечен сейчас 2 кадр. Я наоборот сейчас выберу 1 найду здесь свойства заливка и поставлю 0 соответственно здесь он у меня будет прозрачным и на. Первом на втором то есть кадре уже будет заливка 1 ты стопроцентно и теперь логотип будет. Вот так вот плавно появляться можно сделать так чтобы он появлялся дольше переместить. Этот второй ключевой кадр здесь ничего, а теперь я хочу чтобы этот логотип смещался влево и при этом ещё вращался то есть как будто бы переписывался для этого. Я создаю он ещё один ключевой кадр и когда он у меня выделен вот таким желтым ромбом то есть активен перемещаю логотип влево во-первых и его пока, что на произвольный угол то есть анимация будет выглядеть вот так как-то странно для того чтобы точно повернуть логотип на определенное количество градусов лучше всего зайти просмотр кода вот сюда найти вот эти вот ключевые кадры анимации. Вот они и есть обзор вращение на 114 градусов вместо 114 поставлю скажем 540 чтобы он вращался на полтора оборота и всё возвращаюсь просмотр и теперь всё выглядит как-то более. Естественно уже. А дальше я хочу чтобы появлялась ещё надпись импортируем второй объект надпись. Иван Москвин сразу же уменьшим размеры вот здесь я хочу поставить сейчас скрепку сохранить соотношение сторон допустим 47 пикселей чуть меньше по высоте будет надпись чем логотип и теперь создал ключевой кадр уже для этой надписи сразу два а. Первый из них которые находятся на 0 секунде удалю чтобы логотип ходит чтобы то есть надпись появлялась после того как логотип уже укатился влево опять же я хочу чтобы он появлялся плавно то есть в начале ставлю заливку на ноль и затем заливку на один и я хочу чтобы ещё он немного увеличился в процессе появления изначально сейчас я пас размер допустим 40 пикселей по высоте, а вот во втором кадре уже те самые 47. Ну вот примерно так я и хотел теперь напишем какой-нибудь текст я хотел этот баннер вставить в статью на devtool потом. Как создавать презентацию ну и соответственно. Я здесь напишу такой текст создание корпоративных презентация теперь выберу шрифт естественно. Гугл веб дизайнер поддерживает и. Гугл шрифты. Я здесь отмечу свою любимую Open Sans Kia текст выровнять по правому краю немного сейчас подкорректирую положение можно — это делать стрелками на клавиатуре, а можно и здесь в свойствах задавать положение и размера и опять же я хочу сделать чтобы этот текст также появлялся. Он плавно удаляю опять первый кадр здесь оставлю на втором кадре которые становятся уже первым заливку на ноль и втором заявку на единицу мы проверяем, что получилось. Ну вот, а теперь я хочу задать общее время всей анимация всех они. Пусть — это будет 5 секунд. То есть начинаем с четырёх с половиной секунд. Я хочу чтобы всем объекта обратно плавно убирались здесь у меня. Для текста стоит заливка один на пятой секунде ставим заливку 0 текст будет плавный исчезать и я хочу — это сделать для всех остальных элементов вставляя вот так вот ключевые кадры здесь заливка для надписи в. Алмаз, а один здесь соответственно и для логотипа тоже делаю ещё два ключевых кадров. А на последнем из которых заливка на нулям смотрим. Что в итоге получилось вот здесь я вижу, что логотип начинает вращаться в обратном направлении зачем-то. А всё потому, что я добавил новые кадры им Google авто пытается вернуть логотип на этих кадрах в исходное положение чтобы долго с этим не заморачивался. Опять еду вход нахожу. Где появилась вот — это вот лишние анимация. Вот они -180 — 180 добавились вот эти вот два ключевых кадров. А должно быть 540 поэтому. Возвращаю — это значение сюда.

0 комментариев
0

Читайте также