Создание изометрического пиксельного персонажа
Мы будем создавать персонажа-человечка, так как это основа изометрической пиксельной графики. Отталкиваясь от нее, можно задавать пропорции для большинства других элементов, которые вы будете создавать позже. Прежде, чем приступить к созданию персонажа, мы должны рассмотреть некоторые принципы изометрической пиксельной графики.
1. Линии в пиксельной графике
Эти линии являются основой для наиболее распространенного изометрического стиля в пиксельной графике. Стиля, который и мы будем использовать:
Этот стиль создается расположением двух пикселей на одном горизонтальном уровне и отступом следующего уровня на один пиксель вниз. Такие линии выглядят относительно плавными и используются для создания ромбов:
Большинство линий с подобной структурой выглядят довольно неплохо. Но чем больше становится наклон, тем более неровными они выглядят:
Для контраста вот примеры линий с непропорциональной структурой:
Они угловатые и не очень красивые. Старайтесь не использовать их.
2. Объем
Наш персонаж не будет соответствовать всем правилам изометрической проекции, поэтому давайте сначала создадим простой куб, чтобы начать работу с объемом.
Создайте в Adobe Photoshop новый файл размером 400 на 400 пикселей. Приступим к работе и создадим одну линию 2:1:
Я предпочитаю использовать цвет 5% серого вместо чистого черного, чтобы потом можно было добавить тени с помощью черного цвета и низкой прозрачности. Также можно изменить любой цвет по отдельности с помощью «Волшебной палочки».
Вот несколько способов, с помощью которых вы можете создать линию:
- С помощью инструмента «Линия», установив режим «Пиксели», толщину в 1 пиксель и убрав флажок с опции «Сглаживание». При рисовании линии следите, чтобы в окне с подсказкой, где указывается текущее значение угла наклона, отображалось 26,6 градусов. Инструмент «Линия» подойдет, если вам нужно создать линии приблизительно, и точность углов наклона при этом не важна;
- Создать прямоугольное выделение размером 40 на 20 пикселей, затем с помощью инструмента «Перо» (размер 1 пиксель) кликнуть один раз в левом нижнем углу, а потом, удерживая клавишу Shift, кликнуть в верхнем правом углу. Photoshop автоматически проведет линию между двумя точками. Попрактиковавшись какое-то время, вы сможете проводить правильные линии и без прямоугольного выделения;
- Нарисовать два пикселя рядом с помощью инструмент «Перо», а затем выделить их и, удерживая клавишу Alt, переместить выделение с помощью клавиш со стрелками или мыши (в дальнейшем - Alt-смещение) таким образом, чтобы два набора пикселей соприкасались углами. Затем вы можете выделить уже два набора пикселей и продолжить рисовать линию.
Мы получили первую линию. Давайте выделим ее и «Alt-сместим», или скопируем, вставим выделение и сдвинем слой вниз. Затем переверните слой по горизонтали (Редактирование> Трансформирование контура> Отразить по горизонтали).
Давайте объединим две линии:
Затем снова выделите и «Alt-сместите» их, переверните по вертикали и объедините, чтобы завершить наш ромб:
Теперь пришло время добавить "третье измерение". «Alt-сместите» или скопируйте ромб и разместите его копию на 44 пикселя выше оригинала:
Совет: Если при смещении объекта с помощью стрелки удерживать Shift, то вместо одного пикселя он будет смещен на 10 пикселей.
Чтобы куб выглядел аккуратнее, давайте сгладим углы, удалив крайние левый и правый пиксели ромбов. После этого добавьте вертикальные стороны куба:
Теперь удалите задние стороны нижнего ромба. И приступайте к добавлению цветов. Выберите любой цвет светлого оттенка и залейте им верхний ромб:
Теперь увеличьте на 10% яркость этого цвета, чтобы нарисовать светлые углы вдоль переднего края цветного ромба. Из-за способа, с помощью которого мы создавали наш куб, эти светлые линии выглядят лучше, если мы разместим их на один пиксель выше черных линий (вместо того, чтобы заменить черные линии светлыми):
Теперь мы удалим эти черные линии, расположенные ниже светлых. Сочетание Shift-Перо работает также с инструментом «Ластик». Для него должен быть установлен режим – «Карандаш», размер - 1 пиксель.
С помощью «Пипетки» выберите цвет из верхнего ромба (это можно сделать, удерживая клавишу Alt и кликнув в нужном месте при выбранном инструменте «Перо» или «Заливка»). Используйте этот цвет, чтобы зарисовать вертикальную линию в середине куба. Затем уменьшите яркость этого цвета на 15% и залейте левую грань куба. Уменьшите яркость еще на 10% и правую грань куба:
Наш куб завершен. При масштабе 100% он должен выглядеть четким, с относительно гладкими ребрами.
3. Добавим несколько персонажей
Я создаю персонажей с тонкими телами и немного большими головами. Это позволяет использовать прямые линии.
Я рекомендую начать с глаз. Если строго следовать правилам изометрии, то один глаз должен быть чуть ниже на экране, чем другой, но при небольших масштабах не страшно, если мы пренебрежем этим "оптическим обманом", чтобы сделать наших персонажей более приятными на вид и эстетичными.
Мы создаем небольшого человечка, чтобы в будущем можно было добавить на изображение различные предметы обстановки. Кроме этого создавать маленького человечка намного проще, чем большого.
Создадим новый слой. Чтобы сделать глаза, мы просто используем два пикселя, и один пустой пиксель между ними. Отступив один пиксель от одного глаза, проведите вертикальную линию:
Теперь добавьте новый слой и нарисуйте под глазами горизонтальную линию в два пикселя - это будет рот. Переместите его вниз с помощью клавиш со стрелками. Затем объедините два верхних слоя. Аналогично вы можете создать подбородок, это тоже будет горизонтальная линия, только немного длиннее:
Повторите то же самое, чтобы создать волосы и верхнюю часть головы, а затем скруглите углы. У вас должно получиться что-то наподобие этого:
Теперь оставьте справа от правого глаза один чистый пиксель, а после него добавьте бакенбард (который также будет очерчивать ухо) и еще несколько пикселей, которые очертят линию волос. После этого еще через один пустой пиксель от бакенбарда проведите линию, которая обозначит затылок. И в конце замкните одним пикселем линию головы:
Добавьте один пиксель для верхней части уха и измените форму головы, если вам не нравится эта; голова обычно уже в нижней части:
Проведите линию от подбородка вниз - это будет грудь. Шея будет начинаться там, где заканчивается ухо. Нарисуйте пару пикселей вертикально вниз, а затем еще пару пикселей по диагонали, чтобы было видно сразу плечо человечка:
От того места, где заканчивается плечо, проведите вертикальную линию в 12 пикселей вниз, чтобы создать край руки. Второй край должен располагаться через два пикселя от него. Соедините линии парой пикселей, чтобы создать ладонь, а чуть выше точки, в которой заканчивается рука, проведите линию 2:1, которая будет представлять собой талию.
Затем завершите линию груди, и вы получили всю верхнюю часть тела. У человечка должна быть еще одна рука, которая сейчас не видна. Это должно выглядеть нормально, так как она находится позади груди.
Теперь наш персонаж должен выглядеть вот так:
От нижней части тела мы добавим еще несколько вертикальных линий. Человечек будет смотреться хорошо, если между подошвами и талией будет 12 пикселей. Ноги создаются довольно просто, только одна нога будет расположена чуть ниже, чем другая:
Для кожи я использовал цвет #FFCCA5. Подобрать цвета для остальных элементов должно быть намного проще. После этого вы должны определить длину рукава рубашки, положение шеи и добавления темной линии, которая отделит рубашку от кожи. Смотрится лучше, если большинство внутренних линий светлее, чем черный. Это позволит сделать контраст всех линий не слишком жестким и придаст элементам объем:
Можно добавить световые эффекты почти для всех цветных областей. Избегайте применения для теней слишком большого количества оттенков или градиентов; нескольких пикселей (с разницей в яркости от 10% до 25%) будет достаточно, чтобы сделать элементы более красочными.
Если вы хотите добавить изюминку для цвета, который уже имеет 100% яркости, попробуйте уменьшить его насыщенность. А в некоторых случаях (например, для волос), вы можете изменить оттенок, чтобы задать два разных тона.
Можно использовать много различных вариантов для волос:
Теперь нужно поместить оба элемента вместе и оценить, насколько органично они выглядят:
Если вы хотите экспортировать эту работу, формат .png идеально для этого подойдет.