Самая распространенная мысль, что посещает многих пользователей, заказников при просмотре того или иного сайта, изображения или фотографии – чрезмерная фотообработка. Нет, разумеется, никто пристально не вглядывается в фон сайта или в картиночки, располагающиеся «то тут, то там» на странице. Но когда огрехи в обработке изображений допускаются, то и вглядываться не нужно. Они бросаются в глаза сразу.
Хорошо это или нет (обработка)? Вопрос сложный. Обычно ведь как происходит: создает дизайнер сайт, а заказчик еще требует и изображения подобрать дополнительные (кроме того, что и так есть по необходимости). Для дизайнера это полбеды, поскольку сайт уже создается с каким-то набором контента. Но иногда веб-дизайнерам приходится работать и с дополнительными изображениями. Например, обработать и оформить галереи домов (на сайтах недвижимости), интерьеров, примеров окон и остеклений и прочее. Ему даже дают набор готовых фотографий – «только сделай, чтоб красиво было».
И начинают дизайнеры, художники, контентщики кто во что горазд творить и рисовать. Кто сам, кто заказывать у художников, но… иногда происходят казусы (отчасти из-за погони за уникальностью), когда изображения слишком подвергаются «фотошопности», они становятся чересчур уж фантазийными. Выглядит это симпатично, но слишком ярко-кричаще о… сказочности. Вот и получается, что смотрит пользователь на коттедж, и мысль где-то в подсознании появляется – «А такой дом правда существует? И местность? И яркость красок?». Вот в таких ли именно цветах все окажется? Или черепица на крыше более матовая, более темная или чуть иного оттенка...
Нет, мы не говорим сейчас о том, что в веб-дизайне фотографии должны быть реалистичными на 100% по внешнему виду. Их нужно обрабатывать, их нужно немного корректировать, делать из серых и тусклых более яркие и наглядные.
Но огрехи (небольшие) случаются и явление это естественное.
На примере ниже, вроде, все отлично, солнечный день, но уж слишком все ярко, белит в глазах, словно что-то есть… неестественное.
Вот и посмотрим в этом материале именно на те возможные огрехи, что случатся при обработке фотографий или изображений в Photoshop. Мы в блоге, в основном, уделяли внимание тому, как вообще обрабатывать и изменять картинки, но не говорили о том, к чему приводит «фанатизм». И нет, мы не имеем в виду те изображения, которые делаются специально таковыми, чтобы выглядеть сказочными. Это совсем отдельная категория артов.
В хороших фотографиях вы не заметите обработку. Хорошая обработка является тонкой, она стремится оставаться в стороне от общей визуальной картины всего дизайна.
Резкость
Наверное, одна из самых распространённых ошибок многих – чрезмерное усиление резкости в фотографии.
Почему её допускают? Резкость используют для придания тусклой и слегка замыленной фотографии вида высококачественной, отснятой на цифровую фотокамеру. Кроме того, резкость позволяет подчеркнуть детали, сделать их более явными и четкими.
Что требуется в реалии? Немного подчеркнуть края объектов. Лучше совсем мало, чем слишком явно. Думая, что вы заостряете края одного объекта, у вас на деле автоматически настолько же заостряются и другие края, где это было вовсе не желательно, а использование маски может создать резкую грань между видами с обработкой и без нее. Если фотографии снимались уже на цифровую камеру с резким объективом, то соответствующий фильтр вообще не нужен. Если снималось на обычную камеру (смартфона), то нужна, но минимальная.
Сравним два варианта фотографий заборов. Первая – очень резкая, имеется даже ореол свечения вокруг объектов. Вторая – более матовая, реальная и не обработанная, да еще и очень пережатая. Тем не менее ко второй мы применили совсем немного резкости, и смотреться она стала чуть-чуть, но лучше. Высококачественную из нее сделать трудновато, но улучшить можно.
Если обратиться к следующему варианту, то небольшое количество резкости вполне уместно добавить, хотя фотография хороша и без нее. Тут уже на усмотрение дизайнера.
Дополнительно о резкости и о том минимальном её количестве, которое обычно требуется (например, при тонировке) мы рассказывали, затрагивая тему плагина Sharpener Pro 3.
Обилие цветов и фанатически белый
Цвет – сложный аспект и неоднозначный при работе с изображениями. Капля лишнего - и получить реалистичность уже невозможно. Впрочем, как и легко лишить хорошую фотографию реализма.
Почему допускают ошибки с цветом? Художники (дизайнеры) стремятся сделать картинку яркой, жизнерадостной, красивой. Существует мнение в обществе, что чем ярче цвета, тем изображение сильнее вселяет в человека радость и уверенность. Вероятно, стремление к банальному и приводит мастеров к выкручиванию ползунков настроек цвета почти на максимум…
Зачем нужна работа с цветом? Мы уже не раз упоминали в наших материалах о том, к чему приводит усиление или приглушение цветов на фотографиях. В разных практиках мы и сами это делали. Одни режимы наложения слоев чего стоят или способы создания ретро-стиля.
Цвет субъективен, он даже зависит от монитора каждого отдельного пользователя и от настроек принтера (если вдруг фотография готовится к печати). Кто-то из дизайнеров предпочитает реалистичные и тонкие цвета, в то время как другой человек может предпочесть сказочные и сюрреалистические цвета. Это прекрасно, но всегда нужно быть осторожным, чтобы не переусердствовать с цветом. Насыщенные изображения становятся более заметными на переднем плане, но они же легко выглядят как подделки, нереальными. Всегда соблюдайте осторожность при перемещении ползунка насыщения в положительную сторону. Если фотография несколько серая, в тумане, то небольшое смещение насыщенности в сторону плюса только пойдет на пользу.
Посмотрим на silverscriptonline, opefac, myersandchang и прочие аналоги, о которых вы, читатели, уже догадались. Да, стиль тонировки для opefac понятен, но он везде и смотрится не слишком уж приятно, будто весь сайт в тумане, хочется монитор лишний раз протереть. Была бы пара-тройка изображений с муаром – одно дело. С другой стороны, фотография на silverscriptonline слишком ярка, она засвечена фанатически белым цветом. И это даже не солнечный день, это именно яркость белого. Оба варианта притягивают внимание посетителей, оба вполне уместны, но третий вариант, наверное, самый нейтральный, сочный, реальный (!).
И вот что можно сделать путем игры с насыщением, экспозицией и уровнями белого-черного.
Кроме того, некоторые люди также часто перебарщивают с колеровкой изображений. Это эффект Instagram. Например, если все ваши изображения имеют теплый или красный оттенок, то это большая вероятность того, что изображения получатся тяжеловесными для восприятия. Это уместно не для всех случаев, конечно, но важно иметь это ввиду. Тонировка, особенно небольшое её количество, может быть очень важной, но не каждое изображение должно выглядеть красным (например). Всегда обращайте внимание на баланс белого и поиграйте с ним. Посмотрите, как изображение будет выглядеть без тона или с одним из них, потом подмешивайте еще тоны и создавайте дуплексы. Это будет также тренировать ваши глаза, чтобы уметь видеть цвет, чувствовать его, осознавать. При этом не забывайте при работе с тонировкой по-разному снижать непрозрачность слоя тонировочного слоя.
Безумная виньетка
Виньетку любят все, черную, размытую или белую – неважно. Она зачастую важна и действительно преобразовывает фотографии, сглаживает острые края и углы, сливая их с фоном, позволяет выделить главное в композиции.
Чтобы понять, почему возникают огрехи с виньеткой и почему они не возникают, обратимся снова к некоторым примерам. Это: botango, malelipy, fj1857. Виньетка есть практически везде и разная. Также она где-то более явная, где-то отчасти уловимая, но есть. И знаете что? Выглядит красиво. Но попробуйте мысленно её усилить? Уменьшить? Не каждый вариант будет уместен и действительно красив.
Некоторые фотографы умышленно создают свои работы с усиленной виньеткой и на фотостоках таких работ много. Но здесь нужно задуматься: для чего вам, как веб-дизайнерам, нужна фотография с виньеткой. Обратимся к malelipy (третий скриншот), где есть очень хороший набор разных фотографий. Фотография ягод в ладошках виньетирована. Без виньетки весь фотонабор был бы более резким. Темные края немного сгладили эту резкость, позволили ягодам выделиться.
Если же обратить внимание на другие две фотографии, то можно заметить их цветообработку. Здесь и добавлена резкость, цветность, насыщение, легкая тонировка. НО! Выглядят они реально, без сказочности. И это – главное.
Контрастность
Еще одна субъективная вещь, но и с ней можно очень переборщить. Наверное, этому подвержены все и постоянно приходится себе напоминать - меньше яркости и черноты, меньше насыщения.
Посмотрим на ciasamascotte, zielonamapa, fannymyard-design, .letoile3d, bruco-ic. Здесь есть фотографии с большой контрастностью, есть с меньшей, даже с виньетками и повышенной цветностью. Смотрится не во всех случаях идеально-приятно. Ту же фотографию с автомобилем хочется пролистать или на letoile слишком много белого и ярко черного. Да, сам дизайн сайтов тоже не блеклый, но тем не менее.
Где баланс? Существует очень небольшой диапазон, в котором контраст выглядит идеально. Слишком малое его количество - и ваше изображение будет выглядеть плоским, тусклым; слишком много - и это будет выглядеть сказкой. Создание изображений с большим количеством контраста является очень частой проблемой, особенно с черно-белыми изображениями.
Иногда, вместо того, чтобы увеличивать контраст достаточно просто превратить самые темные оттенки серого в черное, сдвигая ползунки Уровней. Вы увидите, что это даст вам тот эффект, который вы хотите, без переусердствования с общим контрастом изображения.
Сравните два варианта не самой лучшей фотки, но используемой в дизайне. В первом варианте просто Контраст, в другом – Уровни с тремя ползункам (черный, серый, белый).
Наконец, обратите внимание на источники света на изображении, потому что они и определяют, сколько контраста необходимо добавлять. Если солнце светит прямо на сцене, то гораздо меньше необходимо контраста, потому что естественный свет уже обеспечивает нужное его количество.
Пример на сайте zielonamapa и увеличение контраста. По факту он излишен. Если его снизить, эффектность фотографии не потеряется.
Если солнце находится позади изображения, то часто нужно затемнить оттенки черного или увеличить контраст, если вы не хотите подчеркнуть помутнение сцены. Особенно внимательными надо быть при работе со свадебными фотографиями и пейзажами в солнечную погоду. Вот уж где можно перестараться со всеми вариантами ретуши сразу.
Оригинал фотографии выше на скриншоте.
Выводы
Ретушь фотографий, обработка, «отфотошопивание» – очень субъективное занятие и зависит от целей дизайнера (художника), его видения конечного результата, его идей и мыслей, от стиля дизайна сайта в целом. В общем, от очень многих аспектов.
Все те сайты и примеры, что мы использовали в материале, хороши по-своему, и они не худшие варианты. Но на их примере наиболее ярко и наглядно можно было демонстрировать варианты огрехов, допускаемые мастерами.
На первый взгляд такие моменты слишком малы и кажутся незаметными, но при взгляде со стороны они как раз и становятся явными. Да - в моде, в тренде яркие, сочные цвета, легкие и туманные тонировки. Но даже с этим переборщить очень просто, создать настолько яркое изображение, настолько насыщенное цветами, что от него будет жуть, как страшно. Или затуманить и покрыть серым и создастся впечатление старины… да… но никак не увязывающееся с темой композиции на фотографии, с антуражем, стилем предметов и прочее.
Подводя итог материала, заметим, что даже если вы только веб-дизайнер, иногда стоит чуть-чуть больше времени уделить тем фотографиям, которые используются в оформлении сайта. Поработать с ними, «поиграться» в Photoshop’е. Без фанатизма, без усложнения, «простенько, но смачно» (с). Тогда конечный контент и элементы дизайна получатся еще лучше, чем были и дизайн станет более роскошным.
