Пиксель арт

различные уроки по рисованию для самых популярных программ

Сообщение Пиксель арт
» 15 авг 2016, 19:27

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

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

Возрождение пиксель арт'а открыло дорогу разработчиком вроде нас, ведь теперь играть в игры выполненные в старом добром "пикселе" стало даже чуточку модно. Грубо говоря искусство нашло своего ценителя, разработчику же пиксель арт дарует лёгкость в освоении, быстроту в создании и низкую себестоимость.
Однако пиксель арт как и любое искусство требует определённых знаний и навыков, и в очередной раз сидя перед монитором и рисуя, я сожалею о том что спал на уроках ИЗО. Но не будем о грустном, понятие формы и перспективы приходит со временем к любому кто этого хочет.

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

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

Итак для начала поговорим о контуре:
Контур или "обводка" одна из нужных вещей в пиксель арте, НО не является обязательной. Суть контура в том чтобы выделить объект на светлом фоне т.е. если в вашей игре используется преимущественно светлые тона, то стоит обратить на неё внимание, так же контур хорошо смотрится на спрайтах с большим разрешением (по меркам пиксель арта конечно). Рассмотрим небольшой пример:
 
ИзображениеИзображение

Как видите картинка слева выглядит более объёмной и отлично смотрится на светлом фоне, когда как картинка справа выглядит более плоской и размытой. А вот пример того где контур по сути и не нужен:
 
Изображение

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

Палитра:
Выбор палитры очень важен, поскольку именно с его помощью вы сможете выделять объекты, придавать им объёмность, а так же непосредственно влиять на стилистику вашей игры. И тут есть один очень важный по моему мнению нюанс, а именно: старайтесь использовать всего одну палитру для всей вашей игры, большое количество разных оттенков одного и того же цвета не очень характерна для игр выполненных в стилистике pixel art. Ведь если вспомнить к примеру игры на NES, палитра там была ограниченна, и художники зачастую использовали один и тот же цвет для разных объектов. Так же хотел бы поговорить о создании самой палитры: при создании палитры придерживайтесь этих правил:

-при затемнении увеличивается насыщенность
-при осветлении уменьшается насыщенность
-при затемнении оттенок становится более синим
-при осветлении оттенок становится более жёлтым

Вот наглядный пример того как неправильно подобранной палитрой можно загубить рисунок:
 
ИзображениеИзображение

Перенасыщение цветов очень распространённая ошибка и как видите сами изображение справа просто режет глаза и выглядит крайне не естественно.
Для оптимального выбора палитры существует определённый метод приведённый всё из того же учебника выше. Далее будет копи-паста с комментариями.
 Выдержка из учебника
Метод Ксенодрогена

Метод Ксенодрогена, названный в честь его изобретателя — это метод выбора точного цвета вашей рампы(рампа, это группа цветов, чьи оттенки смежны), без (слишком большой) ошибки. Этот метод не абсолютное для соблюдения правило, но если вы имеете чувство цвета, оно позволит вам создавать красивые рампы. Этот метод базируется на сложном в создании, но лёгком в использовании правиле: «В рампе оттенок, насыщенность и цвет, меняются в одном направлении. Их изменения (вторая производная, математически говоря), также меняются в одном направлении». Мы уже обсудили первое выражение, и мы даже говорили в каком направлении оттенок и насыщенность должны меняться. Второе выражение позволит нам определить количество этих изменений: в рампе, каждое изменение компонента (оттенок, насыщенность и яркость) должно быть больше и больше, или меньше в течение рампы. Представьте 5-цветную палитру, на которые мы будем ссылаться как A, B, C, D и E. Я могу например менять насыщенность на 1 между A и B, и на 5 между B и C, снова на 5 между C и D, и на 12 между D и E. С другой стороны было бы неправильно делать что-то вроде 2 3 2 1 4, что могло бы привести к своего рода эффекту «йо-йо». Подводя итог, я могу менять скорость с которой я меняю оттенок или насыщенность, но я должен менять скорость в том же направлении.
Изображение
Позвольте взять зелёную рампу для примера: здесь цвет уменьшается по нарастающей, насыщенность увеличивается всё меньше и меньше, и яркость увеличивается всё больше и больше. Обратите внимание, что как описано в предыдущем параграфе, мы можем обратить отношения между яркостью и насыщенностью, для более мягкого (более пастельного) рендеринга: на этой рампе, это наиболее яркие цвета, которые более насыщенные. Последняя деталь метода Ксенодрогена: чем больше цветов на вашей рампе, тем больше вы должны делать мелких изменений. Эта зелёная рампа имеет 5 цветов, поэтому мы делаем маленькие изменения. Если бы у нас было только 3 цвета, здесь были бы вариации в диапазоне 15-20 единиц.


На этом пожалуй всё. Буду рад вашим комментариям, ссылкам и примерам. :hi:
Аватара пользователя

Игродел
Сообщений: 943
Я тут с 12 окт 2013
Репутация 250 [ ? ]

Сообщение Пиксель арт
» 19 авг 2016, 11:45

классная статья! А есть готовые собранные палитры? И что лучше использовать для рисования?
 Мой проект: God of Dungeon (жанр: roguelike)
Аватара пользователя

Участник
Сообщений: 406
Я тут с 23 фев 2014
Репутация 8 [ ? ]

Сообщение Пиксель арт
» 19 авг 2016, 15:28

Cruze, Советую Aseprite, платный но своих денег стоит. В нём есть предустановленные палитры.Изображение

Бесплатная версия без возможности сохранения, но можешь ознакомиться тут
Аватара пользователя

Игродел
Сообщений: 943
Я тут с 12 окт 2013
Репутация 250 [ ? ]

Сообщение Пиксель арт
» 15 ноя 2017, 23:09

Mukai, а asesprite экспортирует рисунки в пнг?
Аватара пользователя

Участник
Сообщений: 1270
Я тут с 24 авг 2017
Откуда: Краснодар, Россия, Земля, Солнечная система, Млечный путь
Двиг: Construct2
Лицензия: Personal
Репутация 89 [ ? ]

Сообщение Пиксель арт
» 15 ноя 2017, 23:21

WarThunder, Конечно. Для пикселя только png формат.
Список всех форматов:
Изображение
Аватара пользователя

Игродел
Сообщений: 943
Я тут с 12 окт 2013
Репутация 250 [ ? ]

Сообщение Пиксель арт
» 16 ноя 2017, 04:10

Деньги любят тишину.
Аватара пользователя

Участник
Сообщений: 281
Я тут с 16 авг 2017
Репутация 21 [ ? ]

Сообщение Пиксель арт
» 16 ноя 2017, 13:49

Apollo14, Да, хорошие рампы.
Аватара пользователя

Игродел
Сообщений: 943
Я тут с 12 окт 2013
Репутация 250 [ ? ]

Сообщение Пиксель арт
» 16 ноя 2017, 20:34

Сейчас скачал aseprite. Я просто в ужасе от того, что paint так отстаёт. А ведь я на этом куске майкрософта рисовал :blush: .
Советую всем! Тем более цена - 300 с чем-то! Там такие эффекты есть, что просто обалдеть!
Аватара пользователя

Участник
Сообщений: 1270
Я тут с 24 авг 2017
Откуда: Краснодар, Россия, Земля, Солнечная система, Млечный путь
Двиг: Construct2
Лицензия: Personal
Репутация 89 [ ? ]

Сообщение Пиксель арт
» 16 ноя 2017, 20:42

WarThunder писал(а):А ведь я на этом куске майкрософта рисовал .

Ну хотя бы не во внутреннем редакторе с2.
Мне удобнее всего фотошоп и всем советую.
Изображение
Аватара пользователя

Игродел
Сообщений: 488
Я тут с 13 апр 2017
Двиг: Unity
Лицензия: Personal
Репутация 204 [ ? ]

Сообщение Пиксель арт
» 16 ноя 2017, 20:59

Stalin, а в PS удобно в пикселях фигачить? Можешь описать? Заранее спасибо.
Аватара пользователя

Участник
Сообщений: 1270
Я тут с 24 авг 2017
Откуда: Краснодар, Россия, Земля, Солнечная система, Млечный путь
Двиг: Construct2
Лицензия: Personal
Репутация 89 [ ? ]



Вернуться в Уроки по рисованию 2d, 3d графики

Сейчас эту тему просматривают

Зарегистрированные пользователи: нет зарегистрированных пользователей

Наверх