Ни для кого не секрет, что даже маломальская обработка фотографии для сайта влечет за собой и немаленькие изменения визуализации всего веб-дизайна. Сайт в целом получает новый вид, выразимся так, совсем иначе влияет на эмоции пользователей и даже, зачастую, интерфейс тоже приходится переделывать/перекрашивать, стараясь не отходить от палитры бренда.
Мы часто и много рассказывали о разных фотоэффектах в нашем блоге. О том, как такие уже измененные изображения применяются веб-мастерами в своих проектах. Но сегодня мы хотим рассмотреть вместе с вами тему использования эффекта инфракрасной фотографии в веб-дизайне. Вполне вероятно вы удивитесь этому, поскольку последние тенденции стилей гласят о необходимости использовать исключительно реалистичные фотографии. Но если посмотреть на потрясающие ИК-фотографии, созданные мастерами-фотографами и на те фотографии, что используются на некоторых сайтах: кто из вас с уверенностью может сказать, подвергалась ли данная фотография фотообработке и какой именно? Секрет красивого веб-дизайна, эмоционального и впечатляющего – использование аутентичных элементов, органически подходящих друг другу. Соответственно, и само изображение должно быть подстать всей задуманной концепции.
Обратим внимание на то, что фотографии в веб-дизайне используются в разных целях. В качестве оформления фона одной страницы, заголовка, мини изображений-превьюшек, для фотогалерей в портфолио и прочее, и прочее. А это значит, что тот или иной вариант графики может подвергаться обработке изначальной (веб-дизайнером или контенщиком) или пост-обработке (автоматической, во время загрузки изображений на сайт). Но как раз таки такая обработка и бывает самой разной.
Инфракрасные фотографии в веб-дизайне
Инфракрасный фотоэффект, как правило, используется для создания черно-белых пейзажей и отображают невероятную детализацию, иногда даже сказочное свечение объектов. Почему называется не "черно-белое" или "обесцвеченное" ? Потому что при переводе из цветности в ч/б могут потеряться детали. Применяют именно замену цветов и каналов и создается изображение с обилием серых оттенков и даже цветными фильтрами. В конце материала мы рассмотрим такой пример отдельно. Когда ИК-изображение обрабатывается с помощью пленки (рассказ для любознательных), например, серии Aerochrome Kodak или Rollei Infrared и светофильтров обработка воспроизводится с «ложным» цветом. Это когда красный, зеленый и синий меняются местами. В результате можно увидеть потрясающие сюрреалистические сцены, где объекты (деревья, листва) появляются в живом розовом цвете. Создается ощущение, что фотография была создана на другой планете!
Но Photoshop и другие фоторедакторы позволяют создавать такую красоту с помощью нескольких стандартных фильтров, и до сих пор такой метод является фаворитом среди фотографов и веб-дизайнеров. Давайте для начала посмотрим на самые невероятные «сюрреалистические» ИК-изображения.
Это работы (альбомы) таких фотографов как Ричард Мосс, David Keochkerian, Jack R. Seikaly, Bruce Wayne, Helios Spada -1, 2, La-Vita-a-Bella, MichiLauke, myINQI, bram BoG.
Некоторые из работ поразят вас своим разнообразием красок, другие дополнительными эффектами, некоторые перенесут в земли Китая и Японии, но равнодушными они вряд ли кого-нибудь оставят. Важно: все эти работы были отсняты на профессиональную цифровую фотокамеру с инфракрасным объективом или на инфракрасную пленку.
Если пройтись по многим сайтам, где используются фотографии, то можно заметить и черно-белые варианты, и варианты ИК-изображений. Не часто, без акцентирования внимания, но их используют. Посмотрите на примеры ниже и вы поймете, о чем идет речь. khubsooratcollection, mybucketlistevents, kabusan, collabo-miu, he-garden
И да, экспериментировать и преображать – не значит отойти от неких стандартов и трендов. Наоборот, это показатель стремления веб-дизайнера сделать еще лучше, привнести нечто особенное. Пользователи и без того поймут и увидят, что картина преображена. Но это только заставит их дольше задержаться на сайте и рассмотреть её. Всегда можно использовать оригинал внутри сайта в тематическом разделе. Первая страница… она как обложка книги… яркая и манящая. Оттого насколько она эффектна и зависит, в большинстве случаев, удачность проекта в целом.
Photoshop и загадочный инфракрасный эффект
Но использование Photoshop позволяет добиться более реалистичного эффекта, если можно так выразиться. Например, выбрав пейзаж, мы попробуем с вами инвертировать цвета сцены так, чтобы зелень стала розово-красной, но при этом были прорисованы все детали, а эмоции от фотографии не угасли.
Для образца мы подобрали вот такой вот пейзаж. Здесь есть и река с оттенками голубого, и земля с коричневыми цветами, и обилие зелени, небо с облаками, оттенки желтого и оранжевого. Существует хороший контраст между цветами и простор для небольшого творчества. Можно делать в ИК всю фотографию, можно преобразовать только её часть или создать переход из этого эффекта в другой.
Открываем наше изображение в Photoshop и создаем копию (Ctrl+J).
Выбираем Изображение -> Коррекция -> Инверсия для слоя копии, а затем установим режим наложения для него Цветность. Мы видим, что цвета преобразились, заменились, но аутентичного инфракрасного эффекта до сих пор нет, хотя у нас насыщенный зеленый и голубой есть в начальном изображении.
Поэтому добавим корректирующий слой Микширование каналов. Изначально нас интересуют Красный и Синий канал. По умолчанию в красном канале мы обратим Синий и Красный. Красный установим в 0, а синий на 100%.
Переходим к Синему каналу (из ниспадающего списка) и делаем наоборот. Красный устанавливаем на 100%, а синий на 0. Это поменяет красный и синий каналы местами, благодаря чему небо будет синим, водичка в речке голубой, овечки белые, а домики почти не потеряют своего цвета, как и дальний план с холмами. Зато зеленый цвет изменился на фиолетово-розовый. Зеленый канал трогать нет смысла в данном случае, поскольку он создаст только лишнюю засвеченность или потерю цвета.
Получившиеся цвета позволят нам подобрать цветность для инфракрасного эффекта. Впрочем, эффект и сейчас уже получился, но какой-то скучный и совсем уж футуристический.
Добавим, давайте, корректирующий слой Цветовой тон/насыщенность и откорректируем красные оттенки. Из ниспадающего списка выбираем Красные цвета и регулируем два ползунка: Насыщенность и Яркость. Регулируйте так, как нравится вам, так, каким вы видите свой эффект инфракрасной фотографии.
Пурпурные цвета (также из этого же списка) позволят изменить фиолетовые оттенки. Также именно пурпурный позволит немного отрегулировать насыщение синего и голубого цвета. Будьте особо острожными с регулировкой всех цветов, кроме красного, поскольку, двигая ползунок сильно вправо, можно будет заметить появление артефактов и чужеродных цветов.
Также отрегулируйте при необходимости Синий и Голубой цвет по насыщению и яркости.
В целом наш инфракрасный эффект готов. Но поскольку выглядит он сюрреалистичным по большей части, давайте придадим ему немного реалистичности.
Объединим все наши слои в единый (Ctrl+Shift+Alt+E) и под ним создадим еще одну копию нашего фонового слоя. К слою с ИК-эффектом добавим маску и кисточкой с противоположным цветом, мягкой с нажимом около 10% плавно и аккуратно прокрасим некоторые детали. Например, мы изменили дальний план, передний с овечками, немного домики вдали и чуть луга справа, прорисовали небо. Зачем? Это придает пикантности фотографии. Всегда можно отключить слои и посмотреть, что больше нравится.
После того, как закончили прокрашивать по маске, оставляем её активной и выбираем Фильтр -> Размытие -> Размытие по Гауссу и размываем все, что нарисовали на маске. Размываем сильно. В результате наши переходы от розового к зеленому или коричневому стали не такими резким.
Таким нехитрым способом мы создали ложно-реалистичное изображение в инфракрасном варианте с приглушенными розовыми деревьями и лугами, что придают ландшафту сюрреалистический вид, будто мы побывали на «далекой-далекой» планете. Всего и достаточно инвертировать цвета, поменять красные и синие каналы и настроить насыщение и яркость. Таким образом можно отредактировать любые изображения и даже на будущее Action записать.
В данном варианте свечение создавалось с помощью Фильтр -> Галерея фильтров ->Искажение -> Рассеянное свечение. Засвечиваются светлые участки, поэтому при регулировке каналов смотрите внимательнее, насколько сильно вы двигаете ползунки, и что у вас осветляется. В противном случае, ИК-эффект невозможно будет красиво сочетать со свечением.
Ниже мы совсем немного засветили водопад и окружающее пространство, тем самым придав яркости изображению. В оригинале он был немного тусклым и безжизненным.
Нужно помнить
Не стоит путать ИК-эффект со splash-эффектом, когда на черно-белых изображениях раскрашивается одна деталь. Например, одна ягодка в корзинке с черно-белыми ягодами приобретает красный оригинальный цвет и текстуру. Инфракрасный эффект – это замена каналов. Но замена очень тонкая и чувствительная. С помощью такого эффекта можно также изменять летне-осенние фотографии на зимние, о чем мы вам и рассказывали ранее.
Почему иногда зеленая листва на разных фотографиях имеет разные оттенки красного, как бы мы ни двигали ползунки каналов и насыщения? В природе все объекты отражают инфракрасный цвет. Но каждый делает это по своему. Именно поэтому какие-то листочки будут насыщенно красными, а где-то трава станет немного пурпурнее.
Также необходимо понимать, что насколько Photoshop не был бы хорош, но полностью реализовать работу профессионального фотоаппарата и пленки Kodak (например) он не сможет. Мы можем только приблизить наши изображения к таким сказочным оригиналам.
Если говорить об имитации инфракрасного фильтра черно-белого варианта, то здесь необходимо заметить, что даже просто Обесцветить рисунок недостаточно. Все равно придется перейти к Микшированию каналов, установить галочку на Монохромный и затем усилить Красные оттенки, совсем чуть-чуть Зеленые и убрать Синие. Дополнительно может потребоваться поиграть с Уровнями (Ctrl+L), чтобы усилить контраст и светотень. Но это также зависит от исходного изображения.
И вот еще некоторые работы, созданные в Photoshop. Как видите, нигде нет единого варианта инфракрасного эффекта. Везде он разный. А это значит, что подобрать наиболее подходящий вариант для данного конкретного стиля, палитры цветов, бренда в веб-дизайне не так и сложно. Можно даже, например, использовать почти обесцвеченные или сюрреалистичные изображения в качестве превьюшек в портфолио, и только после того, как на них будет указывать курсор мышки, изображение изменится на оригинальное.
Вывод
Метод инфракрасного фильтр-эффекта подходит для фотографий, созданных ярким солнечным днем, с ярким насыщенным синим небом и контрастной водой. И это очень весело подбирать оттенки и цвета, раскрашивать имеющуюся фотографию новыми красками и создавать нечто, совершенно необычное.
Разумеется, что в веб-дизайне не для каждого проекта подойдет такая фотообработка. Да и массово её сложно применить к каждой картинке без исключения. Но придумать красивую идею для обложки сайта, главной страницы или секции лэндинга, а может даже акции в интернет-магазине вполне можно и смотреться такое будет весьма недурно. И никто не говорит о том, что ИК-фильтр всегда красный. Деревья могут окраситься в желтоватый, зеленый, оранжевый цвет, ибо все дело в фильтрах (см. ссылку в начале статьи). Все что применяется при профессиональной фотосъемке можно создать и силами Photoshop.