Роль фотографии, изображения, арта в веб-дизайне огромна и об этом не раз было упомянуто в наших материалах. Порой хочется сказать, что задача веб-дизайнера создать макет некоторого сайта: интернет-магазина, кафе, компании, а не заниматься различными деталями. Их-то заказчик сам может настроить и загрузить на сервер. Зачем мне еще тратить время на обработку картинок? Отчасти это верно, но и некорректно также, поскольку в дизайне сайта должны быть отражены образцы изображений, чтобы заказчик представлял каковыми они должны быть в рабочей версии.
Проще говоря, если применяется тонировка, дуплекс, синемаграфия и прочие эффекты, то создавать образцы нужно и важно. А если веб-мастер создает не только сайт, но и выполняет всю прочую работу по контенту, то и тем более. И это одна из причин, почему в нашем блоге достаточно много внимания уделяется фотоэффектам и разным премудростям работы в Photoshop.
Сегодня же обратим внимание на весьма интересный плагин Viveza 2 для Photoshop, который существенно облегчает работу с фотографиями и изображениями. С одной стороны, может показаться, что запустив его, и так всё станет ясно. Но с другой, не все пользователи сразу представляют, зачем нужны те или иные функции, если в Photoshop и так можно сделать все то же самое и другим путем.
Художественная красота
Для начала обратим внимание, что различные изображение или фотографии используются в веб-дизайне все чаще и являются на сегодняшний день ведущим трендом и даже стандартом. Мы подобрали для вас несколько проектов, на каждом из которых к фотографиям применялись различные эффекты. Это и цветовая коррекция, добавление источников света, синемаграфия и регулировка тона, общее тонирование и многое другое. Речь идет о проектах: L HOMES – The Art of living, Fintech Campus, Car Dealer, Fournier, Rogers-O'Brien Company. На всех сайтах фотографии изменены от своего первоначального вида. И видно это хотя бы только по насыщению и цветокоррекции.
Поработать с такими образцами в Photoshop можно с применением Уровней, изменением Цветового тона, работы по маске, резкости. Альтернативой же может стать Viveza 2.
Сложный и простой Viveza 2
Viveza 2 входит в пакет бесплатных плагинов Google Nik Collection, который доступен на официальном сайте и поддерживается множественными приложениями. Однако отметим, что последний Photoshop CC 2017 не поддерживается, поэтому рекомендуется на компьютере иметь какую-либо прошлую версию (CC 2015 или CS6).
Плагин предлагает фотографам, в первую очередь, простые и легкие инструменты для выборочной регулировки цвета и тона изображения, без нагромождения слоев и масок. И вы увидите насколько творческий процесс становится проще и быстрее.
Сила Viveza кроется в контрольных точках. Но чтобы их грамотно научиться использовать, необходимо четко представлять, какое изображение вы хотите увидеть в конечном итоге. Разумеется, иногда в процессе работы не исключены варианты вторичного редактирования или создание не того, что ожидаемо. Зато такие вариации могут оказаться даже лучше задуманного.
Итак, возьмём самый простой и наглядный пример: орел на лугу. Наша цель сделать орла более контрастным, ярким и выделяющимся, чтобы затем можно было использовать фотографию на сайте в качестве изображения для шапки страницы или внутри статьи.
Viveza позволяет корректировать кривые как все вместе, так и по отдельности. Мы чуть-чуть подкорректировали цвета изображения, да, в любой момент эту корректировку можно изменить. Пока остановимся на этом, так как отталкиваться и работать с таким исходником будет проще.
Зачем корректировали? В нашем случае мы будем создавать сказочную птицу на базе реально существующей. Поэтому подчеркнуть эту сказочность, акцентировать на ней внимание, можно путем изменения фона (как минимум). Не Феникс и не Жар-птица, но на темном фоне лучше смотрятся яркие оттенки. Мы не стремимся создать черный фон, но именно темный. Более того, разумеется, можно выделить птицу, скопировать на отдельный слой и его редактировать, а фон изменять в Photoshop с помощью уровней, насыщения, цветности или просто закрасить кисточкой. Мы не оспариваем – можно.
Но наша задача сейчас – показать вам работу Viveza в действии, детально и максимально подробно.
Теперь перейдем к локализованным корректировкам, а именно, к работе с контрольными точками. Контрольные точки позволяют сделать очень специфичные изменения в тональности, вплоть до детализации мельчайших деталей. Создается даже порой ощущение, что сказочное волшебство творится прямо на глазах в реальном мире.
Плагин считывает изображение и корректирует области точек в пределах обозначенной окружности на основе сходства пикселей внутри нее. Ух, замудренно звучит, но на деле просто и легко. Таким образом, мы выберем орла, но регулировать будем только фон. Цель сделать фон менее явным, выделить на нем птицу, но сохранить детали. Посмотрите на скриншоты ниже и увидите глобальную разницу в настройках только одной точки.
Справа на панели выберете «Добавить контрольную точку» и нажмите в том месте фона, которое нужно отрегулировать. Мы создали четыре точки, и на основе изображения со «Структурность 100%» изменим весь фон. Для этого выделите в списке справа контрольную точку, а затем настройте её в окне выше.
Также существуют изначально скрытые параметры точек. Смотрите на точку (1) и обратите внимание на треугольник под параметром «Стр». Нажмите, и список раскроется (3). Нажав на бегунок напротив точки (2), можно изменить радиус зоны охвата коррекции.
Поскольку мы отрегулировали точки фона, то можно их сгруппировать и отдельно уже работать с точками птички. Важно: при группировке настройки точки усредняются и становятся общими. То есть, если внизу на земле мы повысили «Структурность», а верх фона размыли, то при группировании контрольных точек размывается всё. Нам это не нужно. Мы хотим, чтобы травка под лапками была четкой и видимой, а потому группировать можно только нижние и верхние точки по отдельности. Но тогда общим будет радиус точки. Иными словами, все зависит от того, какое у вас изображение и что именно корректируют контрольные точки.
Верхнюю часть фона мы «размыли», уменьшив «Структурность», и добавили теплых оттенков. Также, поскольку крылья практически подходят к верхней границе, пришлось уменьшить радиус точек и размножить их. Обратите внимание, что дополнительные коррекции можно будет провести затем уже в самом Photoshop.
Копирование контрольных точек происходит при помощи зажатия Alt + ЛКМ на точке и перемещения её в нужное место. При этом настройки полностью сохраняются. Если скопированную точку отредактировать, то эти изменения применятся только к ней.
Viveza предлагает также возможность просмотра работы «до» и «после». Это помогает увидеть, как именно изменяется изображение и что еще нужно подкорректировать. В верхней панели есть много режимов просмотра, но «Разделение» самый удобный и популярный.
Приступим к фентези-раскраске нашего орла. Обратите внимание, что можно использовать много точек малого радиуса, одну точку большого радиуса. И заметьте то, что изменяя цветность одной точки (синие перья) при небольшом радиусе, артефакты не создаются, как если бы мы работали кисточкой. Сравните два варианте прокрашивания перьев и увидите всю разницу и «умную работу» плагина.
Во втором случае мы использовали новый чистый слой, прокрасили кисточкой область перьев и выбрали режим наложения «Мягкий свет». Но дополнительно пришлось еще затирать ластиком, затем добавлять осветлители и прочее, и прочее. Плагин сделал все быстрее, а настроек и того меньше.
И вот таким нехитрым способом в течение минут 20 – 30 мы раскрашиваем нашу птичку. Затем нажимаем кнопку Ок и возвращаемся в Photoshop. Наши изменения появятся на отдельном слое. Теперь можно взять инструменты «Палец» или «Размытие» и выборочно где-то что-то подкорректировать при необходимости.
Работая с плагином первое время, может быть трудно понять по-настоящему всю прелесть в возможностях и удобстве контрольных точек. Но только до тех пор, пока веб-мастер воочию не увидит, как изменяется его изображение.
Мы также преобразили и город, за которым, в утреннем рассвете среди облаков и низкого тумана, возвышаются горы.
Viveza действительно дает нам возможность влиять на изображения и добавлять цветность даже бесцветному. Можно в несколько простых кликов добавить драмы или насытить определённую часть изображения, создав плавный переход от черно-белого к цветному. Так, например, на следующем рисунке мы применили выборочно окрашивание и даже прорисовали отдельные цветки у окна, стулья и стол.
Поиграйте с различными функциями и найдите свои способы добавления глубины вашей фотографии. Посмотрите еще на некоторые примеры сайтов, на которых фотографии и изображения подвергались обработке. Почему мы считаем, что они «не настоящие»? Яркость деталей, оттенки, общая гамма… слишком тонко настроены. valparaisoacquapark, cidreriemilton, edcoproducts, coconuda.
Заключение
Несмотря на то, что веб-дизайн сайта создается в Photoshop при использовании огромного числа слоев, эффектов и многого другого, работа с фотографиями и графикой может быть значительно упрощена. Пакет плагинов от Google действительно упрощает работу. Насколько эффективно и качественно – зависит от конкретного изображения. Но ведь всегда можно подкорректировать с помощью инструментария Photoshop.
И практически все сайты на сегодняшний день используют изображения, предварительно отредактированные. Какие-то сильно и явно, какие-то немного. Но это видно и созданная красота действительно впечатляет.
Если вы все еще в раздумьях, а нужно ли веб-дизайнеру учиться работать в таких художественных приложениях, то подумайте вот о чем. Какой сайт понравится посетителям больше: с замыленными городскими фотографиями или с фотографиями с добавлением не 100% цветности, но некоторого муара, дымки закатной, с некоторыми элементами освещения и яркости? Мы воспринимаем сайты не только по информативности, но и по визуальности. А ведь подсознательно что-то яркое и необычное всегда нравится.
Иногда, наоборот, требуется не более, чем чуть-чуть подправить цвета, например, тон кожи на лице, чуть темнее/светлее волосы или сильнее подчеркнуть зрачки глаз. Но даже с этим Viveza способен справиться гораздо быстрее.