0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Создание GIF анимации в Photoshop

Создание GIF анимации в Photoshop

Ранее на сайте мы рассматривали сторонние сервисы создания гиф анимации, однако большинство из них запросто может заменить обычный Фотошоп. Анимированные GIF файлы с его помощью делаются достаточно легко и быстро. Они, как правило, состоят из нескольких изображений (кадров), которые при пошаговой смене и образуют финальный результат. Сегодня постараемся максимально детально рассмотреть данный вопрос от А до Я:

Скриншоты ниже представлены из Photoshop СС, но работа с GIF анимацией в CS6 и других версиях программы плюс-минус аналогична. Возможно, визуально инструменты будут немного отличаться, но в целом, принцип и алгоритм действий похожие. В качестве примера рассмотрим тривиальную задачу как создать GIF анимацию в Фотошопе из фотографий, сменяющих друг друга. Недавно с помощью этого руководства сделал гифку о своих приключениях для итогового поста за 2016 год в персональном блоге.

Статья в тему:  Что такое формат EPUB и чем его открыть. Чем открыть EPUB

Процесс занял буквально минут 5-10. Тут важно просто внимательно выполнять все шаги. В конце поста найдете англоязычный видеоурок по данной теме.

Как сделать гифку из фото в фотошопе?

Открываем Photoshop. Во вкладке «Файл» выбираем «Сценарии», а потом «Загрузить файлы в стек…». В появившемся окне выбираете изображения (фото, картинки), из которых будет состоять анимация.

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

Первый слой сделайте видимым, остальные – скройте, нажав на «глаз». Вы получите первый кадр гифки с нужный изображением.

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

Теперь делаем следующее: нажимаем на второй слой в панели анимации – делаем видимым ТОЛЬКО второй слой в основном рабочем списке слоев. Третий кадр анимации – делаем видимым ТОЛЬКО третий слой видимым, остальные – скрыты.

Там, где «о сек.» устанавливаем любое нужное время для воспроизведения напротив каждого кадра.

Для непрерывного показа кадров нам необходимо выбрать значение «Постоянно». Чуть ниже от того, где мы выбирали время воспроизведения для каждого слоя, есть окно выбора параметров цикла.

Статья в тему:  Что делать если вибер. Что делать если не работает Viber

Можно сказать, что гифка из фото готова. Осталось только правильно сохранить её. Для этого во вкладке «Файл» нажимаем «Экспортировать», далее выбираем «Сохранить для Web (старая версия)…». Откроется окно, в верхней части которого выбираем нужный формат – GIF. Внизу можно отредактировать исходный размер, если сделать меньше (в процентном соотношении), то вес тоже уменьшится.

Не забываем нажать «Сохранить», выбрать место хранения файла. Всё, готово!

Как использовать GIF в маркетинге

В социальных медиа

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

В письмах

Анимированные GIF-файлы отображаются в электронной почте так же, как и обычные изображения. Так почему бы не заменить неподвижные изображения анимированными?

Это может привлечь внимание читателей и повысит эффективность проводимой кампании. А / B тестирование, проведенное Bluefly , показало, что электронные письма с анимированными GIF-изображениями дают на 12% больше прибыли, чем их статичные версии. Используйте GIF для демонстрации товаров, анонсов событий или иных целей.

В блоге

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

Статья в тему:  Почему не работает микрофон на наушниках и как его проверить

Пожалуйста, опубликуйте ваши комментарии по текущей теме статьи. Мы крайне благодарны вам за ваши комментарии, дизлайки, подписки, отклики, лайки!

Способ 2: Создание GIF из фото

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

    На «Шкале времени» в этот раз поменяйте режим на «Создать анимацию кадра», выбрав этот вариант в выпадающем меню.

Откройте «Файл», наведите курсор на «Сценарии» и щелкните по пункту «Загрузить файлы в стек».

В появившемся окне кликните «Обзор».

Сразу же загрузите все фотографии, которые должны входить в анимацию.

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

Кнопкой «Создать анимацию кадра» сформируйте анимацию.

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

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

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

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

Если после прочтения инструкций вы решили, что Adobe Photoshop не подходит для реализации задуманной анимации, советуем ознакомиться с другими программами, предназначенными для работы с GIF. Детальный обзор на популярных представителей такого софта есть в отдельной статье на нашем сайте.

Статья в тему:  Домен cm какая страна. Выбираем доменную зону

Помимо этой статьи, на сайте еще 12415 инструкций.
Добавьте сайт Lumpics.ru в закладки (CTRL+D) и мы точно еще пригодимся вам.

Отблагодарите автора, поделитесь статьей в социальных сетях.

C чего начать

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

Для создания анимации я взял один из ярких проектов с Behance и перерисовал его в Photoshop. Выровнял по контент-сетке, подобрал размеры и поместил каждый элемент в отдельный слой. В результате у меня появился отрисованный в PSD-формате первый экран сайта, который я и анимировал.

Импортируем серию фотографий

Откройте Photoshop и перейдите в меню File > Scripts > Load Files into Stack (Файл – Сценарии – Загрузить файлы в стек).

Кликните по кнопке Browse (Обзор) и найдите фотографии, с которыми будете работать. Удерживая нажатой клавишу Shift, выберите все файлы и нажмите Open (Открыть).

Кликните OK, чтобы импортировать выбранные фотографии в один многослойный файл.

Обратите внимание на панель слоёв в правой части рабочего пространства, здесь создано несколько новых слоёв. Эти отдельные слои мы превратим покадровую анимацию.

Как импортировать видео (необязательно)

Если вы начинаете с короткого видео, то вам сначала следует преобразовать кадры видео в отдельные слои. Для этого перейдите во вкладку File > Import > Video Frames to Layers (Файл – Импортировать – Кадры видео в слои).

Статья в тему:  Как переключить комп на телек.

Найдите и выберите видеофайл, который хотите использовать, и нажмите «Открыть».

Кликните OK, чтобы преобразовать видеофрагменты в один многослойный файл.

Примечание: возможно, Photoshop не сможет импортировать слишком длинное видео. Используйте опцию в окне импорта, чтобы ограничить количество импортированных кадров. Вы можете импортировать всё видео или какую-нибудь часть. Помимо этого, можно ограничить количество импортируемых кадров в заданный интервал, например, каждые 2 кадра.

Вариант первый

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

Запускаем наш графический редактор и создаем новый пустой файл с размером ваших фотографий или картинок:

Перекидываем все фотографии в фотошоп просто переместив их в окно мышью. Нажимаем «Enter» для каждой фотографии, чтобы поместить ее на холст.

Удаляем слой с фоном – нам он больше не понадобится. Для этого просто выделите его и нажмите кнопку Delete на клавиатуре.

Теперь, находим вкладку «Окно», ищем там пункт «Шкала времени».

У вас появиться снизу новый блок. Он как раз-таки и отвечает за создание анимации. Выбираем там «Создать анимацию кадра».

Нажмите на кнопку открытия меню в правом верхнем углу и найдите пункт «Создать кадры из слоев».

Здесь вы также можете настроить время задержки каждого кадра – то есть как долго будет показываться определенный кадр. Для достижения максимальной плавности, я советую ставить 0 секунд или же «Без задержки».

Статья в тему:  Спутниковый сигнал - Всё о сигнале со спутника

Нажав на копку запуска мы можем просмотреть работу анимации. Теперь нужно сохранить наш проект.

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

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

Усовершенствование анимации путём добавления промежуточных кадров

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

Для начала выберите первый кадр и нажмите кнопку «Создание промежуточных кадров» панели инструментов в нижней части шкалы времени.

В открывшемся диалоговом окне установите пункт «Промежуточные кадры» в значение «Следующий кадр», а для пункта «Добавить кадров» укажите значение по своему усмотрению. Более высокое значение означает более плавный, но медленный переход. Нажмите «OK», чтобы создать промежуточные кадры.

Теперь повторите этот процесс для других исходных кадров, которые вы добавили. Когда доберётесь до последнего, установите «Промежуточные кадры» в значение «Первый кадр». Это поможет создать плавный переход к началу цикла вашей анимации.

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

Статья в тему:  Оператор выбора if в языке C. Операторы IF - ELSE

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

Для сохранения созданной анимации перейдите в «Файл» > «Экспортировать» > «Сохранить для Web (старая версия)…». В открывшемся окне выберите формат GIF, а в поле «Цвета» укажите 256. Для того, чтобы уменьшить общий размер файла, уменьшите размер в поле «Размер изображения».

Вы cможете увидеть, размер анимации в левом нижнем углу окна предварительного просмотра. Если он слишком большой, перетащите ползунок «Потери» вправо. Это повлияет на качество, но значительно уменьшит размер файла.

Наконец, нажмите «Сохранить», чтобы создать свою GIF анимацию.

Ссылка на основную публикацию
Статьи c упоминанием слов:
Adblock
detector