Як зробити анімацію на свій сайт

Як зробити анімацію на свій сайт

Якщо вам подобаються анімовані елементи на веб-сайтах і ви хочете зробити анімацію на свій сайт, але не хочете мучитися з Flash, існує просте та ефективне рішення — анімований GIF. Для створення анімованих GIF-файлів не потрібна наявність навичок програмування або установки спеціальних плагінів. GIF-анімація це простий набір слайдів (картинок), які змінюють один одного через певний інтервал часу. Програвання цих картинок з інтервалом в кілька мілісекунд створює ефект руху, подібний тому, коли ми в дитинстві малювали на кожній сторінці блокнота, а потім дуже швидко їх перегортати.

Вам знадобиться

Комп’ютер, графічний редактор Adobe Photoshop 5 версії і вище, редактор Adobe Image Ready

Інструкція

  1. Запустіть Photoshop та створіть нове зображення розміром 100×100 пікселів. Встановіть дозвіл в 72 пікселя і режим RGB. Виберіть опцію Show Layers з пункту меню Window, що включить відображення палітри шарів.
  2. На панелі інструментів виберіть олівець і намалюйте будь-яке зображення. На панелі шарів натисніть Duplicate Layer, що створить копію вже існуючого шару. Використовуйте інструмент «гумка», щоб стерти будь-яку частину зображення, потім олівцем додайте зміни. Створіть стільки шарів, скільки необхідно в тому порядку, в якому вони повинні змінювати один одного. Кожен шар буде окремим кадром вашої анімації.
  3. Настав час анімувати отримані кадри. У меню File виберіть Jump to, а потім Adobe Image Ready. Дана дія перенесе вас в інший графічний редактор.
  4. У меню Window виберіть опцію Show Animation, яка включить відображення палітри анімації. У меню налаштувань панелі (значок стрілки у правому верхньому куті) виберіть функцію Make Frames from Layers, що трансформує всі верстви в кадри. Анімація вже майже готова.
  5. Пора приступати до налаштувань часового інтервалу. Виділіть потрібний кадр і в спадному меню (зліва, внизу) виберіть потрібний відрізок часу, через який даний кадр зміниться іншим. Виконайте це з кожним кадром вашої анімації. Коли все буде готове, використовуйте опцію Save Optimized As, щоб зберегти ваш перший анімований GIF. Тепер ви можете використовувати його як банер або декоративний елемент на вашому сайті.

Корисні поради

Малювати кадри можна прямо в Adobe Image Ready, який має схожий, хоч і біднішим, функціоналом.

Щоб переглянути свою анімацію, натисніть кнопку відтворення на панелі Анімації.