GIMP - удивительно мощная программа, учитывая, что она бесплатная. В частности, веб-дизайнеры могут быть благодарны ему за возможность создавать простые анимированные GIF-файлы.
Анимированные GIF-файлы - это простые анимации, которые вы увидите на многих веб-страницах, и, хотя они гораздо менее сложны, чем Flash-анимации, их очень легко создать любому, кто имеет базовые знания о GIMP.
Как сделать анимированный-g.webp" />
Следующие шаги показывают простую анимацию размером с веб-баннер, используя пару базовых изображений, немного текста и логотип.
Инструкции в этой статье относятся к GIMP версии 2.10.12.
-
Открыть новый документ. В этом примере мы выбрали предустановленный шаблон Веб-баннер большой мобильный 320x100..
Для вашей анимации вы можете выбрать предустановленный размер или установить пользовательские размеры в зависимости от того, как вы будете использовать свою окончательную анимацию.
В этом уроке анимация будет состоять из семи кадров, и каждый кадр будет представлен отдельным слоем, что означает, что окончательный файл GIMP будет иметь семь слоев, включая фон.
-
Установить первый кадр. Анимация начнется с пустого пространства, поэтому никаких изменений в фактическом слое Background не требуется, так как он уже белый.
Однако необходимо изменить имя слоя в палитре Слои. Щелкните правой кнопкой мыши на слое Background в палитре и выберите Edit Layer Attributes.
Image -
В открывшемся диалоговом окне Редактировать атрибуты слоя добавьте (250ms) в конец имени слоя. Это устанавливает количество времени, в течение которого этот кадр будет отображаться в анимации. ms означает миллисекунды, а каждая миллисекунда составляет тысячную долю секунды. Этот первый кадр будет отображаться в течение четверти секунды.
Image -
Установить второй кадр. В этом уроке для этого кадра используется изображение посадочного места. Перейдите к File > Open as Layers и выберите графический файл. Это помещает посадочное место на новый слой, который можно позиционировать по мере необходимости с помощью Move Tool..
Image -
Как и фоновый слой, этот новый слой необходимо переименовать, чтобы назначить время отображения для кадра. В данном случае 750 мс.
В палитре Слои новый предварительный просмотр слоя показывает черный фон вокруг изображения, но на самом деле эта область прозрачна.
Image -
Установите кадры три, четыре и пять. Следующие три кадра - это дополнительные следы, которые будут ходить по баннеру. Они вставляются так же, как и второй кадр, с использованием той же графики и другой графики для другой стопы. Как и прежде, время установлено равным 750 мс для каждого кадра.
Каждому из слоев посадочного места нужен белый фон, чтобы был виден только один кадр - в настоящее время каждый из них имеет прозрачный фон. Мы можем сделать это, создав новый слой непосредственно под слоем следа, заполнив новый слой белым цветом, а затем щелкнув правой кнопкой мыши слой следа и выбрав Объединить вниз
-
Set Frame Six. Этот кадр - просто пустой кадр, заполненный белым цветом, который создаст впечатление, что последний след исчезает до того, как последний кадр появится. Мы назвали этот слой «Интервал» и решили отображать его всего 250 мс.
Вам не нужно давать имена слоям, но это может упростить работу с многослойными файлами.
Image -
Set Frame Seven. Это последний кадр, на котором отображается текст вместе с логотипом Lifewire.com. Первым шагом здесь является добавление еще одного слоя с белым фоном.
Image -
Далее используйте Инструмент «Текст», чтобы добавить текст. Это применяется к новому слою, но мы займемся этим, как только вы добавите логотип или новое изображение, что можно сделать так же, как ранее добавляли графику следа.
Image -
Когда мы упорядочим их по желанию, мы можем использовать Объединить вниз, чтобы объединить логотип и текстовые слои, а затем объединить этот комбинированный слой с добавленным белым слоем. ранее. Это создает один слой, который сформирует окончательный кадр, и мы решили отображать его в течение 4000 мс.
Image -
Предварительный просмотр анимации Перед сохранением анимированного-g.webp" />Фильтры >Анимация > Воспроизведение Откроется диалоговое окно предварительного просмотра с кнопками, которые говорят сами за себя, для воспроизведения анимации. Если что-то не так, это можно исправить на этом этапе. В противном случае его можно сохранить как анимированный GIF.
Последовательность анимации задается в том порядке, в котором слои располагаются друг над другом в палитре Слои, начиная с фона или самого нижнего слоя и продвигаясь вверх. Если ваша анимация воспроизводится не по порядку, вам нужно будет настроить порядок слоев, щелкнув слой, чтобы выбрать его, и используя стрелки вверх и вниз в нижней панели палитры слоев, чтобы изменить его положение.
Image -
Сохранить анимированный GIF. Сохранение анимированного-g.webp" />Файл > Сохранить копию и дайте файлу подходящее имя и выберите, где вы хотите сохранить файл.
Image -
Далее перейдите к Файл > Экспортировать как, чтобы сохранить его как анимированный GIF.
Image -
В открывшемся диалоговом окне Экспорт изображения выберите Выбрать тип файла, прокрутите до изображения-g.webp" />. Если вы получаете предупреждение о слоях, выходящих за фактические границы изображения, нажмите кнопку Crop.
Image -
Теперь это приведет к диалоговому окну Сохранить как GIF с разделом Параметры анимированного GIF. Вы можете оставить значения по умолчанию, но если вы хотите, чтобы анимация воспроизводилась только один раз, снимите флажок Loop forever.
Image - Теперь вы можете поделиться своим анимированным GIF.
Вывод
Шаги, показанные здесь, дадут вам базовые инструменты для создания собственных простых анимаций с использованием различной графики и размеров документов. Хотя конечный результат довольно прост с точки зрения анимации, это очень простой процесс, который может выполнить любой, у кого есть базовые знания GIMP.
