Діма Зубков
3 390
Не так давно всі браузери відмовилися від технології Flash і перейшли на HTML5. Всім відомо, що HTML5 підтримує роботу анімації на мобільних пристроях і, в цілому, потреба в GIF заглушках зникла. Але іноді, все ж виникає потреба переробити векторну анімацію в растрову. Сьогодні ми покажемо вам найбільш вдалий і швидкий варіант конвертації HTML5 банера в GIF.
Щоб растрова анімація була максимально якісною, ми будемо використовувати програму Honeycam. Зверніть увагу, що free версія має обмеження записи в 10 секунд. Якщо ви не хочете платити гроші за повну версію, то це легко обійти застосовуючи свіжу версію Adobe Photoshop.
Завдання: конвертувати готовий HTML5 банер в GIF і розмістити його в портфоліо на сайті https://www.fl.ru/users/Obelix2000/
Для роботи нам знадобиться
- Готовий HTML5 банер;
- Програма Honeycam.
етапи конвертації
Відкриваємо програму Honeycam, натискаємо на кнопку «Запис».
Встановлюємо розмір запису екрану. Значення FPS рекомендуємо ставити 20-25, це не сильно зіпсує плавність анімації, але добре скоротить вага банера. Увага! Ми в студії використовуємо платну версію програми і вам рекомендуємо її купити. Але якщо ви використовуєте безкоштовний функціонал, то зверху з'явиться водяний знак. В такому випадку, розмір записуваної області ви встановлюєте більше, для того щоб в подальшому обрізати водяний знак у фотошопі.
Натискаємо на кнопку «Запис» і чекаємо щоб анімація на банери програла від початку і до кінця. Увага! Якщо банер більше 10 секунд, а у вас безкоштовна версія, записуйте анімацію частинами, в подальшому ви склеїти її в фотошопі.
Відкриваємо отриманий файл в фотошопі. У «шкалою часу» видаляємо непотрібні нам кадри, щоб початок і кінець анімації збігалися.
Якщо у вас є водяний знак, підрізаємо банер до потрібного нам розміру (див. Пункт 2).
Зберігаємо банер за допомогою поєднання клавіш shift + ctrl + alt + s або файл / зберегти для web. Вибираємо формат GIF, 256 кольорів (можна менше, залежить від необхідної якості кінцевої гіф анімації). Робимо циклічне відтворення.
Насолоджуємося результатом.
Корисно знати
- Основним мінусом GIF анімації є його вага. Вважається нормальним, якщо збережений вами файл буде важити не більше 3Мб, але чим менше тим краще;
- Для того, щоб експериментувати з якістю картинки і її вагою, використовуйте параметри фотошопа у вкладці «файл / зберегти для web». А також, користуйтеся функціоналом програма Honeycam.
І наостанок порада. Робіть якісне портфоліо, для того, щоб працювати з найкращими клієнтами.
