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

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

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

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

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

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

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

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

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

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

1. Размещаем рамку и саму надпись на разных слоях. Фон на обоих слоях должен быть прозрачный.

   

2. Переходим на шкалу времени, где нажимаем кнопку “Создать временную шкалу для видео”.

   

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

   

4. Вариантов анимации может быть множество. Мы попробуем сделать ее по следующему сценарию: сначала появляется рамка, затем надпись – слева направо.
5. Начнем с рамки. Щелкаем по небольшой стрелке рядом с правым верхним углом миниатюры слоя.

   

6. В левой части шкалы отобразятся свойства выбранного слоя. Здесь мы щелкаем по значку в виде секундомера рядом с параметром “Непрозр.”. 

   

7. После этого на шкале отобразится ключевой кадр, или, другими словами, ключ в виде желтого ромбика.

   

8. Теперь нам нужно настроить состояние слоя для этого ключа. Согласно нашей задаче, рамка должна возникнуть плавно, следовательно, в начале ее не должно быть видно. Поэтому в редакторе слоев устанавливаем непрозрачность слоя на уровне 0%.

   

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

   

10. Для этого ключа в палитре слоев задаем непрозрачность на уровне 100%.

    

11. У нас есть возможность проверить эффект, двигая ползунок или используя управляющие воспроизведением кнопки в верхней левой части шкалы.

    

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

    

13. Итак, появление рамки сделали и можно переходить к тексту.
14. Сдвигаем ползунок на шкале немного правее последнего ключа, когда рамка уже полностью видна.
15. В палитре слоев создаем новый, заливаем его белым цветом.

    

16. После этого нужно немного изменить расположение слоев. В самом верху должен располагаться слой с рамкой, затем – с белой заливкой, и после – с текстом.

    

17. На холсте выравниваем левую границу белого фона с началом текста.

    

    Для этого нам понадобится инструмент “Перемещение”, который можно выбрать на боковой панели. 

    

18. На шкале времени начало всех слоев должно быть выровнено.

    

19. Сдвигаем ползунок вперед и устанавливаем чуть правее конечного ключа слоя с рамкой. Открываем свойства слоя с белым фоном. Щелкаем по значку в виде секундомера рядом с параметром “Позиция”. Таким образом мы установим ключ для начальной позиции.

    

20. Сдвигаем ползунок вперед и создаем еще один ключ-позицию.

    

21. Взяв инструмент “Перемещение”, на холсте сдвигаем слой с белым фоном вправо, чтобы весь текст стал видимым.

    

22. Методом сдвига ползунка (или кнопок управления воспроизведением) проверяем, правильно ли работает созданная анимация.

    

    Если требуется, можно внести финальные корректировки в дорожки – сместить ключи, чтобы, например, отредактировать скорость появления букв и т.д.
23. Теперь нужно обрезать лишнюю часть анимации. Для этого, зажав левую кнопку мыши, тянем правый конец любой дорожки влево до той длительности, которая нам нужна.

    

24. Аналогичные действия выполняем по отношению к другим дорожками.

    

25. Переходим в меню “Файл”, выбираем пункт “Сохранить для Web”, чтобы сохранить анимацию.

    

26. Формат, который нам нужен – GIF. В качестве параметра повтора выбираем значение “Постоянно” и жмем кнопку “Сохранить”.

    

27. Выбираем папку для сохранения, указываем имя файла и снова щелкаем “Сохранить”.

    

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

    

Заключение

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

Источник