Программа Фотошоп используется обычно для работы с изображениями – растровыми и векторными. Однако последние версии позволяют создавать в ней и анимированные GIF-картинки. Да, сделать полноценный видеоролик будет очень сложно, но справиться анимацией баннера или нескольких картинок вы сможете без особых трудностей.
Как создать анимацию в Adobe Photoshop
Эта программа не может похвастаться расширенным набором функций, как тот же After Effects, поэтому сложную анимацию нужно делать именно в программах, которые предназначены для этих целей. Инструментария Фотошопа вполне хватит, чтобы сделать несложную анимацию – заставить появляться текст или другой элемент, двигать примитивные объекты на картинки и т.д.
Собственно, в ходе этой статьи мы и рассмотрим, как это можно реализовать на конкретном примере. Для удобства восприятия поделим процесс на отдельные этапы, каждому из которых будет дана инструкция.
Этап 1: Подготовка рабочей области
Изначально стоит определиться, с каким документом вы будете работать. Делать анимацию лучше всего в уже готовом документе, где расставлены все элементы и при этом они выделены в отдельные слои. Если у вас есть таковой документ в формате PSD или PDF (редактируемые форматы Фотошопа), то можете просто открыть их в рабочей области:
- Запустите программу. Если у вас новая версия Photoshop, то на стартовом экране просто нажмите кнопку «Открыть».
- Если такой кнопки нет, то в верхнем меню воспользуйтесь пунктом «Файл».
- При нажатии на него открывается контекстное меню, где вы можете выбрать вариант «Открыть». Вместо этих действий также можно использовать комбинацию клавиш Ctrl+O.
- Будет запущено окно «Проводника» Windows, где вам нужно будет указать расположение открываемого файла. После того как вы это сделаете нажмите на кнопку «Открыть».
- Документ открыт и готов к работе.
Если же у вас нет готового документа, то создайте его с нуля. Делается это по следующей инструкции:
- При запуске программы нажмите на кнопку «Создать», которая расположена в стартовом интерфейсе. Это актуально для новых версий Photoshop. Если вы пользуетесь старыми версиями, то у вас может не быть этой кнопки.
- В качестве альтернативы кликните по варианту «Файл», что расположен в верхнем меню программы.
- Из контекстного меню выберите вариант «Создать». Можете вместо этого просто использовать комбинацию клавиш Ctrl+N.
- Откроется окошко настройки документа, где потребуется выставить следующие параметры:
- Имя документа. Его можно оставить как есть и сменить уже при сохранении. Программа не даёт никаких ограничений на использование символов кириллической и других раскладок;
- Размер холста. Анимированные изображения обычно создаются для веб-использования, то есть демонстрации на каких-то сайтах, поэтому весь размер рекомендуется устанавливать в пикселях. Сколько именно пикселей задавать решать вам;
В новых версиях Фотошопа уже есть заготовленные заранее шаблоны размеров для использования в интернет-пространстве. Они расположены во вкладках «Для интернета», «Мобильное устройство» и «Фильмы и видео». Вам останется только выбрать готовый присет и настроить его под свои нужды.
- «Монтажные области» можно отключить, так как они используются для разработки многостраничного дизайна сайтов и приложений;
- «Разрешение». Здесь ставьте 72 пикселя на дюйм. Больше вам не нужно;
- «Цветовой режим» установите RGB на 8 бит;
- «Содержимое фона». Его можно оставить белы по умолчанию, сделать прозрачным или залить каким-то своим цветом.
- Закончив с настройками документа кликайте по кнопке «Создать».
Стоит заметить, что если вы создаёте документ с нуля, то вам изначально в нём потребуется расставить объекты на слоях в обычном режиме, а только потом переходить к их анимации. В примере в этой статье будет рассматриваться дизайн-макет начальной страницы веб-сайта. На нём уже все элементы расставлены по слоям и расгруппированны для удобства. Если вы создаёте что-то с нуля, то рекомендуем вам сделать так же.
Этап 2: Группировка элементов
Этот этап можно назвать необязательным, но если вы его выполните, то это здорово может помочь в дальнейшей работе при создании анимации, да и вообще при обработке содержимого. Если у вас есть PSD-документ, то элементы в нём обычно уже разбиты на слои, правда, эти слои могут стоять в разноброс и не всегда понятно, к какому элементу относится тот или иной слой. Чтобы избежать путаницы, нужно разбить все эти объекты по соответствующим группам, а слоям дать названия.
Итак, посмотрим, как это делается:
- В качестве стартового шаблона имеется дизайн-макет экрана некого сайта тур-фирмы. Для примера разгруппируем элементы в нём. По умолчанию они разделены на слои, которые имеются стандартные обозначения. Начнём с карточек, которые расположены в нижней части. Чтобы увидеть слой нужного объекта в панели слоёв, кликните по нему правой кнопкой мыши с зажатой клавишей Alt.
- Карточка состоит из нескольких элементов, поэтому для удобства каждый выделенный элемент лучше как-то назвать. Чтобы это сделать, просто нажмите два раза левой кнопкой мыши по названию слоя и впишите новое. Допускается использование русских букв.
- Теперь по аналогии с первым и вторым шагом провыделяйте и проназывайте элементы карточки.
- Чтобы они не путались в списке со слоями, их можно отправить в отдельную группу. Для этого выделите слои с элемента в панели слоёв. Чтобы сделать выделение нескольких штук, просто жмите по ним левой кнопкой мыши с зажатой клавишей Ctrl.
- Выделенный элементы добавьте в новую группу. Делается это нажатием на иконку папки, расположенной в нижней части вкладки со слоями.
- Была создана группа с элементами. Если у вас таких групп предполагается много, то дайте каждой из них название, чтобы не запутаться. В нашем случае сделаем группировку только для карточек.
Читайте также:
5 онлайн сервисов для быстрого и качественного сжатия GIF
Анимирование фотографий
Как вырезать объект в Фотошопе (Photoshop) «Пером» — инструкция
Как создать логотип с помощью Adobe Photoshop
Благодаря разбивки по группам, мы теперь можем производить операцию сразу над всем сложным объектом, состоящим из нескольких слоёв (в данном случае это карточка), просто выделив созданную группу. Таким образом нам не придётся задавать анимацию для каждого отдельного элемента карточки, если нужно проанимировать её всю. Также разбивка по группам позволяет навести порядок в рабочей области документа.
Этап 4: Создание анимации
Когда все подготовительные работы завершены, можно заняться и созданием самой анимации. Здесь нет ничего сложного и всё настраивается в несколько движений:
- Изначально вам нужно открыть инструменты, отвечающие за создание анимации в Фотошопе. Для этого нажмите на кнопку «Окно», расположенную в верхней части программы.
- Из контекстного меню выберите вариант «Шкала времени».
- Её вполне будет достаточно, но если вам требуется открыть более профессиональные инструменты для работы с анимацией в Фотошопе, то воспользуйтесь вариантом «Рабочая среда» и далее «Движение».
- Теперь в шкале времени нажмите на кнопку «Создать шкалу времени для видео». Это необходимо, чтобы запустить инструменты для работы с анимацией.
- Ниже будут представлены все слои и группы, которые есть в документе и которые могут быть проанимированы.
- В нижней части таймлайна нажмите на кнопку, отвечающую за создание покадровой анимации объекта. Для удобства нужная кнопка отмечена на скриншоте.
- Будет создан пока только один кадр со статичной анимацией. Чтобы «оживить» её, нужно добавить несколько других кадров. Для этого воспользуйтесь соответствующей иконкой на панели инструментов шкалы времени. В зависимости от ваших требований создайте определённое количество кадров. Чем их больше, тем плавней можно сделать анимацию, однако при слабом железе большое количество кадров может вызвать тормоза.
- Для каждого кадра требуется задать анимацию. Первый кадр трогать не нужно, так как анимация там уже задана по умолчанию. На втором кадре сместите карточку чуть ниже, так как в примере делается анимация исчезающей карточки.
- На третьем и четвёртом кадре проделайте аналогичные действия, чтобы карточка ушла полностью за экран.
- Проиграйте получившуюся анимацию с помощью кнопки Play. При необходимости внесите в неё определённые корректировки.
Вы сделали основную анимацию, однако она получилась рваной и смотрится не очень красиво. Если требуется её улучшить, воспользуйтесь некоторыми советами:
- В кадрах с анимацией везде установите нулевую задержку. Дело в том, что Фотошоп может присваивать кадрам небольшую задержку в секунду, пол секунды. Для этого нажмите на цифру в карточке кадра, что указана на скриншоте и выберите в контекстном меню вариант «Без задержки»;
- Также анимацию можно разбавить дополнительными кадрами. Для этого в панели инструментов шкалы времени кликните по отмеченной ниже иконке. Далее откроется панель настроек, где будут представлены следующие элементы:
- «Промежуточные кадры». Тут выберите, перед каким кадром вы хотите их установить. По умолчанию ставится значение «Следующий кадр», в большинстве случаев оно вам подойдёт;
- «Добавить кадров». Фотошоп изначально добавит 5 кадров, но вы можете указать большее их количество;
- «Слои». В этом блоке задаются слои, на которые будут распространяться промежуточные кадры. По умолчанию выбираются все слои в кадре, но вы можете сделать так, чтобы он распространялся только на выделенные в данный момент, поставив переключатель;
- «Атрибуты слоя». Здесь указывается, на какие параметры анимации нужно обращать при создании промежуточных кадров. По умолчанию все галочки активны.
Этап 5: Сохранение анимации
Теперь, когда всё готово, сохраните полученный результат. Сделайте это правильно, чтобы анимацию можно было просмотреть в последствии:
- В верхней части интерфейса программы воспользуйтесь кнопкой «Файл». Из контекстного меню выберите вариант «Сохранить как».
- Откроется «Проводник» Windows, где потребуется выбрать расширение для сохраняемого файла, а также директорию на диске, куда вы планируете его сохранить. Для использования в веб-пространстве выбирайте в поле «Тип файла» вариант GIF.
- Нажмите на кнопку «Сохранить» и ждите завершения процесса. Обычно он занимает не более пары секунд.
- Также рекомендуется сохранить отдельный PSD-файл документа. Этот файл можно будет открыть в Фотошопе и внести корректировки в анимацию при необходимости. В нём сохраняются все слои и параметры анимации. Сохраняется документ в PSD аналогичным образом.
В ходе данной статьи были рассмотрены основные приёмы для создания анимации объектов в Adobe Photoshop. Если у вас есть какие-то вопросы по поводу содержания статьи, то оставляйте их в комментариях. Мы постараемся ответить на них в ближайшее время.
