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

Мы будем создавать очень простой web банер. Начнем с создания нового изображения размером 468×60 пикселей. Используйте в качестве фона белый цвет. Создайте новый прозрачный слой. Выделите все изображение с помощью Ctrl+A и залейте его черным цветом (Ctrl+,). Уменьшите выделенную область на 1 пиксель (<Изображение> Выделение → Уменьшение) и очистите выделенную область комбинацией клавиш Ctrl+K. Мы создали рамку толщиной в 1 пиксель вокруг банера.

Сейчас самое времы вставить в банер наш логотип или картинку. Я приготовил цветок, который вы можете видеть на картинке слева. Я добавил цветок перед слоем с границей. Использовал Альфа-канал → Выделенная область, создал пустой слой перед ним (перед слоем с цветком) и заполнил выделенную область черным цветом используя сочетание кнопок Ctrl+,. После этого я создал тень, используя Гауссово размывание RLE и сместил ее на два пикселя вниз и вправо. Я не могу удержаться от добавления эффекта переплетения используя <Изображение> Фильтры → Рендеринг → Сетка и маску слоя. В маске слоя я применил черно-белый градиент, поэтому левый край цветка не переплетается. (странно звучит...)

Эта часть руководства не является ключевой, поэтому вы можете эксперементировать. Когда вы закончили с размещением изображения, обьедините слои используя <Изображение> Изображение → Свести изображение.

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

После этого, используя стандартный инструмент Добавить текст к изображению добавляем небольшой текст к каждому кадру. После помещения текста в кадр, GIMP создаст выделенную область, вам нужно только отпозиционировать ее справа используя инструмент Перемещение и прикрепить (поставить якорь) используя комбинацию Ctrl+H. Позиционирование является критичным для завершающей анимации, поэтому вы можете использовать следующий трюк, делающий позиционирование очень легким (piece of cake в оригинале , прим.). Перед добавлением текста установите прозрачность слоя (кадра) в более низкое значение так, чтобы вы могли видеть слой, находящийся перед ним. Таким образом вы можете позиционировать новый текст относительно предыдущего (того, который находится в предыдущем кадре).

В GIF анимации возможно указание задержки между кадрами. Таким образом можно создать 12 секундную анимацию, используя всего несколько кадров, так как промежуток времени не является константным значением. В GIMP задержка указывается в названии слоя. Достаточно сделать двойное нажатие мышью на названии слоя и указать временной интервал в ms (милисекундах), заключенный в круглые скобки.

Проверить правильность определения времени можно используя предварительный просмотр анимации - <Изображение> Фильтры → Анимация → Воспроизведение. Вы так же можете перемещать окно предварительного просмотра по рабочему столу.

В последнем шаге мы будем использовать очень удобную функцию для применения фильтра к нескольким слоям. Эта функция входит в состав GAP - пакета для анимации в GIMP. Посетите руководство по использованию GAP для того, чтобы узнать больше про этот инструмент.

Перед тем, как мы сможем применить этот эффект нам нужно создать изображение третьего кадра как отдельное (анимация слов is easy, - автор не четко писал. прим.). Это легко делается перемещением предварительного просмотра слоя из меню слоев на панель инструментов. Теперь сделаем четыре копии нового изображения. С помощью инструмента прямоугольного выделения создадим выделенную область вокруг текста. Теперь мы готовы к применению размывания Гаусса для каждого слоя используя разные параметры. Используем функцию <Изображение> Фильтры → Применить ко всем слоям, выбираем Гауссово размывание RLE. На экране появляется диалог размывания. Мы должны задать параметры для самого первого слоя в стеке - нашего первого кадра.

Мы хотим постепенное размывание текста, поэтому для первого кадра укажем маленькое значение. Размывание будет только горизонтальным, поэтому устанавливаем его в v:0 h:2. После того, как вы нажмете OK появится другой диалог. Нажимаем продолжить и указываем параметры для последнего кадра. У нас будет горизонтальное размывание на 20 пикселей. Нажимаем продолжить. Теперь от нас требуется перенести слои в оригинальное изображение. (Возможны неточности в переводе, автор имел ввиду то, что нужно добавить эти слои за последним кадром для эффекта плавного растворения слов is easy, прим.)

Теперь осталось сохранить анимацию в формате GIF. Но перед этим давайте оптимизируем изображение используя <Изображение> Фильтры → Анимация → Оптимизация. Вы можете создавать изображение используя два разных режима для каждого кадра: режим замена (replace) (используется по умолчанию, старый кадр заменяется новым) или режим составление (combine), когда каждый новый кадр добавляется к предыдущему (тогда обновляются только изменения). Анимация → Оптимизация использует режим combine, что делает размер изображения существенно меньше. Теперь нам нужно сделать изображение индексированным используя <Изображение> Изображение → Режим → Индексированное (Alt+I).

Пытайтесь использовать как можно меньше цветов и избегать смешивания цветов. Оба этих фактора очень сильно увеличивают размер файла. Я не использовал смешивания цветов и сгенерировал 32 цветную палитру. Размер банера получился около 7 килобайт. Когда вы будете сохранять изображение в формате GIF, GIMP предложит сохранить его как анимацию, чего мы собственно и добивались. В диалоге сохранения вы можете задать временную задержку между кадрами по умолчанию (в нашем случае это будет использованно для кадров с размытым текстом) и режим отображения кадров (combine или replace). Для проверки банера вы можете использовать свой броузер или воспользоваться функцией Воспроизведение в разделе Анимация в меню изображения.