Как сделать анимированный GIF в фотошопе

1. Шаг 1. Настройте размеры и разрешение вашего документа Photoshop -
2. Размеры
3. разрешение
4. Цветовой режим
5. Шаг 2. Импортируйте файлы изображений в Photoshop -
6. Создание GIF из видео
7. Шаг 3: Откройте окно шкалы времени -
8. Шаг 4: конвертируйте ваши слои в рамки -
9. Шаг 5: дублируйте кадры для создания анимации -
10. Шаг 6: Установите время задержки каждого кадра -
11. Шаг 7: Установите количество циклов анимации -
12. Шаг 8: Предварительный просмотр и повторение вашей анимации -
13. Шаг 9. Экспортируйте документ Photoshop в формате GIF. -
14. Обрезать размер файла
15. Уменьшить информацию о цвете
16. Конвертировать в sRGB
17. Сохранить
18. Шаг 10: Поделитесь готовым фотошопом GIF! -
19. Ищете профессиональную помощь в создании анимации?

GIF, или «Graphics Interchange Format», представляет собой сжатый формат файла изображения, который позволяет анимацию. Есть много способов создать GIF, но Photoshop работает быстро и просто, со встроенными инструментами для манипуляции изображениями и анимации.

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

Узнайте, как я сделал этот GIF! Фото через Грэм Волшебник ,

Без лишних слов, вот как сделать анимированный GIF в Photoshop.

Шаг 1. Настройте размеры и разрешение вашего документа Photoshop
-

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

Установите размеры, разрешение и цветовой режим вашего документа Photoshop

Размеры

Для этого проекта мы работаем с баннерной рекламой GIF, которая имеет стандартные правила определения размеров. Я выбрал макет 720 × 300. Убедитесь, что ваши единицы в пикселях.

разрешение

Чтобы размер файла был как можно меньше, разрешение 150 подойдет. Я пошел с 300, так как я знаю, что мой GIF не будет таким большим. Убедитесь, что ваши единицы в пикселях / дюйм.

Цветовой режим

Наконец, для экрана создаются анимированные GIF-изображения, поэтому установите цветовой режим на цвет RGB. Нажмите Создать, чтобы открыть новый документ.

Шаг 2. Импортируйте файлы изображений в Photoshop
-

Создание GIF из неподвижных изображений

Перейдите в « Файл»> «Сценарии»> «Загрузить файлы в стек» и нажмите кнопку «Обзор» в появившемся окне «Загрузить слои». Это открывает окно Finder / Explorer, где вы можете просматривать ваши файлы и выбирать все те, которые вам нужны. Когда вы закончите, нажмите Открыть, а затем ОК в следующем окне. Файлы будут импортированы в отдельный документ, из которого вы можете выбрать все слои и перетащить их в рабочий документ.

Создание GIF из видео

Если вы конвертируете видео в GIF, выберите «Файл»> «Импорт»> «Кадры видео в слои» .

Шаг 3: Откройте окно шкалы времени
-

Перейдите в Окно> Временная шкала . Это откроет панель в нижней трети холста. В центре панели нажмите стрелку, чтобы открыть раскрывающееся меню, и выберите « Создать анимацию кадра» .

Шаг 4: конвертируйте ваши слои в рамки
-

Если у вас уже есть готовые изображения, нажмите на значок меню гамбургера на временной шкале и выберите «Создать кадры из слоев».

Ваш первый кадр уже будет создан из всех видимых слоев (т.е. видимость слоя или значок глаза включен) в вашем документе. Теперь все, что вам нужно сделать, это заполнить временную шкалу несколькими кадрами, чтобы имитировать движение. Есть два способа сделать это: импортировать уже подготовленные кадры или создать анимацию с нуля в Photoshop. В этом разделе будет описан первый сценарий.

Если вы уже настроили неподвижные, последовательные изображения заранее (или работаете с импортированными видеокадрами, см. Шаг 2), щелкните значок меню гамбургера в верхнем правом углу панели «Таймлайн». Выберите « Создать кадры из слоев» . Вы увидите шкалу времени, заполненную кадрами из ваших слоев.

Шаг 5: дублируйте кадры для создания анимации
-

Под временной шкалой находится панель инструментов, которая содержит (помимо прочего) настройку цикла, кнопку предварительного просмотра и кнопку дублирования кадра

Если вы не настроили неподвижные изображения заранее или вам необходимо настроить части анимации, созданной на шаге 4, вы можете создавать анимацию вручную кадр за кадром (именно так я и сделал свою анимацию). Для этого продублируйте последний кадр на временной шкале (щелкните значок выделенной страницы на панели инструментов под временной шкалой), внесите необходимые изменения в свое изображение и повторите.

Например, моя анимация - это очки, скользящие по глазам субъекта. Чтобы сделать это, я продублировал кадр, переместил солнцезащитные очки на несколько пикселей вниз (сколько пикселей было методом проб и ошибок - подробнее об этом позже) и повторял этот процесс, пока у меня не было около пятнадцати кадров, а солнцезащитные очки были там, где я находился. хотел их, что привело к плавной анимации скольжения вниз.

Фото через Грэм Волшебник ,

Шаг 6: Установите время задержки каждого кадра
-

Настройка продолжительности находится в нижней части каждого кадра.

Вы можете найти таймер задержки внизу каждого кадра (время в секундах с выпадающей стрелкой рядом с ним).

Нажмите на стрелку, чтобы вызвать меню и выбрать количество времени, которое вы хотите, чтобы кадр отображался на экране.

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

Совет: Многие кадры с короткими задержками - это ключ к плавной анимации, в то время как несколько кадров с длинными задержками создают резкий эффект остановки движения.

Шаг 7: Установите количество циклов анимации
-

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

Шаг 8: Предварительный просмотр и повторение вашей анимации
-

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

Шаг 9. Экспортируйте документ Photoshop в формате GIF.
-

Файл> Экспорт> Сохранить для Web (Legacy)…

Прежде всего, не забудьте сохранить свой рабочий PSD!

Когда вы будете готовы экспортировать окончательный GIF- файл , перейдите в « Файл»> «Экспорт»> «Сохранить для Web» (Legacy) . (Примечание: если вы работаете с более старой версией Photoshop, это, вероятно, Файл> Сохранить для Web и устройств). Это откроет окно экспорта.

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

Обрезать размер файла

Ваша основная цель с оставшимися опциями - сохранить размер файла небольшим, уменьшив количество деталей в GIF, не жертвуя качеством изображения. Помните, что большой размер файла означает медленное время загрузки, что может быть особенно наказуемым для маркетинговых целей, таких как рекламные баннеры, когда зритель не ищет ваш контент и не будет ждать его загрузки. Стремитесь остаться ниже 1 МБ. До 5 МБ выполнимо на большинстве веб-сайтов, но это толкает. Вы можете увидеть размер файла GIF в левом нижнем углу панели, содержащей изображение для предварительного просмотра.

Это настройка, на которую следует обратить внимание в окне «Сохранить для Web».

Уменьшить информацию о цвете

Ненужная информация о цвете является основной причиной большого размера файла. Чтобы сократить его, настройте общее количество цветов в раскрывающемся списке с надписью «Цвета» и уменьшите параметр «Сглаживание» (смешение пикселей для создания бесшовной заливки) под ним. При внесении изменений следите за предварительным изображением GIF с левой стороны, чтобы увидеть, как влияет разрешение.

Конвертировать в sRGB

sRGB, или «Стандартный RGB», имеет более узкий диапазон цветов, чем «Adobe RGB» по умолчанию, поэтому обязательно установите этот флажок.

Сохранить

Если вы довольны своим разрешением и размером файла, нажмите кнопку «Сохранить» в нижней части окна. Чтобы убедиться, что все получилось хорошо, вы можете просмотреть готовый файл GIF, перетащив его в поле URL браузера.

Мой готовый баннер GIF. Фото через Грэм Волшебник ,

Шаг 10: Поделитесь готовым фотошопом GIF!
-

И вот он у вас есть - ваш готовый GIF, готовый для распространения по всей всемирной паутине. Теперь, когда у вас есть навыки для создания основных анимаций Photoshop из видео и фотографий, вы можете gifify почти все!

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

Ищете профессиональную помощь в создании анимации?

Работайте с одним из наших талантливых дизайнеров!

Эта статья была изначально написана Ребеккой Крегер и опубликована в 2013 году. Она была обновлена ​​новой информацией и примерами.