Получение плавных теней при раскраске рисунка в Photoshop

…Не поверю, что существуют поклонники CDRR, которые не пробовали рисовать хоть раз. Сначала рисуют карандашом… С появлением компьютера дело упрощается и усложняется одновременно. С одной стороны, можно довольно легко превратить набросок в более-менее приличный плоско залитый рисунок. С другой стороны — глядя на профессиональные примеры, в достаточном количестве добытые из интернета, хочется делать так же, и, желательно, сразу. Однако «сразу» получаются только вопросы.

В данной статье рассматривается один из камней преткновения: как изобразить плавные переходы теней при раскраске.

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

И вот, когда в нашем тесном кругу в очередной раз был задан вопрос по поводу плавных теней, я все-таки решил попробовать. И если имеется сто описаний от разных дилетантов, как эти самые тени получить, — значит, считайте это сто первой попыткой от очередного из них. Если данный материал поможет кому-то НАЧАТЬ, я буду очень рад.

Для примера было взято первое, что попалось под руку — в данном случае, это плоско залитый рисунок от Thweatted… Замечательная вещь, между прочим… Оригинальный рисунок находится здесь.

1

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

1.Выполняем обводку эскиза. Не знаю кому как, а мне удобнее выполнять ее векторами во Flash MX.

Показываю только результат, поскольку сам по себе процесс обводки никаках хитростей не содержит. Надо только знать базовые средства рисования и редактирования линий во флеше, а остальное — время и терпение.

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

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

Но пока считаем, что у нас уже есть сделанная тем или иным способом отрисовка на белом фоне в BMP или любом другом несжатом формате.

2. Переходим в Photoshop. У меня Photoshop 7, дальнейшее относится именно к этой версии.

Открываем файл с отрисовкой. Слой Background Photoshop не позволит перемещать, поэтому я дублирую его, затем скрываю. Копию называю stroke, и дальше работаю с ней.

5

Кстати, дублирование слоя выполняется на закладке Layers по правому клику на слое, который необходимо дублировать. Далее из появившегося меню выбираем Duplicate. В возникшем диалоге при необходимости задаем имя нового слоя, жмем ОК, и сверху от дублируемого слоя появляется его копия.

Чтобы выбрать слой, надо щелкнуть по области с его названием, чтобы скрыть — по знаку глаза, который отображается cлева от слоя на закладке Layers.

Если кому-то мое описание элементарных действий покажется навязчивым,- вспомните то время, когда вы сами этого не знали. Большинство статей обычно написаны так, словно человек обязан знать все эти кнопки и менюшки с самого рождения… 🙂

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

Теперь необходимо оставить отрисовку, а прочую часть слоя сделать прозрачной. Сделать это с помощью Magic Wand и ластика и при этом не оставить в составе отрисовки светлых пятен от флешного фона лично мне не удалось, поэтому я воспользовался инструментом Select/Color Range.

6

Задал параметр Fuzziness=160, щелкнул в окне инструмента по белому фону рисунка, затем ОК.

7

Кстати, настройкой Fuzziness в инструменте Color Range можно в некоторых пределах изменять толщину линий — при меньшем значении этого параметра линии получатся толще, но также они будут более ступенчатыми.

Выделенное стер ластиком. На следующем рисунке снизу обведен сам инструмент, а сверху — где можно изменить его параметры, в данном случае размер. Прочие инструменты буду показывать примерно так же.

31

После стирания инвертировал выделение (Ctrl+Shift+I) и закрасил контур, используя Brush Tool.

Готов поспорить: есть люди, которые не знают, что такое инверсия выделения. 🙂 Хотя это несложно. Проинвертировать выделение означает, что выделенные части рисунка становятся невыделенными, а невыделенные — выделенными. Весьма полезная штука. 🙂

В данном случае имеем: сначала была выделена область рисунка, не занятая линиями. Эту область я стер, после чего все, кроме линий стало прозрачным. Затем инвертировал выделение, после чего выделенными оказались уже сами линии. Их я закрасил.

16

Использовался цвет #582C1D — темно-коричневый для отрисовки тела. Параметры кисти для Brush Tool настраиваются здесь:

17

А цвет можно задать здесь:

29

Еще одно. Указанный цвет подходит для отрисовки тела Гаечки, однако одежду и очки необходимо обвести темно-фиолетовым #5E3652. В данном примере я забыл это сделать, и упущение мне пришлось исправлять в самом конце.

Вам лучше сделать это сразу. С помощью Lasso Tool совместно с клавишей Alt уберите части выделения, не относящиеся к одежде и очкам.

8

Оставшуюся область выделения закрасьте темно-фиолетовым.

3. Под слоем отрисовки заводим слои с заливкой разных частей (каждая часть — отдельным слоем, потом легче будет с ними работать):

— в панели Layers выбираем слой stroke.

— выделяем область, подлежащую заливке (например, лицо) с помощью Magic Wand. Параметр Tolerance в данном случае большого значения не имеет, у меня обычно указано 32.

10

— смотрим, все ли выделилось. Если нет, то добавляем необходимые области к выделению с помощью того же Magic Wand или используем Lasso Tool, feather=0. Оба инструмента совместно с клавишей Shift.

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

9

Также на лице присутствуют области шириной 1-2 пиксела. Magic Wand с такими работает плохо или не работает вообще. Такие места придется добавлять к выделению вручную с помощью Lasso Tool. Расширяем выделенную область на 1 пиксел по всем краям для того, чтобы края заливки заходили под отрисовку: Select/Modify/Expand с параметром 1.

11

Ну, откуда берутся инструменты вроде Select/Modify/Expand, я больше не стану показывать. Будем считать, вы уже поняли, что это путь из главного меню программы. 🙂

В панели Layers выбираем слой непосредственно под stroke:

12

— создаем новый слой через Ctrl+Shift+N. В появившемся диалоге лучше сразу задать какое-то осмысленное имя. Для нового слоя, например, для лица, я назвал его face. Вновь созданный слой автоматически становится выбранным.

12-1

— при выбранном новом слое закрашиваем область выделения, используя Brush Tool.

Теперь на этом слое у нас находится готовая деталь:

12-2

И так далее, для всех частей. На всякий случай привожу цвета, которыми пользуюсь я сам (шестнадцатиричные значения):

отрисовка тела #582C1D
отрисовка одежды #5E3652
ушки внутри #FEBFAB
кожа #FDD5AF
белки глаз #FFFFF9
радужка глаза #79B6CA
носик #FC8978
одежда #BEA4DC
пояс #B872B8
очки #3490EF
стекла очков #98E7DD
волосы #FC7F33

У некоторых товарищей возник вопрос по поводу соответствия этих цветов стандатрным. Повторяюсь: это НЕ стандартные цвета, просто мне нравятся именно эти. 🙂 И вот, после обработки всех деталей, мы видим конечный результат плоской заливки:

some_day_003

Некоторые на этом и остановились бы, но мы пойдем дальше.

4. Делаем черновое затенение заливок, используя Dodge Tool

18

На этом этапе, естественно, нужна практика. Для начала достаточно знать, что просто Dodge Tool осветляет, а совместно с Alt — затемняет.

Основные приемы:

— применять кисти с мягкими краями

— менять размер кисти в зависимости от задачи

— менять параметр Exposure в зависимости от задачи

— при необходимости использовать в работе выделение через Lasso Tool с разным параметром Feather.

Кстати, параметр Feather у выделения означает плавность перехода от выделенной области к невыделенной. Настройка кисти у Dodge Tool аналогична такой же у Brush Tool. Параметр Exposure находится сверху — примерно там же, где Feather для Lasso Tool.

Для примера, вот у нас нога. Точнее — не у нас, а у Гаечки. 🙂 С одной стороны, надо плавно затемнить бедро снизу, но при этом переход к голени должен быть достаточно резким.

Сначала через Magic Wand выделяем деталь. Удобнее будет брать выделение по прозрачной области, поскольку сама деталь будет окрашена чем дальше, тем более неравномерно. Инвертируем выделение Ctrl+Shift+I, чтобы была выделена область самой детали.

Далее, с помощью Lasso Tool с параметром Feather=1 совместно с клавишей Alt обрезаем ненужную часть выделения.

Выбираем Dodge Tool, кисть с мягким краем диаметром 100, Range = midtones, Exposure = 50%. Проводим, как показано на рисунке, и результат вполне приличный.

3

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

При доводке глаз и изображении стекол очков без засветлений (бликов) вообще не обойтись.

Лучше сразу решить, откуда падает свет, и затенять соответственно. Тени появляются со стороны, противоположной свету, засветления — на выпуклых частях со стороны источника света. В данном примере подразумевалось, что этот источник находится сверху-справа.

Приблизительный вид на стадии чернового затенения:

some_day

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

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

body copy
body
face copy
face
left arm copy
left arm
и т.д.
21

Нижние слои изменяться не будут, однако они нужны по трем причинам:

— это запасные оригиналы на случай неудачного размытия

— средство борьбы с размытием верхних слоев «внутрь»

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

По поводу размытия «внутрь» и масок будет разъяснено дальше.
5. Размываем копии слоев, которые расположены сверху от исходных, а исходники не трогаем.

Здесь применяется стандартный фильтр Gaussian Blur,константа размытия Radius подбирается на глаз.

На закладке Layers выбираем копию нужного слоя и пропускаем через фильтр целиком.Если на рисунке что-то выделено, перед применением фильтра снимаем выделение Ctrl+D

Применяем фильтр: Filter/Blur/Gaussian Blur.

24

Как я уже говорил, необходимая константа размытия определяется на глаз, чтобы все части выглядели размытыми примерно одинаково.

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

Для данного примера были применены константы от 0.6 (радужка глаза, зрачки) до 8.5 (туловище). Разумеется, это только ориентировочные величины, в вашем примере могут потребоваться другие. Просто меньшее размытие вы вряд ли заметите, а большее приведет всю деталь в полупрозрачное состояние. Необходимость настолько большого размытия будет означать, что затемнение было выполнено слишком грубо.

В качестве примера чрезмерного использования фильтра приведем ту же ногу, размытую Gaussian Blur с параметром 15. Нижний слой скрыт. Легко заметить, что прозрачность детали по краям очень сильная.

4

В случае неудачного затенения, когда не удается нормально размыть деталь, остается только стереть размытый слой, залить основной слой базовым цветом, затемнить заново с учетом ошибок, скопировать, и эту копию снова размывать.

Кстати, применять данный фильтр ко всем слоям без разбора вовсе не обязательно. Зачем, например, размывать белки глаз? Или пояс, если его почти не видно, а он уже и так хорошо затенен? В этом случае решайте сами.

При размытии вполне могут быть ошибки, которые выясняются после обработки еще нескольких деталей. Отменять действия по одному шагу (Ctrl+Alt+Z) неразумно, если эти «несколько деталей» размыты хорошо, а отменить действие надо только для одной, которая над ними всеми. Искать нужное действие на закладке History — тоже невеликое удовольствие, можно отменить не то, что нужно. Поэтому я рекомендовал сразу сделать копии слоев.

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

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

6. При необходимости, выравниваем яркость отдельных частей. Здесь никаких хитростей: изменением яркости лично я добиваюсь ощущения, что «части» перестают восприниматься как части, а смотрятся единым целым.

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

Для выравнивания можно взять Dodge Tool, кисть с жестким краем размером 300-500, чтобы вся деталь умещалась под кисть целиком и установить Exposure 10-30%. Это наиболее простой способ, но не самый лучший, поскольку, если будет ситуация с неудачным выравниванием яркости (аналогично ситуации с неудачным размытием), то отменить результат будет затруднительно.

Поэтому лучше присоединить к каждому размытому слою отдельный регулятор яркости, для чего на закладке Layers выбираем размытый слой, затем вызываем окно Layer/New Adjustment Layer/Brightness-Contrast.

26

В появившемся диалоге необходимо поставить галочку в окне Group With Previous Layer, чтобы данная настройка действовала только на один слой. Также на слое ничего не должно быть выделено, иначе настройка будет влиять только на выделенную часть. Отмена всех выделений — Ctrl+D. При этом над регулируемым слоем автоматически создается еще один слой с функцией настройки. Окно с регуляторами можно вызывать сколько угодно раз двойным щелчком по соответствующей пиктограмме в составе этого слоя на закладке Layers.

27

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

Так выглядит рисунок после размытия и выравнивания яркости:

some_day_002

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

Значит, будем совершенствовать дальше.

7. Берем выделение с каждой неразмытой части и назначаем как маску на размытый слой. Это делается так:

— на закладке Layers выбираем нижний неразмытый слой из тройки

— с помощью Magic Wand выделяем прозрачную область, не занятую деталью

— на закладке Layers выбираем средний размытый слой из тройки

— назначаем маску на скрытие выделенного: Layer/Add Layer Mask/Hide Selection

Делаем то же самое в группах слоев для каждой детали. Это чисто механическая работа. Когда закончим, это и будет наш готовый шедевр.

Для примера привожу, что получилось у меня:

some_day_004

Конечно, можно было бы еще добавить фон… И я его даже сделал. Недурная картинка сама по себе, но вот ракурс почему-то не сошелся. И как его ни крути, а Гаечка просто висела в воздухе. Очевидно, это все из-за моих исключительных художественных способностей. 🙂

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

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