Волнистый Photoshop
Уважаемые читатели, как вы уже могли заметить, в разделе Software поселилась новая рубрика «Ликбез». Пользователей компьютеров, считающих себя продвинутыми и, соответственно, определенный круг читателей она вряд ли заинтересует настолько, насколько заинтересует тех, кто подпадает под нелестное общественное определение-тире-мнение «новички». А вот мы всей редакцией, честно говоря, немного этим новичкам завидуем: в течение пары часов им будет немного интереснее, чем всем остальным, то есть нам.
Эту статью можно охарактеризовать как краткий ликбез по Photoshop, FAQ по графическому пакету или просто как «маленькие секреты большой программы». Пожалуйста, напишите нам, нужно ли печатать статьи такого рода, оставить ли их навечно в рубрике «Ликбез» или сочинить специальную рубрику.
Рассказывают очевидцы
Речь пойдет об анимации поверхности воды. Чтобы была понятна суть проблемы, немного истории. В середине 90-х годов вышла новая, революционная игра MYST. А революционность ее заключалась в том, что на ее примере разработчики очень хорошо показали следующее: в основу хорошей компьютерной игры может лечь не беганье по экрану человечков или каких-нибудь монстров, а высококачественные рисунки и фотографии.
Фактически игра целиком представляла собой большой набор рисунков и чуть-чуть видео. Игра имела успех, но всех геймеров огорчило одно обстоятельство: поверхность воды (а воды там было много, потому что события развивались на островах, которые, естественно, окружены морем) была неподвижной. Для изображения, которое в рамочке вешается на стену, это, может быть, и ничего, сошло бы, но для игрушки в жанре квеста сей «мертвый штиль» оказался довольно тоскливым сопровождением.
Для сравнения: вышедшая примерно в то же время игра «Реванш Малколма» имела гораздо более примитивную графику, но вода в ней «плескалась» как надо, и это заметно оживляло пейзаж.
В общем, разработчиков MYST все ругали, как положено ругать всякого, кто сделал стоящую вещь, но разработчики не обиделись — вняли критике и исправились в следующей серии. Честно скажу, такой красивой, прозрачной, колышущейся воды я с тех пор не видел: все было сделано очень и очень удачно.
Ну, а уж когда вышел ремейк MYST в формате 3D, аниматоры постарались: устроили там такой шторм, что даже у бывалых геймеров порой в процессе игры начинались позывы к морской болезни.
Выводы отсюда следующие: всем, кто занимается работой с изображениями, полезно иметь в своем графическом арсенале технологию для имитации волн на водной поверхности. Больше всего это относится к веб-дизайнерам. Во-первых, потому, что им недостаточно снять сюжет видеокамерой и выложить в интернет: размер такого файла будет слишком велик.
Во-вторых, в интернете уже пошла мода на «оживленную» воду, и делать ее теперь статичной, естественно, будет несолидно. Ну, и для создателей всевозможных заставок, роликов это тоже может быть полезно. Основываясь на этих соображениях, я и хочу рассказать о нескольких приемах.
Как провести нужный прием
Поскольку в Adobe Photoshop (версии 5 или 6) есть специальный плагин «Волна», целесообразно постараться приспособить его для решения нашей задачи. Вообще, если вы работали с Photoshop, то, наверное, успели заметить, что его плагины без тщательной настройки подходят, наверное, только для сумасшедших сюрреалистов.
При необходимости сделать что-нибудь мало-мальски серьезное в плагинах нужно подбирать параметры. Причем эта работа требует изрядного терпения и настойчивости, потому что параметров много, их сочетаний еще больше, а результат может меняться в очень широких пределах. Так что возьмем за основу конкретный рецепт. Вот обратите внимание на иллюстрацию — когда в воде отражаются деревья, не сразу понятно, где вода, а где лес.
Итак, для работы нам потребуется изображение, в составе которого есть водная поверхность. Это может быть и фото (как на иллюстрации), и компьютерная графика. Если в воде есть отражение чего-либо, задача несколько усложняется, но становится более интересной в плане результата. Поскольку здесь важна последовательность действий, я предложу вам один из возможных сценариев работы.
1. Открываем рисунок в Photoshop (будем считать, что это обычная отсканированная фотография в формате BMP).
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%.
Применяем фильтр и смотрим результат (на второй иллюстрации, где после применения фильтра «Волна», вода стала больше походить на воду).
Вот тут надо хорошенько подумать и принять единственно верное решение: устроят нас те волны, которые получились, или нет. Поверхность воды, например, может перестать быть похожей на воду или отражение будет не совсем таким, какое вы хотели бы увидеть. Тогда надо отменить фильтр, а потом снова использовать его, но уже слегка изменить параметры.
Возможно даже, что потребуется добавить что-то к выделенной области или, наоборот, исключить какой-нибудь участок. Вариантов много, и дать рецепт на все случаи невозможно.
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. Кстати, меня очень интересовало, сколько фаз движения волн использовано в «Ривене».
Я попытался получше рассмотреть волны, набегающие на берег пруда (там есть такое место) и насчитал, кажется, пять фаз. Так что больше и не нужно: в зависимости от объема ролика и ваших требований к качества можно использовать от трех до пяти кадров.
Теперь самое время запустить видеоролик прямо в ImageReady и посмотреть, что получилось. На время просмотра скройте панель Animation, потому что она сильно отвлекает внимание.
Если все получилось как надо, остается выбрать команду Файл>Сохранить оптимизированное и записать ролик на диск в формате GIF, желательно вместе с html-файлом (надо установить опцию «Тип файла»), а потом посмотреть анимацию в браузере.
ImageReady действительно оптимизирует GIF-ролики. В этом, кстати, их (роликов) преимущество перед обычным видео: на втором и последующих кадрах остается только зона движения, что позволяет уменьшить размер файла. Если вы хотите посмотреть, как устроен GIF-ролик, откройте его в Ulead Gif Animator www.ulead.com/ga/runme.htm. Это хорошая программа, которая тоже умеет оптимизировать графику, но если попытаться еще больше сжать наш файл с помощью этой программы, то, скорее всего, ничего не получится: все и так уже сделано.
Для интернета разумный объем файла анимации составляет около 50 кб. Если уж очень хочется, можно сделать порядка 80 кб, но такая страница будет долго загружаться (важно, конечно, какие еще рисунки есть на этой странице). Если ролик предполагается использовать локально (например, с компакт-диска), то можно размахнуться и на несколько сот килобайт.
Если вы хотите создать на воде мелкую рябь или имитировать быстрое течение реки, то настройки фильтра можно рекомендовать следующие:
Number of Generators — 15;
Type — Sine;
Wavelength: Min — 2; Max — 5;
Amplitude: Min — 3; Max — 6;
Scale: Horiz — 100%; Vert — 1%.
В этом случае отдельные кадры надо получать не изменением какого-либо параметра, а с помощью кнопки Randomize (тому, кто ее придумал, давно пора поставить памятник нерукотворный). В этом случае можно сразу сделать много кадров (слоев), а потом отобрать три-пять наиболее удачных. Поскольку в этом случае кадры между собой никак не связаны, их достаточно просто показать в ролике подряд, например:1, 2, 3, 4, 5. Если вам покажется, что переход от фазы к фазе выглядит неестественно, можно сделать следующее:
1. Установить для всех слоев исходного рисунка степень прозрачности 50%;
2. Использовать в IR слои для кадров по такому принципу: 1 и 2, 2 и 3, 3 и 4, и так далее…
Второй плагин, который имеет отношение к волнам, находится в комплекте Xenofex, который, кстати, достать совсем не сложно, так как он является весьма популярным http://www.alienskin.com/. Очень полезно проапгрейдить свой Photoshop этими плагинами. Среди них есть инструмент Flag. С его помощью удобно делать анимационные изображения развевающихся на ветру флагов.
А морщины на поверхности флага — это тоже своеобразные волны, ведь верно? Создание флага с помощью этого плагина — простейшая задача. Сначала создается плоское изображение, затем подбираются параметры «сморщивания», а в конце с помощью изменения опции Random Seed делается несколько кадров-слоев. Формат GIF здесь тоже удобен, а бывает просто необходим еще и потому, что в таком ролике требуется прозрачный фон.
Для поверхности воды этот плагин тоже можно использовать, но не столько для создания волн, сколько для бликов, так как стандартный фильтр Photoshop абсолютно непригоден для создания бликов на воде. Естественно, тут тоже надо экспериментировать с параметрами, и с первого раза может не получиться.
Начав эту статью с компьютерных игр, ими же хочу и закончить. Удачное решение по «оживлению» воды было найдено, на мой взгляд, в игре «The Long Journey». Там есть сцены у причала, и вода, естественно, должна как-то двигаться.
Сами волны на поверхности воды — так себе, но аниматоры догадались, что уровень воды тоже должен меняться! Действительно, стенки у причала отвесные, тут вода движется совсем не так, как у пологого берега. Не знаю, как это было сделано в компьютерной игре, но средствами Photoshop это сделать совсем не сложно: достаточно поместить изображение воды в отдельный слой.
Если вам интересно посмотреть, как НЕ надо делать волны на воде, запустите последнюю игру из серии мистообразных: Exile. Бесспорно, и компьютерная графика, и обычное фото/видео в этой игре на самом высоком уровне. Можно только позавидовать. Но вот с водной поверхностью вышла небольшая промашка.
Просчет аниматоров заключался в том, что для поверхности моря у горизонта и для той воды, которая плещется у наших ног, они использовали одни и те же анимационные параметры. Если посмотреть на воду даже невооруженным глазом, сразу становится видно: изображение воды, которая, по идее, должна находиться на расстоянии нескольких километров, и воды у самого берега меняется совершенно одинаково: амплитуда, частота, длина волн совпадают, и это сразу придает пейзажу неестественный вид.
Так что вы так не делайте, ладно?
