Урок 2. Как создать анимацию в фотошопе? Или плавное появление надписи…

анимация в фотошопе, как сделать анимацию в фотошопе, как сохранить анимацию в фотошопе, как создать анимацию в фотошопе

Здравствуйте, читатели моего блога!

Вот как и обещал, уроки фотошоп продолжаются!

Сегодня мы обсудим такой вопрос: «Как создать анимацию в фотошопе?».  Я попробуй дать вам подробную инструкцию по созданию анимации. А в конце предоставлю небольшой видеоурок…

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

Как сделать анимацию в фотошопе: что она под собой подразумевает и сложно ли это?

Делать анимацию в фотошопе довольно просто, если знать как ее делать=) Но а если честно, то попробовав один раз, вы все будете делать с закрытыми глазами… Именно в этой статье, под моим четким руководством вы научитесь делать анимацию без каких либо проблем!

Анимация, мы станем настоящими аниматорами?

Наша анимация — это плавное появление надписи, которое мы будем делать с помощью инструмента Анимация в фотошопе, именно этим мы и займемся. Сегодня вы сможете побывать в роли начинающего аниматора=)

Ну что начнем?

Для начала определимся, что нам нужно! А нужен нам фотошоп: не важно какая версия. Можете воспользоваться версией, которой пользуюсь я, скачать можете тут!

Открываем программу фотошоп и выводим вкладку анимация на рабочую среду: Окно — Анимация. В моей версии программы эта вкладка называется Шкала времени, поэтому я делаю так (ставим галочку):

анимация в фотошопе, как сделать анимацию в фотошопе, как сохранить анимацию в фотошопе, как создать анимацию в фотошопе

В итоге у вас появится вот такая панель внизу:

анимация в фотошопе, как сделать анимацию в фотошопе, как сохранить анимацию в фотошопе, как создать анимацию в фотошопе

P.S. Я ее немного обрезал…

Ну а теперь с помощью вкладок Файл — Создать…, или нажатием на клавиши CTRL+N — создаем новый файл. Выставляем размеры, жмем ок и пишем наш текст, с которого будем делать анимацию. У меня вот что получилось:

анимация в фотошопе, как сделать анимацию в фотошопе, как сохранить анимацию в фотошопе, как создать анимацию в фотошопе

P.S. Это я немного с деформацией поигрался=)

Этот кадр автоматом стает в нашу Шкалу времени, ставим его на скорость 0,1 сек и с помощью Создание копии выделенных кадров создаем еще 10 (это зависит от того как вы будете выставлять прозрачность — дальше посмотрите и все поймете):

анимация в фотошопе, как сделать анимацию в фотошопе, как сохранить анимацию в фотошопе, как создать анимацию в фотошопе

P.S. Это уже готовая картинка.

На первом кадре отключаем картинку (нажмите на вторую картинку и в слоях отключите видимость слоя — надпись, и данную картинку перетяните на первое место). В итоге, у меня 10 кадров со скоростью по 0,1 сек, а последний (11 кадр) — 1 сек.

На второй картинке текст должен быть включен, меняем только прозрачность: в слоях правой кнопкой мыши делаем клик по слою с надписью, выбираем вкладку — Параметры наложения…

В Основные параметры — Непрозр. ставим 10%. Такие действия повторяем с каждым кадром, увеличивая прозрачность: второй — 20 %, третий — 30% и т.д., пока не дойдем до 100% — финальный кадр (именно из-за того как вы будете использовать прозрачность зависит количество кадров).

Также, в Параметрах наложения можете попробовать использовать дополнительные фишки (просто нужно поставить галочку и результат перед вами).

Остальные кнопки Шкалы времени я не объясняю: думаю, кнопка play и другие вам знакомы… (чтобы просмотреть, что за кнопка перед вами — просто наведите курсором мыши на нее и у вас перед глазами появится надпись с обозначением)

Вот и все, осталось только сохранить наш небольшой проект под кодовым названием «Анимация в фотошопе«!

Как сохранить анимацию в фотошопе?

Для того чтобы сохранить нашу анимацию открываем меню Файл — Сохранить для Web… (Alt+Shift+Ctrl+S):

анимация в фотошопе, как сделать анимацию в фотошопе, как сохранить анимацию в фотошопе, как создать анимацию в фотошопе

Выбираем формат Gif (он там уже автоматом стоит) и жмем Сохранить… (выбираем путь сохранения, к примеру — рабочий стол), Все анимация сохранилась=)

анимация в фотошопе, как сделать анимацию в фотошопе, как сохранить анимацию в фотошопе, как создать анимацию в фотошопе

P.S. С анимации можно убрать фон — удалив слой «Фон» (но у меня он сливается с шаблоном)

Я думаю, тут и без видеоурока все понятно… Но все равно, как и обещал, вот смотрите:

 На сегодня все, пока!

С уважением, ваш любознательный Ежик!

Понравилась статья? Поделиться с друзьями:
Комментариев: 26
  1. Артём Черкасов

    Хороший урок, правда мне это не нужно =)

  2. Ирина Жигалова

    Я что-то думала, что ФШ только для статики, а тут легко можно делать гифки. Спасибо, Влад, за урок.
    У меня в планах научиться делать подобные штуки. Так что урок сохраню в папочку с полезными фишками.

    Влад, а с векторной графикой ФШ как-то можно подружиться? Например, чтобы сделать коллаж из клипарта?

    1. Vlad Lemishko (автор)

      Векторное изображение больше похоже на нарисованное, в основе построения лежит линия (или вектор)…

      Клипарт — это изображение на прозрачном фоне, которое можно использовать для создания коллажа или других работ. Клипарт может быть полупрозрачным и непрозрачным, состоять из одного объекта или нескольких.

      Думаю, все возможно!=)

    2. Кирилл

      В последних версиях фотошопа есть поддержка векторной графики, но всё же для этого лучше всего использовать Adobe Illustrator. В нём намного больше возможностей для работы с вектором.(adobe.com/ru/products/illustrator.html)

      1. Vlad Lemishko (автор)

        Да, я недавно смотрел видеозапись, так вот для векторной графики советуют специальные программы, с хорошим выбором=)

  3. Кирилл

    Отличный урок, не так часто приходится работать с анимацией, но всё же иногда это необходимо. Когда понадобится,буду руководствоваться твоей статьёй!
    Кстати, разобрался с отображением анимации на сайте?

    1. Vlad Lemishko (автор)

      Нет, я решил оставить так!

      1. Кирилл

        По моему верное решение. Хоть я не видел как именно всё должно было выглядеть, но анимация очень часто непроизвольно отвлекает внимание от основного контента и тем самым раздражает некоторых пользователей. Ну а это сказывается на поведенческих факторах.
        Хотя если умело её использовать, то можно наоборот акцентировать внимание на определённых частях сайта. =)

        1. Vlad Lemishko (автор)

          Все правильно=)

  4. Лара

    Влад! Отличная статья для моего освоения фотошопа!

  5. Артём Черкасов

    Ненавижу этого кота *CRAZY*

    1. Vlad Lemishko (автор)

      Иногда меня он тоже напрягает=)

      Пока не выиграю, уйти не могу!

  6. Юрий

    Спасибо, теперь буду знать, как делать анимацию:)

  7. Сергей

    Кстати хочу на днях сделать генератор подписки, и картинка на нем наверно будет анимированная =)

    1. Vlad Lemishko (автор)

      Я себе делал анимированную шапку, но отображалась она не во всех браузерах (а точнее — только в Хроме) — пришлось убрать…

      Но, думаю и без нее сейчас все нормально смотрится!

  8. Юлия

    Спасибо за урок! =)

    P.S. Вы там писали, что и без видеоурока все понятно… но для таких начинающих, как и я, без видео никак! :-D

    1. Vlad Lemishko (автор)

      Да не за что! ;)

      В будущем видеоуроки будут более эффективными! =)

      А у вас есть свой блог?

      1. Юлия

        Нету) Мне просто нужно обрабатывать фотографии, но и походу решила просто подучиться)

        1. Vlad Lemishko (автор)

          А было желание создать? =)

  9. Юлия

    Желание есть) Но пока это для меня слишком заоблачно )))

    1. Vlad Lemishko (автор)

      Главное, чтобы желание было! А облака и я могу помочь разогнать! ;)

      1. Юлия

        Да, я знаю, Влад, что Вы можете все =) — читала Ваши «Предложения и услуги» , но только дело не только в технической стороне вопроса =)

        1. Vlad Lemishko (автор)

          «Все» — это громко сказано! =)

          Если весь упор идет в деньги, то могу сделать скидку на создание блога + бесплатная помощь и обучение! ;)

          1. Юлия

            Спасибо =) очень приятно! Но дело не в этом =) Но зато я буду знать, к кому можно обращаться!
            А пока буду продолжать учиться у Вас Фотошопу ;)

          2. Vlad Lemishko (автор)

            Ок! =)

  10. Ольга

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

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: