Ниже мы будем говорить только об интернет-баннерах.
Разработка баннера включает в себя 4 этапа:
Это самая сложная часть. Думаю, что около 5% специалистов могут придумывать качественные идеи. Хорошо, если этим занимаемся копирайтер, понимающий все возможности и тонкости производства.
Многим сложно перестроиться от статичных идей для полиграфии к идеям в интерактивной среде. Стоит заметить, что для полиграфии тоже можно разработать и реализовать идею, подразумевающую взаимодействие с пользователем, интерактивную идею.
Раскадровка представляет собой картинку, содержащую ключевые кадры анимации.
Она необходима для презентации идеи. Клиенты должны четко понимать, за что платят деньги. Разработка баннера без рисования и утверждения раскадровки — это стрельба по мишени с закрытыми глазами. Такой подход возможен при заказе баннеров на килограммы, когда внешний вид баннера не имеет значения.
При разработке раскадровки вертикального баннера (например, 240х400), кадры нужно выстраивать в строку. Если их больше 4-х, то допускается перенос кадров во второй и последующие строки. Нельзя показывать раскадровку из 6-ти кадров в 2 столбца и 3 строки, т. к. сложно будет понять последовательность кадров.
Раскадровки горизонтальных баннеров (например, 728х90) нужно делать в столбик при любом количестве кадров.
В случае с нестандартными баннерами (флайскрины, скринглайды и пр.) раскадровку нужно показывать на фоне сайта, где он будет размещен. Каждый ключевой кадр будет содержать подложку-скриншот сайта.
Дизайнер, рисующий раскадровку баннера должен обладать знаниями о композиции, работе с цветом, типографике. Последнее является больным местом 99% баннерной рекламы в России. Дизайнер, приступая к разработке раскадровки, изначально должен учитывать ограничения по весу баннера — размеру в КБ. Можно нарисовать красивую раскадровку с большим объемом качественной графики. Но она не пройдет по весу, графика ужмется до безобразия, и в результате мы получим тихий ужас вместо хорошего баннера. В этом случае дизайнер не может утверждать, что он нарисовал хорошую раскадровку, а во всем виновата площадка с ее жесткими требованиями. Работа дизайнера по разработке раскадровки — это решение задачи воплощения идеи в заранее известных рамках по весу баннера, с учетом требований к оформлению.
Имея на руках медиаплан с техническими требованиями площадок, необходимо заранее выбирать способ реализации раскадровки. Если сценарий баннера достаточно длинный, а ограничение по весу равно 25 КБ, возможно, есть смысл использовать только векторную графику, отказавшись от растра.
Если медиаплан содержит много разных размеров баннеров, то можно нарисовать одну раскадровку для вертикальных форматов, одну для горизонтальных.
Эту работу должен выполнять моушн-дизайнер со знанием экшн скрипта. Если требуется глубокое программирование, то в разработке, наряду с флеш-дизайнером, должен участвовать флеш-программист. Ни в коем случае нельзя считать анимацию баннера технической работой и доверять ее флеш-технологам (программистам). Анимация баннера — это творческая работа.
Пример. Представим, что по сценарию баннера точка должна по прямой траектории переместиться из пункта «А» в пункт «Б». Толковый моушн-дизайнер, в отличие от технического специалиста (программиста, технолога) понимает, что сделать это можно бесконечным количеством способов. И выбор способа реализация движения точки зависит от контекста.
5 типов анимаций в качестве примера.
Теперь мы знаем, что прямолинейное движение точки из пункта «А» в пункт «Б» может быть выполнено множеством способов. Важно всегда выбирать именно тот способ анимации, который соответствует контексту, т. е. делать качественную анимацию. Что это значит?
Под качественной анимацией понимается анимация, приятная глазу в случае с объектами, не имеющими аналогов в реальном мире. Возможна стилизация анимации: стоп-моушн и другие эффекты в необходимом контексте.
Если мы анимируем реалистичную графику из реального мира (авто, чайник, дерево) и нам не нужна стилизация, то анимация должна повторять их движения так, как это происходит на самом деле, в реальном мире. Мы знаем, как трогаются автомобили, как они останавливаются, потому что видим это каждый день. Знаем, как колышется листва деревьев при небольшом ветре, как листья отрываются и летят при сильном ветре и т. д. Задача хорошего моушн-дизайнера — избавить пользователя от просмотра анимации. Пользователь должен видеть суть, не обращая внимание на технику реализации: едет автомобиль, падает рояль, взлетает самолет и т. д. В жизни практически невозможно встретить абсолютно равномерное движение, всегда присутствует ускорение или замедление какой-то степени. Об этом не стоит забывать при работе над анимацией.
Вышеописанное справедливо для реалистичной графики и не относится к мультипликации. Для последней более свойственна стилизация анимации, она добавляет ярких эмоций ролику.
В некоторых случаях удобно пользоваться специальными скриптами:
По скриптам есть вся документация на сайтах, описывать ее тут не имеет смысла. Не разберется только ленивый.
Первый баннер, который получается в результате вышеописанных этапов (идея, раскадровка, анимация и программирование) принято называть уникальным баннером. Последующие адаптации этого баннера согласно размерам и техническим требованиям площадок называют ресайзами.
Уникальный баннер — это самый красивый баннер с наименее жесткими ограничениями по весу. Если медиаплан содержит следующие пункты:
200x300, yandex.ru, 25 КБ
240x400, mail.ru, 35 КБ
240x400, sports.ru, 40 КБ
то уникальный баннер нужно делать для sports.ru, до 40 КБ. Немного адаптировать для mail.ru и упрощать для yandex.ru. При таком подходе на больших рекламных кампаниях мы получаем все баннеры максимального качества.
Недобросовестные разработчики применяют другую систему: делают простейший баннер по самым жестким ограничениям веса (в нашем случае это yandex.ru, до 25 КБ), избавляя себя тем самым от сложной работы по оптимизации последующих ресайзов и клиента от качественных баннеров. В то время, как баннер до 40 КБ мог выглядеть эффектно, у них он получится таким же «упрощенным», как и версия до 25 КБ. Такой подход, конечно, неприемлем.
P. S. Если статья вызовет интерес, то в следующей мы будем говорить о золотом правиле баннерной рекламы и некоторых очевидных вещах, которыми, к сожалению, пренебрегают многие разработчики и площадки.
Разработка баннера включает в себя 4 этапа:
- Идея
- Раскадровка
- Анимация и программирование
- Подготовка баннера к размещению на рекламной площадке
Идея
Это самая сложная часть. Думаю, что около 5% специалистов могут придумывать качественные идеи. Хорошо, если этим занимаемся копирайтер, понимающий все возможности и тонкости производства.
Многим сложно перестроиться от статичных идей для полиграфии к идеям в интерактивной среде. Стоит заметить, что для полиграфии тоже можно разработать и реализовать идею, подразумевающую взаимодействие с пользователем, интерактивную идею.
Какая рекламная идея считается хорошей?
- Продающая. Не может быть никаких компромиссов. Не важно, стоит ли задача продать товар или услугу за неделю или бренд выстраивает стратерию на 50 лет вперед. Конечная цель всегда — продажи.
- Имиджевая. Такая идея в конечном счете помогает продавать, но в долгосрочной перспективе. Известные автомобильные бренды, банки, компании с многолетней историей постоянно занимаются повышением лояльности потребителей к их бренду.
- Эмоциональная. В баннере может не быть глубокого смысла, но может быть показан бренд в очень подходящей сильной эмоциональной атмосфере. Это хорошо способствует узнаваемости бренда, развитию связи нужной эмоции с брендом.
- Информационная. В некоторых случаях достаточно ясно донести информацию без избытка «креатива».
Если этот блок со страшными ссылками вызовет неконтролируемые приступы у уважаемых хабрапользователей, то я его удалю.
- Продающая эмоциональная информационная идея,
- Продающая имиджевая,
- Имиджевые эмоциональные (эмоция за счет нестандартности) баннеры,
- Эмоция в чистом виде,
- Имиджевый эмоциональный баннер
Раскадровка
Раскадровка представляет собой картинку, содержащую ключевые кадры анимации.
Она необходима для презентации идеи. Клиенты должны четко понимать, за что платят деньги. Разработка баннера без рисования и утверждения раскадровки — это стрельба по мишени с закрытыми глазами. Такой подход возможен при заказе баннеров на килограммы, когда внешний вид баннера не имеет значения.
При разработке раскадровки вертикального баннера (например, 240х400), кадры нужно выстраивать в строку. Если их больше 4-х, то допускается перенос кадров во второй и последующие строки. Нельзя показывать раскадровку из 6-ти кадров в 2 столбца и 3 строки, т. к. сложно будет понять последовательность кадров.
Раскадровки горизонтальных баннеров (например, 728х90) нужно делать в столбик при любом количестве кадров.
В случае с нестандартными баннерами (флайскрины, скринглайды и пр.) раскадровку нужно показывать на фоне сайта, где он будет размещен. Каждый ключевой кадр будет содержать подложку-скриншот сайта.
Дизайнер, рисующий раскадровку баннера должен обладать знаниями о композиции, работе с цветом, типографике. Последнее является больным местом 99% баннерной рекламы в России. Дизайнер, приступая к разработке раскадровки, изначально должен учитывать ограничения по весу баннера — размеру в КБ. Можно нарисовать красивую раскадровку с большим объемом качественной графики. Но она не пройдет по весу, графика ужмется до безобразия, и в результате мы получим тихий ужас вместо хорошего баннера. В этом случае дизайнер не может утверждать, что он нарисовал хорошую раскадровку, а во всем виновата площадка с ее жесткими требованиями. Работа дизайнера по разработке раскадровки — это решение задачи воплощения идеи в заранее известных рамках по весу баннера, с учетом требований к оформлению.
Имея на руках медиаплан с техническими требованиями площадок, необходимо заранее выбирать способ реализации раскадровки. Если сценарий баннера достаточно длинный, а ограничение по весу равно 25 КБ, возможно, есть смысл использовать только векторную графику, отказавшись от растра.
Если медиаплан содержит много разных размеров баннеров, то можно нарисовать одну раскадровку для вертикальных форматов, одну для горизонтальных.
Анимация и программирование
Эту работу должен выполнять моушн-дизайнер со знанием экшн скрипта. Если требуется глубокое программирование, то в разработке, наряду с флеш-дизайнером, должен участвовать флеш-программист. Ни в коем случае нельзя считать анимацию баннера технической работой и доверять ее флеш-технологам (программистам). Анимация баннера — это творческая работа.
Пример. Представим, что по сценарию баннера точка должна по прямой траектории переместиться из пункта «А» в пункт «Б». Толковый моушн-дизайнер, в отличие от технического специалиста (программиста, технолога) понимает, что сделать это можно бесконечным количеством способов. И выбор способа реализация движения точки зависит от контекста.
5 типов анимаций в качестве примера.
Качество анимации
Теперь мы знаем, что прямолинейное движение точки из пункта «А» в пункт «Б» может быть выполнено множеством способов. Важно всегда выбирать именно тот способ анимации, который соответствует контексту, т. е. делать качественную анимацию. Что это значит?
Под качественной анимацией понимается анимация, приятная глазу в случае с объектами, не имеющими аналогов в реальном мире. Возможна стилизация анимации: стоп-моушн и другие эффекты в необходимом контексте.
Если мы анимируем реалистичную графику из реального мира (авто, чайник, дерево) и нам не нужна стилизация, то анимация должна повторять их движения так, как это происходит на самом деле, в реальном мире. Мы знаем, как трогаются автомобили, как они останавливаются, потому что видим это каждый день. Знаем, как колышется листва деревьев при небольшом ветре, как листья отрываются и летят при сильном ветре и т. д. Задача хорошего моушн-дизайнера — избавить пользователя от просмотра анимации. Пользователь должен видеть суть, не обращая внимание на технику реализации: едет автомобиль, падает рояль, взлетает самолет и т. д. В жизни практически невозможно встретить абсолютно равномерное движение, всегда присутствует ускорение или замедление какой-то степени. Об этом не стоит забывать при работе над анимацией.
Вышеописанное справедливо для реалистичной графики и не относится к мультипликации. Для последней более свойственна стилизация анимации, она добавляет ярких эмоций ролику.
В некоторых случаях удобно пользоваться специальными скриптами:
- MC Tween: hosted.zeh.com.br/mctween/documentation.html
- GreenSock: www.greensock.com/v11
По скриптам есть вся документация на сайтах, описывать ее тут не имеет смысла. Не разберется только ленивый.
Подготовка баннера к размещению на рекламной площадке
Первый баннер, который получается в результате вышеописанных этапов (идея, раскадровка, анимация и программирование) принято называть уникальным баннером. Последующие адаптации этого баннера согласно размерам и техническим требованиям площадок называют ресайзами.
Уникальный баннер — это самый красивый баннер с наименее жесткими ограничениями по весу. Если медиаплан содержит следующие пункты:
200x300, yandex.ru, 25 КБ
240x400, mail.ru, 35 КБ
240x400, sports.ru, 40 КБ
то уникальный баннер нужно делать для sports.ru, до 40 КБ. Немного адаптировать для mail.ru и упрощать для yandex.ru. При таком подходе на больших рекламных кампаниях мы получаем все баннеры максимального качества.
Недобросовестные разработчики применяют другую систему: делают простейший баннер по самым жестким ограничениям веса (в нашем случае это yandex.ru, до 25 КБ), избавляя себя тем самым от сложной работы по оптимизации последующих ресайзов и клиента от качественных баннеров. В то время, как баннер до 40 КБ мог выглядеть эффектно, у них он получится таким же «упрощенным», как и версия до 25 КБ. Такой подход, конечно, неприемлем.
P. S. Если статья вызовет интерес, то в следующей мы будем говорить о золотом правиле баннерной рекламы и некоторых очевидных вещах, которыми, к сожалению, пренебрегают многие разработчики и площадки.
