Как сделать GIF анимацию в Photoshop

Сделать анимированную GIF-картинку в Photoshop вполне возможно даже новичку. Photoshop позволяет создавать покадровую анимацию путём смены кадров, а затем сохранять работу в формате GIF.

Что такое покадровая GIF-анимация в Photoshop?

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

Поэтому всегда нужно стремиться свести количество кадров к минимуму. Однако, чем больше кадров будет отражено в секунде анимации, тем плавнее она получится. Обычно не стоит увеличивать количество кадров в секунду свыше 30, так как человеческий глаз не способен различать большее количество. Даже в фильмах и видео используют от 24 кадров в секунду.

Также при создании анимации в Photoshop следует учитывать, что различные устройства и браузеры могут с разной скоростью воспроизводить анимацию с большим количеством кадров в секунду, в зависимости от своих технических возможностей. Например, сотовый телефон может воспроизводить только 10 кадров в секунду. Это значит, что секунда анимации с 30 кадрами на нём будет идти 3 секунды, следовательно, анимация замедлится.

Гибкость настройки кадров

При выборе количества кадров в секунду анимации всё зависит от того, что будет изображено, и от её цели.

Следует отметить, что количество кадров в секунде GIF-анимации не постоянно и легко меняется при её создании. Проще говоря, возможно указывать время показа каждого отдельного кадра. Например, можно установить первый кадр анимации длительностью в одну секунду, а второй — в пять секунд.

Это очень полезно тогда, когда нужно задержать определённый кадр подольше, например, с текстом, не увеличивая веса GIF-файла. Обычно в простой анимированной картинке может быть до 10 кадров, чаще около 4-6.

Задавая время показа различных кадров, анимация из 4 кадров может длиться от долей секунды до минуты и дольше. Но следует учитывать, что слишком длинных анимаций тоже стоит избегать — анимация это не видеоролик. Некоторые браузеры не дожидаются конца анимации и начинают воспроизводить её с начала при мгновенной потере GIF-изображения с экрана.

Стандартное рекомендуемое время полного цикла показа всех кадров анимации — до 10 секунд.

Оптимизация и ограничения GIF-анимации

Также нужно обратить внимание на то, что качество и цветопередача рисунка в формате GIF обычно заметно ниже, чем в форматах JPG или аналогичных, это особенность.

Анимацию также не стоит делать в высоком разрешении. Это вызовет дополнительную нагрузку на браузеры или телефоны и, скорее всего, просто замедлит скорость её воспроизведения. В зависимости от целей анимации, рекомендуемое разрешение может быть до 100-150 пикселей в ширину или высоту. При этом, чем меньше высота анимации, тем больше может быть её ширина, и наоборот. К примеру, разрешение кадра 400x50 пикселей — это допустимое разрешение, а 400x150 — это уже многовато и подойдёт только для особенных целей.

Но, всё же, самое главное, на что нужно обращать внимание при создании GIF-анимации — это её вес. Для общего использования на интернет-страницах или на устройствах размер анимации не должен превышать 400KB. Это максимум.

Общие рекомендации по параметрам GIF-анимации

• Вес: не более 400KB, лучше 150KB-200KB.
• Разрешение: в сумме не более 30000 пикселей (произведение высоты на ширину, например, 400x50 = 20000).
• Время полного воспроизведения: не более 15 секунд.
• Количество кадров: может быть любым, если при этом вес GIF-файла или время анимации не превысит указанные выше рекомендации. Обычно — чем меньше, тем лучше.
• Количество кадров в секунду: не более 30, в зависимости от необходимости.

Пошаговое создание анимации в Photoshop

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

Пример готовой анимации

В нашем примере мы используем сразу все варианты. Будем делать анимацию для подписи "Аватар".

Подготовка и настройка документа

Для начала, найдём исходные картинки для создания анимации:

Теперь создадим новый файл в Photoshop. Ширину указываем 400, высоту 50. Цветовой режим — 8 бит.

Теперь активируем окно "Анимация". Окно > Анимация. Внизу появится специальная область для работы с анимацией.

На ней изображены все кадры, которые есть в анимации, в последовательности. Пока там только один кадр длительностью 0 секунд, но мы всегда можем добавить новые. Кадры всегда можно переставлять местами, пока картинка не сохранится в формате GIF.

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

Следует учесть, что характеристика слоя для первого кадра распространяется на все кадры анимации. Это значит, что, например, если вы измените цвет текста для десятого кадра анимации, он изменится только на десятом кадре, а если на первом, то сразу на всех кадрах анимации.

Зальём цветом холст. Выбираем инструмент "Заливка" (по умолчанию, буква G), цвет #3a55a4, и заливаем холст.

Добавим на холст исходные картинки (Файл > Поместить, или их можно просто перетащить из папки) и изменим их размер.

При добавлении новых картинок на холст, они образуют собой новый слой. Именно с этими слоями мы и будем работать в процессе создания анимации.

Не стоит забывать периодически сохранять работу, чтобы не потерять сделанные изменения. Сохранять рабочий файл Photoshop можно в формате PSD (по умолчанию).

Создание первого кадра

Для начала нужно создать компоновку картинки и первый кадр. Важно учитывать, что браузеры или устройства, которые не смогут воспроизводить анимацию, будут показывать только её первый кадр. Поэтому первый кадр анимации должен отображать всю её суть.

Отобразим и переместим слой "animatsiya1" к левому краю холста. Для этого выберем нужный слой ("animatsiya1"), затем: Редактирование > Трансформирование > Отразить по горизонтали. Затем просто передвинем слой.

На первом кадре слой "animatsiya2" нам не нужен, поэтому его нужно скрыть. Если скрыть слой, то он не будет отображаться в выбранном кадре. Добавим текст (буква T). Нужно также изменить цвет текста, например, на белый, иначе он полностью сольётся с фоном.

Текст — это тоже отдельный слой. Первый кадр анимации готов.

Создание второго и промежуточных кадров

Создадим второй кадр. Точнее, создадим копию первого кадра. Для этого нажмём на знак листа в области анимации.

Второй кадр выбирается автоматически, но мы можем выбирать любой кадр, с которым хотим работать.

Для второго кадра мы скроем первый слой "animatsiya1" и сделаем видимым слой "animatsiya2". Также наложим эффект на слой с текстом и перекрасим его в другой цвет. Дважды нажмём на слой "AVATAR", стили > наложение цвета, и жмём на маленькое окошко с цветом. Укажем цвет #8fbeff.

В итоге, вот как теперь выглядит второй кадр.

Хотя Photoshop и не создаёт анимацию сам, но он может делать промежуточные кадры. Добавим 5 промежуточных кадров между нашими двумя. Для этого нужно выбрать "Создание промежуточных кадров", левее от кнопки "Дублировать кадр" в области анимации. Но прежде нужно выделить два кадра, между которыми будут создаваться промежуточные кадры. Выбирать несколько кадров сразу можно, зажав клавишу Shift.

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

Настройка времени кадров и сохранение

Нужно установить время отображения кадров. Сейчас все кадры не имеют времени отображения — 0 секунд.

Время отображения кадров можно устанавливать массово — при выборе нескольких кадров, или отдельно для каждого. Установим время отображения с 1 по 6 кадр 0,1 сек., а 7 кадр 1 сек. Для этого нужно нажать на стрелку рядом с временем отображения кадра.

Готово! Лента кадров анимации готова. Её можно просмотреть прямо в Photoshop, нажав на стрелку Play в области анимации.

Теперь анимацию нужно сохранить в формате GIF. Меню Файл > Сохранить для Web и устройств.

Формат нужно установить — GIF. Все остальные настройки влияют на качество GIF-анимации и на её исходный вес. Если анимация получается слишком тяжёлая, можно снизить количество цветов до 128, например, или сразу оптимизировать анимацию по желаемому размеру файла. Для этого нужно нажать на пиктограмму с тремя полосками вверху справа, выбрать "оптимизировать по размеру файла" и ввести исходный вес. Анимация сама оптимизируется под необходимый вес с минимально возможными потерями качества.

После этих настроек можно сохранить анимацию, нажав на кнопку "Сохранить".

Конечно, это самый простой пример создания GIF-анимации в Photoshop, но он показывает основы — как создаётся анимация. Поэкспериментировав, вы сможете делать более качественные, детальные и красивые анимации, но принцип их создания одинаков.