GIMP — это удивительно мощный программный продукт, учитывая, что он бесплатный. В частности, веб-дизайнеры могут быть благодарны за способность создавать простые анимированные GIF-изображения.
Анимированные GIF- файлы — это простые анимации, которые вы увидите на многих веб-страницах, и, хотя они гораздо менее сложны, чем флэш- анимации, их очень просто создать любому, кто имеет базовое понимание GIMP .
Следующие шаги показывают простую анимацию размером с веб-баннер с использованием нескольких основных графических элементов, текста и логотипа.
Инструкции в этой статье относятся к GIMP версии 2.10.12.
-
Откройте новый документ. В этом примере мы выбрали предустановленный шаблон веб-баннера большого мобильного 320×100 .
Для вашей анимации вы можете выбрать заданный размер или установить пользовательские размеры в зависимости от того, как вы будете использовать окончательную анимацию.
В этом уроке анимация будет состоять из семи кадров, и каждый кадр будет представлен отдельным слоем, а это означает, что в конечном файле GIMP будет семь слоев, включая фон.
-
Установите кадр один. Анимация начнется с пустого пространства, поэтому никаких изменений в фактическом фоновом слое не требуется, так как он уже просто белый.
Однако необходимо изменить имя слоя в палитре слоев . Щелкните правой кнопкой мыши фоновый слой в палитре и выберите « Редактировать атрибуты слоя» .
-
В открывшемся диалоговом окне « Редактировать атрибуты слоя» добавьте (250 мс) в конец имени слоя. Это устанавливает количество времени, которое этот кадр будет отображаться в анимации. MS обозначает миллисекунды, а каждая миллисекунда — тысячную долю секунды. Этот первый кадр будет отображаться в течение четверти секунды.
-
Установите кадр два. В этом уроке используется рисунок посадочного места. Перейдите в Файл > Открыть как слои и выберите графический файл. Это помещает элемент footprint на новый слой, который можно расположить по мере необходимости с помощью инструмента «Перемещение» .
-
Как и в случае фонового слоя, этот новый слой необходимо переименовать, чтобы назначить время отображения для кадра. В этом случае 750 мс.
В палитре « Слои» новый предварительный просмотр слоя отображает черный фон вокруг рисунка, но в действительности эта область прозрачна.
-
Установите кадры три, четыре и пять. Следующие три кадра — это больше следов, которые пройдут по баннеру. Они вставляются так же, как второй кадр, используя ту же графику и другую графику для другой ноги. Как и раньше, время установлено на 750 мс для каждого кадра.
Каждому из слоев посадочного места необходим белый фон, так что когда-либо виден только один кадр — в настоящее время каждый имеет прозрачный фон. Мы можем сделать это, создав новый слой непосредственно под слоем следа, заполнив новый слой белым цветом, а затем щелкнув правой кнопкой мыши по слою следа и щелкнув Объединить вниз .
-
Установите кадр шесть . Этот кадр — просто пустая рамка, заполненная белым, которая создаст впечатление, что последний отпечаток исчезает до появления последнего кадра. Мы назвали этот слой Interval и выбрали этот дисплей всего 250 мс.
Вам не нужно называть слои, но это может упростить работу с многоуровневыми файлами.
-
Установите кадр семь . Это последний кадр и отображает текст вместе с логотипом Lifewire.com. Первый шаг здесь — добавить еще один слой с белым фоном.
-
Затем используйте инструмент «Текст», чтобы добавить текст. Это применяется к новому слою, но мы будем иметь дело с этим, как только вы добавите логотип или новое изображение, что можно сделать так же, как ранее добавленная графика.
-
Когда мы настроим их по желанию, мы можем использовать Merge Down, чтобы объединить слои логотипа и текста, а затем объединить этот объединенный слой с белым слоем, который был добавлен ранее. Это создаст один слой, который сформирует окончательный кадр, и мы решили отображать его в течение 4000 мс.
-
Предварительный просмотр анимации . Перед сохранением анимированного GIF GIMP может предварительно просмотреть его в действии, выбрав « Фильтры» > « Анимация» > « Воспроизведение» . Откроется диалоговое окно предварительного просмотра с понятными кнопками для воспроизведения анимации. Если что-то выглядит не так, это может быть исправлено на этом этапе. В противном случае его можно сохранить как анимированный GIF.
Последовательность анимации устанавливается в том порядке, в котором слои укладываются в палитре слоев , начиная с фона или самого нижнего слоя и работая вверх. Если ваша анимация воспроизводится не по порядку, вам нужно отрегулировать порядок ваших слоев, щелкнув слой, чтобы выбрать его, и используя стрелки вверх и вниз в нижней панели палитры слоев, чтобы изменить его положение.
-
Сохраните Анимированный GIF . Сохранение анимированного GIF — довольно простое упражнение. Сначала перейдите в « Файл» > « Сохранить копию», дайте файлу соответствующее имя и выберите место, куда вы хотите сохранить файл.
-
Затем перейдите в File > Export As, чтобы сохранить его как анимированный GIF.
-
В открывшемся диалоговом окне « Экспорт изображения » выберите « Выбрать тип файла», выделите изображение GIF и выберите его, затем выберите « Экспорт» . Если вы получаете предупреждение о слоях, выходящих за пределы реальных границ изображения, нажмите кнопку « Обрезать» .
-
Теперь это приведет к диалоговому окну « Сохранить как GIF » с разделом « Параметры анимированного GIF» . Вы можете оставить их по умолчанию, хотя если вы хотите, чтобы анимация воспроизводилась только один раз, вы должны снять флажок навсегда .
-
Теперь вы можете поделиться своим анимированным GIF.
Заключение
Шаги, показанные здесь, дадут вам основные инструменты для создания ваших собственных простых анимаций, используя различные графики и размеры документов. Хотя конечный результат является базовым с точки зрения анимации, это очень простой процесс, которого может достичь любой, кто обладает базовыми знаниями в GIMP.