Однією з растрових анімацій є анімація, що зберігається у файлах форматів GIF та WebP. Для створення малюнків для растрової анімації можна використовувати такі редактори растрової графіки, як Paint, Krita, Adobe Photoshop, GIMP, Paint.NET, Corel Photo-Paint та ін.
Уміст файлів форматів GIF та WebP відтворюється автоматично практично всіма сучасними браузерами. Файли з GIF-анімацією широко використовують для відтворення на сторінках вебсайтів різноманітних анімацій, наприклад рекламних банерів.
Одним із способів створення GIF- чи WebP-анімації є її створення з набору растрових графічних зображень і за допомогою онлайн (наприклад, https://ezgif.com/maker) або офлайн (наприклад, PhotoScape X) програмного середовища.
Рис.1. Послідовність растрових зображень
Для створення растрової анімації з набору растрових зображень та за допомогою онлайн-сервісу створення GIF- або WebP-анімації слід:
1. Створити серію малюнків, які є фіксацією руху об'єкта, і зберегти кожен малюнок в окремому файлі. (Рис.2).
Рис.2. Серія малюнків руху коня з вершником
2. Відкрити у браузері сайт для створення GIF-анімації, наприклад https://ezgif.com/maker.
3. Завантажити на сайт файли вибраних малюнків, для чого слід вибрати кнопку Вибрати файли , вибрати потрібні файли на носії даних і натиснути кнопку Завантажити і створити GIF.
4. Змінити за потреби послідовність зображень в анімації перетягуванням ескізів у центральній частині вебсторінки.
5. Установити значення властивостей GIF-анімації в області під вставленими зображеннями (рис.3):
- установити за потреби для кожного окремого кадра значення властивостей:
- тривалість показу кадру (у сотих долях секунди) - поле Затримка;
- виключення кадру з анімації - кнопка Пропустити;
- створення копії кадру - кнопка Копія;
- установити за потреби діапазони кадрів, які буде виключено з анімації, - лічильники Перемкнути діапазон кадрів і кнопки Пропустити, Увімкнути;
- установити за потреби однакову тривалість показу всіх кадрів - поле з лічильником Час затримки;
- кількість повторень анімації - поле Кількість циклів (за пустого поля анімація повторюється постійно - безперервний цикл).
6. Вибрати кнопку Зробіть GIF!

Рис.3. Налаштування значень властивостей GIF-анімації
Після створення GIF-анімації вона буде відтворена у вікні та цій самій вебсторінці. Можна відредагувати створену анімації за допомогою інструментів редагування (рис.4) та зберегти на носії, вибравши кнопку Зберегти
.

Рис.4. Інструменти редагування анімації та її збереження із сервісу ezgif.com
Такий спосіб створення GIF-анімації можна здійснити також з використанням програм PhotoScape X, Easy GIF Animator, SSuite Gif Animato, Gifted Motion або UnFREEz та ін.
Вікно програми PhotoScape X із завантаженими малюнками подано на рис.5. Завантажити програму можна безкоштовно із сайту розробників (http://www.photoscape.org/ps/main/index.php) або з Microsoft Store.

Рис.5
Для створення GIF-анімації в цій програмі слід:
1. Запустити програму на виконання.
2. Вибрати у верхньому рядку вкладку Create GIF.
3. Вибрати кнопку OPEN
і завантажити потрібні файли.
4. Установити потрібні значення тривалості показу кадрів:
- однакове для всіх - вибором кнопки
(Тривалість) установити тривалість показу, потім натиснути кнопку Apply to all (Застосувати до всіх);
- окремо для кожного кадру - вибором цього кадру та встановленням потрібного значення у лічильнику або повзунку Duration.
5. Установити потрібні розміри зображення - вибором потрібного перемикача у групі Size (px) і з використанням списків цієї групи.
6. Додати за потреби текст до зображення - у полі Type to enter text.
7. Зберегти створену GIF-анімацію у файлі, вибравши кнопку SAVE
.
Програми, які мають засоби для створення самих малюнків в окремих шарах: Adobe Photoshop, Krita, GIMP та ін.
Програми, що забезпечують створення файлів із GIF-анімацією на основі опрацювання відеофайлів: QGifer.
Програми, що використовують техніку поступового перетворення одного растрового зображення в інше: FotoMorph.
Джерела:
Інформатика : підруч. для 7-го кл. закл. заг. серед. освіти / Йосиф Ривкінд [та ін.]. — Київ : Генеза, 2024.