Анимация, Пара уроков, понятных каждому

Итак, как и обещала, открываю тему, посвященную анимации. Мной было замечено, что в "Аватарах на заказ" порой встречаются просьбы о добавлении или очень простой анимации, или хоть какой-нибудь. И то, и другое, как мне кажется, пользователи смогут сделать сами, если научатся основам сего нехитрого дела. Для создания "веселых картинок" понадобятся:

- графический редактор (советую, конечно же, фотошоп)
- аниматор

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

Автор темы на данный момент не дает консультаций по затронутым вопросам.

Лиссандра.

Сообщение отредактировал Лиссандра - 12-06-2007, 16:15

Урок № 1. Принцип анимации.

Итак, для начала пара слов о принципе анимации. Движение изображения получается путем быстрой смены картинок-«кадров», на которых изображены различные его стадии. Это и есть принцип работы всех программ аниматоров – соединение кадров в единый файл. Кадры могут быть нарисованы в любой графическом редакторе, их сложность ограничивается лишь вашей фантазией (ну и иногда ограничениями на размер изображения, как на форумах и в ЖЖ ;) ) – для этого вам впоследствии и понадобится фотошоп.

Сейчас мы будем работать с аниматором. Я еще раз настоятельно рекомендую новичкам в анимации брать Microsoft Gif Animator, иначе вы просто запутаетесь в обилии функций более навороченных программ. Открываем аниматор. Берем две картинки (сохраните их у себя):

Раз:
(IMG:http://img.photobucket.com/albums/v483/fluffy_kitten/Animation_lessons/1.gif)
Два:
(IMG:http://img.photobucket.com/albums/v483/fluffy_kitten/Animation_lessons/2.gif)

Нажимаем «Открыть» на панели и выбираем файл 1.gif с зеленой полосой. Далее нажимаем «Добавить» (Insert, кнопка с плюсиком) и выбираем картинку с красной полосой. При желании стрелками вверх-вниз на той же панели вы можете менять местами эти два кадра. Хотите посмотреть, что у вас получилось? Нажмите треугольник «Play» в конце. Немного не то, верно? Висит один кадр, никакой анимации не видно. Правильно, ведь мы ее еще не задали. Переходим на закладку Animation. Здесь мы видим:

Animation Width – ширина готового файла
Animation Height – его длина
Image count – количество кадров

И…Вот оно! Looping! Ставим галочку напротив этого свойства (свойства прокрутки) и напротив Repeat forever – постоянный повтор. Жмем на Play еще раз. Жутко, да? Аж в глазах рябит! Идем на третью закладку Image. Здесь нам надо установить, какое время каждый кадр будет показываться зрителю. Это свойство Duration, измерение подписано рядом с ним. Вы можете последовательно щелкать на каждый кадр, если время из задержки разное, или просто выделить все кадры с помощью Select All и проставить единое время. Допустим оба кадра будут появляться со временем 10 сотых секунды. Смотрим – неплохо. Хоть не так бешено рябит. Сохраняем.

(IMG:http://img.photobucket.com/albums/v483/fluffy_kitten/Animation_lessons/3.gif)

Первый урок окончен. Прошу вопросы.

(IMG:http://www.rs-gelo.nm.ru/1.gif)

Хе-хе, чего я сделал ;D

Спасибо за науку!


На сколько я понял, дальнейшие преобразования заключаются в редактировании самих кадров?

Сообщение отредактировал Gelo - 3-08-2005, 20:29

Gelo, здорово :)

Да, например, следующий урок будет посвящен прозрачности изображения, т.е. тому, как сделать невидимыми те или иные участки картинки. Для наглядного примера возьмите мою нынешнюю аватару или смайлики и поймете, что к чему. А как этого "что к чему" добиться, я напишу или в воскресенье, или в понедельник.

Урок № 2. Прозрачность.

Прозрачность – это свойство, присущее не только анимированным картинкам, в статических изображениях оно тоже имеет место быть. Я уже приводила в пример смайлики – среди них есть и «статики», и анимированные, а круглая форма достигается как раз с помощью задания прозрачности на углах изображения. Т.е. на самом деле смайлик представляет собой прямоугольный рисунок, в чем вы можете убедиться, выделив его мышкой. Убедились? Нет, не верьте мне на слово, убедитесь. Молодцы! Теперь разберем, как задавать невидимые области. Принцип действует не только в нашем аниматоре, но и в других.

Итак,

Кадр 1: (IMG:http://img.photobucket.com/albums/v483/fluffy_kitten/Animation_lessons/5.gif)

Кадр 2: (IMG:http://img.photobucket.com/albums/v483/fluffy_kitten/Animation_lessons/4.gif)

Совмещаем их, как в прошлом уроке. Получим нечто такое:

(IMG:http://img.photobucket.com/albums/v483/fluffy_kitten/Animation_lessons/6.gif)

Теперь на первом кадре в закладке Image ставим галочку рядом с Transparency (Прозрачность). У нас загорелся ппрямоугольник с цветом, где надо выбрать, какой оттенок будет считаться невидимым в данном кадре. Выберем фиолетовый, цвет внутреннего круга. Смотрим, что получилось.

(IMG:http://img.photobucket.com/albums/v483/fluffy_kitten/Animation_lessons/7a.gif)

Если произошло так, что прозрачный кружок мигает только один раз, проверьте Looping и свойство UnDraw Method.

Undraw Method позволяет определять, каким образом будет показан тот или иной кадр. В справке к программе подробно описаны ее функции.

Самый простой пример работы со статичной прозрачностью. Сделаем девичью аватару в нежно-модно-розовом стиле.

Базой для аватары будет служить этот котенок:
(IMG:http://img.photobucket.com/albums/v483/fluffy_kitten/Animation_lessons/00001266.gif)

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

(IMG:http://img.photobucket.com/albums/v483/fluffy_kitten/Animation_lessons/8.gif)

Вставляем этот рисунок в анимамор, переходим в закладку Image и определяем салатовый как прозрачный. Сохраняем.

(IMG:http://img.photobucket.com/albums/v483/fluffy_kitten/Animation_lessons/9.gif)

А у меня клёво?? :???:

Лисс: Клево :)

Присоединённые изображения

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

п.с. зарание спасибо.

dag

В фотошопе анимации нет. Это программа - графический, а не анимационный редактор.

Corel - это не программа, а фирма.

Определитесь сначала, в чем Вы работаете, а потом задавайте вопросы. :)

Для создания анимации, у которой отсутствует фон, нужно сложить вместе первый и второй уроки.

ЛИССАНДРА.
Но в пакете фотошопа есть такая интересная програмка как имэйдж рэди... вот она то и делает покадровую съемку, если можно так выразится...а в фотошопе больше возможностей с наложением теней на изображение да и фильтров там навалом... я делал раньше именно через эти две проги. но после некоторой неурядицы у меня фотошоп исчез и теперь приходится делать все через пейнт и AVD processor v.7.0 но к сожаленыю у последнего истек крэк и я просто не знаю что делать денег на фотошоп нету... плагины не скачаешь.... даже мало мальски нормального граф редактора нет... шило :-(

Тамриэль

Там много чего есть, но, как я уже говорила,

рекомендую брать Microsoft Gif Animator, он самый простой в семействе

Не вижу смысла метаться в поисках Image Ready, который и сложнее, и весит больше, когда есть Майкрософт Гиф Аниматор. Потом, когда сами принципы работы будут понятны, можно переходить и на другие редакторы. :)

Как сделать прозрачный фон у анимированной картинки. ;)
для танкистов

1) Располагаете кадры в нужной последовательности
2) Если цвет прозрачных областей у всех кадров одинаковый, выделяете их и применяете свойство Transparency ко всем сразу. Если фон разный, ставьте Transparency последовательно на каждый кадр.

Помогите, скажите как во Флеше вставлять изображение без белого, тоесть без фона, с прозрачным фоном, и ещё когда я вставляю изоброжение оно у меня сверху вниз вставляется

Лисс: Вообще, здесь обсуждается не flash, а gif-анимация. Но если очень надо, могу дать пару ссылок на учебники. С вопросами - в приват. C точным указанием используемого редактора!

Сообщение отредактировал Лиссандра - 11-08-2005, 13:45

Урок № 3. Оно большое и толстое, или как уменьшить вес анимации.

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

Итак, последовательно вставляем кадры:

1 кадр: (IMG:http://img.photobucket.com/albums/v483/fluffy_kitten/Animation_lessons/00001266.gif)

2 кадр: (IMG:http://img.photobucket.com/albums/v483/fluffy_kitten/Animation_lessons/313c0cd4.gif)

3 кадр: (IMG:http://img.photobucket.com/albums/v483/fluffy_kitten/Animation_lessons/a360c650.gif)

4 кадр = 2 кадр (просто продублируйте в аниматоре копи-пастом).

Настроив нужным образом скорость анимации, сохраняем и получаем розово-пушистый юзерпик:

(IMG:http://img.photobucket.com/albums/v483/fluffy_kitten/Animation_lessons/6a0cefa9.gif)

Смотрим вес полученной картинки, у меня вышло 28 Кб. Жить можно, но для такой картинки можно бы и уменьшить объем. В анимации меняется только нижний левый угол, остальное остается неизменным. Поэтому вполне логично "вырезать" статическую часть и оставить только меняющуюся. Делаем это следующим образом: меняем кадры 2-3-4 на эти изображения:

(IMG:http://img.photobucket.com/albums/v483/fluffy_kitten/Animation_lessons/10.gif)-(IMG:http://img.photobucket.com/albums/v483/fluffy_kitten/Animation_lessons/11.gif)-(IMG:http://img.photobucket.com/albums/v483/fluffy_kitten/Animation_lessons/10.gif)

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

(IMG:http://img.photobucket.com/albums/v483/fluffy_kitten/Animation_lessons/12.gif)

А весит 18 Кб. Несравнимо лучше! B)

Теперь обещанные в начале урока разъяснения. В разных аниматорах оптимизация с помощью прозрачности действительно задается по-разному. Майкрософт гиф аниматор в этом плане крайне неудобен, т.к. работа делается собственными ручками: надо закрасить, надо задать особые свойства и т.д. В более серьезных аниматорах имеется встроенная оптимизация: программа сама отыскивает одинаковые "статичные" участки и как бы "склеивает" их, т.е. вес этих частей не дублируется. Очень удобная вещь.

Лисс, а как вот это счастье уменьшить в размере? Там тени разные на кадрах... Хотела сделать такую аву))) Не вырезать же руку?!!!

Присоединённые изображения

Лиссандра
У меня, наверное, руки кривые, конечно, но мало ли...) Не поможешь? Растолкуй дураку))
Сделал фон поярче, чтобы заметнее был - салатовый, как и ты.. ставлю Невидимость. Там в палитре - огромный выбор оттенков этого салатового. Выбираю один - и невидимой становится как бы "решетка", т.е. - пиксель виден, пиклесь нет... Выбираю другой оттенок - вместо невидимости получаю черный фон... что делать?

Гадюка, здесь может быть два варианта:

1. Вырезать прямоугольник с рукой и наложить последовательно на основу, как в прошлом уроке.
2. Воспользоваться более серьезным аниматором, «склеивающим» одинаковые части кадров самостоятельно.

Ниже прикрепила уменьшенный до 26 Кб авик :)

Разиэль, проверь в фотошопе свой цвет. Он должен быть из Веб-палитры!

Присоединённые изображения

У меня вопрос как укоротить размер анимированного файла не сильно убивая качество. И какой прогой лучше для этого пользоваться. Я сколько делаю аватыра у меня не получается балансировать между качеством и длинной файла... Заранее благодарен.

Герольд

Что подразумевается под укорачиванием размера? :huh:

1. Изменение времени показа анимации?
2. Изменение веса файла?

Уточни, плиз, тогда смогу ответить :)

Ах да, что-то я ступил... Да я хотел бы узнать как лучше укоротить вес файла.

Герольд

Есть несколько способов. Один них, самый логичный, описан в Уроке № 3 "Оно большое и толстое, или как уменьшить вес анимации". Там же указаны возможные типы используемых аниматоров (в конце) и методы работы с ними. Если это не помогает, а удалять кадры из анимации не хочется, попробуй уменьшить число цветов в палитре анимационного файла.

При этом можно пользоваться любым аниматором, главное, "навостриться" с ним работать. Я начинала с выложенного в теме Microsoft Gif Animator и лишь недавно перешла на Jasc Anim. Shop. Второй тяжелее и с большим объемом функций. Если есть возможность, скачай его. Если нет, вполне хватит и первого.

Народ, я основы рассказала, теперь задавайте вопросы и пытайтесь что-то делать сами. :)