Как сделать резиновый баннер
Обновлено: 07.07.2024
поискала тут уже более-менее поверхностно - не нашла ничего подходящего
еще немного подумала, но мало ли так и не придумаю
а делать надо завтра
вот какую шутку:
баннер с фиксированной высотой, но тянущийся по ширине в зависимости от ширины окна браузера
как такое сделать?
чтобы так же аккуратненько не просто тянул свою ширину от 100% в бесконечность, а именно как грамотно скроенный html - с относительным фиксированием центральных элементов, с "выезжанием" картинки бэкграунда.
подскажите, люди
буду весьма признательна
В хелпе ищем объект Stage , его свойства width и height и событие onResize … , а еще можно посмотреть хотябы в этом фроуме, где вопрос подымался не один раз
Инструкция
Баннер сделан. Допустим, в центре у него – мувик (видео изображение, отображающее суть какого-либо фильма или игры и т.д.) с надписью. Эта надпись всегда должна быть по центру. Нужно дать этому мувику имя, допустим – CenterText. На фоне надписи необходимо сделать другой мувик – с градиентной заливкой. Он и будет расширяться во всю ширину резинового баннера. Его можно назвать – Fon. Дальше следует назвать еще один мувик, прилепить его к правому края экрана. Пусть это будет RightText.
Следующим действием на главную сцену выносится ролик с баннером. Можно назвать его OurBanner. Получившиеся в ходе работы объекты и нужно будет двигать.
Зайдя на главной сцене в любой кадр, необходимо остановить ролик – написать Stop – и вынести на сцену пустой ролик для отлова событий. В него нужно вставить код:
onClipEvent(enterFrame)<
Stage.scaleMode = "noScale";
Stage.align = "TL";
Stage.addListener(this);
this.onResize = function () if (Stage.width>1000) this._parent.OurBanner.CenterText._x = Stage.width/2;
this._parent.OurBanner.RightText._x = Stage.width - this._parent.OurBanner.RightText._width-
this._parent.OurBanner.Fon._width = Stage.width->
>>
Резиновый баннер готов.
Совершенно необязательно покупать дорогостоящие графические редакторы или обращаться к специалистам, если вам необходимо создать собственный баннер. Вполне достаточно простейших бесплатных графических редакторов, например, MS Paint.
Вам понадобится
- - компьютер с установленным графическим редактором Paint
Инструкция
Откройте графический редактор Paint на вашем компьютере. Переформатируйте размер рабочего пространства так, чтобы он был идентичен размеру вашего баннера (для этого в разделе Image выберите строку Attribute и задайте ширину 468, а высоту 60 пикселей).
Добавьте картинку к вашему баннеру. Вы можете выбрать сохраненный на вашем компьютере рисунок или найти новый в интернете, вставив его посредством буфера обмена.Откорректируйте размер рисунка. Вы можете растянуть его под размер баннера (468 на 60), на пол-баннера (234 на 60) или на четверть (117 на 60).
Скопируйте и вставьте рисунок в ваш баннер. Кликните на рисунок левой кнопкой мыши и перетащите рисунок в желаемую область баннера.
баннер, вы и с сайтом справитесь" data-lightbox="article-image">
В рамках бизнеса появляются задачи, когда требуется быстро создать или редактировать существующий баннер и залить его на площадку. До этой статьи я не знала, что такое Google Web Designer, но изучив его, я поняла, что освоить его можно за один вечер.
Что такое Google Web Designer
Google Web Designer – это бесплатное приложение для создания объявлений и других видов онлайн-контента в формате HTML5. В нем существует как визуальный редактор, так и редактор кода. В визуальном редакторе можно создавать изображения с помощью инструментов рисования, добавлять текст и трехмерные объекты, а также анимировать элементы и события на временной шкале. В редакторе кода можно создавать файлы CSS, JavaScript и XML.
Google Web Designer будет полезен web-дизайнерам и маркетологам, которые хотят попробовать себя в сборке баннеров.
Я расскажу и покажу, как создавать баннеры формата HTML5 для загрузки в Google Ads и Yandex Direct. Для этого нам пригодится как визуальный редактор, так и редактор кода.
Как он выглядит
При запуске приложения появляется окно выбора, где можно создать документ с чистого листа или использовать готовый шаблон.
В этом же окне есть справка, где можно ознакомиться с функциями программы. Для демонстрации работы мы создадим баннер с нуля.
Выбираем платформу Google Ads или Внешнее объявление и задаем размер. Многие рекламодатели предпочитают заказывать креативы, которые подойдут и для Google Ads, и для Yandex Direct.
Какие разрешения мы можем использовать на обеих площадках:
160×600, 240×400, 300×250, 300×600, 320×50, 320×100, 336×280, 728×90, 970×250.
Вес каждого из них не должен быть более 150 КБ.
Режим анимации можем выбрать любой – в окне создания креатива есть кнопка, которая их переключает:
Быстрый режим анимации — для создания креативов покадрово (сцена за сценой).
Расширенный — для редактирования анимации каждого элемента в отдельности.
Так как мы будем создавать баннеры для двух площадок одновременно, нам потребуется переносить креативы с холста на холст, а в адаптивном режиме это невозможно. Поэтому этот пункт мы не отмечаем.
Посмотрим, как выглядит рабочая область Google Web Designer:
1. Панель инструментов. Тут находятся инструменты для создания и управления элементами в рабочей области. Здесь нам понадобятся инструменты выделения, пути перемещения, рука и масштаб. Здесь также можно создавать маску объекта, различные фигуры и кривые Безье. Есть пипетка и создание текста. Если понадобится, тут даже можно работать с 3D-объектами.
2. Панель настроек инструмента. Если выбрать какой-либо инструмент — в этой панели отобразятся все доступные действия с ним.
3. Временная шкала. На ней есть 2 режима управления анимацией – быстрая (покадрово) и расширенная (с каждым элементом на холсте). Именно с помощью этой панели мы будем делать анимацию.
4. Панель пользователя. Здесь расположены вкладки со стандартными операциями: создать, открыть, вырезать, изменить вид, справка и др. В разделе правка есть обработка изображений, которая поможет нам скорректировать цвета и удалить фон у изображения.
5. Рабочие панели. Выбор цвета, форматирование текста, структурный редактор, в котором находятся слои, как в Adobe Photoshop. Также есть инспектор объявления — он показывает, все ли условия нами соблюдены и можно ли загрузить баннер на рекламную площадку. Есть и другие панели, но мы рассмотрим только те, с которыми будем работать при создании баннера.
6. Панель просмотра. Здесь мы можем увидеть, как будет выглядеть баннер в браузере и опубликовать готовый вариант. В редакторе кода можно добавить дополнительные функции. Например, таймер обратного отсчета или календарь.
7. Холст документа. На нём мы будем создавать наш баннер.
Все панели можно двигать и перемещать по окну, то есть вы можете настроить рабочую область так, как вам это будет удобно. Если запутались и хотите вернуть изначальный вид рабочей панели, то перейдите в меню Окно → Рабочая область → По умолчанию, и вы вернетесь в исходный режим.
Создаем анимированный баннер с чистого листа
Выбираем изображения
В качестве примера рассмотрим продажу фруктов. Наша задача — создать баннеры на HTML5. Клиент – поставщик фруктов из Краснодарского края. Он хочет расширить свою сеть поставки привлечением новых клиентов путем контекстной рекламы с таргетированием на ключи, близлежащие регионы и аудитории заинтересованных пользователей.
Хочется, чтобы баннер был ярким и сочным, а композиция была простой и с теплыми тонами. Также на баннер желательно поместить побольше фруктов. согласно нашей тематике
Изображения можем поискать на фотостоках, таких как Shutterstock, Usplash, FreePik или Pngtree. Для баннера выбрали четыре формата: 240×400, 300×250, 300×600 и 336×280. Подготовили изображения нужных размеров в Adobe Photoshop.
Подбираем шрифты и с помощью Adobe Illustrator рисуем логотип бренда и призыв к действию. Создаем вариант логотипа и три состояния кнопки призыва к действию для компонента взаимодействия, который мы будем использовать: кнопка не нажата, на кнопку наведен указатель, кнопка нажата. Помните, что если в процессе работы возникнет необходимость замены каких-либо элементов, то в GWD мы можем это сделать в любой момент.
Не хватает фруктов. Используем два изображения в качестве основных и несколько изображений фруктов по отдельности. Убираем у них фон, делаем более мягкие края и правим все шероховатости.
У всех изображений прозрачный фон, они в формате PNG, за исключением фона. Только фон у нас непрозрачный, в формате JPEG.
Верстаем баннер для Google
Давайте теперь соберем наш первый баннер для Google Ads, формат 300х250.
Добавим все элементы, которые будут участвовать в этом баннере на холст.
Переименуем изображение здесь, чтобы не путаться. Изображений будет много.
Следующим идет изображение фруктов. Просто переносим, зажав мышкой, картинку на холст. Обращаем внимание на Инспектор — нам уже придется уменьшить все наши креативы. Не проблема — в сети достаточно бесплатных конвертеров. Для примера используем iLoveIMG.
Сейчас уже лучше. Поставим замочки на эти слои – они не будут участвовать в анимации.
Давайте добавим еще больше фруктов. По задумке, несколько фруктов должны будут упасть на стол и по инерции прокатиться по нему. Пускай это будет гуава, абрикос, яблоко и апельсин. Расположим их над холстом.
Задаем траекторию падения каждому фрукту и их реальные размеры. В свойствах подгоняем размер фрукта близкий к реальному по перспективе.
Для большей реалистичности добавим немного завершающего движения с вращением в Ease-out. Пример можно увидеть на временной шкале ниже.
Пришло время для появления логотипа. Давайте сделаем его появление из ниоткуда. Центрируем лого по вертикали, изменим масштаб до 0.05 и заливку до 0, а в последнем ключевом кадре вернем показатели по умолчанию.
Сделаем так, чтобы кнопка мигала. Копируем через каждые 4 клетки ключевое действие и чередуем заливку и масштаб 0,9 и 0,9 и 1 и 1. В первом ключевом кадре заливку оставим 0. Так сделаем 7 раз. Итого у нас получается 14 ключевых кадров. В конце заставим ее полностью исчезнуть — масштаб и заливка будут равны 0.
С логотипом мы поступим иначе — заливка будет равна нулю, но масштаб выставим 4. Логотип будет будто наезжать на экран. А после этого заставим фрукты укатиться за кадр с динамикой Ease-in.
Зациклим нашу анимацию, чтобы она повторялась. Добавляем ключевые кадры до начала анимации каждого объекта и до последней секунды. Делаем это для того, чтобы объекты повторялись идентично друг другу. Не забудьте выставить заливку 0 у логотипа и призыва к действию для того, чтобы эти объекты оставались невидимыми. Затем задаем повтор анимации 2 раза. Общее время должно быть не более 30 секунд, а так как мы создали повтор, то в итоге наша анимация теперь составляет 11.5 х 2 = 23 секунды.
Верстаем баннер для Яндекса
Для того, чтобы сверстать такой же баннер для Яндекса, нам потребуется создать новый документ, скопировать слои с временной шкалой и немного отредактировать код.
Возвращаемся к предыдущему объявлению. Мы должны снять все замки, выделить все компоненты во временной шкале, скопировать и вставить в новый документ. Все элементы и анимация скопированы полностью.
Теперь переходим в режим кода.
И делаем следующее:
meta name="environment" content="gwd-genericad"
вставляем такой код:
где width и height — ширина и длина нашего баннера.
Так как у нашего баннера размеры 300х250, вставляем строчку:
meta name="ad.size" content="width=300,height=250"
Не забудьте поставить скобки <> перед началом строчки и после нее
Находим абзац с телом баннера body. Со следующей строки, после открытия тела кода, вводим:
Находим /gwd-genericad в теле кода и закрываем тег:
И сразу после него добавляем скрипт:
script
document.getElementById("click_area").href = yandexHTML5BannerApi.getClickURLNum(1);
/script
Также не забудьте о скобках в начале и конце тега, как на скриншоте:
Инспектор объявления может выдавать предупреждение о недействительном URL, но, как показала практика ниже, в данном случае это не влияет на результат работы.
Сохраняем изменения и публикуем баннер как в прошлом разделе. Баннер для Яндекс.Директа готов.
Верстка других форматов и модерация объявлений
Остальные 3 формата, 240×400, 300×600 и 336×280, мы можем создать используя уже готовый баннер 300×250. Эти советы помогут ускорить работу:
Создайте новое объявление нужного вам размера и откройте уже созданный вами баннер. Скопируем некоторые объекты в новый баннер для ускорения процесса.
Добавьте фоновые изображения без анимации нужного размера и подгоните их по размеру баннера, если требуется.
Из временной шкалы предыдущего баннера скопируйте движущиеся объекты на новый. Нужные объекты можно выделить с помощью SHIFT и скопировать / вставить Ctrl+C / Ctrl + V. Они копируются вместе с анимацией.
Так как вы копируете объекты на баннер большего или меньшего размера, то их надо будет подогнать под актуальный размер таким образом, чтобы они смотрелись гармонично.
Чтобы быстрее подогнать под размер логотип или кнопку, используйте выравнивание и изменение размера в свойствах. Также можно использовать клавиши со стрелками, выделив объект, чтобы изменять его положение по пикселям.
Выделите все ключевые кадры у заданного объекта, от первого до последнего, и измените его положение на холсте или в свойствах, чтобы ускорить работу - так вы измените его положение во всей временной шкале, а не только у одного кадра.
Давайте добавим созданные нами объявления в кабинеты площадок. В Google Ads объявления одобрены.
В Яндекс.Директе объявления одобрены.
Как Google Web Designer упрощает рабочие задачи
— Представьте, что ваш клиент хочет запустить акцию или флайт, вот прямо сейчас, потому что сейчас у него есть на это возможность или он хочет посоперничать с внезапно активизировавшимся конкурентом. Мы можем ускорить процесс создания такой рекламной кампании, быстро собрав баннер и опубликовав его.
— Вы самостоятельно сможете создавать такие баннеры, тем самым упростив решение задач клиента. Над задачей будете работать только вы и ваш клиент напрямую — это ускорит процессы согласования и запуска.
— Можно проводить А/В тесты, анализировать поведение и реакцию нашей аудитории, обновлять баннеры так часто, насколько это требуется, чтобы увеличить показатели эффективности рекламы.
— Теперь, благодаря GWD, совсем не обязательно владеть JavaScript, CSS и HTML для того, чтобы создать баннер HTML5.
— Интерфейс интуитивно понятен. Например, если вы уже знакомы с интерфейсами Adobe Photoshop и Illustrator, то разобраться в интерфейсе GWD вам будет еще проще.
— Приложение бесплатное и постоянно обновляется. Дополнительную информацию об использовании GWD и его функциях можно найти в справке. Она доступна и на русском языке.
Сегодня я расскажу как создать красивый экран, реагирующий на движение мышки пользователя.
Вот то, что получится у нас в результате: Заповедники России.
.jpg)
Очень эффектно выглядит на большом экране
1. Разметка
Для начала создадим html-разметку для нашего красивого баннера-навигации.
Как видите, разметка очень простая. Есть общий родитель с классом .container, в него будут вложены наши плашки — блоки .section.
В каждом из блоков есть место под заголовок и описание.
Нам остается скопировать и вставить блоки еще 4 раза и внести нужные нам данные.
2. Стили
Со структурой нашей страницы разобрались. Теперь пора перейти к самому интересному. Начнем писать стили!
Для начала пропишем общие стили для страницы и нашего родительского блока с классом .container
Как вы можете заметить, мы будем строить нашу страницу при помощи технологии flexbox. Обязательно убедитесь, что все нужные вам браузеры поддерживают ее. Проверить поддержку разных версий браузера можно по ссылке.
Если вы еще не знакомы с единицами измерения vh и vw, то я советую вам почитать о них подробнее. Если коротко, то 1vh = 1% высоты окна брузера, а 1 vw = 1% ширины окна браузера. В отличии от процентов, эти единицы измерения всегда рассчитываются от размеров окна браузера.
Исходя из этой логики наш баннер всегда будет во всю ширину и высоту браузера.
Двигаемся дальше и зададим стили для каждой из наших плашек.
В этой части кода хочу обратить ваше внимание на то, как мы записываем свойство flex-grow. Мы не пишем его отдельно, а задаем значение в рамках шортката flex. Это связано с тем, что дальше мы будем менять его по наведению курсора, а свойство flex-grow напрямую не поддается изменениям при помощи transition.
Также мы задаем выключку по центру для текста, по центру же выравниваем наши элементы на странице.
Теперь оформим наши текстовые блоки.
Размер текста тоже зададим в относительных единицах измерения. Таким образом наш текст будет изменяться пропорционально размеру экрана и всегда будет отлично выглядеть.
А теперь начнем творить магию и вносить интерактив в нашу пока неподвижную страницу.
Реагировать на наведение курсора мыши мы можем при помощи псевдокласса :hover.
Далее зададим подобные свойства нашим текстовым блокам и укажем, что размер текста тоже должен меняться по наведению мыши.
Теперь давайте спрячем нижней текст в секции и будем показывать его только по наведению.
Для этого в изначальные стили добавим свойство opacity со значением 0 и напишем инструкцию по поведению текста когда курсор находится над соответствующей секцией.
Теперь займемся украшением. Для начала зададим фон каждой из наших секций.
Чтобы не задавать дополнительные классы мы воспользуемся псевдоклассами :nth-child (n) и напишем правила с фоновыми картинками. В изначальные правила для плашек добавим повторяющимся свойства background-position, background-size и background-repeat.
Становится очевидно, что черный текст на фоне красочных фотографий почти не читается. Изменим цвет текста на белый и подключим другой шрифт.
Для подключения шрифта мы воспользуемся css-правилом @font-face. Я выбрала красивый и поддерживающий русский язык шрифт Roboto Condenced.
Вот мы почти и закончили! Финишная прямая.
Добавим эффект затемнения для всех плашек кроме той, над которой сейчас находится курсор. Для этого воспользуемся свойством filter со значением brightness.
Обратите внимание, что это свойство может не поддерживаться некоторыми браузерами.
Не забудем про transition для .section — чтобы затемнение происходило плавно.
Поздравляю! Вы только что создали свой первый интерактивный баннер. При этом мы использовали только HTML и CSS. Никакого JavaScript.
Вы можете так же использовать этот код для создания навигации, просто добавьте ссылку или кнопку для перехода на другую страницу.
Напишите в комментариях, какие еще элементы интерфейса вам было бы интересно изучить и я сделаю соответствующий мастер-класс.
Читайте также: