Создание и сохранение анимации в Фотошопе

52

Несмотря на то, что Фотошоп не так часто используется для создания анимаций, в программе, все же, такая возможность существует. Давайте разберемся, как именно это делается.

Подготовительные работы

Анимация будет создаваться на Шкале времени, которая находится в нижней части окна программы.

Шкала времени в Фотошопе

В случае, когда данная шакала отключена, ее можно активировать в меню “Окно”.

Включение шкалы времени в Фотошопе

Если шкала временно не нужна, ее можно свернуть. Для этого щелкаем правой кнопкой мыши по шапке инструмента, в раскрывшемся меню выбираем нужную команду. Либо можно просто дважды щелкнуть по шапке левой кнопкой мыши.

Сворачивание шкалы времени в Фотошопе

Аналогичным образом шкала разворачивается.

Разворачивание шкалы времени в Фотошопе

Создаем анимацию

Теперь, когда мы разобрались, с  помощью какого инструмента мы будем создавать анимацию, и где его найти, переходим непосредственно к нашей основной задаче.

В качестве исходного изображения мы возьмем логотип нашего сайта.

Логотип MyPhotoshop.ru

  1. Размещаем рамку и саму надпись на разных слоях. Фон на обоих слоях должен быть прозрачный.Логотип MyPhotoshop.ru с разбивкой по слоям в Фотошопе
  2. Переходим на шкалу времени, где нажимаем кнопку “Создать временную шкалу для видео”.Создание шкалы времени для видео в Photoshop
  3. В итоге мы получим такой результат. Верхнюю границу шкалы можно сдвинуть вверх с помощью зажатой левой кнопки мыши, чтобы вместить всю информацию. Как мы видим, оба слоя, за исключением фонового, появились здесь в виде отдельных дорожек.Слои на шкале времени в Фотошопе
  4. Вариантов анимации может быть множество. Мы попробуем сделать ее по следующему сценарию: сначала появляется рамка, затем надпись – слева направо.
  5. Начнем с рамки. Щелкаем по небольшой стрелке рядом с правым верхним углом миниатюры слоя.Раскрытие свойств слоя на шкале времени в Photoshop
  6. В левой части шкалы отобразятся свойства выбранного слоя. Здесь мы щелкаем по значку в виде секундомера рядом с параметром “Непрозр.”Установка ключа непрозрачности на шкале времени в Photoshop
  7. После этого на шкале отобразится ключевой кадр, или, другими словами, ключ в виде желтого ромбика.Ключ непрозрачности на шкале времени в Фотошопе
  8. Теперь нам нужно настроить состояние слоя для этого ключа. Согласно нашей задаче, рамка должна возникнуть плавно, следовательно, в начале ее не должно быть видно. Поэтому в редакторе слоев устанавливаем непрозрачность слоя на уровне 0%.Непрозрачность слоя в Фотошопе
  9. Перемещаем ползунок шкалы немного вперед и снова создаем ключ. Теперь уже жмем не значок в виде секундомера, а маленький желтый ромбик рядом.Установка ключа непрозрачности на шкале времени в Фотошопе
  10. Для этого ключа в палитре слоев задаем непрозрачность на уровне 100%.Непрозрачность слоя в Photoshop
  11. У нас есть возможность проверить эффект, двигая ползунок или используя управляющие воспроизведением кнопки в верхней левой части шкалы.Проверка анимации на шкале времении в Фотошопе
  12. Если после просмотра эффекта требуется ускорить его появление или, наоборот, растянуть подольше, можно сдвинуть финальный ключ в нужную сторону.Сдвиг ключа на шкале времени в Фотошопе
  13. Итак, появление рамки сделали и можно переходить к тексту.
  14. Сдвигаем ползунок на шкале немного правее последнего ключа, когда рамка уже полностью видна.
  15. В палитре слоев создаем новый, заливаем его белым цветом.Создание нового слоя с белым фоном в Фотошопе
  16. После этого нужно немного изменить расположение слоев. В самом верху должен располагаться слой с рамкой, затем – с белой заливкой, и после – с текстом.Размещение слоев с логотипом MyPhotoshop.ru
  17. На холсте выравниваем левую границу белого фона с началом текста.Сдвиг слоя с белым фоном в PhotoshopДля этого нам понадобится инструмент “Перемещение”, который можно выбрать на боковой панели. Выбор инструмента Перемещение в Фотошопе
  18. На шкале времени начало всех слоев должно быть выровнено.Выравнивание всех дорожек на шкале времени в Photoshop
  19. Сдвигаем ползунок вперед и устанавливаем чуть правее конечного ключа слоя с рамкой. Открываем свойства слоя с белым фоном. Щелкаем по значку в виде секундомера рядом с параметром “Позиция”. Таким образом мы установим ключ для начальной позиции.Установка ключа позиции на шкале времени в Фотошопе
  20. Сдвигаем ползунок вперед и создаем еще один ключ-позицию.Установка финального ключа позиции на шкале времени в Photoshop
  21. Взяв инструмент “Перемещение”, на холсте сдвигаем слой с белым фоном вправо, чтобы весь текст стал видимым.Сдвиг слоя с белым фоном в Фотошопе
  22. Методом сдвига ползунка (или кнопок управления воспроизведением) проверяем, правильно ли работает созданная анимация.Проверка анимации на шкале времении в PhotoshopЕсли требуется, можно внести финальные корректировки в дорожки – сместить ключи, чтобы, например, отредактировать скорость появления букв и т.д.
  23. Теперь нужно обрезать лишнюю часть анимации. Для этого, зажав левую кнопку мыши, тянем правый конец любой дорожки влево до той длительности, которая нам нужна.Изменение длины дорожки на шкале времени в Фотошопе
  24. Аналогичные действия выполняем по отношению к другим дорожками.Выравнивание длины дорожек на шкале времени в Фотошопе
  25. Переходим в меню “Файл”, выбираем пункт “Сохранить для Web”, чтобы сохранить анимацию.Сохранение для Web в Фотошопе
  26. Формат, который нам нужен – GIF. В качестве параметра повтора выбираем значение “Постоянно” и жмем кнопку “Сохранить”.Сохранение анимации в формате GIF в Фотошопе
  27. Выбираем папку для сохранения, указываем имя файла и снова щелкаем “Сохранить”.Сохранение анимации в формате GIF в PhotoshopАнимация в формате GIF работает в веб-браузерах и специально предназначенных для этого программах. С помощью стандартных приложений для просмотра фотографий и изображений воспроизвести анимацию не удастся.
  28. А у нас получился вот такой результат.Анимация логотипа MyPhotoshop.ru

Заключение

Photoshop – это мощный графический редактор, который позволяет не только обрабатывать изображения, имитировать различные эффекты и т.д. В программе также можно сделать анимацию и сохранить ее в популярном формате GIF для дальнейшего использования, например, добавить на веб-страницу.

ОСТАВЬТЕ ОТВЕТ

Введите свой комментарий
Пожалуйста, введите свое Имя