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

Відкрийте в Adobe Photoshop картинки, які, за вашою задумом, повинні один одного замінювати: натисніть пункт меню «Файл» «Відкрити», у вікні виберіть файли і натисніть «Відкрити».

Виберіть інструмент «Переміщення» (гаряча клавіша V) і перетягніть одну картинку на іншу. Якщо їх розміри не співпадають, виділіть шар з проблемними розмірами і натисніть Ctrl + D, щоб викликати команду вільної трансформації. Використовуючи маркери у вигляді прозорих квадратиків по сторонам і кутках шару, вирівняйте картинку. Тепер одна картинка повинна перебувати поверх іншої.

Натисніть пункт меню «Вікно» -gt; «Анімація». У нижній частині програми відкриється нове вікно, в якому вже знаходиться один кадр. У нижній частині кадру знаходиться показник, який відображає час, який він буде активним. Поміняйте цей параметр на 0,1 сек. Натисніть на кнопку «Створення копії виділених файлів», після чого у вікні з`явиться ще один кадр на додачу до вже існуючого.

Переконайтеся, що в списку шарів у вас виділений верхній шар (картинка, яку ви перетягнули). На панелі «Шари» в поле прозорість встановіть 0%. Тепер на робочій області видно тільки нижній шар.

Виділіть другий кадр і натисніть кнопку «Створення проміжних кадрів» на панелі анімації. У вікні в полі «Додати кадрів» поставте, наприклад, 7. У вікні анімації з`являться додаткові 7 кадрів, що відображають перехід від кадру з прозорістю 100% до кадру з прозорістю 0%.

Створіть ще один кадр, натиснувши «Створення копії виділених файлів». Перейдіть на панель шари і встановіть в поле прозорість 100%. Натисніть на «Створення проміжних кадрів» і знову впишіть цифру 7 в поле «Додати кадрів». Анімація готова - можете натиснути на кнопочку Play і переконатися. Тепер одна картинка змінює іншу.

Щоб зберегти результат, натисніть Alt + Shift + Ctrl + S, у вікні, в графі «Параметри переглядів» вкажіть постійно і натисніть "Зберегти". У наступному вікні вкажіть шлях для файлу, його ім`я і натисніть «Зберегти».