C настанням епохи інтерактивного «всього», починаючи від стільникових телефонів і ігрових приставок і закінчуючи тим же самим «розсадником» інтерактивності - Інтернетом, сором'язлива замовчування того, як робиться анімація, здається більш ніж підозрілим. Сьогодні ми постараємося залучити читачів до цього чарівного мистецтва пожвавлення картинок. Однак перш, ніж мова піде про секрети персонажной анімації і всіляких Міккі Маус і їжачків в тумані вищого пілотажу, ми зробимо два кроки назад. І повернемося до того місця, з якого починають все, хто хоч раз в житті створював найпростішу анімацію за допомогою домашнього комп'ютера. Ми спробуємо зробити щось на зразок анімованого банера на домашній сторінці або «аватара» для вашого блогу. Тема нашої розмови - принципи створення gif-анімації за допомогою Adobe Photoshop.
Треба відразу обмовитися, що з настанням флеш-технологій gif-анімація непомітно відходить в минуле. Проте відправляти її на «смітник історії» поки передчасно, хоча б з тієї причини, що це найдемократичніший спосіб підняти собі настрій, доторкнувшись до цього таїнства.
Нам буде потрібно комп'ютер з програмою Adobe Photoshop, графічний планшет (бажаний, але не строго обов'язковий атрибут!) І 20 хвилин вільного часу.
Спочатку треба більш-менш чітко сформулювати для себе, що саме ми хочемо побачити в результаті нашого уроку. Нехай це буде невеликий укладений в цикл сюжет про те, як всім відома піктограма архиваторов - гвинтовий прес стискає коробочку. Як і у всій пристойною анімації, такий прісний сюжет необхідно перетворити в гег. Цей термін означає певний трюк, що надає ситуації абсурдність і веселощі. Втім, завсідники «Вікіпедії» напевно назвуть ще з десяток значень слова «гег». У нашому випадку ми зробимо так, що в результаті сплющивания ящик відкриється і з нього вистрибне смайлик на пружинці. Не бозна-як забавно, але для вправи цілком прийнятно.
Перш за все чітко усвідомите, що представляє собою технологія. Тут, як і в класичній анімації, ефект руху досягається чергуванням статичних картинок. І якщо бути чесним аніматором, то довелося б намалювати і розфарбувати (а потім поєднати) десяток послідовних зображень. Однак досить уявити собі майбутній «фільм», і стане зрозуміло, що багато елементів не вимагають перерісовок. Для наочності можна буде намалювати всю анімацію на одному скетчі - так останнім часом називають ескізи (рис. 1). Таким чином, наша робота зведеться до отрисовке наступних елементів: фон плюс елементи, які ніколи не будуть рухатися (в нашому випадку рамка преса і гвинт), кілька стадій стиснення коробки, виїзд полички, два види обертання важелів гвинта, кілька стадій вистрибування смайлика (рис . 2). Для тих, хто не вміє малювати, список може здатися убивчим. Але не поспішайте лякатися. Далі все просто.
Всі окремі елементи ми малюємо на різних шарах (рис. 3). У моєму випадку процес був дещо складніше: я спочатку намалював скетч з усіма етапами анімації. Потім на кальці зобразив все окремі елементи, сканував, розфарбував і поєднав в одному файлі. Однак при відповідному досвіді ряд етапів звідси можна сміливо виключити (наприклад, все, що стосується сканера).
В даному уроці трудомісткість і «чесність» процесу не мають значення! У підсумку ми отримуємо один psd-файл, в якому всі елементи анімації знаходяться на різних шарах.
Тепер переходимо до наступного етапу: нам належить «включити» наші розрізнені елементи в потрібний момент часу. Для цього треба вибрати Windows, потім Animation (для останньої версії CS3). У попередніх версіях необхідно відкрити програму Image Ready натисканням на відповідну піктограму в панелі інструментів. Перед нами своєрідна шкала часу. Ми включаємо який відповідає цьому моменту часу набір шарів і вибираємо часовий інтервал, протягом якого буде стояти цей кадр. Створюємо новий кадр, включаємо на ньому чергову комбінацію елементів і знову задаємо інтервал часу (рис. 4). Повторюємо процедуру для всіх кадрів нашого нехитрого сюжету. Звучить досить просто, проте в порівнянні з малюванням і розфарбуванням це щось зовсім інше! Кілька попередніх переглядів ролика допоможуть більш точно розставити тимчасові інтервали (рис. 5). Коли результат здасться вам цілком задовільним, досить зберегти файл як gif-анімаційний.
Усе. Наступна зупинка - студія Уолта Діснея! J)
* * *
В даному уроці ми упустили один дуже важливий для gif-анімації момент, а саме оптимізацію анімації. Вона необхідна для того, щоб «вага» вашого файлу не перевищував розумних меж. Зрозуміло, зараз, коли Інтернет по модему став раритетом, майже нікого не обтяжить завантаження зайвих 200 Кбайт. Однак треба мати на увазі, що при вмілій оптимізації ви можете багаторазово зменшити розмір кінцевого файлу. Так, мабуть, домашнє завдання прозвучить так: спробуйте розібратися з оптимізацією і зменшити кінцевий розмір анімації в кілька разів.
про автора
Олег Тищенков - ілюстратор Студії Лебедєва, http://olegti.design.ru .
УВАГА
Якщо ви вкажете часовий інтервал рівним 0, то це не означає, що при програванні фільму відповідний кадр не буде відтворюватися. Буде! З тією швидкістю, на яку тільки здатний ваш комп'ютер! Однак як би швидкий і потужний він не був, цей кадр не залишиться непоміченим. Спробуйте!
Оскільки наш епізод передбачає постійний повтор, то для завершення фільму треба продумати, яким чином фінальна сцена повернеться до вихідного кадру. Погодьтеся, робити це стрибком - не найкращий варіант.
