Мы делали ремастер
целый год

Рисуем камень в изометрии — подробный гайд Статьи редакции

Описание процесса рисования в стиле пиксель-арта.

Художник M3rØj в блоге разработчика Давида Пеше опубликовал гайд, в котором подробно описал, как нарисовать камень в стиле пиксель-арта. Также он рассказал, в чём особенность изометрической перспективы, которая обычно используется в играх. Мы выбрали из текста главное.

Слева — изометрическая перспектива, справа — линейная перспектива

Изометрический вид — это проекция, при которой у всех 3D-объектов одинаковый масштаб независимо от их местоположения и удалённости от камеры. Изометрия популярна в пиксель-арте, потому что она позволяет легко дублировать объект в сцене, но при этом не подгонять его под изменения в перспективе.

Обычно изометрия в играх отличается от истинной изометрической перспективы, где угол между всеми парами осей равен 120°. Чтобы в пиксель-арте получались красивые диагонали, используются другие значения — 116,565°, 116,565°, 126,87°. В геймдев-сообществе это называется изометрической перспективой 2:1.

Слева — настоящая изометрия, справа — изометрия 2:1. В версии слева красная линия выглядит недостаточно ровной. Результат справа заметно лучше

Предварительная настройка

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

Photoshop. Здесь нет преднастройки для создания изометрической сетки, поэтому придётся самостоятельно найти её в сети и добавить в рабочую область. Также попробуйте создать кисти, которые подходят для использования в 2:1.

Aseprite.Здесь тоже нет сетки. Чтобы её создать, нужно выбрать инструмент Line, зажать Shift и провести линию под нужным углом.

Affinity Photo. Здесь можно создать идеальную сетку 2:1 — с определённым размером и количеством секций.

Используйте инструмент Pixel и клавишу Shift для рисования линий

Следующий шаг — собрать референсы. Вы должны изучить строение объекта, который планируете нарисовать.

Рисование

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

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

Для начала нарисуйте пустой бокс

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

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

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

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

Добавление цвета

Есть несколько способов подобрать цвета. Самый простой — взять палитру из референса. Также её можно подобрать на сайте lospec.com. Или же можно начать с нуля и выбрать свои цвета.

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

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

Сделайте изначальный эскиз полупрозрачным и наложите поверх рисунка, чтобы соблюдать изначальную форму

Определите угол освещения

При помощи правильного освещения можно создать правдоподобную сцену. В изометрии источник света можно поставить в любом месте, но для правдоподобности стоит разместить его сверху-сбоку — это создаст объём и контраст между гранями.

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

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

Добавление деталей

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

Можно добавить текстуру 
Вы можете использовать дополнительные цвета, чтобы подчеркнуть контраст и придать фигурам больший объём
Можно зайти ещё дальше и добавить трещины с растительностью

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

0
17 комментариев
Популярные
По порядку
Написать комментарий...
Сергей Латышев

Краткая версия:

Ответить
61
Развернуть ветку
Cino

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

Ответить
5
Развернуть ветку
Edward Hawk

Ну так-то, если подумать, в ракетостроении все основано на школьном учебнике по физике за 7-ой класс - строение веществ, сила тяжести, взаимодействие тел. Детализация, это как говорится - частности.

Ответить
2
Развернуть ветку

Комментарий удален

Развернуть ветку
Nick Swift

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

Ответить
0
Развернуть ветку
Evgeny

Можно ещё попробовать тогда картинку камня найти и уменьшить расширение))

Ответить
0
Развернуть ветку
QweSteR

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

Надеюсь местным неучам эта информация пойдёт на пользу. Ибо для некоторых индивидов и Ведьмак1 изометрия.

Так то настоящая изометрия (с её углами) редко используется. Есть ещё триметрическая и диметрическая проекция. Так все сразу не вспомню. Кстати, в Fallout 1\2 вроде триметрическая проекция.

Ответить
1
Развернуть ветку
Boruh Zackelberger
Ответить
8
Развернуть ветку
hope42morrow

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

Ответить
3
Развернуть ветку
pirozhok

Поясни для непосвещённых

Ответить
2
Развернуть ветку
hope42morrow

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

Ответить
1
Развернуть ветку
Владислав Одинцов

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

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

Ответить
2
Развернуть ветку
Vitaliy Bakal

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

Ответить
0
Развернуть ветку
Stanislav Mikhailovskyi

Вы разговариваете с копипастой.

Ответить
0
Развернуть ветку
Роман Т

Я думал раз и все

Ответить
0
Развернуть ветку
Государственный инструмент

Превосходно! Пишите еще!

Ответить
0
Развернуть ветку
ДЕЛА ИГРОДЕЛА

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

Ответить
0
Развернуть ветку
Читать все 17 комментариев
null