Как проверить композицию по тону, насыщенности, пятнам и другим параметрам — приемы и советы Ивана Смирнова

Работа Марии Пушковой с курса «Коммерческая иллюстрация».

В иллюстрации важно, чтобы все ее составляющие помогали правильно сфокусировать внимание зрителя и решить задачи повествования. А составляющих у этого жанра много: композиция, тон, цвет, насыщенность, сюжет, герои и т.д. Когда художник собирает их вместе, то нередко что-то упускает — и карточный домик падает. Это нормально, с проблемой рассыпающейся иллюстрации сталкиваются даже опытные художники. Они же придумали несколько приемов, как проверить себя и застраховаться от лишних сложностей.

Эти приемы входят входят в курс «Коммерческая иллюстрация» от основателя Smirnov School Ивана Смирнова. Применять их стоит на разных этапах: во время создания тонового подмалевка, при покраске и детализации, и в самом конце. Все приемы актуальны для работы в Photoshop, часть можно использовать в Procreate и других приложениях для рисования.

Упражняться мы будем на работе Ивана Смирнова, но в качестве иллюстрации общей концепции вы встретите в статье работы выпускников курса.

Наш подопытный кролик для этой статьи — WIP (work in progress) Ивана с одного из потоков курса «Коммерческая иллюстрация». На занятиях он всегда рисует собственную иллюстрацию, пока студенты создают свою.

Базовый принцип цифрового рисунка — постоянно следить за тоном

Тоновые значения надо проверять всегда: в начале, середине и конце работы. Базовые принципы светлоты/темноты используют даже в скетчах. Особенно важно сверяться с этим в создании иллюстрации: регулярно переводите работу в ч/б и проверяйте читаемость на уровне тона. Для этого можно создать слой поверх готового рисунка и залить его серым цветом, после перевести слой в режим наложения Color (Цветность).

У вас получится нечто подобное:

Автор — Вероника Рудакова

Еще один, более тонкий способ, — проверить тон через Proof Setup с помощью горячих клавиш CTRL+Y. Если у вас по этим клавишам цветовое пространство сместилось в CMYK вместо того, чтобы перевести картинку в ч/б, нужно пройти по этому пути и поменять настройки:

View (Просмотр) -> Proof Setup (Варианты цветопробы) -> Custom (Заказной) -> Device to Simulate (Имитир. устройство) -> Working Gray (Градации серого) -> OK.

Источник

Первое, о чём нужно подумать после перевода работы в ч/б — какие элементы не читаются и почему? Должны ли они вообще читаться? Что отвлекает от них зрителя? Особенно важно, чтобы ничего не сливалось в акцентной зоне. На примере ниже основным акцентом является персонаж.

Красным отмечена область, которую стоит исправить.

Сразу видно: волосы несколько сливаются с паровозом. Причёска может быть более контрастной, а паровоз на фоне — гораздо более светлым. Помимо этого, верхняя часть персонажа визуально смешивается с окружением. Чтобы исправить это, нужно сделать тон более контрастным.

Если в портретной области персонажа подправить контраст, она будет удерживать всю остальную композицию. Но если какая-то нужная деталь в рисунке не читается, и при этом другие элементы отвлекают от неё внимание — ими стоит заняться в первую очередь.

Пример изменения контраста.

Исправить недочеты можно, создав дополнительные слои в режимах наложения Soft Light (Мягкий свет), Overlay (Перекрытие) или Hard Light (Жёсткий свет), в зависимости от того, что вам нужно скорректировать. Так можно попробовать затемнить волосы и высветлить паровоз прямо поверх черно-белого слоя, после отключить его. Либо просто запомнить, что не так, и работать с цветным оригиналом.

Финальный вариант в ч/б. Теперь персонаж не сливается с фоном.

Как проверить насыщенность в два клика

Цвета грязноваты, не хватает акцентов или все выглядит одинаково ярким/бледным? Можно создать карту насыщенности и проверить себя по ней.

На такой карте четко видны насыщенные и ненасыщенные области, а тоновой компонент будет отсекаться. Соответственно, вы сможете отдельно работать с насыщенностью, и отдельно — со значениями тона.

Выглядит это так:

Автор Екатерина Моисеева

Тут хорошо видно, что самые насыщенные зоны — это лапы и морда зверя и щечки персонажа. Они же являются акцентами цветовой композиции. Окружение не такое насыщенное и не перетягивает внимание.

Чтобы получить карту, создайте новый слой поверх всех остальных и залейте его ровным серым цветом. Далее переведите его в режим Luminosity (Яркость). У вас получится нечто подобное:

Как анализировать карту?

По общим принципам композиции. Цвет и насыщенность должны усиливать ее, а не сбивать. То есть композиционный фокус должен совпадать с фокусом цветовым. На примере ниже виден акцент в обозначенных красным областях. В них считывается некая структура, и, если упростить её до общих форм,можно увидеть композицию.

Пример цветового наброска с прослеживающейся композицией. Паровоз служит «рамкой», а яркие волосы персонажа работают как точка фокусровки. Конечно, всегда можно доработать задумку, как именно — подскажет карта.

Чтобы понимать, к какому цветовому наброску стоит стремиться, нужно анализировать подобным образом чужие работы и найденные фотореференсы. Для хорошего результата важно понять, есть ли в рисунке акцент? Не конфликтует ли он с другими частями изображения?

Неправильно расставленные акценты.

Определившись с акцентами, отметьте и отредактируйте области, которым требуется доработка. Убавьте насыщенность в тех местах, где она привлекает ненужное внимание, добавьте ее в акцентных зонах. Иногда можно и наоборот — тут все зависит от вас и ваших предпочтений. Сверяйтесь с картой насыщенности по необходимости.

А вот пример того, как ненасыщенные зоны используют для выделения акцента:

Концепт кролика Бьянки из Spyro Reignited Trilogy от Николаса Коула

Лицо персонажа — максимально ненасыщенное, на нем ярким пятном выделяются глаза. В итоге лицо работает как своего рода рамка вокруг глаз, а насыщенная одежда — как «рамка» для более блеклого меха.

Графическая составляющая

Помимо вообще тона и насыщенности, бывает полезно оценить композицию пятен: как цветовых, так и тоновых. Поговорим о последних.

Зачем нужно думать о пятнах? Чтобы избежать ненужной детализации, которая не дает считать композицию. Тон очень важен для восприятия, хорошо, чтобы глаз мог видеть композицию как набор из нескольких пятен. Не зря в художественных школах часто говорят: «ты дробишь, спиши тут и там». Преимущество цифрового рисования в том, что даже если глаз замылился и художник уже не замечает, что «ушел в деталюшки», простые приемы анализа помогут найти проблемные места. Еще с их помощью удобно анализировать чужие работы — об этом подробнее тут.

Как проверить себя?

Создайте корректирующий слой Threshold (Порог), нажав на чёрно-белый круг под панелью слоёв.

Еще можно создать копию всех слоев в одном новом слое (Ctrl Alt Shift E), после перейти во вкладку Image > Adjustments и выбрать Threshold (Изображение > Коррекция > Порог).

В настройках слоя вы сразу увидите ползунок. Используйте его — тяните влево и вправо и следите за изменениями. Если все хорошо, то читаемость акцентной области будет сохраняться независимо от того, как далеко этот ползунок двигается (в разумных пределах). Т.е. чем дольше черно-белый рисунок сохраняет смысл, тем лучше.

Начинаем двигать ползунок.

Демонстрация управления слоем Threshold. Пока все читается.

А тут уже заметны проблемы. Из-за перемещения ползунка с рисунка исчезли очертания героя:

В работе все детали всплывают одновременно, а отдельные тёмные и светлые области не выделяются — картинку стоит доработать.

Теперь двигаем ползунок влево. Если вы видите, что в тёмном диапазоне пропадают важные детали, нужно дополнительно проработать их по тону. На примере ниже исчезает лицо персонажа. Это значит, что его нужно сделать чуть ярче.

Боитесь забыть, что нужно поправить? Можно скопировать получившийся чёрно-белый слой и наложить его на цветной рисунок в удобном вам режиме с прозрачностью. Так вы будете видеть очертания понравившихся/неудачных пятен. Закончив правки, не забудьте удалить слой.

Например, вам понравилось, как легло световое пятно, и вы решили его усилить. Для этого можно выделить нужные светлые области и доработать их уже в цветном слое. Либо, если вам хочется сделать менее контрастную тень, можно выделить тёмную область, скопировать её в режиме Normal со сброшенной прозрачностью и таким образом сделать менее яркой.

Работа с цветовыми пятнами через Posterize

Пятна тоже можно анализировать с двух точек зрения — цветовой и тоновой. Не обязательно пятна по тону должны совпадать с пятнами по цвету. Чтобы оценить разбивку на пятна в работе, используют корректирующий слой Posterize (находится там же, где и Threshold).

У Posterize (Постеризация), как и у Threshold (Пороговый тон), есть ползунок с диапазоном интенсивности. Чем больше уровней — тем больше шума на рисунке, из-за чего изображение начинает выглядеть так, будто ему не хватает битности. Лучший результат можно увидеть на четвёртом и пятом уровнях. Они позволяют проанализировать работу на цвет и контраст.

Автор Екатерина Зотова

Если вам кажется, что цветовых пятен слишком много, или в работе случился перебор деталей — Posterize может подсказать, как все обобщить.

Posterize не показывает настоящий контраст и цвет, но полученную информацию можно использовать для правок тона (с помощью маски) и самого цвета.

Выберите подходящее значение, скопируйте слой, наложите его в режимах наложения Color (Цветность) или Saturation (Насыщенность) и посмотрите, как Posterize разложил картинку на насыщенные и ненасыщенные области. Помните, это инструмент анализа — править скорее всего придется руками.

Posterize в режиме Color.

Если вам понравилось, как выглядит рисунок с включенным Posterize — можно использовать этот слой как эффект пост-обработки.

Например, так. Тут все зависит от ваших предпочтений.

Режимы наложения Lighten и Darken как таблетка от «перерендера»

В погоне за деталями можно потерять целостность рисунка. Если это произошло — нужно снизить контраст рендера и выровнять тон деталей. Режимы Lighten (Замена светлым) и Darken (Затемнение) покажут места, в которых рендер получился слишком детальным.

Что нужно сделать? Найдите средний оттенок по работе. Для этого создайте копию слоя и примените размытие по Гауссу. Выберите пипеткой цвет, который сильнее всего представлен в получившейся работе. Потом залейте этим цветом новый слой поверх всех остальных.

Как использовать Darken

Переведите слой со средним оттенком в режим Darken. Всё, что темнее среднего оттенка, будет хорошо видно. В том числе и те самые перерендеренные области, которые вы хотите найти.

Демонстрация приема

Теперь нужно решить, как исправить проблемы вашего рисунка. Усилить детализацию, если в «слепую зону» попал важный фрагмент? Или уменьшать её, если какой-то незначительный кусок работы слишком сильно выделяется? Это вам предстоит решить самостоятельно.

Как использовать Lighten

Теперь переводим слой со средним оттенком в режим Lighten. Какие-то участки выглядят засвеченными? Можно настроить картинку с помощью уровней (Ctrl+L) и вернуть света в нужный диапазон. Если во время калибровки проступит средний оттенок, это может сделать работу визуально более плоской. Чтобы это исправить, вы можете разбить рисунок на передний, средний и задний планы, после чего поправить интенсивность корректирующего слоя с помощью масок.

Пример выделения фрагмента на слое

Бонус — как улучшить работу

Поддельные рефлексы

Для того, чтобы передний и задний план смотрелись более цельно, нужно имитировать рефлексы. С ними цвета на картинке будут лучше взаимодействовать, лишние шумы сгладятся, а градиенты основных масс станут лучше. Тёмное станет чуть темнее, светлое — чуть светлее. Для этого иногда применяют Gaussian Blur.

У вас может получиться нечто такое.

Автор Роман Масленников

Чтобы этого добиться, сделайте копию иллюстрации и наложите ее саму на себя в режиме Soft Light. Затем — размойте новый слой с помощью Gaussian Blur до состояния «крупные массы и никаких деталей».

Пример корректирования через Soft Light и Gaussian Blur

Теперь нужно сбросить прозрачность на втором слое. Если в рисунке много тёмного — поправьте его с помощью корректирующих слоев Curves (Кривые) или Levels (Уровни).

Корректировка рисунка с помощью кривых

Световой набросок

Иногда в процессе можно увлечься рендером и осознать, что свет перестал работать так, как было задумано. Приём, который может это немного исправить — это сделать поверх слой в режиме Linear burn (линейный затемнитель) и грубо накинуть светотеневой узор по-новой белой кистью. Назовем этот слой световым наброском.

Выглядеть он может, например, вот так:

Накладываем набросок на работу, самостоятельно подбирая наиболее подходящий режим наложения:

Эффект выглядит слишком сильным? Набросок можно интегрировать в картинку при помощи подходящего режима наложения (например, Soft Light), а также скорректировав параметры Fill (Заливка) и Opacity (Непрозрачность).

С помощью этого метода можно только подсобрать светотень, выделить какие-то акценты, но не перерисовать все с нуля. Поэтому все равно придется хорошо планировать освещение заранее.

Виньетирование

Речь идет не о злополучной жесткой «виньетке» — мы всего лишь предлагаем попробовать мягко затемнить нужные части изображения, обычно это края. Так проще управлять взглядом зрителя и фокусировать его на центре композиции. Однако, стоит помнить, что работать с виньетированием стоит максимально осторожно — эффект может испортить работу.

Обычную «виньетку» можно сделать в Photoshop. Откройте меню Filter (Фильтры) -> Camera Raw Filter (Фильтр Camera Raw) -> Lens Corrections (Наборы) -> Vignetting (Виньетирование). Если вам нужна более тонкая настройка, можно пройтись мягкой тёмной кистью по краям рисунка, как это сделано на картинке ниже.

Автор Валерий Григорьев

Не перестарайтесь: если вообще вводить виньетки, они чаще всего должны быть лишь слегка заметны.

Виньетирование можно использовать не только в качестве затемнения по краям, но и как осветление по центру.

Ещё можно использовать режимы наложения вроде Linear Dodge/Color Dodge там, где нужно создать фокус или показать влияние света. Это позволит добавить атмосферности и сделать рисунок более цельным.

Эффект дымки

Если нужно усилить читаемость персонажа или объекта — добавьте на задний план дымку. Этот эффект позволяет смягчать детализацию и контраст в областях, прилегающих к нужному объекту на картинке.

Таким образом персонаж или предмет будет казаться важнее и чётче.

Наглядный пример использования дымки.

Бунт на корабле

Если вы долго работали и понимаете, что глаз замылился, можно попробовать избавиться от этого эффекта с помощью экстремальной постобработки рисунка.

На изображение было наложено сразу несколько разных эффектов ради эксперимента.

Попробуйте применить все возможные эффекты из перечисленных выше в рамках разумного (а можно и нет) и посмотрите, на что станет похожа ваша иллюстрация. Именно из-за смены фильтров и эффектов изображение заиграет по-новому и вам будет проще найти в нём ошибки.