Создание коммерческой иллюстрации без ошибок: 10+ приёмов

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Для того, чтобы передний и задний план смотрелись более цельно, нужно имитировать рефлексы. С ними цвета на картинке будут лучше взаимодействовать, лишние шумы сгладятся, а градиенты основных масс станут лучше. Тёмное станет чуть темнее, светлое — чуть светлее. Для этого иногда применяют 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 там, где нужно создать фокус или показать влияние света. Это позволит добавить атмосферности и сделать рисунок более цельным.

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

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

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

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

Вы можете сразу применить эти знания на практике и заодно побороться за ценные призы, нарисовав иллюстрацию на конкурс «Путешествие во времени» от MYTONA, Smirnov School, MSI, Huion, 1С Интерес и ИД «Питер». В нём две номинации: для 2D и 3D художников. Первым нужно нарисовать иллюстрацию о путешествии во времени, вторым — создать персонажа и его машину времени.

В каждой номинации три призовых места и подарки для победителей: монитор, планшеты и Inspiration box. Работы участников отсмотрит разработчик и издатель игр MYTONA — лучшим кандидатам может быть сделано предложение о сотрудничестве. Подробности тут.

#иллюстрация #урок #читы