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

Якщо бути точніше, то я вам розповім, як зробити плавну покадровую анімацію банера. Відразу попереджу вас від найбільшої помилки - не потрібно робити з банера новорічну гірлянду. У анімованому банері всього повинно бути в міру, щоб не дратувати своїх читачів. Краще анімувати тільки частина банера, залучаючи таким чином людини до певного інформаційного посилу.

Саме такий варіант і буде розглянуто нижче. У моєму банері відбувається мінімальні зміни, але тим не менш, вони помітні для очей читача і підсвідомо змушують його звернути додаткову увагу на мою пропозицію.

Для того, щоб зробити такий банер, я підготував три картинки-заготовки. Дві - безпосередньо з різними написами. Саме вони і будуть змінюватися між собою. А третій варіант - це просто порожня картинка, яка йде фоном в двох попередніх варіантах.

Природно, що всю роботу потрібно починати зі створення в програмі Photoshop нового документа з розмірами майбутнього банера. Але можна відразу працювати з зображенням найпершої картинки. Читаючи далі, ви зрозумієте чому можна зробити і так.

Отже, ви створили документ - майбутній банер. Тепер сюди ж, в Photoshop, завантажте все три підготовлених картинки-заготовки.

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

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

Після цього зайдіть на вкладку «Вікно» в верхньому меню програми і в випадаючому списку виберіть команду «Шкала часу» (в більш ранніх версіях програми Photoshop цей параметр має назву «Анімація»).

Відразу після цього в нижній частині вікна програми з'являється спеціальне вікно для анімації. Натисніть в ньому «Створити анімацію кадру». Відразу після цього вікно зміниться, і ви побачите в ньому перший кадр, який фотошоп формує з самого першого шару (нижнього на панелі шарів). Природно, що ви будете бачити і повноекранний вид цього кадру у вікні програми.

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

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

Таким чином в ряду анімації будуть стояти по порядку зліва направо кадри відповідні картинки з першої написом, з другої і знову з першої.

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

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

Щоб банер працював плавно, потрібно створити проміжні кадри. Їх будемо створювати після першого і другого кадру. Я буду створювати в своєму випадку 11 таких кадрів, ви ж знову орієнтуйтеся саме за своїм проектом. Для створення проміжних кадрів потрібно зробити клік по першому кадру (або того, до якого ви робите проміжні кадри). Таким чином кадр виділяється і потім потрібно натиснути на шкалі управління анімацією на значок у вигляді комети, що летить. Відкривається вікно, в якому вже вказується необхідна кількість кадрів.

Тривалість усіх проміжних кадрів буде дорівнювати тривалості батьківських кадрів. Тобто конкретно в моєму випадку для першого кадру вона буде дорівнює двом секундам, а для другої групи кадрів відповідно трьом секундам. Ви прекрасно розумієте, що це занадто велика тривалість, оскільки по суті проміжні кадри - це елементи переходу одного кадру в інший, тому їм потрібно задати меншу тривалість. Я задам тривалість рівну 0,2 секунди. Це цифра теж не догма і, як у випадку з кількістю проміжних кадрів, вона орієнтована на отримання в результаті необхідної плавності роботи банера.

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

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

Створивши проміжні кадри для першого кадру, аналогічно потрібно створити і налаштувати проміжні кадри для другого.

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

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

І звичайно на закінчення потрібно зберегти створений банер в форматі GIF. У моєму випадку вийшов ось такий банер. Саме його я робив для реклами безкоштовного інтенсиву по Facebook і Instagram, який проводить Академія інтернет професій номер 1 на цьому тижні. Я вже знайомий з проектами Академії і неодноразово писав про них у себе на блозі, і знаю, що навіть безкоштовний інтенсив дасть дуже багато корисних знань. Тому якщо ви також, як і я, заінтересованниев умінні працювати з Facebook і (або) Instagram, то я запрошую вас скласти мені компанію на інтенсивний. Я думаю буде круто, і ми з вами не пошкодуємо витраченого часу на навчання.

Так, мало не забув! Нижче Ви можете подивитися відео, в якому покроково показаний весь описаний вище процес. Якщо залишаться питання, то задавайте їх у коментарях або тут на блозі, або безпосередньо на Ютубі. Я обов'язково на них відповім.

Сподіваюся моя стаття була корисна вам. Ну а справа в сайдбарі ви можете побачити трохи іншу анімацію банера. Навряд чи я напишу статтю про такий спосіб, тому що виявляється записати відео за часом виходить в півтора рази швидше, ніж написати статтю - весь час йде на скріншоти. Але ви можете подивитися відео, як зробити рухомі написи на банері . Думаю, що воно вам теж сподобається.

З повагою, Сергій Почечуев

СПОДОБАЛАСЯ СТАТТЯ? Розкажи ДРУЗЬЯМ!