fbpx

Каталог статей

Каталог статей для размещения статей информационного характера

Технології

Як швидко зробити анімований банер GIF

Зараз ми розглянемо дуже простий і дуже цікавий урок з самостійного створення анімованого gif банера.
Щоб було зрозуміліше, про що йде мова, і що в кінцевому підсумку вийде, дивимося відразу на кінцевий результат нашої роботи.
На сьогоднішній день найпопулярніші банери, прийняті практично на всіх веб-сайтах та на всіх банерообмінних мережах, є банери, засновані на gif і flash анімації стандартного розміру: 468х60, 100х100, 120х60, 88х31. Але звичайно, це не догма, можуть бути й інші, в залежності від дизайну сайту.
Ми з Вами розглянемо приклад створення анімованого банера розміром 468х60, яким і є вищезгаданий приклад.
Що таке gif? Це маленький відеоролик, що складається з декількох кадрів, який автоматично «програється». Ось з цього і будемо виходити. Тобто, нам потрібно зробити кілька кадрів (від двох і більше) і їх програти. Зробити це можна в фотошопі і прикладів таких в інтернеті безліч. Але якщо у Вас немає стільки часу для освоєння премудростей фотошопу – є шлях значно простіше і швидше. З тим же результатом. Це програма Bannershop GIF Animator 5. Скачати можна з будь-якого ресурсу.
Отже, приступимо.
Перше, що потрібно зробити, це визначитися з тим, як би Ви хотіли, щоб Ваш банер виглядав в кінцевому підсумку. Придумати текстову частину і саму концепцію рухів слів, картинок та ін. Намагатися створити анімацію не продумавши її від початку до кінця – невдячна праця.
Друге, під нашу концепцію готуємо кілька малюнків. Не буду зупинятися детально, як це робити, і так зрозуміло, так і мета інша. Головне правило: кожен наступний малюнок – це черговий кадр Вашого фільму, тобто якась зміна до попереднього малюнку (додавання нового елемента або заміна елемента, слова і ін).
Для прикладу будемо вважати, що ми ці малюнки з розмірами 468х60 пікселів вже зробили. Ви їх просто копіюєте з цієї сторінки і зберігаєте в одній папці під різними назвами, найпростіше 1,2,3 у форматі jpg.
Як видно з прикладу, банер зовсім не складний і має всього три кадри.
Далі відкриваємо програму Bannershop GIF Animator 5. При відкритті ставимо відкрити майстер анімації:
Відкривається вікно майстра – ставимо слайд-шоу і натискаємо далі:
У наступному вікні натискаємо кнопку вибору малюнка:
Відкривається стандартне вікно відкриття документів (імпорту малюнків у нашому випадку).
Утримуючи кнопку ctrl , виділяємо раніше збережені наші малюнки, і натискаємо відкрити. З’явиться наступне вікно з імпортом наших малюнків, натискаємо далі:
З’явиться вікно, де нам запропонують встановити час частоти зміни кадрів в секундах. За умовчанням коштує 1 секунда. У нашому прикладі вибираємо 2 секунди. Якщо Ви будете робити більше кадрів, час можна зменшити. Воно може бути і менше 1 секунди.
Натискаємо далі і в наступному вікні – готово.
Отримуємо такий результат:
Натиснувши на зелену стрілочку в панелі керування, нашу роботу перед збереженням можна програти. Сподобалося? Зберігаємо. Для цього натискаємо File – SaveGIFanimation.
Скільки секунд пройшло? Це все!
Відкриваємо і милуємося.
Само-собою, це найпростіший варіант. Якщо буде бажання покопатися в цій програмці, скоро Ви виявите та освоїте її гідні переваги.
Можна і так, тепер Ви вже розумієте, як це зробити:
Я навів цей опис на прикладі банера мого сайту. Можете розмістити його на своєму сайті. Буду Вам вдячний. Надсилайте так само і свої вдалі роботи з поясненнями, я буду доповнювати ними цю статтю.
Дякую за увагу.
Оригінал