Пиксельные персонажи: D0 bf d0 b8 d0 ba d1 81 d0 b5 d0 bb d1 8c d0 bd d1 8b d0 b5 d0 bf d0 b5 d1 80 d1 81 d0 be d0 bd d0 b0 d0 b6 d0 b8: стоковые векторные изображения, иллюстрации

Как рисовать пиксельных персонажей. Руководство по созданию пиксельной графики для игр. Что такое Pixel Art

What You»ll Be Creating

Если вы наслаждались в детстве игрой в Лего (или если вы продолжили играть в него, став взрослым), изометрический пиксель арт может заинтересовать вас; она может быть довольно техническим, больше похож на строительство, чем на иллюстрирование, и так как в нем нет перспективы, вы можете передвигать элементы по вашему изометрическому окружению как вам угодно.

Мы будем создавать персонажа, так как это логичная отправная точка для изометрического пиксель арта, потому что это поможет определить пропорции для большинства других элементов, которые мы можем продолжить создавать. Однако мы должны пройти некоторые основы изометрического пиксель арта перед тем, как приступать к персонажу; если вы конечно не хотите просто сделать персонажа и больше не возвращаться к стилю, в этом случае вы можете перепрыгнуть к пункту 3. Давайте добавим какого-нибудь персонажа.

1. Линии пиксель арта

Эти линии- это фундамент самого распространенного (и веселого) изометрического стиля в пиксель арте, стиля, который мы будем использовать:

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

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

Вот для контраста несколько нерегулярно структурированных линий:

Очень неровные и не очень красивые. Избегайте их.

2. Объемы.

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

Создайте новый New файл в Adobe Photoshop с разрешением 400 х 400 пикселей .

Я люблю открывать дополнительное окно для одного и того же файла (Window > Arrange > New Window…) , для того, чтобы работать с одним в масштабе примерно 600%, а другое оставляю в масштабе 100% для проверки, как движется работа. Использование пиксельной сетки — ваше дело, но я иногда нахожу это больше мешающим, чем полезным.

Итак, давайте увеличим масштаб и создадим линии 2:1:

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

Вот несколько способов создать линию:

1. Используя инструмент Line (Линия) cо снятыми галочками pixels , antialias и шириной 1 пиксель . Во время рисования всплывающая подсказка информирует нас об угле наклона линии, мы возьмем, скажем, 26,6 градусов . Однако я не нахожу инструмент Line очень надежным, он может создавать грязные линии, если угол выбран не совсем верно.
2. Создав прямоугольное выделение 40 х 20 пикселей, затем нарисовав с помощью инструмента Pencil (всегда размером в 1 пиксель ) единственный пиксель в левом нижнем углу, затем удерживая Shift, нарисовать второй пиксель в верхнем правом углу. Photoshop автоматически создаст линию между двумя точками. При наличии некоторого опыта можно создавать эти линии правильно (или почти правильно, а затем подправлять) без прямоугольного выделения.
3. Нарисовав два пикселя спина к спине инструментом Pencil , выбрав их, и удерживая Alt , переместить выделенное клавишами стрелок или мышью (далее будем называть это alt-перетягивание), затем переместить пиксели клавишами стрелок или мышью так, чтобы эти две группы пикселей встретились в углах. Затем выделяя эти две группы пикселей и повторяя указанное выше, удлинять линию дальше.

Мы получили свою первую линию. Давайте выделим ее и alt-перетянем , или по другому — скопируем выделение, вставим его и объединим слои обратно в один. Затем перевернем ее по горизонтали (Edit > Transform > Flip Horizontal) . Я так часто использую эту функцию, что настроил сочетание клавиш для нее!

И давайте объединим обе линии:

Затем снова выделим и alt-перетянем их, перевернем горизонтально и соединим вместе, чтобы закончить наш квадрат:

Пришло время добавить «третье измерение». Alt-перетяните или скопируйте квадрат и поместите копию на 44 пикселя выше оригинала.

Подсказка : Если вы нажмете shift и удерживая ее нажатой, нажмете клавишу со стрелкой, она переместит ваше выделение на 10 пикселей в этом направлении вместо одного.

Чтобы получить более аккуратный куб, давайте сгладим углы, удалив самый левый и самый правый пиксели квадратов. Сделав это, добавьте недостающие вертикальные линии для завершения куба:

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

теперь увеличьте яркость этого цвета на 10% (я рекомендую использовать ползунки HSB на цветовой панели), чтобы нарисовать более светлые углы вдоль передней части нашего цветного квадрата. Из-за способа, которым мы слегка обрезали наш куб, эти более светлые линии будут смотреться лучше на один пиксель выше черных линий (вместо того, чтобы заменять черные линии на светлые), вот так:

Теперь мы должны удалить эти черные линии под более светлыми. Трюк с Shift-Pencil для создания черных линий также работает и со стирательной резинкой (которая должна быть настроена на обычный инструмент Eraser , режим pencil и размером в 1 пиксель .

Выберите цвет из верхнего квадрата с помощью Eyedropper (который вы можете вызвать быстрее, удерживая Alt при выбранном инструменте Pencil или Fill) и используйте его, чтобы покрыть вертикальную линию в середине куба. Затем уменьшите яркость этого цвета на 15% и залейте левую грань куба новым цветом. Уменьшите яркость еще на 10% для правой грани куба:

Наш куб готов. Он должен выглядеть чистым и относительно гладким при 100% увеличении. Мы можем двигаться дальше.

3. Давайте добавим какого-нибудь персонажа .

Выбор стиля персонажа может быть очень личным, не бойтесь менять пропорции элементов по своему усмотрению. Я склонен делать худые тела и немного большие головы. Худые тела определенно помогают сохранять линии простыми/прямыми.

Имеет смысл начать с глаз. Если бы мы строго следовали изометрическим углам, тогда один глаз должен был бы находиться ниже на экране, чем другой, но в маленьком масштабе, который мы здесь используем, нет проблемы с «обманом», для того, чтобы сделать лица наших персонажей более эстетически привлекательными, это также сделает их более четкими, несмотря на их размер.

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

Давайте создадим новый слой. Чтобы создать глаза, мы просто возьмем два пикселя; по одному на каждый глаз, с одним пустым пикселем между ними. И, на расстоянии одного пикселя от одного из глаз, нарисуем вертикальную линию.

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

Повторите то же самое с линией роста волос и с линией макушки головы, затем скруглите углы, и у вас должно получиться что-то вроде этого:

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

Добавьте пиксель для верхнего края уха и измените форму головы, если хотите; головы обычно уже возле шеи:

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

Теперь, там, где плечо заканчивается, создайте вертикальную линию из 12 пикселей, чтобы нарисовать один край руки и другой край, он должен быть на расстоянии в два пикселя. Соедините линии внизу несколькими пикселями, чтобы сформировать руку/кулак (на самом деле здесь нет детальных рук, но обычно это не проблема) и сразу сверху, где рука заканчивается, создайте линию 2:1, которая будет талией, затем закончите линию груди и вы получите полностью отрисованную верхнюю часть тела. Одна рука осталась невидимой, но это должно выглядеть нормально, как если бы она была просто скрыта от нас грудью.

Должно получиться похоже на это:

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

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

Теперь мы добавим цвет. Красивый тон кожи не всегда легко подобрать, поэтому если вы хотите использовать такой же цвет, как и я, его шестнадцатиричный код #FFCCA5 . Найти цвета для остальных элементов не должно составить труда. После этого вы должны определиться с длиной рукава, положением и стилем ворота рубашки, и добавить более темную линию, чтобы отделить рубашку от кожи. Я люблю делать большинство внутренних линий светлее черного (особенно когда цвета разных деталей практически на одном уровне, такие как переходы от рубашки к коже или к штанам), тогда контраст от всех линий становится не таким заметным и разные объемы становятся боле очевидными.

Вы можете добавить небольшой световой эффект практически на каждую цветовую область. Избегайте слишком густых теней или использования градиентов для затенения; несколько касаний более темной или более светлой (10-25%) тенью достаточно, чтобы заставить элементы выглядеть выпуклыми и перестать быть плоскими. Если вы хотите добавить более яркое место для цвета, который уже имеет 100% яркость, попробуйте уменьшить его насыщенность. А в некоторых случаях (таких как волосы), хорошей идеей будет также изменять оттенок между тенями.

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

Если вы продолжите создавать еще персонажей, небольшие вариации, такие, как стиль рубашки, длина рукава, длина штанин, аксессуары, одежда и цвета кожи помогут создать хорошее разнообразие.

Теперь, все что нам осталось сделать, это объединить оба наших элемента вместе и оценить, как они выглядят в одном окружении:

Если вы хотите экспортировать, идеальный формат — PNG.

Вот и все, вы сделали это!

Я надеюсь, что это руководство не чрезмерно, моей идеей было дать вам столько советов по Photoshop и эстетике стиля, сколько я смогу. Мы продолжим расширять наш мир изометрического пиксель арта; здания, машины, интерьеры, пейзажи. Все это возможно и весело создавать, хотя, пожалуй, и нелегко.

В этом уроке мы научимся технике превращения фотографии человека в пиксельного персонажа аркадных игр начала 90-х.

Джеймс Мэй — он же Smudgethis — разработал этот стиль в 2011 для первого хита дабстеп-рок группы Nero — Me & You . Он создал анимацию, в которой двое участников группы были показаны героями старой аркады. Игра выглядела как 16-битный сайд скроллер в жанре beat-em-up, похожий на Double Dragon , но намного лучшего качества, чем восьмибитная ретро классика, как Super Mario Bros .

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

В этом уроке Джеймс покажет, как создать персонажа, основанного на фотографии, используя простою цветовую палитру и инструмент Карандаш (Pencil).

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

Когда всё будет готово, почитайте урок по 16-битной анимации в After Effects , где Джеймс покажет, как перенести персонажа в AE, заставить его двигаться и применить эффекты ретро игр.

Шаг 1

Откройте файлы Animation Guide (16 bit). psd и 18888111. jpg (или выбранный вами снимок), чтобы использовать в качестве основы персонажа. Фотография в профиль в полный рост отлично подойдет, а также поможет получить цветовые палитры и стиль 16-битного рисунка.

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

Шаг 2

При помощи инструмента Прямоугольное выделение (Rectangular Marquee tool) выделите голову человека, скопируйте (Ctrl + C ) и вставьте (Ctrl + V ) ее в Animation Guide (16 bit). psd .

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

Шаг 3

Создайте новый слой и нарисуйте обводку черным Карандашом (Pencil) толщиной в один пиксель, используя каркас как основу.

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

Шаг 4

При помощи инструмента Пипетка (Eyedropper tool), выделите самый темный участок кожи и закрасьте полученным цветом маленький участок. Сделайте это еще три раза, получив четырехцветную палитру для оттенков кожи.

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

Лучше всего хранить разные элементы работы на разных слоях, так как это позволяет легко применять их для других персонажей. Это особенно полезно при рисовании «плохих парней», так как многие 16-битные игры использовали похожие лица. Например, один бандит может быть одет в красную футболку и держать нож, а другой будет выглядеть идентично, только в синей футболке и с пистолетом.

Шаг 5

Повторите процесс для остальных частей тела, затеняя кожу и одежду и ориентируясь на исходный снимок. Не забывайте пользоваться Пипеткой (Eyedropper tool), сначала создав цветовую палитру, так как это позволит создать фиксированный набор цветов, которые отлично выглядят и вписываются в 16-битный стиль.

Шаг 6

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

Шаг 7

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

Шаг 8

Чтобы проверить, все ли правильно нарисовано, откройте панель Анимация (Animation) в Photoshop и убедитесь, что первый кадр активен. Можно добавить новые кадры, включать или отключать каждый слой, получив свою анимацию, но самый быстрый способ — использовать команду Создать кадры из слоев (Make Frames From Layers) во всплывающем меню панели (верхний правый угол).

Первый слой — это пустой фон, поэтому выберите его и кликните по иконке мусорного бака (внизу), чтобы удалить.

Часть 8: Наконец-то рисуем спрайт

Итак, теперь, когда вы прочитали предыдущие главы, провели собственные наблюдения и сделали выводы о том, как устроены спрайты и всё такое (если же вы не делали ничего из этого списка, тогда наверстайте упущенное, ибо это облегчит вашу жизнь, когда придёт время рисовать собственные спрайты)… В общем-то, это время пришло. Мы разберём несколько стилей и для начала возьмём классический и наиболее широко распространённый в ролевых играх стиль Final Fantasy 2. Даже если вам неинтересно делать маленькие спрайты 16х16 и вы хотите научиться создавать только большие, всё равно вам будет полезно прочесть этот текст до конца… Занимаясь маленькими проектами, можно научиться многим полезным вещам, которые пригодятся и при создании крупноразмерных шедевров. Учитесь в любой ситуации. От вступительных слов перейдём к спрайтам FF2:

Первое, что следует знать о FF2-спрайтах: в них используется особая разметка… Над текстом вы видите квадрат 16х16… Вдоль левой стороны идут цветные вспомогательные линии. В спрайте FF2 талии отведено три пиксела (нижняя оранжевая линия), торс — часть туловища от шеи и до талии — также занимает три пиксела (жёлтая линия), голова получает целых 10 пикселов (верхняя оранжевая линия). В разговорах о спрайтах знающие люди часто упоминают аббревиатуру «SD»… Термин SD расшифровывается как «Super Deformed» («Сильно Деформированный») и используется в аниме для описания сцен, в которых персонаж, прежде нормально нарисованный, уменьшен и похож на куклу, и его голова такого же размера, как и остальное тело… Этот подход использовался в FF2 и во многих ранних RPG, потому что почти все они были созданы в Японии, а SD — это приём как раз из тамошних аниме, к тому же, подобный стиль хорош для выражения эмоций персонажа. На Западе мы склоняемся к «реалистичным» персонажам с маленькими головами и пропорциональными телами. Однако в прежние дни правдоподобностью приходилось жертвовать, ведь на отведенном пространстве 16х16 реалистичная голова занимала бы два пиксела в ширину и четыре в высоту… Может, это и пропорционально, зато смотрится плохо — получаются безликие персонажи, а лицо в данном случае очень важно, так как игрок идентифицирует себя скорее по лицу, чем по другим признакам. Большие головы были так широко распространены потому, что на них есть место для изображения чувств… Персонажи с крупными головами могут кивать, мотать головой из стороны в сторону, удивленно моргать, расширять глаза от ужаса, зажмуриваться, зевать, кричать и т.д. Они становятся «живыми», а значит, более интересными… На маленькькой «реалистичной» голове вы можете лишь изменять цвета и тени всего у шести пикселов, и от этого мало толку. Пропорциональными стоит рисовать персонажей на больших спрайтах (как, например, в игре Phantasy Star IV). В общем, вы поняли, почему SD-стиль продержался так долго, хех… Впрочем, это лишь мои домыслы, я могу и ошибаться.

Начнём с базовой головы. Это — пиксел за пикселом — контур головы FF2-шного спрайта… Многие художники, когда им нужно много спрайтов в одном стиле, рисуют «модель» типичного персонажа, которую затем видоизменяют для каждого героя. Это и впрямь хорошая идея, если придётся делать кучу персонажей (например, городских NPC)… Только убедитесь, что в каждом спрайте достаточно индивидуальности, избегайте простой смены цветов, как в Mortal Combat, например, хех… Итак, базовая голова: два пиксела между глазами, они сами в высоту тоже два пиксела, есть однопиксельный пробел между ними и краями головы, такой же пробел до челюсти. Вместе выглядит пропорционально. Причём занято ещё не всё отведённое место… Куча пространства оставлена под волосы, так как они тоже важны, хех… Туловища спрайтов 16х16 в высоту занимают всего шесть пикселов и отличаются друг от друга только цветами да парой-другой пикселов. Поэтому для лучшего визуального опознавания персонажи получают сильно разнящиеся причёски. Волосы могут быть всевозможными — короткими, длинными, с пробором сбоку или по центру, завязанными в хвостик, заплетёнными в косички, собранными в пучок, могут вообще отсутствовать или даже торчать шипами и т.д… Это хороший способ дифференциации персонажей, поэтому волосы получают много места на рисунке. Если закрасить спрайты чёрным цветом, то есть оставить силуэты персонажей, более-менее достоверно различать их можно будет только по форме причёски. Двигаемся дальше — заметили, что челюсть опускается до конца оранжевой линии?

Теперь добавим корпус… Я нарисовал один кулак впереди, а другой сзади. В старых играх спрайты постоянно переключались с кадра, где левая нога впереди, на кадр, где впереди правая, и наоборот… Это был способ избавиться от третьего «стоячего» кадра «ноги вместе, руки по швам». Я взял кадр, в котором персонаж находится в середине своего шага — хочется отметить некоторые тонкости текущей позы. Во-первых, я не разделил руку и корпус. Можно было бы (кстати, получилось бы подобие некой жилетки), но я не стал так делать… Пускай это будет обычный персонаж в штанах и футболке. Как вы помните, жёлтая линия определяет расстояние от низа челюсти до талии, поэтому у вас будет два пиксела для грудной клетки, ещё пиксел займет линия талии (кроме случаев с платьем или незаправленной футболкой и т.п.)… Я упомянул о линии, так как, посмотрите, плечи зашли за оранжевый разделитель. Это потому, что наш взгляд на мир не является ни прямым фронтальным видом, ни видом сверху. У нас вид «сверху вниз» («top down»; этот термин часто используется при описании игр типа Final Fantasy). Вы смотрите сверху вниз под углом примерно 45 градусов, поэтому видны передние и верхние части строений (угол в 45 градусов обычно используется в изометрических играх, например в Diablo, где шаблоны расположены по диагонали, вместо обычного расположения сверху вниз. Многие люди не понимают, что значит «изометрия» (вам это понятие встречалось на уроках черчения, хех), поэтому при обсуждении стиля FF и т.п. говорят «сверху вниз» вместо «45 градусов»… Сконфужены? Хехех…). Так как у нас вид сверху вниз, мы можем видеть верхнюю часть плеч персонажа немного «позади» его головы… Представьте обычного человека, на которого вы смотрите сверху вниз. Чем больше высота, с который вы на него смотрите, тем большую зону плеч вы видите и тем дальше они заходят за голову. Очень многие делают ошибку, рисуя персонажей во фронтальном виде спереди для карт с видом сверху вниз… Если честно, насчёт видов можно особенно не заморачиваться… Сойдёт и так… Но в нынешние времена следует уделять больше внимания таким моментам. В былые дни славы NES разработчики так сильно извращались с перспективой, что сегодня это выглядит смешно. В то время это не имело значения из-за общей недоразвитости графики, людей больше интересовал геймплэй. Будет время, зацените карту подземелья в игре Zelda для NES-приставки… Комната сделана с учётом вида прямо сверху, герой Линк нарисован в виде сверху вниз, а статуи и прочий антураж исполнены во фронтальном виде, хех…

Теперь появились ноги. Опять же, они как бы в положении шагания, а не в обычной позиции… Хочу показать пару моментов… Я не нарисовал чёрную линию вдоль низа ступни, ибо мне нужен нижний ряд пикселов для изображения ноги, а ваш глаз сам дорисовывает иллюзорную линию под ногой от левого чёрного пиксела до правого (вы уже знаете об этом, если читали предыдущую главу… если нет, то прочитайте её). Правая нога чувачка (та, что впереди) вниз идёт не прямо, а как бы под углом… Это для анимации. Если бы ноги шли прямо вниз, когда они впереди тела, и были бы ровно вверху, когда они позади, то всё вместе выглядело бы так, будто персонаж топает поочерёдно левой и правой ногой вместо ходьбы. Искривляя немного ногу, мы придаём ей более естественный вид при шагании. Нога, оставшаяся позади, — это просто ряд пикселов. Сейчас она похожа на какой-то обрубок… Мы покажем, что это нога сзади, когда займёмся цветами. Также заметьте, что талия — НЕ прямая, она скруглена, и ноги заходят в жёлтый разделитель, соединяясь с ней. Это тоже из-за вида сверху вниз. Горизонтальная линия талии является грубой ошибкой… Из-за этого персонаж становится «жёстким» и как бы картонным на вид. Небольшое изгибание линии придаёт объём всему контуру, как будто мы смотрим на цилиндр (представьте трёхмерное изображение).

Наконец-то у него появились волосы. На них вы, вероятно, потратите большую часть времени… Один пиксел может испортить или улучшить причёску, и, пожалуй, вы будете постоянно жонглировать пикселами, пытаясь получить хорошие очертания. У нашего человечка волосы зачёсаны набок. Я добавил недостающий пиксел наверху для изображения пробора, просто ради примера, хехе… Заметьте, что его волосы не пересекают лицо сплошной чёрной линией… Будь линия сплошной, голова и волосы разделялись бы слишком сильно (и смотрелись бы примерно как корпус и ноги), поэтому стоит использовать разделением цветом. Я добавил немного чёрного под частями волос, которые свободно спадают, так как я хотел показать, что они именно нависают, а не прилизаны гелем или ещё чем. Основная линия волос проходит так же далеко от глаз, как и челюсть, имеется один разделительный ряд пикселов между ними. Это не обязательно, так как у разных персонажей будут различные причёски, это всего лишь пример, так, для начала. Вам наверняка придётся поработать над волосами основным цветом и чёрным одновременно, чтобы выяснить, где для разделения не нужны чёрные пикселы… Ну а я уже нарисовал свой миллион спрайтов, у меня получается собирать их мысленно, хехех… У этого паренька волосы идут прямо до верха спрайта, у остальных может быть по-другому. Например, у невысоких людей или у детей, а также у лысых, поскольку сама голова находится на растоянии один-два пиксела от волос. Конечно, когда рисуются дети или коротышки, потребуется экспериментировать с пропорциями и, например, отвести не шесть, а лишь четыре пиксела на тело.

Я заполнил спрайт сплошными цветами (без теней). Рассмотрите его волосы, футболку и ботинки. Я сделал причёску красно-коричневой, чтобы выделить лоб справа, а так как с той стороны под волосами нет чёрного, кажется, что эти пряди ближе к голове, чем вихор с другой стороны. Также я оставил пустой пиксел там, где чёрная линия прерывается из-за пробора… Если бы я поставил там точку того же цвета, что и волосы, казалось бы, что на макушке торчит хохолок… Чёрный пиксел в этом месте делал бы причёску слишком приглаженной, и только пустота создаёт эффект отдельных прядей. Один пиксел может внести существенную разницу в восприятие спрайта. Его футболка похожа на безрукавку… Чтобы сделать из неё жилетку, можно добавить чёрный контур, а чтобы превратить её в обычную футболку, нужно поставить белый пиксел на плече рядом с остальной белой массой. Этот единственный пиксел образует «рукавчик» на руке. Для длинных рукавов мне нужно закрасить белым всю руку, кроме последнего пиксела. Позже я покажу кучу подобных фишек.

Теперь добавим оттенки цвета и получим готовый спрайт. Когда вы наносите тени, старайтесь делать так, чтобы свет падал из одной точки… Сейчас источник света находится справа вверху, поэтому тени появились на левой и нижних частях спрайта. В массах очень популярен такой ненапряжный способ: левая и правая стороны затеняются, средняя же часть оставляется светлой… Получается, что источник света расположен прямо по центру. В принципе, это сносно, но спрайт становится немного скучноватым, ибо у него нет «права и лева», есть просто «центр»… Трудно объяснить, наверное, дело в том, что симметричные спрайты менее интересны… С затенением на одной стороне у спрайта появляются вполне определённые право и лево. Тем не менее, нет строгого правила, гласящего, насколько тёмной должна быть тень. Подбирайте, пока не будет смотреться хорошо. Правда, стоит помнить о некоторых моментах… Если у вас яркие источники света (например, действие происходит в середине дня, персонаж стоит у огня и т.п.), тени будут очень тёмными, сильно контрастирующими с обычными цветами. Если свет тусклый (внутри дома, в ночное время и т.п), контраста будет меньше. Я не хочу сказать, что вам обязательно будет нужно разное освещение на спрайтах в зависимости от местоположения, просто имейте в виду, какие эффекты затенения могут быть. Запомните еще приём — сощурьте глаза и взгляните на спрайт: если невозможно отличить светлый оттенок от тёмного, возможно, для них вам нужно больше контраста. Зачем наносить эти тени, если разница незаметна? Это особенно проявляется при использовании жёлтого цвета… Бывает трудно заметить разницу, если чуть добавить тусклости в некотором месте. Лицо, важнейшая часть персонажа, показывает чувства и обычно не сильно контрастно остальной части спрайта… Если контрастность велика, спрайт развалится на цветные куски, что раздражает глаз. Впрочем, при рисовании подобных вещей нет закономерности. Оставляйте то, что выглядит хорошо. В некоторых играх лица были одного цвета, и поэтому детали (глаза, хех) хорошо выделялись. Я сделал кожу нашего спрайта сильно контрастной, и это немного смущает. Рассмотрим нижнюю часть. Нога сзади полностью тёмная, и вы не можете видеть ступню. Нижний черный контур помогает задвинуть её назад ещё больше… Эта линия вполне могла быть тёмно-коричневой, тогда казалось бы, что он поднимает ногу. Ближняя нога ОБЯЗАНА получить больше света, чтобы она выглядела как нога, выставленная перед телом. Его ботинок отделен лишь цветом, также посмотрите на его руки… Дабы его рука выглядела ближней к нам, был добавлен лишь один пиксел тени… Чем больше тени на чём-то, тем дальше оно от нас… Я затенил тёмным цветом всю поверхность другой руки, чтобы сделать её отдалёной. Тем не менее, на кулаке лежит меньше тени, поэтому кажется что остальная рука позади него, и это хорошо. Как я уже говорил, один пиксел может изменить многое, и сейчас мы в этом убедимся:

Вы, наверное, думаете «Что за…?» На первый взгляд, все эти спрайты похожи между собой… Но у них есть различия в один пиксел… Посмотрите на передний кулак. И я покажу, что может сделать одна жалкая точка… Базовый кулак в первой картинке — это просто круг, без угловых пикселов. В результате он выглядит эдаким деликатным кулачком, как у человека с маленькими руками. Вы не можете хорошо описать эти кулаки, как их ни крути — не изменятся. Во втором случае имеется угловой пиксел слева внизу… Теперь кулак как будто прижимается к ноге. Быть может, парень пробирается бродом, или карабкается по камням, или ещё что, это всё из-за направленности кулака вниз… В третьем спрайте угловой пиксел слева вверху. Теперь он указывает на лицо, кстати, пальцем, а не локтём, ибо нижний правый угол скруглён. Получается, что он показывает: «Хто, я?» Четвёртый спрайт имеет пиксел в правом верхнем углу, и движение руки показывает: «Ну, попробуй достать меня!»… Локтя не видно, и пальцы немного направлены к голове. Как бы делает апперкот от себя… или проклинает игрока, хех. У последнего спрайта пиксел внизу справа, и это похоже на локоть, ибо это его естественное положение (в третьем спрайте вы не можете принять тот пиксел за локоть, ибо было бы очень странно видеть локоть именно там, поэтому наш мозг принимает его за пальцы)… Теперь кажется, что он делает апперкот, направленный к себе. Может быть, это начало движения «удар дракона» или ещё чего, хехех. А казалось бы, всего лишь ОДИН пиксел.

Здесь я работал двумя пикселами… В первом случае получилась плоская сторона, направленная внутрь. Два пиксела сделали кулак гораздо более плоским, как будто он кого-то шлёпает им… Ну, похоже, будто он сильно сжал кулак. В первом спрайте кулак прижат внутрь, и выглядит это вполне нормально. Но представьте себе, что он держит что-то похожее на вазу — хочет показать всем свою силу. И поэтому перемещает пикселы вверх… Теперь плоская сторона наверху, как будто балансирует на ней горшком или лампой. В третьем случае плоские стороны находятся по бокам, что выглядит скажем… не очень хорошо. Хых… единственный способ объяснить такое положение кулака, это наличие у него на руке чего-то вроде бронированной квадратной рукавицы, это можно было бы потом показать цветом… У последнего плоская часть находится внизу, он мог бы играть в баскетбол этой рукой или бить кого-то. А самое интересное — что это всего лишь ДВА пиксела, хехе… Теперь попробуем тремя:

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

Давайте изучим руку, отведенную назад. На первом спрайте у неё нет угловых пикселов, и она похожа на щупальце или ещё что-то подобное… Будто руку расслабили, как-то так… Болтается там, как хвост какой-то. На второй картинке кулак направлен к корпусу, как будто персонаж напряг мускулы и сделал эдакий полукруг из руки. У третьего спрайта пиксел поставлен снаружи, из-за чего рука кажется отнесенной чуть в сторону, в отличие от предыдущего образа, где рука ощущалась ближе к телу. Мужичок на втором спрайте похож на крутого парня, фланирующего туда-сюда, а на третьем — на бегуна, у которого руки находятся в соответствующем положении. У персонажа на последнем спрайте имеется плоская линия внизу кулака, будто он опять играет в баскетбол, или у него пистолет в руке, или это часть брони, или у него просто большой кулак, и т.д… Взгляните на секунду ещё на два спрайта:

Парень слева шустр и быстр, и его руки не так нагружены тяжестью кулаков… Чувак справа более мощен, так как у него увесистые квадратные кулаки. Теперь вы должны понимать смысл моего выражения «Один пиксел может многое изменить»… Вот это и есть самое интересное для меня при работе с подобного рода маленькими спрайтами. Жонглируйте пикселами, чтобы понять, как изменится выражение лица, поза или движение персонажа лишь из-за одного или двух пикселов. Пара пикселов может создать фею или — с равным успехом — огра. Эти несколько точек разницы делают ваши спрайты интереснее и вдыхают в них жизнь. Поэтому, начав с базовой «модели», потом вносите в неё поправки, чтобы в результате получить другое визуальное восприятие персонажа. Для примера я экспериментировал только с кулаками, вы же можете работать единичными пикселами и над другими частями, особенно над выражением лица. Пробуйте, выбирайте, что будет лучше всего смотреться на спрайте. Практикуйтесь, хех… Практикуйтесь много и как следует, скоро этот навык станет естественным.

Итак, у нас есть базовый спрайт персонажа, и если наш герой не парализован и обладает разумом, то ему хочется двигаться и совершать при этом какие-то действия…. Он может просто шагать по городу куда глаза глядят, повторяя: «Добро пожаловать в (город такой-то)!», хех. Значит, нам нужен второй кадр для шагания… Осуществляется это легко. Слева наш прежний спрайт, а в среднем спрайте я взял кусок до конца желтой линии и перевернул в горизонтальной плоскости. Видите, как просто? Конечно, возникла проблема с перевёрнутым освещением, ибо получилось, что солнце перепрыгнуло с одного края неба на другой. Это, пожалуй, не очень хорошо, и поэтому мы подправим цвета теней, чтобы освещение было такое же, как и в первом кадре. У нас теперь есть два кадра для этого малого, и мы можем увидеть его анимированным:

Это простая анимация ходьбы из двух кадров. Если вы строгаете маленькие спрайты для маленького же разрешения, то двух кадров может быть вполне достаточно для достижения нужного эффекта. В ранних Final Fantasies (на Геймбое) персонажи постоянно переключались между двумя своими кадрами, даже когда они стояли. Скажем, вы такого не хотите… Вы желаете, чтобы, когда игрок не нажимает клавиш, персонаж прекращал анимацию. Ну, вы можете останавливать персонажи после прекращения движения в положении с одной ногой впереди или сзади. Если они при этом не выглядят напряжёнными — это нормально. Но вдруг вам потребуются прямостоящие персонажи?

Чтобы получить этот кадр, я просто переделал один из шагающих, сведя ноги вместе и прижав руки по швам. Руки будут выглядеть более расслабленными, если придать им «выпуклость»… Если бы остались три вертикальных пиксела, он был бы похож на солдата, стоящего по стойке «смирно» в строю. При создании стоячего кадра для этих маленьких спрайтов 16х16 возникает проблема двойного столбца… Придётся вам выбрать, где пикселы будут разделять ноги. Я сделал одинаковые тени на ногах (те два горизонтальных пиксела), чтобы ноги казались находящимися прямо под корпусом. Если бы на левой ноге не было ни одного светлого пиксела, казалось бы, что она чуть позади правой. А если бы их было много, нога опять выдвинулась бы, но уже вперёд. Теперь у нас есть «стоячий» кадр, можно его использовать, когда игрок ничего не делает. Есть также другая польза от этого кадра… Можно добавить его в анимацию ходьбы:

Часть 3. Градиент — это зло

Часть 8. Наконец-то рисуем спрайт

В этом уроке вы научитесь рисовать и анимировать персонажей в технике Pixel Art. Для этого вам понадобится только программа Adobe Photoshop. В итоге получится GIF с бегущим космонавтом.

Программа: Adobe Photoshop Сложность: новички, средний уровень Понадобится времени: 30 мин – час

I. Настройка документа и инструментов

Шаг 1

Выберите Pencil (карандаш) на панели инструментов – это будет основной инструмент для нашего урока. В настройках выберите тип Hard Round brush, и установите остальные значения так же как на картинке. Наша цель – сделать перо карандаша максимально резким.

Шаг 2

В настройках Eraser Tool (ластик) выберите режим Pencil Mode, и установите остальные значения как показано на картинке.

Шаг 3

Включите пиксельную сетку Pixel Grid (View > Show > Pixel Grid). Если в меню нет такого пункта, то зайдите в настройки и включите графическое ускорение Preferences > Performance > Graphic acceleration.

Обратите внимание: Сетка будет видна только на вновь созданном холсте при увеличении масштаба 600% и более.

Шаг 4

В настройках Preferences > General (Control-K) поменяйте режим интерполяции изображения на режим Nearest Neighbor (по соседним пикселам). Это позволит границам объектов оставаться максимально четкими.

В настройках единиц измерения и линеек установите единицы измерения линеек в пикселах Preferences > Units & Rulers > Pixels.

II. Создание персонажа

Шаг 1

И вот теперь, когда все настроено, мы можем приступить непосредственно к рисованию персонажа.

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

Шаг 2

Уменьшите масштаб эскиза до 60 пикселей в высоту, используя комбинацию клавиш Control+T, или команду Edit > Free Transform.

Размер объекта отображается на информационной панели. Обратите внимание, чтобы настройки интерполяции были такими же, как мы делали в шаге 4.

Шаг 3

Приблизьте эскиз на 300-400%, чтобы было легче работать, и уменьшите прозрачность слоя. Затем создайте новый слой и обрисуйте контуры эскиза, используя Pencil Tool. Если персонаж симметричный, как в нашем случае, можно обрисовать только половину, а затем продублировать и отразить нарисованное зеркально (Edit > Transform > Flip Horizontal).

Ритм: Чтобы нарисовать сложные элементы разбивайте их на части. Когда пикселы (точки) в линии образуют «ритм», например, 1-2-3, или 1-1-2-2-3-3, набросок выглядит более гладко для человеческого глаза. Но, если того требует форма, этот ритм может быть нарушен.

Шаг 4

Когда контур будет готов, можно выбрать основные цвета и раскрасить большие формы. Делайте это на отдельном слое под контуром.

Шаг 5

Сгладьте контур, дорисовывая тень по внутреннему краю.

Продолжайте добавлять тени. Как вы могли заметить по ходу рисования некоторые формы можно подправить.

Шаг 6

Создайте новый слой для бликов.

Выберите режим наложения Overlay из выпадающего списка на панели слоев. Нарисуйте светлым цветом над теми областями, которые хотите подсветить. Затем сгладьте блик, применив фильтр Filter > Blur > Blur.

Дорисуйте картинку, а затем скопируйте и отзеркальте готовую половинку рисунка, после чего объедините слои с половинками, чтобы получился цельный рисунок.

Шаг 7

Теперь космонавту нужно добавить контрастности. С помощью настроек уровней (Image > Adjustments > Levels) сделайте его ярче, а затем отрегулируйте оттенок с помощью опции Color Balance (Image > Adjustments > Color Balance).

Теперь персонаж готов к анимации.

III. Анимирование персонажа

Шаг 1

Создайте копию слоя (Layer > New > Layer Via Copy) и сдвиньте ее на 1 вверх и на 2 пиксела правее. Это ключевой пункт в анимации персонажа.

Снизьте прозрачность оригинального слоя на 50% чтобы видеть предыдущий кадр. Это называется “Onion Skinning”(режим плюра).

Шаг 2

Теперь согните руки и ноги персонажа так, как будто он бежит.

● Выделите левую руку инструментом Lasso
● Используя FreeTransformTool (Edit > FreeTransform) и удерживая клавишу Control, передвиньте границы контейнера так, чтобы рука отодвинулась назад.
● Выделите сначала одну ногу, и немного растяните ее. Затем вторую ногу наоборот сожмите так, чтобы создалось ощущение, что персонаж шагает.
● С помощью карандаша и ластика подправьте часть правой руки ниже локтя.

Шаг 3

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

Шаг 4

Сделайте копию второго слоя и отразите ее по горизонтали. Теперь у вас есть 1 базовая поза и 2 в движении. Восстановите непрозрачность всех слоев до 100%.

Шаг 5

Перейдите Window > Timeline чтобы отобразилась Timeline панель, и нажмите Create Frame Animation.

На временной шкале сделайте следующее:

1. Установите задержку времени в 0,15 сек
2. Кликните на DuplicatesSelectedFrames, чтобы создать еще 3 копии
3. Установите цикл повтора Forever

Шаг 6

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

Базовая позиция→Бег с правой ноги→Базовая позиция→Бег с левой ноги.

Related

Пиксельная графика (далее — просто пиксель-арт) в наши дни все чаще и чаще напоминает о себе, особенно через инди-игры. Оно и понятно, ведь так художники могут наполнить игру великим множеством персонажей и не потратить сотни часов за моделированием трехмерных объектов и ручной отрисовкой сложных объектов. Если вы хотите научиться пиксель-арту, то первым делом вам придется научиться рисовать так называемые “спрайты”. Затем, когда спрайты уже не будут вас пугать, можете переходить к анимации и даже продаже своих работ!

Шаги

Часть 1

Собираем все необходимое

Загрузите хорошие графические редакторы. Можете, конечно, и в Paint’е шедевры создавать, но это сложно и не очень удобно. Куда лучше будет работать в чем-то вроде:

• Photoshop
• Paint.net
• Pixen

Купите графический планшет. Если мышкой вы рисовать не любите, то планшет и стилус — вот что вам необходимо. Планшеты от Wacom, к слову, самые популярные.

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

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

Рисуйте карандашом с размером кисти в 1 пиксель. В любом графическом редакторе должен быть инструмент “Карандаш”. Выберите его, размер кисти задайте равным 1 пикселю. Теперь вы можете рисовать… пиксельно.

Часть 2

Отрабатываем основы

Создайте новое изображение. Так как вы учитесь рисованию в стиле пиксель-арт, то замахиваться на эпические полотна не стоит. Если помните, то в игре Super Mario Bros. весь экран был 256 x 224 пикселей, а сам Марио уместился на пространстве в 12 x 16 пикселей!

1. Увеличьте масштаб. Да, иначе вы просто не разглядите отдельные пиксели. Да, придется увеличивать его очень сильно. Скажем, 800% — это вполне нормально.

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

   Научитесь рисовать кривые линии. В кривой линии должны быть, скажем так, равномерные “переносы строк” (что отчетливо заметно на рисунке чуть выше). Допустим, начиная рисовать кривую линию, нарисуйте прямую из 6 пикселей, под ней — прямую из трех, под ней — прямую из двух, а под ней — из одного пикселя. С другой стороны нарисуйте то же самое (зеркально отраженное, разумеется). Именно такая прогрессия считается оптимальной. Кривые, нарисованные по схеме “3-1-3-1-3-1-3”, не отвечают стандартам пиксель-арта.

   Не забывайте стирать ошибки. Инструмент “Стерка” надо настроить аналогично карандашу, сделав размер кисти равным 1 пикселю. Чем крупнее стерка, тем сложнее не стереть лишнее, так что все логично.

   Часть 3

   Создаем первый спрайт

   1. Подумайте о том, каким целям будет служить спрайт. Он будет статичным? Анимированным? Статичный спрайт можно насытить деталями до отказа, а вот анимированный лучше сделать попроще, чтобы потом не тратить часы, перерисовывая все детали на всех кадрах анимации. К слову, если ваш спрайте предполагается использовать с другими, то все они должны быть нарисованы в одном стиле.

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

      • Объективно говоря, в наши дни требования к размеру или палитре спрайтов уже выдвигаются редко. Впрочем, если вы рисуете графику для игры, в которую будут играть на старых игровых системах, то придется учитывать все ограничения.

   2. Сделайте набросок. Набросок на бумаге — вот основа любого спрайта, благо что так вы сумеете понять, как все будет выглядеть и, если надо, сможете что-то заранее подправить. Кроме того, по бумажному наброску потом еще можно и обводить (если у вас все же есть планшет).

      • Не жалейте деталей для наброска! Нарисуйте все, что хотите видеть на финальном рисунке.

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

      • Обводя набросок, используйте 100%-ый черный цвет в качестве контурного. Если что, вы его потом вручную измените, а пока что вам будет проще работать именно с черным.

   4. Доработайте контур наброска. В данном контексте можно, конечно, сказать иначе — сотрите все лишнее. В чем суть — контур должен быть в 1 пиксель толщиной. Соответственно, увеличивайте масштаб и стирайте, стирайте лишнее… или дорисовывайте отсутствующее карандашом.

      • Работая над наброском, не отвлекайтесь на детали — их черед еще придет.

   Часть 4

   Раскрашиваем спрайт

   1. Освежите в памяти теорию цвета. Посмотрите на палитру, чтобы понять, какие цвета надо использовать. Там все просто: чем дальше цвета друг от друга, тем больше они друг на друга не похожи; чем ближе цвета друг к другу — тем больше они похожи и лучше рядом друг с другом смотрятся.

      • Выберите цвета, которые сделают ваш спрайт и красивым, и не режущим глаза. И да, пастельных цветов следует избегать (если только весь ваш проект не выполнен в таком стиле).

   2. Выберите несколько цветов. Чем больше цветов вы будете использовать, тем более, так сказать, “отвлекающим” будет ваш спрайт. Посмотрите на классику пиксель-арта и попробуйте подсчитать, сколько цветов использовано там.

      • Марио — всего три цвета (если мы говорим о классической версии), да и те расположены на палитре чуть ли не вплотную друг к другу.
      • Соник — пусть даже Соник нарисован с большим количеством деталей, чем Марио, в основе все равно лежат всего 4 цвета (и тени).
      • Рю — чуть ли не классика спрайтов, как они понимаются в играх-файтингах, Рю — это большие участки, закрашенные в простые цвета, плюс немного тени для разграничивания. Рю, впрочем, чуть сложнее Соника — там уже пять цветов и тени.

   3. Разукрасьте спрайт. Инструментом “Заливка” разукрасьте ваш спрайте и не переживайте о том, что все выглядит плоско и безжизненно — на этом этапе иного и не предполагается. Принцип работы инструмента “Заливка” прост — он будет заливать выбранным вами цветом все пиксели того цвета, по которому вы кликнули, пока не дойдет до границ.

   Часть 5

   Добавляем тени

   Определитесь с источником света. В чем суть: вам нужно решить, под каким углом на спрайт будет падать свет. Определившись с этим, вы сможете сделать правдоподобно выглядящие тени. Да, “света” в буквальном смысле не будет, смысл в том, чтобы представлять, как он будет падать на рисунок.

   • Самое просто решение — предположить, что источник света находится очень высоко над спрайтом, чуть левее или правее его.

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

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

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

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

Создаем пиксельного персонажа в Photoshop

Интересный урок, в котором вы изучите принципы создания пиксельной графики.

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

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

1. Создаём тело персонажа

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

Вам нужно будет создать новый файл в Adobe Photoshop. Вполне подойдёт 100 на 100 пикселей. Персонаж, который получился у меня – всего 28 пикселей в высоту.

Шаг 1

Давайте определим цвет кожи. Параметры: 25˚ Цветовой тон (Hue), 40% Насыщенность (Saturation) и 98% Яркость (Brightness). Хотя вы конечно должны выбирать те настройки, которые подходят вам.

Шаг 2

Мы будем работать с Карандашом (Pencil Tool), с размером точки в 1 пиксель, с хорошим  увеличением около 800%.

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

Размер ног, поможет нам определить, как должна выглядеть оставшаяся часть тела.

Возможно, вам захочется создать свои собственные размеры и пропорции, нежели слепо следовать моим инструкциям, но если вы хотите чтобы ваш персонаж выглядел так же как мой, то используйте длину ног в 9 пикселей. Итак, это туловище.

Шаг 3

Чтобы закончить работу над конечностями, нам нужно создать руки. Хватит одного пикселя с верхнего края каждой стороны туловища. Мы так же добавим дополнительный ряд пикселей в нижней части ног, по дополнительному пикселю с каждой стороны ноги.

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

Шаг 4

Наконец, мы делаем голову с закруглёнными углами. Я сделал её такой же широкой как туловище и 7 пикселей в высоту.

2. Создаём черты лица

Не смотря на то, что наш персонаж воплощён в минималистическом стиле, нам необходимо добавить определённые детали.

Шаг 1

У нас вполне достаточно места на лице, чтобы сделать глаза.

Я решил сделать их немного темнее (примерно на 15%) оттенка кожи. Я не хочу создать слишком большой контраст, так как не думаю, что есть возможность видеть цвет глаз при таком  маленьком разрешении.

Шаг 2

Добавим волосы. Я использовал тёмно-коричневый оттенок и добавил дополнительный ряд пикселей, и наша голова немного увеличилась из-за волос.

Шаг 3

Добавьте немного волос по бокам головы. Я использовал более светлый оттенок, так как будто волосы либо короткие, либо сглажены. Чтобы добавить этот цвет, я снизил Непрозрачность (Opacity) Карандаша (Pencil Tool) на 50%, что можно легко сделать нажатием кнопки 5, когда режим карандаша включён. Главное не забудьте, что нужно потом вернуть этот параметр на 100% (нажав кнопку 0). И наконец, я немного изменил причёску персонажа.

3. Создаём одежду

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

Шаг 1

Давайте создадим штаны. Используем ненасыщенный оттенок аквамарин, которым я пользуюсь для создания джинсов. Чтобы поэкспериментировать с вариантами цвета, я обычно копирую окрашенную часть, затем создаю новый слой и открываю Цветовой тон/Насыщенность (Hue/Saturation/Lightness), и перемещаю ползунки на панели до тех пор, пока мне не понравится результат.  

Шаг 2

Добавим какую-нибудь обувь. Я решил, что это должны быть кроссовки, и они будут полностью белыми. Они действительно слишком малы, чтобы добавить какие-то детали.

Я не хочу делать их совершенно белыми, чтобы они не сливались с основным фоном.

К тому же мы не используем контуры, а я хочу оставить фон полностью белым.

Шаг 3

Дадим персонажу футболку. Я люблю этот оттенок красного, потому что он хорошо сочетается со штанами. Я создал футболку с короткими рукавами и V-образным вырезом.

Шаг 4

Как я уже говорил ранее, вы можете добавить приличное количество деталей – может быть галстук или принт на футболке. Я добавил несколько горизонтальных полос

(низкий контраст).

Шаг 5

И наконец, последний слой одежды – куртка. При желании вы можете добавить ещё несколько деталей, таких как жилет, часы или наушники.

4. Тень персонажа

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

Шаг 1

Создайте новый слой и обрисуйте тени.

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

Руки нашего персонажа слишком малы для создания тени.

Шаг 2

И чтобы применить затемнение, просто уменьшите Непрозрачность (Opacity) слоя на 15% или около того. Вы можете сделать это в панели слои, или нажав 15 на клавиатуре, когда выбран Move Tool.

Затем объедините этот слой с предыдущим (слой – объединить с предыдущим) и экспортировать свою графику.

При просмотре с масштабом в 100%, персонаж слишком мал, чтобы полностью оценить проделанную работу. Так что попробуйте масштабировать просмотр до 200% или 300% (Hедактирование > Cвободная трансформация) (Edit > Free Transform) с Интерполяцией значения.

Сохраните, желательно в формате PNG или GIF, и все готово!

Отлично! Работа над персонажем закончена!

Поздравляем, вы завершили свой пиксель-арт.

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

Рекомендуем:

16 уроков Photoshop для новичков

Пиксель арт для чайников: инструкция как сделать

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

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

Содержание статьи:

1. Что такое пиксельный арт?

2. Отличительные черты пиксельной графики

3. История пиксельного арта

4. Классификация

5. Топ программ для работы с пиксель-артом

6. Что еще нужно для удобной работы?

7. Как рисовать пиксель-арт? Пошаговое руководство

8. Форматы файлов

9. Преимущества и недостатки пиксельного арта

10. Как правильно делиться пиксель-артом?

Что такое пиксельный арт?

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

Пиксельный арт изначально появился из необходимости. В начале 1970-х и 80-х годов все видеоигры создавались с низким разрешением в соответствии с развитием технологий. 

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

Автор — Alberto

Отличительные черты пиксельной графики

Стиль пиксельного искусства строится на двух основных пунктах: ограниченная цветовая палитра и простые блочные фигуры.

Наиболее популярными примерами пиксельной графики являются ранние видеоигры. Вспомните такие видеоигры, как Mario Bros, Sonic the Hedgehog, Legend of Zelda или Pong — все они являются яркими примерами первого использования пиксельного арта. В то время художники использовали всего несколько пикселей, чтобы обозначить лицо и одежду игрового персонажа. 

В 1990-е годы наступила эра 16-битных игр, когда совершенствовались технологии видеоигр. Пиксельный арт стал более детализированным, но его суть осталась прежней: на счету каждая точка. А перемещение одного пикселя может полностью изменить внешний вид персонажа.

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

История пиксельного арта

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

Ранние годы | 1972 – 1983 годы

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

8-битная эра | 1983 – 1987 годы

Хотя все еще ограниченные в технологиях, разработчики стали более амбициозными в своих попытках привлечь аудиторию узнаваемыми персонажами. Это привело к появлению захватывающих игровых миров с фоновыми деталями, а также небольшими видеовставками, напоминающие фильмы. Идеи того времени привели к появлению многих современных игр.

16-битная эра | 1987 – 1993 годы

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

Медленное угасание пиксельного арта | 1993 — 2006 годы

По мере того как консоли вроде Playstation и Nintendo 64 усердно работали над продвижением концепции использования 3D-моделей, популярность пиксельного искусства начала постепенно падать. С этого момента пиксельная графика не сильно продвинулась вперед, поскольку большинство игр просто совершенствовали наработанное искусство. Существовало несколько компаний, которые отказывались использовать 3D, но, к сожалению, их поглотил рынок. 

Наши дни | 2006 — Настоящее время

В настоящее время пиксельная графика в основном используется для портативных консолей и инди-игр в стиле «ретро». Несмотря на угасшую популярность, пиксельный арт все еще развивается, создавая игры, которые конкурируют и даже превосходят современные аналоги.

Больше про развитие искусства пиксельной графики можно узнать, посмотрев данный ролик, который более подробно рассказывает об истории пиксель-арта:

Классификация

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

Пример изометрического пиксельного арта. Автор Simon Page

Пример не изометрического пиксельного арта. Автор Simon Page

ТОП программ для работы с пиксель-артом

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

Paint

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

Piskel

Если же по какой-то причине вам не доступен Paint, а скачивать дополнительные программы вы не хотите, тогда обратите свое внимание на Piskel. Это удобный онлайн редактор пиксельной графики, который позволяет создавать искусство прямо в вашем браузере. Результаты собственного творчества можно без труда сохранить в PNG или GIF, а также сохранить непосредственно в браузере. 

GraphicsGale

GraphicsGale — один из первых редакторов, который был создан специально для пиксельной графики. Детище японской компани HUMANBALANCE, которое вы можете установить совершенно бесплатно, но, к сожалению, только на Windows.

Aseprite

На сегодняшний день это хоть и платный, но самый популярный редактор, который используется для создания пиксельных артов. Он содержит множество полезных функций, необходимых для создания профессиональной пиксельной графики, а также доступен для Windows, Mac и Linux. 

GameMaker Studio 2

GameMaker Studio 2 — отличный инструмент для создания игр, ориентированный на 2D, который включает в себя также удобный редактор, под названием Sprite Editor. Если вы создаете пиксельный арт для дальнейшего его использования в своих игр, то будет гораздо удобнее делать это все сразу же в одной программе. 

Photoshop

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

Что еще нужно для удобной работы? 

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

Графический планшет

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

Суппорт запястья

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

Как рисовать пиксель-арт? Пошаговое руководство

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

Выбираем палитру

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

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

В целом, самыми распространенными палитрами являются палитры на 16 и 32 цвета. Вы можете использовать любую из них.

Палитра на 16 цветов 

Палитра на 32 цвета

Грубые контуры

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

Шаг 1. Создание пиксельного персонажа. Автор Derek Yu

Проработка контуров

Затем нужно очистить контур, удалив лишнее и уменьшив толщину каждой линии до одного пикселя.

Шаг 2. Проработка контуров

Но какие именно пиксели нужно удалить? Чтобы ответить на этот вопрос, нужно для начала разобраться какие пиксельные линии существуют. 

Типы пиксельных линий 

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

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

Пример прямой линии с зазубреностями. 

Пример хорошей кривой линии и линии с зазубренностью. 

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

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

Нанесение первых цветов

Вы же уже выбрали свою палитру? Время раскрасить ваш рисунок. В этом пункте нет ничего сложного, просто раскрасьте детали в те цвета, которые вам хочется. 

К слову, к персонажу для примера был добавлен мяч, чтобы дальнейшие шаги были более понятными и простыми. 

Шаг 3. Нанесение цветов 

Растушевка

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

Выборочное выделение

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

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

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

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

Заключительные правки 

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

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

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

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

Даже если вы еще недостаточно опытны в создании пиксельных артов для игр, нужно научиться в определенный момент говорить себе «Стоп!» и двигаться дальше. Лучший способ улучшить свои навыки — это работать над разными иллюстрациями от начала до конца как можно больше раз. Кроме того, если вы оставите свою работу на некоторое время, вы сможете после взглянуть на нее свежим взглядом.

Форматы файлов

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

Рекомендуемый формат файла без потерь для статической пиксельной графики — PNG. Для анимации наиболее популярным форматом являются анимированные GIF.

Преимущества и недостатки пиксельного арта

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

Преимущества пиксельного арта

1. Вне времени

К счастью, в мире до сих пор существует большое сообщество любителей ретро, в особенности старых игр. Со временем такие игры, как Mario Bros и Sonic the Hedgehog превратились в классику, которыми наслаждаются не только ностальгирующие взрослые, но и молодое поколение. Поэтому работая в пиксельной графике, вы можете быть смело уверены, что ваша работа будет актуальна всегда, невзирая на изменение тенденций в иллюстрациях и развитие технологий создания игр.

2. Глоток свежего воздуха

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

3. Сообщество единомышленников

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

Недостатки пиксельного арта

1. Трата времени 

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

2. Сложно выделиться 

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

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

Как правильно делиться пиксель-артом?

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

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

 Публикация своего пиксельного искусства в социальных сетях — отличный способ получить обратную связь и познакомиться с другими пиксельными художниками (не забудьте использовать хэштег #pixelart!). К сожалению, веб-сайты социальных сетей, как правило, конвертируют PNG в JPG. Поэтому перед загрузкой вашего первого пиксельного арта вам стоит позаботиться о том, чтобы сохранить четкость вашей работы. 

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

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

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

инструкция по применению / Хабр

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

Фон

Пиксель-арт — форма цифрового художественного искусства, в котором изменения вносятся на уровне пикселей. В основном он ассоциируется с графикой видеоигр 80-х и 90-х годов. Тогда художникам приходилось учитывать ограничения памяти и низкого разрешения. Сейчас пиксель-арт все еще популярен в играх и как художественный стиль в целом, несмотря на возможность создания реалистичной 3D-графики. Почему? Даже если не брать в расчет ностальгию, создание крутой работы в таких жестких рамках — приятный и стоящий челлендж.

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

Metal Slug 3 (Arcade). SNK, 2000 год

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

В общем, я предупредил.

А теперь немного о моем стиле: в основном я рисую пиксель-арт для видеоигр и в них же нахожу вдохновение. В частности я фанат Famicom/NES, 16-битных консолей и аркад 90-х годов. Пиксель-арт моих любимых игр того времени можно описать как яркий, уверенный и чистый (но не слишком), его нельзя назвать жестким и минималистичным. В этом стиле я работаю сам, но вы легко можете применять идеи и техники из этого туториала для создания совершенно других вещей. Изучайте работы разных художников и создавайте пиксель-арт, который нравится вам!

Софт

Базовые цифровые инструменты для пиксель-арта — Зум (Zoom) и Карандаш (Pencil), чтобы размещать пиксели. Также вам пригодятся Линия (Line), Фигура (Shape), Выбрать (Select), Переместить (Move) и Заливка (Paint Bucket). Есть много бесплатного и платного ПО с таким набором инструментов. Я расскажу про самые популярные и те, которыми пользуюсь сам.

Paint (бесплатно)

Если у вас Windows, встроенный в нее Paint — примитивная программа, но в ней есть все инструменты для пиксель-арта.

Piskel (бесплатно)

Неожиданно функциональный редактор пиксель-арта, который запускается через браузер. Можно экспортировать работу в PNG или анимированный GIF. Отличный вариант для новичков.

GraphigsGale (бесплатно)

GraphicsGale — единственный редактор из тех, о которых я слышал, разработанный именно для пиксель-арта и включающий инструменты анимации. Его создала японская компания HUMANBALANCE. С 2017 года он распространяется бесплатно и до сих пор пользуется спросом, несмотря на рост популярности Aseprite. К сожалению, работает он только на Windows.

Aseprite ($)

Пожалуй, самый популярный редактор на данный момент.

Открытый исходный код

, куча возможностей, активная поддержка, версии для Windows, Mac и Linux. Если вы серьезно взялись за пиксель-арт и все еще не нашли нужный редактор, возможно, это то, что нужно.

GameMaker Studio 2 ($$+)

GameMaker Studio 2 — превосходный 2D-инструмент с хорошим редактором спрайтов (Sprite Editor). Если вы хотите создавать пиксель-арт для для собственных игр, очень удобно все делать в одной программе. Сейчас я использую этот софт в работе над

UFO 50

, коллекцией 50 ретро-игр: спрайты и анимации создаю в GameMaker, а тайлсеты — в Photoshop.

Photoshop ($$$+)

Photoshop — дорогой софт, распространяется по подписке, не заточен под пиксель-арт. Не рекомендую приобретать его, если вы не занимаетесь отрисовкой иллюстраций в высоком разрешении, или вам не нужно проводить сложные манипуляции с картинкой, как мне. В нем можно создавать статичные спрайты и пиксельные работы, но он довольно сложный по сравнению со специализированным софтом (например, GraphicsGale или Aseprite).

Прочее

Мой набор для пиксель-арта. Все черное, только сейчас заметил.

Графический планшет ($$+)

Рекомендую графические планшеты для любых работ с цифровыми иллюстрациями, чтобы избежать туннельного синдрома запястий. Его гораздо проще предотвратить, чем вылечить. Однажды вы почувствуете боль, и она будет только нарастать — позаботьтесь о себе с самого начала. Из-за того, что когда-то я рисовал мышкой, мне теперь тяжело играть в игры, в которых нужно нажимать на клавиши. Сейчас я использую Wacom Intuos Pro S.

Суппорт запястья ($)

Если вы не можете приобрести планшет, купите хотя бы суппорт запястья. Мне больше всего нравится Mueller Green Fitted Wrist Brace. Остальные либо слишком тугие, либо обеспечивают недостаточную поддержку. Суппорты без проблем можно заказать онлайн.

96×96 пикселей

Final Fight. Capcom, 1989 год

Приступим! Начнем со спрайта персонажа 96×96 пикселей. Для примера я нарисовал орка и поместил его на скриншот из Final Fight (картинка выше), чтобы вы понимали масштаб. Это большой спрайт для большинства ретро-игр, размер скриншота: 384×224 пикселя.

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

1. Выбираем палитру

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

Для этого туториала я буду использовать палитру из 32 цветов, которую мы создали для UFO 50. Для пиксель-арта их часто собирают из 32 или 16 цветов. Наша разработана для вымышленной консоли, которая могла бы появится где-то между Famicom и PC Engine. Можете взять ее или любую другую — туториал совсем не зависит от выбранной палитры.

2. Грубые контуры

Начнем прорисовку с помощью инструмента Карандаш. Нарисуем скетч так же, как делаем это с обычной ручкой и бумагой. Конечно, пиксель-арт и традиционный арт пересекаются, особенно когда речь идет о таких крупных спрайтах. Мои наблюдения показывают, что сильные художники по пиксель-арту как минимум неплохо рисуют от руки и наоборот. Так что развивать навыки рисования всегда полезно.

3. Проработка контуров

Дорабатываем контуры: убираем лишние пиксели и сокращаем толщину каждой линии до одного пикселя. Но что именно считать лишним? Чтобы ответить на этот вопрос нужно разобраться в пиксельных линиях и неровностях.

Неровности

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

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

Примеры:

Прямые

Кривые

Неровности появляются на кривых, когда длина сегментов линии увеличивается или уменьшается не постепенно.

Совсем избежать неровностей невозможно — во всех ваших любимых ретро-играх они есть (если, конечно, пиксель-арт состоит не исключительно из простых форм). Цель: свести неровности к минимуму, при этом показав все необходимое.

4. Применяем первые цвета

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

В нижнем левом углу я нарисовал нашего друга, знакомьтесь, это — Шар. С ним будет проще понять, что именно происходит на каждом этапе.

5. Шейдинг

Пора отобразить тени — просто добавляем более темные цвета на спрайт. Так изображение будет выглядеть объемным. Давайте предположим, что у нас один источник света, расположенный над орком левее от него. Значит, освещено будет все, что находится сверху и спереди нашего персонажа. Добавляем тени снизу справа.

Форма и объем

Если этот этап вызывает у вас сложности, представьте свой рисунок как объемные формы, а не просто линии и цвет. Формы существуют в трехмерном пространстве и могут иметь объем, который мы выстраиваем с помощью теней. Это поможет визуализировать персонажа без деталей и представить, что он сделан из глины, а не из пикселей. Шейдинг — это не просто добавление новых цветов, это процесс выстраивания формы. На хорошо проработанном персонаже детали не скрывают базовые формы: если вы прищуритесь, увидите несколько крупных кластеров света и тени.

Сглаживание (anti-aliasing, анти-алиасинг)

Каждый раз используя новый цвет, я применяю анти-алиасинг (АА). Он помогает сгладить пиксели добавляя промежуточные цвета по углам, в месте соприкосновения двух сегментов линии:

Серые пиксели смягчают «разрывы» в линии. Чем длиннее сегмент линии, тем длиннее АА-сегмент.

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

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

6. Выборочный контур

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

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

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

7. Финальные штрихи

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

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

Создание шумов (dithering, дизеринг)

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

Верхний градиент от темного к светлому использует сотни различных оттенков синего.

Средний градиент использует всего девять цветов, но в нем все еще слишком много оттенков одного цвета. Возникает так называемый бандинг (от англ. band — полоса), при котором из-за толстых однородных полос глаз фокусируется на точках соприкосновения цветов, вместо самих цветов.

На нижнем градиенте мы применили дизеринг, который позволяет избежать бандинга и использует всего два цвета. Мы создаем шум разной интенсивности, чтобы имитировать градацию цвета. Эта техника очень похожа на халфтон (halftone — полутоновое изображение), применяемое на печати; а также на стипплинг (stippling — зернистое изображение) — в иллюстрации и комиксах.

На орке я применил дизеринг совсем немного для передачи текстуры. Некоторые пиксель-артисты совсем его не используют, другие — наоборот не стесняются и делают это очень умело. Мне кажется, что лучше всего дизеринг смотрится на больших участках залитых одним цветом (присмотритесь к небу на скриншоте Metal Slug, который был выше) или на тех участках, которые должны выглядеть шероховато и неровно (например, грязь). Решите сами, как его использовать.

Если хотите увидеть пример с масштабным и качественным дизерингом, изучите игры The Bitmap Brothers, британской студии 80-х годов, или игры на компьютере PC-98. Только учтите, что все они — NSFW.

Kakyusei (PC-98). Elf, 1996 год
На этом изображении всего 16 цветов!

8. Последний взгляд

Одна из опасностей пиксель-арта в том, что он кажется легким и простым (из-за его структуры и ограничений стиля). Но в итоге вы потратите огромное количество времени на доработку своих спрайтов. Это похоже на головоломку, которую нужно решить — вот почему пиксель-арт привлекает перфекционистов. Помните, что один спрайт не должен отнимать слишком много времени — это лишь крохотный кусочек крайне сложного скопления кусочков. Важно не терять видение общей картины.

Даже если ваш пиксель-арт не для игр, иногда стоит сказать себе: «Все уже достаточно хорошо!» И двигаться дальше. Лучший способ развития навыков — как можно больше раз пройти весь процесс целиком от начала до конца, используя как можно больше тем.

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

32×32 пикселя

Мы создали большой спрайт 96×96 пикселей первым, потому что при таком размере это больше напоминает рисование или живопись, но только пикселями. Чем меньше спрайт, тем меньше он похож на то, что должен отображать, и тем больше важен каждый пиксель.

В Super Mario Bros. глаз Марио — это всего два пикселя, расположенные один над другим. И его ухо тоже. Создатель персонажа Сигеру Миямото сказал, что усы потребовались для того, чтобы отделить нос от остального лица. Так что одна из главных черт лица Марио — не просто дизайн персонажа, но и прагматичная уловка. Что подтверждает старую мудрость — «нужда — мать изобретательности».

Основные этапы создания спрайта 32×32 пикселя нам уже знакомы: скетч, цвет, тени, дальнейшая доработка. Но в таких условиях, в качестве начального скетча я подбираю цветные фигуры вместо отрисовки контуров из-за маленького размера. Цвет играет более важную роль в определении персонажа, чем контуры. Посмотрите на Марио еще раз, у него вообще нет контуров. Интересны не только усы. Его бакенбарды определяют форму ушей, рукава показывают руки, а общая форма более-менее четко отображает все его тело.

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

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

Целая команда в сборе!

Форматы файлов

Такой результат может заставить понервничать любого пиксель-артиста

Картинка, которую вы видите — результат сохранения рисунка в JPG. Часть данных потерялась из-за алгоритмов сжатия файла. Качественный пиксель-арт в итоге будет выглядеть плохо, а вернуть его изначальную палитру будет непросто.

Для сохранения статической картинки без потери качества используйте формат PNG. Для анимаций — GIF.

Как правильно делиться пиксель-артом

Шеринг пиксель-арта в социальных сетях — отличный способ получить фидбек и познакомиться с другими художниками, работающими в том же стиле. Не забудьте поставить хэштег #pixelart. К сожалению, соцсети часто конвертируют PNG в JPG без спроса, ухудшая вашу работу. Причем не всегда понятно, почему ваша картинка была конвертирована.

Есть несколько советов, как сохранить пиксель-арт в нужном качестве для различных соцсетей.

Twitter

Чтобы PNG-файл не изменился в Twitter, используйте меньше 256 цветов или

убедитесь

, что ваш файл меньше 900 пикселей по длинной стороне. Я бы увеличил размер файла хотя бы до 512×512 пикселей. Причем так, чтобы масштабирование было кратно 100 (200%, а не 250%) и сохранялись резкие края (Nearest Neighbor в Photoshop).

Анимированные GIF-файлы для постов в Twitter должны весить не более 15 Мб. Картинка должна быть как минимум 800×800 пикселей, цикличная анимация должна повторяться трижды, а последний кадр должен быть вполовину короче по времени, чем все остальные — самая популярная теория. Однако, непонятно, насколько нужно выполнять эти требования, учитывая, что Twitter постоянно меняет свои алгоритмы отображения картинок.

Instagram

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

Рисунки по клеточкам персонажи маленькие

Пиксель арт

Рисование по пикселям

Рисунки по клеточкам персонажи

Рисование пакльточкам

Рисование по клеточкам персонажи

Рисунки по клеточкам

Рисование по клеткам

Рисунки по клеточкам животные

Пиксельное рисование по клеточкам

Рисунки по клеточкам девочки

Рисунки по клеточкам

Рисование по клеткам для мальчиков

Мини рисунки по клеточкам

Пиксель арт покемоны в майнкрафт

Мэгги симпсон по клеточкам

Рисунки по клеточкам девочки

Гравити Фолз Мейбл пиксель

Диппер из Гравити Фолз по клеточкам

Рисунк и п о к Ле то чка м

Гравити Фолз в клеточку

Рисование по клеточкам для начинающих

Мейбл по клеточкам

Ститч по клеткам

Рисунки в клеточку маленькие для девочек

Рисунки из пикселей

Гравити Фолз вышивка крестиком

Рисунки по клеткам схемы

Картинки по клеточкам

Рисование по клеткам для девочек

Р̆̈й̈с̆̈ў̈н̆̈о̆̈к̆̈ п̆̈о̆̈ к̆̈л̆̈ӗ̈т̆̈о̆̈ч̆̈к̆̈ӑ̈м̆̈

Рисование по клеточкам принцессы мини

Рисование по клеточкам принцессы

Пиксель арт

Рисование по клеточкам персонажи

Рисование поклетачкам

Пиксельные рисунки

Рисование по клеточкам персонажи

Рисунки по клеточкам Джейк

Герои из мультфильмов по клеточкам

Рисунки по клеточкам маленькие

Рисование по клеточкам для девочек

Пиксельные рисунки по клеточкам

Рисование поклетачкам

Рисование пакльточкам

Схемы для рисования по клеточкам

Пиксель арт схемы

Рисунки по клеточкам в Paint

Пиксельные рисунки в клетку

Как создать 8-битный пиксельный персонаж в Illustrator

Если вы являетесь постоянным читателем моего блога, вы знаете, что я люблю создавать иллюстрации в Illustrator, используя простые или базовые формы. Этот урок доводит эту идею до крайности, ничего не используя инструмент прямоугольник для создания простого 8-битного пиксельного символа стиля. Пиксели обычно ассоциируются с Photoshop, но самое замечательное в Illustrator — это то, что ваша работа на 100% векторная, поэтому в отличие от Photoshop вы можете масштабировать свой дизайн до любого размера, сохраняя эти блочные 8-битные характеристики.

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

В Фотошопе, если вы увеличите изображение достаточно далеко, вы увидите отдельные квадратные пиксели, но в Illustrator нам нужно настроить сетку для работы. В пункте меню «Вид» выберите параметр «Показать сетку» и убедитесь, что функция «Привязать к сетке» включена.

Выберите инструмент «Прямоугольник», затем нарисуйте квадрат в пределах основных линий сетки. Прямоугольник будет автоматически привязываться к точкам сетки, что облегчит достижение идеального выравнивания пикселей при построении символа. Дайте этому начальному квадрату заливку телесного цвета, чтобы представить лицо вашего персонажа.

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

Ограничение базовыми формами блоков затрудняет представление изогнутых форм, но вскоре все начинает становиться узнаваемым по мере наращивания блоков.

Несмотря на то, что это 2D дизайн, простые эффекты перспективы могут быть достигнуты с использованием масштаба. Левая линза солнцезащитных очков имеет ширину в два блока, а правая линза — три блока.

Нарисуйте большой черный прямоугольник, чтобы представить тело персонажа. Перекрыть прямоугольник с головой, но отправить объект на дно стека с помощью сочетания клавиш CMD + Shift + [.

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

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

Заполните области в центре тела с белым, чтобы представить белую футболку под курткой. Даже если в Illustrator идеально выровнены две фигуры, визуальный сбой покажет крошечные зазоры. Эти линии не появляются в окончательном экспортированном графическом объекте, но вы можете избежать их, перекрывая любые одинаковые цветовые формы.

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

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

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

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

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

Если вы любите приключения, почему бы не создать целую деревню из 8-битных пиксельных символов? Процесс очень прост, и он просто показывает, какие классные вещи вы можете создать с помощью самых основных инструментов. Примерно так создавалась графика для игры Undertale.

Лучшие инструменты пиксельной графики для создания вашей собственной игры

6 лучших вариантов для создания собственного пиксельного произведения искусства от великолепных бесплатных инструментов до мощного профессионального программного обеспечения.

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

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

Aseprite

Ссылка

Цена: $15 USD или бесплатно, если скомпилируете его самостоятельно
Доступно для: Windows / OS X / Linux

Aseprite специально сделана для пиксельной графики. Она не бесплатна, но $15 не плохая цена, если вы ищите долгосрочное решение. Однако вы можете использовать Aseprite бесплатно, если захотите скомпилировать исходный код самостоятельно.

Это одна из наиболее часто рекомендуемых программ для пиксельной графики, и это не спроста. Aseprite имеет все стандартные функции, необходимые для создания пиксельной графики, которые завернуты в дружественный интерфейс. Onion-skinning – возможность видеть тот кадр, с которым вы работаете, а также следующие за ним и предшествующие ему анимационные кадры – то, что нужно для анимации. Aseprite также может экспортировать целые спрайт-листы и GIF-файлы и выполнять другие специфичные для работы с пикселями функции.

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

Джей Толен, создатель и художник приключенческой игры Dropsy в жанре point-and-click, перешел на Aseprite после Microsoft Paint и с тех пор не менял своих предпочтений. “Раньше я больше придерживался «безопасной» палитры цветов. Если бы я сделал какой-нибудь кусок, а затем решил, что этот цвет не рабочий, мне бы пришлось усиленно заливать его другими цветами или просто оставить все так, а потом мучиться целую вечность. Для Hypnospace Outlaw я использовал функцию затемнения цвета в Aseprite, чтобы придать 3D графике старомодный вид «безопасных» цветов”.

Заходите на страничку Aseprite в Твиттер, чтобы посмотреть на примеры графики, сделанные с помощью этого инструмента.

Pyxel Edit

Ссылка

Цена: $9 USD (или бесплатная бета-версия)
Доступно для: Windows / OS X

Pyxel Edit – еще один надежный и дешевый вариант. Вы можете купить лицензированную версию за $9 или скачать бесплатную бета-версию. Имейте в виду, что бесплатная версия больше не обновляется и не поддерживается. Для этого вам нужно будет купить программу. Однако даже платная версия медленно обновляется и не является основной программой для своего разработчика. Но если вы помешаны на огромном количестве функций, то будьте готовы к тому, что останетесь довольны тем видом, в котором Pyxel Edit существует на данный момент.

Pyxel Edit отлично подходит для статической пиксельной графики и для анимации спрайтов, но некоторые из его функций делают большой уклон в сторону создания тайлсетов. Вы можете импортировать существующие тайлсеты или макеты, а Pixel Edit автоматически превратит их в пригодные для использования тайлы. Одна особенно хорошая функция – ссылки на тайл, которая позволяет вам редактировать тайл и обновлять каждый экземпляр этого тайла. Нет необходимости возвращаться и кропотливо заменять тайлы вручную после редактирования. Если вы планируете создавать тайлсеты для сред и уровней, то хороший редактор тайлов может существенно изменить рабочий процесс, когда приходит время итерации дизайна уровней.

Вы можете увидеть примеры графики, сделанной при помощи Pyxel Edit на странице в Твиттер.

GraphicsGale

Ссылка

Цена: Бесплатно
Доступно для: Windows

GraphicsGale – еще одна серьезная программа, созданная специально для пиксельной графики. Она имеет те же главные функции, которые вы ожидаете увидеть для рисования и анимации: onion-skinning, управление слоями и цветовой палитрой. Самым большим недостатком GraphicsGale является то, что она доступен только для Windows.

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

Одна из примечательных профессиональных игр, созданных с помощью GraphicsGale: великолепная Duelyst.

Pro Motion NG

Ссылка

Цена: $40 или ограниченная во времени бесплатная версия
Доступно для: Windows

В то время, как GIMP и Photoshop являются перепрофилированными инструментами, Pro Motion – это высококачественная программа, созданная специально для пиксельной графики, с помощью которой были созданы впечатляющие профессиональные игры, такие как Shovel Knight. Pro Motion обладает широкими возможностями как для анимации спрайтов, так и для редактирования тайлсетов. Как Pyxel Edit, Pro Motion позволяет редактировать все одинаковые тайлы. Она также может автоматически осуществлять заливку больших частей рисунка.

Pro Motion изначально доступна только для Windows, но возможен запуск программы на Linux и OS X через Wine. Бесплатная версия Pro Motion предлагает множество функций для пиксельной графики: поддержка рисования шаблонов тайлов, редактор карт тайлов, редактирование цветовой палитры и эффекты слоя. Если вы попробуете и решите приобрести программу, то в платной версии добавляется много возможностей для опытных пользователей, такие как возможность изменять сочетания клавиш, автоматическое резервное копирование и открытие нескольких проектов одновременно. Pro Motion может стать лучшей программой, отлично сочетающей цену и качество и сделанной специально для работы с пикселями.

Вы можете купить ее через Steam.

Photoshop

Ссылка

Цена: $20-30 в месяц
Доступно для: Windows / OS X

Adobe Photoshop не нуждается в представлении, но я все же расскажу подробней. Как ведущее программное обеспечение для редактирования изображений с высоким разрешением, Photoshop будет стоить вам $20 в месяц в зависимости от выбранного вами тарифа подписки (годовой дешевле, чем ежемесячный). Студенты могут приобрести его дешевле – за $10 в месяц. Если вам уже посчастливилось заполучить себе копию, благодаря образовательной лицензии, или до оформления подписки, использование программы для создания графики сразу становится более возможным. Преимуществом использования продукции Adobe является наличие огромного количества ресурсов. Если есть функция, которую вам нужно изучить, вы можете не сомневаться, что есть официальная документация и бесконечное количество текстовых и видеогайдов в Google.

Что касается возможностей, то Photoshop имеет все необходимое и даже больше. Как и его бесплатная альтернатива GIMP, он не создан специально для пиксельной графики, но есть много руководств по настройке Photoshop для работы с пиксельной графикой и получения максимальной отдачи от мощностей Photoshop. Иногда он не очень хорош для работы с низкими разрешениями, но он может быть чрезвычайно эффективным для тех, кто к нему привык. Возможность управлять слоями, стилями слоев, пользовательскими кистями, палитрами историей редактирования может дать многое для вашего рабочего процесса.

Лен Стюарт, ведущий художник Pixel Noir, использует Photoshop не только из-за его универсальности, но и потому что привык к нему. “Лично я использую Photoshop еще со средней школы, так что это просто программа, используя которую, я чувствую себя комфортно”.

GIMP

Изображение из урока по перекрашиванию спрайт-листов в Gimp.

Ссылка

Цена: беслатно
Доступно для: Windows / OS X / Linux

GIMP – это известный редактор изображений с высоким разрешением, но это не делает его менее популярным редактором для работы с низким разрешением. Несмотря на то, что самым известным качеством GIMP является то, что он «бесплатный Photoshop», у него есть и другие сильные стороны, которые сокращают время работы. Одной из особенностей является то, что он настраивается посредством нескольких языков программирования. Существует довольно много плагинов, созданных сообществом, а это значит, что вы можете, затратив некоторые усилия, самостоятельно настроить для GIMP набор возможностей.

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

Как сделать пиксельные символы

Если вы когда-нибудь задумывались о создании пиксельной графики, вот очень быстрое и простое введение в один из самых фундаментальных ее аспектов: персонажей.

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

Не можете придумать никакого вдохновения? Возможно работа со стоковым изображением с Envato Market.

1. Создайте тело персонажа

Обычно я рекомендую начинать с головы, и это по-прежнему приемлемая отправная точка, но, поскольку этот персонаж будет таким простым и его пропорции будут несколько реалистичными, тело будет таким же хорошим местом для начала.

Вам потребуется создать новый файл в Adobe Photoshop. Это может быть 100 пикселей на 100 пикселей ; персонаж, которого я сделал, имеет высоту всего 28 px .

Шаг 1

Определим цвет кожи.Это 25˚ в Оттенок , 40% Насыщенность и 98% Яркость , но выбирайте то, что подходит именно вам.

Шаг 2

Мы будем работать с инструментом Pencil Tool с размером 1 px и с хорошим увеличением, например 800% .

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

Размеры ног помогут нам определить остальную часть персонажа.

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

Шаг 3

Чтобы закончить конечности, добавляем руки сбоку; они просто один дополнительный пиксель сбоку туловища. Мы также добавляем дополнительный ряд пикселей в нижней части ног с дополнительным пикселем с каждой стороны для ног.

Я также добавил ряд пикселей для плеч. Немного странно называть углы плеч «закругленными», но эти отсутствующие пиксели в конечном итоге придают более округлый и, следовательно, более естественный вид.

Шаг 4

Наконец, мы добавляем голову, также с «закругленными» углами. Я сделал его шириной с туловище и высотой 7 пикселей .

2. Добавьте черты лица

Наш персонаж будет очень минималистичным из-за его небольшого размера, но мы все же сможем добавить некоторые детали.

Шаг 1

На лице достаточно места, чтобы добавить пару глаз.

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

Шаг 2

Добавим немного волос. Я использовал темно-коричневый оттенок и добавил дополнительный ряд пикселей, чтобы голова немного увеличилась в размере из-за волос.

Шаг 3

Добавьте немного волос по бокам головы. Я использовал более светлый цвет, как если бы он был либо коротким, либо сглаженным. Чтобы добавить этот цвет, я уменьшил непрозрачность инструмента Pencil Tool до 50% , что можно легко сделать, нажав число 5 при включенном инструменте Pencil Tool . Только не забудьте после этого вернуть его на 100% (вы можете нажать число 0 .) И, наконец, я сделал своему персонажу небольшую прическу в стиле помпадур.

3. Добавьте одежду

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

Шаг 1

Давайте наденем штаны на персонажа. Оттенок здесь — аквамарин низкой насыщенности, который я использую для обозначения синих джинсов. Чтобы попробовать вариации цветов, я обычно Копирую область, которую раскрашиваю, в Новый слой  и открываю панель Оттенок/Насыщенность/Яркость ( Изображение > Коррекция > Цветовой тон/Насыщенность …) и перемещаю ползунки на этой панели, пока мне не понравится результат.

Шаг 2

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

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

Шаг 3

Дайте персонажу рубашку. Мне понравилось, как этот цвет сочетался с цветом брюк. Я сделала рубашку с короткими рукавами и V-образным вырезом.

Шаг 4

Как я уже говорил, вы можете добавить приличное количество деталей — например, галстук или какой-нибудь рисунок посередине рубашки. Я добавил несколько (низкоконтрастных) полос.

Шаг 5

И, наконец, еще один слой одежды: куртка. Если хотите, вы также можете подарить персонажу такие аксессуары, как жилет, наручные часы или наушники.

4. Затените персонажа

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

Шаг 1

Создайте новый слой и на нем черным цветом нарисуйте тени.

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

Я подумал, что руки слишком малы, чтобы их можно было заштриховать.

Шаг 2

И чтобы применить затенение, просто уменьшите Непрозрачность слоя до 15% или где-то около того.Вы можете сделать это на панели Layers или также нажав 15 на клавиатуре, когда выбран Move Tool .

Затем вы можете Объединить  ( Слой > Объединить ) и экспортировать графику.

При взгляде на 100% персонаж может быть слишком маленьким, чтобы его можно было оценить. Таким образом, вы можете Выбрать это, Копировать это и Изменить масштаб на 200% или 300% ( Редактировать > Свободное преобразование ) с Интерполяцией 9014 Ближайший установить на .

Затем Сохраните , желательно в формате PNG или GIF, и все готово!

Отлично, персонаж готов!

Поздравляем! Вы закончили пиксельного персонажа.

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

PIXEL ART РУКОВОДСТВО: ОСНОВЫ

Metal Slug 3 (Аркада). СНК, 2000.

Pixel Art, также известный как dot art в Японии, представляет собой форму цифрового искусства, в которой редактирование выполняется на уровне пикселей.В первую очередь это связано с графикой видеоигр 80-х и 90-х годов, когда коммерческие художники напрягали ограниченную память и низкие разрешения, чтобы создавать все более привлекательные визуальные эффекты. В наши дни он по-прежнему популярен в играх и как форма искусства сам по себе, несмотря на возможность реалистичной 3D-графики. Почему? Что ж, если отбросить ностальгию, создание ярких произведений искусства в таких жестких условиях остается веселой и полезной задачей. Точно так же, как мы восхищаемся тем, как несколько мазков тренированной рукой могут передать форму и вызвать эмоции, мы восхищаемся тем, как несколько пикселей могут сочетаться друг с другом.

Входной барьер для пиксельной графики также относительно низок по сравнению с нарисованной или трехмерной графикой, что делает ее хорошим вариантом для независимых разработчиков игр, стремящихся воплотить свои идеи в жизнь. Но не заблуждайтесь, это никоим образом не означает, что с ним действительно легко ЗАКОНЧИТЬ игру. Я видел, как многие инди-разработчики запускали свою пиксель-арт-метроидванию, думая, что у них есть год, чтобы закончить, хотя на самом деле это больше похоже на шесть лет. Пиксель-арт на том уровне, на котором его хочет делать большинство людей, требует много времени, и существует очень мало способов его создания.По крайней мере, с 3D-моделью вы можете вращать ее, деформировать, перемещать ее конечности, копировать анимацию из одной модели в другую и т. д. Пиксельная графика высокого уровня почти всегда требует большого количества кропотливого размещения пикселей в каждом кадре.

После этого предупреждения немного о моем стиле: в основном я использую пиксельную графику для создания видеоигр, и именно из игр я черпаю большую часть своего вдохновения. В частности, я фанат Famicom/NES, 16-битных консолей и аркадных игр 90-х. В моих любимых играх той эпохи была пиксельная графика, которую я бы назвал красочной, смелой и чистой… но не настолько чистый, чтобы он был жестким или минималистичным. Это стиль, который я смоделировал для себя, но вы можете легко применить идеи и методы, описанные в этом уроке, к чему-то совершенно другому. Изучайте разных художников и делайте пиксель-арт таким, каким вы хотите его видеть!

Основными инструментами, необходимыми для пиксельной графики, являются масштабирование и карандаш для размещения пикселей. Также полезны инструменты линии/формы, инструменты выбора/перемещения и ведро с краской для быстрой заливки. Существует множество бесплатных и платных вариантов программного обеспечения, в которых есть эти инструменты.Здесь я опишу некоторые из самых популярных (в том числе те, которые использую я).

Краска

Если вы работаете в Windows, то встроенная программа для рисования является простой, но имеет все вышеперечисленные инструменты, необходимые для создания пиксельной графики.

Удивительно надежный редактор пиксельной графики, работающий в вашем браузере! Можно экспортировать в PNG или анимированный GIF, а также сохранять локально в браузере. Это кажется отличным стартовым вариантом.

GraphicsGale — это первый автономный редактор, о котором я слышал, он был разработан только для пиксельной графики и оснащен инструментами для анимации.Созданный японской компанией HUMANBALANCE, он стал бесплатным в 2017 году и до сих пор широко используется, несмотря на растущую популярность Aseprite. К сожалению, это только Windows.

Кажется, сейчас это самый популярный редактор. Полный набор функций, активно разрабатываемый и доступный для Windows, Mac и Linux. Кроме того, это открытый исходный код, и его можно использовать бесплатно, если он скомпилирован из исходного кода. Если вы серьезно относитесь к созданию пиксель-арта и у вас еще нет редактора, к которому вы привязаны, возможно, это то, что вам нужно.

GameMaker Studio 2 — отличный инструмент для создания игр, ориентированный на 2D, который включает в себя достойный редактор спрайтов. Если вы заинтересованы в создании пиксельной графики для своих игр, очень удобно делать все это в одном и том же программном обеспечении. В настоящее время (в 2019 году) я использую его для создания UFO 50, сборника из 50 ретро-игр. В основном я использую редактор спрайтов GameMaker для спрайтов и создаю наборы тайлов в Photoshop.

Поскольку Photoshop — это дорогое приложение на основе подписки, которое не предназначено для пиксельной графики, я не рекомендую его, если у вас уже нет его для рисования или обработки изображений.Он может выполнять работу для статических спрайтов и пиксельных иллюстраций (например, те, которые я сделал для этого урока), хотя он довольно громоздкий по сравнению с специализированными приложениями, такими как GraphicsGale или Aseprite..

Мои настройки пиксельной графики. Очень черный, я сейчас заметил…

Планшет для рисования +

Я настоятельно рекомендую планшет для рисования для любых цифровых работ, чтобы предотвратить повторяющиеся стрессовые травмы запястий. RSI гораздо легче предотвратить, чем исправить. Как только они начинают болеть, вы уже катитесь вниз (мои дни рисования мышью затрудняли игры, требующие нажатия кнопок).Так что начните заботиться о себе заранее – оно того стоит! В настоящее время я использую небольшой Wacom Intuos Pro.

Защита для запястья

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

Финальный бой (Аркада). Capcom, 1989 г. (Источник)

Начнем! В этом уроке мы начнем с создания спрайта персонажа размером 96×96 пикселей.Я решил создать орка, но вы можете выбрать что-нибудь другое! Я поместил своего готового орка на скриншот Final Fight выше, чтобы дать вам представление о масштабе — это большой спрайт для большинства ретро-игр (скриншот 384×224).

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

1. Выбор палитры

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

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

В этом уроке я буду использовать 32-цветную палитру, которую мы создали для UFO 50. 32 цвета — популярный выбор для пиксельных палитр, но 16 цветов также распространены. Эта конкретная палитра была разработана для вымышленной консоли, которая находилась бы где-то между Famicom и PC Engine. Вы можете использовать его свободно, чтобы быстро обойти этот шаг! (Или нет! Этот урок вообще не зависит от палитры.)

2. Грубый план

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

3. Очистка контура

Далее мы очистим контур, удалив случайные пиксели и уменьшив толщину каждой линии до одного пикселя.Но какие именно пиксели мы удаляем? Чтобы ответить на этот вопрос, нам нужно узнать о пиксельных линиях и «неровностях».

Ягги

Есть две основные линии, которые нам нужно научиться делать в пиксель-арте: прямые и изогнутые. С ручкой и бумагой это в основном проблема контроля мышц, но мы работаем с маленькими цветными блоками, что создает новый вид задач.

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

Рассмотрим несколько примеров:

Прямые линии

Изогнутые линии

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

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

4. Нанесение первых цветов

С помощью Paint Bucket или любого другого инструмента заливки раскрасьте своего персонажа! Палитра сделает эту часть проще, и если ваше программное обеспечение для рисования не поддерживает палитры, вы всегда можете вставить свою палитру в само изображение (как я сделал здесь) и выбрать цвета с помощью инструмента «Пипетка».

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

5. Затенение

Пришло время тени! Основная идея заключается в том, что мы собираемся добавить к спрайту более темные цвета (называемые оттенками ) для имитации тени, тем самым сделав спрайт трехмерным, а не плоским. Для этого урока предположим, что над орком и немного перед ним есть один источник света, поэтому все сверху и/или спереди яркое.Мы добавим более темные цвета к нижней и задней части орка.

Форма и том

Если у вас возникли проблемы с этой частью, вам может понадобиться потренироваться думать о рисунках как о формах с объемом , а не просто о линиях и цвете. Формы существуют в трехмерном пространстве и могут иметь объем, заполняющий это пространство. Затенением мы выделяем этот объем.

Это может помочь вам визуализировать своего персонажа без всех его деталей и представить, что он сделан из глины, а не из пикселей.Затенением вы не просто добавляете цвет — вы создаете форму. Четко очерченный персонаж имеет детали, которые не затемняют основные формы — если прищуриться, все равно должно появиться несколько больших скоплений света и тьмы.

Сглаживание

Каждый раз, когда я добавляю новый оттенок цвета, я применяю сглаживание (также известное как AA ), которое позволяет сгладить блочные пиксели, помещая «промежуточные» цвета в углы, где два сегменты линии встречаются:

Серые пиксели смягчают «разрывы» в нашей линии.Чем длиннее отрезок линии, тем длиннее отрезок AA мы используем для его смягчения.

Справа вы можете увидеть, как выглядит АА применительно к плечу нашего орка. Я использую его, чтобы сгладить линии, определяющие кривизну его мышц.

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

6. Выборочное выделение

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

Чтобы придать спрайту более натуралистичный вид и смягчить сегментацию (чтобы подчеркнуть основную форму нашего персонажа), мы можем использовать технику, называемую выборочное обведение или выделение .Selout означает замену большей части черного контура более светлыми цветами. Ближе кверху, где свет падает на наш спрайт, мы будем использовать самые светлые цвета или, где спрайт встречается с негативным пространством, мы можем полностью его удалить. Для сегментации (например, для мышц, текстуры меха и т. д.) мы можем использовать более темные цвета теней вместо чистого черного.

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

7. Последние штрихи

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

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

Дизеринг

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

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

Наконец, внизу мы применили дизеринг, который смягчает эффект полос и использует только 2 цвета! Идея состоит в том, чтобы создать шума различной плотности для имитации градации цвета.Это очень похоже на метод под названием «полутона», который используется в печати. Или «зернистость» в иллюстрациях и комиксах.

Я редко использую дизеринг — на орке я добавил совсем немного для текстуры. Некоторые пиксельные художники вообще не используют сглаживание. Некоторые используют его экстенсивно и заставляют его выглядеть довольно хорошо. В общем, я думаю, что это лучше всего работает на больших участках одного цвета (внимательно посмотрите на небо на снимке экрана Metal Slug 3 сверху) или в местах, которые мы хотим выглядеть шероховатыми или ухабистыми (например, грязь).Если вам нравится, как это выглядит, поэкспериментируйте с ним и узнайте, как заставить его работать лучше всего для вас!

Если вы хотите увидеть широкое и качественное использование сглаживания, изучите игры Bitmap Brothers, британской игровой студии 80-х годов, или игры на PC-98, японском компьютере (обратите внимание, что многие игры для PC-98 являются NSFW):

Какюсей (ПК-98). Эльф, 1996 год. (Источник) На этом изображении всего 16 цветов!

8. Последний взгляд

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

Даже если вы не делаете пиксельную графику для игр, хорошо иметь возможность сказать: «Этого достаточно!» и двигаться дальше.Лучший способ улучшить свои навыки — увидеть весь процесс от начала до конца как можно больше раз, по как можно большему количеству разных тем. По крайней мере, оставив кусочек на некоторое время, вы сможете взглянуть на него свежим взглядом!

Сначала мы создали большой спрайт 96×96, потому что при таком размере он по-прежнему похож на рисование и раскрашивание, но с пикселями. Чем меньше становится спрайт, тем меньше ваш спрайт похож на то, что он должен представлять, и тем больше ответственности несет каждый отдельный пиксель.

В Super Mario Bros. глаз Марио — это всего лишь два пикселя, наложенные друг на друга. Как и его ухо. А его создатель, Сигэру Миямото, объяснил, что причина, по которой у него есть усы, заключается в том, что они нужны им, чтобы отличить его нос от остального лица. Таким образом, одной из самых знаковых особенностей Марио был не только выбор дизайна персонажа, но и прагматичный выбор! Доказательство старой поговорки о том, что потребность — мать изобретения… и дает нам дополнительное понимание того, почему пиксельная графика так интересна.

Имея все это в виду, основные шаги, которые мы предпримем для создания спрайта 32×32, на самом деле очень похожи на спрайт 96×96: набросок, цвет, оттенок, а затем полировка. Однако для первоначального наброска я часто использую цветные фигуры вместо рисования контура, потому что при таком размере цвет играет большую роль в определении персонажа, чем контуры. Если мы снова посмотрим на Марио, у него вообще нет контура! И дело не только в его усах: бакенбарды определяют его уши, рукава определяют его руки, а его комбинезон более или менее делает все его тело понятным.

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

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

Полный отряд в сборе!

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

Вышеупомянутое — это то, что произойдет, если вы сохраните свое изображение в формате JPG , формате файла с потерями .Это означает, что данные фактически теряются при их сохранении из-за способа сжатия файла (для уменьшения размера файла). С практической точки зрения, ваш красивый, четкий пиксель-арт в конечном итоге будет выглядеть размытым, и вы не сможете легко вернуть его исходную палитру.

Рекомендуемый формат файла без потерь для статических пиксельных изображений — PNG. Для анимации наиболее популярным форматом являются анимированные GIF-файлы.

Поделитесь своим пиксельным искусством в социальных сетях — это отличный способ получить отзывы и познакомиться с другими пиксельными художниками (не забудьте использовать хэштег #pixelart !).К сожалению, веб-сайты социальных сетей, как правило, конвертируют PNG в JPG без запроса, что запятнает вашу работу, когда она становится общедоступной. Кроме того, может быть трудно понять, что именно в вашем изображении вызвало конверсию!

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

Твиттер

Ключ к сохранению целостности PNG в Твиттере — убедиться, что они содержат менее 256 цветов или менее 900 пикселей по самой длинной стороне.(Источник) Я бы также увеличил ваши изображения как минимум до 512×512 пикселей, убедившись, что вы увеличиваете масштаб до чистого множителя (например, 200%, а не 250%) и сохраняете резкие края (называемые «ближайшим соседом» в Photoshop).

Анимированные GIF-файлы должны быть меньше 15 МБ для публикации в Твиттере. Что касается качества, преобладающая теория заключается в том, что они должны быть не менее 800×800 пикселей, а циклическая анимация должна повторяться три раза, при этом последний кадр GIF отображается на половине длины каждого другого кадра.Однако неясно, насколько необходимы все эти шаги, поскольку Twitter продолжает обновлять способы отображения изображений. По крайней мере, я бы убедился, что анимация имеет минимальный размер. (Источник)

Инстаграм

Насколько я могу судить, нет возможности публиковать изображения без потерь в Instagram, но вы можете улучшить внешний вид, увеличив масштаб изображения как минимум до 512 x 512 пикселей.

Онлайн-курс — Пиксельная анимация персонажей для видеоигр (Даниэль Бенитес)

Эстетика Пиксельное искусство возвращается, чтобы остаться с такими художниками, как Даниэль Бенитес, разработчик видеоигр и соучредитель студии Fourattic, благодаря которым она живет в своих творениях.В этом курсе я научу вас методам и процессам, которым нужно следовать, чтобы анимировать персонажа видеоигры и его окружение в пиксельной графике с помощью инструмента Pyxel Edit.

Если вы уже прошли предыдущий курс Даниэля «Введение в дизайн персонажей в пиксельной графике », в этом вы сделаете шаг вперед, анимируя свои творения кадр за кадром и изучая собственные концепции анимации, такие как тайминг , предвкушение или размытие движения и такие процессы, как экспорт и оптимизация листов спрайтов .

Вы начнете со знакомства с Дэниелом, который расскажет вам о своей карьере в мире дизайна видеоигр и, в частности, о пиксельной графике . Затем он выделит некоторых аниматоров пиксельной графики , которые оказали на него наибольшее влияние в эти годы, а также аниматоров и анимационных студий, не связанных с пиксельной графикой , которые также отметили его.

Если вы еще этого не сделали, загрузите Pyxel Edit, а затем Даниэль проведет вас по его интерфейсу, уделив особое внимание наиболее важным инструментам программы для разработки анимации.

Вы создадите проект, используя наборов тайлов в Pyxel Edit. Вы узнаете, что такое тайлов и для чего они используются в анимации.

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

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

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

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

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

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

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

Вам потребуются базовые знания о дизайне персонажей и знакомство с Pyxel Edit или программами с аналогичными функциями, такими как Adobe Photoshop или Flash.

Pixelblog — 22 — Спрайты персонажей сверху вниз — SLYNYRD

Чтобы сохранить эстетику пиксельной графики, существует ограниченный диапазон допустимых разрешений.Слишком высокое разрешение, и оно больше не отображается как пиксель-арт. Слишком низкое разрешение и это становится абстрактными блоками. Это оставляет нам несколько приемлемых вариантов, которые идеально масштабируются до 1920×1080 и точно подходят для других распространенных дисплеев.

320×180(6x) Довольно крупный при просмотре на большом экране, но все же приемлемый ретро-вид
480×270(4x) Хорошо подходит для моего макета сверху вниз, сделанного с плитками 16x16px
640×360(3x) Это разрешение shmup I Делаю, Тирианские защитники

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

При выборе размера важно учитывать относительный размер спрайтов, которые должны отображаться на экране, и то, как это может повлиять на игровой процесс.Чем выше разрешение, тем меньше становятся единицы пикселей, иначе все будет выглядеть более уменьшенным. Следовательно, более высокие разрешения могут хорошо подойти для чего-то с быстрой прокруткой и быстро движущимися спрайтами. Если вы хотите чего-то менее раздражительного или просто хотите выглядеть в стиле ретро, ​​возможно, вы захотите попробовать одно из более низких разрешений. В конечном счете, размер экрана — это то, что вы должны смоделировать и проверить на себе, прежде чем принять решение.

Заключительные мысли

Что ж, это третья и последняя часть моей многосерийной серии на темы сверху вниз.С самого начала у меня был общий план с намерением создать сплоченный игровой мир с уроками, которые строятся друг на друге. Честно говоря, я не совсем был уверен, что у меня получится, когда все, что у меня будет, это трава и грязные плитки, но с каждым уроком мир становился все более живым. Теперь это начинает ощущаться как настоящая игра, и мне почти хочется, чтобы это было так. Надеюсь, вы многому научились в этом путешествии со мной. Я знаю, что у меня есть. Хотя это немного грустно, я перейду к новой теме в следующем Pixelblog, но я не думаю, что вы видели последний из этого мира.Есть еще много возможностей расширить этот мир новыми уроками по нисходящим предметам.

РЕСУРСЫ

Была ли эта статья полезной? Если вы найдете ценность в моем контенте, рассмотрите возможность стать участником Patreon . Помимо многих других наград, участники Pixel Insider получают дополнительные ресурсы в дополнение к моим учебным пособиям. Но самое главное, вы позволяете мне продолжать создавать новый контент.

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

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

Получите доступ к всем моим загрузкам

Если вы не готовы подписаться на модель Patreon, сделайте единовременное пожертвование   и получите эксклюзивное искусство и ресурсы. Помогите продолжить контент, предоставив мне средства к существованию.Спасибо!

— Рэймонд Шлиттер

Мгновенная загрузка

Отлично! вы все вошли в систему. Нажмите, чтобы загрузить свой ресурс.

Скачать

Описание

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

Уровень

Области обучения

Коллекции

Цели урока

Студенты узнают, как создавать пиксель-арт.

Учащиеся изучат произведения искусства, в которых используются пиксели, и обсудят характеристики и значение произведений искусства.

Учащиеся поймут основы использования приложения для цифрового рисования.

Чтобы получить доступ к полному эксклюзивному контенту, вы должны быть участником FLEX.

Узнать больше

Войти

Стратегии обучения

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

Чтобы получить доступ к полному эксклюзивному контенту, вы должны быть участником FLEX.

Узнать больше

Войти

Национальные стандарты

---

Создать

Демонстрировать готовность экспериментировать, вводить новшества и рисковать, преследуя идеи, формы и смыслы, возникающие в процессе творчества. изготовление или проектирование.

ВА:Cr2.1.8a

Чтобы получить доступ к полному эксклюзивному контенту, вы должны быть участником FLEX.

Узнать больше

Войти

Требования к времени

Время подготовки учителя

45 минут

Время демонстрации

45 минут

Время студенческой студии

4 часа 20 минут

Принадлежности и материалы

• Цифровое устройство (планшет или компьютер)
• Приложение для цифрового рисования
• Цифровая камера (устройство или телефон)
• Альбом для рисования
• Карандаш
• Ластик

Национальные стандарты

---

Создать

Демонстрировать готовность экспериментировать, вводить новшества и рисковать, преследуя идеи, формы и смыслы, возникающие в процессе творчества. изготовление или проектирование.

ВА:Cr2.1.8a

Чтобы получить доступ к полному эксклюзивному контенту, вы должны быть участником FLEX.

Узнать больше

Войти

Шаги

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

Чтобы получить доступ к полному эксклюзивному контенту, вы должны быть участником FLEX.

Узнать больше

Войти

Учебные материалы

Закрыть

Банк мультипликационных персонажей

Тип ресурса

Артикул

Области обучения

Коллекции

Эксклюзивное содержимое FLEX

Чтобы получить доступ к этому эксклюзивному контенту, вы должны быть участником FLEX.

Получить Flex в моей школе

Закрыть

Цветовые схемы

Тип ресурса

Якорная диаграмма

Области обучения

Коллекции

Профессиональные пакеты

Эксклюзивное содержимое FLEX

Чтобы получить доступ к этому эксклюзивному контенту, вы должны быть участником FLEX.

Получить Flex в моей школе

Закрыть

пикселей в искусстве

Тип ресурса

Артикул

Области обучения

Коллекции

Профессиональные пакеты

Эксклюзивное содержимое FLEX

Чтобы получить доступ к этому эксклюзивному контенту, вы должны быть участником FLEX.

Получить Flex в моей школе

Закрыть

Руководство по грамотности Flex

Тип ресурса

Области обучения

Коллекции

Профессиональные пакеты

Эксклюзивное содержимое FLEX

Чтобы получить доступ к этому эксклюзивному контенту, вы должны быть участником FLEX.

Получить Flex в моей школе

Закрыть

3 2 1 Саморефлексия

Тип оценки

Отражение

Области обучения

Коллекции

Эксклюзивное содержимое FLEX

Чтобы получить доступ к этому эксклюзивному контенту, вы должны быть участником FLEX.

Получить Flex в моей школе

Закрыть

Создать отряд

Молодец!

В ваш отряд добавлен материал!

Закрыть

Перейти в класс или подразделение

ДОБАВИТЬ

Это было добавлено в .

Отмена

Эксклюзивное содержимое FLEX

Чтобы получить доступ к этому эксклюзивному контенту, вы должны быть участником FLEX.

Получить Flex в моей школе

Отмена

Получите FLEX в моей школе

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

Готово!

Мы скоро свяжемся с вашей школой!

Пиксель-арт: 31 ретро-пример

Пиксель-арт — это тип цифрового искусства, который восходит к заре компьютерной графики, когда на экране было лишь ограниченное количество пикселей, и поэтому любые визуальные эффекты, которые вы создавали, выглядели довольно грубыми и блочными.Однако то, что когда-то было негативным, теперь стало позитивным, поскольку поколение, испытывающее ностальгию по графике игр 1980-х и 1990-х годов, возвращает стиль к жизни новыми и интересными способами.

Здесь мы собрали одни из лучших пиксельных рисунков. Они варьируются от прямой дани любимым видеоиграм до использования подхода пиксельной графики для создания чего-то оригинального и нового. Как и в случае с искусством Lego, кажется, что нет конца способам, которыми креативщики могут заново изобретать дисциплину и привносить в нее свой собственный уникальный подход.

Хотите сделать свой собственный пиксель-арт? Тогда вам не нужно тратить деньги на дорогостоящие инструменты. Просто ознакомьтесь с нашей подборкой лучших бесплатных программ для графического дизайна. А если вы хотите сделать на этом карьеру, ознакомьтесь с нашим руководством «Как начать заниматься пиксель-артом».

01. Рыцари Сидонии Йохана Аронсона

Культовый японский комикс и анимация вдохновили на создание этого классного фрагмента пиксельной графики (Изображение предоставлено Йоханом Аронсоном)

Художественный руководитель игровой студии Mojang Йохан Аронсон хорошо известен своим миром 2D пиксель-арт класса.Эта привлекательная работа отдает дань уважения «Рыцарям Сидонии», новаторской космической оперной манге Цутому Нихея, которая породила аниме-сериал, ставший культовым в сообществе разработчиков игр.

02. Пейзаж от Jubilee

Этот потрясающий пейзаж был вдохновлен студией Ghibli (Изображение предоставлено Jubilee). кажется одновременно знакомым и свежим оригинальным.Вдохновленный анимацией Studio Ghibli, этот пейзаж полон волшебных обещаний.

03. Jungle Temple by Richard Schmidbauer

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

04. Pixel China Mountains от Матея Ян

Ян говорит, что в его пиксель-арте сначала искусство, потом пиксели (Изображение предоставлено: Матей Ян)

Матей Ян начал рисовать в цифровом виде на своем компьютере ZX Spectrum в 1990-х, и сейчас редактирует блог, посвященный пиксель-арту, под названием Retronator. Его собственные работы варьируются от изображений, наполненных остроумными отсылками к поп-культуре, до детализированных пейзажей, которые доводят среду до предела, таких как эти восхитительные пиксельные горы Китая.

05.The Witness by Pixel Jeff

The Witness основан на сериале Netflix «Любовь, смерть и роботы»

Pixel Jeff — профессиональный пиксельный художник из Тайваня, чье портфолио разнообразно и ярко: от городских пейзажей до диснеевских принцесс. The Witness — это дань уважения сериалу Netflix «Любовь, смерть и роботы» в пиксельной графике, и в ней чувствуется насыщенная действием видеоигра, в которую нам не терпится поиграть!

06. Корпорации Кензе Ви Хон Минг

Пиксель-арт в его самом атмосферном и замысловатом виде

Внештатный иллюстратор из Сингапура Кензе Ви Хон Мин имеет внушительное портфолио работ на своей странице в Behance.Вдохновленный искусством Ромена Тристрама, его искусство сосредоточено в разных местах по всему миру.

07. Pixel Art TV от Густаво Визельнера

Stranger Things, переосмысленный в форме пиксель-арта

Густаво Визельнер — израильский художник-пиксель, а его серия Pixel Art TV запечатлела основные сцены классических телешоу, сопровождаемые цитатами из диалогов. Очаровательный сериал охватывает целый ряд жанров, от современных сериалов, таких как «Игра престолов», «Во все тяжкие» и «Очень странные дела», до старых фаворитов, таких как «Друзья» и «Принц из Беверли-Хиллз».

08. Эмоциональные пиксели от Пратика Ваташа 

Дизайны Ваташа выводят пиксельную графику на новый уровень

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

09. Пиксельная Британия от Holiday Cottages

Восемь типичных британских сцен в ретро-стиле в этой коллекции 16-битной пиксельной графики для продвижения коттеджей.co.uk. В наборе изображены места по всей Великобритании, от Белых скал Дувра до Гленфиннианского виадука, как будто их прожевала и выплюнула Atari.

10. Pixelomics

Душан Чежек — чешский пиксельный художник, автор нескольких суперпопулярных 8-битных пиксельных проектов. Гифка выше взята из его коллекции супергероев Pixelomics, и просто поразительно, как мало пикселей ему нужно, чтобы сделать своих персонажей мгновенно узнаваемыми.

11. Dark Side от Романа Гонзо

Противостояние злодеев из «Звездных войн», которое мы все хотели бы увидеть, в пиксель-арте

Украинский аниматор Роман Гонзо заработал репутацию превосходного пиксельного искусства, которое он создает используя Photoshop на своем Wacom.На этом изображении представлены стилизованные версии злодеев из «Звездных войн» Дарта Мола, Джанго Фетта и Дарта Вейдера.

12. Street Fashion Fighter от Joojaebum

Street Fashion Fighter сочетает знаменитую моду с ударами эпохи аркад. Street Fashion Fighter, художник облачил главных героев игры в модные наряды современных знаменитостей, включая Дрейка, Канье Уэста и Фаррелла Уильямса.

13. Intro to Pixel Art by Mishko

Глючный, психоделический поворот в пиксельной графике

Неван Дойл, также известный как Мишко, является видеографом, графическим дизайнером и фотографом из Орегона, который специализируется на привлекательных абстрактных проектах с редкими прикосновение глючной прохлады. В его «Введении в пиксель-арт» пиксельные техники сочетаются с глюками, гранжем и визуальной обратной связью, создавая потрясающий эффект.

14. Science Kombat от Диего Санчеса

Диего Санчес — бразильский иллюстратор из Сан-Паулу, специализирующийся на пиксель-арте.Нам особенно нравятся эти анимации, которые он создал для Science Kombat, браузерной игры beat-em-up для журнала Superinteressante. В нем представлены восемь играбельных ученых, включая Альберта Эйнштейна, Чарльза Дарвина, Марию Кюри и сэра Исаака Ньютона, каждый со своими базовыми и специальными атаками.

15. Моана от Pixel Jeff

Нам так нравится работа Pixel Jeff, что мы не могли просто ограничиться одной записью в этом списке. Итак, вот его красочный взгляд на Моану Диснея, красиво переосмысленный как видеоигра, которую мы хотели бы иметь возможность планировать.Прокрутите вниз его сообщение в блоге, и вы увидите новые забавные версии блокбастеров.

16. Bopping Pixels от Ian Dixon

Вы когда-нибудь задумывались, как бы выглядели ваши любимые персонажи, если бы они были уменьшены до пикселей и прыгали вверх и вниз? Больше не удивляйтесь, поскольку пиксельный иллюстратор и создатель GIF Иван Диксон обратил свое внимание на всех, от принца Джеффри до Тин Тина, в своем странно завораживающем проекте Bopping Pixels.

17. «Звездные войны» Густаво Визельнера

Эпизод IV «Звездных войн: Новая надежда» в пиксель-арте.Мнения могут разделиться по поводу некоторых приквелов и сиквелов, но каждый поклонник «Звездных войн» может увидеть сцену из оригинального фильма 1977 года, когда Оби-Ван тренирует Люка, Чуи и C-3PO играть в голографические шахматы.

18. Pixel Daily by Ben Porter

В рамках этого годичного проекта было создано 365 пиксельных артов.

Разработчик игр Бен Портер так любит пиксель-арт, что запустил Pixel Dailies, онлайн-клуб пиксель-арта. Каждый день он публиковал в Твиттере тему, и другие люди участвовали в создании иллюстраций на эту тему.Он продолжал это в течение целого года, и результаты все еще можно увидеть в специальном аккаунте в Твиттере.

19. Bugroid от Nasc

Наполовину ошибка, наполовину Android, все мило

Веб-разработчик Наск специализируется на разработке Flash и Android, а в свободное время создает пиксель-арт. Нам нравится этот проект Bugroid, который превращает популярных мультяшных персонажей в милые пиксельные творения, которые наполовину насекомые, наполовину на Android: от Симпсонов до Заботливых мишек.

20. Night by Waneella

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

21. Pixel Pour от Келло Голлер

Работа Геллер переносит искусство пикселя в реальный мир реальный мир. Ее водные пиксели были установлены по всему городу, предлагая горожанам игривый визуальный и воображаемый контекст, объединяющий оба мира.

22. Fine Pixel Art от John O’Hearn

Художник Джон О’Хирн работает с крошечными элементами, создавая впечатляющие работы в натуральную величину, используя потенциал цвета, элементов и иллюзии. Его видео Fine Pixel Art, показанное выше, представляет собой отличный пример его творческого гения.

23. Стив Джобс, Metin Seven

Работа Seven сочетает в себе пиксельную графику с 3D-элементами

Работа Metin Seven сочетает в себе дизайн и пиксельную графику с 3D-элементами с динамичными и детализированными результатами.Это изображение переосмысления Стива Джобса — удивительно привлекательный пример того, на что он способен.

24. Ковер от Cristian Zuzunaga

Cristian Zuzunaga по-новому играет с пикселями

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

25. Настенная роспись «Поговори со мной» в MoMA

MoMA устраняет разрыв между дизайном и коммуникацией с помощью пиксельной графики

Еще в 2011 году MoMA использовал простые комбинации квадратов для создания яркого и интересного графического рисунка на основе предметов с выставки, Talk Мне.Благодаря значкам, созданным Юин Чо и Сэмюэлем Шерманом, в этом дизайне чувствуется динамичность, которая действительно вызвала у посетителей желание увидеть главное событие.

26. Значок мыши от Бена Фино-Радина

Бен Фино-Радин показывает, как пиксели могут вдохновлять и управлять различными областями дизайна Radin является частью коллекции, которая исследует идеи размера и формы с помощью значков мыши в натуральную величину.

27.Quetzalcóoatl by Mario Sifuentes

Марио Сифуэнтес использует пиксельную графику для создания собственной интерпретации доиспанского Бога

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

28. Берлинский постер от Eboy

Типичная работа Eboy, крестных отцов пиксель-арта 

Замысловатые иллюстрации австралийского художника Пола Робертсона включают в себя все, от детских, семейных рисунков до некоторых действительно NSFW.Будь то карамельно-красочный, как на картинке выше, или причудливый, темный и тревожный, все, к чему он прикасается, кажется золотым в пиксель-арте.

29. Pixel Art Land Гэри Лакена

Пиксельная графика Гэри Лакена вдохновлена ​​видеоиграми и многим другим. Его блог Army of Trolls полон его вызывающих воспоминания и волшебных пиксельных работ.

30. CGA Faces от Свена Рутнера

Свен Рутнер оттачивает свое внимание с помощью ограниченной цветовой палитры

Живущий в Германии внештатный пиксельный художник Свен Рутнер получил международное признание за свои пиксельные работы.Он известен тем, что использует ограниченную цветовую палитру, похожую на предложения первых домашних компьютеров, таких как ZX Spectrum. Это конкретное произведение было создано с использованием всего 16 цветов.

31. Robinson Nerdo от Тима Весоли

Пиксельные персонажи Тима Весоли очень характерны

Тим Весоли — ведущий разработчик 3D-моделиста Qubicle. Когда он не работает над своим программным обеспечением, он использует его для создания пиксельной графики, такой как этот крутой персонаж Робинзона Нердо. Иллюстрация обманчиво сложна; вы обнаружите, что замечаете новые вещи каждый раз, когда смотрите на него.

Части этой статьи изначально были опубликованы в журнале ImagineFX ; подпишитесь здесь .

Статьи по теме:

Разработка двухмерного пиксельного персонажа

В этом уроке вы узнаете, как создать персонажа 16×16 в стиле RPG. Этот учебник предназначен для начинающих.

Голова и глаза

Голова — самый большой элемент нашего персонажа. Если бы голова была немного меньше, чем эта, вы бы ничего не смогли туда поместить, и это было бы глупо.Размеры головы 8х5.

Туловище и ноги

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

Теперь, прежде чем вы покинете урок, мы НЕ делаем ноги из палочек. Эти линии — стороны ног, а не вся нога. Как и многие другие элементы, они не будут хорошо смотреться без цвета.

Оружие

Руки довольно широкие, если хотите, можете немного изменить ширину, но этот размер хорош для нашего персонажа.На данном этапе весь персонаж выглядит довольно неряшливо, но когда мы добавим цвет, он будет выглядеть ооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооо

Волосы

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

Добавление цвета!

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

Затенение

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