Ресайзы баннеров что это
Переупаковка контента: экономим и получаем профит
Контент-маркетинг – отличный инструмент привлечения новой аудитории, доказательства экспертности, удержания действующих клиентов, формирования лояльности, донесения важной информации до целевой аудитории и др. Но есть и минусы: все это долго, дорого и трудозатратно. И чем больше каналов дистрибуции контента, тем больше его надо создавать.
Однако есть способ сэкономить деньги, время и силы на контенте, при этом не потерять в трафике, вовлеченности, охватах и т. п. Такой инструмент называют ресайзом, ресайклом или переупаковкой.
Что такое ресайз и зачем он нужен
Resize переводится как изменение размера. Получается, ресайз – это тот же контент, но в другом размере и формате. Переупаковать – значит из одной единицы контента сделать несколько.
Когда мы слышим о том, что для SEO-продвижения важно 100% уникальности, или читаем новости про борьбу алгоритмов соцсетей с ворованным контентом, создается впечатление, что нужно публиковать только новые материалы. Что ранее опубликованное уже неуникальное и об этом стоит забыть. Но это ошибка.
На самом деле хороший – крутой, трафиковый, годный, вечнозеленый – контент можно и нужно использовать повторно. Зачем это делать:
А больше охвата и трафика – больше лидов, целевых действий на сайте.
Примеры повторного использования контента
Самый распространенный способ сделать ресайз – переупаковать контент из длинного в короткий. В редакции New York Times такие форматы называют «second hour stories» и отмечают, что часто они становятся популярнее больших. К примеру, можно:
Благодаря выжимке не обязательно переходить на сайт, чтобы узнать важную информацию. Пример – пост «Т—Ж»
Пример выжимки статьи в телеграм-канале Kinetica
«Паша и его прокрастинация» берет из статьи TexTerra сервисы по своей тематике и рассказывает о них в посте (кстати, это и ресайз, и курирование контента)
Такие вот нетопорные подборки статей бывают в журнале «Код»
Но это не единственный способ отресайзить контент. Можно просто менять формат, не меняя количества информации на входе и выходе. Другой вариант – создавать более масштабные сущности, объединяя или расширяя короткие материалы. Например, вы можете:
Что ж, можно даже выпускать подкаст, монтируя голосовые сообщения от нескольких людей, как это делают авторы «Проветримся!» (Tel)
Пример ресайза собственного контента в блоге TexTerra
А это статья в блоге Cybermarketing, написанная по расшифровке доклада с конференции
Вспомогательные инструменты для переупаковки
Чтобы относительно быстро и легко генерировать старый-новый контент, вам понадобятся некоторые дополнительные инструменты. Что вам может пригодиться:
Хотите лучше разбираться в контент-маркетинге, SMM, веб-аналитике и других направлениях? Добро пожаловать в образовательный центр Cybermarketing. Есть материалы как для специалистов, так и для предпринимателей. Самые разные форматы: вебинары, видеокурсы, очные интенсивы, конференции.
Что такое кроп и рисайз
Итак, у нас есть изображение, полученное с помощью цифровой фотокамеры. В настоящее время оно состоит из одного-двух десятков мегапикселей и его линейные размеры, предположим, 4000 на 3000 пикселей. В то же время, подавляющее большинство современных мониторов и телевизоров имеют не более 2000 пикселей по горизонтали. Это значит, что при просмотре этого снимка на мониторе/телевизоре каждая вторая точка изображения будет выброшена, причём способ удаления лишних пикселей зависит от программы, отвечающей за вывод. К сожалению, эти способы не всегда являются оптимальными с точки зрения быстроты и качества (например, выводимое изображение получается несколько размытым). Следовательно, нужно взять операцию рисайза в свои руки. Вторым немаловажным фактором, побуждающим к рисайзу, является пропорциональное уменьшение объёма занимаемых данных, что в свою очередь уменьшает время загрузки изображения. Ведь смотрящим ваши фотографии вовсе не хочется ждать несколько секунд или даже минут чтобы снимок загрузился целиком. К тому же интернет-трафик не всегда бесплатный (особенно у операторов мобильной и спутниковой связи), поэтому почему бы не сэкономить время и деньги ваших зрителей?
Вот тестовая фотография. Её размер 4360×3246 пикселей и она занимает 5,9 Мб (по клику на картинке загрузится оригинал):
Фото 1. Оригинальный снимок, размером 4360×3246 пикселей
Фото 2. Снимок, уменьшенный до размера 1600×1200 пикселей
Часто фотографии требуется ещё и кадрирование. Кадрированием или кропом (от английского слова crop) называется операция по вырезанию части кадра. Скажем, в нашем случае синичка занимает не слишком много места, хотя является основным объектом съёмки. Поэтому лишний фон можно безболезненно отрезать, это можно сделать в любом графическом редакторе с помощью функции Crop (Кадрирование или Обрезка).
Фото 3. Красная рамка показывает область кадрирования
При этом получится изображение размером 2967×2225 пикселей и объёмом 864 Кб :
Фото 4. Откадрированный снимок размером 2967 ×2225 пикселей
Однако, и оно является достаточно весомым (к тому же не забываем про паранойю), поэтому не мешает сделать нашей картинке рисайз до 1600×1200 пикселей и объёма 344 Кб.
Порядок разработки 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 по разработке интернет-баннеров любой сложности
10 примеров ресайзов баннеров
Иногда требуется создать баннера разных размеров, но при этом использовать те же рисунки и то же количество текста. Разместить небольшое предложение на большом баннере легко, а вот с маленьким получится сложно, ведь нужно разместить текст таким образом, чтобы смысл предложения не терялся, при этом количество кадров увеличится.
Сделать ресайз баннеров не трудно, главное акцентировать внимание на главных деталях баннера. По возможности использовать те же графические элементы, что и в предыдущих баннерах. Текст, который является дополнительным и не играет особой роли можно исключить. Также стоит учесть, что большие изображения на маленьких баннерах просто потеряются, если их уменьшить они потеряют качество, и вместо красивой картинки получим смазанный рисунок. С большими баннерами дела обстоят иначе, чтобы не оставлять пусты места добавляют изображения, подходящие по тематике баннера. Можно также использовать дополнительный текст.
Размер баннера зависит от того где он будет расположен. Существуют стандартные размеры баннеров, которые используют чаще всего: 728х90, 240х400, 300х100, 120х600, 250х250, 120х240, 326х280, 234х60, 300х250. Как правило, такие размеры являются наиболее распространенными. Эти размеры могут немного варьироваться, но если размер меняется не существенно дизайн баннера можно оставить в первоначальном виде, разве что немного подкорректировать. Если баннер нужно уменьшит в ширину, но при этом увеличить высоту (из 240х400 в 120х600) рисунки можно сохранить, то есть дизайн будет схожим только текст немного можно сузить и расположить соответственно размеру нового баннера.
В примере справа можно заметить в каких баннерах использовались изображения чтобы скрыть пустые места, в тоже время тематически украсить баннер, а в каких нужно оставить только необходимый текст.
В данном примере используется довольно простой ресайз баннеров, здесь не включены сложные графические рисунки, мало текста, и довольно простой логотип. Для создания этой серии баннеров применялись советы с предыдущего урока. Вы можете использовать свои изображения, дополнительные графические рисунки, если для создания баннера требуются такие простые цветные изображения, как в примере ( зеленый фон), скачайте его с группы посвященной конструктору Баннерович, для этого просто перейдите по данной ссылке.
На слайдах внизу вы можете детально рассмотреть анимированные баннеры разных размеров. Также можно брать пример для своего баннера. На каждом слайде написано размер баннера.
240х400
120х600
120х240
150х180
234х60
250х250
300х100
300х250
326х280
728х60
На каждом слайде написано размер баннера. В создании своих баннеров можно использовать примеры, которые показаны в этом уроке. Также ищите другие уроки на сайте Баннерович, которые помогут вам сделать привлекательный баннер. Используйте ссылки, которые есть в этом уроке, чтобы найти новые фоновые изображения для создания баннера.
Делаем «ресайз» баннеров
Часто приходится делать баннеры одной тематики, но разных размеров, в конструкторе создать «ресайз» баннеров не сложно. В этом уроке мы создадим один баннер, который станет примером, чтобы создать другие баннеры с разными размерами.
Появилось окно, в котором можно увидить все фоновые стандартные рисунки конструктора. Для этого примера был выбран фон под названием «Синие клеточки», на слайде выделено красной стрелкой, нажимаем на этот фон. (3)
Выбранный фон появился в рабочей области нашего баннера, красным кружком на слайде выделена стрелка, с помощью нее фоновую картинку можно перемещать. (4)
Стоит отметить, что все картинки, логотипы. рисунки и прочее загружаются в конструктор не изменяя своего размера. То есть если ваша картинка превышает размер баннера нужно его уменьшить. Для этого наведите мышкой на край картинки, появится стрелка, после чего начните уменьшать картинку.
Появилось окно, которыое предназначено для редактирования текста, в нем можно выбрать цвет, шрифт, размер текста. (7) На слайде красными стрелками указаны те параметры, которые были выбраны для этого примера.
Первый текст у нас сообщает об Акции, установим его под наклоном и установим другой шрифт Comic Sans MS. Выбираем другой цвет и первое слово «Акция» сделаем жирным шрифтом. Дальше пишем новый текст, шрифт основной, размер выбираем по размеру самого баннера.
Как правило, стиль всех надписей используется одинаковый, но в этом случае мы использовали другой стиль для первой надписи чтобы ее выделить. Для последующих текстов были выбраны стандартные настройки текста.
Красым кружком выделено то место куда пишется время. Устанавливаем время нашей анимации, первый текст появится на 3секунды. Теперь нажимаем на саму кнопку «Добавить кадр в анимацию».
После нажатия на кнопку появится окно, сдесь будут видны все созданные кадры этого баннера. Сейчас мы создали только один, как это видно на слайде. (10) Закройте окно, Кнопка «Закрыть» находится внизу этого окна.
Появится окно, такое как на слайде. (11) Это стандартные изображения конструктора Баннерович. Красной стрелкой указано какое изображение было выбрано для этого баннера. Нажимаем на него.
Если картинка по размеру не подходит для баннера уменьшаем ее с помощью мышки, после чего размещаем ее на баннере по центру.
Чтобы украсить баннер, и акцентировать внимание на нужных деталях, добавим еще несколько изображений. (13) Для этого нажимаем кнопку «Разное» и ищем там стрелочку. Стрелка будет чуть больше чем нам нужно, поэтому уменьшаем ее и переворачиваем. На слайде красной стрелкой указано на нужное изображение.
Как видно на слайде (14) стрелка превышает нужный размер. Чтобы ее уменьшить наведите курсором мышки на угол, на слайде красным кружком выделена стрелочка, чтобы уменьшить картинку и сохранить ее пропорции зажмите на клавиатуре Shift и начинайте ее уменьшать.
ВАЖНО ЗНАТЬ. Во время работы старайтесь не задеть другие элементы на баннере, если их переместить сейчас, они будут в неправильном положении при создании второго кадра, что может испортить всю работу.
После того как стрелка стала того размера которого нужно нам, мы ее переворачиваем и устанавливаем так чтобы она совпала с рисунком. Промежуток, который оставлен, потребуется для кнопки. (15)
Второй кадр готов, пусть не смущает этот промежуток, он нужен чтобы акцентировать внимание на появлении кнопки. (16) Как и в предыдущем кадре, наводим ( не нажимаем ) курсором на кнопку «Добавить кадр в анимацию» Устанавливаем время анимации второго кадра, для начала это будет 0,7 секунды.
Нажимаем на кнопку «Добавить кадр в анимацию» и закрываем окно с нащими кадрами.
На слайде внизу красными кружками отмечены настройки для этого баннера. Выбирая свои настройке следите чтобы цветовая гамма не отличалась от выбранного рисунка и фона. Кнопку установите под стрелкой. (17)
Когда основной баннер готов сделать его ресайз довольно просто главное придерживаться общей тематики. Если незначительные элементы не будут хорошо смотреться с другим размером, используйте другие элементы подходящие к теме баннера.
На баннере с другим размером можно поменять место кнопки, сделать ее большой или же добавить другой элемент.
Главное сохранить ключевые фразы, по возможности сделать его похожим на оригинал.
Внизу в «Таб 2» вы найдете баннер с рамкой, такой вариант хорошо подходит для ресайза баннера. Рамка расчерчивает границы баннера. В этом варианте фон был уменьшен для того чтобы создать пустое место, создается впечатления дополнительной рамки.
Листая Табы внизу вы найдете несколько примеров как можно распоряжаться местом на баннере.