Как сделать анимированный баннер для сайта за 5 минут.

Здравствуйте, друзья!  В этой статье я вам расскажу, как сделать анимированный баннер на сайт.  Причём это будет не простая GIF-моргалка, а вполне полноценная плавная анимация, которую действительно не стыдно показать людям.  От вас потребуются начальные знания программы Photoshop, желание творить и жажда новых знаний.

Анимированный баннер на сайт за 5 минут

Если быть точнее, то я вам расскажу, как сделать плавную покадровую анимацию баннера.

Сразу предупрежу вас от самой большой ошибки –  не нужно делать из баннера новогоднюю гирлянду.  

В анимированном баннере всего должно быть в меру, чтобы не раздражать своих читателей.

Лучше анимировать только часть баннера, привлекая таким образом человека к определенному информационному посылу.

Именно такой вариант и будет рассмотрен ниже. В моём баннере происходит минимальные изменения, но тем не менее, они заметны для глаз читателя и подсознательно заставляют его обратить дополнительное внимание на моё предложение.

Для того, чтобы сделать такой баннер, я подготовил три картинки-заготовки.  Две – непосредственно с разными надписями. Именно они и будут меняться между собой. А третий вариант –  это просто пустая картинка, которая идет фоном в двух предыдущих вариантах.

З картинки

Естественно, что всю работу нужно начинать с создания в программе Photoshop нового документа с размерами будущего баннера.  Но можно сразу работать с изображением самой первой картинки.  Читая далее, вы поймете почему можно сделать и так.

Итак, вы создали документ –  будущий баннер.  Теперь сюда же, в Photoshop, загрузите все три подготовленных картинки-заготовки.

Расположение файлов

Во вновь создаваемый баннер по очереди скопируйте и вставьте над фоновым слоем обе картинки с надписями.  Они должны быть расположены в таком порядке, как показано на скриншоте после следующего абзаца.

Теперь наведите курсор на фоновый слой (самые нижний слой с замочком), нажмите на нём левую кнопку мыши и не отпуская её, перетащите данный слой на значок корзины внизу.  У вас останется два слоя, из которых нужно выделить и сделать видимым самый первый, то есть нижний слой с картинкой первой надписи.

Удаление слоя в фотошопе

После этого зайдите на вкладку «Окно» в верхнем меню программы и в выпадающем списке выберите команду «Шкала времени» (в более ранних версиях программы Photoshop эта команда называется «Анимация»).

Включение Шкалы времени

Сразу после этого в нижней части окна программы появляется специальное окно для анимации. Нажмите в нем «Создать анимацию кадра». Сразу после этого окно изменится, и вы увидите в нём первый кадр, который фотошоп формирует из самого первого слоя (нижнего на панели слоев).

Естественно, что вы будете видеть и полноэкранный вид этого кадра в окне программы.

Включение анимации кадра

Теперь в правом верхнем углу окна анимации нажмите на значок скрытого меню (в виде горизонтальных черточек) и в открывшемся контекстном меню выберите команду «Создать кадры из слоев».

Создание кадров из слоев

Photoshop автоматически добавит в окно анимации второй кадр из второго слоя.  Как-то специально выделять его или делать видимым для этого на панели слоев программы не нужно.

Кликните по самому первому кадру в ряду анимации (это кадр с самой первой надписью), он выделится, а вы нажмите на панели ниже кадров на значок в виде листочка с загнутым краем. Таким образом вы сдублируете самый первый кадр.

Теперь по аналогии, как мы удаляли ненужный слой в корзину, кликните на дубликате первого слоя (средний кадр) и удерживая левую кнопку мыши перетяните его за второй кадр, т.е. поставьте справа.

Создание дубля кадра

Таким образом в ряду анимации будут стоять по порядку слева направо кадры соответствующие картинки с первой надписью, со второй и снова с первой.

Задайте продолжительность данным кадрам так, как показано на скриншоте.

Установка продолжительности кадра

Конечно для вашего баннера цифры могут быть другими, но правило здесь такое: продолжительность показа двух разных картинок должна быть одинаковой, а поскольку у меня два кадра с изображением первой картинки, то их суммарная продолжительность должна быть равна продолжительности показа второй картинки (кадра).

Чтобы баннер работал плавно, нужно создать промежуточные кадры. Их будем создавать после первого и второго кадра. Я буду создавать в своем случае 11 таких кадров, вы же снова ориентируйтесь конкретно по своему проекту.

Для создания промежуточных кадров нужно сделать клик по первому кадру (или тому, к которому вы делаете промежуточные кадры). Таким образом кадр выделяется и затем нужно нажать на шкале управления анимацией на значок в виде летящей кометы. Открывается окно, в котором уже указывается необходимое количество кадров.

Создание промежуточных кадров

Продолжительность всех промежуточных кадров будет равняться продолжительности родительских кадров. То есть конкретно в моём случае для первого кадра она будет равна двум секундам, а для второй группы кадров соответственно трем секундам.

Вы прекрасно понимаете, что это слишком большая продолжительность, поскольку по сути промежуточные кадры – это элементы перехода одного кадра в другой, поэтому им нужно задать меньшую продолжительность.

Я задам продолжительность равную 0,2 секунды. Это цифра тоже не догма и, как в случае с количеством промежуточных кадров, она ориентирована на получение в итоге необходимой плавности работы баннера.

Промежуточные кадры

Для того, чтобы не задавать продолжительность каждому промежуточному кадру по отдельности, кликните по самому первому промежуточному кадру, зажмите клавишу «Shift», внимательно посчитайте последующие промежуточные кадры и на самом последнем сделайте клик левой кнопкой мыши.

Таким образом вы выделите все промежуточные кадры в группе. Теперь, кликайте на значок установки продолжительности времени кадра на любом из выделенных кадров и задавайте ему необходимую продолжительность.

Настройка промежуточных кадров

После того, как вы нажмете кнопку OK, все выделенные кадры будут иметь одинаковую установленную вами продолжительность.

Создав промежуточные кадры для первого кадра, аналогично нужно создать и настроить промежуточные кадры для второго.

Вот теперь настала пора обратиться к картинке с общим фоном. Поставьте эту картинку так как изображено на скриншоте ниже.

Здесь тоже есть свои нюансы. Просто так картинка не встанет нижним слоем. Выделите слой с первой картинкой и вставьте картинку с фоном над ней, а уже затем перетяните слой с первой картинкой над картинкой с фоном, чтобы получить заданный порядок слоев.

Добавление фоновой картинки

Собственно говоря, работа уже готова, потому что вам остаётся только включить постоянный режим анимации баннера. Можете после этого проверить, как он работает. На панели анимации есть все необходимые кнопочки, в которых я думаю вы без труда разберетесь сами.

Настройка анимации

И конечно в заключение нужно сохранить созданный баннер в формате GIF.

В моём случае получился вот такой баннер. Конкретно его я делал для рекламы бесплатного интенсива по Facebook и Instagram, который проводила Академия интернет профессий номер 1 на этой неделе.

Баннер

Да, чуть не забыл! Ниже Вы можете посмотреть видео, в котором пошагово показан весь описанный выше процесс. Если останутся вопросы, то задавайте их в комментариях или здесь на блоге, или непосредственно на Ютубе. Я обязательно на них отвечу.

Надеюсь моя статья была полезна вам. И конечно вы можете посмотреть видео, как сделать движущиеся надписи на баннере. Думаю, что оно вам тоже понравится.

С уважением, Сергей Почечуев

Оцените статью
Просто Делай Так
Добавить комментарий

  1. Ирина С.

    С удовольствием прочитала вашу статью. Но вот жалость не работаю в фотошопе. А баннеры люблю делать. Поделилась вашей статьей в соцсетях.

    Ответить
    1. Сергей Почечуев автор

      Ирина, неплохие баннеры можно делать в Catasia Studio. В принципе и в любом другом видеоредакторе, особенно, если есть возможность выводить результат сразу в gif формат. Но даже и в случае, если такой функции нет, то можно переконверитировать видео в анимацию в онлайн сервисах.

      Ответить
  2. Максим

    Спасибо! Прочел Вашу статью, и обязательно приму к сведенью. Это полезно знать если ты ведешь блог

    Ответить
  3. Блог Александра Гаврина

    Очень все понятно и классно показали и расписали, спасибо! Теперь надо будет попробовать сделать.

    Ответить
    1. Сергей Почечуев автор

      Собственно записывал, чтобы самлму не забыть. Так лучше запоминается.

      Ответить
  4. Виктория

    Если баннеры правильно сделаны, яркие, с интересным текстом – они мотивируют кликнуть по ним.

    Ответить
    1. Сергей Почечуев автор

      Согласен!

      Ответить
  5. Майна

    Статья отличная, с удовольствием почитала. Но вот боюсь, что подобные баннеры https://bandesign.ru/vse-internet-bannery/ за пять минут не получится сделать :), как бы я не старалась.

    Ответить
    1. Сергей Почечуев автор

      В фотошопе это сделать тяжело. Но большинство баннеров из рекламируемого Вами сервиса я сделаю на раз-два в Camtasia Studio.

      Ответить
      1. Валерий

        И сколько они будут весить в килобайтах, ваши баннеры в Camtasia Studio?

        Ответить
        1. Сергей Почечуев автор

          Риторический вопрос, на который можно ответить только риторически. Сами попробуйте! И не стоит так обижаться за свой сервис. Если Вы заметили я не стал удалять ссылку на него. Только из-за того, что не все умеют делать то, что умею я. И он наверняка кому-то будет полезен.

          Ответить
Примечание

Мы используем куки для наилучшего представления нашего сайта. Если Вы продолжите использовать сайт, мы будем считать что Вас это устраивает.