Как создать анимированное GIF-изображение с помощью Photoshop

Как создать и сохранить GIF в фотошопе

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

В этом руководстве по созданию анимированных GIF-файлов я использую Photoshop версии Creative Cloud 2015.

Как создать и сохранить GIF-анимацию в фотошопе (Photoshop)?

Ниже приведен пример анимированного GIF-изображения, которое можно создать, используя данное руководство:

Шаг 1. Загрузите изображения в Photoshop

Если у вас уже есть изображения …

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

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

После этого Photoshop создаст отдельный слой для каждого добавленного изображения. Далее перейдите к шагу 2.

Если у вас еще нет набора изображений …

Создайте каждый кадр анимированного GIF-изображения в виде отдельного слоя. Чтобы добавить новый слой, выберите Слой> Создать> Слой.

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

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

Профессиональный совет: Если хотите объединить слои так, чтобы они отображались в GIF-изображении в одном кадре, включите видимость для слоев, нажав на «глаз» слева от названия каждого нужного слоя. Затем нажмите Shift + Command + Option + E (Mac) или Shift + Ctrl + Alt + E (Windows). Photoshop создаст новый слой, содержащий объединенный контент, его также необходимо будет переименовать.

Шаг 2. Откройте окно «Временная шкала»

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

В нижней части экрана появится окно «Шкала времени». Вот как оно выглядит:

Шаг 3: В окне «Шкала времени» нажмите кнопку «Создать анимацию кадра»

Если этот пункт не выбран автоматически, выберите его в раскрывающемся меню.

Теперь окно «Шкала времени» должно выглядеть примерно так:

Шаг 4. Создайте новый слой для каждого кадра

Сначала выберите все слои, перейдя в главное меню, а затем в Выбрать> Все слои. Затем кликните по иконке меню, расположенной справа от временной шкалы.

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

Шаг 5: Нажмите на ту же иконку меню и выберите пункт «Создать кадры из слоев»

В результате каждый слой будет использован как кадр GIF-изображения.

Шаг 6: Под каждым кадром задайте, как долго он должен отображаться до момента перехода к следующему

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

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

По умолчанию будет использоваться значение «Однократно». Кликните по пункту «Другое», если  хотите указать произвольное количество повторений.

Шаг 8: Просмотрите созданное GIF-изображение, кликнув по иконке воспроизведения

Шаг 9: Сохраните и экспортируйте GIF-изображение

Осталось понять как сохранить анимированный GIF в фотошопе  для последующего использования. Для этого нужно перейти в верхнее меню и выбрать в нем пункт Файл> Сохранить для Web.

Затем выберите тип GIF-файла, который вы хотите сохранить. Число рядом с обозначением GIF определяет, насколько точно цвета GIF-изображения будут соотноситься с оригинальными JPEG или PNG изображениями. Согласно документации Adobe, более высокий процент сглаживания дает большее количество цветов и большую детализацию. Но это увеличивает размер итогового файла.

Нажмите «Сохранить», чтобы сохранить созданный GIF-файл на компьютере. Теперь можно использовать это GIF-изображение в маркетинговых мероприятиях.

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

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

В социальных сетях

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

В электронных письмах

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

Используйте GIF-изображения, демонстрируя товары,  и анонсируя события. Ниже приведено GIF-изображение из рекламной кампании магазина женской одежды Ann Taylor LOFT. Они создали красивый эффект, похожий на дрожание, чтобы заинтриговать получателей электронных писем и заставить их «развернуть» свой подарок.

В постах на блоге

Например, вот простой, анимированный GIF-файл, созданный маркетологом Джинни Минео, который объясняет, что такое призыв к действию, размещенный в постах блога:

И, наконец, одна из наших самых любимых гифок: анимированное GIF-изображение из поста с рецептами домашней кулинарии.

Как вы будете использовать GIF-изображения в маркетинге? Расскажите об этом в комментариях.

 

Перевод статьи «How to Make an Animated GIF in Photoshop [Tutorial]» был подготовлен дружной командой проекта Сайтостроение от А до Я.