Какой графический редактор выбрать, если не умеешь рисовать?
Всем привет, меня зовут Егор. Сейчас я занимаюсь сольной разработкой игр. И так как я не являюсь профессиональным художником, для меня как никогда актуален вопрос: каким инструментом пользоваться для создания арта. Конечно, никто не отменял Asset Store и приобретение необходимых графических ассетов именно там, но не всегда можно с лёгкостью найти подходящий арт для проекта на таких площадках, и приходится создавать его самому.
Поэтому я постоянно нахожусь в поиске наиболее удобных редакторов для создания графики. Заранее предупреждаю, что речь пойдет о создании именно 2D-арта, и мы не будем касаться темы нейросетей, так как у меня не было опыта работы с ними.
В статье я расскажу об опыте использования редакторов для создания векторной графики, растровой графики и пиксель-арта. Моя цель — поделиться своим опытом с другими разработчиками, поэтому надеюсь, что этот материал будет полезен.
Figma
Да, первым на очереди, внезапно, оказался любимый инструмент UX/UI-дизайнеров — Figma. Её я использовал как для создания UI-элементов, так и всего арта в своей игре. Так как Figma, в первую очередь, это редактор векторной графики, её, в каком-то смысле, можно назвать заменой Adobe Illustrator — самому популярному инструменту для создания «векторки».
Так какие же плюсы и минусы я заметил в процессе использования?
Очевидным плюсом Figma является то, что она распространяется бесплатно. Точнее будет сказать, что в бесплатной версии есть ограничения по количеству пользователей с доступом для редактирования (для команд — это два пользователя) и количеству создаваемых страниц в одном файле (до трёх страниц), но это более чем достаточно, если вы работаете один или в небольшой команде.
Работать в редакторе можно прямо из вкладки браузера, что в целом удобно, но отсюда вытекают сразу два небольших минуса: необходимость стабильного интернет-соединения, что решается либо использованием Desktop-приложения, либо сохранением проекта в конце работы в формате .fig; необходимость следить за количеством «потребляемой» оперативной памяти. Тут совет простой — не плодите дубликаты и держите свои страницы «в чистоте». По своему опыту могу сказать, что нужно очень постараться, чтобы загрузить figma-файл по максимуму.
У Figma очень большое комьюнити. Пользователи этого инструмента создали огромное количество обучающего материала, в том числе и на русском языке, так что проблем с освоением редактора возникнуть не должно.
Для меня самым большим плюсом стала возможность работать параллельно над UI-элементами и in-game артом. Не надо резать скрины из игры и разрабатывать на них UI. Так как весь арт для сцены уже находится в Figma, можно сразу собрать любой экран и продолжить создавать UI-элементы поверх него. Также здесь легко работать с референсами, ведь их можно просто расположить рядом с фреймом, на котором работаете.
Данное изображение было создано исключительно в образовательный целя, автор не пытался кого-то оскорбить, или задеть чьи-то чувства.
В целом, даже с помощью одних только кругов и прямоугольников можно создать абсолютно любой арт. Совет простой: начинайте с простых форм, постепенно усложняя геометрию, а также обязательно делайте несколько итераций на пути к желаемому результату.
Во время работы в Figma я столкнулся с проблемой: мои компоненты «ломались» при их масштабировании.
Слева — оригинальный объект, справа — пример «поломки» объекта при ненастроенных Constraints.
Как оказалось, нужно было настраивать Constraints для нормального масштабирования объектов. Это довольно муторный процесс, на который уходило немало времени. Поэтому в какой-то момент я решил приспособиться и сначала определять габариты объекта, а уже потом работать в заданных рамках.
Даже при всех своих плюсах, на мой взгляд, Figma — это не совсем подходящий инструмент для создания векторной графики. Тем не менее, я бы рекомендовал использовать её для небольших игр с малым количеством арта. Например, я создал в ней информационную архитектуру, UI и весь in-game арт для своей игры, которую сейчас разрабатываю, и делюсь этим и многим другим в своём блоге.
Отрисованный для игры арт, экраны и информационная архитектура.
Резюмируя, могу посоветовать всё же изучить Figma хотя бы на базовом уровне, даже если вы не планируете создавать в ней графику. Сейчас её используют многие команды разработки, так что лишним навык владения этим редактором точно не будет.
Aseprite
Поиски визуального стиля для своей игры отняли у меня много сил и времени. Подробней об этом и других своих факапах я писал в своей предыдущей статье. Но однажды в своих поисках я свернул в сторону пиксель-арта. Попробовав несколько редакторов, я остановился на Aseprite. Да, в конечном итоге я сделал выбор в пользу другого визуального стиля, но меня всё ещё привлекает пиксель-арт, поэтому я продолжаю его изучать в свободное время и надеюсь, что этот навык мне пригодится в дальнейшем.
А пока вернёмся к редактору. Сразу отмечу, что он платный — на официальном сайте около 20 $, но я рекомендую проверить его региональную цену в Steam, возможно, получится сэкономить пару долларов. За этот единоразовый платёж вы получаете полный доступ ко всему функционалу редактора, никаких подписок и тарифных планов (оказывается, так можно, да-да, Adobe, я на тебя смотрю).
Здесь вы можете создавать как отдельные спрайты, так и целые тайл-мапы, и даже анимации. Можно работать как со слоями, так и с группами объектов. Экспортировать можно как весь холст, так и конкретный выделенный объект.
Гайды по пользованию без проблем гуглятся, а в самом редакторе во вкладке Help можно найти как документацию, так и подборку туториалов прямо на официальном сайте.
При создании пиксель-арта я бы посоветовал начинать с объектов с простыми формами и постепенно переходить к спрайтам с более сложной геометрией. Также для каждого элемента используйте не более трёх смежных цветов. В целом, всё это типичные рекомендации, и они применимы для любого стиля, который вы начинаете изучать. Лучше всего, если вы никогда до этого не рисовали, просто начните перерисовывать понравившиеся вам несложные спрайты, чтобы «набить руку» и привыкнуть к редактору.
Интерфейс редактора и мои попытки в пиксель-арт
В итоге, Aseprite — это, наверное, самый удобный инструмент для создания пиксель-арта, который я пробовал. Единственное, что может отпугнуть потенциального пользователя, — это визуальное оформление самого редактора. Хоть оно и подчёркивает направление его использования, всё же не всем может понравиться вглядываться в пикселизованные шрифты. Хотя зачем вы тогда собрались создавать пиксель-арт, если вам такое не нравится?
Adobe Photoshop
Тут без какой-либо интриги: пока что я не нашёл более удобного редактора для создания растровой графики, чем его величество Photoshop. Вообще, у меня к нему такое же отношение, как и к условному банковскому приложению на смартфоне: в современном мире хотя бы на базовом уровне им должен уметь пользоваться каждый.
Говорить о его возможностях, думаю, бессмысленно. Это один из самых популярных графических редакторов в мире, и, соответственно, комьюнити у него огромное, а обучающих материалов более чем предостаточно. Единственным недостатком, как непрофессиональный художник, я бы назвал его подписочную модель распространения, учитывая, что пользуюсь им я не так часто (нет, даже не думайте, я не буду рекомендовать вам пользоваться «карибским ВПН»).
Сейчас я использую Photoshop только для отрисовки концепт-артов и хотел бы поделиться методом, которым часто пользуюсь при отрисовке растровой графики, особенно когда дело касается человеческой анатомии.
Пример самого простого способа создания арта в Photoshop.
На примере выше вы можете увидеть, что для отрисовки нужной мне позы человека я нахожу в сети необходимый арт или фото, после чего накладываю его на отдельный слой и снижаю прозрачность примерно до 90%. Теперь осталось мысленно вернуться в младшую школу и обвести нужные нам элементы (и да, этот способ абсолютно легитимен, если вы рисуете не очень хорошо или вовсе не умеете). Таким способом можно собирать целые сцены.
Концепт-арт моего ретро-шутера находящегося на этапе прототипа, создан по алгоритму описанному выше.
Лично я не стал бы использовать ассеты, отрисованные таким методом, в игре. Всё-таки следует либо длительно и регулярно учиться создавать качественный арт самому, либо изменить визуальный стиль на тот, который лучше всего у вас получается, или же воспользоваться помощью профессионала. Тут всё зависит лишь от ваших временных и финансовых ограничений.
Бонус
Напоследок хотел бы поделиться ещё двумя вспомогательными инструментами:
PureRef — это приложение, которое позволяет удобно работать с референсами. На сцену в окне можно просто набросать нужные изображения, настроить размер окна под себя, а затем закрепить инструмент поверх всех окон на рабочем столе. Приложение распространяется бесплатно, но на официальном сайте при скачивании есть возможность отблагодарить разработчиков донатом.
Пример работы над артом с помощью PureRef.
Цветовые схемы — они позволяют подбирать комплементарные и смежные цвета для создания более гармоничного арта. В сети можно найти большое количество сайтов с подобным инструментарием. Лично я пользуюсь Paletton, к нему я уже привык, хотя результат мне не всегда нравится: часто алгоритм подсовывает «грязные» цвета, и приходится их корректировать вручную.
Пример сайта по работе с цветовыми схемами.
/
В конце хотелось бы только упомянуть, что всё вышеописанное — это мой личный опыт, и я надеюсь, что он окажется полезным. А вообще, инструмент для создания 2D-арта может быть любым (хоть Paint), главное, чтобы вам самим было удобно с ним работать.
Обязательно пишите свои мысли насчёт всех этих редакторов, если доводилось с ними работать, в комментариях, а также предлагайте свои варианты.
