[Гайд] Рисовать без планшета. Пиксельная графика

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

 

Рисовать будем вот этого челика:

 

 

1. Правила. Ну, хотя бы чуть-чуть, но нужно отметить. Основным правилом рисования пикселя является плавность линий. Посмотрите следующий пример под спойлером. Первый вариант - это ведение линии не отжимая ЛКМ. Не надо так. Второй вариант – недостаточно плавные переходы. Если присмотреться то линия начинается с 3 рх, потом снова 3 рх, а потом резко становится 1 рх. В третьем варианте такого не происходит – там видно плавный переход: 4 рх, 3 рх, 2 рх. В таком случае если изображение отдалить оно будет выглядеть куда лучше. Если не хотите попасть под атаку истинных ценителей пиксель-арта это нужно соблюдать. С другой стороны, я знаю примеры крайне известных игр от серьёзных издателей, где спокойно на эти правила плюют с большой горы.

 

3 вариант - правильный

 

2. Холст и персонаж. Вообще, персонажи зависят от стилистики. Я люблю рисовать относительно реалистичные изображения с правильными пропорциями. Ничто не мешает сделать персонажа-карлика с шаровидной головой и уместить в 24х24 пикселя. Или вот этого вот петуча  я уместил в 32х32 рх. Часто практикуется рабочая область 64х64 рх. Но я рисую персонажей на холсте высотой 128 рх и буду показывать это на примере в дальнейшем. Для примера, больше размер холста = больше деталей и цветовых диапазонов:

 

пример (не мой)

 

3. Программы и инструменты. Вообще, существует множество всякого специального ПО для пиксель арта. Но… Нахрен его. Берём фотошоп, создаём холст 128х128 рх (для начала) и берём инструмент «Карандаш» толщиной 1 рх. Скажу сразу, что рисовать кистью не получится – нужен именно карандаш. Настроим «Ластик» – он тоже должен быть в режиме карандаша толщиной 1 рх. В инструменте «Заливка» не забываем убрать галочку со «Сглаживание».

 

Карандаш?

 

4. Что мы рисуем? Теперь определяемся с объектом. Если вы рисуете что-то маленькое в холсте 24х24 рх, то никаких предварительных работ вам не нужно – вы просто берёте и рисуете. При таких компактных размерах голова вряд ли будет иметь высоту больше 10 пикселей и деталей в ней будет соответственно мало. Если мы рисуем на холсте 128х128 рх, то здесь уже нужен скетч или что-то на подобие. Скетч можно нарисовать на бумаге, после чего отсканировать/сфотографировать и закинуть в фотошоп. Можно нарисовать непосредственно в фотошопе мышкой, отрисовывая основные части тела. А можно банально спереть у кого-нибудь силуэт. Для данного урока я воспользуюсь последним. Для художников есть специальный сервис http://www.posemaniacs.com/ с набором силуэтов и прорисовкой мышц. Это позволяет изучать анатомию.  Так, вот моя прорисовка мускулатуры на основании данного сайта:

 

Мускулатура. Челик хоть и голый, но половых органов в кадре нет

 

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

 

Вот этот подойдёт

 

6. Начало работы. Зарисовываем тень, чтобы не мешала, обрезаем всё лишнее, уменьшаем до 120 пикселей (делаем запас на всякий случай, вдруг надумаем нарисовать ему ирокез, верно?). Его закономерно размазывает из-за сглаживания, но нам это как бы пофиг. Если же вам необходимо будет увеличить или уменьшить размер изображения без сглаживания, нужно при выборе инструмента "Свободное трансформирование" изменить тип сглаживания на "по соседним".

 

К работе готовы

 

7. Контур. Создаём новый слой. Берём карандаш. Цвет чёрный. И начинаем обводить контуры, которые нам нужны.

 

Контур

 

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

 

Контур 2

 

9. Правила контуров. Теперь хочется поговорить о закраске и границах. Я, как и в предыдущем гайде по векторному рисованию, предлагаю вам придерживаться правила трёх тонов. Т. е. каждый элемент персонажа (например кожа) должен иметь два основных цвета и один цвет-тень. Но в данном случае у нас ещё есть контур, который является четвёртым цветом… Или нет? Рассмотрим на примере ноги Жанны, которую я нарисовал где-то пол года назад. Контур можно оформить тремя вариантами:

а) без контура.

нога

 

б) чёрный контур. тут всё понятно – оставляем наш набросок

нога?

 

в) выборочное контурирование. Суть в том, что каждый элемент должен иметь контур. Однако в данном случае контур будет не чёрный, а цвета темнее, чем тот, который с ним граничит. Таким образом, мы создаём границы для каждого элемента шириной 1 рх (не всегда), но они выглядят не грубо, а органично. Сложно описал, но думаю, вы поймёте, когда сравните изображения.

нога!

 

10. Заливка. Собсно начинаем закрашивать. Попутно пытаемся представить с какой стороны на нашего персонажа падает свет – делаем здесь всё светлее. В моём случае это правый верхний угол. Здесь тоже желательно соблюдать правила построения линий.  Но лично мне, как я написал в самом начале, слегка пофиг. Я не настолько упарываюсь в пиксель-арт что бы учитывать все мелочи.

 

Заливаем

 

11. Продолжаем зарисовку. Подходим к лицу. Скажу сразу, лицо при больших размерах холста рисовать сложно. Ещё сложнее изображать эмоции и направление головы. Если при холсте в 24х24рх и даже 48х48 рх можно рисовать глаза просто одной точкой (пикселем), то при больших размерах это уже два-четыре или даже больше пикселей, в зависимости от жанра. Поэтому намечаем места глаз в первую очередь и направление взгляда. Область носа должна быть чуть темнее. Все остальные цвета делаем методом проб и ошибок. Нарисовали. Не нравится? Отменили. Пытаемся заново. Я хотел сделать брюнета с бородкой. Получился Леонид. Только не голый спартанец, а вполне себе средневековый.

 

ЭТО СПАРТА!

 

12. Всё ещё зарисовываем. Дорисовываю правую руку, которую не было в изначальном эскизе. Силуэт беру с другой позы http://www.posemaniacs.com/ . Ноги я изначально нарисовал в сапогах без брони. Но потом передумал, т.к. полные латы и голые сапоги выглядят слегка глупо. Даю щит и красный плащик. Плащик и ремни на ноге в данном случае добавляют изображению деталей. Было бы неплохо добавить ещё деталей, но это как-нибудь в другой раз.

 

Лапка

 

13. Финальный штрих. Держи копьё, брат.  Обращаю внимание на пунктирную штриховку на древке. Этот метод можно использовать и для закрашивания брони. При уменьшении изображение в таком случае выглядит более естественно.

 

Копьё

 

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

 

Спасибо за внимание

Я не думаю, что следовать четким правилам рисования пиксель-арта не особо нужно, если офк не нужно соблюдать стилистику старых игр на денди т.д. Гайд годный

Kirukiru Amou сказал(а):↑

Я не думаю, что следовать четким правилам рисования пиксель-арта не особо нужно, если офк не нужно соблюдать стилистику старых игр на денди т.д. Гайд годный

Нажмите, чтобы раскрыть...

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

-D9- сказал(а):↑

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

Нажмите, чтобы раскрыть...

Всегда плохо писал сочинения Если займешся покадровой анимацией, то жди лютой бомбежки 

Kirukiru Amou сказал(а):↑

Всегда плохо писал сочинения Если займешся покадровой анимацией, то жди лютой бомбежки 

Нажмите, чтобы раскрыть...

Бомбёжку у других, если только   анимировать не сложно, просто скучно. да и если сравнивать с анимированием в векторе, то в пикселе куда веселей, имхо

 

 

 

 

-D9- сказал(а):↑

Бомбёжку у других, если только   анимировать не сложно, просто скучно. да и если сравнивать с анимированием в векторе, то в пикселе куда веселей, имхо

 

 

 

 

Нажмите, чтобы раскрыть...

Я про сложные движения на большое количество кадров. Анимацию в 2-3 кадра не так уж и сложно делать. Ты бы лучше представил анимацию в 24 кадра. Перересовывать каждый кадрый, это шок контент. Поначалу терпишь, а когда терпение заканчивается, начинается бомбежка. 

Kirukiru Amou сказал(а):↑

Я про сложные движения на большое количество кадров. Анимацию в 2-3 кадра не так уж и сложно делать. Ты бы лучше представил анимацию в 24 кадра. Перересовывать каждый кадрый, это шок контент. Поначалу терпишь, а когда терпение заканчивается, начинается бомбежка. 

Нажмите, чтобы раскрыть...

а нафига делать 24 кадра? большинство анимаций в пикселе рисуется в 4 кадра+- для каждой позы. т.е. поза стоя - 4 кадра. поза в атаке - 4 кадра,

 

например вот я рисовал две позы - спиной и передом. но по сути это два разных рисунка

 

 

на каждую по 2-4 анимации.

 

 

 

Чекни игру Dead Cells и да, иногда приходится делать такие долгие анимации. Я не так давно делал анимированные эмоуты для битсов одному стримеру на триче, позже скину.

Kirukiru Amou сказал(а):↑

Чекни игру Dead Cells и да, иногда приходится делать такие долгие анимации. Я не так давно делал анимированные эмоуты для битсов одному стримеру на триче, позже скину.

Нажмите, чтобы раскрыть...

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

-D9- сказал(а):↑

Нажмите, чтобы раскрыть...

TC, есть одна просьба оп рисовашкам, выслушаешь в ЛС?

saw_tooth сказал(а):↑

TC, есть одна просьба оп рисовашкам, выслушаешь в ЛС?

Нажмите, чтобы раскрыть...

та я ленивый. можешь написать канеш. всё-равно ничё не теряешь)

-D9- сказал(а):↑

та я ленивый. можешь написать канеш. всё-равно ничё не теряешь)

Нажмите, чтобы раскрыть...

Та просто описывать долго, не хотел что бы письмо в "утиль" ушло.

Щас растолкую более подробно.

saw_tooth сказал(а):↑

Та просто описывать долго, не хотел что бы письмо в "утиль" ушло.

Щас растолкую более подробно.

Нажмите, чтобы раскрыть...

тогда не утруждай себя. лучше сам попытайся покалякать чего-нибудь

Можешь скинуть ссыслку твою недавнюю тему про векторное рисование?

Kirigaya Kazuto - Kirito сказал(а):↑

Можешь скинуть ссыслку твою недавнюю тему про векторное рисование?

Нажмите, чтобы раскрыть...

держи, но там ничё великого

 

https://dota2.ru/forum/threads/risovat-anime-bez-plansheta.1218574/

-D9- сказал(а):↑

держи, но там ничё великого

 

https://dota2.ru/forum/threads/risovat-anime-bez-plansheta.1218574/

Нажмите, чтобы раскрыть...

Благодарю 

-D9- сказал(а):↑

тогда не утруждай себя. лучше сам попытайся покалякать чего-нибудь

Нажмите, чтобы раскрыть...

Мне тяжко даже лестницу под линейку нарисовать, а ты так издеваешься)

Отписал тебе в лс.

-D9- сказал(а):↑

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

Нажмите, чтобы раскрыть...

Я все прекрасно понимаю. Про 24 кадра образно сказал, офк для клиента плавненько все старался сделать. Кста, у меня тут проект в планах есть. Я еще не начинал искать художника и аниматора, но тут такая возможность подвернулась, если интересует отпиши в лс. Там подробнее все расскажу.

Вот бтв 48 кадров

Kirukiru Amou сказал(а):↑

Кста, у меня тут проект в планах есть.

Нажмите, чтобы раскрыть...

только не геймдев на добровольных началах

 

Kirukiru Amou сказал(а):↑

Вот бтв 48 кадров

Нажмите, чтобы раскрыть...

не анимировал бы радугу - было бы 12

-D9- сказал(а):↑

только не геймдев на добровольных началах

 

не анимировал бы радугу - было бы 12

Нажмите, чтобы раскрыть...

Без радуги никак, нужно ведь что-то было сделать для тир-5 эмоута  Геймдев  но не на добровольных началах 

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

Надеюсь, ты будешь писать гайды и дальше!

Интересный гайдец, возьму на заметку