⚡ По просьбе одного из зрителей сегодня будем делать анимированный баннер для Майнкрафт сервера, который можно разместить на мониторингах. Это дополнительно будет привлекать внимание посетителей к вашему серверу. Для создания баннера будем использовать Adobe After Effects CC 2020.
Приятного просмотра ➖ Исходник баннера из видео → yadi.sk/d/ySd-PtjNnm3_ig IP сервера Джейкоба по Minecraft (1.13.2) → jc-world.ru ❗ Сайт сервера Джейкоба → jc-world.su Понравилось видео? Подпишись на канал → bit.ly/1uE210w Группа канала ВК → vk.com/jacobechannel По поводу рекламы → vk.cc/aureY2 Мой «лайв» канал → bit.ly/2PjatGM ✅ Приветствую, меня зовут Джейкоб и я снимаю видеоролики по Майнкрафту и не только. У меня есть ряд рубрик, которые я стараюсь периодически выкладывать. Советую посетить канал, уверен, что ты найдёшь для себя что-то интересное. Спасибо #анимация #баннер #aftereffects #туториал #каксделать #анимированный #афтер #эффектс #обучение #видеоурок #созданиеанимации #майнкрафт #сервер #animation #minecraft #banner #gif
ДЕЛАЕМ АНИМИРОВАННЫЙ БАННЕР ДЛЯ СЕРВЕРА НА МОНИТОРИНГЕ | ADOBE AFTER EFFECTS — ТУТОРИАЛ
Источник: mpeg.media
Как создать анимированный баннер (Gif ) для лендинг бота в Photoshop
Создайте новый документ (Ctrl + N) с размерами файла 700 х 280 пикселей. В новый документ любым удобным для вас способом добавляем изображение, которое будет являться фоном баннера.
Добавляем на наш баннер текст или же картинки, которые у нас будут появлятьсяпередвигаться, создавая тем самым анимацию. Например, для добавления текста необходимо выбрать на панели инструментов «Горизонтальный текст».
Добавляем текст, который мы хотим анимировать — каждую фразу отдельно!
После того, как мы добавили всю необходимую информацию, открываем временную шкалу. Для этого идём в меню Окно – Шкала времени (Window > Timeline). В нижней части рабочей области у нас откроется шкала времени, на которой будет один кадр — текущее состояние нашего баннера.
В редакторе слоев снимаем видимость (убираем «глаз») со всех элементов, кроме тех, которые нам нужны на первом кадре нашей анимации. В Шкале времени нажимаем на кнопку «Создании копии выделенных кадров», переходим на второй кадр и в редакторе слоев убираем видимость со всех ненужных слоев.
После выполнения предыдущего шага у нас должна сформироваться шкала времени с кадрами, которые будут менять друг друга. Теперь мы настраиваем время длительности каждого кадра, для этого нажимаем на знак стрелочки под кадром и выбираем необходимое значение (если предложенное значение вам не подходит, можете выбрать свое.
Что бы посмотреть результат своей работы, жмем на кнопку «запуск воспроизведения анимации»
Как только все будет готово, перейдите в меню Файл — Сохранить для Web (File > Save for Web) (CTRL+SHIFT+ALT+S) и примените настройки, как показано на скриншоте. После этого нажмите кнопку Сохранить (Save) и сохраните анимацию в формате GIF.
Источник: vc.ru
Как сделать анимированный баннер для сайта за 5 минут.
Здравствуйте, друзья! В этой статье я вам расскажу, как сделать анимированный баннер на сайт. Причём это будет не простая GIF-моргалка, а вполне полноценная плавная анимация, которую действительно не стыдно показать людям. От вас потребуются начальные знания программы Photoshop, желание творить и жажда новых знаний.
Если быть точнее, то я вам расскажу, как сделать плавную покадровую анимацию баннера.
Сразу предупрежу вас от самой большой ошибки – не нужно делать из баннера новогоднюю гирлянду.
В анимированном баннере всего должно быть в меру, чтобы не раздражать своих читателей.
Лучше анимировать только часть баннера, привлекая таким образом человека к определенному информационному посылу.
Именно такой вариант и будет рассмотрен ниже. В моём баннере происходит минимальные изменения, но тем не менее, они заметны для глаз читателя и подсознательно заставляют его обратить дополнительное внимание на моё предложение.
Для того, чтобы сделать такой баннер, я подготовил три картинки-заготовки. Две – непосредственно с разными надписями. Именно они и будут меняться между собой. А третий вариант – это просто пустая картинка, которая идет фоном в двух предыдущих вариантах.
Естественно, что всю работу нужно начинать с создания в программе Photoshop нового документа с размерами будущего баннера. Но можно сразу работать с изображением самой первой картинки. Читая далее, вы поймете почему можно сделать и так.
Итак, вы создали документ – будущий баннер. Теперь сюда же, в Photoshop, загрузите все три подготовленных картинки-заготовки.
Во вновь создаваемый баннер по очереди скопируйте и вставьте над фоновым слоем обе картинки с надписями. Они должны быть расположены в таком порядке, как показано на скриншоте после следующего абзаца.
Теперь наведите курсор на фоновый слой (самые нижний слой с замочком), нажмите на нём левую кнопку мыши и не отпуская её, перетащите данный слой на значок корзины внизу. У вас останется два слоя, из которых нужно выделить и сделать видимым самый первый, то есть нижний слой с картинкой первой надписи.
После этого зайдите на вкладку «Окно» в верхнем меню программы и в выпадающем списке выберите команду «Шкала времени» (в более ранних версиях программы Photoshop эта команда называется «Анимация»).
Сразу после этого в нижней части окна программы появляется специальное окно для анимации. Нажмите в нем «Создать анимацию кадра». Сразу после этого окно изменится, и вы увидите в нём первый кадр, который фотошоп формирует из самого первого слоя (нижнего на панели слоев).
Естественно, что вы будете видеть и полноэкранный вид этого кадра в окне программы.
Теперь в правом верхнем углу окна анимации нажмите на значок скрытого меню (в виде горизонтальных черточек) и в открывшемся контекстном меню выберите команду «Создать кадры из слоев».
Photoshop автоматически добавит в окно анимации второй кадр из второго слоя. Как-то специально выделять его или делать видимым для этого на панели слоев программы не нужно.
Кликните по самому первому кадру в ряду анимации (это кадр с самой первой надписью), он выделится, а вы нажмите на панели ниже кадров на значок в виде листочка с загнутым краем. Таким образом вы сдублируете самый первый кадр.
Теперь по аналогии, как мы удаляли ненужный слой в корзину, кликните на дубликате первого слоя (средний кадр) и удерживая левую кнопку мыши перетяните его за второй кадр, т.е. поставьте справа.
Таким образом в ряду анимации будут стоять по порядку слева направо кадры соответствующие картинки с первой надписью, со второй и снова с первой.
Задайте продолжительность данным кадрам так, как показано на скриншоте.
Конечно для вашего баннера цифры могут быть другими, но правило здесь такое: продолжительность показа двух разных картинок должна быть одинаковой, а поскольку у меня два кадра с изображением первой картинки, то их суммарная продолжительность должна быть равна продолжительности показа второй картинки (кадра).
Чтобы баннер работал плавно, нужно создать промежуточные кадры. Их будем создавать после первого и второго кадра. Я буду создавать в своем случае 11 таких кадров, вы же снова ориентируйтесь конкретно по своему проекту.
Для создания промежуточных кадров нужно сделать клик по первому кадру (или тому, к которому вы делаете промежуточные кадры). Таким образом кадр выделяется и затем нужно нажать на шкале управления анимацией на значок в виде летящей кометы. Открывается окно, в котором уже указывается необходимое количество кадров.
Продолжительность всех промежуточных кадров будет равняться продолжительности родительских кадров. То есть конкретно в моём случае для первого кадра она будет равна двум секундам, а для второй группы кадров соответственно трем секундам.
Вы прекрасно понимаете, что это слишком большая продолжительность, поскольку по сути промежуточные кадры – это элементы перехода одного кадра в другой, поэтому им нужно задать меньшую продолжительность.
Я задам продолжительность равную 0,2 секунды. Это цифра тоже не догма и, как в случае с количеством промежуточных кадров, она ориентирована на получение в итоге необходимой плавности работы баннера.
Для того, чтобы не задавать продолжительность каждому промежуточному кадру по отдельности, кликните по самому первому промежуточному кадру, зажмите клавишу «Shift», внимательно посчитайте последующие промежуточные кадры и на самом последнем сделайте клик левой кнопкой мыши.
Таким образом вы выделите все промежуточные кадры в группе. Теперь, кликайте на значок установки продолжительности времени кадра на любом из выделенных кадров и задавайте ему необходимую продолжительность.
После того, как вы нажмете кнопку OK, все выделенные кадры будут иметь одинаковую установленную вами продолжительность.
Создав промежуточные кадры для первого кадра, аналогично нужно создать и настроить промежуточные кадры для второго.
Вот теперь настала пора обратиться к картинке с общим фоном. Поставьте эту картинку так как изображено на скриншоте ниже.
Здесь тоже есть свои нюансы. Просто так картинка не встанет нижним слоем. Выделите слой с первой картинкой и вставьте картинку с фоном над ней, а уже затем перетяните слой с первой картинкой над картинкой с фоном, чтобы получить заданный порядок слоев.
Собственно говоря, работа уже готова, потому что вам остаётся только включить постоянный режим анимации баннера. Можете после этого проверить, как он работает. На панели анимации есть все необходимые кнопочки, в которых я думаю вы без труда разберетесь сами.
И конечно в заключение нужно сохранить созданный баннер в формате GIF.
В моём случае получился вот такой баннер. Конкретно его я делал для рекламы бесплатного интенсива по Facebook и Instagram, который проводила Академия интернет профессий номер 1 на этой неделе.
Да, чуть не забыл! Ниже Вы можете посмотреть видео, в котором пошагово показан весь описанный выше процесс. Если останутся вопросы, то задавайте их в комментариях или здесь на блоге, или непосредственно на Ютубе. Я обязательно на них отвечу.
Надеюсь моя статья была полезна вам. И конечно вы можете посмотреть видео, как сделать движущиеся надписи на баннере. Думаю, что оно вам тоже понравится.
С уважением, Сергей Почечуев
Источник: prostodelaytak.ru