Rambler's Top100

 

WWW.TEKCT.RU
«Волнистый» Photoshop

(“UPGRADE”, #8 2002 г.)

   Сначала чуть-чуть истории, чтобы была понятна суть проблемы. В середине 90-х на экраны компьютеров вышла новая, революционная в смысле дизайна, игра MYST. Революционность ее заключалась в том, что она очень хорошо показала, что в основу хорошей компьютерной игры может лечь не беганье по экрану человечков или каких-нибудь монстров, а высококачественные рисунки и фотографии. Фактически, вся игра представляла большой набор рисунков и чуть-чуть видео. Игра имела успех, но всех геймеров огорчило одно обстоятельство: поверхность воды (а воды там было много, потому что события развивались на островах) была неподвижной. Для изображения, которое в рамочке вешается на стену это, может быть, и ничего, но для игрушки в жанре квеста это оказалось достаточно тоскливо. Для сравнения: вышедшая примерно в то же время игра Реванш Малколма имела намного более примитивную графику, но вода в ней плескалась как надо, и это заметно оживляло пейзаж.
   В общем, разработчиков MYSTа все ругали, как положено ругать всякого, кто сделал стоящую вещь, но разработчики вняли критике и исправились в следующей серии – в Ривене (Riven). Честно скажу, такой красивой прозрачной колышащейся воды я с тех пор не видел: это было сделано очень-очень удачно. Ну, а уж когда вышел римейк MYSTа в формате 3D, аниматоры постарались: устроили там такой шторм, что даже у бывалых геймеров начинались позывы к морской болезни.
   Выводы отсюда происходят следующие: всем, кто занимается работой с изображениями, полезно иметь в своем арсенале технологию для имитации волн на водной поверхности. Больше всего это относится к Web-дизайнерам. Во-первых, потому, что им недостаточно снять сюжет видекамерой и выложить в Интернет: размер такого файла будет слишком велик. Во-вторых, в Интернете уже пошла мода на «оживленную» воду, и делать ее теперь статичной, естественно, будет несолидно. Ну, и для создателей всевозможных заставок, роликов это тоже может быть полезно. Основываясь на этих соображениях, я и хочу рассказать о нескольких приемах.
   Поскольку в Adobe Photoshop (версии 5 или 6) есть специальный плагин «Волна», целесообразно постараться приспособить его для нашей задачи. Вообще, если вы работали с Photoshop, то, наверное, успели заметить, что его плагины без тщательной настройки подходят, наверное, только для сумасшедших сюрреалистов. Если необходимо сделать что-нибудь мало-мальски серьезное, в плагинах нужно подбирать параметры. Поэтому этим мы и займемся.

Рисунок 1

Рис1. Когда в воде отражаются деревья, не сразу понятно, где вода, а где лес

   Итак, для работы нам потребуется изображение, в составе которого есть водная поверхность. Это может быть и фото (рис. 1), и полностью компьютерная графика. Если в воде есть отражение чего-либо, задача несколько усложняется, но становится более интересной в плане достижения результата. Поскольку здесь важна последовательность действий, я предложу вам один из возможных сценариев работы.
   1. Откроем рисунок в Photoshop (будем считать, что это обычная отсканированная фотография).
   2. На вкладке Слои щелкаем название слоя два раза и преобразуем этот фоновый слой в обычный. Назовем его «Слой 1».
   3. На той же вкладке с помощью контекстного меню слоя делаем еще 2 копии слоя (называя их, соответственно, «Слой 2» и «Слой 3»).
   4. Выберем для рисования и просмотра верхний слой, включаем инструмент Лассо и очерчиваем водную поверхность.
   Здесь надо сделать несколько замечаний. Не старайтесь выделить обязательно всю воду. Кое-где (например, рядом с берегом) этого делать не нужно, и даже вредно. Ведите мышь свободно, не задумываясь о том, какая получается линия границы. Если в воде что-нибудь отражается, желательно, чтобы эти участки были выделены. Если на фоне воды имеются какие-то объекты (например, трава у берега), то они в выделение попадать не должны: аккуратно их обойдите. Контур выделения, естественно, надо замкнуть.
   5. Выбираем фильтр (плагин) Distortion—Wave и настраиваем его параметры:
   Number of Generators – 8;
   Type – Sine;
   Wavelength: Min – 10; Max – 80;
   Amplitude: Min – 5; Max – 16;
   Scale: Horiz – 100%; Vert – 95%.
   Применяем фильтр и смотрим результат (рис 2). Вот тут надо решить, устроят нас те волны, которые получились, или нет. Например, поверхность воды может перестать быть похожей на воду. Тогда надо отменить фильтр и снова использовать его, слегка изменив параметры. Возможно, потребуется добавить что-то к выделенной области или, наоборот, исключить какой-нибудь фрагмент. Вариантов много, и дать готовый рецепт на все случаи невозможно.

Рисунок 2

Рис. 2. После применения фильтра «Волна», вода стала больше походить на воду

   6. Если первый кадр получился, надо выбрать «Слой 2» и, снова командой Distortion—Wave применить фильтр, уменьшив параметр Scale Vert до 85%.
   7. То же самое делаем и для слоя «Слой 3». Параметр Scale Vert будет равен 75%. Пока все кадры не будут обработаны, выделенная область должна оставаться такой, какой мы ее сделали в начале работы, и отменять ее ни в коем случае нельзя.
   8. Готовый рисунок со слоями можно сразу сохранить в формате PSD.
   9. Открываем этот рисунок в ImageReady (можно было с самого начала работать в IR, но это не принципиально).
   10. Делаем видимым только «Слой 1» и на панели Animation устанавливаем длительность показа первого кадра. Например: 0,5 сек.
   11. На панели Animation нажимаем кнопку Duplicates current frame. Получится заготовка второго кадра.
   12. Делаем видимым только «Слой 2».
   13. Повторяем пункты 11 и 12 для слоя «Слой 3».
   14. Повторяем пункты 11 и 12 для слоя «Слой 2» (идем в обратном порядке к первому слою).
   От количества исходных кадров зависит как качество, так и объем ролика. Если бы слоев было четыре, то последовательность их показа должна быть такой: 1, 2, 3, 4, 3, 2. Кстати, меня раньше очень интересовало, сколько фаз движения волн использовано в Ривене. Я попытался рассмотреть получше волны, набегающие на берег пруда (есть там такое место) и насчитал пять фаз. Так что больше и не нужно: в зависимости от объема ролика и требуемого качества можно использовать от 3 до 5 кадров.
   Теперь самое время запустить видеоролик прямо в ImageReady и посмотреть, что получилось. На время просмотра скройте панель Animation, потому что она отвлекает внимание.
   Если все получилось как надо, остается выбрать команду Файл--Сохранить оптимизированное и записать ролик на диск в формате GIF. Сохранить желательно вместе с html-файлом (надо установить опцию «Тип файла»), чтобы потом было удобно смотреть анимацию в броузере.
   ImageReady действительно оптимизирует GIF-ролики. В этом, кстати, их преимущество перед обычным видео: на втором и последующем кадрах остается только зона движения, что позволяет уменьшить размер файла. Если вы хотите посмотреть, как это устроено, откройте GIF-файл в Ulead Gif Animator. Эта программа тоже умеет оптимизировать, но сжать файл еще больше, если он был сделан в IR, скорее всего, не удастся. Для Интернета разумный размер файла анимации составляет около 50 Кбайт. Но если уж очень хочется, можно сделать и 80 Кбайт, но такая страница будет долго загружаться (важно, конечно, какие еще рисунки использованы на этой странице). Если ролик предполагается использовать локально (например, с компакт-диска), то можно «размахнуться» и на несколько сотен килобайт.
   Если вы хотите создать на воде мелкую рябь или имитировать быстрое течение, то настройки фильтра можно рекомендовать такие:
   Number of Generators – 15;
   Type – Sine;
   Wavelength: Min – 2; Max – 5;
   Amplitude: Min – 3; Max – 6;
   Scale: Horiz – 100%; Vert – 1%.
   В этом случае отдельные кадры надо получать не изменением какого-либо параметра, а с помощью кнопки Randomize. В этом случае можно сразу сделать много кадров (слоев), а потом отобрать 3-5 наиболее удачных. Поскольку в эти кадры между собой никак не связаны, их достаточно просто показать в ролике подряд, например: 1, 2, 3, 4, 5. Если вам покажется, что переход от фазы к фазе выглядит неестественно, можно сделать следущее:
   1. Установить для всех слоев степень прозрачности 50%;
   2. Использовать в IR слои для кадров по следующему принципу: 1 и 2, 2 и 3, 3 и 4, и так далее…
   Пример такой анимации показан на рис. 3.

Рисунок 3

Рис. 3. Здесь вода колышется «на четыре счета»

   Второй плагин, который имеет отношение к волнам, находится в комплекте Xenofex, который, кстати, достать совсем не сложно, так как он достаточно популярен. Очень полезно проапгрейдить свой Photoshop этими плагинами. Там есть инструмент Flag. С его помощью очень удобно делать анимационные изображения развевающихся на ветру флагов. А морщины на поверхности флага – это тоже своеобразные волны, верно? Создание флага с помощью этого плагина – простейшая задача. Сначала создается плоское изображение, затем подбираются параметры «сморщивания», а в конце, с помощью изменения опции Random Seed, делается несколько кадров-слоев. Формат GIF здесь тоже удобен, а бывает просто необходим еще и потому, что в таком ролике требуется прозрачный фон. На моем сайте так сделан пиратский флаг на странице приколов.
   Для поверхности воды этот плагин тоже можно использовать, но не столько для создания волн, сколько для бликов на воде. Естественно, тут тоже надо экспериментировать с параметрами.
   Начав эту статью с компьютерных игр, ими хочу и закончить. Если вы хотите посмотреть, как НЕ надо делать волны на воде, запустите последнюю игру из серии «мистообразных»: Exile. Спору нет, и компьютерная графика, и обычное фото/видео в этой игре на самом высоком уровне. Можно только позавидовать. Но вот с водной поверхностью вышла промашка. Просчет аниматоров оказался в том, что для поверхности моря у горизонта и для той воды, которая плещется у наших ног, они использовали одни и те же анимационные параметры. Если поглядеть на воду даже не вооруженным глазом, сразу становится видно: изображение воды, которая, по идее, должна находиться на расстоянии нескольких километров, и воды у самого берега меняется совершенно одинаково: амплитуда, частота, длина волн совпадают. Это сразу придает картинке неестественный вид. Так что вы так не делайте, ладно?

2002 г.

Алексей Гончаров

Рейтинг@Mail.ru Rambler's Top100