робимо смайлик

• Ідея
• Задум
• Реалізація
• Анімація
• Оптимізація і Обрізання
• Презентація, піднесення безсмертного творіння в дар людству.

З ідеєю більш-менш зрозуміло - кожен з нас великий народний умілець в цій області, тому переходимо відразу до другої фази.

Задум - візуалізація ідеї в грубій формі на папері, рисовими зернятками, конструктором Лего тощо. Боюся здатися неоригінальним, але особисто я віддаю перевагу папір - простенько і охайно.

Ось як це виглядає:

* Ця фаза обов'язковою не є - може бути, ви одареннее мене, і вам воно потрібне, як запасна дірка в колесі.

Про програми.

Існує маса програм для анімації, про які я розповідати не стану - не знаю, а брехати, хоч і люблю, але не буду. Як небудь іншим разом. Розповім краще про те, чим користуюся сам - про Adobe Photoshop 7 і вбудованому в нього аніматор ImageReady.

Ось так виглядають використовувані для наших цілей палітри Photoshop -a (для тих, хто не бачив):

Натисканням кнопки, розташованої в нижньому кутку палітри Tools. викликаємо ImageReady. Виклик може бути зроблений також вибором в меню File команди Jump to. або одночасним натисканням клавіш Shft + Ctrl + M.

Весь процес анімації буде полягати в відкриванні чергового кадру, включення-вимикання в ньому необхідних нам шарів і виставленні часу експозиції, тобто - скільки часу кожен кадр (Frame) буде муляти очі глядачеві.

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

Frame 1. Включаємо шар Layer1 і eyes1.

Frame 3 - повна копія першого, тому просто дублюємо його і переміщаємо в кінець лінійки.

Frame 4. Знову створюємо новий кадр, відкриваємо очі ширше (гасимо шар eyes1 і включаємо eyes2) і приставляє ручки - включаємо hands1.

Frame 5. У цьому кадрі вимикаємо шари eyes3. hands1 і включаємо hand_left. hand_right. Правда захоплююче?

Frame 6. Включаємо eyes4. і насторожено виглядаємо, скориставшись інструментом Move і активуючи відповідні шари. Ось так:

Підсумовуємо, що ми тут з вами наробили:

Layer1, eyes4, hand_left, hand_right

Однак продовжимо.

Переконавшись, що режим показу кадрів в палітрі Animation варто в положенні Вічно (що замкне всю отриману лінійку кадрів в нескінченну, поки не виб'є електропробкі, петлю), виставляємо час експозиції - грубо, на око, приблизно уявляючи динаміку руху. Можна виконати всі рухи самому - перед дзеркалом з секундоміром. Для цієї процедури настійно рекомендую усамітнитися щоб не лякати близьких і не провокувати їх на неадекватні дії. Я виставляю по 1 сек. для кожного кадру і по 0,2 сек на моргання - довше моргати якось гальмівної, а спритніше - не помітно.

Натискаємо кнопку виклику експлорера в палітрі Tools і дивимося що натворили:

Ну що сказати. не знаю як вам, а мені подобається. Але що б сказав Станіславський?

Утримуючи клавішу Shift. натискаємо на кадр 4 і 5, виділяючи відразу обидва кадру, і дублюємо їх.

Тепер не вистачає сполучного проміжного кадру між початком і кінцем - перехід кілька різкий, чи не так? Знаходьте? От і славно. Тоді дублюємо перший кадр, переносимо його в кінець анімаційної лінійки, відключаємо лінк з'єднує шар Eyes1 з шаром Layer1 і зрушуємо очі приблизно в середнє положення між тим, в якому вони знаходяться в першому і останньому кадрі. Експозиція - 0 сек. Ось так:

Кличемо експлорер помилуватися разом з нами:

оптимізація

Ще трохи, ще чуть-чуть.

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

Спочатку позбавимо новоспечений гіф від байтових надлишків і палітра оптимізації [Рис.1] допоможе нам в цьому комплексному, в усіх відношеннях, заході.

1. Меню формату документа - Gif - єдиний можливий формат нашої з вами анімашки і вибору тут немає взагалі. Власне, вона тому і називається гіф-анімацією.

2. Меню кольорової палітри або використовуваної таблиці кольорів:
Не будемо копирсатися в усіх наявних в цій опції таблицях. Якщо є бажання - покопатися на дозвіллі самі. Selective - наш випадок. Ця таблиця має гаму, достатню для більшості картинок в мережі, до того ж, встановлена за замовчуванням, а отже і нефик паритися.

5. Interlaced: Навіть не знаю як це перекладається. Загалом, краще не чіпати.

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

7. Кольори: Поки ми з вами переглядали наше високохудожній твір в Internet Explorer в попередньому розділі, програма згенерувала для нас таблицю кольорів [Рис. 2] яких виявилося чотири. Амінь!

9. Web Snap - не краще.

Залишилося зберегти Мастерпіс - з меню File вибираємо Save Optimized. у вікні вказуємо куди (прізвище можна залишити спадкову, а можна і поміняти - фіглі нам, харизматиків.) і тицяємо в ОК.

- Так, ампутуємо праву руку.
Хрясь!
- Я сказав - праву.
Хрясь.
- Я сказав - руку.

Тепер обрізаємо надлишки робочого полотна - ще одна можливість полегшиться.

Відкриваємо збережений недавно гіф

Спочатку встановимо рамки (Guides), для чого з палітри інструментів (Tools) виберемо двігалку і, підвівши її до краю масштабної лінійки, витягнемо те, за чим ми будемо різати [Рис. 3].

Дістаємо з палітри Tools наш сакральний ніж Crop. надрезаем по навідним і відсікаємо зайве клавішею Enter [Рис. 4].