Уроки GIMP. Анимация движения воды в реке. Как сделать красивую анимацию с помощью Gimp

Анимационные изображения в формате gif встречаются повсеместно в Internet. Банеры, кнопки, логотипы, все они, используя даже небольшую анимацию, вносят в содержание страницы некую динамику. Существует множество различных программ, направленных специально на создание анимационных gif-изображений. Однако, большинство из них могут работать только с готовыми изображениями, искажая их или перемещая в пространстве. Поэтому совершенно логично, создавать анимационные изображения, используя программу, с помощью которой можно еще и рисовать. Ниже я хочу показать, как легко можно создать эффект анимации, используя GIMP.
Однако вначале, немного о самой идее анимационного gif. Формат gif позволяет хранить изображение в виде нескольких слоев, каждый из которых может представлять собой отдельное изображение. Идея в том, что каждому слою в gif-изображении, можно задать время, в течении которого он будет отображаться. Таким образом, чередуя слои можно получить анимацию.

Итак, как было сказано выше, для создания анимационного gif нужно иметь несколько слоев (подробнее о работе со слоями в GIMP читайте ). Рассмотрим простейший пример. Создайте новое изображение. Самый нижний слой оставим белым. На других четырех нарисуем появляющиеся буквы слова GIMP. Самый простой способ это сделать - это написать надпись на новом слое, затем создать четыре копии этого слоя и в каждом из них стереть ненужные буквы. Таким образом получится пять слоев, один из которых фон, четыре других представляют собой побуквенно собирающееся слово GIMP:

Теперь сохраните полученное изображение как gif (Файл - Сохранить как ). После этого GIMP предложит Вам экспортировать изображение в gif. При этом он даст выбрать, объединять ли слои в одно изображение или сохранить их как анимацию. Т.к. нас интересует именно анимация, выберем второе и нажмем "Экспорт ". После этого откроется меню выбора параметров анимационного gif:

Первые два параметра задают общие свойства gif - это черезстрочность и комментарий . Нас больше интересуют параметры анимации:

- Бесконечный цикл . При включении этого параметра, чередование слоев будет выполняться бесконечно, т.е. после отображения последнего слоя будет отображен первый. Если этот параметр будет отключен, то анимация будет проиграна один раз и остановится на изображении последнего слоя.

- Задержка между кадрами - время в микросекундах, которое по умолчанию будет отображаться каждый слой.

- Расположение кадра - имеет три режима. Первый (по умолчанию) - I Don`t Care (неважно) , говорит GIMP распорядиться самостоятельно. Второй - Combine (наложение слоев) , накладвает один слой на другой не убирая предыдущие, т.е. объединяет их. Таким образом, если у вас есть прозрачные места в слоях, предыдущие слои будут сквозь них проглядывать. По умолчанию GIMP обычно использует именно этот режим как наиболее гибкий. Я тоже всегда использую его. Третий режим - Replace (один кадр на слой) , замещает предыдущий слой на новый.

Используйте расположение слоев по умолчанию, а время между кадрами поставьте 200. В результате должен получиться вот такой gif:

Если теперь открыть этот gif с помощью GIMP, то увидим, что в диалоге слоев в названии каждого слоя в скобках добавился параметр - время отображения. Таким образом, изменив значение в скобках можно задать каждому слою свое персональное время отображения. Например, установите значение 500 для последнего слоя, чтобы полная надпись оставалась на экране подольше.

Это был самый простой пример создания анимашки. Но нам всегда охота большего! Настало время обратиться к специальному пункту меню Фильтры - Анимация . Оно содержит три пункта - Воспроизведение , Оптимизация и Разоптимизация . Разберемся что к чему:

- Воспроизведение . Этот пункт позволяет нам воспроизводить свежеполученное анимационное изображение:

Выше приведен анимационный gif имитирующий работу этого фильтра, запущенного кнопкой Пуск/Стоп . Таким образом видно, что эта кнопка запускает проигрывание изображения и она же его останавливает. Кнопка Перемотка возвращает нас на первый кадр изображения, кнопка Шаг позволяет менять кадры вручную. Но все это далеко не самые интересные возможности этого фильтра. Если щелкнуть мышкой на проигрываемое изображение, то Вы увидите как курсор измениться на вертикальную стрелочку. Теперь вы можете перетащить анимашку в любое(!) место экрана, например в окно браузера, чтобы посмотреть как будет выгляжеть этот анимационный рисунок на Вашей страничке. Кстати, этой возможностью можно пользоваться и для неанимационных изображений.

- Оптимизация . Когда я впервые применил этот фильтр, моему восторгу не было предела. Дело в том, что каждый слой в анимационном gif-е представляет собой, по сути, отдельное изображение и сохраняя gif как анимацию, мы сохраняем сразу несколько изображений. Таким образом, при большом количестве слоев размер нашего анимационного gif будет расти прямо на глазах, что не есть хорошо, учитывая стремление минимизировать размер изображений для web. Одним из выходов из положения, может быть уменьшение в ручную размеров каждого слоя и уничтожение лишних кусков. Забудьте про это!!! Фильтр Оптимизация в два счета сделает все за Вас!!!. Фильтр делает приблизительно следующее: он просчитывает каждый слой и находит изменившиеся точки, относительно предыдущего и оставляет только их, изменяя размер слоя на минимально возможный (т.е. обрезая по крайним изменившимся точкам). При этом все неизменившиеся точки внутри этого слоя будут заменены на прозрачные. Возьмите недавно созданный gif с надписью GIMP и примените этот фильтр.

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

Такого же эффекта можно было бы добиться и с режимом combine , оставив изначально в каждом слое только одну букву и применив фильтр Оптимизация . Разница будет в том, что при этом каждый слой будет содержать одну черную букву и одну цвета фона, чтобы закрасить предыдущую. В результате - больший объем файла. Однако, зачастую, выигрыш не столь велик, а работать с replace не очень удобно, поэтому лично я никогда им не пользуюсь.
Кроме всего прочего, Оптимизация дает неоценимую помощь при работе со слоями в которой присутствуют размытые изображения. Т.к. gif содержит в себе максимум 256 цветов, то размытость объекта на прозрачном фоне отобразить очень сложно и часто она просто-напросто пропадает. Поэтому я всегда использую в каждом слое фоновое изображение, а на нем уже рисую новый элемент. Например, на сайте компании в которой я работаю, мне нужно было изобразить вращающийся солнечный блик на фоне здания . Когда я сделал каждый блик в новом слое отдельно от здания, при сохранении в gif он потерял половину своих лучей и перестал быть размытым. Тогда я скопировал изображение здания в каждый слой, нарисовал на нем блики и оптимизировал. В результате получил то что хотел, а размер файла уменьшился в три раза по сравнению с неоптимизированным!

- Разоптимизация . Фильтр обратный оптимизации. До сих пор я не нашел ему должного применения, но вполне возможно, что он может пригодиться, когда Вам нужно будет внести изменения в оптимизированное изображение.

Итак, мы разобрались с основными принципами создания анимационных gif с помощью GIMP. Вкратце подводя итоги, можно сделать следующие выводы:
1 . Каждый кадр анимации представляет собой отдельный слой изображения.
2 . Каждому кадру можно указать два параметра: время показа в микросекундах и его тип, combine (объединение) или replace (замещение). Параметры задаются в имени слоя и заключаются в скобки, например: Слой1 (1000ms)(combine).
3 . Оптимизация слоев позволяет заметно уменьшить размеры анимационного изображения.

Вот собственно и все об основных приемах создания анимационных gif изображениях с помощью GIMP. Надеюсь, эта небольшая статья оказалась для Вас полезной. Если у Вас есть замечания или дополнения, пишите мне на e-mail.

Gimp

Это инструкция по Gimpу. Сказать честно, я не очень хорошо рисую от руки, но с такими программами как Gimp, мои художественные возможности увеличились. Я хочу заполнить акак.ру своими Gimp-инструкциями, и помочь многим людям, которых достали компьютерные игрушки, пустое времяпровождение в инете и черезмерная работа в WordPade. Надеюсь вам понравится!

Инструкция

Уровень сложности: Несложно

Что вам понадобится:

• Фантазия
• Интерес

1 шаг

Борьба оттенков

Для начала создадим пустой рисунок. После используем инструмент «плоская заливка”. Выберем нужный для себя цвет, зажмем ctrl, и отведем полоску в низ. Все должно выглядеть примерно как на картинке.

2 шаг

Я выбрал такую расцветку

Теперь нам нужны «цвет” – «тонирование”, подбираем цвет, и сохраняем. Цвет можно выбрать любой, но учтите, что в будущем на этом фоне будет классный логотип с вашим именем.

3 шаг

Эффект «Змеиная кожа»

Теперь поработаем с фильтрами. Нажимаем «фильтры” – «искажения” – «мозаика”. Введите нужные вам настройки, и сохраните. Данный эффект можно использовать для создания фресок, сфер, фонов и для просто так.

4 шаг

Должно получится примерно так.

Теперь нам нужно напечатать пару слов. Для этого берем инструмент похожий на букву;), выбираем нужный нам шрифт и напишем что-нибудь. Я выбрал свое имя. Напечатав, берем инструмент «эппилиптическое выделение” и обводим текст так, что бы оставалось не много пространства возле текста. Теперь берем «фильтры” – «свет и тень” – «сверхновая”. Поставив одну «звездочку” в зоне выделения, возьмем инструмент «палец” и размажем звездочку вокруг текста.

5 шаг

А теперь самое главное! Анимация. Берем «фильтры” – «анимация” – «создание сферы (шара)”. Оставляем настройки как есть, и сохраняем. Должно выскочить новое окно. Чтобы просмотреть анимацию заходим в «фильтры” – «анимация” – «воспроизведение”. Выскакивает новое окно, вы нажимаете воспроизведение, и смотрите свое творение. Кстати скорость просмотра можно регулировать с помощью левого нижнего угла.

6 шаг

» вариант. Теперь берем анимацию под названием «рябь” Все делаем как в шаге выше. Сохранять анимации нужно по особому! Нажимаем на «файл” – «сохраняем как…” и вводим название вашей картинки. Внизу есть окно «выберите тип файла по…”, БЕРЕМ ФОРМАТ GIF , а иначе у вас будет просто картинка. Сохраняем, выскакивает новое окно, и там обязательно выберете «сохранить как анимацию”. И картинка спасена

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

Небольшое отступление от урока! В прошлый раз я говорил про небольшой конкурс, приуроченный к выходу книги .

Еще раз напомню условия конкурса: «Вы должны найти слово, в котором я переставил одну букву . В результате этих манипуляций получилось совершенно новое слово ! Победители получат по 100 рублей на свои электронные кошельки. Всего будет трое счастливчиков , которых случайным образом выберет компьютер из 20 первых присылавших мне номер страницы, на которой вы нашли ошибку. Конкурс будет проходить до 10 сентября включительно . Жду ваших сообщений с номером страницы . По активнее друзья! Ищем, ищем. Маленькая подсказка: «Ошибка после 50 страницы»

А теперь, возвращаемся к нашему уроку

Шаг 1. Открываем редактор и создаем новое изображение (я выбрал размер по умолчанию 640 — 480)

Шаг 3. На панели инструментов выбираем «Текст». Шрифт я оставил по умолчанию (у меня «Sans») и размер ввел — 180. После этого щелкаем по рабочему холсту, чтобы активировать текстовую область и вводим с клавиатуры цифру «1»

Шаг 4. После этого нам необходимо выронить цифру по центру слоя. Выбираем инструмент «Выравнивание» (1) и нажимаем один раз по цифре(2) для активации параметров. После этого поочередно нажимаем на пиктограммы (3) и (4)

Шаг 5. Теперь объединим текстовый слой с фоновым. Для этого щелкаем один раз правой кнопкой мыши по верхнему слою и в открывшемся контекстовом меню выбираем «Объединить с предыдущим»

Шаг 6. Аналогичным образом создадим еще два слоя, но на этот раз с цифрами «2» и «3»

Шаг 7. Теперь, когда мы создали три слоя, пора приступить к анимации. Здесь стоит запомнить одно важное правило:

Слои в панели слоев - это наши кадры анимации . Нижний слой соответствует первому кадру т.д.

Для создания анимации перейдем в

«Фильтры - Анимация - Воспроизведение»

В открывшемся диалоговом окне нажнем на «Play» и посмотрим, как быстро меняются наши числа:-)))

Очень быстро? Неправда ли? Как же нам отрегулировать скорость наших кадров? Здесь все просто друзья. Для этого достаточно в имени слоя дописать конструкцию вида (1000ms) , что соответствует одной секунде показа кадра. Посмотрите, что у меня получилось

Я везде к имени слоя дописал (1000ms). После чего давайте снова воспользуемся выше упомянутым фильтром анимации.

Шаг 9. В открывшемся диалоговом окне ставим галочку на против пункта «Сохранить как анимацию»

и нажимаем кнопку «Экспорт»

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

P.S. А какие уроки анимации хотите видеть Вы друзья на страничках блога???

С уважением, Антон Лапшин!

Кроссворд №3 на сайт

Антон Лапшин

У Вас либо старый браузер, либо отключена поддержка Javascript.
Работа кроссворда невозможна.

Viewing 12 posts - 1 through 12 (of 12 total)

Уважаемые гуру гимпа, подскажите пожалуйста новичку! Не могу разобраться.

Как сделать такую gif-картинку, чтобы три картинки сменяли друг друга, но при этом на каждой из этих картинок тоже была анимация (появлялся текст)?!


Делать данную анимацию вручную – муторно долго (хотя возможно.)
Да и Gimp для анимации не самый лучший выбор. Вотчина анимации – векторная графика.
Если задача частная, т.е. её предстоит сделать один раз и забыть, то лучше создать презентацию в Impress и экспортировать её в gif.
(входит в пакет LibreOffice -> http://ru.libreoffice.org/download/)
При этом эффектов там тьма, не только затухание. Выйдет дёшево и сердито.
Если хочется делать именно в Gimp, то Вам нужно скачать GAP (GIMP Animation Package)

На русском языке про него можно почитать:
http://www.gimpbnksb.ru/forum/14-152-1

Ladd , спасибо! буду пробовать сейчас этот плагин, разбираться:)
офис не подходит, ибо задача – сделать баннер.

Можешь просто хоть этапы расписать для создания того, что мне требуется (если делать долго и муторно:D) ? а дальше сам постараюсь разобраться…
Просто не понимаю что именно нужно делать, чтобы достичь желанного результата… насколько понимаю, нужно делать много слоёв (последовательность – сначала слой с картинкой, потом слои с текстами, потом слой второй картинки и т.д.) и потом всё это выгружать в gif, так?!

Первый мой совет отпадает потому, что LibreOffice неадекватно сохраняет эффекты анимации в формате gif.
Как вручную?
1. Прочитать немного инфо про gif
2. Разобраться, что такое режим combine/replace
3. Создать простую анимацию и экспортировать в gif (например, нарисуйте анимацию прыгающего мячика, 4-6 кадров)
4. Создать черновой вариант Вашей анимации
5. Экспериментально оценить размеры выходного файла и необходимость оптимизации
6. Сохранять изображение в режиме: Индексировнный цвет (т.е. со своей палитрой)
7. Разобраться с Gap, он здорово поможет.
8. Для экспериментов с задержкой использовать любую анимацию. Например:

Если нужно делать много анимации – переходите во flash, более серьёзные ролики можно рисовать. Качество у такой анимации на голову выше.
P.S. Последовательность верна, только разберитесь, в чём разница между combine и replace, а так же, как ведет себя альфа-канал.

Не согласен. Значит что-то не так делали с флэш. Флеш основана на векторной графике, шрифты на векторной графике, все эффекты это чистая математика, размер файла будет маленьким. Единственное что могло увеличить размер итогового ролика, так это не правильно импортированные растровые картинки (либо Вы их так и оставили в растре, или трассировка произведена с неудачными параметрами.)

И это скорей всего, что с флеш делаю что-нить не то…. :)
Просто раньше напарник был, который как раз и занимался дизайном и графикой, а я только по коду был…. Он ушёл, и всю его работу взвалили и на меня, вот обучаюсь теперь! :)

Редактором очень доволен! Интуитивно понятен, если с ним хоть немного посидеть.

Со всем уже вроде разобрался, вот только появился один вопросик – а можно как-то сделать разную задержку между показом отдельных слоёв (кадров), если сохраняю в.gif как анимацию? или задержка задаётся одним параметром для ВСЕХ слоёв разом в окне, когда уже экспортирую в.gif ?

Очень просто сделать разную задержку:
1. Подготовить файл из нескольких слоев
2. Экспортировать в gif с общей для всех кадров задержкой
3. Открыть gif файл
4. В стопке слоёв (Диалог слоёв) рядом с названием слоя будет указана задержка
(100 ms по умолчанию.) Меняем это значение на 500 ms у какого либо слоя, экспортируем заново в gif и вуаля, кадр будет висеть пол секунды.
P.S. Не уверен, что все просмотрщики будут поддерживать разную задержку у кадров одной анимации.

WiL-13 написал:
То есть появляется картинка, потом на ней строчки текста друг за другом, потом вторая картинка, на ней также несколько строк друг за другом и т. д…

Если анимация простая, то логичнее сделать на JavaScript или даже CSS3.
А от использования Flash действительно лучше отказаться, технология потихоньку умирает.

Большинство анимированных баннеров в Сети являются файлами GIF. Поскольку GIMP поддерживает GIF, то ничто не мешает нам делать в нем мультфильмы. Все знают как сложно, кропотливо и долго создаются мультипликационные фильмы. А вот простейший баннер можно создать за час. За дело!

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

Первый пример совсем несложный.

Рис. 1

Прежде чем приниматься за работу, полезно все рассчитать, чтобы меньше было возни с подгонкой. Если я хочу изобразить 4 шага, то и длина баннера должна быть кратна четырем. У меня 480 пикселей. Значит, каждый след (вместе с фоном) должен быть равен 480/4 = 120 пикселей. Тогда нам просто будет ставить эти картинки впритык одна к одной. Нужна ли нам прозрачность? Нет. Каждый верхний слой должен полностью закрывать предыдущий, иначе никакой смены кадров не получится. Тогда начинаем.

Создаем новый файл 120х60 пикселей с белым фоном. Рисуем в нем любым доступным способом отпечаток ботинка, так чтобы осталось достаточно белого пространства для длины шага. Можете скопировать рисунок 2 (я сам так поступил, никогда не мог подумать, что убедительный след так трудно нарисовать).

Рис. 2

Потом при помощи меню Изображение -> Преобразования -> Отразить по вертикали делаем левый след. Сохраняем как GIF. Перед сохранением полезно сначала преобразовать изображение в индексированное (Изображение -> Режим -> Индексированное ). Тогда размер файла будет меньше, что имеет первостепенное значение для баннера. При настройке диалога укажите 16 цветов - больше чем достаточно для черно-белого баннера. Спрашивается, а почему не 2 цвета? Я пробовал, очень грубые получаются отпечатки, да и буквы шрифта выглядят отвратительно.

Рис. 3

Обратите внимание, что левый след смещен вперед по сравнению с правым, это дает длину шага.

Покончив со следами, создаем основной файл 480х60 пикселей, фон белый. Открываем окно Слои: Диалоги -> Слои (Окно ->Прикрепляющиеся диалоги -> Слои ). Сходу переименовываем (двойным кликом) наш единственный слой Фон . Теперь он должен называться Фон(250ms) . Ровно через столько миллисекунд он позволит появиться следующему слою, который скроет его из видимости.

Поверх первого слоя создаем новый белый слой. Мышью перетаскиваем на него файл первого следа. Автоматом создается еще один слой right.gif . Устанавливаем след в самое начало "дорожки" при помощи инструмента , либо при помощи стрелок клавиатуры.

Эти два верхних слоя теперь нужно слить в один (правокнопочное меню на верхнем слое -> Объединить с предыдущим ).

Назовем объединенный слой 1(750ms) .

Снова создаем новый белый слой. Перетаскиваем левый след (если не хотите перетаскивать, можно воспользоваться меню Файл -> Открыть как слой ). Устанавливаем его на место, помня, что длина изображения следа 120 пикселей, а наверху экрана имеется линейка. Объединяем слои, называем 2(750ms) .

Потом снова создаем новый белый слой.

Инструмент Текст автоматически создает новый прозрачный слой с текстом. После выравнивания надписи, мы объединяем два верхних слоя под общим именем Текст(3000ms) . Вот как выглядит окно Слои в конце работы:

Рис. 4

Мультфильм готов. Можно и нужно просмотреть его при помощи меню: Фильтры -> Анимация -> Воспроизведение .

Если есть недочеты, устраняем их. Если нет, то сохраняем файл.

Сохранять будем в формате GIF. Для этого идем: Файл -> Сохранить копию , и в открывшемся окне указываем имя файла footstep.gif . Жмем Сохранит ь. Тут появляется диалог сохранения GIF:

Рис. 5

Полученный файл footstep.gif можно просматривать как мультфильм в любом браузере.

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