Как нарисовать персонажа в фотошопе
Обновлено: 07.07.2024
Есть два способа рисовать 2d персонажей.
Первый способ, это как говориться карандашом. Если говорить о цифровом рисование, то с помощью мышки или графического планшета.
Но, уметь рисовать не каждому под силу, да и не каждому это нравится. И самое главное об этом все знают. Мы же сегодня поговорим о втором способе, который под силам каждому. При этом мало кто знает насколько он популярен и часто используемый.
На данном изображение вы видите набор различных заготовок поз для человека.
Но, есть такое понятие как пиксельная/растовая графика. Все что мы с вами видим на мониторах и даже просматривая эту статью, а так же изображение выше, это все растовая графика, которая в свою очередь состоит из маленьких пикселей (квадратиков) содержащих тот или иной цвет. В сумме когда их много они начинают формировать плавные оттенки давая хорошие цвета. И как раз рисуя кистью в фотошопе вы используете этот самый растовый подход.- Есть второе понятие, это векторная графика. Она работает иным способом. С помощью математических вычислений изображение в не зависимости от расстояния и количества пикселей, просчитывается максимально качественным (без углов). Но и самое главное для нас преимущество, это совершенно новый подход к рисованию любых спрайтов. Мы вместо кисти используем точки, расставляя их формируем векторную линию, а после заполняем ее цветом или просто придаем определенную толщину. Что бы научится с такой графикой работать вам нужно поискать информацию подобного характера, но я скоро постараюсь написать на эту тему еще полезные статьи, а может даже выложить бесплатный не большой курс, который позволит вам научится основам работы с векторной графикой.
Лучшая программа для работы с векторной графикой это Adobe Illustrator CC. Но инструмент векторной графики есть и в фотошопе. Но как правило его не достаточно.
Ниже вы видите скриншот из самой программы Illustrator. Тут открыт рабочий файл. Персонаж на котором есть точки, это как раз и является тем из чего формируются линии и сами фигуры.
Большим плюсом является то, что двигая линии мы всегда можем изменить положение или форму объекта, не прибегая к перерисовки всего объекта. Достаточно просто сдвинуть линию.
Конечно, что бы создавать красивых персонажей или любые другие объекты вам придется немного набить руку, изучить интерфейс программы, дизайнерские подходы, анатомию человека и просто набраться опыта.
Возможно у вас остался один вопрос, как из векторного изображения получается растовое, и зачем нужно тогда векторное, если все равно в конечном результате все будет отображаться пикселями. Ответ очень прост, монитор может отображать векторные картинки, в самой же программе отображает. Но проблема вся в том, что это вызывает постоянный математический просчет, и потребляет много ресурсов вашего пк. Но художники и дизайнеры используют возможности вектора, для создания изображений. Они получаются более ровными и красивыми, стильными иными словами. Поэтому на выходе мы получаем тоже самое пиксельное изображение, но сам процесс его получения сильно изменен.
Если вам понравилась статья и она была полезна, я постараюсь сделать подобного рода еще статью. Но и самое главное, затронуть тему анимации, и рассказать при помощи какой программы можно легко анимировать 2d спрайты, используя скелетную анимацию.
В этом уроке мы будем рисовать необычного персонажа. Однако урок отличается от тех, что мы обычно публикуем. Здесь нет детальных описаний техник, зато доступно рассказано о том, какие этапы нужно пройти для создания такой иллюстрации. Настоятельно рекомендуем не пытаться повторить шаг за шагом урок, а работать по этим же шагам, но с собственной иллюстрацией, используя урок как руководство и источник вдохновения.
Результат
Шаг 1
Создаем новый документ. Размер выбирайте по своему усмотрению, однако старайтесь сохранить примерно квадратные пропорции.
Шаг 2
Давайте убедимся в том, что включены параметры Shape dynamics/Динамика формы и Transfer/Передача.
Шаг 3
Для начала создадим вспомогательные линии и линии движения, на базе которых создадим тело персонажа.
Шаг 4
Прорабатываем детали все еще на этапе наброска.
Шаг 5
Создаем новый слой и работаем в нем уже как в чистовике.
Шаг 6
Добавляем серый фон, который поможет нам работать со светом, так как по задумке изображение должно быть темным.
Шаг 7
На этом этапе мы корректируем линии, которые кажутся нам неидеальны и добавляем детали, возможно какое-то описание, историю, дополняющие картину.
Шаг 8
Добавляем базовые цвета.
Шаг 9
Укажите слою с наброском режим наложения Multiply/Умножение и настройте прозрачность так, чтобы вы видели лини как ориентир.
Шаг 10
Выбираем слой с цветом для лица и рисуем блики и тени.
Шаг 11
Создайте новый слой поверх оригинала и, удерживая клавишу ALT кликните между слоями. Верхний слой станет обстравочной маской для нижнего. Теперь вы можете спокойно рисовать в этом слое, не боясь испортить контур.
Шаг 12
Убедитесь, что у каждой части тела есть своя группа слоев. Следите за тем, чтобы система слоев была четко организована.
Шаг 13
В этом шаге мы можем корректировать детали и пропорции тела, которые нравятся нам меньше, или теперь выглядят иначе.
Шаг 14
Если вы хотите добавить деталей, которых не было в наброске, найдите референсы, чтобы четко понимать что именно вы хотите нарисовать.
Шаг 15
Мы добавили несколько новых деталей.
Шаг 16
Чтобы произвести цветокоррекцию новых деталей, создайте новый слой в режиме Multiply/Умножение, сделайте его обтравочной маской для оригинального слоя, выберите цвет из вашей палитры, подходящей к той части, которую редактируете, и рисуйте.
Шаг 17
Добавляем дополнительных деталей, не выходя за пределы нашей палитры.
Шаг 18
Повторяем предыдущие шаги там, где хотим добавить деталей.
Шаг 19
Таким же образом работаем над ногами: корректируем цвет и добавляем деталей.
Шаг 20
В процессе рисования у вас может появиться желание переделать какие-то части рисунка. В нашем случае это меч.
Шаг 21
Добавляем завершающие детали.
Шаг 22
Убедитесь что вы закончили редизайн того, что хотели переделать, и движемся дальше.
Шаг 23
В этом шаге мы займемся свободным рисованием: без набросков, просто кистями, учитывая, естественно, цветовую палитру изображение.
Шаг 24
Убедитесь что не вылетели за пределы цветовой палитры, и переходим к следующему шагу.
Шаг 25
Несколько дополнительных эффектов для создания антуража.
Шаг 26
Отключаем слои с персонажем и беремся за фон. Делаем свободные штрихи на темном фоне, чтобы выделить персонажа.
Шаг 27
Помещаем все слои в папку под соответствующим названием и применяем Photofilter/Фотофильтр.
Шаг 28
Температура цвета с фотофильтром становится равномернее во всей работе.
Шаг 29
Дайте волю творческим порывам и добавьте необычных деталей.
Шаг 30
Чтобы сделать цвета и температуру цвета более компактными, создаем новый слой в режиме Multiply/Умножение, и в нем доабвляем оттенков цветом, который наиболее превалирует в изображении.
Шаг 31
Теперь мы папку со всем, что у нас есть. Дублируем ее и объединяем все в один слой. Отключаем видимость оригинальной папки, но сохраняем ее.
В этом уроке мы покажем, как использовать Illustrator и Photoshop для создания персонажей «Boomrock Saints». Я надеюсь, это руководство вдохновит Вас на то, чтобы использовать эту технику для разработки своего собственного стиля иллюстрации. Попробуйте создать качественный эскиз с самого начала, и Вы испытаете гораздо больше удовольствия, превращая её из чёрно-белого в цветной персонаж. Итак, начнём!
Шаг 1
Создайте новый документ размером 1600px x 1600px и выберите для фона light gradient. Добавьте новый слой к своему документу и начните рисовать наброски своих персонажей.
Используя планшет, я обычно выбираю стандартную 3px кисть цвета немного темнее, чем фон. Чтобы в дальнейшем контролировать нажим ручки, я проверяю “Shape Dynamics”.
Шаг 2
Уменьшите «opacity» (непроницаемость) до 50% и добавьте два новых слоя – по одному для каждого персонажа.
Используйте эти новые слои, чтобы перейти к небрежным эскизным линиям и их немного очистить, а также добавить деталей. Будьте аккуратны и постарайтесь не перепутать слои, так позже Вы сможете изменить положение персонажей при необходимости. Неплохо было бы назвать их, как это сделано на изображениях выше. С этого момента персонажи начинают принимать форму. Совершенно нормально, если всё на рисунке останется на данном этапе в небрежном виде.
Шаг 3
Добавьте новый слой между первым «эскизным» и слоями персонажей и назовите его “color”.
Используйте этот слой, чтобы экспериментировать и примерно набросать черновой эскиз персонажей, используя выбранную цветовую палитру. В данном случае, группа хотела что-то в партизанском стиле, естественно я подобрал цвета «хаки».
Затем, на глаз, добавьте освещение и затемнение. Я сделал так, что основной источник света находится слева от персонажей, чтобы добиться максимального освещения открытых участков кожи/одежды. Те части, которые закрыты, будут оставлены «как есть», или затенены, если они находятся за другим элементом, как, например, правая сторона туловища Брайана, прикрытая его правой рукой. Аналогично, большая часть туловища Джоша затенена с левой стороны, поскольку она закрыта Брайаном, который находится непосредственно перед ним.
Шаг 4
Как только будете довольны результатом, можете приступать к иллюстрации в Adobe Illustrator, чтобы очистить контуры. Скройте все слои, кроме контура, сохраните его в формате jpeg и откройте его в Illustrator. С тех пор, как я использую планшет, я могу работать над контурами с помощью планшетной ручки даже лучше, чем мышкой. Те же, которые не работают с планшетом, смогут выполнить эту часть также с помощью pen tool. В Интернете можно найти много обучающих материалов, посвященных использованию pen tool в Illustrator, как и многих других различных методов. Этот метод тот, который предпочитаю я.
Создайте новую кисть, открыв палитру кистей и нажав на иконку «new brush» в нижней части. В открывшемся диалоговом окне выберите «Calligraphic Brush», нажмите ОК, и установите angle (угол), roundness (округлость), diameter, and variation (изменение) этой новой кисти как на параметрах, указанных ниже.
Выберите содержимое Вашего слоя, нажав круг с правой стороны слоя в палитре слоёв. Уменьшите «opacity» (непроницаемость) до 30% и заблокируйте слой. Используйте чёрный цвет для границы и никакой для заливки.
Шаг 5
Теперь мы готовы приступать к тому, чтобы очистить контур. Рисуя контур, постарайтесь изменить толщину линий, чтобы добиться более динамичного эффекта.
Несколько быстрых подсказок, о которых надо помнить, работая с толщиной линий:
1. Создайте иллюзию глубину. Если объект или человек находится ближе к Вам, линии, как правило, будут толще. Поэтому, если данный рисунок был на фоне городского пейзажа, линии, которые составляют городской пейзаж, будут тоньше, чем линии персонажа.
2. Обратите внимание на источник света. Там, где свет ярче, линии, как правило, будут тоньше. Там, где свет неяркий, линии, как правило, будут толще.
3. Внешние линии объекта или человека, как правило, будут толще, чем внутренние линии. Это поможет выделить этот предмет или человека из других.
4. Расширьте окончания линий, которые пересекаются другой линией. Взгляните на картинку ниже, чтобы увидеть, что я имею в виду.
После завершения у Вас должно получиться что-то, похожее на это:
Шаг 6
Теперь мы можем снова открыть файл в Photoshop и начать раскрашивание и обработку. Экспортируйте файл из Illustrator (File> Export) и выберите пункт «Photoshop» из выпадающего списка. В открывающемся диалоговом окне установите разрешение на resolution (разрешение) на high (высокое) (300dpi) и нажмите кнопку ОК.
Шаг 7
Для этой части, которую я обычно выполняю, я создаю отдельный слой для каждого цвета или элемента на каждом персонаже под слоем контура. Итак, это будет выглядеть примерно таким образом:
Затем, я просто раскрашиваю каждый элемент на соответствующих им слоях. Вы также могли заметить, что я немного осветлил контуры каждого персонажа. По моему мнению, это придаёт иллюстрации более естественный вид, в отличие от тёмных контурных линий.
Шаг 8
Теперь, когда мы разукрасили персонажей, всё, что осталось – это обработка. Я обычно начинаю с затенения и двигаюсь к распределению света. Создайте отдельный слой для «Shading» над основным цветным слоем для каждого элемента. Теперь, используя раскрашенного изображение из шага 3 в качестве образца, затемните персонажей, используя brush set, установленный примерно на 60% hardness.
Моя техника заключается в том, чтобы выделять любой элемент, который я затемняю, нажимая с помощью Command/Ctrl на пиктограмму слоя и едва касаясь областей, которые требуют затемнения.
Сделайте это со всеми элементами и персонажами и Вас должно получиться что-то, похожее на это:
После того, как Вы увидели результат и решили, что некоторые затемнённые области должны быть ещё темнее, Вы можете создать новый слой только для тёмных областей и использовать ту же технику, что и выше, чтобы его раскрасить. Наличие тёмных областей в Вашей иллюстрации помогает создавать более динамичный результат.
Шаг 9
Далее мы занимаемся распределением света. Добавьте новый слой над слоем «Shading» для каждого элемента. Выбрав слой «Lighting», используйте ту же самую технику с Command/Ctrl и нажиманием пиктограммы слоя, чтобы выделить их содержимое и добавлять немного света, где нужно.
Для создания отражений для теней используйте pen tool, чтобы создать форму вокруг внутреннего периметра. Затем щелкните правой кнопкой мыши по этой форме, нажмите на кнопку «Make Selection», и нажмите кнопку ОК в открывающемся диалоговом окне. Как только форма будет выделена, выберите белый в качестве цвета и используйте gradient tool для создания тонких отражений, перетаскивая сверху вниз под небольшим углом. Как только Вы закончите, уменьшите opacity (непрозрачность) данного нового слоя до примерно 30% или любого процента, при котором изображение выглядит, как Вам надо.
Шаг 10
Наконец, мы добавляем последние штрихи, такие как татуировка на руке Брайана, логотип на рубашке Брайана, логотип SF по шляпе Брайана, и некоторое дополнительное освещение на обоих персонажах, чтобы по-настоящему сфокусировать внимание на источнике света.
Вот метод, который я использовал для татуировки Брайана.
Увидев все иллюстрации завершёнными, группа спросила, можно ли сделать Брайана «покрепче», чтобы отразить больше его природных качеств. Итак, я сделал несколько быстрых корректировок, расширив немного туловище и добавив немного чёткости правой руке, что Вы можете увидеть в окончательном изображении ниже.
Подробный урок по превращению обычной фотографии в гиперреалистичную живопись всего за пару минут.
Некоторые талантливые художники могут рисовать в технике гиперреализма, но нам, простым смертным, об этом можно только мечтать. К счастью есть Adobe Photoshop, где можно создавать разные интересные эффекты и имитировать рисованные стили. Мы нашли замечательный урок, который сделал Крис Спунер, дизайнер и основатель Blog Spoon Graphics. Он показывает как из простого портретного фото буквально за пару минут можно сделать настоящее произведение искусства с детализованными мазками и бликами.
Конечно, на примере Криса все выглядит действительно шедеврально, но в Photoshop многое зависит от исходной фотографии, и далеко не всегда те эффекты, которые прекрасно работают с одним фото, подойдут для другого. Поэтому мы решили взять портрет немного другого качества и попробовать проделать все те же манипуляции в надежде получить нечто подобное.
1. Итак, откройте выбранную вами фотографию в Photoshop и добавьте корректирующий слой с кривыми. Нам нужно немного затенить тени и высветлить света, чтобы сделать фото более контрастным.
2. Нажмите Ctrl+J, чтобы дублировать фоновый слой дважды. Затем к верхнему из дубликатов добавьте эффект High Pass из меню фильтров.
3. Отрегулируйте радиус фильтра High Pass в пределах от 1-3 px. Этого будет достаточно для создания нужного эффекта. Больший радиус может привести к появлению нежелательного шума и ореола.
4. Измените режим смешивания для слоя с фильтром High Pass с обычного на Linear Light чтобы сделать фото резким. Повышенная резкость гарантирует получение точных мазков, особенно на волосах.
5. Теперь объедините слой с High Pass с дубликатом фонового слоя ниже, чтобы закрепить полученный эффект. Сделать это можно используя команду MergeVisible из меню слоев. Только для начала оставьте видимыми только те два слоя, которые собираетесь объединить. После этого перейдите в Filter> Stylize> Diffuse.
6. Измените режим размытия на анизотропный (Anisotropic) — это ключевой момент, который собственно и создает этот волшебный эффект рисунка.
7. Если внимательно посмотреть на результат, то можно заметить некрасивые швы, которые рассеиваются и повторяются. Но есть способ решить эту проблему.
8. Перейдите в меню Image> Image Rotation> 90 ° CW для поворота картинки и нажмите Ctrl+F (Cmd+F), чтобы повторить добавление диффузного фильтра.
9. Поверните изображение еще раз, и снова примените диффузный фильтр. Повторите этот шаг в третий раз, чтобы вернуть фотографию в правильное положение.
10. Диффузный фильтр отлично имитирует кисть, но в то же время немного размывает изображение. Перейдите Filter > Sharpen > Smart Sharpen, чтобы добавить четкости. Установите значение Threshold в районе 100, но используйте маленький радиус, чтобы не переборщить с обработкой.
11. Результат уже выглядит впечатляюще, но можно сделать его еще интереснее. Выберите Surface Blur из меню Filter > Blur и установите значения Радиуса около 20 а порога около 15 (как видите, при значении радиуса – 40 картинка сильно замыливается).Это создаст плоские участки и придаст фотографии еще более нарисованный вид.
12. Ну вот и все, наш Санта превратился из фотографии в гиперреалистичную картину. Издалека можно подумать, что это все еще фотография, но если присмотреться, то становятся заметны многочисленные мазки и переходы, свойственные живописи.
Надеемся, вам понравился этот урок так же, как и нам – пара простых манипуляций для достижения стильного эффекта. Это может пригодиться вам для раздела контактов на сайте, к примеру, когда нужно объединить разные фотографии чем-то общим, чтобы достичь гармонии.
Не забывайте, что советы и рекомендации можно немного менять в зависимости от исходного изображения. Удачи с вашими экспериментами!
Читайте также: