1. Схожість між сінемаграфіей і плотаграфіей
2. Створення анімації Plotagraph
3. висновки

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

Тренд використання відео в якість фону сторінки або оформлення шапки сторінки, в невеликому блоці та інше залишається і до цього дня, а тому про цю тему можна ще багато обговорювати і розглядати. Зокрема, таку тематику як «Плотаграфія». Її використовують в веб-дизайні поряд з відео, з сінемаграфіей, зі звичайними фотографіями і зображеннями, але по візуальному ефекту плотаграфія або Plotagraph дуже відрізняться. Або не відрізняється?

Різниця між удаваними ідентичними речами вже давно є проблемою для нас, людей. Наприклад, вічний пошук вчених, в спробі довести нам, що поняття «вага» і «маса» - абсолютно різні поняття. Як часто ми бачимо невелику анімацію в інтернеті і вважаємо, що перед нами кінематографія. Деякі починають ж стверджувати, що це не більше ніж «живі фотографії від apple». А на ділі виявляється, що це плотаграфія. На перший погляд у двох молодих візуальних засобів дуже багато спільного. Як правило, і сінемаграфія і плотаграфія створюється з контенту HD або 4K, мають нерухому частину, що рухається компонент, а оригінал зазвичай створюється професійним фотографом.

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

Схожість між сінемаграфіей і плотаграфіей

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

А це вже приклад ефекту сінемаграфіі або «ожилих зображень».

Як можна бачити, вони дуже схожі. І якщо ви не такий вже і затятий шанувальник кінематографа, то, напевно, ви ніколи і різниці не помітите. Різниця буде проявлятися, коли ви почнете замислюватися про тривимірності. «Рідина ллється в чашечку». Її зробити нескладно. Але при цьому, анімація руху рідини буде не більше ніж ілюзією і маніпуляцією вихідного зображення, а не відображенням реального фізичного руху. Тут і криється різниця між двома стилями відео - основний матеріал і реалістичність.

Сінемаграфія складається з відео. Як пам'ятаєте наш урок по Photoshop, ми вирізали з кожного кадру частину зображення і її заставали рухатися.

Плотаграфія ж, навпаки, створюється виключно з статичних зображень JPG або PNG. Але не з відео, з нього просто не можна зробити даний ефект.

Трохи приголомшені від думки пожвавлення статики? Так, первісна реакція завжди така. І цьому подив є пояснення. Сінемаграфія виглядає дуже природно, плавно (волосся, вода на відео вище). У неї є необроблений ритм, який є другорядним, але потрапили в кадр: руху, освітлення. Вони виглядають реальними і органічно вписуються в сцену, тому зливаючись воєдино на статичному фоні, прекрасно себе показують.

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

Створення анімації Plotagraph

Створювати Plotagraph можна різними способами. Найбільш зручний і професійний, це plotaverse , Який доступний на Mac і PC, є версії і для iOS / Android. Але додаток в силу своєї унікальності платне, а версія торрент едішен не завжди трапляється робоча. Зате на самому сайті програми можна побачити роботи майстрів і самому приєднатися до їх спільноти, і поділитися своїми роботами.

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

Саме від назви програми і з'явилася назва ефекту і він досить молодий в порівнянні зі звичайною кінематографією.

Незважаючи на те, що для мобільних пристроїв додаток безкоштовне (з обмеженими функціями), все ж творити найчастіше зручніше на звичайному РС / Mac з великим екраном, клавой + мишкою і так далі. Відповідно, іншим варіантом пожвавлення зображень стає використання Photoshop. У ньому ми маємо використовувати знову шкалу часу, розтягування в часі, вибірку ключових кадрів і створення циклу. Але це може тільки здатися складним. На ділі все простіше.

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

Відкриваємо наше зображення, беремо пензлик м'яку, жорсткість 0, непрозорість 100 і натиск 100. Включаємо Швидку маску під панеллю інструментів і зафарбовує наш водоспад. Якщо пензлик захопила щось зайве, то перемикаємо кольору і стираємо маску.

Потім вимикаємо Швидку маску і бачимо, що автоматично з'явилося виділення. Але виділення не водоспаду, як ми фарбували, а все, що його оточує його. Тому переходимо в меню Виділення -> Інверсія.

Потім копіюємо виділення і вставляємо. Автоматично з'являється новий шар з нашим водоспадом.

Відкриваємо шкалу часу і анімації. Переводимо наш Шар 1 з водоспадом в смарт-об'єкт (пкм по шару на панелі шарів). На шкалі часу скорочуємо час нашого відео до 1 секунди.

Розгортаємо список Шар 1 і вибираємо Перспектива. Встановлюємо ключову точку на початку відео, переміщаємо повзунок майже в кінець і ставимо ще одну точку. У цій точці водоспад повинен змінитися, тому вибираємо «Вільне трансформування» (Ctrl + T) і трохи подовжує його, не особливо розширюємо, але вшир теж можна.

Програємо відео і помічаємо, що кадр стрибає і виглядає анімація грубої. Тому вдамося до такого ефекту, як періодичність анімації. Кількома по іконці біля ножиць, вибираємо «Виведення зображення» і перетягуємо на шкалу часу на шар. Потім ще раз. У нас вийшов трикутник. Що це означає?

У самому піку наш водоспад матиме усереднений розмір трансформації, який і так існував в цій точці. АЛЕ, потім все зайве від оригіналу (тобто те, що ми додавали шляхом трансформації) почне плавно зникати. Таким чином, оскільки у нас на панелі шарів включена видимість обох шарів, то Шар 1 буде поступово зникати, а оригінальний малюнок проступати і показувати себе.

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

Проробляємо ті ж кроки, що і з водоспадом. Виділяємо фоновий шар, натискаємо Швидку маску, зафарбовує озерце, вимикаємо, інвертуємо виділення і копіюємо на новий шар.

Переводимо смарт-об'єкт, на тимчасовій ккал рухаємо шар спочатку, тривалість встановлюємо на 1 секунду і вибираємо ключові точки для Перспективи.

Але останню крапку вибираємо не в тому ж місці, де і для водоспаду, а трохи раніше (вже потім можна точки вирівняти при необхідності). Всі також через вільне трансформування збільшуємо об'єкт. А потім на шар встановлюємо два рази «виведення зображення». Зменшувати об'єкт немає сенсу, оскільки на початковій фотографії зменшення не буде видно. А збільшення, навпаки, покриє собою частину оригіналу і буде помітним.

Тепер обидві другі ключові точки перемішаємо в кінець відеоряду. Чому зараз? Тепер наочно видно, що виходить і яким чином, що змінюється і як. Раніше, якщо одночасно б все анімовані, могла створитися «каша» візуально, особливо, якщо ви не дуже-то захоплюєтеся роботою з відео і анімацією.

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

І саме відео починаємо не з початку, а з середини. Таким чином, у нас вийшла плавна анімація, хоч і швидка.

Верхнім шаром можна накласти копію нашого фону і додати чорну маску, щоб анімація була видна. Тоді анімація буде плавнів і при необхідності можна буде проявити ті деталі на статичному фоні, що випадково опинилися в області трансформації об'єктів.

Прийшов час експорту відео. Вибираємо в меню панелі часу Експорт, встановлюємо кодек H.264, вибираємо готовий набір, наприклад, для Youtube 720р або 1080р, кількість кадрів можемо встановити за замовчуванням або зробити «супер-пупер» 60fps. Натискаємо Рендеринг. Процес нешвидкий.

Відкриваємо в провіднику папочку з відео і бачимо, що його обсяг склав 2 МБ при тривалості 1 секунда. Експортувати в GIF теж можна, через меню Файл, але ресурсів комп'ютера і оперативної пам'яті буде потрібно дуже і дуже багато. Кодувати в відео набагато простіше і швидше, і якість краща.

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

висновки

Таким чином, вирішивши використовувати в дизайні сайту або Лендінзі відео, задумайтеся, а яке ви б хотіли самі побачити? Реалістичне або трохи містичне? А якщо реалістичне, то наскільки і де вона, грань реальності? Сінемаграфія, кінематографія, плотаграфія настільки схожі між собою, що дуже складно сказати, що саме використовується на тому чи іншому конкретному сайті.

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

Оформляючи веб-дизайн , Продумуючи не тільки, де будуть іконки і блоки з контентом, колірну палітру, завжди потрібно думати про можливість відео або невеликий анімації. І, незважаючи на те, що плотаграфіі в інтернеті багато, як і сінемаграфіі, часто не завжди є те, що потрібно саме вам. Створюєте ви дизайн сайту кафетерію або піцерії. Але ж в кутку або в шапці заголовка можна розмістити невелике відео, як пара піднімається над піцою або пінка каву в чашці плавно рухається, або сонячне світло грає на поверхні чашки з чаєм. Таких непомітних погляду (на перший погляд) ідей для анімації дуже багато і, повірте, що на сайті все це виглядає дуже і дуже заманливо. Це навіть прийде якусь нотку смакоту, бажання спробувати, інтригує і з'являється інтерес ще пройтися по сторінках сайту з думкою: «раптом ще щось цікавеньке тутечки є».

Ось так, молодий досить ефект (року два йому) має свою популярність і нішу в середовищі дизайнерів і всі шанси на те, щоб стати невід'ємною частиною і веб-дизайну.