Робимо підморгує аватару | Фантазія в стилі фентезі - Арканум Клуб

Наша взаимовыгодная связь https://banwar.org/

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

Урок 1

Питання по створенню «підморгує» аватарок задаються регулярно. Ефект користується популярністю. Щоб уникнути подальших відповідей написаний цей урок.

інструментарій

• Будь-графічний редактор (я використовував Adobe Photoshop);
• Будь гіф-аніматор (в даному випадку Adobe ImageReady).

Спробую все пояснити докладно, але сподіваюся, що Photoshop у Вас під рукою і Ви їм іноді користуєтеся. Отже. Вибираємо зображення для аватари і «вганяємо» її в потрібний розмір. Нехай буде 100 × 100. Мій улюблений розмір. (Взагалі, анімувати очі варто тільки на досить великих зображеннях. На середньому і далекому планах ефект практично не видно.) Беремо картинку (рис.1) і відкриваємо її в Photoshop CS. Відразу ж створюємо новий документ рис.2 - прообраз майбутньої аватари потрібного розміру. У мене - 100 × 100 пікселів. Перетягуємо вихідну картинку в документ-аватару і видаляємо в ньому шар заднього плану активувавши шар (просто натиснути на ньому) і натиснувши на смітник (рис.3).

Примітка-пояснення. Пишу може і занадто докладно (напевно Ви все це знаєте, а досвідчені користувачі Photoshop вже тримаються за животи від сміху) і скріншоти дуже великі. Але цей мануал призначений для користувачів різного рівня підготовки, так що ... Продовжую.

Тепер масштабується зображення як нам потрібно. Для цього - дивимося рис.4 і 5. Цифрами відзначена черговість операцій і менюшки - десь чого жати і в якому порядку.

Не забуваємо поставити галку (рис.5) на збереженні пропорцій, а то картинка спотвориться. Масштабується. Створюємо дублікат отмасштабовані нами картинки (рис. 6). Створюємо новий чистий шар (рис.7), обзивали його ГЛАЗА_100. На ньому ми і будемо малювати закриті очі. Я (як людина в малюванні педантичний) взагалі люблю ясність в назві шарів. Коли їх (шарів) штук 30-40 - стає ясно, що це просто необхідно. Інакше легко заплутатися і пустити псу під хвіст готову роботу. Перший шар я називаю «исходник», другий (дублікат першого) - так само як і третій - ГЛАЗА_100. В кінці роботи я їх зведу разом командою «об'єднати з попереднім». Приступаємо безпосередньо до малювання. Сильно збільшуємо зображення лупою. Вибираємо інструмент «піпетка» і беремо зразок кольору для «зафарбовування» очі (рис.8).

Беремо пензлик з розмитим краєм - м'яку круглу 5 пікс (рис.9), встановлюємо для неї потрібний розмір (2-5 ПКС в залежності від розміру очі, зараз -конкретні 3 пікселі) і прозорість (я зазвичай ставлю - 5-12%) . Зафарбовуємо очей кольором взятого зразка. Поступово міняємо кольору для отримання реалістичного (більш-менш) зображення (рис.10). Міняємо розмір до мінімального 1пкc при промальовування вій. При необхідності, Підтираємо майже прозорим ластиком. В общем-то процес творчий. Це суто - малювання з примітивним знанням анатомії. Навчити цього я не можу. Тому тільки псувати. Дивимося рис.11. Спочатку кольором зразка з чола (світлим, коротше) закрашивается весь очей, до повної непрозорості - позначено синім кольором - цифра 2. Але очей має сферичну форму, а не плоский як дошка. Тому - в центрі області - кольору світліші, до країв - потаємні. Справа тонка. Неспішне. Червона область з цифрою 1. Область знаходження вій. Зрозуміло, сама темна частина закритого очі. Для чоловічих аватар - світліша, для жіночих, зрозуміло, темніше - туш і всі справи. Зелена область, цифра 3. Коли очей відкритий - в цій галузі знаходяться вії. Закриваючи очей - вії йдуть вниз. Фарбуємо, освітлюючи цю область, роблячи кордон майже або зовсім непомітною. Корисно (для загального розвитку) подивитися на зразок в дзеркало або на картинку з закритим або напівзакритих оком і зробити як там - ріс.12-13. Макіяж лише змінює колір, але не принцип.

Треба домогтися максимально реалістичного зображення. Хоча можна і приблизно. Враховуємо, що картинка все ж - всього 100 пікс і час вона буде займати - 0.1 сек. в анімації. Але - краще постаратися. Я ось поки не дуже задоволений результатом. Зелена область у мене темніше (так мені здається), ніж слід. Я її трохи освітлює. Міняю масштаб на дрібніший - дивлюся. Зійде. Мені подобається, але питання звичайно спірний. Пропускаємо суперечки і продовжимо. З гріхом навпіл будемо вважати, що очей ми закрили. Але це не все. Для анімації - процес закривання краще розбити на два (а ще краще - на три) кадру. Дублюємо шар ГЛАЗ_100 і обзивати його ГЛАЗ_50. Беремо ластик (у формі кисті 3-4 пікселя і прозорістю 3-8%. Прибираємо половину намальованого (див. Рис.15), вимкнувши поки видимість шару ГЛАЗА_100 (позначено червоним). Треба тільки домалювати вії. Домальовує - рис.16. Робота тонка, переходимо на кисть і ластик розміру 1 піксель і на мінімальну (3-6%) прозорість. Можете покритикувати, але я результатом майже задоволений. Непогано. Отже. З малюванням очей покінчено. я зазвичай зберігаю цей варіант - як контрольний і роблю ще одну копію. При помилках в подальшому - адже ще потрібно буде робити на аватарке спецефекти, писати нік-нейм і т.п. - завжди можна повернутися на крок назад (мені зручніше так, хоча є маса інших способів повернутися). Що далі. Зводимо шари.

Роблю ще один шар з «Вихідні тексти» і маю всі отримані шари - так: рис.17. Роблю активним потрібний мені шар і поєдную його з попереднім (рис.18). З Глаз_50 поступаю аналогічно. В результаті - у мене 3 шари (рис.19). Можна анімувати. Якщо у Вас немає Adobe ImageReady - доведеться зберегти три шари по окремих файлів gif і потім вже довантажувати їх по черзі в аніматор. У моєму випадку - я просто переходжу в аніматор ImageReady. Дивимося рис.20. Треба відкрити вікно анімації через меню «Вікна». Якщо воно у Вас відкрито (за замовчуванням) - відразу вибираємо в меню анімації - створити кадри з шарів. Копіюємо кадр 2 (через той же меню анімації) і вставляємо його після кадру 3. Через теж меню анімації - «вклеїти кадр ...»

Вийшло чотири кадри, що ми і анімуємо - призначаючи їм час відображення кадру - рис.21. Перший кадр я ставлю - 1 сек, три наступних - 0,1 сек. Тисну play і насолоджуюся. Можна обмежиться цим. Хоча, звичайно, можливості прийому багато більше. Підсумок - зберігаю як gif - рис.22. Коротко - про настройки публікації - рис 23. Відкрийте (якщо не відкрито) вікно «Оптимізація». Виставте параметри - як на малюнку. Чому саме такі - тема зовсім іншого уроку. Поки - просто виставте їх так, повірте на-слово. І як на рис.22 - зберігайте готовий гіф - рис.24. Зрозуміло, що можна робити так само - напівопущені вії, підморгування і т.п. Хоч цілий спектакль. Ну а я на цьому - закруглююся.

Сподіваюся, що це було нудно, але зрозуміло. З побажаннями творчих успіхів - san_san.

Питання (якщо виникнуть) можна задати на нашому форумі аватар .