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

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

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

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

Лиссандра.

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

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

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

Раз:

Два:


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

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

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



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

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

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


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

Gelo, здорово

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

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

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

Итак,

Кадр 1:

Кадр 2:

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



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



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

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

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

Базой для аватары будет служить этот котенок:


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



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

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

Лисс: Клево

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

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

dag

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

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

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

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

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

Тамриэль

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



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

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

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

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

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

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

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

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

1 кадр:

2 кадр:

3 кадр:

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

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



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

--

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



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

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

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

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

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

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

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

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

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

Герольд

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

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

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

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

Герольд

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

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

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

Лиссандра, хорошую тему ты открыла! Я давно хотела научиться анимации, а тут такой случай! Обязательно, когда приеду домой, попробую это сделать
А пока я хочу задать несколько маленьких вопросиков. Моя аватара сделана за счет объединения нескольких прорисованных картинок? А как опредилить, сколько их было использовано? Линии на двух совмещенных картинках плавно перетекают одна в другую или происходит резкая смена изображений? Это можно регулировать?
Заранее спасибо!

ДваПера
Любая анимация - это смена кадров, в вашей терминологии "резкая смена картинок". А вот плавность анимации зависит от того, насколько похожи два соседних кадра и сколько промежуточных кадров между двумя изображениями.
В принципе, любой редактор, предназначенный для анимации должен дать раскадровку при открытии анимированного изображения. Конкретно в Вашей аватарке 12 кадров.

Гондолин
Использовал аниматор, исходную картинку и один фотошоповский фильтр из набора Eye Candy. Спасибо за уроки!

higf, получилось здорово Только один маленький совет. Я раскрыла аниматором твою картинку и увидела, что все кадры - это полные изображения, хотя меняется только середина. Зачем так делать? Не надо оставлять то, что неизменно, на всех кадрах, только на первом, это значительно уменьшит вес У меня со 150 твоих Кб после оптимизации вышло 120 Кб.

Лисс, в связи с моей привычкой анимировать тексты, возник вопрос...
Если ставить "прозрачный" фон текста, то потом оказывается проблема, что сквозь кадры просвечивают предыдущие. Если строчки стоят друг за другом, кажется что они последовательно появляются. Но если все скомпоновано в центре, читабельным остается лишь первый кадр, а далее наслойка-свалка.
Эксперименты с "прозрачный итоговый файл при непрозрачных составных", и наоборот, успехом не увенчались.
Гм?

Латигрэт, попробуй сделать следующее. В аниматоре на странице Image поменяй Undraw Method. Там есть Leave, Restore Background, Restore Previous. Не помню, какой про что, но вроде если первый (бэк) кадр поставить просто прозрачным и установить Restore Background, должно все исправиться.

Хочу выразить большую признательность Лисс за тему!:) Хорошая и полезная идея - помочь нуждающимся в совете
На результат моих стараний можно посмотреть в моей подписи)
Отдельное спасибо Freja за фотку бабочки, без неё не было бы картинки!;)
В общем вот... не прошли даром уроки, буду практиковаться дальше!:)

вот что вышло у меня с первого раза )))) Рисовала два вечера, заанимировала за десять минут ))) Сие полотно обозначает меня и Джея, примерно так мы поступаем в аське. ПОКА только в аське

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


2)


(Added)
P.S.А вот это то что я успела совершить со словами. Леньтяйка я просто по жизни...

Лиссандра, спасибо большое, хоть немного стало понятно как анимация вообще получается.
Но.. к сожалению, с вот такой картинкой пожалуй я всётаки не справлюсь.

Мне просто даже интересно можно ли её уменшить до 40 килобайт ( для жж )

У меня кролик такой же именно ж)) и вытворяет тоже самое. Хочу нагло хвастаться всем. Прошу помочь, буду очень благодарна.

UnikBU

Данный аватар не влезет в ЖЖ даже при весе <40Кб по причине размеров (120х90). Т.е. сначала нужно уменьшить его размеры по осям, а потом уже думать над весом. В свою очередь, вес любой анимации зависит от двух параметров: качества кадров и их количества. Изменяя эти два параметры, можно уменьшить вес анимации.

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

Лиссандра

Большое спасибо.
Простите за приставучесть, ещё один вопрос.. Копирую кадр в графический редактор. Сохраняю, но если сохранять в GIF то теряется цвет, а Jpeg в аниматоре не открываются. Что я делаю неправильно и как сохранить картинку без потери цвета?

UnikBU

Потеря качества в gif неизбежна. Но многие аниматоры поддерживают работы с jpg-кадрами. Попробуйте использовать их, например, Jasc Animation Shop. В сети достаточно ресурсов, где можно сказать его и многие другие редакторы, но не забудьте сразу и краком обзавестись. К сожалению, никакая фирма не хочет отдавать свой товар даром

Тема просто отличная! Спасиб!


В фотошопе какраз все имхо полегче описанных действий в Гиф Аниматоре…
Там добавляется раскадровка… в один щелчок меняется время задержки кадра и прочее…

но есть конечно и нюансы… Можно потратить полчаса на то чтобы разобраться, зато потом все влегкую делать
И можно файл не только в gif, но и во flash сохранять…

Но всеже есть вопрос: Как сделать плавное перемещение картинки? Вот есть у меня такая: стоит мужчина в полный рост… хотелось бы сделать плавное движение “камеры” от ног к лицу… т.е. чтобы остальное оставалось “за кадром”… я уже давно сделал это своими средствами (еще + происходит увеличение и лицо на весь “экран” и появляется текст), но хотелось бы узнать – может есть более простой способ и более качественный (т.е. не самому вручную двигать, нарезая кадры, а чтобы все было плавно и постепенно)
Вот готовая анимация:
http://user.rol.ru/~edalamar/DoYouDream.gif
Здесь резкое подергивание и смещение рывками сделано, можно сказать, специально ибо оно пришлось кстати и получилось имхо стильно… Но в будущем, если я захочу сделать другую картинку подобную, то наверняка захочется большей плавности… так как ее добиться, а главное как проще?

И еще: как сделать движение по картинке текста? В фотошопе и GIF Animator только вручную?
Просто помнится в Jasc Paint Shop Pro был аниматор превосходный... там эффекты на текст ставить можно было и движение его делать влегкую - аниматор сам все просчитывал и перемещал по кадрам... может и в шопе или гифаниматоре такие инструменты есть?

Очевидно, речь идет об ImageReady, завязанным на фотошоп анимационном редакторе. Это НЕ фотошоп, а отдельный продукт той же компании.

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

Неа... речь идет именно о самом Photoshop, а не второй проге комплекта... есть такое там окошко Animation...

Вопрос к тем, кто более или менее хорошо знает ImageReady. При оптимизации под gif у меня иногда возникают совершенно ненужные точки на изображении, причем количеством много. С какими параметрами и как именно поигратсья, чтобы их не было?

Это выставляется в качестве изображения... там есть проценты...
Жмешь File - Save for Web там появится окно с изображением файла до и после оптимизации... и там GIF (ну это собсно ты и делаешь )... А рядом там же параметр Lossy - вот его и настраиваешь... чем больше потери, тем больше соответственно точек лишних...

eDalamar это был ответ на мой вопрос? Уточня потому что в ImageReady НЕТ команды "File - Save for Web" (по крайне мере в 7й версии). Такая есть в Photoshop. И меню оптимизации находиться не в сохранении, а среди других меню при работе с графикой. И там намного больше параметров, чем один единственный Lossy.

Ага... точно...
1)Могу посоветовать перекинуть файл в формате psd в сам фотошоп, а там уже сохранить как обычно... это если есть фотошоп... будет проще и удобнее всего - там параметры более понятные...
2)Если уж нужно именно так, то в Оптимизации в ImageReady выбирай параметр Named, а там в выпадающем списке GIF 128/64/32... и Dither/No Dither... от этого будет зависеть качества... только вот единственное - при сохранении вообще никакой разницы я не заметил и точечек нет... (и еще у меня прога сама выбирает блин между gif и jpg в зависимости от файла...)
Мой совет все равно тотже - перекидывай в фотошоп... там ведь даже кнопка специальная есть - перебросить файл в фотошоп...

К сожалению Photoshop не сохраняет анимацию, даже если выбираешь GIF. Видимо для этого надо установить дополнительный плагин.
Вообще, похоже что, проблема ползет из-за того, что я делаю файл не с нуля, а взяв за основу уже существующую анимацию и ImageReady ее не очень хорошо воспринимает.

Хм... а я такую вот авку сделала... Хотя я очень давно работаю с ФШ, но все-таки....

Странно... у меня сохраняет, но у меня CS2 версия...
Тогда могу предложить такое: ты мне пришлешь готовый файл psd, а я в фотошопе его в gif сохраню... может и нормально все будет...


Вообще точечки эти появляются именно из-за сильного пережатия gif'ов обычно... там либо настройки стоят плохие, либо алгоритм в старом Image Ready плохой...
Хотя может там гамма цветов не сходится... возможно у того файла изначально 24 бита цвет, а у GIF-то поменьше гамма... некоторые картинки от уменьшения гаммы похуже выглядят, некоторые нормально...

Спасибо, но к сожалению в перспективе это не единственный файл и каждый раз обращаться к вам с просьбой - совесть не позволяет

А вообще похоже, что дело действительно в палитре. В ряде экспериментов выяснилось, что точки появляются только при использовании web палитры, а в пользовательской все нормально.

Во-первых попрошу обращаться ко мне на "ты"... мне как-то не по себе от такого официала
А во-вторых разок-другой и можно ведь... попробовать... а потом может и решение проблемы кто подскажет и поможет или фотошопом новым обзаведетесь...
Кстати, о конверторах... Просмотрщик ACD See нормально воспринимает фотошоповские файлы, анимацию и прочее и позволяет конвертить во множество других форматов с настройками... причем конвертит вполне нормально... тоже выход...

Вот у меня изи джив аниматор. И у меня вечно занимает очень, и очень много места. Я так и не поняла как нужно уменьшать?
А и ещё кое что как сделать так чтобы сверкала, вот например как на твоей картинке.
(Если что отправляй ответ в личку.)
Зарание спасибо.

Я пользуюсь только Adobe Photoshop CS2... там все эти эффекты делать - раз плюнуть, да и места gif файлы готовые занимают меньше, когда используешь настройки некоторые...
Если у тебя будет фотошоп, то я еще кое-как смогу обьяснить как эти эффекты делать, но в других прогах помочь не могу ничем - так как я их не видел в глаза
Также размер файла зависит от количества кадров... чем их больше тем больше места... так что и не старайся делать анимацию очень гладкой, как на видео... т.е. аватарка не пострадает, если текст будет двигаться небольшими рывками... еще можно уменьшить количество цветов в палитре файла... ну и третий вариант уменьшения - как говорилось раньше, делать части кадра прозрачными...

Я поняла что нужно делать прозрачными, но моя версия англ. так, что я не знаю где и как нужно делать прозрачный фон. Сейчас скачиваю тот который посоветовали в самом начале, но как я поняла это тоже англ. версия.
Да и у меня вопрсик не потеме: как вы вставили в подпись анимацию (картинку)?

Оооох... *вздохнул* Прозрачный на английском Transparent...

Для этого используются теги... такие же как и в постах... Сначала загрузить свою картинку на какой-нибудь http или ftp... затем в подписи пишешь: [_img]адрес картинки[_/img]
Только без знака: _
Или в создании подписи нажимаешь кнопку Image и вписываешь адрес там...

Ну как вам мое творение??? Рамочку сама полчаса вырисовывала [attachmentid=1715]