мастер баннер и ресайзы что это
Порядок разработки html5-баннера. От брифа до подготовки файлов к размещению
За все время существования мастерской мы разработали огромное количество баннеров, сталкивались с различными проблемами и набили немало шишек. И как результат разработали четкую методологию, позволяющую выстраивать работу максимально эффективно. А значит экономить свое время, ваш бюджет и наши общие нервы.
В общем у нас есть план и мы его придерживаемся.
Любая задача на разработку баннера в независимости от типа начинается с брифа. Он позволяет понять цели преследуемые баннером, учесть налагаемые вами или площадками ограничения. Бриф можно заполнить наш или прислать свой. Или просто описать задачу в письме, ну или на крайний случай приехать и нам все устно рассказать.
Чем тщательнее заполнен бриф, тем вероятнее, что предложенный вариант раскадровки будет принят с первого раза.
Раскадровка. Она же сторибоард
В случае, когда задача не до конца понятна или бриф оставляет много невыясненных моментов, мы готовим текстовое описание будущего баннера, сопровождая его референсами по стилистике.
Если к брифу вопросов нет, мы собираем раскадровку. В ней отображаются ключевые сцены будущего баннера с кратким описание планируемой анимации. Примерно вот так.
Далее дорабатываем раскадровку согласно вашим пожеланиям и согласовываем раскадровку. Момент согласования очень важен для дальнейшей работы, т.к. вносить правки в раскадровку намного проще чем править уже при наличии анимированного баннера.
Мастер-баннер
При необходимости вносим правки в анимацию и согласовываем мастер-баннер.
Ресайзы и адаптации
Движемся по медиаплану и готовим версии баннера различных форм факторов.
Вы получаете несколько zip-архивов. Что с ними делать вам уже известно. Корректируем ресайзы и согласовываем.
Подготовка к размещению
На финальном этапе готовим все файлы к размещению. Учитываем технические требования, оптимизируем изображения. В конце названия файлов указываем под какие требования или для какой площадки или баннерокрутилки подготовлен тот или иной баннер.
На этом собственно и все.
&image=https://bannermaker.by/wp-content/uploads/2021/01/img1.jpg&noparse=true» rel=»noopener nofollow» target=»_blank»>
Ещё статьи
Где и как можно использовать html-анимацию
Как анимация баннеров влияет на CTR
Форматы интернет-баннеров
Bannermaker Workshop — специальный проект DAB Creative agency по разработке интернет-баннеров любой сложности
Ресайз баннеров
Ресайзы баннеров в BannerMakers.
Ресайзы баннеров являются востребованной дизайнерской услугой, которую можно заказать в компании BannerMakers. Особенностью этой операции является изменение размеров (ширины и длины) рекламных баннеров. С помощью ресайза можно увеличить или уменьшить площадь баннера – популярного типа рекламы, к которому Москва предъявляет серьезные требования.
Очень важно, чтобы при осуществлении ресайза опытному дизайнеру удалось сохранить его содержимое, чтобы все текстовые элементы легко читались, графические изображения были четкими. Справиться с этой задачей смогут высококвалифицированные специалисты компании в BannerMakers.
В ходе проведения ресайза, если требуется, можно изменить общую композицию кадров. Ряд составных компонентов могут изменить свое расположение, масштабное соотношение элементов. Это позволит полностью переработать баннер, чтобы он эффективно справлялся с решением всех поставленных задач.
Более простой задачей является преобразование рекламных баннеров квадратной формы одного размера в больший или меньший формат. Также их можно сделать прямоугольными.
Ресайз баннера – сложная и ответственная процедура.
Важно понимать, что ресайз баннера в Москве – это сложная операция, требующая от исполнителя максимального профессионализма, решения целого ряда задач. Чтобы изменить размер анимированного рекламного баннера, необходимо внести определенные изменения в каждый из элементов.
Кроме того, даже статические изображения в ряде случаев нуждаются в дополнительном кадрировании. Цены на ресайзы баннеров зависят от сложности проекта, времени, которое необходимо затратить на получение желаемого конечного результата. Также на сложность работы влияет число анимируемых элементов, их типа, методов анимации и необходимости преобразования одного формата в другой. Стоимость же всегда останется приемлемой для Вас.
В состав баннера может входить большое количество анимированных элементов, каждый из которых нуждается в обработке и изменении.
Почему важны ресайзы рекламных баннеров в социальных сетях?
Время чтения: 3 минуты Нет времени читать?
В этой статье я хочу рассказать, почему нужно учитывать резайры (изменение размера) изображений в соц. сетях.
Рекомендованные размеры рекламных баннеров социальных сетей важно учитывать, потому что картинки меньше рекомендованного размера «растягиваются» и становятся нечеткими, а картинки большего размера могут «сжиматься» и тоже выглядеть хуже, чем в оригинале, особенно это будет видно на тексте. Если пропорции картинки будут отличаться от рекомендованных, то возможно большая часть изображения будет обрезана и вы потеряете часть нужной информации.
Перед тем, как вы начинаете продумывать рекламную кампанию, вам нужно знать размеры всех креативов, которые будут использоваться в соц. Сетях.
При написании технического задания дизайнеру, нужно обязательно указать все размеры баннеров, которые могут потребоваться.
Также можно, конечно, использовать Photoshop или онлайн сервисы, которые сделают картинку правильного размера.
Размеры изображений Вконтакте
Ниже описаны основные форматы рекламы ВКонтакте, работающие с использованием рекламных баннеров.
1. Изображение и текст (формат 145х85 рх, заголовок в 33 символа и описание в 70).
2. Большое изображение (формат 145х165 рх, текст 33 символа).
3. Продвижение сообществ (формат 145х145 рх, название сообщества).
4. Специальный формат продвижения сообществ (256х256 рх, название сообщества)
Если вы не будите при учитывать эти размеры, то баннер который у вас будет подготовлен может быть обрезан очень сильно.
Первые три формата, показываются пользователям не в ленте, а с левой стороны пользовательского интерфейса ВКонтакте.
Маленький размер этих форматов несколько ограничивает возможности текстового и графического оформления.
При создании рекламной записи с кнопкой либо при размещении в посте ссылки или лидогенерации и загрузке сниппета
1. Изображение нужно загружать 537х240 рх.
На таких изображениях необходимо размещать краткую информацию о рекламируемом продукте и призывы к действию.
У Facebook основные форматы изображения два:
Форматы отображается во всех местах размещения рекламы Facebook. На первый взгляд всё просто, но это не так: чтобы баннер в Facebook показывался и охватывал максимум аудитории, недостаточно просто сделать картинку подходящего формата. Максимальный охват рекламы обеспечат только те изображения, которые содержат не более 20% текста.
При создании баннеров для Instagram с текстом и общим оформлением такая же ситуация, как и в Facebook, нужно обязательно учитывать сколько текста находится на картинке, также изображение, может содержать не более 20%.
Для объявлений в ленте и кольцевой галерее оптимальный размер изображений – 1080х1080 рх, минимально допустимые формат картинок: квадратная – 600х600 рх. Меньший размер изображения не загрузится. Как обычно изображение можно обрезать, но вы можете потерять часть важной информации.
Квадратная форма наиболее приемлема для этой социальной сети. На баннере рекомендуется размещать кнопки с призывом к действию, например, «Узнать больше», «Зарегистрироваться», «Попробовать сейчас». Этот элемент увеличивает кликабельность объявления в Instagram.
Что такое баннеры и баннерная реклама в интернете
Веб-баннер — это статическое или динамическое изображение, отображаемое на веб-странице. Обычно состоит из изображения, названия компании или логотипа, текста и призыва к действию (Call-to-action, далее CTA), побуждающего пользователей кликать по баннеру. Главная цель баннерной рекламы — продвижение бренда и/или побуждение посетителей перейти с рекламной площадки на сайт рекламодателя.
Виды баннеров: HTML5, GIF-баннеры, MPEG4 (видео) и статичные
Баннеры можно классифицировать по-разному. Если брать сугубо техническую составляющую, то баннеры разделяются на четыре основных вида:
Что такое HTML5 баннер?
Баннеры, выполненные на основе HTML5, представляют собой совокупность HTML-кода, анимации и уникального оформления. Такие баннеры с каждым днем становятся более популярными ввиду адаптивности (которая позволяет корректно отображать баннер на любых устройствах), небольшого размера и возможность отслеживания статистических данных.
Gif-баннер и его отличия от HTML5
Gif — это тоже формат анимированных изображений. Именно gif-баннеры использовались на заре становления интернета. Позже их сменили аналоги на Flash, а на данный момент пальму первенства получил HTML5. Главными отличиями Gif-баннера от аналога на HTML5 является его больший вес, замедляющий загрузку страницы, отсутствие адаптивности, а также общая примитивность (отсутствие эффектов, меньшая плавность анимации и т.д.).
Статичный баннер, где используют?
Статичный баннер — это простое изображение (в формате PNG, JPEG, GIF), лишенное анимации и каких-либо эффектов. Они играют информативную и рекламную роль, а зачастую их используют владельцы для своих собственных сайтов, либо прямые рекламодатели. Обычно их размещают в слайдерах, футере или в верхней части сайта (шапка) Данный тип баннеров — актуален и по сей день, ведь его эффективность, измеряемая в CTR, демонстрирует хорошие показатели.
Флеш баннеры и куда они делись
Flash-баннеры до «убийства» одноименной технологии были крайне распространены. Такие баннеры отличались отличным оформлением: могли похвастаться плавной анимацией, высоким качеством изображения, а также высокой интерактивностью (т.е. пользователь по задумке разработчика мог взаимодействовать с элементами баннера).
Сегодня технология Flash официально не поддерживается разработчиком, соответственно, баннеры также канули в лету. Причин этому несколько:
А пришедший на замену HTML5 — полностью лишил флеш-баннеры какой-либо актуальности.
Где используются баннеры
Сегодня в интернете принято выделять два типа рекламы: контекстную и медийную. Несмотря на схожесть и наличия много общего, контекстная реклама ориентирована исключительно на целевую аудиторию. Медийная реклама, как и телевизионная реклама, заточена на широкую аудиторию и призвана сформировать имидж бренда или познакомить с новым продуктом.
Баннеры — инструмент, который объединяет и медийную и контекстную рекламу, поскольку используется и там, и там. Как правило, HTML баннеры используют крупные компании и развивающиеся проекты, работающие над продвижением собственного бренда.
Рекламные сети в Рунете
Русскоязычный сегмент интернета — один из наиболее масштабных: ежедневно создаются сотни сайтов, публикуются десятки тысяч статей и другого контента, а аудитория насчитывает сотни миллионов пользователей. Неудивительно, что в этом сегменте представлено множество рекламных площадок, привлекающих как рекламодателей, так и владельцев веб-сайтов. Наиболее популярными из них являются:
Технические требования к баннерам
Каждая рекламная сеть имеет свой перечень требований, предъявляемых к баннерной рекламе. Обычно они включают в себя:
Кроме этого, в зависимости от рекламной площадки, могут выдвигаться требования к дизайну баннеров:
Для HTML5 баннеров существуют отдельные требования площадок:
Конвертация баннеров
Конвертация баннера представляет собой изменение его формата. Чаще всего конвертация происходит:
Что такое ресайзы?
Ресайз баннера (resize — изменение размера) представляет собой изменение оригинального баннера (или мастер-баннера), созданного на основе требований заказчика, для его «подгона» к требованиям, выдвигаемым конкретной рекламной площадкой.
Ресайз может включать в себя изменение размеров, пропорций, цветов и других элементов оригинального баннера.
Мастер-баннер — это оригинальный макет дизайна баннера, с продуманным сценарием, анимацией, графикой, на основе которого делаются ресайзы (альтернативные размеры).
Адаптация баннеров под другие языки (мультиязычные баннеры)
Медийная рекламу можно разделить на 3 сегмента:
Адаптация баннеров под другие языки используется в случае международной медийной компании. Где один креатив представлен на разных языках. Яркий пример автоконцерны и зарубежные блокбастеры.
Какие размеры (ресайзы) баннеров существуют?
Согласно требованиям, которые выдвигает Рекламная сеть Яндекс к баннерам (ознакомиться с ними можно здесь), наиболее популярны (вне зависимости от платформы) баннеры следующих размеров:
Самые популярные размеры согласно руководству от Google (ознакомиться с ними можно здесь)
Менее популярные и менее эффективные размеры баннеров
Также существуют адаптивные HTML5 баннеры с «резиновой версткой» (их еще называют «тянущиеся», «резиновые», «перетяжки», «100% баннеры») — это баннеры, которые не имеют заданной ширины и адаптируются под размер экрана. Такой размер считается гораздо более эффективным, так как занимает всю ширину экрана и привлекает к себе больше внимания, однако не все площадки принимают к размещению «резиновые баннеры»
Размеры баннеров для социальных сетей
Фейсбук и Инстаграм
В технических требованиях Facebook отсутствуют жесткие требования к весу баннеров, при загрузке изображения происходит автоматическое сжатие. Важное требование: текста должно быть не более 20% от площади креатива (сервис проверки). Также на баннерах должны отсутствовать кнопки.
Размеры баннеров для ВКонтакте (VKontakte)
Размеры баннеров для MyTarget
Баннерная слепота
Баннерная слепота (баннерный шум) — определение, возникшее в далеком 1998 году. Этот феномен подразумевает сознательное или неосознанное игнорирование рекламных баннеров пользователями веб-ресурсов. Подобное поведение, по мнению психологов, обусловлено предвзятым отношением к любым сторонним элементам на сайте при поиске нужной информации.
Игнорирование пользователями рекламных баннеров — существенно снижает эффективность рекламной кампании. Тем не менее, бороться с этим явлением можно вполне плодотворно. Для этого следует использовать множество проверенных методов, например:
Кто создает баннеры, какие навыки нужны, где учат
Создание эффективного рекламного баннера — сложный процесс, который требует опыта и владения множеством навыков, включая владением специальными программами для создания изображений и анимации, а также языков программирования:
На рынке есть много специалистов, которые могут и вправе профессионально создавать баннеры для любых нужд. Среди таковых могут быть опытные дизайнеры, освоившие HTML5 и CSS. Кроме того, выделяют т.н. баннермейкеров — людей, профессионально занимающихся созданием и оформлением баннеров.
Алгоритм создания баннеров
Что должно быть указано в ТЗ на разработку веб-баннера
Сколько стоят баннеры
Цена на производство баннера зависит от типа исполнителя и его опыта. Обычно, изготовлением баннеров занимаются: медийное агентство, продакшн-студия или фрилансеры.
Объективная цена на услуги по созданию баннеров формируется от сложности работы и навыков дизайнера. Чем сложнее анимация, чем больше кадров, тем дороже будет стоить продукт на выходе. Также цена зависит от наличия исходного материала, придется ли дизайнеру что-то отрисовать с нуля, иллюстрации, айдентика и тд.
Диапазон цен на создание простых баннеров HTML5 на рынке в России, согласно нашему анализу, колеблется от 1500 до 17000 за штуку и до 100000 рублей, если речь идет об интерактивных баннерах, с игрой или другими вариантами взаимодействия с пользователем.
Диапазон цен на создание Gif-баннеров от 500 до 15000 руб/шт
Статичные баннеры (PNG, JPG) в среднем стоят от 500 до 5000 рублей за штуку
Все зависит от сложности работы и навыков дизайнера. Чем сложнее анимация, количество кадров, тем выше конечная стоимость. Резиновые (100% баннеры) стоят всегда дороже, так как привлекается специалист фронтендер.
Программы для создания баннеров
Для создания HTML5 баннеров могут использоваться несколько программ: первые нужны для оформления и создания дизайна (визуальной части), а другие — для кода. Существует множество ПО, включая Adobe Animate, предлагающие внушительный инструментарий для создания анимированных и интерактивных баннеров.
Google, в свою очередь, предлагает собственный одноименный инструмент — Web Designer, позволяющий каждому создать HTML5 баннеры, содержащие игровые, интерактивные и анимированные элементы. По своей сути, этот инструмент автоматизирует использование HTML5, CSS3 и JavaScript, не требуя от пользователей знания этих языков.
Баннеры в формате Gif создаются в любом мало-мальски продвинутом редакторе изображений, включая Animate CC, Photoshop или After Effect. То же самое касается и статичных баннеров, которые можно создавать в фотошопе, Sketch или Figma, и даже в стандартном Paint.
Онлайн-сервисы для создания баннеров
Если раньше для создания качественных и технологичных баннеров требовалось прибегать к дорогостоящим услугам специалистов, то сегодня можно рассчитывать на собственные силы. Более того, нет нужды приобретать и устанавливать программное обеспечение на свой компьютер, поскольку сегодня доступно множество онлайн-сервисов для создания баннеров. Среди них можно выделить:
Эффективность баннера — в чем измеряется?
Эффективность баннера — параметр, который можно объективно вычислить путем сравнения таких показателей, как:
Кликабельность баннера (CTR): что такое и как увеличить
Кликабельность баннера — это количество кликов, приходящихся на 1000 посетителей. Чтобы увеличить этот параметр, следует грамотно отнестись к созданию баннера и применению интерактивных элементов. Кроме этого, следует органично подбирать:
Немаловажное значение имеет размер и расположение самого баннера на странице, а также текст. Сегодня стандартные рекламные предложения не способны «зацепить» рядового посетителя. Необходимо задействовать всю силу текстового и визуального контента в одном баннере, а также предлагать по-настоящему выгодные и цепляющие предложения. Кроме этого, поднять CTR помогут:
Какой должен быть CTR у медийной рекламы?
Так как основная задача рекламных баннеров это повышение узнаваемости бренда, то CTR будет значительно ниже контекстной рекламы, которая обычно содержит прямой ответ на запрос пользователя. Например, в РСЯ или КМС Google успешным показателем рекламной кампании можно назвать CTR от 0,01 до 0,1%, но эти цифры слишком абстрактные и не являются целевыми значениями, показатель вашей кампании может быть значительно выше или ниже.
CTR медийки в социальных сетях, например в Facebook Ads или таргет ВКонтакте также может варьироваться от 0,1 до 0,9%.
Почему важны ресайзы рекламных баннеров в социальных сетях?
В этой статье я хочу рассказать, почему нужно учитывать резайры (изменение размера) изображений в соц. сетях.
Рекомендованные размеры рекламных баннеров социальных сетей важно учитывать, потому что картинки меньше рекомендованного размера «растягиваются» и становятся нечеткими, а картинки большего размера могут «сжиматься» и тоже выглядеть хуже, чем в оригинале, особенно это будет видно на тексте. Если пропорции картинки будут отличаться от рекомендованных, то возможно большая часть изображения будет обрезана, и вы потеряете часть нужной информации.
Статуя Родина Мать для ВК.jpg
Перед тем как вы начинаете продумывать рекламную кампанию, вам нужно знать размеры всех креативов, которые будут использоваться в соц. Сетях.
При написании технического задания дизайнеру, нужно обязательно указать все размеры баннеров, которые могут потребоваться.Также можно конечно использовать Photoshop или онлайн сервисы, которые сделают картинку правильного размера.
Размеры изображений Вконтакте
Ниже описаны основные форматы рекламы ВКонтакте, работающие с использованием рекламных баннеров.
1. Изображение и текст (формат 145х85 рх, заголовок в 33 символа и описание в 70).
2. Большое изображение (формат 145х165 рх, текст 33 символа).
3. Продвижение сообществ (формат 145х145 рх, название сообщества).
4. Специальный формат продвижения сообществ (256х256 рх, название сообщества)
Если вы не будите при учитывать эти размеры, то баннер который у вас будет подготовлен, может быть обрезан очень сильно.
Редактирование изображения в ВК.jpg
Первые три формата, показываются пользователям не в ленте, а с левой стороны пользовательского интерфейса ВКонтакте.
Маленький размер этих форматов несколько ограничивает возможности текстового и графического оформления.
При создании рекламной записи с кнопкой либо при размещении в посте ссылки или лидогенерации и загрузке сниппета
1. Изображение нужно загружать 537х240 рх.
На таких изображениях необходимо размещать краткую информацию о рекламируемом продукте и призывы к действию.
У Facebook основные форматы изображения два:
Форматы отображается во всех местах размещения рекламы Facebook. На первый взгляд, всё просто, но это не так: чтобы баннер в Facebook показывался и охватывал максимум аудитории, недостаточно просто сделать картинку подходящего формата. Максимальный охват рекламы обеспечат только те изображения, которые содержат не более 20% текста.
При создании баннеров для Instagram с текстом и общим оформлением такая же ситуация, как и в Facebook, нужно обязательно учитывать сколько текста находится на картинке, также изображение, может содержать не более 20%.
Для объявлений в ленте и кольцевой галерее оптимальный размер изображений – 1080х1080 рх, минимально допустимые формат картинок: квадратная – 600х600 рх. Меньший размер изображения не загрузиться. Как обычно изображение можно обрезать, но вы можете потерять часть важной информации.
Обрезать изображение для Insta.jpg
Квадратная форма наиболее приемлема для этой социальной сети. На баннере рекомендуется размещать кнопки с призывом к действию, например, «Узнать больше», «Зарегистрироваться», «Попробовать сейчас». Этот элемент увеличивает кликабельность объявления в Instagram.