Как сделать анимацию в фотошопе

Обновлено: 06.07.2024

Анимация — отличный способ оживить ваши видео или веб-сайты. Но создать их не так уж и сложно! Следуйте инструкциям и убедитесь, как легко использовать простые изображения и значки для создания собственных очаровательных кадровых анимаций в Photoshop.

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

Кредит исполнителя

Анимация стала проще!

Инструменты анимации в Photoshop

Когда большинство людей думают о создании анимации, Photoshop — не первая программа, которая приходит на ум. В то время как Adobe Premiere и Adobe After Effects могут быть более мощными инструментами в целом, Photoshop по-прежнему является очень удобным вариантом для добавления основного движения к изображению. Так что, если вам удобнее всего пользоваться Photoshop и вам нужны простые анимации, то это руководство для вас!

Если вы хотите немного изучить After Effects, у нас есть учебник из двух частей, в котором мы создаем текст и градиент в Photoshop, а затем используем After Effects, чтобы добавить красивую анимацию!

Вся магия анимации в Photoshop стала возможной благодаря временной шкале. Если вы знакомы с основами видео и анимации, вы знаете, что временная шкала — это просто отображение того, как различные визуальные элементы появляются и меняются в сцене в течение заданного промежутка времени. Вы можете найти временную шкалу, щелкнув меню «Окно», а затем параметр «Временная шкала».

В Photoshop есть несколько различных параметров временной шкалы.

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

Как создать анимацию кадра

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

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

Предположим, например, что у вас есть строка текста с надписью «Я ЛЮБЛЮ PHLEARN» в качестве первого кадра на временной шкале. Затем вы создаете второй кадр, а затем переворачиваете этот текст вверх ногами. При воспроизведении анимации сначала отображается текст, затем он переворачивается вверх ногами, а затем снова обратно.

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

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

Перемещение и преобразование для простой анимации

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

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

В нашем примере у нас было изображение плиток с буквами. Поэтому нам пришлось вырезать плитки из их фона.

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

Для этого может потребоваться вырезать некоторые элементы фона или несколько раз дублировать слой, но это относительно легко сделать, и итоговая анимация будет намного более динамичной. Если вам нужно научиться вырезать объекты и удалять фон в Photoshop, ознакомьтесь с нашим PRO-курсом «Как изменить и удалить фон в Photoshop»

Как экспортировать анимацию в Photoshop

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

Если вы хотите использовать его в качестве титульного листа в видео или загрузить его на такую платформу, как YouTube, скорее всего, вы захотите сохранить его в формате MP4. Для этого перейдите в меню «Файл», «Экспорт», «Обработка видео» и выберите MP4, настроив параметры по своему усмотрению.

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

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

Как создать анимированный GIF в Photoshop

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

Хорошо, приступим.

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

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

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

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

Затем Photoshop создаст отдельный слой для каждого выбранного вами изображения. Сделав это, переходите ко второму шагу.

Если у вас еще не создана серия изображений .

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

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

После того, как вы создали слои и назвали их все, вы готовы ко второму шагу.

Совет для профессионалов. Если вы хотите объединить слои, чтобы они отображались в одном кадре в 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? Сохраните его для использования в Интернете, перейдя на верхнюю панель навигации и нажав «Файл» > «Экспорт» > «Сохранить для Интернета (предыдущая версия)».

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

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

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

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

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

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

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

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

Хотя при создании покадровой анимации, безусловно, можно начать с видеоклипа или даже фотографии, вы можете обнаружить, что такие проекты лучше подходят для форм и текста. Вы, конечно, можете экспортировать анимацию на основе кадров как видео QuickTime, но для публикации на своем веб-сайте вы, скорее всего, используете «Сохранить для Интернета» для создания анимированного GIF. (Помните, что формат файла GIF использует таблицу цветов, ограниченную не более чем 256 цветами, поэтому он обычно не подходит для фотографических или других изображений с непрерывными тонами.)

Перед созданием отдельных кадров анимации обычно требуется создать все элементы, из которых будут создаваться эти кадры. Хранение каждого элемента на отдельном слое делает создание кадра очень простым процессом. После того, как у вас есть все необходимые элементы, откройте панель «Таймлайн» через меню «Окно» Photoshop и взгляните на нижний левый угол панели. Если вы видите слово Один раз или Навсегда со стрелкой, указывающей вниз вправо, вы готовы приступить к работе. Если вы видите кнопку с тремя маленькими прямоугольниками, расположенными горизонтально, как (готовы к этому?) кадры в фильме, нажмите кнопку, чтобы переключить панель с временной шкалы видео на анимацию кадров. (Если для другого проекта вам нужно перенастроить панель временной шкалы для временной шкалы видео, нажмите кнопку в левом нижнем углу.)

Вкратце, вот как можно создать покадровую анимацию в Photoshop:

Показать/скрыть слои на панели «Слои». Настройте содержимое панели «Слой», чтобы отображались те элементы, которые вы хотите видеть в первом кадре анимации. Если вы хотите, чтобы анимация начиналась с пустого экрана, скройте все слои.
Нажмите кнопку "Новый кадр". Под кадрами на панели «Таймлайн» находится ряд кнопок. Кнопка «Новый фрейм» — вторая справа, рядом со значком «Корзина» (который, естественно, используется для удаления фреймов).
Измените порядок содержимого панели «Слои». Отображение/скрытие слоев, перемещение содержимого слоев и иное изменение расположения окна изображения, чтобы установить его так, как вы хотите для второго кадра.
Повторите по желанию. Нажмите кнопку "Новый кадр", измените порядок элементов, нажмите кнопку "Новый кадр", измените порядок и так далее, пока не получите все кадры, которые нужны для анимации.
Используйте функцию «Сохранить для Интернета», чтобы создать анимированный GIF-файл или экспортировать его как фильм QuickTime. И вы сделали! (Обязательно сохраните многослойный документ в формате файла PSD на тот случай, если вы захотите внести изменения или использовать некоторые элементы в другой анимации в будущем.)

Как создать содержимое фрейма

Видимость слоя. Вы можете показать или скрыть содержимое слоя.
Непрозрачность слоя. Изменяя непрозрачность слоя от кадра к кадру, вы можете заставить содержимое слоя проявляться или исчезать во время воспроизведения анимации.
Изменить положение: с помощью инструмента "Перемещение" можно перетаскивать элементы слоя, создавая впечатление, что они перемещаются от кадра к кадру.
Изменить режим наложения. Изменение режима наложения слоя меняет способ взаимодействия содержимого этого слоя с содержимым нижних слоев от кадра к кадру.
Добавить, удалить или изменить стиль слоя. Рассмотрим, например, круглую фигуру со стилем слоя «Скос», который меняется, создавая впечатление, что объект надувается и сдувается от кадра к кадру.

Во время анимации красный шар и синий квадрат меняются местами на экране.

Твининг анимации в Photoshop для создания промежуточных кадров

Чтобы создать анимацию на предыдущем рисунке, я фактически создал только 3 из 13 кадров. Я позволил Photoshop сделать остальные 10 кадров, что сэкономило мне время и обеспечило плавное и точное воспроизведение анимации. Я создал первый кадр с красным кругом в верхнем левом углу и синим квадратом в правом нижнем углу. Затем я нажал кнопку «Новый кадр» и в окне изображения перетащил красный кружок в нижний левый угол, а синий квадрат — в верхний правый. После повторного нажатия кнопки «Новый кадр» я перетащил красный круг в нижний правый угол (где начинался синий квадрат) и перетаскивал синий квадрат в верхний левый угол (где начинался красный круг).

После создания трех моих кадров Photoshop анимировал пары кадров, чтобы создать промежуточные кадры. Анимация создает кадры между двумя кадрами на панели «Таймлайн». Я щелкнул первый кадр, а затем открыл меню панели «Таймлайн» и выбрал команду «Твин».В диалоговом окне Tween вы можете указать, сколько кадров создавать (я выбираю пять), какие аспекты кадров вы хотите смешать (мне нужно было анимировать только для положения, потому что не было изменений в непрозрачности или стилях слоя) и следует ли выполнять анимацию между выбранным кадром и следующим кадром или последним кадром (я выбрал «Следующий кадр»). Затем я щелкнул второй созданный кадр (на тот момент кадр номер 7, второй от последнего) и повторил процесс Tween.

Photoshop автоматически создал 10 из 13 кадров.

Скажем, вы хотите, чтобы на вашей главной странице логотип постепенно исчезал и появлялся, и вы хотите, чтобы каждое исчезновение было очень плавным. Вы можете создать логотип, установить непрозрачность слоя на 100%, добавить новую рамку, уменьшить непрозрачность до 99%, добавить новую рамку, уменьшить непрозрачность до 98% и повторять снова и снова, пока не достигнете 0% непрозрачности. . Или вы можете создать логотип с непрозрачностью 100 %, нажать кнопку «Новый кадр», уменьшить непрозрачность до 0 %, щелкнуть первый кадр и использовать команду Tween, чтобы создать еще 99 кадров, анимацию движения для непрозрачности. Добавьте еще один кадр, верните непрозрачность на 99% (исходный первый кадр равен 100%), а затем анимируйте 98 новых кадров между предпоследним кадром и только что созданным последним кадром. Это ваш выбор.

Указание частоты кадров

Вы контролируете, насколько быстро (или медленно) будет воспроизводиться ваша анимация, указав частоту кадров. Как правило, каждый кадр воспроизводится в течение одинакового времени, поэтому вы можете щелкнуть первый кадр, щелкнуть последний кадр, удерживая клавишу Shift, и выбрать нужную частоту кадров в меню под любым из кадров. Если вы выберете Без задержки (0,00 секунды), анимация будет воспроизводиться максимально быстро. Не упускайте из виду вариант «Другое»! Вы не ограничены временными задержками, указанными в меню.

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

Имейте в виду, что не все кадры должны иметь одинаковую скорость воспроизведения. Нет причин, по которым для кадра со 100-процентной непрозрачностью нельзя установить пяти- или десятисекундную задержку, а для всех остальных кадров — 1/10 секунды.

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

Оптимизируйте и сохраните анимацию

Если вы планируете добавить анимацию на веб-страницу или в презентацию, созданную в Keynote или PowerPoint, вам нужно создать анимированный GIF-файл. (Имейте в виду, что если на панели «Слои» нет слоя с именем «Фон», ваш анимированный GIF может поддерживать прозрачность.) После создания всех кадров откройте меню панели «Таймлайн» и выберите команду «Оптимизировать анимацию». Настройки по умолчанию — с выбранными параметрами «Ограничивающая рамка» и «Удаление избыточных пикселей» — будут генерировать файл наименьшего размера, обеспечивая наиболее плавное воспроизведение. Сохраните многослойный и анимированный файл в формате файла PSD для будущего использования, а затем выберите «Файл» → «Сохранить для Интернета», чтобы создать анимированный GIF. (Не забудьте выбрать параметр «Прозрачность» в «Сохранить для Интернета», если у вас нет фонового слоя.)

Если вы хотите использовать анимацию на устройствах, которые не воспроизводят анимированные GIF-файлы (например, на смартфоне), выберите «Файл» → «Экспорт» → «Рендеринг видео», чтобы создать фильм QuickTime.

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

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

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

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

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

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

Настройте размеры, разрешение и цветовой режим документа 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
—

Файл > Экспорт > Сохранить для Интернета (предыдущая версия)…

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

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

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

Уменьшить размер файла

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

Это параметры, на которые следует обратить внимание в окне "Сохранить для Интернета"

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

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

Преобразовать в sRGB

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

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

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

Шаг 10. Поделитесь готовым GIF-файлом Photoshop!
—

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

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

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

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

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

Читайте также: