Лучшим средством для продвижения товара в онлайн-магазине или на веб-портале является анимированная баннерная реклама, спрос на которую не падает на протяжении нескольких лет. И это не мудрено! Современный рекламный ролик в виде gif баннера для сайта, помещённый в привлекательную «мультипликационную» обложку, способен заинтересовать потенциальных клиентов и заставить их перейти на площадку рекламодателя.
Сегодня вы узнаете, что такое gif баннер, выберете наиболее оптимальную для вас программу для создания анимированной графики, и создадите качественный рекламную ссылку, переносящую пользователя на ваш интернет-ресурс.
Рекламная ГИФОмания
Что такое gif баннер? Это уникальная рекламная анимация, которая содержит в себе фиксированное количество изображений, методически сменяющих друг друга. Расположение и частота кадров всегда неизменны: они задаются на этапе создания баннера. Благодаря подобной смене и создаётся «мультяшный» эффект, то есть привлекающая взор анимация.
Как сделать рекламный баннер с анимацией в фотошопе
Формат gif является классикой жанра в русле создания рекламной графики. Gif баннеры для сайта используются в статичном и анимированном варианте. «Мигающие» модели, несомненно, занимают лидирующую позицию по отношению к скучной статике: яркие надписи, поступательно сменяющие друг друга, лучше и эффективней привлекают внимание потребителей интернет-товара или услуги.
Создавая анимированный gif баннер, необходимо учитывать следующие бонусы подобной рекламы:
- это самый бюджетный и простой вариант в изготовлении привлекательной графики;
- баннер в формате «гиф» может быть опубликован на рекламном ресурсе любого типа: в баннерных сетях, на сервисе-партнёрке и, конечно же, в блогах.
- существует богатое разнообразие программ для изготовления gif баннеров, благодаря которому можно выбрать наиболее подходящий софт;
- индексация баннеров подобного типа происходит очень быстро и продуктивно.
Говоря об анимированной рекламной графике, нельзя забывать и о недостатках этого элемента:
- она занимает существенный «вес», который может отрицательно влиять на скорость загрузки веб-страницы;
- функционал гиф баннера ограничен традиционной сменой кадров;
- качество «гифки» может существенно пострадать из-за попыток снижения баннерного «веса».
Учитывая все вышеуказанные моменты, можно заключить следующее. Во-первых, делать мигающий баннер для сайта лучше всего с минимальной частотой смены кадров, совмещающих текст и рисунки. Во-вторых, оптимальным вариантом в использовании «гифки», выполненной в формате 88*33, является элементарная «кнопка сайта».
Оптимальная программа для изготовления gif баннеров
Создать интересный баннер в формате gif можно при помощи софта, отличающегося различным интерфейсом и уникальным функционалом. По этой причине создать анимированный gif баннер для сайта, какой бы сложности не была реклама, не представляет большого труда. Причем неважно, каким уровнем обладает веб-дизайнер: из перечисленного ниже списка и профессиональный разработчик, и начинающий веб-дизайнер смогут без труда и заморочек сделать меняющийся баннер своими руками.
Как сделать анимированный gif баннер в фотошопе
Вот, собственно, и список популярных программ:
- BannerMakerPro. Эффективный софт, который применяется в изготовлении элементарных gif баннеров для сайта. Главный бонус программы – доступный и удобный интерфейс. Есть и минусы у BMK, среди которых чаще всего выделяют лимитированный функционал.
- EasyGifAnimator. Аналогично первой программе для изготовления gif баннеров: EGA обладает приличным интерфейсом, понятным и для новичка. С её помощью можно создать простецкий gif баннер, однако именно этот момент часто причисляют к разряду недостатков. Софт EGA работает на платной основе, однако можно найти и бесплатные версии (free trial) с ограниченным по времени пользованием.
- UnleadGifAnimator. Софт с более-менее замысловатым функционалом. Сделать мигающий баннер для сайта в этой программе будет затруднительно для новичков, однако для профессионалов UGA является настоящим кладом.
- BannerDesignerPro. Ещё более усложнённый сервис для изготовления анимированной баннерной рекламы. Софт обладает сложной начинкой, в которой не каждый разберётся. При этом специалисты в области разработки рекламных баннеров считают Banner Design Pro ведущей площадкой в рейтинге лучших программ для изготовления gif баннеров.
- AdobePhotoshopCS5. Одна из самых усовершенствованных софтов в плане разработки баннерной рекламы стиля gif. Практически неограниченные возможности, высококачественная графика. Единственный недостаток – программа стоит недёшево. Но, разумеется, этот минус легко перечеркивается вышеперечисленными достоинствами AP.
Анимация, сделанная в AP
Рассмотрим пошаговую инструкцию того, как сделать меняющийся баннер своими руками при помощи Фотошопа. И хотя эта программа считается довольно сложной и мудреной в управлении, однако для создания качественной и привлекательной gif анимации вам потребуется сделать всего 15 шагов.
Рассмотрим рекламную «гифку» на примере стандартной «кнопки сайта», обладающей габаритами – 88*31 pixel. Просмотрев нашу инструкцию, вы научитесь быстро создавать анимированные gif баннеры в софте AP. Не забудьте установить программу Image Ready, которая обязательно входит в лицензионный комплект Фотошопа.
Итак, для того чтобы сделать меняющийся баннер в AP, вам понадобится:
1. Создать новый документ при помощи комбинации ctrl+n и установить необходимые габариты. В нашем примере это – 88*31 pix.
2. Задать цветовую палитру фона: к примеру, #FDF8D9.
3. Кликнуть на F7: откроется палитра слоёв. Зажав кнопку alt, щёлкнуть два раза по Background. Получается элементарный фоновый слой.
4. Необходимо создать обводку для слоя изнутри: кликнуть два раза по созданному пласту и в возникшем окошке выбрать Stroke (найти его можно в нижнем углу окна). Задать характеристики будущего баннера: «размер»: 1; «локализация»: внутри; «цвет»: #A28564. После чего кликнуть O’k.
5. Придумать привлекательную текстовую часть для первого кадра с помощью инструмента горячей клавиши T. Необходимо на время «скрыть» текст, кликнув по этой иконке – . У нас первая фраза звучит так: «Всё самое интересное в сети Интернет».
6. Изготовление подложки. Сделать новый пласт с помощью нажатия комбинации shift+ctrl+n. Выбрать инструмент прямоугольного выделения (для удобства можно использовать горячую клавишу М). Выделить необходимую часть для работы: используйте «Пробел», чтобы быстро передвигать выделенную область. Залить форму оттенков #FAEEAC.
7. Убрать выделенную область при помощи ctrl+d, написать новую фразу. У нас это:
8. Выбрать пласт с фразой FREEGOLD.RU, копировать его с помощью ctrl+j. Оба текстовых слоя необходимо скрыть и работать с «клонированным» пластом. Найти в раскладке Filter пункт Motin Blur и задать следующие параметры: «угол» — 0, «дистанция» — 10.
9. Анимировать первую сценку: сделать фоновый, «подложный» и текстовый слои визуально просматриваемыми.
10. Открыть пункт «Анимация» в раскладке Windows и копировать кадр: для этого необходимо активизировать функцию Duplicates selected frames.
11. Настроить функцию анимации для следующей сценки. Включить копированный слой и посмотреть «мультик» с помощью иконки Play.
12. Снова сделать «клон» сценки. Размытый пласт выключается, а более чёткий – включается. Выбрать вторую и третью сценки, используя shift, нажать Tweens animation frames.
Указать в возникшем окне число сценок – 5, нажать O’k. Подобный показатель позволит добиться плавного перехода между сценами.
13. Дублировать последнюю сценку. Фоновый и текстовый («Самое интересное…») пласты оставить включенными, оставшиеся слои – отключаются. На выходе должно получиться до 9 сценок.
14. Необходимо задать временной показатель для каждой отдельной сцены. Это делается в нижней вкладке, расположенной внизу любого кадра. В предложенном списке отсутствует подходящий показатель времени? В таком случае следует воспользоваться функцией Others или «Другие».
Подбирая оптимальный временной промежуток для нашего баннера, мы остановились на:
15. Последний шаг – сохранение анимированной гифки в разделе File. В появившемся окошке указать формат gif.
В итоге, мы получим вот такой мигающий баннер для сайта:
О нас
Ginads — ведущая баннерная сеть с такими форматами рекламы в интернете как: топлайн,слайдер,сообщение,боттомлайн, fullscreen, видео, трафик
Благодаря такому размещению Вы можете увеличить количество пользователей своего сайта, привлечь новых клиентов, повысить продажи
Баннерная реклама многофункциональна, cайты любой тематики и масштаба отлично подходят для такого размещения — от крупнейших порталов и интернет магазинов до одностраничников. Ежедневно с помощью рекламы в сети Ginads сайты получают более 5 млн. новых посетителей
Вы размещаете баннеры в нашей бирже баннерной рекламы и ее видят пользователи на большом количестве сайтов с таргетингом на выбранную Вами страну и другими. Управление рекламой производится через интуитивно понятный интерфейс, прилагается детальная статистика
Источник: ginads.com
Как создать .gif баннер? В Easy Gif Animator и Photoshop.
В современном мире невозможно без рекламы… А реклама, друзья, невозможна без различных баннеров, анимации и прочих вещей, которые привлекают внимание посетителей сайтов, помогая продавать товары и услуги. А где такие баннеры можно использовать? Например, в сервисах тизерной и контекстной рекламы . В этой статье я расскажу, как создать .gif баннер.
Для создания анимированного .gif баннера нам потребуется специальная программа, в этой статье я рассмотрю две такие — это Easy Gif Animator и Photoshop. Вообще, анимированные .gif баннеры создаются очень просто, и сейчас вы это увидите. Начну с программы Easy Gif Animator.
1. Скачайте программу Easy Gif Animator в конце этой статьи, и установите на свой компьютер. Установили? Теперь запустите её и нажмите: «файл —> Мастер нового баннера», установите необходимый размер будущего баннера. Я чаще использую стандартные размеры, например: 468×60 px, но если вам необходимо создать .gif баннер для тизерной рекламы Bodyclick , то вам будет нужен размер 200×200 px, в этом случае установите переключатель во второе положение и поставьте необходимые размеры. Нажмите кнопку «Далее».
В следующем меню программа попросит выбрать фон будущего .gif баннера: 1. Простой баннер с настройкой фонового цвета,
2. Баннер с настройкой цвета и градиента,
3. Баннер с использованием картинок и текстур. Собственно выбирайте, то, что вам больше нравится. Естественно картинки, градиент выглядят намного интереснее. Опять нажимаем кнопку «Далее». Теперь давайте разберёмся с текстом для нашего создаваемого .gif баннера.
В программе можно использовать до трёх текстовых сообщений. Вы можете настроить шрифт, размер, цвет текста, настроить различные варианты анимации, появления, исчезновения и многое другое. Программа русифицирована, думаю, трудностей у вас не возникнет. Вот собственно и всё! Ваш анимированный .gif баннер готов! Сохраните его в компьютер!
Программа достаточно функциональна, имеет много различных настроек, кнопочек и др. Интуитивно понятный интерфейс, думаю, она вам понравится и обязательно пригодится для быстрого и качественного создания .gif баннеров. Идём дальше! Как создать анимированный .gif баннер в программе Фотошоп?
Я не буду учить вас всем тонкостям программы, это выходит за рамки данной статьи. Сейчас мы разберем, как создаются анимированные .gif баннеры в фотошопе! Итак, сначала нужно определиться, сколько слайдов анимации будет в нашем будущем .gif баннере. Если в программе Easy Gif Animator их доступно только три, то в фотошопе число не ограничено!
Я буду создавать анимацию из 5 картинок.
Разумеется, сначала эти картинки нужно создать… Допустим, они у нас уже готовы, вот что у меня получилось: Теперь нам нужно все эти картинки объединить. Просто перетаскиваем инструментом «MoveTool» сначала вторую картинку на первую, третью на первую и т.д. В итоге у нас осталась одна картинка, состоящая из пяти слоёв. Отключите видимость четырёх верхних слоёв: Просто щёлкнув по «глазику» левой кнопкой мыши.
Теперь нажимаем «Window—> Animation» Появится вот такое окошко: Нажмите левой кнопкой мыши на выделенную маркером кнопку. Перед вами появится панель для добавления слайдов: На изображении я отметил маркером кнопку для добавления нового слайда. После нажатия на эту кнопку вам нужно будет включить видимость следующего слоя, нажав на панели слоёв на пустую клеточку: Я плохой художник, не судите строго…
По этому же принципу добавляйте все остальные слои в наш анимированный .gif баннер. Вы можете задать время анимации каждого кадра (по умолчанию стоит 10 сек.), а также указать будет ли .gif баннер цикличным (Forever) или анимация баннера будет проходить только один раз, оставив в настройках значение «Once».
Ну вот, анимированный .gif баннер в программе фотошоп готов, теперь нужно его сохранить. Нажимаем «File—> Save For Web», формат баннера естественно .gif Область применения анимированных баннеров в интернете огромна, конечно, это прежде всего реклама на таких сервисах как Bodyclick и другие. Ух, вроде всё написал, что хотел сказать!
Теперь и вы знаете, как создать .gif баннер, как создаются анимированные gif баннеры в программах Photoshop и Easy Gif Animator. Надеюсь, этот пост был вам полезен. Советую получать свежие статьи на e-mail, чтобы не пропустить много новой, интересной информации!
Скачать бесплатно!
На этом всё. С уважением, Павел Макаров.
P.S. Буду рад комментариям к этому посту.
Источник: pavelmakarov.ru
Создаём анимированный баннер в Фотошоп
В этом уроке Вы узнаете, как создать анимированный баннер в Photoshop CS5, используя временную шкалу.
Сложность урока: Средний
Анимированные Gif файлы были поводом для многих шуток в дизайнерских обществах. Это потому, что анимационные картинки известны тем, что немного навязчивы и загромождают интернет-странички. Однако при правильном использовании, анимация может привлечь внимание к себе и заставить забыть о другом содержимом страницы. Сегодня мы покажем, как использовать Photoshop CS5 для создания анимированных GIF баннеров. Давайте начнем!
Прим. переводчика: для этого урока подойдёт и Photoshop CS4.
Это тот самый баннер, о котором пойдёт речь в этом уроке.
Шаг 1. Создайте новый документ размером 250 х 250 пикселей и установите разрешение (resolution) до 70 пикселей. Цвет фона для баннера будет такой # f2f2f2.
Шаг 2. Поместите логотип в верхней центральной части баннера
Шаг 3. Напишите слоган под логотипом.
Шаг 4. Нарисуйте прямоугольник и установите цвет # b90909.
Откройте диалоговое окно Стили слоя (layer styles)и настройте Тень (Drop shadow). Уменьшите расстояние (distance ) и размер (size ) на 2px.
Теперь добавьте Наложение градиента (Gradient Overlay) и установите режим смешивания на Умножение (Multiply) с непрозрачностью 28%.
Добавьте обводку и уменьшите её размер до 1 пикс. Установите цвет # a31b1b.
Шаг 5. Добавим список рекламных предложений. У нас это будет Tutorials (Уроки), Articles (Статьи), Tips (Советы), Freebies (бесплатно), Basix (Азы), Videos (Видео), Premuim (Премиум) как показано на рисунке.
Растрируйте текстовые слои и создайте Обтравочную маску (Сreate a clipping mask).
Шаг 6. Теперь поместите привлекательную картинку. В нашем случае мы использовали значок премиум-программы для PSDTUTS, но вы можете использовать все, что подходит вам.
Шаг 7. Добавим ещё нужный текст ниже картинки, которую мы вставили в шаге 6.
Шаг 8. Создайте овальную фигуру и установите цвет # fdfcfc.
Откройте диалоговое окно Стили слоя (layer styles) и настройте Тень (Drop shadow). Уменьшите расстояние (distance ) и размер (size ) на 1px.
Включите и проверьте Внутреннее свечение (Inner glow) и оставьте в настройках все как есть.
Добавьте Наложение градиента (Gradient Overlay) с Непрозрачностью (Opacity) 6%
Шаг 9. Теперь, когда мы закончили создание всех наших слоёв, мы готовы приступить к работе по анимации. Во-первых, откройте панель анимации Окно – Анимация (Window> Animation). Я буду использовать панель анимации по Временной шкале (Timeline Animation), а не в Покадровой анимации (frame animation).
Примечание: Эта функция доступна только в Photoshop Extended.
Теперь устанавливаем все слои видимыми, но уменьшаем их непрозрачность до 0%. Фон не трогаем.
Шаг 10. Смотрите изображения ниже для инструкций о том, как вставлять ключевые кадры и где увеличивать непрозрачность. Для каждого созданного нами элемента отдельный скриншот с инструкцией.
Прим. переводчика: ключевые кадры можно будет перемещать мышкой. Так же можно выделить несколько ключевых кадров для перемещения.
(нажмите на изображение, чтобы увеличить)
(нажмите на изображение, чтобы увеличить)
(нажмите на изображение, чтобы увеличить)
(нажмите на изображение, чтобы увеличить)
(нажмите на изображение, чтобы увеличить)
(нажмите на изображение, чтобы увеличить)
(нажмите на изображение, чтобы увеличить)
Шаг 11. Ваша Временная шкала (Timeline Animation), должна выглядеть примерно так, как ниже.
(нажмите на изображение, чтобы увеличить)
Шаг 12. Ну вот, мы и завершили нашу анимацию. Нажмите кнопку Пуск (Play), чтобы увидеть результат. Вы можете всё подстроить в случае необходимости. Чтобы сохранить ваш баннер, перейдите в меню Файл — Сохранить для веб и устройств (File — Save for Web https://creativo.one/lessons/animation/1412-sozda-m-animirovannyiy-banner-v-fotoshop.html» target=»_blank»]creativo.one[/mask_link]