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

2 ноября 2014 г. Просмотров: 1966 Инструкции
Существует несколько форматов анимированных картинок и один из них – 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, в открывшемся окне в графе «Параметры просмотров» укажите постоянно и кликните «Сохранить». В следующем окне укажите путь для файла, его имя и нажмите «Сохранить».
  • Оцените статью!