Как сделать меняющиеся картинки на сайте?

Существует несколько форматов анимированных картинок и один из них – GIF (от англ. Graphics Interchange Format или говоря по-русски, формат для обмена изображениями). Создать анимацию в этом формате можно при помощи Adobe Photoshop.
Создать сайт самостоятельно с Wix.com

Вам понадобится

• - русифицированная версия Adobe Photoshop CS5.

Инструкция

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

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

Нажмите пункт меню «Окно» -> «Анимация». В нижней части программы откроется новое окно, в котором уже находится один кадр. В нижней части кадра находится показатель, который отображает время, которое он будет активным. Поменяйте этот параметр на 0,1 сек. Кликните на кнопку «Создание копии выделенных файлов», после чего в окне появится еще один кадр вдобавок к уже существующему.

Убедитесь, что в списке слоев у вас выделен верхний слой (картинка, которую вы перетянули). На панели «Слои» в поле прозрачность установите 0%. Теперь на рабочей области виден только нижний слой.

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

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

Чтобы сохранить результат, нажмите Alt+Shift+Ctrl+S, в открывшемся окне в графе «Параметры просмотров» укажите постоянно и кликните «Сохранить». В следующем окне укажите путь для файла, его имя и нажмите «Сохранить».

Оцените статью!