Как сделать анимацию на свой сайт?

2 ноября 2014 г. Просмотров: 424 Инструкции
Если вам нравятся анимированные элементы на веб-сайтах и вы хотите сделать анимацию на свой сайт, но не хотите мучиться с Flash, существует простое и эффективное решение – анимированный GIF. Для создания анимированных GIF-файлов не требуется наличие навыков программирования или установки специальных плагинов. GIF-анимация это простой набор слайдов (картинок), которые сменяют друг друга через определенный интервал времени.
Проигрывание этих картинок с интервалом в несколько миллисекунд создает эффект движения, подобный тому, когда мы в детстве рисовали на каждой странице блокнота, а потом очень быстро их перелистывали.
Создать сайт самостоятельно с Wix.com

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

  • Компьютер, графический редактор Adobe Photoshop 5 версии и выше, редактор Adobe Image Ready

Инструкция

  • Запустите Photoshop и создайте новое изображение размером 100x100 пикселей. Установите разрешение в 72 пикселя и режим RGB. Выберите опцию Show Layers из пункта меню Window, что включит отображение палитры слоев.
  • В палитре инструментов выберите карандаш и нарисуйте какое-либо изображение. В палитре слоев нажмите Duplicate Layer, что создаст копию уже существующего слоя. Используйте инструмент “резинка”, чтобы стереть какую-либо часть изображения, затем карандашом добавьте изменения. Создайте столько слоев, сколько необходимо в том порядке, в каком они должны сменять друг друга. Каждый слой будет отдельным кадром вашей анимации.
  • Настало время анимировать полученные кадры. В меню File выберите Jump to, а затем Adobe Image Ready. Данное действие перенесет вас в другой графический редактор.
  • В меню Window выберите опцию Show Animation, которая включит отображение палитры анимации. В меню настроек палитры (значок стрелки в правом верхнем углу) выберите функцию Make Frames from Layers, что трансформирует все слои в кадры. Анимация уже почти готова.
  • Пора приступать к настройкам временного интервала. Выделите нужный кадр и в выпадающем меню (слева, внизу) выберите нужный отрезок времени, через который данный кадр сменится другим. Проделайте это с каждым кадром вашей анимации. Когда все будет готово, используйте опцию Save Optimized As, чтобы сохранить ваш первый анимированный GIF. Теперь вы можете использовать его как баннер или декоративный элемент на вашем сайте.
  • Оцените статью!