Несмотря на то, что в веб-дизайне используются самые разные формы и элементы от текста до графики и видео, все знают, что фотография – доминирующая вещь, даже в сетях интернет-паутины. Если быть серьёзными, то сейчас трудно найти сайт, на котором бы вообще не было хоть какой-нибудь фотографии в целом или её кусочка, вырезки. И это не удивительно. Фотография всегда имела и будет иметь особое место в жизни каждого из нас и в сравнении с той же иллюстрацией способна вызывать наиболее яркие и глубокие чувства и эмоциональные реакции. Именно поэтому, вне зависимости от тематики сайта, от типа или стиля, но фотография насыщает дизайн некой реалистичностью, позволяет посетителю понять, что все рассказанное/показанное на страницах сайта может ему пригодится в его жизни.
Мы уже рассказали о том, как подбирать фотографии, почему от них иногда стоит отказываться и о многом другом, но есть еще один занятный момент. Практически всегда фотографии на сайте подвергаются художественному редактированию. То есть, веб-дизайнеры не просто настраивают размер картинки, но также добавляют еще чуть больше лоска изображению. Делается это для поддержания стиля сайта и его тематики.
Фотостили в веб-дизайне
Существует много фотоэффектов, но есть один момент. Особенно заметен он (момент то есть), когда смотришь фотографии на сайте и все они кажутся несколько похожими или совсем чуть-чуть разными. В действительности, наиболее популярных эффектов мало, а вот их разновидностей очень много. Например: фотостиль Винтаж/Ретро можно использовать по-разному. Эффект Винтаж создается с преобладанием как зеленоватого оттенка, так и голубого, коричневого и пр. Аналогичная ситуация состоит и с монохромным эффектом и с эффектом приглушения цветов.
Мы рассмотрим самые популярные фотостили, где их используют веб-дизайнеры мира, как быстро и просто создать их Photoshop и где найти удобные Actions.
Сразу скажем, что создавать эффекты мы будем с помощью корректирующих слоев, добавляющихся поверх исходного изображения.
.jpg)
Винтаж/Ретро
Несмотря на прогресс технологий и современную культуру, этот эффект наиболее популярен почти на всех сайтах. И если его применяют не на больших фотографиях главной страницы, то на малых по размеру – точно. Особенность стиля в том, что подходит он не для каждой фотографии, поэтому изначально придется ещё поиграть с цветами и градиентами, чтобы убедиться, устраивает ли вас результат.
Стили винтаж и ретро обычно применяют к фотографиям для сайтов свадебной тематики, моды/макияжа, авторских проектов фотографов или личных блогов, путешествий. Что же касается содержания, то оно может бытьсовершенно разное, от городских улиц и зданий до пейзажей природы с образами животных, птиц и людей.
В данном стиле обычно преобладают фиолетовые цвета, синие, красные, желтые и зеленые. При этом, в целом, вся гамма фотографии приглушается, что и придет ей вид старины, легкой истёртости от времени. Отличными примерами использования таких фотографий являются проекты: Lobagola, Lunet Eyewear, South Tree, Life in Greenville, Паулина Осмонт
Использование Photoshop для винтаж/ретро стиля
Открываем нашу фотографию (оригинальную, яркую, большую) в Photoshop и добавляем корректирующий слой «Выборочная коррекция цвета». Выбираем черный и уводим значение ползунка в минус, для того, чтобы фото немного посерело, стало светлым.
В списке «Нейтральные» также ползунок черного уводим в минус, осветляя все фото, в целом. Здесь значение должно быть больше.
Теперь добавляем корректирующий слой «Кривые» и изменяем немного красный, синий и зеленые каналы. Тут уже должна сработать ваша фантазия, но в целом цветности должно стать чуть меньше. То есть, в тех местах, где амплитуда цвета выше – снижайте.
Добавляем еще один корректирующий слой «Градиент». Стиль Линейный, угол задаем (обычно старые фотографии всегда под углом теряют свою цветность) и выбираем переход цвета для Градиента от темного к среднему оттенку. Какой именно цвет выбирать определит стиль дизайна сайта.
Поскольку градиент скрыл собой всю фотографию, то устанавливаем режим наложения – Экран и снижаем прозрачность.
Если решили что это все, то нет. Добавляем еще один слой с Градиентом, но теперь цвета выбираем Зелено-синие, а угол его делаем противоположным. Режим наложения для этого слоя – «Замена светлым» и также снижаем прозрачность в большее значение.
Чтобы довести ретро стиль фотографии «до ума», добавим еще один слой «Выборочной коррекции цвета» и снизим показатель Желтого цвета, Зеленого (в Photoshop он считается Cyan в схеме CMYK), Синего (Голубой + Желтый).
Разумеется, что играя с цветами и оттенками можно добиться совершенно разных результатов. Но принцип все равно будет один при создании ретро-винтажных эффектов. Можно еще наложить текстуру старой бумаги, истертой от времени. Затем немного откорректировать уровни, сделав акцент на помятости и трещинах.
Готовые Операции (Action) можно загрузить с Deviantart. Их здесь целое море и вот пример 1, пример 2, пример 3.
Приглушение цветности
Приглушение цветности – еще один вариант фотофильтра, который весьма интересно и несложно создавать в Photoshop. Идея заключается в том, чтобы отключить некоторые цвета и не позволить им играть свою роль в палитре. Этот эффект можно сравнить с тем, как выглядит сон или воспоминание.
Особенность в том, что отключая цвета, мы не удаляем их из фотографии вообще. В противном случае, получится черно-белый вариант или сепия. Напротив, приглушенный вариант зачастую служит художникам и веб-дизайнерам основой для ретроэффектов или тот же черно-белый вариант используется самостоятельно.
Фотографии с приглушенными цветами отличный вариант в тех случаях, когда использовать фото на сайте нужно, но нет желания и цели размещать их в полноцветном оригинальном виде. Если же дизайн сайта создается в светлых или пастельных тонах, то эффект приглушенности тоже подойдёт, как нельзя кстати. Что же касается тематики, то это сайты моды и дизайна, спорта и культуры, строительства и совершенно иных тематик. Например: putzengel, Young and Hungry, My 356 Days in Print, P.O.C.
Приглушение цветности в Photoshop
Открываем фотографию и добавляем новый корректирующий слой «Кривые». Изменяем кривую RGB так, как на нашем скриншоте, чтобы фотография стала чуть ярче и наиболее резкие цвета исчезли.
Теперь нужен корректирующий слой «Яркость/Контрастность» и убираем контраст бегунком, переводя его в крайнее левое положение (-50).
Снова создаем корректирующий слой «Кривые» и на красном и синем канале меняем положение обеих диагоналей, немного совсем. То есть, если они у нас на 45 градусов, мы их устанавливаем градусов на 40. Суть в том, а зависит это, по большей части, от вашей фотографии, чтобы снизить количество красного и синего цвета, их интенсивность. Двигая точки кривой, вы это и сами увидите воочию. Можно снизить и Зеленого цвета тоже. Фантазируйте…
После этого нужно добавить новый слой «Цвет», залить его темно-голубым и установить режим наложения «Экран» с прозрачностью в 60%.
И вот сравнение «до» и «после».
В целом же, заливка слоя может быть и любым иным цветом, все зависит от вашей палитры цветов, используемой в конкретном проекте веб-дизайна. Набор вариантов на Deviantart.
Монохромный эффект
Монохромный эффект становится популярным только в последние годы; раньше его использовали чуть реже. Дело в том, что стиль подходит не только для оформления фотографий, но и сайтов в целом. Само понятие «монохромного» эффекта путают с черно-белым вариантом. Это неверно. Используя монохромность, вы просто переводите изображение в одни какой-то цвет, но не удаляете все имеющиеся цвета.
Разумеется, что такой эффект позволяет сайту выделиться, но также и позволяет значительно упростить подбор стиля и цветности для иконок, элементов интерфейса, шрифта и прочее. Наверно, это даже самый простой стиль, который выглядит более привлекательным, чем черно-белый вариант.
Обычно для монохромности используют фиолетовый, синий, красный. Темные оттенки используют вместо пастельной палитры и сочетают с приглушением цветности. Получаются очень замысловатые эффекты и весьма интересные. Главное, чтобы темных оттенков было немного, в противном случае, деталей фотографии попросту будет не видно (мы это покажем наглядно ниже).
Иногда его сравнивают с Дуплексом, но это немного некорректно. Да, он похож, но…все-таки дуплекс – это смешение разных цветов, монохромный эффект – в пределах одного цвета, который имеет многие оттенки. На примерах Deviantart вы это отлично увидите.
Используют монохромный стиль для сайтов университетов, искусств, иллюстраций, бизнеса и иных тематик, в интернет-магазинах. Особенно отлично сочетается эффект с современными трендами плоского дизайна. Например: Baesman, Building careers, Holm Marcher, La Pierre Qui Tourne
На Deviantart это набор из 50 эффектов.
Монохромный стиль в Photoshop
Открываем фотографию и переводим её в черно-белый вариант с помощью добавления соответствующего корректирующего слоя. Затем убираем Зеленый, голубой и синий цвета, немного пурпурного снижаем и красного. Смотрите скриншот и, самостоятельно двигая ползунки, увидите, как ваша картинка будет насыщаться оттенками черного и серого.
Важно: Данные манипуляции позволяют проявить детали, убрать засвеченность белым. Манипулируйте ползунками и будете сами наглядно видеть всё это.
Добавляем слой «Карта градиента», и возьмем… предположим… от бардового к алому. То есть, еще раз оговоримся, в пределах одного цвета, но разные оттенки. Затем данному слою выбираем режим наложения «Умножение». В целом, картинка готова, но слишком яркая, тяжелая для восприятия и слишком выделяющаяся.
Добавим новый слой «Уровни» и сдвинем бегунки слева направо так, чтобы изображение стало светлее в целом.
Изменим освещение фотографии путем добавления слоя «Градиент» с серо-белыми оттенками и углом -90. Режим наложения «Перекрытие» и непрозрачность около 48-50%. Вы увидите, что появятся еще детали и освещение будет падать сверху.
Теперь создаем корректирующий слой «Цвет» и заливаем его белым. Режим наложения «Цветовой тон», прозрачность около 10%.
И вот, что получилось из оригинала. Пример хорош тем, что листочки фиалки очень черные. Нужно сделать их светлее, и именно сейчас хорошо будет видно изменение. Перейдите на первый корректирующий слой «Черно-белое» и бегунок Зеленого цвета немного сдвиньте вправо. Вы заметите, как детали листочков начнут проявляться.
Таким образом, можно отрегулировать цветность фотографии и настроить оптимальный вариант.
Завершая рассказ
Хотя мы рассказали всего о трех фотоэффектах, лучше экспериментировать с разными вариантами и возможностями Photoshop. Разумеется, что мы не стали акцентировать внимание на черно-белых стилях и увеличении контрастности. Они имеют не меньшую популярность, но и создавать их гораздо проще. Тем более, что один из наших материалов уже посвящен эффекту «Дуплекс».
Имейте ввиду, что установки параметров – наш личный выбор и применять его для каждой фотографии – в корне неверно. У каждого изображения свои тени и свой свет, оттенки цветов и их количество. Всем этим нужно «играть», придавая, тем самым, фотографии новую и фантастическую форму, которая не просто впишется в общий веб-дизайн, но также придаст ему лоска.
И главное, не стоит строго у всех корректирующих слоев оставлять непрозрачность в 100%. Снижайте её и получайте восхитительные эффекты.