Ассеты для игры в стиле flat дизайн. ДЕНЬ С ВАН ГОГОМ

Что-то я так подумала...когда-нибудь руки доберутся до создания платформера, видимо. По мотивам жизни великих художников. Будь у меня в детстве такая альтернатива Марио, я бы воспользовалась.

Натолкнул меня на это ассет в стиле flat дизайна, который обязательно нужно было сделать.

Начинаем с идеи: художники, собирающие краски и отбивающиеся от (пока не придумала) кого-то, путешествуя по своим картинам.

Эскиз:

И как он будет выглядеть в качестве фона игры:

У меня планируется 7-8 смен фона, значит в Adobe Illustrator создаю документ с такими параметрами (обязательно пиксели, обязательно RGB)

Сразу в проекте настраиваю окна, которые мне понадобятся. Это окно "слои" и "обработка контуров".

Чтобы отрисовать правильную смену фона включаю линейки. Хотки Ctrl+R

Чтобы создать направляющие (вертикальные в моём случае), зажимаю левой кнопкой мыши вертикальную линейку и тяну, отпуская только там, где мне нужно поставить направляющую. Передвинуть её потом будет проблематично.

Рисовать буду сначала простыми фигурами. Чтобы открыть в панели инструментов больше простых фигур, нажимаю правую кнопку мыши.

У заливки и обводки есть три режима. Пользоваться буду всеми тремя. Чтобы поменять цвет нажимаю либо на квадрат заливки, либо на обводку.

Чтобы нарисованные фигуры двигать, пользуемся выделением - стрелочка в белом контуре, для выделения всего объекта, для перемещения одной точки в контуре объекта (вершины), использую белую стрелочку.

Теперь в окне со слоями создам новый слой (иконка слева от корзины) и перетащу туда слой с землёй, оставив направляющие на отдельном слое.

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

Теперь создадим слой с небом. Здесь мне понадобится градиент. Как только я

выберу этот тип заливки, появится окно настройки градиента.

Мне нужен точечный. Так я смогу настроить сложный градиент максимально точно, задавая цвет каждой точке (предварительно создав её, нажав на нужное место внутри фигуры).

И по готовности в окне "слои" заблокирую небо, чтобы оно не съезжало, когда я буду создавать и двигать другие слои.

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

Выбираю инструмент "многоугольник" и нажимаю левой кнопкой мыши в любое место на холсте.Программа спрашивает, сколько сторон должно быть в многоугольнике и какого он должен быть размера. Мне нужно 3 стороны и радиус 150.

Далее двигаю треугольник в нужное место и корректирую его форму при помощи точек. Теперь объединю прямоугольник и треугольник, чтобы получить одну фигуру для дома.

В открывшемся окне выбираю самую левую операцию

Добавлю немного художественного эффекта и немного размою дома.

Сначала их выделю. Если небо и пол были заблокированы ранее, они не выделятся (что нам и нужно).

И немного размываем по Гауссу.

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

Теперь выберу перо и поставлю на контуре эллипса новую точку. Если на перо нажать ПКМ, увидим несколько режимов. Перо+ это создать точку, перо- это точку удалить.

И после того, как точку добавили, её можно двигать, сменив инструмент на "выделение точек".

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

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

Не забываем сохранять проект. Очень важно!

Теперь снова заходим в "Файл", ищем "Параметры документов". В открывшемся окне выбраю "редактировать монтажные области" и рисую новую область почти квадратного размера (её размер можно в любой момент поправить в этом окне).

Теперь можно создавать предметы, с которыми будет взаимодействовать персонаж. Для удобства готовые предметы группируем, выделив все фигуры, нажав правую кнопку мыши и выбрав "сгруппировать".

Если нужно придать более сложную форму какому-то элементу, можно воспользоваться "марионеточной трансформацией". Этот инструмент позволяет делать точки привязки и двигать их, деформируя всю фигуру.

И ещё один полезный инструмент "Ширина". Если нажать на него ПКМ, появится меню с целой кучей других инструментов по трансформации, типа скручивания, морщин, раздувания. Настроить инструмент можно двойным левым кликом мышки.

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

В итоге лист с ассетами выглядит примерно так:

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

Чтобы однотипные объекты располагались ровно, можно воспользоваться дополнительным окном "Выравнивание".

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

В итоге получаем 3 монтажных области: фон, ассеты и персонаж. Вполне неплохо для одного раза.