22:34 

МДН: иллюстрации и анимация

andre;
Царь в ужасе кричит: «Что я наделал? Зачем основал этот блядский город?!»
В конце сентября, незадолго до окончания «Мыса Доброй Надежды», у меня появилась идея снабдить текст иллюстрациями. Такие мысли бродят с середины лета — тогда я задумала поработать над подачей грядущего «Двойника». Подача — это такая вещь, без которой можно обойтись, но её настойчиво просит душа. Мне всё чаще кажется, что мало просто выложить двадцать-тридцать тысяч слов: надо обточить их, оформить должным образом, привлечь к делу людей со свежим взглядом, чтобы текст был неким экспириенсом. «Мыс Доброй Надежды» — экспериментальная штука и по форме, и по содержанию, и на ней не грех обкатать технологию.
Я стала думать, какими должны быть иллюстрации к «Мысу». Что главное? Ощущение трансформации, движения, некоего изменения в пределах заданных реалий. Текст театрален и похож на постановку, действие происходит в одном и том же доме. Декорации не меняются, событий мало, но внутри всё трансформируется ежеминутно, и за фасадом идёт напряжённая борьба. К такому движению характеров так и просится какой-нибудь интерактив.
Я прикинула, что к текстам можно применить ту же технологию, что и к рабочим проектам: прицепить анимацию при скролле или наведении мышки, сделать так, чтобы контент оживал при чтении. На ум пришло несколько вариантов. Самый простой — чёрно-белые фотографии, которые расцветают при ховере. Чуть посложнее — смещение: изначально фотографии как бы «висят» ровно, потом постепенно смещаются, наклоняются, становятся неустойчивыми, поворачиваются с ног на голову, а в конце фика приходят в более-менее устойчивое состояние.
И тот, и другой вариант — метафора развития героев. В первом случае упор делается на чёрно-белый мир, в котором нет полутонов, и он постепенно становится полноцветным, ярким, чувственным; во втором случае анимация иллюстрирует сдвиг по фазе — герои ненормальны, у них всё перевернуто, всё неправильно, криво, косо, но в конце мы видим, что они движутся к чему-то здравому.
Я поделилась этими мыслями с бетой Тиннарэ. Она сказала, что идея с наклонёнными фотографиями и смещением попадает в восприятие мира Тони. Прозвучало слово «калейдоскоп», и меня осенило: нужно нарезать иллюстрации на кусочки, а потом показывать комбинации из разных фрагментов. Тиннарэ развила мысль: «Картинка из нарезанных кусочков, которые перемещаются от прокручивания колесика мыши, и такое ощущение, будто их кто-то пытается собрать в одно, но каждый раз неудачно. А, допустим, в какой-то момент, когда у Тони складывается часть паззла, картинка тоже складывается в какой-то своей части». Мы видим то одну иллюстрацию, то другую, то замес из двух-трёх. Всё разбивается, как в песне Земфиры, а в конце складывается воедино. Само название текста — это тоже намёк на разбиение. Мыс Доброй Надежды — место схождения океанов, мыс бурь, родина легенды о Летучем Голландце, и всё здесь не слава богу.



Естественно, я загорелась. Даже если этот эффект никто не заметит, грех не попробовать такое сделать. Я прикинула, какими должны быть иллюстрации: вещественными, предметными, без конкретного обозначения действующих лиц, но с ярко выраженным бытом. Мне давно запали в душу иллюстрации lauf. — она рисует как раз предметы, чаще всего акварелью, и к тому же у неё были здоровские вещи на антивоенную тему — автомат в цветах, кастет в игрушечной технике, всё очень ламповое и нежное. Я написала ей в личку, обрисовала идею, дала почитать черновики и объяснила, что нужна пасторалька, которая при ближайшем рассмотрении разбивается в клочья. Чтобы объяснить, как всё это будет выглядеть в полотне текста, набросала демку с разбиением картинки — readymag.com/pochekueva/610956/

Лауф сходу набросала несколько этюдов.







Мы сошлись на том, что занавески в цветочек — это находка, но с предметной композицией «Кухня» проще всего работать. Лауф подкинула мысль о щите Капитана: мол, нельзя ли его в том же духе обыграть. Вот он лежит в том же куске интерьера, но где-то вдали, на полке, запылившийся и ненужный. Я обдумала эту мысль, но не смогла найти отражение в тексте: щит просто так не впишешь в повествование, тут нужен сложный бэкграунд с объяснением, как он вернулся к Капитану, а форма текста и жанр не подразумевают таких обоснуев. Но идея была соблазнительна и хорошо ложилась в главный конфликт текста. Поэтому я решила перенести эффект в анимацию — сделать композиции с центральной симметрией и разбивать иллюстрации изнутри, чтобы возникало смутное ощущение сходства со щитом Кэпа. Надо было сообразить, как резать картинки, чтобы детали были взаимозаменяемыми. Поломав голову, выбрала подходящую схему.



Получилось 48 фрагментов у каждой иллюстрации. Всего планировалось три — в начале, в середине и финальная. Плюс пару фрагментарных, с перемешанными кусками из разных картинок, чтобы проиллюстрировать мешанину эмоций в тексте.



К этому моменту Лауф уже закончила все три ключевые иллюстрации. Её акварель — нежная, пастельная, чуть смазанная. Чтобы усилить драматичность, я слегка подкрутила ползунки в Лайтруме, добавила контраста и углубила тени. Картинки до/после.










Моя любимая — третья: игрушечный автомат, неразборчивые солдатики, смываемые тёплой волной. Хотя работать легче всего было со второй — там максимальный контраст, композиция тяготеет к центру, и икеевское полотенце с разводами крови радует глаз.

Если разбивать их на куски по придуманной схеме, получится так.





Каждый кусочек сохраняется отдельной PNG-шкой на прозрачном фоне, а потом загружается в Редимаг.



Сложность в том, чтобы настроить правильное смещение: нужно задать триггер (как только пользователь доходит до такого-то момента, запускается анимация), само смещение (в какую сторону, на сколько пикселей), смену прозрачности, и вдобавок сделать так, чтобы все куски двигались слаженно. В среднем на отладку каждой картинки уходит от 2 до 3,5 часов.




Дальше поинтереснее: в ключевые моменты повествования вставляются рандомные куски из тех «полных» иллюстраций, что уже продуманы и отлажены. Где-то проглядывает кастрюля, где-то кусок окна, где-то окровавленное полотенце и игрушечный солдатик.




Для обложки я взяла всё те же кусочки по схеме из разных иллюстраций. К сожалению, Редимаг не позволяет сделать анимацию в мобильной версии: он считает, что это слишком тяжко для 3g-интернета, поэтому в версии для айфонов пришлось загрузить обычные иллюстрации без дробления на 48 кусков.



На десктопе вышло вот так.



До сих пор хожу любоваться этими акварелями. Лауф, спасибо тебе огромное! Я не чаяла, что ты откликнешься, и страшно счастлива, что всё получилось.

@темы: Писанина, Марвел

URL
Комментарии
2016-11-04 в 22:42 

eto-da
I'm a mess
а где это можно посмотреть в действии? Акварели очень красивы, а текст я как раз вот собралась читать на ао3, только сегодня открыла себе вкладку ))) спасибо за описание технологии - это правда интересно

2016-11-04 в 22:44 

andre;
Царь в ужасе кричит: «Что я наделал? Зачем основал этот блядский город?!»
eto-da, вот ссылка, тут всё есть — readymag.com/pochekueva/mdn/ На ао3 иллюстрации тоже подцеплены, но не по кускам, а цельными картинками)

URL
2016-11-04 в 22:47 

eto-da
I'm a mess
andre;, спасибо :sunny: ооо, там очень круто читать!

2016-11-04 в 22:49 

arschgeiger
Люблю.
:heart:
Сколько ж сюда вложено. А идея какова. Не, это прекрасно. Я всё сказал.

2016-11-04 в 23:18 

джеки блэквуд
storms and steel
Ого, а как сложно-то выглядит. Клево, с какой уместностью анимация кусков вписалась в фик. И главное - какой тон оно задает, вах!

2016-11-05 в 05:37 

Миррор
у каждого на пути свои океаны. Чтобы пересечь их нужна отвага. Это безрассудство? Может быть. Но разве можно уместить мечты в рамки?.. (с)
Заберу себе в цитатник, чтобы не забыть прочесть, а то пока отложила на почитать на ао3, но теперь, после такого разбора, впечатлилась эпичностью проделанной работы, буду читать на исходном сайте.:heart:
И да, акварели очень-очень нежные.:red:

2016-11-05 в 16:19 

o,
I want to believe.
Сам текст я пока не успела почитать, но иллюстрации посмотрела, они прекрасные, и солдатики очень хороши, да!)
Анимации очень круто выглядят. Правда я так и не поняла до конца, как технически это сделано...это очень долго?
Приятно их собирать и разбирать туда-сюда, залипательно.)
Здорово получилось! :hlop:

2016-11-06 в 09:10 

yahujik
Когда уже ты оформишь себе подписку и соберёшь нормальный сайт на редимаге с вот этим всем?

Комментирование для вас недоступно.
Для того, чтобы получить возможность комментировать, авторизуйтесь:
 
РегистрацияЗабыли пароль?

Блог Андре

главная