Всем привет, меня зовут Егор. Сейчас я занимаюсь сольной разработкой игр. И так как я не являюсь профессиональным художником, для меня как никогда актуален вопрос: каким инструментом пользоваться для создания арта. Конечно, никто не отменял Asset Store и приобретение необходимых графических ассетов именно там, но не всегда можно с лёгкостью найти подходящий арт для проекта на таких площадках, и приходится создавать его самому.

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

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

Figma

Да, первым на очереди, внезапно, оказался любимый инструмент UX/UI-дизайнеров — Figma. Её я использовал как для создания UI-элементов, так и всего арта в своей игре. Так как Figma, в первую очередь, это редактор векторной графики, её, в каком-то смысле, можно назвать заменой Adobe Illustrator — самому популярному инструменту для создания “векторки”.

Так какие же плюсы и минусы я заметил в процессе использования?

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

Работать в редакторе можно прямо из вкладки браузера, что в целом удобно, но отсюда вытекают сразу два небольших минуса: необходимость стабильного интернет-соединения, что решается либо использованием Desktop-приложения, либо сохранением проекта в конце работы в формате .fig; необходимость следить за количеством “потребляемой” оперативной памяти. Тут совет простой — не плодите дубликаты и держите свои страницы “в чистоте”. По своему опыту могу сказать, что нужно очень постараться, чтобы загрузить figma-файл по максимуму.

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

Для меня самым большим плюсом стала возможность работать параллельно над UI-элементами и in-game артом. Не надо резать скрины из игры и разрабатывать на них UI. Так как весь арт для сцены уже находится в Figma, можно сразу собрать любой экран и продолжить создавать UI-элементы поверх него. Также здесь легко работать с референсами, ведь их можно просто расположить рядом с фреймом, на котором работаете.

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

Во время работы в Figma я столкнулся с проблемой: мои компоненты "ломались" при их масштабировании.

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

Даже при всех своих плюсах, на мой взгляд, Figma — это не совсем подходящий инструмент для создания векторной графики. Тем не менее, я бы рекомендовал использовать её для небольших игр с малым количеством арта. Например, я создал в ней информационную архитектуру, UI и весь in-game арт для своей игры, которую сейчас разрабатываю, и делюсь этим и многим другим в своём блоге.

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

Aseprite

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

А пока вернёмся к редактору. Сразу отмечу, что он платный — на официальном сайте около 20 $, но я рекомендую проверить его региональную цену в Steam, возможно, получится сэкономить пару долларов. За этот единоразовый платёж вы получаете полный доступ ко всему функционалу редактора, никаких подписок и тарифных планов (оказывается, так можно, да-да, Adobe, я на тебя смотрю).

Здесь вы можете создавать как отдельные спрайты, так и целые тайл-мапы, и даже анимации. Можно работать как со слоями, так и с группами объектов. Экспортировать можно как весь холст, так и конкретный выделенный объект.

Гайды по пользованию без проблем гуглятся, а в самом редакторе во вкладке Help можно найти как документацию, так и подборку туториалов прямо на официальном сайте.

При создании пиксель-арта я бы посоветовал начинать с объектов с простыми формами и постепенно переходить к спрайтам с более сложной геометрией. Также для каждого элемента используйте не более трёх смежных цветов. В целом, всё это типичные рекомендации, и они применимы для любого стиля, который вы начинаете изучать. Лучше всего, если вы никогда до этого не рисовали, просто начните перерисовывать понравившиеся вам несложные спрайты, чтобы “набить руку” и привыкнуть к редактору.

В итоге, Aseprite — это, наверное, самый удобный инструмент для создания пиксель-арта, который я пробовал. Единственное, что может отпугнуть потенциального пользователя, — это визуальное оформление самого редактора. Хоть оно и подчёркивает направление его использования, всё же не всем может понравиться вглядываться в пикселизованные шрифты. Хотя зачем вы тогда собрались создавать пиксель-арт, если вам такое не нравится?

Adobe Photoshop

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

Говорить о его возможностях, думаю, бессмысленно. Это один из самых популярных графических редакторов в мире, и, соответственно, комьюнити у него огромное, а обучающих материалов более чем предостаточно. Единственным недостатком, как непрофессиональный художник, я бы назвал его подписочную модель распространения, учитывая, что пользуюсь им я не так часто (нет, даже не думайте, я не буду рекомендовать вам пользоваться “карибским ВПН”).

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

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

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

Бонус

Напоследок хотел бы поделиться ещё двумя вспомогательными инструментами:

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

Цветовые схемы — они позволяют подбирать комплементарные и смежные цвета для создания более гармоничного арта. В сети можно найти большое количество сайтов с подобным инструментарием. Лично я пользуюсь Paletton, к нему я уже привык, хотя результат мне не всегда нравится: часто алгоритм подсовывает “грязные” цвета, и приходится их корректировать вручную.

В конце хотелось бы только упомянуть, что всё вышеописанное — это мой личный опыт, и я надеюсь, что он окажется полезным. А вообще, инструмент для создания 2D-арта может быть любым (хоть Paint), главное, чтобы вам самим было удобно с ним работать.

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