В свое время мы рассказывали вам о том, что в веб-дизайне очень часто используются коротенькие по времени видеоролики или синемаграфия. Они призваны заменить тяжеловесные видео, а эффект на пользователя имеют почти тот же самый. Почему почти? Дело в том, что синемаграфия оживляет только часть композиции, и в отличие от полноценного видео может обладать эффектами и сценами, что в реалистических видеороликах попросту не увидеть.
Тренд использования видео в качество фона страницы или оформления шапки страницы, в небольшом блоке и прочее остается и по сей день, а потому об этой теме можно еще многое обсуждать и рассматривать. В частности, такую тематику как «Плотаграфия». Ее используют в веб-дизайне наряду с видео, с синемаграфией, с обычными фотографиями и изображениями, но по визуальному эффекту плотаграфия или 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 тоже можно, через меню Файл, но ресурсов компьютера и оперативной памяти потребуется очень и очень много. Кодировать в видео гораздо проще и быстрее, и качество лучше.
Разумеется, что можно еще поработать над падением водопада, добавить отдельно текстуры пены и их анимировать или придать перелив красок на радуге. Вариаций очень много и совершенствовать плотаграфии можно бесконечно долго.
Выводы
Таким образом, решив использовать в дизайне сайта или лендинга видео, задумайтесь, а какое вы бы хотели сами увидеть? Реалистичное или немного мистическое? А если реалистичное, то насколько и где она, грань реальности? Синемаграфия, кинематография, плотаграфия настолько похожи между собой, что очень сложно сказать, что именно используется на том или ином конкретном сайте.
Между тем, создавать плотаграфии несложно, может только чуть кропотливо. Это также интересно и необычно, особенно когда есть желание немного попрактиковаться в творчестве. Особенность в том, что нужно более явно и четко представлять, что же хочется привести в движение. Оригинал статичен, а потому у дизайнера есть больший простор для фантазии. Да и добавлять объекты и слои гораздо проще, чем в синематографии.
Оформляя веб-дизайн, продумывая не только, где будут иконки и блоки с контентом, цветовую палитру, всегда нужно думать о возможности видео или небольшой анимации. И, несмотря на то, что плотаграфии в интернете много, как и синемаграфии, зачастую не всегда есть то, что нужно именно вам. Создаете вы дизайн сайта кафетерия или пиццерии. Но ведь в углу или в шапке заголовка можно разместить небольшое видео, как пар поднимается над пиццей или пенка кофе в чашке плавно движется, или солнечный свет играет на поверхности чашки с чаем. Таких незаметных взору (на первый взгляд) идей для анимации очень много и, поверьте, что на сайте все это выглядит очень и очень заманчиво. Это даже придет некую нотку вкусности, желания попробовать, интригует и появляется интерес еще пройтись по страницам сайта с мыслью: «вдруг еще что-то интересненькое туточки есть».
Вот так, молодой достаточно эффект (года два ему) имеет свою популярность и нишу в среде дизайнеров и все шансы на то, чтобы стать неотъемлемой частью и веб-дизайна.