Всем привет!

Сегодня решил рассказать, о том как в гимп создать простую анимацию мигания кнопки/иконки. Мигающие элементы применяются на сайтах для привлечения внимания и оповещают о таких событиях, как новое сообщение, различные скидки и акции, нахождение другого пользователя online и др.
В этом уроке мы будем создавать мигающую иконку статуса пользователя «online».

мигающая иконка для сайта

Рисуем иконку

Создадим маленькое изображение размером 16х16px — именно такого размера будет наша иконка.

Screenshot_1-min

Преобразуем цвет фонового изображения в альфа-канал (сделаем фон прозрачным). Для этого выполним команду: цвет>цвет в альфа-канал.

Screenshot_2-min

При помощи инструмента «Эллиптическое выделение» выделим всю внутреннюю область изображения:

Screenshot_3-min

В качестве основного и фонового цветов выберем темно-зеленый и светло-зеленый соответственно (хотя можете выбрать и свои цвета). В параметрах инструмента «Градиентная заливка» выберем радиальную форму:

Screenshot_4-min

Зальем выделенную область градиентной заливкой от центра к краю:

Screenshot_5-min

Создаем анимацию мигания в GIMP

Скопируем слой с иконкой (ПКМ>создать копию слоя):

Screenshot_6-min

Используя инструмент «Тон/Насыщенность» увеличим освещенность копии на 25 (Цвет>Тон/Насыщенность):

Screenshot_7-min

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

Screenshot_9-min

Если сохранить анимацию сейчас (о том как сохранять будет чуть ниже), то на выходе получится пульсирующая иконка:

пульсирующая иконка для сайта

Иконка пульсирует потому, что каждый новый цикл анимации начинается с нулевого слоя сразу после восьмого.
Эффект интересный, но если мы хотим, чтобы иконка равномерно плавно загоралась и затухала, то нужно добавить дополнительные слои.
Создадим копию каждого слоя кроме основного (тот что под цифрой 0) и расположим копии под ним как на скриншоте:

Screenshot_10-min

Таким образом каждый цикл будет заканчиваться на слое «8», а начинаться на слое «Копия 8″, что обеспечит плавное мигание:

плавно мигающая иконка для сайта

Преобразуем все изображение в индексированное (Изображение>Режим>Индексированное):

Screenshot_12-min

Остается лишь правильно сохранить анимацию командой: файл>Export As… (Экспортировать…). В качестве формата выбрать GIF и в открывшемся окне задать такие параметры:

Screenshot_13-min

Как видите — создание анимированных картинок в GIMP не такой уж и сложный процесс.