Создаю фигуру - тор. Фигура похожа на бублик. Для этого инструментом эллиптическое выделение рисую эллипс и заливаю его красным цветом.
Теперь немного трансформирую эту фигуру инструментом "Перспектива". После преобразования мой эллипс стал иметь вид
В слоях появился "Плавающий слой", который необходимо убрать. Нажимаем на иконку нового слоя в палитре слоев и теперь у нас получилось два слоя. Слой с эллипсом и прозрачный фон. Слой с фоном удаляем.
Слой с эллипсом переименовываем, например, "Диск1". Для этого в палитре слоев щелкаем дважды по иконке с эллипсом и вызываем диалоговое окно
"Правка атрибутов слоя". В графе имя слоя вписываем название и нажимаем "OK".
Теперь выполним команду
"Слой-Слой к размеру изображения". Продолжаем рисовать из нашего трансформированного эллипса – тор, т.е. приделаем эллипсу дырку. Для этого выделяем инструментом Волшебная палочка наш эллипс и идем во вкладку меню
"Выделение". Выбираем пункт "Уменьшить выделение". Значение на ваш выбор. Я взяла "40". Выделение уменьшилось. Жмем "delete" на клавиатуре и получаем нашу дырку от бублика.
Все фигура наша готова.
Будем делать анимацию. Так как анимация- это смена кадров, в каждом из которых, что-то меняется, то создадим 3 дубля-кадра нашего слоя.
Для того, чтобы создать анимацию в каждом слое используем градиентную заливку, изменяя направление заливки или ее протяжение по объекту. Для того же чтобы залить в каждом кадре наш тор, его необходимо выделить. Используем для этого инструмент "Выделение по цвету".
Щелкаем по красному цвету внутри фигуры и она выделена далее ее можно заливать градиентом.
Если вам будет удобнее и нагляднее, то снимите видимость с верхних слоев, оставив видимым только нижний. Сделайте слой активным и залейте его выбранным градиентом. Затем перейдите на второй слой включите его видимость и выделите его. Также залейте его выбранным градиентом, но, например, измените направление градиента или его протяжение. Затем включите третий слой, выделите его и залейте градиентом. Внимательно следите за тем, чтобы был выделен тот слой, с которым вы работаете.
Слои залиты выбранным градиентом. Можно даже просмотреть анимацию. "Фильтр-Анимация-Воспроизведение". Анимация работает.
Сделаем обводку нашего объекта на каждом слое. Установим цвет переднего плана ближе к черному. Выделяем первый слой, делая его рабочим. Объект у нас выделен, поэтому идем во вкладку меню
"Выделение" и щелкаем по строке "Редактор выделения". Откроется диалоговое окно
"Правка выделенной области". Выбираем пункт
"Обвести указанным типом линии" и выставляем параметры как на скрине (или свои). Нажимаем
"Обвести". Далее поочередно делаем рабочими второй и третий слои. Выпоняем обводку, в каждом случае с теми же параметрами, как на первом слое.
Следующим шагом будет создание к каждому слою этой анимации полупрозрачного отражения.
Создаем каждому слою дубль. Всего у нас теперь получится 6 слоев или 3 группы, в каждой из которой по 2 одинаковых слоя.
В каждой группе из одинаковых слоев нижний слой переименуйте в Дубль1,Дубль2,Дубль3, соответственно, а верхние слои каждой группы - Диск1, Диск2, Диск3.
Нижние слои мы сначала сдвинем относительно основных, для того чтобы их было видно, а затем будем делать полупрозрачными.
Для этого, выключите глазки видимости на основных слоях Диск 1, Диск2, Диск3. Затем свяжите слои Дубль1,Дубль2, Дубль3. Для этого щелкните в клеточке рядом с глазком видимости в каждом из этих слоев. Рядом со связываемым слоем должна появиться цепочка
Выберите инструмент "Перемещение" и сдвиньте связанные слои. Включите видимость основных слоев и отрегулируйте положение слоев "Дубль", так чтобы эти слои были хорошо видны из- под основных.
Развяжите слои и для всех слоев выполните команду "Слой-Слой к размеру изображения".
Теперь слои дубли по очереди сделаем полупрозрачными. Значение непрозрачности для каждого слоя я выбрала "40". Вы можете выбрать свое.
К каждому слою "Дубль", после смены значения непрозрачности можно также применить фильтр "Размывание". "Фильтры-Размывание-Гауссово размывание".
Объединим Основные слои с их дублями. Встаем на каждый основной слой поочередно, начиная с "Диск1" и выполняем
"Слой –Объединить с предыдущим". Следите внимательно, чтобы каждый основной слой "Диск" объединился со своим дублем. Теперь у нас З слоя "Диск" со своим полупрозрачным отражением.
Каждому объединенному слою добавим эффект полупрозрачной отбрасываемой тени.
Поочередно встаем на каждый из трех слоев и применяем
фильтр "Свет и тень – Отбрасываемая тень" с параметрами, как на скрине (или свои значения)
Под каждым слоем у нас получился слой с отбрасываемой полупрозрачной тенью
Объединим каждый основной слой с его тенью и выполним для каждого слоя команду
"Слой – Слой к размеру изображения" Инструментом "Кадрирование" можно убрать лишнее поле вокруг нашего объекта с тенью.
Щелкните внутри выделения, чтобы применить кадрирование.
Далее нам осталось сохранить нашу созданную анимацию в формате APNG и убедиться, что все созданные нами эффекты –полупрозрачное отражение и полупрозрачная тень, останутся таковыми и после сохранения нашей анимации.
Поскольку оптимизировать наше изображение перед сохранением нельзя, то правку атрибутов слоя будем делать сами. Для этого щелкаем дважды на иконке слоя и вызываем диалоговое окно "Правка атрибутов слоя". Делаем это поочередно с каждым слоем, начиная с первого. Вписываем в графу Имя слоя соответственно по номерам
#1(180ms)(replace)
#2(180ms)(replace)
#3(180ms)(replace) 180-это задержка воспроизведения анимации,
replace –это режим отображения смены кадров в анимации. При данном режиме последующее изображение полностью скрывает предыдущее
Сохраняем нашу анимацию. Идем "Файл-Сохранить как"
После того как указаны все атрибуты сохранения и выбран формат сохранения (в нашем случае он называется PNG+APNG image. ) нажимаем сохранить. Появится диалоговое окно для ввода атрибутов сохранения в формате APNG и библиотека командной строки сохранения APNG.
В диалоговом окне сохранения в формате APNG, отмечаем пункты как на скрине.
Нажимаем "Export"
Если все сделали правильно, пойдет процесс сохранения. Загрузчик будет показывать сохранения каждого слоя. Если что-то сделали не так – в сохранении будет отказано. Очень часто это происходит если изображение пытались оптимизировать или какой-то из слоев не приведен К размеру изображения. Просматриваем полученное изображение в просмотрщике на вашем компьютере (например XnViewPortable_1.97.8 ) и в браузере, который поддерживает формат APNG(например FirefoxPortable_4.0.1_Russian или Opera)
Вот наше изображение сохраненное в APNG на фотохостинге Fastpic.ru
А это текст созданный по такому же принципу.
Еще раз повторю последовательность создания и сохранения изображения на прозрачном слое в формате APNG в редакторе GIMP.
Еще раз повторю последовательность создания и сохранения изображения на прозрачном слое в формате APNG в редакторе GIMP.
1. Создаем или открываем изображение PNG в GIMP.
2. Создаем слои для анимации.
3. Применяем к слоям эффекты.
4. Все слои приводим к Слой-Слой к размеру изображения.
5. Оптимизировать анимацию в Gimp нельзя!
6. Вводим атрибуты слоя, которые должны содержать время задержки кадров и режим воспроизведения анимации. Например, #1(180ms)(replace).
7. Сохраняем анимацию в APNG.
8. Оптимизируем APNG изображение.
Теперь об оптимизации полученного изображения. Есть небольшая портативная программа
apngopt_gui-1.0-bin-win32 Пользоваться ей довольно просто. Указываете путь к изображению APNG, которое хотите оптимизировать и путь для сохранения оптимизированного изображения. Жмете Старт и ждете выполнения оптимизации.
Так созданное в уроке изображение Диск размером 271x243пикс весило 162 КБ, а после оптимизации 125 КБ.
Я создала еще одну анимационную картинку в Gimp, но не на прозрачном слое, а только используя в нем изображение PNG.
После сохранения ее в формате APNG она, при размере 640x640 пикс, весила аж 6,08 МБ, что, конечно же очень и очень много.
После обработки этой картинки в программе apngopt_gui-1.0-bin-win32 картинка при тех же размерах стала весить 1,29 МБ, что вполне допустимо.
Иногда после оптимизации вес картинки снижается существенно, иногда не очень. Но в любом случае программа очень нужная.
Скачать ее можно здесь apngopt_gui-1.0-bin-win32.zip Изображение созданное и сохраненное в APNG можно конвертировать в обычный GIF с помощью программы конвертирования
apng2gif_gui-1.2-bin-win32 Скачать ее можно здесь apng2gif_gui-1.2-bin-win32.zip 
