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

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

Існує декілька форматів анімованих картинок і один з них — GIF (від англ. Graphics Interchange Format або кажучи по-російськи, формат для обміну зображеннями). Створити анімацію в цьому форматі можна за допомогою Adobe Photoshop.

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

- Русифікована версія Adobe Photoshop CS5.

Інструкція

  1. Відкрийте в Adobe Photoshop картинки, які, за вашою задумом, повинні один одного змінювати: натисніть пункт меню «Файл» «Відкрити», в який з’явився вікні виберіть файли і натисніть «Відкрити».
  2. Виберіть інструмент «Переміщення» (гаряча клавіша V) і перетягніть одну картинку на іншу. Якщо їх розміри не співпадають, виділіть шар з проблемними розмірами і натисніть Ctrl + D, щоб викликати команду вільної трансформації. Використовуючи маркери у вигляді прозорих квадратиків по сторонах і кутах шару, вирівняйте картинку. Тепер одна картинка повинна перебувати поверх іншої.
  3. Натисніть пункт меню «Вікно» -> «Анімація». У нижній частині програми відкриється нове вікно, в якому вже знаходиться один кадр. У нижній частині кадру знаходиться показник, який відображає час, який він буде активним. Поміняйте цей параметр на 0,1 сек. Клацніть на кнопку «Створення копії виділених файлів», після чого у вікні з’явиться ще один кадр додачу до вже існуючого.
  4. Переконайтеся, що у списку шарів у вас виділено верхній шар (картинка, яку ви перетягнули). На панелі «Шари» в полі прозорість встановіть 0%. Тепер на робочій області видно тільки нижній шар.
  5. Виділіть другий кадр і натисніть кнопку «Створення проміжних кадрів» на панелі анімації. У вікні в полі «Додати кадрів» поставте, наприклад, 7. У вікні анімації з’являться додаткові 7 кадрів, що відображають перехід від кадру з прозорістю 100% до кадру з прозорістю 0%.
  6. Створіть ще один кадр, натиснувши «Створення копії виділених файлів». Перейдіть на панель шари і встановіть у полі прозорість 100%. Клацніть на «Створення проміжних кадрів» і знову впишіть цифру 7 в поле «Додати кадрів». Анімація готова — можете натиснути на кнопочку Play і переконатися. Тепер одна картинка змінює іншу.
  7. Щоб зберегти результат, натисніть Alt + Shift + Ctrl + S, у вікні, в графі «Параметри переглядів» вкажіть постійно і натисніть «Зберегти». У наступному вікні вкажіть шлях для файлу, його ім’я і натисніть «Зберегти».