Здравствуйте, друзья! В этой статье я вам расскажу, как сделать анимированный баннер на сайт. Причём это будет не простая GIF-моргалка, а вполне полноценная плавная анимация, которую действительно не стыдно показать людям. От вас потребуются начальные знания программы Photoshop, желание творить и жажда новых знаний.
Если быть точнее, то я вам расскажу, как сделать плавную покадровую анимацию баннера.
Сразу предупрежу вас от самой большой ошибки – не нужно делать из баннера новогоднюю гирлянду.
В анимированном баннере всего должно быть в меру, чтобы не раздражать своих читателей.
Лучше анимировать только часть баннера, привлекая таким образом человека к определенному информационному посылу.
Именно такой вариант и будет рассмотрен ниже. В моём баннере происходит минимальные изменения, но тем не менее, они заметны для глаз читателя и подсознательно заставляют его обратить дополнительное внимание на моё предложение.
Для того, чтобы сделать такой баннер, я подготовил три картинки-заготовки. Две – непосредственно с разными надписями. Именно они и будут меняться между собой. А третий вариант – это просто пустая картинка, которая идет фоном в двух предыдущих вариантах.
Как сделать анимированный баннер для рекламы с нуля за 10 минут?
Естественно, что всю работу нужно начинать с создания в программе Photoshop нового документа с размерами будущего баннера. Но можно сразу работать с изображением самой первой картинки. Читая далее, вы поймете почему можно сделать и так.
Итак, вы создали документ – будущий баннер. Теперь сюда же, в Photoshop, загрузите все три подготовленных картинки-заготовки.
Во вновь создаваемый баннер по очереди скопируйте и вставьте над фоновым слоем обе картинки с надписями. Они должны быть расположены в таком порядке, как показано на скриншоте после следующего абзаца.
Теперь наведите курсор на фоновый слой (самые нижний слой с замочком), нажмите на нём левую кнопку мыши и не отпуская её, перетащите данный слой на значок корзины внизу. У вас останется два слоя, из которых нужно выделить и сделать видимым самый первый, то есть нижний слой с картинкой первой надписи.
После этого зайдите на вкладку «Окно» в верхнем меню программы и в выпадающем списке выберите команду «Шкала времени» (в более ранних версиях программы Photoshop эта команда называется «Анимация»).
Сразу после этого в нижней части окна программы появляется специальное окно для анимации. Нажмите в нем «Создать анимацию кадра». Сразу после этого окно изменится, и вы увидите в нём первый кадр, который фотошоп формирует из самого первого слоя (нижнего на панели слоев).
Естественно, что вы будете видеть и полноэкранный вид этого кадра в окне программы.
Теперь в правом верхнем углу окна анимации нажмите на значок скрытого меню (в виде горизонтальных черточек) и в открывшемся контекстном меню выберите команду «Создать кадры из слоев».
Photoshop автоматически добавит в окно анимации второй кадр из второго слоя. Как-то специально выделять его или делать видимым для этого на панели слоев программы не нужно.
Кликните по самому первому кадру в ряду анимации (это кадр с самой первой надписью), он выделится, а вы нажмите на панели ниже кадров на значок в виде листочка с загнутым краем. Таким образом вы сдублируете самый первый кадр.
Теперь по аналогии, как мы удаляли ненужный слой в корзину, кликните на дубликате первого слоя (средний кадр) и удерживая левую кнопку мыши перетяните его за второй кадр, т.е. поставьте справа.
Таким образом в ряду анимации будут стоять по порядку слева направо кадры соответствующие картинки с первой надписью, со второй и снова с первой.
Задайте продолжительность данным кадрам так, как показано на скриншоте.
Конечно для вашего баннера цифры могут быть другими, но правило здесь такое: продолжительность показа двух разных картинок должна быть одинаковой, а поскольку у меня два кадра с изображением первой картинки, то их суммарная продолжительность должна быть равна продолжительности показа второй картинки (кадра).
Чтобы баннер работал плавно, нужно создать промежуточные кадры. Их будем создавать после первого и второго кадра. Я буду создавать в своем случае 11 таких кадров, вы же снова ориентируйтесь конкретно по своему проекту.
Для создания промежуточных кадров нужно сделать клик по первому кадру (или тому, к которому вы делаете промежуточные кадры). Таким образом кадр выделяется и затем нужно нажать на шкале управления анимацией на значок в виде летящей кометы. Открывается окно, в котором уже указывается необходимое количество кадров.
Продолжительность всех промежуточных кадров будет равняться продолжительности родительских кадров. То есть конкретно в моём случае для первого кадра она будет равна двум секундам, а для второй группы кадров соответственно трем секундам.
Вы прекрасно понимаете, что это слишком большая продолжительность, поскольку по сути промежуточные кадры – это элементы перехода одного кадра в другой, поэтому им нужно задать меньшую продолжительность.
Я задам продолжительность равную 0,2 секунды. Это цифра тоже не догма и, как в случае с количеством промежуточных кадров, она ориентирована на получение в итоге необходимой плавности работы баннера.
Для того, чтобы не задавать продолжительность каждому промежуточному кадру по отдельности, кликните по самому первому промежуточному кадру, зажмите клавишу «Shift», внимательно посчитайте последующие промежуточные кадры и на самом последнем сделайте клик левой кнопкой мыши.
Таким образом вы выделите все промежуточные кадры в группе. Теперь, кликайте на значок установки продолжительности времени кадра на любом из выделенных кадров и задавайте ему необходимую продолжительность.
После того, как вы нажмете кнопку OK, все выделенные кадры будут иметь одинаковую установленную вами продолжительность.
Создав промежуточные кадры для первого кадра, аналогично нужно создать и настроить промежуточные кадры для второго.
Вот теперь настала пора обратиться к картинке с общим фоном. Поставьте эту картинку так как изображено на скриншоте ниже.
Здесь тоже есть свои нюансы. Просто так картинка не встанет нижним слоем. Выделите слой с первой картинкой и вставьте картинку с фоном над ней, а уже затем перетяните слой с первой картинкой над картинкой с фоном, чтобы получить заданный порядок слоев.
Собственно говоря, работа уже готова, потому что вам остаётся только включить постоянный режим анимации баннера. Можете после этого проверить, как он работает. На панели анимации есть все необходимые кнопочки, в которых я думаю вы без труда разберетесь сами.
И конечно в заключение нужно сохранить созданный баннер в формате GIF.
В моём случае получился вот такой баннер. Конкретно его я делал для рекламы бесплатного интенсива по Facebook и Instagram, который проводила Академия интернет профессий номер 1 на этой неделе.
Да, чуть не забыл! Ниже Вы можете посмотреть видео, в котором пошагово показан весь описанный выше процесс. Если останутся вопросы, то задавайте их в комментариях или здесь на блоге, или непосредственно на Ютубе. Я обязательно на них отвечу.
Надеюсь моя статья была полезна вам. И конечно вы можете посмотреть видео, как сделать движущиеся надписи на баннере. Думаю, что оно вам тоже понравится.
С уважением, Сергей Почечуев
Источник: prostodelaytak.ru
Изготовление анимированного рекламного баннера
Изготовление анимированного рекламного баннера в программе Easy GIF Animator
В Инфобизнесе и других областях заработка через Интернет, баннерную рекламу никто не отменял, она работала и пока будет работать. Для размещения рекламных баннеров, в том числе и анимированных, на рекламных биржах и сайтах, они как минимум у Вас должны быть.
Где их взять? Правильно можно заказать и купить на фрилансе, но это будет стоить денег, к тому же быстро их не сделают. А можно сделать рекламные баннеры, в том числе и анимированные, самостоятельно.
Даже если у Вас есть готовые рекламные баннеры, например для продвижения партнерских ссылок, лучше сделать уникальные, по ним лучше будут кликать. Таким образом, заработок на партнерках будет выше. Да и для продвижения своих продуктов в Инфобизнесе, такой вид рекламы хорошо поможет – проверено.
В предыдущих статьях, мы подробно рассмотрели, как сделать статический и анимированный рекламные баннеры. Если Вы не читали предыдущие статьи, то можно прочитать их «Изготовление рекламного баннера своими руками» (статический) и «Анимированный баннер своими руками за 5 минут» (анимированный). Поскольку мы создали анимированные рекламные баннеры размером 468х60, вставлять картинку в такой маленький формат неудобно, были сделаны только записи рекламного характера.
Если делать рекламный баннер большего размера, то без картинки он будет смотреться хуже, значит рекламные баннеры размером 200х200, 240х400 и другие большие размеры надо наполнить картинкой.
Рассмотрим изготовление анимированного рекламного баннера размером 200х200, он достаточно ходовой и его часто используют на бирже баннерной рекламы Rotaban.
Для создания анимированного рекламного баннера с картинками нам необходимо выполнить работу в два этапа:
- создать картинки будущего баннера, которые будут переключаться (2 – 4);
- создать анимированное изображение.
Для создания картинок можно выбрать любой графический редактор, а для создания анимации выбираем программу «Easy GIF Animator». О том, где взять указанную программу, как её установить и как ею пользоваться, подробно написано в предыдущей статье.
Итак, готовим четыре анимированных картинки и сохраняем их в папку на компьютер (можно две, можно три). Картинки будем делать в программе Pixlr, Вы можете делать их в любом графическом редакторе, который Вам нравится. Напомню, что бесплатная программа Pixlr это практически онлайн фотошоп, которая намного проще, хотя её возможности достаточно большие. О том, как работать с этой программой, делать картинки в ней писалось на блоге, Вы можете прочитать предыдущие статьи «Онлайн редактор Pixlr» и «Уникальные картинки для статей блога«.
Если Вы не хотите тратить время на создание картинок, Вы можете просто взять формат (размер) будущего баннера и сделать в поле будущего баннера рекламные записи. Типа «скачать», «купить» и т. д. Записи делаем последовательные. Сначала излагаем проблему, а следующий кадр отобразит решение проблемы.
Итак, картинки мы изготовили, теперь переходим к созданию анимированного баннера. Открываем программу «Easy GIF Animator» и выбираем режим «Insert Image» (вставить изображение).
В открывшемся окне выделяем ранее созданные четыре картинки и нажимаем «Открыть». Как видно со скрина, выбранные картинки отобразились в левой колонке программы создания баннера.
Для установки времени замедления переключения изображений анимированного рекламного баннера, нажимаем кнопку «Frame Properties» (свойства кадра). Если в поле «Delay» (задержка), записано 100, то это означает, что задержка выставлена 1 сек, если 200, это 2 сек и т.д. Выставляем 200 или 300 единиц (2-3 сек). Время задержки выставляется для каждого изображения отдельно, для этого нажимаем на выбранную картинку и устанавливаем время, затем следующую картинку. Время задержки можно выбирать различное для различных картинок, одна открываться будет быстро, другая медленнее.
Теперь нажимаем «Animation Properties» (свойство анимации), нажимаем кнопку Play и проверяем работу созданного анимированного рекламного баннера. Обращаю внимание – функция «Repeat Forever» (повторять всегда) должна быть включена. Создание анимированного рекламного баннера завершено, сохраняем его на компьютер. Это можно сделать либо нажав на дискетку, либо нажать «Файл» и «Save as …».
Как видите львиную долю времени надо затратить на создание четырех картинок, у меня это заняло минут 20, а создание анимированного рекламного баннера в программе «Easy GIF Animator» занимает минуты три.Смотрите видео:
Таким образом, Вы легко и просто, и главное бесплатно, можете создать анимированный рекламный баннер любого размера, с любыми картинками и текстом.
Надеюсь, созданные Вами анимированные рекламные баннеры помогут Вам заработать больше денег в партнерском маркетинге, Инфобизнесе, реселлинге и других нишах, связанных с заработком через Интернет. Удачи Вам.
С уважением, Иван Кунпан.
Источник: biz-iskun.ru