я еще текст не прочла, но собираюсь, но как же красиво на этом ресурсе читать с иллюстрациями!!!!
UPD: прочла и очень понравился
04.11.2016 в 22:34
Пишет
andre;:
МДН: иллюстрации и анимация
В конце сентября, незадолго до окончания «Мыса Доброй Надежды», у меня появилась идея снабдить текст иллюстрациями. Такие мысли бродят с середины лета — тогда я задумала поработать над подачей грядущего «Двойника». Подача — это такая вещь, без которой можно обойтись, но её настойчиво просит душа. Мне всё чаще кажется, что мало просто выложить двадцать-тридцать тысяч слов: надо обточить их, оформить их должным образом, привлечь к делу людей со свежим взглядом, чтобы текст был неким экспириенсом. «Мыс Доброй Надежды» — экспериментальная штука и по форме, и по содержанию, и на ней не грех обкатать технологию.
Читать дальшеЯ стала думать, какими должны быть иллюстрации к «Мысу». Что главное? Ощущение трансформации, движения, некоего изменения в пределах заданных реалий. Текст театрален и похож на постановку, действие происходит в одном и том же доме. Декорации не меняются, событий мало, но внутри всё трансформируется ежеминутно, и за фасадом идёт напряжённая борьба. К такому движению характеров так и просится какой-нибудь интерактив.
Я прикинула, что к текстам можно применить ту же технологию, что и к рабочим проектам: прицепить анимацию при скролле или наведении мышки, сделать так, чтобы контент оживал при чтении. На ум пришло несколько вариантов. Самый простой — чёрно-белые фотографии, которые расцветают при ховере. Чуть посложнее — смещение: изначально фотографии как бы «висят» ровно, потом постепенно смещаются, наклоняются, становятся неустойчивыми, поворачиваются с ног на голову, а в конце фика приходят в более-менее устойчивое состояние.
И тот, и другой вариант — метафора развития героев. В первом случае упор делается на чёрно-белый мир, в котором нет полутонов, и он постепенно становится полноцветным, ярким, чувственным; во втором случае анимация иллюстрирует сдвиг по фазе — герои ненормальны, у них всё перевернуто, всё неправильно, криво, косо, но в конце мы видим, что они движутся к чему-то здравому.
Я поделилась этими мыслями с бетой Тиннарэ. Она сказала, что идея с наклонёнными фотографиями и смещением попадает в восприятие мира Тони. Прозвучало слово «калейдоскоп», и меня осенило: нужно нарезать иллюстрации на кусочки, а потом показывать комбинации из разных фрагментов. Тиннарэ развила мысль: «Картинка из нарезанных кусочков, которые перемещаются от прокручивания колесика мыши, и такое ощущение, будто их кто-то пытается собрать в одно, но каждый раз неудачно. А, допустим, в какой-то момент, когда у Тони складывается часть паззла, картинка тоже складывается в какой-то своей части». Мы видим то одну иллюстрацию, то другую, то замес из двух-трёх. Всё разбивается, как в песне Земфиры, а в конце складывается воедино. Само название текста — это тоже намёк на разбиение. Мыс Доброй Надежды — место схождения океанов, мыс бурь, родина легенды о Летучем Голландце, и всё здесь не слава богу.
Естественно, я загорелась. Даже если этот эффект никто не заметит, грех не попробовать такое сделать. Я прикинула, какими должны быть иллюстрации: вещественными, предметными, без конкретного обозначения действующих лиц, но с ярко выраженным бытом. Мне давно запали в душу иллюстрации lauf. — она рисует как раз предметы, чаще всего акварелью, и к тому же у неё были здоровские вещи на антивоенную тему — автомат в цветах, кастет в игрушечной технике, всё очень ламповое и нежное. Я написала ей в личку, обрисовала идею, дала почитать черновики и объяснила, что нужна пасторалька, которая при ближайшем рассмотрении разбивается в клочья. Чтобы объяснить, как всё это будет выглядеть в полотне текста, набросала демку с разбиением картинки — readymag.com/pochekueva/610956/
Лауф сходу набросала несколько этюдов.
![](http://funkyimg.com/i/2jbSJ.jpg)
![](http://funkyimg.com/i/2jbSK.jpg)
![](http://funkyimg.com/i/2jbSH.jpg)
Мы сошлись на том, что занавески в цветочек — это находка, но с предметной композицией «Кухня» проще всего работать. Лауф подкинула мысль о щите Капитана: мол, нельзя ли его в том же духе обыграть. Вот он лежит в том же куске интерьера, но где-то вдали, на полке, запылившийся и ненужный. Я обдумала эту мысль, но не смогла найти отражение в тексте: щит просто так не впишешь в повествование, тут нужен сложный бэкграунд с объяснением, как он вернулся к Капитану, а форма текста и жанр не подразумевают таких обоснуев. Но идея была соблазнительна и хорошо ложилась в главный конфликт текста. Поэтому я решила перенести эффект в анимацию — сделать композиции с центральной симметрией и разбивать иллюстрации изнутри, чтобы возникало смутное ощущение сходства со щитом Кэпа. Надо было сообразить, как резать картинки, чтобы детали были взаимозаменяемыми. Поломав голову, выбрала подходящую схему.
![](http://funkyimg.com/i/2jc5k.jpg)
Получилось 48 фрагментов у каждой иллюстрации. Всего планировалось три — в начале, в середине и финальная. Плюс пару фрагментарных, с перемешанными кусками из разных картинок, чтобы проиллюстрировать мешанину эмоций в тексте.
![](http://funkyimg.com/i/2jc57.jpg)
К этому моменту Лауф уже закончила все три ключевые иллюстрации. Её акварель — нежная, пастельная, чуть смазанная. Чтобы усилить драматичность, я слегка подкрутила ползунки в Лайтруме, добавила контраста и углубила тени. Картинки до/после.
![](http://funkyimg.com/i/2jbSQ.jpg)
![](http://funkyimg.com/i/2jbSR.jpg)
![](http://funkyimg.com/i/2jbSL.jpg)
![](http://funkyimg.com/i/2jbSM.jpg)
![](http://funkyimg.com/i/2jbSN.jpg)
![](http://funkyimg.com/i/2jbSP.jpg)
Моя любимая — третья: игрушечный автомат, неразборчивые солдатики, смываемые тёплой волной. Хотя работать легче всего было со второй — там максимальный контраст, композиция тяготеет к центру, и икеевское полотенце с разводами крови радует глаз.
Если разбивать их на куски по придуманной схеме, получится так.
![](http://funkyimg.com/i/2jc5a.jpg)
![](http://funkyimg.com/i/2jc5b.jpg)
![](http://funkyimg.com/i/2jc5h.jpg)
Каждый кусочек сохраняется отдельной PNG-шкой на прозрачном фоне, а потом загружается в Редимаг.
![](http://funkyimg.com/i/2jcbK.jpg)
Сложность в том, чтобы настроить правильное смещение: нужно задать триггер (как только пользователь доходит до такого-то момента, запускается анимация), само смещение (в какую сторону, на сколько пикселей), смену прозрачности, и вдобавок сделать так, чтобы все куски двигались слаженно. В среднем на отладку каждой картинки уходит от 2 до 3,5 часов.
![](http://funkyimg.com/i/2jcbG.jpg)
![](http://funkyimg.com/i/2jcbJ.jpg)
Дальше поинтереснее: в ключевые моменты повествования вставляются рандомные куски из тех «полных» иллюстраций, что уже продуманы и отлажены. Где-то проглядывает кастрюля, где-то кусок окна, где-то окровавленное полотенце и игрушечный солдатик.
![](http://funkyimg.com/i/2jcbd.png)
![](http://funkyimg.com/i/2jcbn.png)
Для обложки я взяла всё те же кусочки по схеме из разных иллюстраций. К сожалению, Редимаг не позволяет сделать анимацию в мобильной версии: он считает, что это слишком тяжко для 3g-интернета, поэтому в версии для айфонов пришлось загрузить обычные иллюстрации без дробления на 48 кусков.
![](http://funkyimg.com/i/2jciG.jpg)
До сих пор хожу любоваться этими акварелями. Лауф, спасибо тебе огромное! Я не чаяла, что ты откликнешься, и страшно счастлива, что всё получилось.
URL записи
@темы:
марвел,
кэп,
почитала,
старбакс,
тройничок