Анимированные аватарки и баннеры

[Стрелок 3]

[Стрелок 3]

вапрасик па теме:

 

мне интересно, как сделать так, что бы одна картинка начинала медленно исщезать а на её место вырисовываться другая?

[MarySan 0]

вапрасик па теме:

 

мне интересно, как сделать так, что бы одна картинка начинала медленно исщезать а на её место вырисовываться другая?

 

Энто твин-анимация. я ее уже упоминала. Для отдаленных могу разжевать. Змінено 27 вересня, 2006 користувачем MarySan

[Стрелок 3]

взяла оскорбила в лучших чувствах ((

 

----все равно не верю. заплач, а еще лучше зарыдай-------- МС

Змінено 28 вересня, 2006 користувачем MarySan

[Dimonnick 0]

Энто твин-анимация. я ее уже упоминала. Для отдаленных могу разжевать.

 

Розжовуй

[MarySan 0]

Такс... нарисовал в пайнте кучу картинок.... скрепливаю их с КофиКап Гиф аниматион.... получаецо който гон... (цвета полностью переобразовуюцо)...

С Фотошопом получаецо каета глючная =/....

Вопщемто вот....

З.Ы залил сюда свои наброски... роздуплился что трабл в нумерацыи.... НО!... Когда уся на компе захожу в папку с набросками цыфры одни... а когда закинул на ФТП цыфры совсем другие (точно также и в фотошопе...) Но почему? хз....

 

Ты меня с каждым разом поражаешь все больше и больше. Снимаю шляпу - талант! =)

 

ЗЫ. Я б посмотрела на раскадровку, но кровь... реалистично в общем вышло, по саузпарковски.

Давай в том же духе.

[Стрелок 3]

ну, что такое ТВИН анимация никто так и не узнает...

Может хотя бы скажете есть ли у кого-то прога, которая разбивала бы по кадрам определенные куски фильма?

[dRug 0]

Может хотя бы скажете есть ли у кого-то прога, которая разбивала бы по кадрам определенные куски фильма?

 

була у мене прога, що розбивала фільм чи його частину на кадри, називається #1 Video conventor (здається так). нажаль зараз не можу знайти.

[Стрелок 3]

Одна из самых стандартных прог для обрезания, лепления... видео... это Виндовс Медиа Мейкер... ана есть у всех у кого установлена ХР. Ею можно акуратнинько порезать видео... и в старой версии (не той что идет к СП2) еся такая функцыя... когда вставляеш който фильм или клип в эту прогу, то она сразу-же начинает обрезку...

Или ты про чтото другое спрашывал?...

 

оно режет кусками а не кадрами

[MarySan 0]

Ладно, вы меня таки доконали. (Вчера не вышло опубликовать.)

 

Если делать гиф обычным скидыванием кадров в кучу, то получается нечто не всегда красиво мегающее или прыгающее с места на место. А хотелось бы чтобы оно "ездило", да еще и плавно. Для этого есть специальная тулза, Tween называется - то бишь "сглаживание". Что оно делает: берет две картинки и создает заданное количество промежуточных картинок с состояниями слоев, которые интерполируются, исходя из двух изначальных.

 

Далее берем пример.

Есть у нас два шарика. По моему сценарию красный влетает в кадр и выбивает с поля зрения синий.

Итак, создаем раскадровку.

http://city.brovary.net/portal/uploads/1159278875/gallery_574_220_38207.jpg

Как видно со скрина я сделала паузу только перед первым кадром. Остальное времечко по нулям. Картинка естественно вышла... шустрая. Идем дальше. Вот наша рабочая область. Три слоя, четыре кадра...

http://city.brovary.net/portal/uploads/1159278875/gallery_574_220_75156.jpg

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

Надо просто выбрать начальный кадр и конечный резутирующий кадр. Вот и весь прикол твин анимации. Она делает за вас лишнюю работу.

Кнопка обведенная красным кружком переносит нас к новой менюшке которая поможет нам автоматизировать данный процес.

http://city.brovary.net/portal/uploads/1159278875/gallery_574_220_10943.jpg

Думаю здесь все понятно. Потому что проще уже не скажешь.

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

В окне Анимация теперь творится такое. Количество слоев не изменилось. Слои не трогаем вообще.

http://city.brovary.net/portal/uploads/1159278875/gallery_574_220_6948.jpg

Раз на раз не приходится, так что пробуйте рисовать чтото свое. Толи текст, толи просто сменяющие друг друга кадры.

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

Змінено 28 листопада, 2006 користувачем MarySan

[dRug 0]

оно режет кусками а не кадрами

 

знайшов прогу, яка ріже кадрами (те, що тобі треба) #1 Video Converter. на 6.1 не можу закинути, якщо треба, забирай в ДЦ++.

[Стрелок 3]

MarySan, зашибись, то что было надо мне всю жизнь!

Спасибо!

А что бы ты еще могла хорошего рассказать?

[Xeeng 3]

Я теж вирішив втрутитися і трошки полегшити ваші страждання:

 

Прога, що сама вирізає вибрані епізоди з фільмів (AVI) і робить з них анімацію (gif). GIF-и правдв дуже неоптимізовані виходять.

[Pretorian 46]

Я теж вирішив втрутитися і трошки полегшити ваші страждання:

 

Прога, що сама вирізає вибрані епізоди з фільмів (AVI) і робить з них анімацію (gif). GIF-и правдв дуже неоптимізовані виходять.

 

Че то она не хочет загружвть ави файлы(

[dRug 0]

розкажіть плз як робити розкадровку в ImageReady, а то я щось не можу догнати.

[TROY 0]

розкажіть плз як робити розкадровку в ImageReady, а то я щось не можу догнати.

 

Я тоже не догнал!!!

 

--я тебе догоню, а когда догоню, то таких ... надаю, мама не узнает-- МС (злая)

Змінено 9 листопада, 2006 користувачем MarySan

[dRug 0]

розкажіть плз як робити розкадровку в ImageReady, а то я щось не можу догнати.

 

якщо хтось не зрозумів як робити анімацію в ImageReady, пропоную такий мануал з прикладом.

зі. мені допомогло

 

Використання Image Ready

GIF-анімація

 

Завершимо цю главу прикладом створення нескладного баннера, у якому використана GIF-анімація. Для створення анімаційних зображень ImageReady пропонує особливий інструмент - палітру Animation. Палітра містить мініатюри усіх фаз анімації і керує їх черговістю і переглядом. Створення анімації багато в чому схоже на створення ролловерів. Основна відмінність полягає в тім, що станів зображення може бути скільки завгодно.

 

Підготовка зображення

 

Баннер, що ми створимо, буде зображувати літак, що летить, що залишає за собою рекламний напис.

 

1. Для виготовлення баннера нам знадобиться зображення літака. Запустите Photoshop і відкрийте в ньому файл plane.tif.

 

2. Перетворіть шар Background у звичайний шар.

 

3. Завантажте з альфа-каналу виділену область і натисніть клавішу <Delete>. У такий спосіб ви одержите навколо літака прозоре тло.

 

4. Збережіть зображення у файлі plane.psd і перейдіть у ImageReady. Виконати цю операцію в ImageReady неможливо, оскільки вона не підтримує роботи з альфа-каналами.

 

5. Стандартний розмір баннера 60х468 пікселів. Створіть у ImageReady нове зображення такого розміру за допомогою команди New з меню File. Тло зображення установите білим.

 

6. Виберіть інструмент Type у палітрі інструментів.

 

7. Клацніть курсором миші з лівого краю зображення і введіть текст "Welcome to Adventure!".

 

8. Настройте параметри тексту таким чином, щоб він займав усю ширину баннера. Для цього виберіть вузький напівжирний шрифт великого кегля.

 

9. Залийте текст темно-синім кольором, вибравши його в палітрі Swatches.

 

10. Відкрийте документ plane.psd.

 

11. Зменшите його пропорційно командою Image Size з меню Image так, щоб вертикальний розмір документа складав 70 пікселів.

 

12. Скопіюйте зображення літака в документ із баннером.

 

Далі ми застосуємо невеликий трюк, заснований на тім, що ImageReady, як і Photoshop, зберігає інформацію про об'єкт на шарі, переміщеному за межі документа.

 

1. Виберіть інструмент Move і перемістіть шар із зображенням літака за ліву границю документа. Не бійтеся, воно не пропаде!

 

2. Зробіть білий колір поточним основним кольором.

 

3. Заповните шар основним кольором за допомогою команди Fill чи натиснувши клавіші <Alt>+<Backspace>.

 

4. Перемістите шар по горизонталі вправо інструментом Move при натиснутій клавіші <Shift> так, щоб зображення літака виявилося посередині документа.

 

5. Виділите прозору ділянку між носом літака і білим заливанням інструментом Magic Wand.

 

6. Залийте виділену область білим кольором.

 

7. Інструментом Magic Wand виділіть прозору область за літаком.

 

8. Виберіть інструмент Airbrush у палітрі інструментів.

 

9. Великою кистю створіть короткий градієнт із білого в прозорість за літаком.

 

Створення кадрів

 

Зображення підготовлене. Тепер займемося визначенням кадрів анімації. Для початку визначимо два кадри - перший і останній.

 

1. Переконайтеся, що всі шари видимі.

 

2. Виберіть інструмент Move з палітри інструментів.

 

3. Перемістите шар із зображенням літака строго по горизонталі вліво, щоб літак вийшов за край документа і не був видний. Щоб переміщати шар точно по горизонталі, утримуйте при цьому клавішу <Shift>. Усі поле документа повинне бути білим.

 

4. Відкрийте палітру Animation командою Show Animation з меню Window,

 

якщо її немає на екрані.

 

5. Поточний стан документа приймається як перша фаза анімації. Йому відповідає мініатюра першої фази анімації.

 

6. Створіть ще одну фазу, натиснувши кнопку з зображенням листа папера в нижній частині чи палітри вибравши команду New Frame з меню палітри. Поруч з мініатюрою першої фази анімації в палітрі Animation з'явиться ще одна. Поки обидві фази ідентичні.

 

7. Клацніть мишею на мініатюрі другої фази.

 

8. Виберіть інструмент Move з палітри інструментів.

 

9. Перемістите шар із зображенням літака вправо так, щоб літак виявився за правим краєм документа. При цьому напис "Welcome to Adventure" на попередньому шарі повинен стати цілком видимим. Активна мініатюра в палітрі Animation відіб'є новий стан документа.

 

Розрахунок проміжних фаз

 

Ми визначили початкову і кінцеву фази анімації. У першій фазі літак ще не "прилетів", а в останньої вже "полетів" і відкрив рекламний напис. А тепер майже фокус:

 

1. Виділіть в палітрі Animation мініатюри обох фаз, клацнувши на кожній з них, і натиснувши клавішу <Ctrl>.

 

2. Виберіть команду Tween з меню палітри Animation. Вона відкриває діалогове вікно. Перемикач Layers переведіть у положення All Layers, у групі Parameters встановіть тільки прапорець Position, у поле Frames to Add введіть число 10.

 

3. Натисніть кнопку ОК. ImageReady автоматично побудує проміжні кадри між двома виділеними.

 

4. Тепер можна і подивитися на готову мультиплікацію. Натисніть кнопку програвання анімації (трикутна стрілка вправо) у нижній частині палітри Animation і подивіться на результат у вікні документа. Навколо кнопки програвання знаходяться ще чотири кнопки керування переглядом анімації, аналогічний тим, що ви бачили на пульті керування програвачем компакт-дисків. Це - кнопка зупинки, переходу до попереднього кадру і до першого кадру. Праворуч знаходяться кнопки переходу до наступного і до останнього кадру.

 

Як ви бачите, програма "догадалася" про ваші маніпуляції з переміщенням шару і побудувала проміжні стадії його руху. Втім, ви самі вказали на це б діалоговому вікні Tween. Розглянемо його докладніше.

 

Перемикач Layers визначає, які шари зображення варто враховувати: усі чи тільки поточний, виділений у палітрі Layers. Група прапорців Parameters задає параметри, що змінюються від кадру до кадру:

 

положення шару (Position), його прозорість (Opacity) чи параметри ефектів (Effects). Список Tween with визначає, між якими кадрами варто будувати проміжні. Якщо в палітрі Animation виділені два чи більш кадри, то доступний тільки варіант Selection, що говорить про те, що проміжні кадри треба робити виходячи з виділених. Якщо в палітрі виділений один кадр, то в списку доступні два варіанти: попередній кадр (Previous Frame) чи наступний (Next Frame). Наступним для останнього кадру є перший. І нарешті, поле Frames to Add задає кількість проміжних кадрів.

 

1. Натисніть клавіші <Ctrl>+<Z> чи виберіть команду Undo з меню Edit. Це скасує останню команду Tween і ми випробуємо її з новими установками.

 

2. Виділите обидва кадри в палітрі Animation і виберіть команду Tween у її меню.

 

3. У діалоговому вікні Tween встановіть прапорець у параметра Opacity.

 

4. Натисніть кнопку ОК.

 

5. Перегляньте анімацію, що вийшла. Напис "Welcome to Adventure'" тепер як би "виявляється", змінюючи прозорість від 100% до 0%.

 

Час демонстрації (таймінг)

 

Для кожного кадру анімації ви можете задати довільний час демонстрації.

 

1. Натисніть кнопку переходу до останнього кадру.

 

2. Клацніть на маленькій трикутній стрілці, розташованої нижче мініатюри кадру. Поруч з нею виводиться поточний час демонстрації кадру, 0,00 сек.

 

3. У списку, що відкрився, виберіть 2 сек. Тепер рекламний напис буде знаходитися на екрані довше.

 

Врате, що при перегляді анімації в ImageReady час демонстрації кадрів не дотримується. Для того щоб переглянути анімацію з реальним таймінгом, скористайтеся переглядом у браузері за допомогою команди Preview in.

 

Оптимізація анімації

 

Для GIF-анімації винятково важлива оптимізація, оскільки це, фактично, кілька зображень в однаковому форматі. Якщо анімація довго завантажується в браузері користувача, то вона скоріше його не залучить, а відіпхне.

 

Для всіх кадрів анімації використовуються однакові параметри оптимізації, включаючи індексовану палітру. Параметри оптимізації встановлюються в палітрі Optimize.

 

1. Перейдіть на вкладку Optimized у вікні документа, щоб стежити за результатом оптимізації.

 

2. У палітрі Optimize встановіть палітру Selective.

 

3. Достатньою кількістю кольорів буде 16. Встановіть його в списку Colors.

 

4. Скасуйте згладжування, вибравши в списку Dithering Algorithm варіант No Dither. Це зробить файл більш компактним і зовсім не погіршить якості зображення.

 

Ми задали досить твердий режим оптимізації, але він цілком виправданий. Вихідне зображення літака саме по собі містить зовсім небагато кольорів і плавних кольорів переходів. Розмір файлу після оптимізації написаний у рядку стану вікна документа: 11,85 Кбайт. Це цілком прийнятний розмір для баннера.

 

Для GIF-анімації існують і особливі алгоритми оптимізації.

 

1. Виберіть команду Optimize Animation з меню палітри Animation. Вона відкриває однойменне діалогове вікно, що пропонує два напрямки оптимізації. Перше складається з автоматичної обрізки кожного кадру зображення, щоб у ньому залишалися тільки області, що міняються. Другий шлях складається у видаленні всіх пікселів, що не змінюються від кадру до кадру. Обидва способи оптимізації приносять дуже істотний виграш для більшості анімацій і ми рекомендуємо їх використовувати.

 

2. Натисніть кнопку ОК. Анімація оптимізована.

 

Видалення кадрів

 

Крайнім способом зменшення розміру зображення можна вважати видалення окремих кадрів. Критично гляньте на анімацію, що вийшла, і подумайте, чи можна скоротити її на кадр-іншій. Результат можна відразу переглянути в браузері за допомогою команди Preview in.

 

1. Виділіть третій і десятий кадри анімації в палітрі Animation.

 

2. Натисніть на кнопку з зображенням сміттєвого цебра в нижній частині палітри. Виділені кадри вилучені.

 

3. Виберіть ваш браузер у списку Preview in з меню File і оцініть результат у браузері.

 

Очевидно "гладкість" анімації постраждала не сильно, а розмір зображення зменшився більш ніж на півтора кілобайта. Спробуйте підібрати мінімальну припустиму кількість кадрів на свій смак.

 

Редагування готової анімації

 

ImageReady, на відміну від багатьох спеціалізованих программ-аніматорів, забезпечує широкі можливості редагування вже готової анімації. Дві з них очевидні: додавання і видалення окремих кадрів. Настільки ж просто кадри анімації можна переставляти.

 

1. Виділіте будь-як кадр анімації щигликом миші.

 

2. Помістите курсор миші на мініатюру виділеного кадру.

 

3. Натисніть ліву кнопку миші.

 

4. Переміщайте мишу до сусіднього кадру. Коли курсор миші буде виявлятися в проміжках між кадрами, ви побачите жирну вертикальну лінію, крапку вставки. Вона показує, куди буде поміщений виділений кадр, як тільки ви відпустите кнопку миші.

 

5. Перемістите кадр перед сусіднім, а потім поверніть його назад.

 

Ви можете відредагувати і компоненти зображення, не ризикуючи повторювати це для кожного кадру.

 

1. Виділіть шар з рекламним текстом у палітрі Layers.

 

2. У палітрі Type змініть шрифт на який-небудь іншій. Оскільки анімація заснована на шарах зображення, шрифт зміниться у всіх кадрах анімації.

 

3. За допомогою інструмента Move виправте положення тексту так, щоб він виявився точно посередині документа. Положення тексту зміниться тільки в поточному кадрі анімації.

 

4. Щоб текст зайняв ту ж позицію й в інших кадрах, виберіть команду Match Layer Across Frames з меню палітри Animation. Поточне стан шару буде поширено на всі кадри анімації.

 

За допомогою Image Ready ви можете редагувати і готові анімації, наприклад з GIF-файлів, що ви завантажите з чужих сторінок. Готовий файл з анімацією можна відкрити командою Open і редагувати його так, начебто він створений у ImageReady. При відкритті анімації програма сама заповнить палітру Animation її кадрами.

 

Ви також можете створити анімацію в Photoshop, розташовуючи кадри анімації кожний на своєму шарі. Потім варто зберегти отримане багатошарове зображення у форматі PSD і відкрити в ImageReady. У меню палітри Animation ви знайдете команду Make Frames From Layers. Вона автоматично заповнить палітру кадрами анімації, використовувавши для цього окремі шари зображення.

 

Збереження анімації

 

Збереження анімації у форматі GIF здійснюється усі тією же командою Save Optimized. Вам буде потрібно тільки вибрати папку для готового анімаційного файлу і дати йому ім'я.

 

Поставь копирайт © . Интересно где взял. Еще и на украинском... О.О

Змінено 15 листопада, 2006 користувачем MarySan