Как рисовать в пикселях: 11 программ для работы с пиксель-артом — Gamedev на DTF

Pixel art для начинающих. Введение.

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

Но для начала немного истории (не переносите длинных вступлений? Смело пропускаете два-три абзаца).

 1. История (очень коротко).

 

 

Pixel art (пишется без дефиса) или пиксельная графика – направление цифрового искусства, которое заключается в создании изображений на уровне пикселя (т. е. минимальной логической единицы, из которой состоит изображение). Далеко не все растровые картинки являются пиксель артом, хотя все они и состоят из пикселей. Почему? Потому что в конечном счёте понятие pixel art вмещает в себя не столько результат, сколько процесс создания иллюстрации.

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

 

Сейчас неизвестно, когда точно зародилась эта техника, корни теряются где-то в начале 1970-х. Однако приём составления изображений из малых элементов восходит к куда более древним формам искусства, таким как мозаика, вышивание крестиком, ковроплетение и бисероплетение. Само же словосочетание «pixel art» как определение пиксельной графики впервые было использовано в статье Адель Голдберг и Роберта Флегала в журнале Communications of the ACM (декабрь 1982-го).

Наиболее широкое прикладное применение pixel art получил в компьютерных играх, что неудивительно – он позволял создавать изображения, нетребовательные к ресурсам и выглядящие при этом по-настоящему красиво (при этом отнимающие у художника немало времени и требовавшие определённых навыков, а потому подразумевающие хорошую оплату труда). Расцветом, наивысшей точкой в развитии официально называют видеоигры на приставках 2-го и 3-го поколения (начало 1990-х). Дальнейший прогресс технологий, появление сперва 8-битного цвета, а затем и True Color, развитие трёхмерной графики – всё это со временем оттеснило pixel art на второй и третий планы, а потом и вовсе стало казаться, что пиксельной графике пришёл конец.

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

 

Разумеется, свою роль в возвращении пиксельной графики сыграли различные ретроградно настроенные элементы, любящие поностальжировать над старыми-добрыми играми детства, приговаривая при этом: «Эх, теперь такого не делают»; эстеты, способные оценить красоту пиксель арта, и инди-разработчики, не воспринимающие современные графические красоты (а иногда, правда редко, элементарно не умеющие их реализовать в собственных проектах), оттого и ваяющие pixel art. Но давайте всё-таки не будем сбрасывать со счетов сугубо коммерческие проекты – приложения для мобильных устройств, рекламу и web-дизайн.

 

Так что сейчас pixel art, что называется, широко распространён в узких кругах и заработал себе своеобразный статус искусства «не для всех». И это несмотря на то, что для простого обывателя он предельно доступен, ведь чтобы работать в этой технике, достаточно иметь под рукой компьютер и простейший графический редактор! (умение рисовать, между прочим, тоже не помешает) Хватит слов, ближе к делу!

 

2. Инструменты.

Что нужно для создания пиксель арта? Как сказал выше, достаточно компьютера и любого графического редактора, способного работать на уровне пикселей. Рисовать можно где угодно, хоть на Game Boy, хоть на Nintendo DS, хоть в Microsoft Paint (другое дело, что рисовать в последнем крайне неудобно). Есть великое множество растровых редакторов, многие из них бесплатны и достаточно функциональны, так что с программным обеспечением каждый может определится самостоятельно.

 

Я рисую в Adobe Photoshop, потому что удобно и потому что давно. Не стану врать и рассказывать, шамкая вставной челюстью, что де «Я помню Фотошоп был еще са-а-авсем маленьким, это было на Макинтоше, и был он с номером 1.0» Такого не было. Но я помню Фотошоп 4.0 (и также на Маке). А потому для меня вопрос выбора никогда не стоял. И потому нет-нет, но я буду давать рекомендации касательно Photoshop, особенно там, где его возможности помогут значительно упростить творчество.

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

 

Начнём? Вы наверное ждёте списка каких-то секретных приёмов, рекомендаций, которые научат вас рисовать pixel art? А правда в том, что ничего такого по большому счёту нет. Единственный способ научиться рисовать пиксельную графику – это рисовать самому, пробовать, пытаться, не бояться и экспериментировать. Не стесняйтесь повторять чужие работы, не бойтесь показаться неоригинальным (просто не выдавайте чужое за своё, хе-хе). Внимательно и вдумчиво анализируйте работы мастеров (не мои) и рисуйте, рисуйте, рисуйте. Несколько полезных ссылок вас ждёт в конце статьи.

 3. Общие принципы.

И всё же существует несколько общих принципов, знать которые не помешает. Их действительно немного, я называю их «принципами», а не законами, потому что они носят скорее рекомендательный характер. В конце-концов, если у вас получится нарисовать гениальную пиксельную картинку в обход всех правил – кому до них дело?

Самым основной принцип можно сформулировать так: минимальной единицей изображения является пиксель, и по возможности все элементы композиции должны быть соразмерны ему. Расшифрую: всё, что вы нарисуете, состоит из пикселей, и пиксель должен читаться во всём. Это не значит, что в рисунке вообще не может быть элементов, к примеру, 2х2 пикселя, или 3х3. Но строить изображение всё же предпочтительно из отдельных пикселей.

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

Ноги у человечка лучше выглядеть не стали, это верно, к ногам еще вернёмся. В качестве примера «из жизни» приведу онлайновый паззл Zoo keeper:

 

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

 

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

Я вовсе не утверждаю, что это неправильно. Но это всё же не очень красиво. А чтобы было красиво, запомним еще одно правило: рисовать без изломов, скруглять плавно. Есть такое понятие как изломы – фрагменты, выбивающиеся из общего порядка, они придают линиям неровный, зазубренный вид (в англоговорящей среде пиксельных художников их называют jaggies):

Изломы лишают рисунок естественной плавности и красоты. И если фрагменты 3, 4 и 5 очевидны и исправляются легко, с прочими дело обстоит сложнее – там нарушена длина одного-единственного кусочка в цепи, казалось бы мелочь, но мелочь заметная. Чтобы научиться видеть такие места и избегать их, требуется небольшая практика. Излом 1 выбивается из линии, потому что это единичный пиксель – в то время как на участке, где он затесался, линия состоит из сегментов по 2 пикселя. Чтобы избавиться от него, я смягчил вход кривой в изгиб, удлинив верхний сегмент до 3-х пикселей, и перерисовал всю линию сегментами по 2 пикселя.

Изломы 2 и 6 идентичны друг другу – это уже фрагменты длиной 2 пикселя на участках, построенных единичными пикселями.

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

Как видите, прямая линия составляется из отрезков одинаковой длины, смещаемых по мере её прорисовки на один пиксель – только таким образом достигается эффект линейности. Наиболее распространённые способы построения с длиной отрезка 1, 2 и 4 пикселя (встречаются и другие, но представленных вариантов должно хватить для реализации практически любой художественной задумки). Из этих трёх самым популярным можно уверенно назвать длину отрезка в 2 пикселя: рисуем отрезок, сдвигаем перо на 1 пиксель, рисуем еще один отрезок, сдвигаем перо на 1 пиксель, рисуем еще отрезок:

Несложно, верно? Нужна лишь привычка. Умение рисовать наклонные прямые с шагом в 2 пикселя поможет в изометрии, так что подробнее остановимся на ней в следующий раз. Вообще прямые линии это здорово – но только до тех пор, пока не встанет задача нарисовать что-нибудь нерукотворное. Тут нам понадобятся кривые, и много самых разных кривых. И берём на вооружение простое правило закругления кривых линий: длина элементов кривой должна уменьшаться/увеличиваться постепенно.

Выход из прямой на скругление ведётся плавно, я обозначил длину каждого сегмента: 5 пикселей, 3, 2, 2, 1, 1, снова 2 (уже вертикально), 3, 5 и далее. Не обязательно ваш случай будет использовать такую же последовательность, здесь всё зависит от плавности, которая требуется. Еще пример скругления:

Опять же, избегаем изломов, которые так портят картинку. Если есть желание проверить усвоенный материал, здесь у меня нарисованный неизвестным автором skin для Winamp’а, заготовка:

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

4.1. Рисуем склянку с живой водой.

1. Форма объекта, пока можно не использовать цвет.

2. Красная жидкость.

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

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

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

4.2. Рисуем арбуз.

1. Нарисуем круг и полукруг – это будут арбуз и вырезанная долька.

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

3. Заливка. Цвета из палитры, средний оттенок зелёного – цвет корки, средний красный – цвет мякоти.

4. Обозначим переходный участок от корки к мякоти.

5. Светлые полосы на арбузе (наконец-то он похож сам на себя). И конечно – семечки! Если скрестить арбуз с тараканами, будут расползаться сами.

6. Доводим до ума. Бледно-розовый цвет используем для обозначения бликов над семечками в разрезе, и, выкладывая пиксели в шахматном порядке, добиваемся от вырезанной дольки некоего подобия объёма (метод называется dithering, о нём позже). Тёмный красный оттенок используем, чтобы обозначить затенённые места в разрезе арбуза, и тёмно-зелёный (опять же пиксели в шахматном порядке) – чтобы придать объём самому арбузу.

5. Dithering.

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

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

 

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

 

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

Еще два варианта дизеринга:

 

Что нужно знать про дизеринг, чтобы уметь им пользоваться. Минимальная ширина зоны смешивания должна быть не меньше 2-х пикселей (те самые шашечки). Больше – можно. Меньше лучше не делать.

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

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

6.1. Рисуем меч.

Такой несерьёзный меч для несерьёзного проекта:

1. Форма. Здесь всё просто.

2. Начинаем распределять цвет. Я изменил изначально чёрный на цвет тёмной стали (хочется верить, что похожий) и залил меч серым.

3. Придаём форму за счёт светотени и дополнительной расцветки (обратите внимание – я кое-где повторно изменил цвет обводки, сделав его еще светлее). Условимся, что свет на меч падает слева-сверху, из-за плеча наблюдающего, поэтому блики (наиболее светлые участки освещённых поверхностей) располагаются на выступающих элементах слева, тени – справа и снизу.

4. Доводим наш миниатюрный шедевр до совершенства. Усиливаем эффект объёма на яблоке и сферических элементах крестовины (левый и правый «шарики»), на обмотке рукояти. Обратите внимание на длинную полосу, идущую по лезвию – дол (некоторые называют его кровотоком, полагая, что он служит для стекания крови проткнутого врага). Название здесь неважно, суть в том, что это жёлоб и центральная его часть освещена меньше всего, в то время как края наоборот. Справа от дола, чтобы усилить эффект глубины, я обозначил чёткий блик (никогда нелишне хорошенько изучить объект, который вы собираетесь изобразить – не для того чтобы сыпать терминами, а чтобы иметь чёткое представление об устройстве и особенностях конструкции). Вроде получился довольно симпатичный меч, а?

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

6.2. Робот.

Один из самых распространённых способов рисования «с нуля» – изобразить черновой вариант (не попиксельно, а традиционно, рисуя либо мышью, либо на планшете), а после почистить его, исправить (при необходимости) и довести до ума. Также часто художники рисуют на основе своих бумажных черновиков, карандашных рисунков, набросков и прочих «почеркушек» – сканируют их и обрисовывают попиксельно. Дело привычки. Я обычно начинаю с чернового наброска:

Теперь чистка, стираю лишние пиксели и дорисовываю недостающие:

Закругление согласно простому правилу плавности, все прямые линейные. Добавляю ноги:

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

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

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

Тень накладываю в 2 этапа, сперва самую тёмную, участком шириной максимум 3-4 пикселя (т. е. от линии обводки вглубь объекта, в данном случае, тень занимает область шириной 3, самое большое 4 пикселя. Это не закономерность, цифры запоминать не нужно, для другого предмета с другим освещением, другим материалом и другим настроением тень наверняка ляжет иначе). Далее более светлая тень, так же как и основная плавно сходящая на нет. Обратите внимание, на закруглённых участках груди тень кое-где лежит совсем небольшими фрагментами, по одному пикселю – это также придаст рисунку больше плавности.

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

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

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

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

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

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

Если внимательно рассмотреть заклёпки-зубы, видно, что это всего лишь фрагменты 2 на 2 пикселя, верхний левый окрашен в цвет бликов, два соседних с ним – цвет светлой тени, и правый нижний – цвет основной тени. Просто, да? При этом даже несмотря на то, что в некоторых местах пиксели заклёпок совпадают с цветом соседних точек, при отдалении (уменьшении масштаба рисунка до 100 или 200%) сохраняется полное впечатление того, что это выделяющиеся объекты. Еще в палитре появился дополнительный близкий к чёрному оттенок – я решил с его помощью сделать темнее суставы на ногах, и замешать в шахматном порядке пиксели в суставы на руках. Чистый чёрный я попробовал, тень получалась неестественной, а дизеринг с самым тёмным оттенком дал нужный эффект.

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

WIP, тот самый Work in Progress:

---

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

Юрий Гусев aka Fool
http://www.foolstown.com/
http://fool.deviantart.com/

Алексей Гаркушин aka gas13
http://gas13.ru/ 
http://gas13.deviantart.com/

Дизайн-группа eBoy
http://hello.eboy.com/eboy/category/everything/explore/parts/

Henk Nieborg (Голландия)
http://www.henknieborg.nl/

Gary J Lucken (Великобритания)
http://www.armyoftrolls.co.uk/

Kenneth Fejer…
http://www.kennethfejer.com/

…и один из его замечательных проектов – ISOSITY
http://www.kennethfejer.com/isocity/

Agnes Heyer aka Arachne (Норвегия)
http://www.retinaleclipse.com/

Borek Bures (Чехия)
http://www.spiv.cz/index.html

The Spriters Resource – хранилище спрайтов из игр
http://spriters-resource. com/

Как начать делать пиксель арт #1 (RUS) | by Кирилл Евстигнеев

Руководство для Абсолютного Новичка

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

Этот гайд был поддержан на моем Патреоне! Если вам нравится то, что я делаю, то порадуйте меня своей подпиской, пожалуйста 🙂 (ВНИМАНИЕ! Это Патреон ОРИГИНАЛЬНОГО автора статьи, а не переводчика.)

Перед тем, как начнем…

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

Инструменты

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

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

• Aseprite: Классный профессиональный редактор с кучей полезных плюшек (платный)
  (Примечание переводчика: но всегда можно скомпилировать.)
• GraphicsGale: Классика, использующаяся во множестве игр. Немножечко запутанная, но все так же с кучей полезных плюх (бесплатная)
• Piskel: Пиксельный онлайн-редактор (само собой, бесплатный)
• Photoshop: Мощный редактор изображений, который, по сути, не приспособлен для пиксель арта, но вы можете его настроить нужным образом (платный)

Aseprite

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

Создаем Новый Файл

Просто нажмите на “New File…” на загрузочном экране или на File > New File, чтобы мы могли начать.

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

Окошко “Новый спрайт” в Aseprite

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

Фон должен быть прозрачным или белым, пока без разницы. Теперь убедитесь, что Advanced Options отключены (но позже можете вернуться к ним) и можно наконец-то приступать!

Давайте рисовать!

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

Рабочая зона в Aseprite

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

А теперь, используя только четыре цвета слева, постарайтесь нарисовать кружку.

Будьте вольны пользоваться моей работой как предметом вашего вдохновения. Если вы вдруг сделаете ошибку, нажмите alt+ЛКМ по пустой зоне вне вашего рисунка, тем самым подобрав прозрачный цвет, которым можно пользоваться как ластиком. Ну или вы можете использовать, собственно, сам инструмент “Ластик” (горячая клавиша на английскую E).

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

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

Теперь давайте сделаем еще больше спрайтов! Попробуйте нарисовать череп, меч и лицо человека. Но в этот раз без примера моих работ. Если вы почувствовали, что работа не влезает в эти рамки размера, то не волнуйтесь — это нормально, попробуйте что-либо немного поменять или попробуйте сначала. Работа в таком низком разрешении очень сложная и иногда напоминает паззл. Вот еще одна статья, которую я написал, посвященная работе в низком разрешении: [link]

Если вы так хотите, то вот вам моя версия этих трех спрайтов. Пожалуйста, не нажимайте сюда до того, как вы закончите рисовать их сами. [skull, sword and human face].

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

Сохраняем файл

Для сохранения файла нажмите Control+S (или File>Save As…), Выберите имя файлу и путь сохранения, а потом нажмите кнопку save.

Помните, что в триале Aseprite’а нельзя сохранять работы!

Окошко экспортировки файла в Aseprite

Вы можете заметить, что Aseprite поддерживает очень много форматов для сохранения файла, но я рекомендую всегда держать при себе .ase версию каждого файла, который вы создаете. Точно так же, как формат .psd в Photoshop. Во время экспорта файла в интернет или игры, вы можете нажать Control+Alt+Shif+S или File>Export.

Вот почему никогда не следует изменять размер работ не на круглые числа

В Aseprite есть о-о-очень хорошая функция “Resize”, меняющая размер спрайта в окошке экспорта. Оно изменяет ваш спрайт только на какую-нибудь круглую процентную величину. Если вы измените размер спрайта, например, на 107%, это разобьет большинство пикселей и исказит изображение, но если вы измените размер на 200%, то каждый пиксель будет в 2 пикселя шириной и выстой, что, несомненно, выглядит классно и точно.

Бо́льшие разрешения

Теперь, когда мы разобрались с основами типа сохранения нового файла и рисования в указанном размере, давайте попробуем порисовать в еще большем разрешении, 32 на 32 пикселя. Также мы будем использовать палитру немного пошире, попробуйте AAP-Micro12 (сделана художником AdigunPolack). В этот раз мы будем рисовать лопату.

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

Шаг 1: Линии

Шаг 1

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

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

Алгоритм Pixel-Perfect в Aseprite

Шаг 2: Основные цвета

Шаг 2

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

Шаг 3: Светотень

Шаг 3

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

Импровизируем с цветами для света и теней

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

Инвертированная светотень

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

Шаг 4: Сглаживание и финальные штрихи

Шаг 4, финальный

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

Еще на этом этапе неплохо бы поискать “сиротские пиксели” (англ. Orphan PIxels). Это такие пиксели, которые не относятся ни к группе других пикселей, ни к части сглаживания, как на планете слева:

Убираем одиночные пиксели

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

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

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

А что теперь?

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

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

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

Часть 2 уже доступна тут!

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

Как рисовать пиксельных персонажей. Руководство по созданию пиксельной графики для игр. Что такое 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. Не забудьте про полутени. Выберите цвет, находящийся между базовым цветом и цветом тени. Используйте его для создания еще одного слоя — но уже между слоями этих двух цветов. Получится эффект перехода от темной области к светлой.

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

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

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

История

Пиксель арт — это техника создания иллюстрации из наименьших элементов изображения — пикселей. И зародилась она в 1970-х годах. А пик популярности направление приобрело в начале 1990-х. Тогда начали выпускаться видеоигры для приставок 2 и 3 поколений. Развитие 3D-графики на время вытеснило пиксельное рисование. Однако с развитием мобильных приложений и игр графическая живопись обретает второе дыхание.

Основные правила пиксель арта

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

Линии

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

Прямые линии

Для прорисовки прямых линий используют следующие правила:

• каждый следующий пиксель смещается на одну позицию относительно предыдущей точки;
• рисуются ровные отрезки из 2, 3 или 4 пикселей, а потом делают сдвиг.

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

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

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

Концептуализация

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

Темы для размышления

Перед прорисовкой иллюстрации определитесь со следующими моментами:

1. В какой среде будет использоваться спрайт. Это, возможно, игра для ПК или мобильного телефона, или простое изображение для сайта.
2. В какой палитре оформить рисунок. Если соблюдение гаммы из-за соответствия системным требованиям не особо учитывается, то сочетаемость, точность цветов и соблюдение стиля достаточно важны. Игровой персонаж или объект должен гармонично вписываться в среду и не выделяться среди прочих объектов.

Контур

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

Шаг первый: черновой контур

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

Шаг второй: отполируйте контур

Эскиз увеличивают в 6-8 раз так, чтобы было видно пиксельную сетку. Теперь первичный контур нужно подчистить и удалить гуляющие точки. К ним относят зазубрины и слишком толстые линии. А идеальная толщина заготовки не должна превышать 1 пиксель. На этом этапе нужно убрать все лишнее и добавить недостающие мелкие детали. Важно помнить, что даже размер крупных объектов в пикселинге редко выходит за рамки 200х200 px.

Цвет

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

Цветовая модель HSB

Цветовая модель является базовой для большинства графических редакторов и обозначает «цвет, насыщенность, яркость». С ее помощью можно получить тысячи различных оттенков. Смысл заключается в том, что интенсивность и яркость цвета можно настроить от 1 до 100%. Таким образом, можно получить сотни вариантов красного или синего цвета. Согласно данной модели каждый оттенок имеет числовое обозначение.

Выбирая цвета

При выборе цветовой гаммы следует помнить следующие негласные правила:

1. Более тусклые оттенки дают реалистичную картинку. Слишком яркие и кислотные цвета подойдут для воссоздания мультяшной среды.
2. Чтобы правильно подобрать палитру, она зрительно представляется в виде колеса. Сочетаемость цветов прямо пропорциональна их удаленности друг от друга. Наиболее гармонично будут сочетаться оттенки, которые находятся рядом и наоборот.
3. Рекомендуется выбрать несколько основных цветов и строить на них иллюстрацию. Если использовать много цветовых вариантов, рисунок получится нечетким и отталкивающим.

Нанесение цветов

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

Шейдинг

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

Шаг первый: выбираем источник света

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

Шаг второй: непосредственно шейдинг

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

Шаг третий: мягкие тени

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

Шаг четвертый: освещенные места

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

Несколько полезных правил

Для создания грамотного шейдинга нужно следовать правилам:

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

Дизеринг

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

Простой пример

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

Продвинутый пример

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

Применение

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

Выборочное контурирование

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

Техника 1: сглаживание изгибов

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

Техника 2: округление неровностей

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

Техника 3: затирание окончаний линий

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

Применение

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

Почему нужно делать это вручную

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

Отделка

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

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

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

Adobe

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

Adobe Photoshop

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

Microsoft

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

Браузеры

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

Мессенджеры

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

PyxelEdit

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

PixelFormer

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

GraphicsGale

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

Charamaker

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

Pro Motion NG

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

Aseprite

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

Gimp

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

Остальное

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

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

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

CorelDRAW Graphics Suite — Учебные пособия

Автор: Стефан Линдблад (Stefan Lindblad)

Это пошаговое учебное пособие посвящено созданию иллюстраций в стиле Pixel Art.

Pixel Art

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

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

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

Общие настройки

Создайте новое изображение (Файл > Создать… или Ctrl+N). Установите разрешение 72 или 300 т/д (или любое другое). В диалоговом окне Создание изображения задайте размер в пикселях и работайте с размерами от 150 до 100 пикселей. (Размер может быть больше или меньше.)

В нашем случае настройка сетки играет особую роль. На панели свойств щелкните значок Показать линейки (Ctrl+Shift+R). Щелкните линейку правой кнопкой мыши, выберите пункт Настройка сетки и в диалоговом окне Параметры установите расстояние Сетки примерно на 1 x 1 пкс. Оставьте остальные параметры как есть. Щелкните OK. Такая конфигурация обеспечивает отображение сетки с точно обозначенными пикселями, для просмотра которых нет необходимости каждый раз увеличивать изображение до 800%.

Создание эскиза и прорисовка пикселей

Начните с эскиза. Набросок можно нарисовать карандашом на бумаге или с помощью цифрового пера в Corel PHOTO-PAINT. Импортируйте эскиз как новое изображение. Если эскиз больше не понадобится, удалите объект эскиза.

Создайте новый объект: щелкните значок Создать объект в нижней части Диспетчера объектов. Активируйте инструмент Краска (P), в окне настройки кисти или на панели свойств выберите пункт Специальная кисть. Выберите простую кисть с квадратным или четко выраженным круглым кончиком радиусом 1 пкс. Я рекомендую использовать цифровой планшет Wacom (или любой другой марки). Можно, конечно, воспользоваться и мышью, но перьевой планшет обеспечивает более точный и быстрый результат.

На панели свойств отключите сглаживание и выберите Вид > Сетка.

Работайте с несколькими объектами в Диспетчере объектов. Чтобы преобразовать объект фона в прозрачный объект, просто щелкните значок объекта.

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

Затенение

За счет «блуждания» пикселей работа с эффектом затенения может вызвать некоторые затруднения. Поэтому для выделения объектов необходимо использовать инструмент Маска волшебной палочкой (W). Создайте тени, а затем отмените выбор инструмента маски. Для этого щелкните значок Удалить маску (Ctrl+R) на панели инструментов. Готово!

Объекты линз и режимы слияния

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

Использование инструментов маски и заливки для заполнения обширных областей цветом

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

Цветовые палитры

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

Изменение разрешения изображения

По окончании работы выберите Изображение > Изменить разрешение и установите значение 200% или 1600%, измените пиксели на миллиметры и задайте ширину изображения в зависимости от размера печатного изображения (например, 290 мм). В диалоговом окне Изменить разрешение снимите флажок напротив опции Со сглаживанием и щелкните OK.

Изображение примет необходимый для печати размер, а пиксели станут четкими и хорошо различимыми. Сохраните это изображение под новым именем и с новыми размерами. Сохраните и исходный файл. Для изображения с новыми размерами выберите Файл > Сохранить как или опцию экспорта с цветовым профилем (RGB, Adobe RGB 1998, CMYK или Pantone). Все зависит от платформы и формата конечного продукта.

Как рисовать пиксель арт в Adobe Illustrator

Всем привет! Известно, что Adobe Illustrator – это векторный редактор. Но если вам вдруг захотелось порисовать в нем Pixel Art, то в этом уроке я покажу, как этот делается.  Используя технику из урока, вы сможете вдоволь наиграться векторными пикселями!

Итак, открываем новый документ размером 1000×1000 px. Далее выбираем инструмент “Прямоугольная сетка” (Rectangular Grid Tool).

Дважды кликаем на инструмент – выскакивает окошко с опциями.

Нас интересуют количество горизонтальных и вертикальных разделителей, от них зависит величина наших “пикселей”. Выставим 100 на 100 и OK. Теперь с зажатым Shift (чтобы пиксели были квадратные, а не прямоугольные) растягиваем сетку по рабочей области. Я рекомендую размер сетки делать по размеру рабочей области, в нашем случае 1000×1000 px, так проще будет ориентироваться, если вам попозже захочется дорисовать ещё элементов.

Теперь выбираем инструмент Live Paint – “Быстрая заливка” (горячая клавиша К).

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

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

Когда рисунок закончен, выбираем инструмент Selection Tool “Выделение” (V), и идём в меню Object (Объект) > Expand (Разобрать).

В выскакивающей табличке ничего не меняем – жмём OK. Вот что у нас получилось.

Сетка пропала, остался только ваш рисунок. Если же у вас сетка не пропала, и получилось что-то такое…

Значит вы не убрали обводку. Вернитесь на пару шагов назад (Ctrl+Z), когда у вас сетка ещё не разобрана, и просто уберите обводку.

В принципе наш рисунок готов, если вам надо подредактировать какие-то отдельные “пиксели”, то можете выбрать отдельный квадратик с зажатой клавишей Ctrl, или использовать функцию Divide (Разделение) в панели Pathfinder (Обработка контуров).

Потом разгруппировать рисунок (Ctrl+Shift+G) и работать уже с отдельными “пикселями”.

На этом у меня все. До скорого!

Подписывайтесь на канал Иллюстратор, чтоб не пропускать новые интересные уроки.

Как нарисовать космический корабль в стиле пиксель-арт в Pixel Art Studio

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

И в то же время, когда с этими мобильными устройствами времена изменились, мы можем получить доступ к ряду инструментов, которые упрощают нам создание Pixel Art на нашем ПК. Один из таких инструментов — Pixel Art Studio, бесплатная программа которые у вас есть в Windows Store в Windows 10. Мы собираемся прокомментировать каждую из функций этой программы, а также показать шаги по созданию Pixel Art довольно простым способом с помощью полезных инструментов, предоставляемых этим приложением.

Особенности Pixel Art Studio

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

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

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

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

Инструменты и интерфейс Pixel Art Studio

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

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

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

У нас есть Rotate, который будет отвечать за вращение чертежа, который мы уже сделали; Отразить X, чтобы перевернуть созданный рисунок боком; Отразить Y с той же функцией, но будет делать это вертикально от оси Y; и «Зеркало X» и «Зеркало Y», два важных инструмента, облегчающих создание пиксельного искусства. Каждый пиксель, который вы рисуете на холсте, будет складываться в другой его части. Это будет зависеть от использования инструмента «Зеркало X» для копирования сбоку или «Зеркальное отражение Y» для вертикальной части.

Остальные инструменты в этой части — это сетка, чтобы изменить размер сетки; Блокировка оси, чтобы заблокировать оси X и Y; Импорт, чтобы импортировать изображение и, таким образом, поиграть с пиксельной базой, если тот, который мы импортировали, достаточно мал; и Изменить размер, чтобы изменить размер холста.

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

Инструменты и слои для рисования

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

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

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

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

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

Как нарисовать космический корабль в стиле пиксель-арт в Pixel Art Studio

Скачать Pixel Art Studio отсюда.

• Позволять выберите линейную кисть и 1 пиксель по размеру, чтобы начать рисовать.
• Как только это будет сделано, мы переходим в Инструменты и выбираем Зеркало X.

• Мы можем уменьшить размер холста с увеличением в левом нижнем углу со знаком + или -.

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

• Сейчас мы закрываем крылья корабля и мы создаем нижнюю часть движителя, как вы можете видеть на изображении:

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

• Теперь ракеты размещены на крыльях:

• Мы собираемся раскрасить корабль, выбрав селектор цвета.
• Un синий с шестнадцатеричным кодом # 2c6598. И мы передаем его пользовательскому цвету, щелкнув значок руки и перетащив его в нужное положение.
• Теперь мы выбираем куб и щелкаем по внутренней стороне нарисованного корабля и по ракетам.

• Мы даем цвет в салон с этим оттенком: # e1a279
• Мы выбрали черный цвет, может быть лучше серый, и нарисовали элероны на днище корабля. За отправную точку можно взять вертикаль кабины.
• также создаем вертикальную линию 5 пикселей расположен прямо над ракетами.

• Закрываем кончик передней части корабля горизонтальной линией. Эту часть также раскрашиваем тоном: # ec6d19

• Пришло время создать кистью отражения корабля.
• Деактивируем Mirror X и более светлым тоном: # f2c6a8 рисуем отражение несколькими пикселями в левой части кабины, как показано на изображении:

• Для вершины корабля с помощью палитры цветов мы можем используйте пипетку, чтобы взять апельсин и таким образом выберите более светлый оттенок.
• Мы все равно отдадим его вам: # eeb18a
• важно: сохранить как пользовательские цвета, чтобы иметь возможность вернуться к ним в любое время.
• Теперь мы переходим к линии, выбираем синий тон, ищем более светлый (# 94989b) и рисуем отражения на левой стороне корабля:

• Позволять окраска элеронов в черный цвет как на картинке с горшком с краской:

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

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

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

• Заходим в настройки кисти и выбираем диффузор размером 5 пикселей. Также черный цвет и непрозрачность кисти 10%.

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

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

• В любой момент мы можем уменьшить интенсивность теней с помощью непрозрачности слоя.

• Мы даем тень ракетам и наш корабль будет готов.
• Щелкните Дополнительно> Экспорт.
• Масштабируем изображение до 400% или даже добавляем интервал между пикселями чтобы он выглядел более пиксельным. Это будет зависеть от нашего вкуса и искусства.

• Мы также можем изменить цвет фона и добавить поля по осям X и Y до 45% и 60% соответственно.
• Ya у нас готов наш супер корабль чтобы сохранить его как .PNG.

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

Как начать рисовать пиксель-арт №1. Руководство для абсолютного новичка | Педро Медейрос | Pixel Grimoire

Руководство для абсолютного новичка

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

Эту статью поддержал Patreon! Если вам нравится то, что я делаю здесь, пожалуйста, поддержите меня там 🙂

Кроме того, это первая часть серии статей, прочтите всю серию здесь, в Pixel Grimoire.

Перед тем, как начать

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

Инструменты

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

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

• Aseprite : Отличный профессиональный редактор с множеством функций экономии времени (платный)
• GraphicsGale : Классический, используемый во многих играх. Это немного сложно, но полно замечательных функций (бесплатно)
• Piskel : Бесплатный онлайн-редактор пиксельной графики (бесплатно)
• Photoshop : Мощный редактор изображений, не предназначенный для создания пиксельной графики, но вы можете установить до использования (платно)

Aseprite

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

Создание нового файла

Просто щелкните ссылку « New File… » на главном экране или перейдите в File> New File , чтобы мы могли начать рисование.

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

Диалоговое окно «Новый спрайт» Aseprite

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

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

Нарисуем!

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

Рабочее пространство Aseprite

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

Теперь, используя только 4 цвета в верхнем левом углу, попробуйте нарисовать кружку .

Не стесняйтесь использовать мой как источник вдохновения, но также попробуйте сделать его уникальным. Если вы ошиблись, нажмите alt + щелкните в пустой области или за пределами вашего рисунка, и вы «выберете» прозрачный цвет и сможете использовать его для стирания пикселей. В качестве альтернативы вы можете щелкнуть Eraser или нажать E , чтобы выбрать его.

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

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

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

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

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

Сохранение файла

Чтобы сохранить файл, нажмите Control + S (или перейдите в Файл> Сохранить как… ), выберите имя и расположение файла и просто нажмите «Сохранить».

Не забывайте, что в пробной версии Aseprite сохранение отключено!

Диалог экспорта файла Aseprite

Вы увидите, что Aseprite может сохранять в различных форматах, но я всегда рекомендую сохранять версию .ase для каждого создаваемого файла. Как и в Photoshop, вы должны сохранить файл .psd . При экспорте для Интернета или игр вы можете использовать Control + Alt + Shif + S или Файл> Экспорт .

Почему никогда не следует частично изменять размер пиксельной графики

Aseprite имеет действительно хорошую функцию Resize в окне экспорта.Он масштабирует ваш спрайт только круглыми числами, что идеально. Если вы измените масштаб своего спрайта на 107%, например, он повсюду сломает пиксели, и это будет беспорядок, но если вы масштабируете его на 200%, каждый пиксель теперь будет 2 пикселя в ширину и в высоту, поэтому он будет выглядеть красиво и четко.

Большой холст

Теперь, когда у вас есть основы, такие как создание нового файла, сохранение и рисование на холсте, давайте попробуем рисовать на холсте чуть большего размера, 32 на 32 пикселей. Теперь мы также будем использовать большую палитру, попробуйте AAP-Micro12 (от AdigunPolack).На этот раз нарисуем лопату.

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

Шаг 1: Линии

Шаг 1

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

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

Aseprite Pixel perfect algorithm

Шаг 2: Базовые цвета

Step 2

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

Шаг 3: Затенение

Шаг 3

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

Импровизация оттенков с разными оттенками

В примере слева я использую ту же палитру, что и вы, AAP-Mini12 . Когда я рисовал этого зеленого чувака, у меня не было светло-зеленого цвета, поэтому я выбрал ближайший доступный оттенок — желтый.То же самое и с тенью, я выбрал синий, потому что он был самым близким к темному. Но что, если я пойду другим путем? Я мог бы получить более яркий синий и более темный красный, верно? Ну, не совсем:

Оттенки с использованием инвертированного оттенка

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

Шаг 4: Сглаживание и полировка

Шаг 4

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

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

Удаление бесхозных пикселей

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

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

Идея состоит не в том, чтобы бездумно удалять бесхозные пиксели, а в том, чтобы через них спросить себя: действительно ли этот пиксель должен быть один?

Что теперь?

Пришло время поэкспериментировать с большим количеством цветов и большим разрешением! Но не торопитесь, может 48 на 48 и 16 цветов и так далее. Если вы действительно только начинаете, я бы пока избегал анимации и сосредоточился на том, чтобы сначала освоиться со статическими изображениями.

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

Я также делаю несколько руководств по конкретным темам или аспектам пиксельной графики и игрового дизайна, вы можете увидеть их все здесь:

Продолжайте читать часть 2 здесь !

PIXEL ART TUTORIAL: BASICS

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

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

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

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

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

Краска

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

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

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

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

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

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

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

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

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

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

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

Final Fight (Аркада). Capcom, 1989. (Источник)

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

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

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

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

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

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

2. Грубый набросок

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

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

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

Jaggies

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

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

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

Прямые линии

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

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

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

4. Применение первых цветов

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

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

5. Затенение

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

Форма и объем

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

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

Сглаживание

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

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

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

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

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

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

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

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

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

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

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

Дизеринг

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Полная партия в сборе!

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

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

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

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

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

Твиттер

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

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

Instagram

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

Как сделать пиксель-арт: полное руководство для начинающих

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

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

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

Вопреки распространенному мнению, мощное или дорогое программное обеспечение не гарантирует качественного искусства! Выбор программы — это только вопрос предпочтений.

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

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

• Карандаш: ваш основной инструмент для рисования, который по умолчанию размещает один пиксель
• Ластик: стирает или удаляет нарисованные пиксели.
• Пипетка: копирует цвет пикселя, который вы выбираете для повторного использования.
• Bucket: заполняет пустую область одним сплошным цветом.

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

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

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

Связанный: Лучшие графические планшеты для цифровых художников и дизайнеров

Насколько большим должен быть ваш спрайт или холст?

Нет неправильного ответа относительно размера спрайта. Но числа, кратные восьми в степени двойки, являются наиболее распространенными (например, 8 × 8, 16 × 16, 32 × 32 и т. Д.), Потому что в противном случае старые компьютеры не смогли бы отобразить их должным образом.

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

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

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

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

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

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

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

Допустим, вы хотели получить стандартное разрешение 1080p. Вы можете работать с холстом 384 × 216, а затем увеличивать масштаб на 500 процентов.

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

Процесс Спрайтинга

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

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

1. Начните с грубого эскиза

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

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

2. Очистить линию Art

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

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

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

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

3. Представляем цвета

Пришло время взять инструмент Bucket и заполнить контур вашего спрайта цветами.

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

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

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

4. Добавление деталей, светлых участков и теней

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

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

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

5. Сохраните свое искусство

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

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

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

Pixel Art: легко освоить, сложно освоить

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

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

Как рисовать аниме и манга-комиксы: 10 учебных пособий для начала

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

Читать далее

Об авторе Джессибель Гарсия (Опубликовано 268 статей)

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

Более От Джессибель Гарсия

Подпишитесь на нашу рассылку новостей

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

Нажмите здесь, чтобы подписаться

Создайте иллюстрацию Pixel Art

Pixel Art — очень популярный стиль рисования и иллюстрации.Это восходит к тому, как выглядели старые компьютерные игры — Space Invaders, кто-нибудь? Его предыдущие ограничения теперь являются его самым большим преимуществом и причиной существования — отдельные пиксели создают резкий пиксельный вид.

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

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

Щелкните любое из изображений ниже, чтобы просмотреть его в полном размере.

Планирование пиксельной иллюстрации

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

Настройка документа

Создайте новый документ (перейдите в Файл > Новый или используйте Ctrl + N ). В диалоговом окне Create a New Image установите для единиц измерения значение Pixels , и для этого урока я использую размер изображения 150 x 150 пикселей. Вы можете выбрать 72 или 300 точек на дюйм или любое другое разрешение.Нажмите ОК .

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

• В меню View убедитесь, что обе линейки и Grid включены.
• Щелкните правой кнопкой мыши линейку и выберите Grid Setup .
• Измените горизонтальное и вертикальное числа на 1.
• Включить привязку к сетке и Показать сетку .
• Вы также можете настроить прозрачность и цвет сетки, если хотите.
• Щелкните ОК .

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

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

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

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

Объекты Docker

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

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

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

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

Инструмент для рисования и ластик

Инструмент Paint — это основной инструмент, который я использую при создании пиксельной графики.Когда вы активируете инструмент Paint , на панели свойств появляется несколько вариантов:

• В палитре кистей выберите категорию и тип кисти (в этом уроке я использовал категорию Art Brush и тип кисти Quick Doodler ).
• Убедитесь, что в раскрывающемся меню Shape выбрана жесткая форма без размытия.
• Важно! Убедитесь, что значок Anti-aliasing выключен.
• Отключите атрибуты Pen (давление, наклон, азимут, вращение), поскольку они не требуются.
• Вы можете изменить размер пера , отрегулировав число на панели свойств или удерживая клавишу Shift при перетаскивании вверх или вниз.

СОВЕТ : Вы также можете настроить параметры инструмента Paint с помощью окна настройки Brush Settings ( Window > Dockers > Brush Settings или Ctrl + F8 ).

Используйте инструмент Eraser для удаления посторонних пикселей

Добавление цвета и эффектов

Есть много способов добавить цвет и эффекты к вашей иллюстрации в стиле пиксель-арт.

1. При использовании инструмента Paint просто щелкните образец в палитре Color , чтобы нарисовать другой цвет.

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

3. Я настоятельно рекомендую вам начать с плоского цветного фона. Просто создайте новый объект и используйте инструмент Fill ( F ​​), чтобы заполнить его цветом фона. С цветным фоном сетка будет лучше контрастировать и будет полезна, когда вы начнете рисовать.Вы всегда можете удалить фоновый объект, если он вам больше не нужен.

СОВЕТ : Помните, что вы всегда можете изменить цвет сетки документа, чтобы его было легче увидеть на фоне или в других цветах вашей иллюстрации.

4. Используйте один из инструментов Mask , например, Rectangle Mask (R), чтобы создать область выделения и заполнить ее цветом или узорами с помощью инструмента Fill .

5. Режимы слияния изменяют способ объединения мазков кисти или объектов с фоном или нижележащими объектами. Вы можете создать некоторые интересные эффекты, поэкспериментируя с различными режимами из раскрывающегося списка Merge Mode в верхней части окна настройки Objects .

6. Линзы позволяют применять эффекты к объекту или выбранной области.

• Выберите объект, к которому вы хотите применить эффект линзы, или используйте инструмент Mask , чтобы определить область, к которой будет применен эффект линзы.
• Щелкните значок New Lens в нижней части окна настройки Objects .
• В окне New Lens выберите категорию и тип эффекта, затем нажмите OK .
• В зависимости от типа выбранного эффекта вам будут представлены дополнительные параметры для настройки параметров эффекта.

ПРИМЕЧАНИЕ : Используя режимы слияния линз и в докере Объекты , вы работаете неразрушающим образом, что означает, что вы можете добавлять, удалять или изменять эти эффекты, а исходные объекты не будут быть измененным.

7. Вы можете выбрать любую из установленных цветовых палитр. Просто нажмите кнопку Quick Customize (плюс) на панели Dockers или перейдите в окно Window > Dockers и выберите окно настройки Palettes . Вы также можете просто выбрать 8-битную цветовую палитру. Некоторые могут сказать, что это правильный путь, но лично я выбираю цветовую палитру, наиболее подходящую для моего проекта иллюстрации.

Повторная выборка вашей иллюстрации Pixel Art

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

Перейдите к Image > Resample и введите новый размер и разрешение изображения. Выберите Ближайший сосед в качестве режима и нажмите ОК . Здесь важен режим передискретизации — только Nearest Neighbor даст четкие, резкие результаты при больших размерах.

Теперь ваша иллюстрация имеет нужный размер, а пиксели четкие и резкие. Сохраните изображение с новым именем и новым размером и сохраните исходный файл.Теперь с изображением нового размера выберите Файл > Сохранить как или экспортировать с цветовым профилем (RGB, Adobe RGB 1998 или CMYK или Pantone). Все зависит от того, какую платформу и какой конечный продукт вы хотите использовать для своего имиджа.

Добавление текста

В качестве необязательного шага вы можете добавить текст к иллюстрации пиксельной графики с помощью инструмента Текст . В этом примере, когда моя иллюстрация была завершена, я добавил слово «Иллюстрация» и свое имя «Стефан Линдблад» как отдельные текстовые объекты.Затем я использовал инструмент Pick и направляющие для выравнивания текста.

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

Может ли Procreate сделать пиксель-арт? 3 лучших пиксельных изображения для iPad — Webwut

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

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

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

Может ли Procreate сделать пиксель-арт?

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

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

Чтобы настроить его, выполните следующие действия:

Шаг 1. Создайте кисть

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

1. Откройте любой холст, нажмите Действия , а затем Обрезать и изменить размер .

2. Включите переключатель Resample , установите размер 1 * 1 пиксель и нажмите Done .

3. Выберите белый цвет и коснитесь холста карандашом. Вы ничего не увидите, но холст будет белого цвета.

4. Нажмите на Layers , выберите слой, на котором находится холст. Он должен называться Layer 1 . Затем скопируйте слой. У вас в буфере обмена будет один пиксель белого цвета.

5. Нажмите на Brush Library , выберите самую простую кисть, которую сможете найти, и продублируйте ее.

6. Нажмите на новую кисть, чтобы открыть Brush Studio .

7. Перейдите в раздел Shape , нажмите Edit , Import и Paste . Может показаться, что ничего не произошло, но отпечаток кисти изменится на один белый пиксель. Хит Готово .

8. Перейдите в раздел Зерно и повторите седьмой шаг.

9. Теперь вам нужно отключить все настройки, которые могут повлиять на масштаб. Откройте разделы Stroke Path , Taper , Shape, Wet mix, Color Dynamics, Dynamics, и Apple Pencil и отключите все параметры.

10. В разделе Grain и Rendering все параметры должны быть нулевыми, за исключением Zoom , Depth и Flow, которых должно быть на максимальном уровне.

11. В разделе Properties отключите все, установите Maximum Size , Minimum Size и Minimum Opacity до 0%. Увеличьте Максимум Непрозрачность до 100%.

12. Нажмите Готово , и теперь ваша однопиксельная кисть готова к работе!

Шаг 2: Создание холста

1. Откройте Custom Canvas и коснитесь раздела Размеры .

2. Вы должны установить оптимальный размер холста Width и Height . Например, Gameboy использует для своих холстов 160 * 144 пикселей. После того, как вы ввели числа, нажмите Создать .

3.Нажмите на Actions и включите переключатель Drawing Guide .

4. Нажмите на Edit Drawing Guide и отредактируйте Grid Size на 1px.

5. Затем вы можете изменить цвет Drawing Guide на черный и, возможно, уменьшить толщину и непрозрачность , чтобы он не мешал вам при рисовании.

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

Шаг 3: Нарисуйте!

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

Выберите цвета, измените непрозрачность кисти и внесите необходимые корректировки во время рисования.

Прочтите Нужен ли вам iPad Pro для Procreate?

Для чего нужно потомство?

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

Вот несколько функций, которые делают Procreate самой популярной платформой для цифрового искусства:

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

Однако это не значит, что вы упустите профессиональные функции. Как только вы познакомитесь с приложением, вы обнаружите, что оно может делать все, о чем вы можете попросить.

Procreate очень быстрый, работает на движке Valkyrie и обеспечивает 64-битную скорость. Вы можете нажать кнопку отмены или повтора до 250 раз.

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

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

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

Рассмотрите возможность проверки 7 онлайн-курсов по концептуальному искусству

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

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

Вы можете загружать и использовать кисти, созданные другими художниками в Интернете.В последней версии Procreate также позволяет использовать кисти Photoshop.

Параметры окраски: Procreate предлагает инструменты «Падение образца» и «Падение цвета» с несколькими вариантами, включая палитру, классику, гармонию и окраску диска, что упрощает смешивание и сопоставление цветов.

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

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

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

Узнайте больше о возможностях Procreate по редактированию фотографий.

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

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

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

Procreate сделает это за вас и позволяет сохранять его в разрешении 1080, 2K и 4K с качеством без потерь. Узнайте больше о возможностях Procreate для редактирования видео.

Сложно ли изучать пиксель-арт?

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

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

С чего начать изучение пиксель-арта?

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

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

Просмотр руководств по пиксельной графике может помочь ускорить процесс. У SkillShare и Udemy есть несколько отличных курсов, и вы можете найти бесплатные уроки на YouTube.

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

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

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

Pixaki

Pixaki — это мощный эквивалент настольных приложений с пиксельной графикой, созданный специально для iPad с поддержкой Apple Pencil.

Он предлагает настраиваемые поддоны и мультитач-интерфейс. Другие функции включают луковые слои, импорт изображений, изменение размера и трансформацию. Вы можете импортировать многослойные файлы PNG и Zip, PSD, Gif-файлы и листы спрайтов.

Что еще более важно, Pixaki позволяет создавать пиксельную анимацию с высокой плотностью кадров. Это приложение стоит 24,99 доллара США в App Store.

Pixelmator

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

Кроме того, Pixelmator имеет специально разработанную пиксельную кисть с точной и уникальной технологией привязки мазков кисти. Создавайте пиксельные рисунки с легкостью на iPad и Apple Pencil в Pixelmator.

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

iDraw

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

Тем не менее, iDraw — очень популярное приложение для пиксельной графики, главным образом потому, что оно позволяет создавать пиксельные изображения в стиле JRPG, известном как стиль 90-х.

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

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

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

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

Версия Photoshop для iPad не имеет кистей для пиксельной графики, а другие известные приложения, такие как Aseprite, не созданы для iPad.

Однако, если вам нужно отдельное приложение только для создания пиксельной графики, загрузите Pixelmator, Pixaki или iDraw.

Pixel Art Maker

Это простой онлайн-редактор пиксельной графики, который поможет вам легко создавать пиксельную графику. Pixel Art Maker (PAM) разработан для начинающих и профессионалов, которые просто хотят что-то придумать и поделиться этим с друзьями.Если вам нравится создавать пиксель-арт и вам нужно подобное онлайн-приложение для рисования, то, надеюсь, оно оправдает ваши ожидания.

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

Make Pixel Art Online: без скачивания!

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

В Интернете есть еще несколько программ для пиксельной графики, но они в основном используют Flash, а не JavaScript. Этот инструмент использует HTML5 и JavaScript, поэтому вам не нужны плагины. В любом случае стоит выполнить поиск в Google, чтобы проверить другие инструменты пиксельной графики, поскольку они могут лучше соответствовать вашим потребностям.

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

Pixel Art Editor: создавайте и используйте шаблоны!

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

История пиксельных артов

Пиксельное искусство, как оно известно сегодня, восходит, по крайней мере, к 1972 году, когда Ричард Шуп написал SuperPaint с помощью программного обеспечения Xerox PARC. Тем не менее, концепция пиксельного искусства может восходить к тысячам лет назад с традиционными формами искусства, такими как вышивка крестиком (или, в более общем смысле, вышивка счетными нитками), в которой используются небольшие элементы, которые могут быть заполнены ниткой для создания рисунка или «рисунка». своего рода. Стиль рисования, известный как «пуантилизм», также очень похож на пиксельное искусство.

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

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

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

Создатели пиксельной графики

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

Рисование векторных и пиксельных форм в Photoshop CS6

История двух форм

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

Векторная фигура слева и пиксельная фигура справа.

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

Панель «Слои», отображающая векторные и пиксельные формы на отдельных слоях.

Определение слоя формы

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

Слои

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

Масштабирование векторной формы

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

Выбор векторной формы.

Чтобы масштабировать векторную фигуру, я перейду к меню Edit в строке меню в верхней части экрана и выберу Free Transform Path :

Идем в Edit> Free Transform Path.

Это поместит блок Free Transform и ручки вокруг векторной формы слева:

Вокруг векторной формы появится поле «Свободное преобразование».

Я хочу убедиться, что я масштабирую обе формы до одинакового размера, поэтому вместо того, чтобы перетаскивать маркеры Free Transform вручную, я перейду к панели параметров в верхней части экрана и изменю Width ( W ) и Высота ( H ) значения формы до 10%:

Установка ширины и высоты векторной формы на 10%.

Я нажму Введите (Win) / Верните (Mac) на клавиатуре, чтобы принять новый размер, и теперь векторная фигура слева намного меньше:

Размер векторной формы теперь составляет 10% от размера пикселя.

Давайте посмотрим, что произойдет, если я снова масштабирую векторную фигуру до ее исходного размера. Вместо того, чтобы возвращаться в меню Edit вверху экрана и выбирать Free Transform Path , на этот раз я воспользуюсь более быстрым сочетанием клавиш: Ctrl + T (Win) / Command + T (Mac). Это поместит тот же блок Free Transform и ручки вокруг векторной формы:

Нажатие Ctrl + T (Win) / Command + T (Mac), чтобы быстро выбрать Free Transform Path.

Поскольку я уменьшил фигуру, уменьшив ее до 10%, я увеличу ее до исходного размера, установив значения Width и Height на панели параметров на 1000% :

Установка ширины и высоты векторной формы на 1000%.

Я снова нажму Введите (Win) / Верните (Mac) на клавиатуре, чтобы принять его, и теперь векторной формы вернули свой исходный размер. Обратите внимание, что даже несмотря на то, что я уменьшил его, а затем увеличил, векторная форма по-прежнему выглядит как новая.Его края остаются такими же четкими и резкими, как и были изначально:

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

Плагин шорткодов, действий и фильтров: ошибка шорткода [ ads-basics-middle ]

Масштабирование формы пикселя

Давайте попробуем то же самое с формой пикселя справа. Сначала я выберу его, щелкнув слой «Форма пикселя» на панели «Слои»:

Выбор формы пикселя.

Выбрав слой формы пикселя, я перейду к меню Edit вверху экрана и выберу Free Transform:

Идем в Edit> Free Transform.

Свободное преобразование против пути свободного преобразования

Обратите внимание, что на этот раз команда называется «Свободное преобразование», а не «Свободное преобразование». Путь . Мы рассмотрим пути в другом уроке, но, по сути, векторная фигура состоит из двух частей; основной контур фигуры, известный как путь , и цвет, которым заполнен контур (путь).Когда мы редактируем или масштабируем векторную фигуру, мы действительно редактируем и масштабируем контур контура. Вот почему, когда у меня был выбран слой с векторной фигурой, команда называлась Free Transform Path. Теперь, когда у меня выбран нормальный слой пикселей, мы редактируем пиксели, а не контуры, и поэтому имя команды изменилось на просто «Свободное преобразование». Опять же, позже мы рассмотрим пути более подробно.

Это поместит рамку свободного преобразования вокруг формы пикселя справа:

Вокруг формы пикселя появляется рамка «Свободное преобразование».

Так же, как я сделал с векторной формой, я уменьшу размер пикселя, установив Width и Height до 10% на панели параметров:

Установка ширины и высоты формы пикселя на 10%.

Я нажму Введите (Win) / Верните (Mac) на клавиатуре, чтобы принять его, и теперь форма пикселя намного меньше. Все идет нормально. Даже после масштабирования формы пикселя до 10% она выглядит такой же резкой, как и изначально, и мы до сих пор не заметили никакой разницы между векторной формой и формой пикселя:

Форма пикселя после масштабирования до 10%.

А теперь настоящее испытание. Что произойдет, если я снова масштабирую фигуру пикселя до исходного размера? Я нажимаю Ctrl + T (Win) / Command + T (Mac) на клавиатуре, чтобы быстро выбрать команду Free Transform , и, чтобы снова масштабировать форму пикселя, я устанавливаю ширину и Высота от на панели параметров до 1000% :

Масштабирование формы пикселя до исходного размера.

Я нажимаю Enter (Win) / Return (Mac), чтобы принять его и закрыть команду Free Transform.И теперь становится очевидной разница между векторными и пиксельными формами. Несмотря на то, что я масштабировал обе формы на одинаковую величину, и обе формы сохранили свои четкие края при уменьшении размера, пиксельная форма не могла справиться с увеличением масштаба. Его некогда острые края теперь кажутся мягкими, размытыми и блочными:

Векторная форма сохранилась нетронутой после увеличения. Форма пикселя? Не так много.

Давайте увеличим масштаб, чтобы рассмотреть подробнее. Причина, по которой края формы пикселя теперь выглядят намного хуже, заключается в том, что, когда я уменьшил его до 10% от исходного размера, Photoshop пришлось отбросить 90% пикселей, которые составляли исходную форму.Было бы хорошо , если бы мне не нужно было масштабировать его обратно. Photoshop не может волшебным образом воссоздать пиксели, поэтому, когда я увеличил его, все, что смог сделать Photoshop, — это взять оставшиеся пиксели и сделать их больше. Вот почему мы действительно можем видеть ступенчатый эффект по краю фигуры. Это края отдельных пикселей. Они выглядят мягкими и размытыми, потому что именно это происходит с пикселями, когда мы их увеличиваем. Чем больше мы их увеличиваем, тем они становятся мягче. С другой стороны, векторные фигуры не имеют этой проблемы.Это просто точки, соединенные линиями и кривыми, и мы можем изменять их размер, сколько захотим, без потери качества:

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

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

Куда идти дальше …

Векторные фигуры имеют и другие преимущества, которые делают их более гибкими в работе, чем пиксели, но прежде чем мы забегаем слишком далеко вперед, давайте научимся рисовать векторные фигуры в Photoshop CS6! Посетите наш раздел «Основы Photoshop», чтобы узнать больше о Photoshop!

.