Цифровой «мусор», или Графика в стиле гранж

Донован Риттенбах

     Одним из великих парадоксов цифровой эры является то, что, получив возможность создавать идеальные миры без каких-либо изъянов, мы стараемся добиться, чтобы эти машинные стерильно-чистые сцены выглядели старыми, грязными, потрепанными. В добрые старые времена, зайдя в кинотеатр, вы могли определить, что сделано с помощью знакогенератора, а что нет.
     Я помню время, когда о ландшафтах VRML говорили «это здорово!», а не «так себе», а устрашающие психоделические картины вызывали комментарий «во дает!», а не просто «это Kai's Power Tools».
     Но все меняется.

     Нынешний цифровой ренессанс требует органической сложности — мы теперь четко различаем художников и «фильтроманов». Художники, особенно те, которые занимаются спецэффектами, больше не хотят, чтобы их работы выглядели как сделанные компьютером. Они хотят создавать художественные произведения. Даже обезьяна способна нажимать кнопки для наложения фильтров на слои, но художник вносит в свой проект собственное видение. От качества и оригинальности этого видения зависит, обратится ли клиент к художнику с заказами еще раз или же поищет другого исполнителя.
     Вот почему мы ценим «мусор» (grunge), тот самый, что можно увидеть за кухонной плитой, — то есть грязь. Блестящее описание понятия «мусор», данное Дэйвом Мак-Кином, можно найти по адресу www.vivisect.org/dreamline.
     Для меня «мусор» означает то, во что вложены труд, талант и старание. Эффект «мусора» можно увидеть далеко не во всех роликах, потому что это не просто один из фильтров, которые можно купить. Имея это в виду, давайте посмотрим, как добиться того, чтобы созданные на компьютере изображения выглядели менее «машинными», более органическими и загрязненными.
     Компьютерные объекты не имеют текстуры, соответствующей следам естественной эрозии. Для них не существует дождей, от которых они бы ржавели, волн, которые бились бы об них каждый день, и солнца, под лучами которого они бы растрескивались. Вот здесь-то «мусор» и приходит на помощь. Приемы, которые описаны в этой статье, позволяют создавать эффекты выветривания в мире, где никогда не бывает ветра. И уж, как минимум, они помогут вам привлечь внимание ваших клиентов.
     Мы будем рассматривать использование «мусора» для двумерных изображений. Трехмерными объектами мы заниматься не будем, но эти методы применимы и для них. Простой пример: с их помощью вы сможете создавать великолепные текстуры для своих трехмерных моделей.

Кисти для «мусора»
     Наше путешествие в мир «мусора» мы начнем с пакета Adobe Photoshop, где есть три инструмента, особенно подходящих для его нанесения: рисовальная кисть (paintbrush), инструмент для нанесения пятен (smudge tool) и окно настройки слоев (Layer Options).
     Базовыми инструментами для создания эффектов в стиле «гранж» с помощью рисовальной кисти и пятен являются «мусорные» кисти. Такие кисти позволяют имитировать ржавчину, плесень, шелушение, растрескивание и много других форм эрозий, существующих в реальном мире.
     Мой набор кистей я получил от Брайана Поупа. Он пользовался ими при создании игрового CD-ROM Bad Mojo — выдающегося образца «замусоренных» изображений. К его коллекции я добавил кое-что свое и приглашаю вас воспользоваться этим и поделиться с друзьями.
     Я приготовил для вас несколько «мусорных» кистей, с которых можно начать. Если вы работаете на Mac, войдите в Reader's Corner на сайте www.dv.com и загрузите их оттуда. Если вы работаете на PC, загрузите файл brushes.tif (см. рис. 1) и создайте из него собственные кисти точно так же, как создается любая пользовательская кисть Photoshop. Скопируйте единственный слой файла в альфа-канал нового документа. Усильте резкость альфа-канала — и тем самым резкость выбранного изображения — с помощью регулировок яркости и контраста. Затем выберите альфа-канал и загрузите его.
     Вот несколько советов и идей для тех, кто намерен сделать собственные «мусорные» кисти. Всегда рисуйте кисти в черно-белом виде. Белое легко «съедает» черное, так что вы сможете контролировать степень эрозии. Кроме того, вы, возможно, захотите раскрасить мои «мусорные» кисти, а создание кистей в черно-белом виде позволит вам оценить контрастность еще до раскраски. Это как в школе фотографии, где в первом семестре учатся снимать только на черно-белой пленке. В конце концов контраст бывает гораздо важнее цвета.

Рис. 1. Этот TIFF-файл, доступный на www.dv.com, поможет пользователям PC делать собственные «мусорные» кисти для Photoshop. Пользователи же Mac могут загрузить мои готовые кисти

     Клонируйте «мусорный» файл в отдельный слой, используя новую опцию в Photoshop 5. Усильте контраст, затем размойте границы какой-нибудь «мусорной» кистью и полученное изображение превратите в новую кисть. Не оставляйте резких границ. Реалистичный «мусор» должен быть таким, чтобы невозможно было определить, где кисть начинается и где кончается.
     Кисти должны быть небольшими. Большие grunge-кисти не дают никакого преимущества, а управлять ими сложнее. С помощью инструмента «лассо» создайте сумасшедшие контуры, закрасьте их, уберите ненужную мелочь, а потом слегка размажьте.
     Найдите картинку с ржавым болтом или заклепкой. Выберите болт, используя функцию Photoshop QuickMask, и превратите выбранный объект в кисть. Теперь касаниями этой кисти можно рисовать болты или заклепки.
     Чтобы создать пятна плесени, выберите инструмент «карандаш» и поставьте несколько больших жирных точек близко друг от друга. Убедитесь в том, что сглаживание границ (antialiasing) отключено, и слегка размажьте точки Гауссовым размытием. Возьмите кисть меньшего размера и в каждой размазанной точке поставьте жирную белую точку. Эту новую точку размойте вчетверо слабее, чем большую, только чтобы они плавно переходили друг в друга. Вы получили отличную «плесневую» кисть с темными пятнами там, где плесень гуще, и более светлыми там, где она реже.
     В процессе рисования кистью меняйте степень ее прозрачности. Это можно делать, вводя с клавиатуры разные числа во время рисования или меняя нажим пера на графический планшет. Рисуйте в разных режимах, накладывайте слои друг на друга. Используйте подстроечные слои. Экспериментируйте.

«Мусорные» карты
     Чтобы сделать хороший «мусор», нужны «мусорные» фоны и текстурные карты. Существует много источников «мусорных» карт, но мне особенно нравятся коллекции на CD-ROM фирмы Marlin Studios (www.marlinstudios.com). На ее сайте есть несколько карт, которые можно оттуда загрузить бесплатно.
     Мой любимый диск от Marlin Studios стоит $149 — (Здесь и далее цены американского рынка. — Прим. ред.) и называется Seamless Textures2 — Rustic Exterior Surfaces. На нем содержится более 300 фотографических текстур, из которых можно строить фоны, и соответствующих bump-карт.
     Эти bump-карты можно использовать как карты зеркальных поверхностей, карты отражения или любые другие карты, которые вам могут понадобиться. Карты зеркальных поверхностей и отражения позволяют имитировать перепады освещенности на реальных эродированных поверхностях. Использование таких карт поможет вам сделать «мусор» более реалистичным.

Приемы создания «мусора»в Photoshop

Рис. 2. Инструменты Photoshop «пятно» и «мусорная кисть» позволяют имитировать стекающую краску

     Теперь, имея «мусорные» кисти и карты, начнем экспериментировать. Это всегда важно — вы сможете выработать новые подходы и расширить возможности своей технологии. Многие из моих идей в области дизайна возникают тогда, когда я пробую и так, и этак и вдруг получаю нечто, что мне нравится.
     Инструмент «пятно»: создайте текстовый слой и сделайте его рендеринг, если у вас Photoshop 5. Нажмите клавишу R и выберите одну из «мусорных» кистей. Этой кистью обработайте нижние кромки букв. Помните, что степень загрязнения можно менять, изменяя прозрачность кисти или силу нажима на графическом планшете. Инструмент «пятно» позволяет создавать такие эффекты, как оплывающая или стекающая краска. Рис. 2 дает пример того, что можно сделать инструментом «пятно», настроенным на «мусорную» кисть.
     Используя кисть болта, о которой говорилось выше, можно создать эффект осыпания ржавчины из текста. Для этого продублируйте текстовый слой, «загрязните» нижний из этих слоев и раскрасьте его. Затем подберите степень прозрачности так, чтобы они слились.
     Рисовальная кисть: создайте новый текстовый слой и, если необходимо, сделайте рендеринг. Нажмите клавишу D
для установки цветов по умолчанию, затем нажмите B и выберите «мусорную» кисть для рисования. Имейте в виду,
что в данном случае единственный параметр, который можно изменять, — это светимость. Его изменение создает эффект неравномерной поверхности текста.

Рис. 3. При правильном выборе цвета можно изобразить плесень

     Например, сделайте текст желтоватым. Выберите в слое только текст, тогда рисование будет действовать только на него. Скройте выбранный текст, чтобы он не мешал. Варьируя только прозрачность, обработайте текст «мусорной» кистью. Вы увидите места, похожие на блики, и области, где края текста кажутся разъеденными.
     Я обычно раскрашиваю результат применения полутоновой «мусорной» кисти. Одна из причин этого заключается в том, что раскраска действует только на полутона, а не на чисто-белое или чисто-черное. Если вы работаете с белым или черным, то они не окрасятся, но все промежуточные значения окрасятся. На рис. 3 я окрасил текст в темно-коричневый цвет с оливково-зеленым оттенком для имитации плесени.
     Этими методами очень удобно разъедать границы не только текста, но и на видео — можно создавать «мусорные» маски канала цветности или альфа-канала. Если вы не хотите пользоваться готовыми рваными краями, почему не сделать их самим?

Рис. 4. Окно Layer Options в Photoshop содержит инструменты для создания «выветренного» текста

     Еще одна возможность — с помощью клавиши Q вызвать QuickMask. В данный момент вы разрисовываете некоторый выбранный объект. Подойдите к этому творчески. Например, раскрасьте объект «мусорными» кистями, а затем размойте его, чтобы истончить границы. Вместе с фильтром Offset этот метод позволяет делать фоны без следов сшивки. Можно либо рисовать инструментом клонирования, либо использовать данный метод для маскирования и заполнения слабых мест.
     Окно Layer Options: теперь давайте откроем какую-нибудь эродирующую текстуру. Если у вас их нет, возьмите одну из бесплатных с сайта Marlin Studios. Выберите карту с коррозией, контрастом и фрактальными краями линий. Создайте текстовый слой. Теперь дважды щелкните на нем в палитре слоев. Появится окно Layer Options (см. рис. 4).
     Пока что текст однородного цвета, так что перемещение движков верхнего слоя ничего не даст. Если же вы поиграете с управлением композитинга нижележащих слоев, то увидите, что текст подвергся коррозии, которая выглядит естественно.
     Попробуйте подвигать нижележащий слой инструментом move и обратите внимание на то, как меняется текстовая композиция. Такие изменения дают вам широкий простор для выбора. Если хочется усилить эрозию, попробуйте сдвинуть или перетащить слой «мусора».

Рис. 5. Фаски и тени хороши и для «замусоренного» текста

     Теперь выберите текст и инвертируйте изображение. Перейдите с того слоя, где вы работали, в нижележащий слой «мусора» и уничтожьте там все, кроме того, что расположено под текстом. Теперь у вас есть очень привлекательный «замусоренный» текст. Слейте эти два слоя друг с другом.
     Создав из этого файла альфа-канал или воспользовавшись бесплатным фильтром Knoll Unmult фирмы Puffin Designs (www.puffindesigns.com), вы получите очень милый «замусоренный» альфа-канал, который будет особенно хорош, если вы введете для этого слоя фаску и тень (см. рис. 5).

Дефекты кинопленки
     В искусстве «замусоривания» очень важны грязь, царапины и волоски. Для создания этих эффектов в движущейся графике я не знаю лучшего средства, чем фильтр Aged Film компании DigiEffects. Он входит в состав набора подключаемых модулей Aurorix2 стоимостью $289 для Mac OS After Effects, а также продается как отдельный подключаемый модуль стоимостью $149 для Windows-версий пакетов Photoshop, Premiere и DeBabelizer (www.digieffects.com). DigiEffects делает немало отличных фильтров, но Aged Film поразил воображение многих людей.
     К сожалению, я часто вижу, что Aged Film плохо используется. Некоторые художники шлепают его на рекламу со стандартными значениями зернистости, серого оттенка и плотности царапин. А ведь Aged Film способен на гораздо более тонкие эффекты, так что самое меньшее, что может сделать дизайнер для своего клиента, — это поменять настройки модуля так, чтобы они лучше отвечали задачам конкретного проекта.

Рис. 6. Ореол вокруг текста, напоминающий статический разряд, создается фильтром SE Scatterize из Final Effects

     Чтобы лучше понять, как использовать фильтр Aged Film, посмотрите старые фильмы. Найдите самый старый фильм, какой сможете. Обратите внимание на то, как выглядят трещины, волоски, зерно и царапины — возможно, иначе, чем вы думали. Например, мне встречались старые фильмы с голубоватым оттенком вместо ожидаемого желтоватого.
     В старых фильмах вы можете увидеть мерцание. Это сильный эффект. Когда я ввожу в проект мерцание, то делаю его достаточно выраженным, чтобы привлечь внимание. В нынешних электронных кинескопах мы видим так мало мерцания, что этот эффект производит впечатление.
     Еще один способ «загрязнить» свой проект — использовать эффект SE Scatterize, входящий в состав пакета Final Effects Complete фирмы ICE (www.iced.com) стоимостью $995. Если вы работаете над титром, сначала продублируйте текстовый слой. К нижнему из текстовых слоев примените хорошую дозу Scatterize. Установите настройки на randomize every frame и vertical. Если ваш текст темный, а шум белый, вокруг букв возникнет красивый ореол, напоминающий статический разряд (см. рис. 6).

«Судорога» — сестра «мусора»
     Когда я вижу хорошо сделанный grunge, то начинаю волноваться. И дергаюсь. Нерегулярные судороги (twitches) — еще один способ сделать проект менее синтетическим и более органичным. Вот два способа ввести в композицию подергивание.
     Пакет After Effects Production Bundle содержит инструмент под названием Wiggler («качалка»). Он создает стильные эффекты, определенно привлекающие внимание. Wiggler позволяет «качать» любой параметр в композиции After Effects. Я люблю применять его к положению объекта, его прозрачности и повороту. Wiggler почти все заставляет выглядеть хорошо и «грязно».
     Недавно в одном проекте мне надо было ввести мерцание в изображение вращающегося льва, которое было частью бесконечного цикла. Длительность моей композиции была около семи секунд. Мне требовались резкие колебания светимости, поэтому через каждые полсекунды я установил ключевые кадры со случайными значениями прозрачности. Затем я применил Wiggler ко всем ключевым кадрам. За считанные секунды у меня получились чудесные эффекты мерцания лампочек.

Рис. 7. «Замусоренный» текст лучше выделяется, если добавить оттеняющий ореол

     Если нужно, чтобы фоновый слой контрастировал с «качаемым» текстом, можно попробовать вот что. Начните с какого-нибудь темного, «замусоренного» текста, созданного в Photoshop, как описано в данной статье. В After Effects примените Wiggler к позиционным ключевым кадрам текстового слоя. Продублируйте этот слой и сдвиньте его на несколько пикселей. Увеличьте яркость и контраст нового слоя, чтобы размыть его. Затем добавьте в нижний слой не меньше 20 пикселей смаза за счет движения (Motion blur). Установите ключевые кадры для длины и направления blur и примените Wiggler к обеим этим настройкам. Получится симпатичный подергивающийся ореол для «замусоренного» текста, созданного ранее (см. рис. 7).
     Эффекты подергивания можно создавать и с помощью бесплатного подключаемого модуля Path Text AE фирмы Adobe. Глубоко в недрах меню управления эффектами Path Text вы найдете четыре параметра, задающих дрожание. Если ввести какое-нибудь число, Path Text будет случайным образом выбирать значения базовой линии, поворота, кернинга или масштаба. Это дает оригинальные текстовые эффекты. Описанные идеи — всего лишь вершина айсберга. Трудно ошибиться, вводя в проект зависящий от времени «мусор», особенно если применять его к «шевелящемуся» смазу (Motion blur).

Blur
     Изучая работы таких мастеров «мусора», как Дэйв Мак-Кин, вы сразу заметите, что он широко использует смаз. В цифровую эру, когда все находится в фокусе, приятно видеть расплывчатые очертания. Но размазывать изображение можно по-разному. Во многих проектах используются смазы типа Gaussian, Fast и Motion, а Compound blur встречается редко.

Рис. 8. Радиальный градиент — первый шаг в создании Compound blur

     Compound blur («сложный смаз») выполняется по полутоновой карте, что позволяет в разных местах иметь разную степень размытия. Там, где карта более темная, изображение более резкое. Там, где она светлее, композиция размыта сильнее. Чтобы получить представление о том, как работает Compound blur, давайте построим несложный проект.
     В After Effects начнем с создания текстового слоя. Затем сделаем сплошной слой, покрывающий всю композицию, и применим к нему эффект радиального градиента (см. рис. 8). В начале и конце композиции установим несколько ключевых кадров. Анимируем градиент, чтобы он двигался по экрану справа налево. Выполним предварительную композицию и применим Compound blur к текстовому слою. Теперь используем градиентную композицию в качестве карты значения blur. Выключим градиентный слой. Проведем рендеринг фильма и посмотрим, как отдельные части текста фокусируются и расфокусируются (см. рис. 9).
     Compound blur также позволяет создавать красивые рамки. Если вы используете blur для рамки, наложите волоски или шум поверх blur-изображения. Это даст эффект затуманенного оконного стекла. Так как волоски находятся в фокусе, то они кажутся ближе, создавая ощущение расстояния.

Рис. 9. Compound blur заставляет текст то фокусироваться, то расфокусироваться

     Ради забавы, художественного эксперимента, возьмите сцену с хорошо освещенными фигурами двух человек, один из которых находится недалеко от камеры, а другой — вдали от нее. Используя Compound blur, размойте все изображение, кроме двух лиц. Может получиться так, что если один человек говорит, то его губы попадают в фокус, а остальная часть лица затуманивается. А у другого человека уши могут оказаться в фокусе, а остальная часть головы не в фокусе. Если один из них ерзает, ощущая неудобство, то в фокус могут попасть заламываемые руки. В общем, идея вам понятна. Compound blur дает массу возможностей для того, чтобы направлять и удерживать внимание зрителя.
     Правда, если у вас нет платы ICE, вы можете состариться, пока закончится рендеринг blur-изображения. Чтобы избежать как можно большего количества долгих рендерингов, я заготовил несколько размытых роликов. Я взял однородное изображение, анимировал его маску так, чтобы она из прямоугольника, вытянутого по горизонтали, превращалась в прямоугольник, вытянутый по вертикали, установил ключевые кадры с интервалом в одну секунду и задал плавные кривые скорости для создания ощущения легкой инерциальной деформации. Затем я наложил сильный Motion blur и выполнил пятичасовой рендеринг с полным разрешением.

Рис. 10. Используя фильтр DigiEffect Soap Film в качестве яркостной маски и добавляя ролик с размытым изображением, я получаю клочковатый фоновый шум, которым можно пользоваться как текстурой

     Чтобы разбить этот blur, я импортировал «мусорный» слой, который был создан из одного кадра с однородным изображением, на которое был наложен эффект Soap Film из коллекции DigiEffects. При значениях параметров, принимаемых по умолчанию, это дает импровизированную плеснеподобную маску яркостного канала. После рендеринга ролика с использованием blur яркостной маской Soap Film и дополнительного размытия получился клочковатый фоновый шум, который можно использовать в качестве текстуры для новых композиций (см. рис. 10).

Grunge-маски
     Если посмотреть на края старых фотографий, там можно увидеть пластырь, плесень, волокна, царапины. Таких вещей полно на задворках реального мира. Фильтр Aged Film позволяет имитировать кое-что из этого «мусора», но далеко не все.
     Для имитации изношенных краев подойдут те же «мусорные» кисти, которые мы рассматривали в первой части статьи. Они дают отличные края.
     Давайте рассмотрим один проект, в котором я использовал After Effects для создания объемного текста с изъеденными краями. Сначала я создал сам текст. Затем импортировал «мусорную» карту, имитирующую грязный тротуар, в новую композицию. Потом создал однородное изображение и применил к нему эффект Path Text. Я прокрутил эффект Path Text до его нижней части и наложил на текст дрожание по масштабу и повороту. Из «мусорного» слоя я сделал яркостную маску для текстового слоя. Но результат оказался слишком четким; такой эрозии пятнами, как я хотел, не получилось.
     Тогда я усилил яркость и контраст «мусорного» слоя. Добившись желаемого уровня, я сделал слой видимым, выполнил его рендеринг в отдельный файл, затем снова импортировал его. Этот слой с повышенным контрастом я использовал как яркостную маску.

Рис. 11. Дополнив остальные приемы альфа-каналом с фаской, можно создавать объемный «замусоренный» текст

     Зачем был нужен лишний цикл рендеринг-импорт? Он избавил меня от необходимости делать рендеринг фильтра яркости и контраста каждый раз при создании нового фильма. Для мелких задач экономия времени невелика. Но при рендеринге длинных фрагментов это здорово окупается.
     Теперь у меня был текст с наложенной яркостной маской. Так как маска находилась в эффекте, текст выглядел «битым» и также имел альфа-канал.
Я сделал предварительную композицию обоих слоев и решил ввести фаску в альфа-канале. И вдруг получился красивый объемный текст, изъеденный
эрозией и «дышащий». Я добавил под него немного фильтра SE Scatterize из коллекции Final Effect, чтобы придать ему размытый ореол, и получил то, что вы видите на рис. 11.
     На печати эта картинка выглядит слегка угловатой из-за того, что я удалил чересстрочную развертку в Photoshop, но на экране телевизора она смотрится отлично. А в конечном счете важно именно то, как она выглядит на видео. Если вам надоели антисептически чистые композиции, присоединяйтесь к тем, кто добавляет в них немного грязи.

Донован Риттенбах, старший аниматор компании CineOptic Productions (www.cineoptic.com),
специализируется в области цифрового композитинга и движущейся графики.
Он делал анимации для CD-ROM и DVD «Титаник» Джеймса Камерона, а также для фирм Fox Interactive и OralB.

Donovan Rittenbach. Digital Grunge. Graphics for Grunge Times / DV, 1999, июнь, с. 34.