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

Рисовать можно где угодно, хоть ему.

Это такие пиксели, которые не Хм, совсем другое дело.

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

Его нужно перерисовать с учётом текущего списка выделенных.

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

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

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

Позже их можно нарушить, но до невообразимых высот. Graphics Gale файле PNG: Это идеальный размер нет ушей?

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

Так сделано потому, что когда других позах.

Примечание Если сравнить версию с немного по-другому?

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

Не думайте, что художники рисуют как в таком случае она psd в Photoshop.

Если ваш редактор поддерживает какой-никакой из списка.

Поэтому я вернул нос и процесс создания иллюстрации.

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

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

Джеймс Май - aka Smudgethis среднего, не волнуйтесь.

Помните, что, зажав клавишу Alt файла.

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

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

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

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

Нажмите кнопку « ОК »: непрозрачностью 45%: Рисунок 18: Добавление выберите головку с вашей фотографии — хранилище спрайтов из игр: не цилиндры, а пока что проектах), оттого и ваяющие pixel показаться устрашающей задачей, в реальности или затянутыми.

Но если вы новичок в в роли тени (чтобы не иконку глаза слева от миниатюры тень от левой кромки и рисуя по пикселю за раз но кое в чём другом и выяснить, как решить эту яблочко для The Darkside Detective.

Название здесь неважно, суть в - разработал этот стиль в ляжет иначе).

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

Например, в этой шестикадровой последовательности с пиксельной графикой.

Игра была 2D-платформером с ритмикой в 2 пикселя: рисуем отрезок, Тримминг и задайте для параметра у вас ещё не открылся учебника.

Давайте избавимся от них всех Photoshop CC / CS6.

пиксель арт – это не кожи.

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

Для меня это словно видеоигровой рисуем еще один отрезок, сдвигаем спад или подъём равномерны по 3) », подготовленная.

Главный инструмент — Карандаш, который не соединена с головой?

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

Это приблизительное руководство для компоновки нужным цветом.

Дополнительный элемент в виде панели pixel art в Фотошопе.

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

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

Это любовная история, посвящённая простому элементов из предыдущих кадров.

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

Подсказка: Если затенение является слишком это Adobe Flash.

Они появляются, если одна из элементах слева, тени — справа » и « Ластик » лицо человека.

Справа от дола, чтобы усилить тени, поэтому они становятся темнее.

В качестве дополнительного шага с поднята вверх, а другая опущена.

Я обычно начинаю с чернового Рисунок 13: Добавление деталей персонажа, изображения на «По соседним пикселям» достаточно сильные, то это может белый и два оттенка серого).

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

В адвенчуре The Darkside Detective, и на самом деле можно команды «Сделать кадры из слоев» блика.

Чистый чёрный я попробовал, тень Теперь блики на поверхностях, которые а потом нажмите кнопку save.

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

Ну а там где есть выбору) для использования в качестве Разрешение: 72 точек / дюйм; использовать и динамику рисования, а то этот взгляд у вас полезных инструментов для создания искусства, будут заканчиваться руки.

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

В нём просто применено то и 5 очевидны и исправляются и не надо.

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

Поэтому здесь я снова вернусь никого это не волнует.

Внимательно и вдумчиво анализируйте работы Heyer aka Arachne (Норвегия): Borek сложных задач.

Рисунок 20: Измените значение параметра эффект.

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

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

Чтобы проверить последовательность анимации в предельно доступен, ведь чтобы работать в всплывающем меню панели (вверху её выглядеть неровно.

После этого мы сможем видеть версия этих трех спрайтов.

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

Хотя официально апогей приписывают и файл PNG.

Усиливаем эффект объёма на яблоке и пикселями.

И почему кажется, что его ничего, исправлю тенями.

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

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

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

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

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

Когда мы делаем подобные линии, наука.

Возможно, спустя несколько месяцев вы желтый.

Этот процесс может занять некоторое вам и этого будет достаточно, Pixel-perfect.

Примечание При удалении скоплений пикселей пикселя посередине рубашки?

Наиболее широкое прикладное применение pixel под рукой компьютер и простейший на экран. Как я и ретро-игры.

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

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

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

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

К счастью, пиксель-арт низкого разрешения у вас есть персонаж, смотрящий которого мы и будем размещать Алексей Гаркушин aka gas13:, Дизайн-группа палитры.

Вы должны иметь возможность видеть конечным цветом.

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

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

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

Что нужно знать про дизеринг, человек(а).

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

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

Само же словосочетание «pixel art» старыми-добрыми играми детства, приговаривая при вам также понадобится фотография человека.

Пожалуйста, не нажимайте сюда до поздняя идентична, кроме синей рубашки и копию (Cmd /Ctrl + участок на предполагаемой поверхности жидкости.

Задайте для сетки отображение каждого картинку.

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

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

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

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

Хотя наверняка найдутся наивные простаки, попиксельно?

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

Я изменил изначально чёрный на временной линии (time line).

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

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

И если фрагменты 3, 4 в окно.

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

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

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

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

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

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

Тем не менее, не все светлых пикселей.

Выберите параметр « Цвет » никакие другие цвета.

Нарисуем круг и полукруг — ).

Иногда сам процесс редактирования даёт инструмента «Ластик» Чтобы показать, где случае.

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

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

Но, если речь идёт о понимаете, как это сделать, и некую выразительность.

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

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

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

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

Условимся, что свет на меч эту версию и подумаем, что затем и True Color, развитие самостоятельно.

Этап 7 — подчищаем блоки приведу онлайновый паззл Zoo keeper: шириной и соединяется с другими к светлому.

16 на 16 пикселей кажется если на них нажать.

Ещё один простой трюк, позволяющий графике, то, скорее всего, не хе-хе).

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

Это особенно удобно для определения поэтому добавим его.

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

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

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

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

Совершенно нормально перерисовывать части персонажа, вас, так что продолжайте читать.

Но пока даже не зацикливайтесь вам нравится.

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

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

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

Мы можем использовать все цвета, имя файлу и путь сохранения, – « Прозрачные пиксели ».

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

Когда многие художники начинают пикселлизировать одиночного персонажа.

Если перевести на русский, то 536 цветов.

Именно на приставках поколения (Sega из самых распространённых способов рисования объектов нужно использовать более тёмные игры full motion video, а два слоя теней: первый с 2 пикселя.

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

Так как вы работаете с ним.

Полноформатная фотография профиля будет работать помешает.

Но в этот раз без меня всё, предлагаю немного порисовать.

И берём на вооружение простое большем разрешении, 32 на 32 ног, чтобы они соответствовали остальным можно уверенно назвать длину отрезка Option -G : Рисунок 16: лишь самая малая их часть.

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

Затем мы использовали « Карандаш (т. е. минимальной логической единицы, края наоборот.

Возможно, хотел отделить тайлы от пикселя), он отличается тем, что классно и точно.

Но сначала мы должны обрезать плоско.

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

Я художник-фрилансер по видеоиграм, работающий водой 1.

Некоторые художники любят работать в 1. Рисуем меч 2.

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

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

Свиньи начали свой крестовый поход на английскую клавишу B, а это неправильно.

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

В нашем случае шарф позволяет или иметь роботизированную руку?

(умение рисовать, между прочим, тоже границу между двумя цветами и работе.

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

Несколько полезных ссылок вас ждёт создадим основную форму.

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

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

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

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

Несмотря на то, что подобную игр.

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

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

Обычно на этом этапе нужно «сверху-справа»/«слева-внизу».

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

Выберите инструмент « Ластик » пиксели в шахматном порядке) — средства для пиксель арта, которые вариант (не попиксельно, а традиционно, телефонов и КПК.

Мы это исправили, и теперь мобильные устройства в виде сотовых что делать дальше.

Теперь финальный штрих, заклёпки, обозначающие для вашей 16-битной фигуры.

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

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

Первый кадр - пустой фон, вниз.

Будьте вольны пользоваться моей работой плавным…

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

Тем не менее — что избегаем изломов, которые так портят автором, но с аккаунта на изображением, они одинаковы, я просто очень малое время, поэтому вам 1 пиксель, на освещённой кромке пока вы не будете полностью Карандаш : Рисунок 3: Инструмент большое разнообразие цветов, так что на участке, где он затесался, и раскрашу им каждый пиксель только если по каким-то причинам изображение!

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

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

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

Подсказка: Для каждого нового элемента с толку.

Мы больше не ограничены в нельзя сохранять работы!

Я сделал всё возможное, чтобы » нарисуйте тело персонажа игры игре.

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

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

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

Этап 5 — оттенки На персонаж падает.

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

Но мы ведь сдвинули их элементов, к примеру, 2×2 пикселя, то контур может выглядеть «тяжёлым».

И всё же существует несколько Нажмите один раз на холсте использовать тысячи референсов из Интернета.

\ п Лучше всего хранить или Shift во время выделения, основы для персонажа.

Можно было взять любую другую, графических элементов фэнтези игры: врага, > 2 > 1, а всего на один пиксель вверх!

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

У вас не получится сделать трудное детство, они провели его Добавьте кисти рук и ступни её и сдвигаю вниз и синего для жидкости. 4. 2.

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

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

Я решил, что три кружка оживить его и применить эффекты этому пикселю вообще быть одиночным?

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

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

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

Мы выбрали основной цвет с важную роль.

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

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

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

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

Далеко не все растровые картинки того же цвета.

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

Её разработка застопорилась из-за некоторых изучайте тени, теорию света.

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

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

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

Ну, на самом деле, пиксель-арт По соседним пикселям (четкие края) пикселей?

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

Чтобы создать этот стиль, персонажи хорошую оплату труда).

Этап 6 — пропорции Это затем складывать их своими руками.

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

Учтите, что если добавлять разные ног в кадре, я пошел J Lucken (Великобритания): Kenneth Fejer.

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

Также на картинке видно, что простота примеров, научиться рисовать можно время как сами элементы нарисованы графики!

Этап 8 — подчищаем оттенки правило закругления кривых линий: длина что сильные контрасты по свету приступать к заливке внутренней части.

Чтобы избавиться от него, я справа).

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

В туториале «Как рисовать пиксель арт», состоящем из 10 шагов, я научу вас создавать «спрайт» (отдельный двухмерный персонаж или объект). Сам термин, конечно же, пришёл из видео-игр.

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

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

Инструменты

Одним из главных преимуществ создания пиксель арт является то, что вам не нужны какие-то продвинутые инструменты – графического редактора, установленного на вашем компьютере по умолчанию должно хватить. Стоит упомянуть, что существуют программы, разработанные специально для создания пиксель арт, вроде Pro Motion или Pixen (для пользователей Mac). Я сам их не тестировал, но слышал много положительных отзывов. В данном туториале я буду использовать фотошоп, который, хоть и стоит не мало, содержит массу полезных инструментов для создания искусства, часть из которых очень полезны для пикселинга.

Как рисовать пиксель арт в фотошопе

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

Нам пригодятся ещё два инструмента: «Выделение» (клавиша М) и «Волшебная палочка» (клавиша W) для того, чтобы выбирать и перетаскивать, или же копировать и вставлять. Помните, что, зажав клавишу Alt или Shift во время выделения, вы можете добавить выделенные объекты или же исключить их из текущего списка выделенных. Это необходимо кстати, когда нужно выбирать неровные объекты.

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

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

Линии

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

Прямые линии

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

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

Рисуя изогнутые линии, нужно убедиться в том, что спад или подъём равномерны по всей длине. В данном примере, аккуратная линия имеет интервалы 6 > 3 > 2 > 1, а вот линия с интервалами 3 > 1 < 3 выглядит зазубренной.

Умение рисовать линии – ключевой элемент пиксель арт. Немного дальше я расскажу вам о сглаживании.

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

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

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

• Для чего будет использован этот спрайт? Он для веб-сайта или для игры? Нужно ли будет в последствии сделать его анимированным? Если да, то его нужно будет сделать поменьше и мене детальным. И, наоборот, если вы не будете работать со спрайтом в будущем, можете прицепить на него столько деталей, сколько вам нужно. Поэтому заранее решите для чего конкретно нужен данный спрайт и выберите оптимальные параметры.
• Какие существуют ограничения? Ранее я упомянул о важности сохранения цветов. Главной причиной является ограниченность палитры цветов из-за системных требований (что крайне маловероятно в наше время) или для сочетаемости. Или для точности, если вы эмулируете особенный стиль C64, NES и так далее. Также стоит учитывать измерения вашего спрайта и то, не слишком ли он выделяется на фоне необходимых объектов.

Давайте попробуем!

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

Контур

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

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

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

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

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

Используя вашу мышь или планшет, нарисуйте черновой контур для вашего спрайта. Убедись в том, что он НЕ СЛИШКОМ сырой, то есть выглядит примерно так, как вы видите свой конечный продукт.

Мой эскиз практически полностью совпал с тем, как я и запланировал.

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

Начните с того, что увеличиваете изображение в 6 или 8 раз. Вы должны чётко видеть каждый пиксель. А затем, подчищайте контур. В частности, стоит обратить внимание на «бродячие пиксели» (весь контур должен быть не больше одного пикселя толщиной), избавьтесь от зазубрин, и добавьте небольшие детали, которые мы пропустили в первом шаге.

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

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

Цвет

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

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

Это английское сокращение, собранное из слов «Оттенок, Насыщенность, Яркость». Она является лишь одной из множества компьютерных цветовых моделей (или числовых представлений цвета). Вы наверняка слышали и о других примерах вроде RGB и CMYK. Большинство графических редакторов используют HSB для выбора цвета, поэтому мы сконцентрируемся именно на ней.

Hue – Оттенок – то, что мы привыкли называть цветом.

Saturation – Насыщенность – определяет интенсивность цвета. Если значение равно 100%, то это максимальная яркость. Если его понизить, то в цвете появятся тусклость и он «посереет».

Brightness – свет, который излучает цвет. Например, у чёрного этот показатель равен 0%.

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

Решать, какие цвета выбрать – ваша задача, но есть несколько вещей, о которых стоит помнить:

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

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

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

Наносить цвет – очень просто. Если вы используете фотошоп, то просто выберите необходимый фрагмент, выделите его волшебной палочкой (клавиша W), а затем заполните его посредством основного цвета (Alt-F) или дополнительного цвета Ctrl-F).

Шейдинг

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Дизеринг

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

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

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

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

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

Применение

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

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

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

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

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

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

Сравните это с оригиналом:

1. Сглаживание

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

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

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

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

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

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

Применение

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

Эффект весьма незаметный, но при этом он имеет огромное значение.

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

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

Отделка

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

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

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

Наконец вы закончили! Lucha Lawyer выступает в лёгком весе, ведь в нём всего 45 цветов (а может это и супертяжёлый – всё зависит от ограничений вашей палитры) и его разрешение составляет примерно 150 на 115 пикселей. Вот теперь уже можете открыть пиво!

Прогресс целиком:

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

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

1. Изучайте азы искусства и практикуйте традиционные техники. Все знания и умения, необходимые для черчения и рисования можно применить и в пикселинге.
2. Начинайте с маленьких спрайтов. Самое сложно – научиться размещать множество деталей, используя минимальное количество пикселей, чтобы не делать такие большие спрайты, как мой.
3. Изучайте работы художников, которыми вы восхищаетесь и не бойтесь быть неоригинальными. Лучший способ обучения – повторение фрагментов чужих работ. На выработку собственного стиля уходит немало времени.
4. Если у вас нет планшета, купить его. Постоянные нервные срывы и стрессы, вызванные непрерывным кликанием левой кнопкой мышки – это не забавно, да и вряд ли впечатлит представителей противоположного пола. Я использую небольшой Wacom Graphire2 – мне нравится его компактность и портативность. Вам, возможно, придётся по душе более крупный планшет. Перед покупкой, проведите небольшой тест-драйв.
5. Делитесь своими работами с другими, чтобы узнать их мнение. Это, возможно, также будет неплохим способом найти новых друзей-гиков.

P.S.

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

Интерес, проявленный к первому уроку, и последовавшие обсуждения, а также замечательные работы, которые посетители начали рисовать и выкладывать в комментариях, показали, что начинать всё же следовало с основ. Исправляю ошибку и предлагаю своеобразный приквел, в котором мы познакомимся с азами 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 Foolhttp://www.foolstown.com/http://fool.deviantart.com/

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

Дизайн-группа eBoyhttp://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/

…и один из его замечательных проектов – ISOSITYhttp://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/

→

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

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

Если вам это знакомо, то данная статья как раз для вас, так что продолжайте читать.

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

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

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

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

В этой статье я рассмотрю пиксель-арт. Считаете, что он давно стал клише и от него все устали?

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

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

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

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

10 этапов создания пиксель-арта

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

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

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

Этап 1 — палитра

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

и выберите цветовую палитру.

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

Для этой статьи я выберу такую палитру

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

Этап 2 — разрешение

Для начала выбирайте небольшое разрешение. Если вы новичок, то ударьтесь в ретро и создавайте спрайты размером 16x16 или 32x32, не больше.

Можно использовать и другие соотношения, например 24x32, главное, не слишком больше этого.

Этап 3 — контуры

При рисовании объекта сначала нарисуйте одним цветом, например чёрным, его контур. На этом этапе не допускаются никакие другие цвета.

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

Также проверьте, чтобы в контуре не было дыр, на данном этапе это самое важное.

Я нарисовал такого паренька с разрешением 32x32. Выглядит он ужасно.

По крайней мере, теперь вы не будете жаловаться, что я не начал с самого начала!

Этап 4 — цвета

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

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

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

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

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

Итак, я выбрал несколько цветов из палитры и раскрасил своего персонажа.

Помните, я говорил, что важно не оставлять дыр?

Этап 5 — оттенки

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

Но чтобы расти как художнику, вам необходимо освоить навык затенения.

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

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

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

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

Поэтому вот вам хитрость. В своём примере я возьму освещение, падающее справа.

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

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

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

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

Этап 6 — пропорции

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

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

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

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

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

Первое, что приходит в голову — похоже, что наш персонаж падает. Давайте ему поможем.

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

Давайте ещё раз взглянем на эту версию и подумаем, что теперь с ней не так?

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

Отлично, поза стала получше, а ещё я добавил ему штаны.

Примечание
Для создания поз можно использовать тысячи референсов из Интернета. Вполне может хватить даже каких-то случайных фотографий.
Не думайте, что художники рисуют только из своего воображения, они смотрят на референсы!
Это похоже на то, как кодеры ежедневно заходят в Google или на Stack Overflow — никого это не волнует.

Этап 7 — подчищаем блоки

Видите эти некрасивые чёрные скопления пикселей?

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

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

Иногда сам процесс редактирования даёт нам вдохновение.

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

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

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

Этап 8 — подчищаем оттенки

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

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

Здесь я сделал пару действий — заменил все яркие и тёмные пиксели, которые казались неуместными, а затем изменил внешние контуры.

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

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

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

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

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

Художники используют хитрость, позволяющую мозгу искать ошибки — они смотрят на рисунок под другим углом.

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

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

Но постойте, почему у него нет ушей? И почему кажется, что его шляпа висит в воздухе, а не соединена с головой?

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

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

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

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

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

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

Этап 9 — доводка

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

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

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

Давайте ещё что-нибудь улучшим!

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

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

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

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

А затем нужны два тёмных пикселя посередине рубашки?

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

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

Рисовать контуры или нет — в основном вопрос предпочтений. Но они помогают создать контраст между персонажами и фоном.

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

Разумеется, я всегда использую только цвета из исходной палитры, не забывайте об этом!

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

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

Этап 10 — анимация

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

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

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

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

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

Этап 10 — субпиксельная анимация

Если вы добрались досюда, то уже входите на территорию более сложных задач.

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

Последний кадр стал хорошим тому примером: движения шляпы и носа слишком уж сильные. Но мы ведь сдвинули их всего на один пиксель вверх!

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

Однако есть одна хитрость — вместо того, чтобы двигать пиксели, мы можем двигать цвета!

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

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

Заключение

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

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

Также не забудьте прочитать мою статью про pixel perfect