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

Как сделать анимированный баннер

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

БаннерЕсли быть точнее, то я вам расскажу, как сделать плавную покадровую анимацию баннера.  Сразу предупрежу вас от самой большой ошибки —  не нужно делать из баннера новогоднюю гирлянду.   В анимированном баннере всего должно быть в меру, чтобы не раздражать своих читателей. Лучше анимировать только часть баннера, привлекая таким образом человека к определенному информационному посылу.

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

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

З картинки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

И конечно в заключение нужно сохранить созданный баннер в формате GIF. В моём случае получился вот такой баннер. Конкретно его я делал для рекламы бесплатного интенсива по Facebook и Instagram, который проводит Академия интернет профессий номер 1 на этой неделе. Я уже знаком с проектами Академии и неоднократно писал о них у себя на блоге, и знаю, что даже бесплатный интенсив даст очень много полезных знаний. Поэтому если вы также, как и я, заинтересованныев умении работать с Facebook и (или) Instagram, то я приглашаю вас составить мне компанию на интенсиве. Я думаю будет круто, и мы с вами не пожалеем потраченного времени на обучение.

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

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

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


ПОНРАВИЛАСЬ СТАТЬЯ? РАССКАЖИ ДРУЗЬЯМ!


ПОДПИШИСЬ НА ОБНОВЛЕНИЯ БЛОГА
и получай новые материалы на почту!
 

ПОДПИСАТЬСЯ НА НОВОСТИ
 

100% гарантия конфиденциальности.
В любой момент Вы сможете отписаться.

 

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Отправляя комментарий Вы даете свое СОГЛАСИЕ на обработку персональных данных, необходимых для нормального функционирования сайта
Друзья! Не удивляйтесь, что Вы сразу не видите свои комментарии.
Они обязательно появятся после модерации.