Как сделать gif в фотошопе: Как сделать GIF-анимацию из фотографий в Photoshop

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

Шаг 1: Создайте новый файл Adobe Illustrator и установите размер монтажной области 400 x 400 пикселей (просто мое предложение, не стесняйтесь устанавливать любой другой размер, который вам нравится).

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

Шаг 2: Создайте значок или иллюстрацию, которую хотите анимировать. Например, я собираюсь сделать GIF с дождем, поэтому я создам форму облака и несколько капель дождя.

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

Шаг 3: Создайте новые монтажные области. Эти монтажные области позже будут кадрами в Photoshop, поэтому количество монтажных областей зависит от количества кадров/действий, которые вы хотите иметь в GIF.

Например, я добавил пять дополнительных монтажных областей, так что теперь у меня всего шесть монтажных областей.

Не расстраивайтесь, если вы не уверены в данный момент, вы всегда можете добавить или удалить монтажные области позже.

Шаг 4: Скопируйте и вставьте фигуры в новые монтажные области. Если вы редактируете одну и ту же фигуру, вы можете скопировать фигуру на все монтажные области и внести изменения в каждую монтажную область.

Примечание: очень важно размещать фигуры на новых монтажных областях при создании GIF. Сочетание клавиш для размещения скопированного объекта на том же месте: Command + F ( Ctrl + F для пользователей Windows).

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

Например, форма облака будет отображаться в GIF все время, поэтому скопируйте форму облака на все новые монтажные области. Вы также можете добавлять элементы на новую монтажную область один за другим. Вам решать.

Решите, какая часть будет отображаться следующей, и организуйте монтажные области в соответствии с последовательностью кадров, которые будут отображаться в GIF.

В моем случае я хочу, чтобы средняя капля дождя отображалась первой, поэтому я поместил ее вместе с формой облака на монтажной области 2. Затем на следующих кадрах (монтажных областях) я добавлю капли дождя по бокам одним.

Когда все монтажные области были настроены, я решил удалить капли дождя с первой монтажной области, так что теперь мои монтажные области выглядят так, и они готовы к работе.

Шаг 5: Назовите монтажные области и расположите их в том порядке, в котором вы хотите, чтобы они выглядели на GIF. Я назову их от кадра 1 до кадра 6, чтобы их было легче идентифицировать позже в Photoshop.

Шаг 6: Экспорт монтажных областей. Перейдите в верхнее меню Файл > Экспорт > Export for Screens и выберите Export Artboards .

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

Вы закончили работу в Adobe Illustrator, давайте продолжим процесс анимации в Photoshop.

Часть 2. Создание GIF в Photoshop 

Когда все кадры будут готовы, создание анимированного GIF в Photoshop займет всего несколько минут.

Шаг 1: Создайте новый документ в Photoshop, того же размера, что и файл Adobe Illustrator из первой части. В моем случае это будут 400 x 400 пикселей.

Шаг 2: Перетащите изображения, экспортированные из Adobe Illustrator, в Photoshop, и они отобразятся в виде слоев.

Шаг 3: Перейдите в верхнее меню Окно > Временная шкала или вы можете напрямую изменить рабочее пространство на Движение .

Вы должны увидеть рабочую область временной шкалы в нижней части окна Photoshop.

Шаг 4: Щелкните Create Frame Animation в рабочей области временной шкалы, и вы увидите верхний слой, отображаемый в рабочей области временной шкалы.

Шаг 5: Щелкните в правом верхнем углу окна временной шкалы, чтобы открыть свернутое меню, и выберите Сделать кадры из слоев .

Тогда все слои будут отображаться в виде рамок.

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

Шаг 6: Щелкните стрелку вниз под каждым кадром, чтобы соответствующим образом изменить скорость каждого кадра. Например, я изменил скорость всех кадров на 0,2 секунды.

Нажмите кнопку воспроизведения, чтобы посмотреть, как выглядит GIF. Раз вы довольны результатом. Последний шаг — экспортировать его в формате GIF.

Шаг 7: Перейдите в верхнее меню.

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

Нажмите Сохранить и поздравляем! Вы только что сделали анимированный GIF.

Как сделать GIF без Photoshop

Не знакомы с Photoshop? Вы, безусловно, можете создать GIF и без Photoshop. Есть так много онлайн-инструментов, которые позволяют вам сделать GIF бесплатно.

Например, EZGIF — популярный инструмент для создания GIF-файлов, и им легко пользоваться. Все, что вам нужно сделать, это загрузить свои изображения, выбрать скорость воспроизведения, и GIF будет автоматически создан для вас.

Вывод

В Adobe Illustrator создаются элементы анимации, а в Photoshop создаются анимированные GIF-файлы.

Более простой вариант — использовать онлайн-программу для создания GIF. Преимущество в том, что это сэкономит вам много времени, особенно если вы не знакомы с Photoshop. Однако я предпочитаю гибкость Photoshop, потому что у меня больше контроля над кадрами.

О Джун Эскалада

Окончил факультет креативной рекламы, более восьми лет работал графическим дизайнером, специализируясь на брендинге и иллюстрации. Да, Adobe Illustrator — мой лучший друг, и я увлечен искусством и дизайном.

Как сделать GIF из иллюстрации

Как сделать GIF из иллюстрации

Эй, дизайнеры, посетите наш всеобъемлющий трехдневный семинар по дизайну WMC: Off-The-Grid, который пройдет с 5 по 7 октября. Чтобы узнать больше, посетите веб-сайт wmcfest.com.

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

Многие шаги в обоих учебниках похожи, однако этот процесс немного сложнее. Когда вы создаете GIF из видео, вы берете существующие кадры из видео и редактируете их для создания GIF. Однако для иллюстрации вы начинаете с 0 кадров, а это значит, что вам нужно создать свой собственный. Это может стать немного сложнее, но если вы будете организованы и будете следовать моим шагам, вы справитесь с этим на одном дыхании!

Шаг 1:  Выберите иллюстрацию/иллюстрацию/значок, который вы хотите анимировать

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

Шаг 2:  Разделите свою иллюстрацию на слои

Импортируйте свою иллюстрацию в документ PSD! Есть много способов сделать это (например, импортировать слои из таких программ, как Illustrator, Procreate и т. д., или копировать и вставлять слои между программами). Однако важно убедиться, что слои разделены. Это позволит вам анимировать определенные элементы.

Поскольку это векторный значок, созданный в Adobe Illustrator, я просто скопирую и вставлю свои элементы по одному.

• Открыть файл Illustrator, содержащий векторную иллюстрацию
• Определите, какие элементы вы хотите анимировать, а какие слои — нет
• Объедините вместе все слои, которые НЕ хотите анимировать, и сначала скопируйте их в документ Photoshop.
• Вставьте их как смарт-объект (появится окно с запросом на это)
• Затем вернитесь и вставьте слои, которые вы ДЕЙСТВИТЕЛЬНО хотите анимировать, по одному за раз
• ВАЖНО: Скопируйте эти слои ОТДЕЛЬНО. Например, я хочу, чтобы каждая из маленьких искр вокруг моего значка анимировалась по одной за раз. Это означает, что мне нужна каждая маленькая искра на отдельном слое.

На изображении выше вы видите, что все мои работы разделены на слои. Я выделил слои, которые я хочу в конечном итоге анимировать, желтым цветом, а слои, которые я хочу оставить статичными, — оранжевым.

Шаг 3: Настройка временной шкалы

После того, как вы вставили все свои слои и все выглядит хорошо, откройте окно «Анимация» или «Временная шкала» в Photoshop (название этого окна меняется в зависимости от какая у вас версия фотошопа).

• Откройте его, нажав Окно > Анимация/Временная шкала
• Когда появится окно, нажмите «Создать временную шкалу видео».
• Затем в том же окне нажмите маленькое меню-гамбургер (3 горизонтальные линии) в правом верхнем углу, должно появиться меню
• Наведите указатель мыши на «Преобразовать кадры», а затем нажмите «Преобразовать в покадровую анимацию»
• После этого у вас должен появиться один кадр в окне временной шкалы/анимации.

Ваша «временная шкала» должна выглядеть, как на фотографии выше (я также обвела желтым «гамбургер-меню», если вы не смогли его найти)

Шаг 4:   Начать анимацию кадров

Теперь, когда у вас настроен документ, вы можете начать анимировать свою иллюстрацию! Для моего GIF я хочу, чтобы маленькие искры вокруг лампочки мерцали по одной за раз. Это означает, что мне понадобится 1 кадр для каждого действия. А так как у меня 9искры, я хочу 10 кадров всего. Я организовал его в список ниже:

• Кадр 1: 0 видимых искр
• Кадр 2: видна только искра 1
• Кадр 3: видны только искры 1 и 2
• Кадр 4: видны только искры 1, 2 и 3
• и т. д.

На маленьких миниатюрах в окне временной шкалы видно, как искры появляются одна за другой. Вы также увидите небольшое «5 секунд» под каждой миниатюрой. Это означает, что каждый кадр будет отображаться на экране в течение 5 секунд, прежде чем перейти к следующему. Мы исправим это количество времени на следующем шаге!

————-

ДОПОЛНИТЕЛЬНЫЙ СОВЕТ:

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

Допустим, я хочу, чтобы моя лампочка плавала по экрану слева направо. Мне нужно было бы, чтобы вся моя лампочка была на одном слое и чтобы она была видна в кадре 1.

Затем я создал бы кадр 2 (чтобы создать новый кадр, нажмите значок рядом с символом корзины в окне временной шкалы/анимации). , продублируйте мой исходный слой с лампочкой, сдвиньте мой новый слой вправо (удерживая нажатой клавишу Shift и нажав клавишу со стрелкой вправо) и скройте предыдущий слой.

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

————-

Шаг 5:  Редактировать частоту ключевых кадров

Теперь, когда у вас есть все созданные кадры, вы можете нажать кнопку воспроизведения и подумать: «Ого, почему это занимает так много времени? Вот где скорость ключевого кадра вступает в игру!

Выберите все свои кадры в окне анимации/временной шкалы, нажмите маленькую стрелку рядом со временем и либо выберите одно из перечисленных значений времени, либо введите свое собственное. Обычно мне нравится использовать скорость 0,08 секунды, но это мой личный вкус, который может меняться в зависимости от проекта.

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

На изображениях выше показано до и после того, как я установил частоту кадров/время цикла

Шаг 6: Играйте и экспортируйте!

После того, как вы выполните описанные выше шаги, убедитесь, что вы воспроизвели свой GIF и вам нравится, как он выглядит и анимируется! Как только вы будете счастливы, вы будете готовы к окончательному экспорту!

При экспорте GIF вы не просто «Сохранить как», как в случае с JPG. Вам нужно перейти в «Файл»>

ПРИМЕЧАНИЕ : я подробно расскажу об экспорте GIF-файлов в своем руководстве по созданию GIF-файла из видео.