Пятница , 20 Октябрь 2017
Главная / Веб дизайн и фотошоп / Как создать анимацию в фотошопе

Как создать анимацию в фотошопе

Расскажу вам достаточно простой способ как создать анимацию в программе Photoshop. Ничего сложного в этом нету, тем более в версиях фотошопа начиная с 8 не надо пользоваться программой ImageReady, все функции итак включены.

Анимация в фотошопе сохраняется в формате gif.
Покажу вам на примере создания баннера 457×200.

Шаг 1. Открываем Photoshop, создаем новый файл 457×200 File>New.

Создать новый
Включаем меню анимации в Window>Animation, если у вас еще не включено
включаем меню
У вас должно появится следующее окошко Animation (Frames)
Включаем меню анимации
В этом окне у вас отображаются frames ( фреймы / слайды), то есть раскадровка вашей анимации. С ней то мы и будем работать.

Шаг 2. Делаем анимацию, я сделаю на примере простой анимации движущегося текста Syblog.ru
Создаем или перемещаем на картинку ваше изображение новым слоем поверх Background
надпись
Перемещаем слой в самую левую часть документа
сдвигаем
Шаг 3. Делаем дубликат первого кадра с помощью кнопки в меню Animation
duplicate frame
Выбираем новый кадр и перемещаем слой в самую правую часть документа
надпись справа
Шаг 4. Жмем кнопку Tweens Animation Frames на меню Animation и прописываем нужное количество раскадровки (у меня 5 кадров)
кнопка motion tween

motion_tween
В итоге у вас получится 7 кадров, если нажать кнопку Play в меню анимации то можно проследить что текст начал передвигаться плавно слева на правую часть.
Скорость анимации выставляется с помощью задержки под кадром, в мс, чем больше задержка тем больше времени идет кадр, я оставлю всё как есть
задержка
Шаг 5. Сохраняем файл анимации в формате гиф, заходим File>Save for Web & Devices
меню-save-for-web-devices
Устанавливаем необходимые параметры сжатия, вот мои параметры:
save-for-web-devices
И жмем кнопку Save, вот результат:
Как создать анимацию в фотошопе
Далее с помощью кадров и фильтров вы научитесь делать более сложную анимацию, тут главное практика и настойчивость, это дело увы очень много времени занимает.

Анимация в фотошопе

25 комментариев

  1. Гагарин

    И правда НЕ РАБОТАЕТ! Если делать просто перемещение на втором кадре, то все работает, а если изменять масшаб текста, то он меняется НА ВСЕХ кадрах. Хрень короче, а не урок.

    • Чтобы делать анимацию с увеличением надо дублировать слой и в ручную делать увеличение по кадрам. Тут показана простейшая анимация передвижения!

  2. Николай

    Спасибо автору. Всё очень просто. Перекопал много уроков по данной теме в нете, но там ни чего не понятно.
    А тут всё просто. Сразу была проблема: второй кадр изменяю, и меняются все, но вроде разобрался. Спасибо!!!

  3. Добрый день! Не могу понять как я могу передать анимацию в этом формате. Может я не так сохраняю?
    Мне необходимо послать на e-mail для участия в конкурсе

  4. Спасибки Автору . сС Уважением Р.Н. Денишев.

  5. Татьяна

    У меня 8-й фотошоп, но animation там нет в меню Windows. Пойду в ImageReady копаться

  6. Респект аффтору

  7. норм все получилось,автро спс

  8. ©ШвЕц АрTёМ

    Save for Web & Devices у меня не доступно (серое)… что делать… не могу сохранить?

    • ©ШвЕц АрTёМ

      Разобрался)) был высокий бит/канал
      Поставил 8 бит/канал и сохранилось)

  9. Всё получается, а если наложить на прозрачный фон, так и сохраняется

  10. О кул! Решил сделать маленькую анимацию, начал искать проги. Но оказалось все просто, ведь у меня есть Фотошоп. Спасибо!

  11. ppp, у меня та же проблема. вроде все правильно делаю, но когда двигаю второй, то и первый двигается. ПОМОГИТЕ ПРОШУ

  12. ничего не получаеться с кадрами(
    создаю первый…делаю дубликат переношу слово и на первом кадре слово тоже переноситься(
    что делать епт?

  13. когда я изменяю первый фрейм у меня изменяются и остальные, в чем дело, помогите

    • Во первых в уроке написано что двигать нужно как раз второй кадр, первый кадр двигает по умолчанию всё сразу, двигайте слой на втором!

  14. спасиба, получилось =)

  15. Яна красотка

    Как сделать тоже анимашу?=)???

  16. АЮБДЖОН

    А-Л-О! КТО АВТОР? ОН ПРОСТА МОЛОДЕЦ! ВОТ МОЙ ДРУГ РЕКОМЕНДАВАЛ ЭТОТ САЙТ И КАЖЕСЯ ЭТОТ САЙТ КЛЁВЫЙ! СПС АВТОР! НАУЧИ НАС ЕЩЁ ЧЕМ НЕБУДЬ! КТО С МНОЙ?

  17. ^_^.
    спасибо вам ОГРОМНОЕ!

  18. о_О автор спасибо огромное все отлично получилось;)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

7 − один =