Основы рисования пиксель арта
Данная статья представляет собой небольшой блок знаний об пиксель арте и его рисовании.
Что это и зачем это?
Пиксель арт – это изображение, нарисованное пикселями (квадратами). Пиксель-арт появился на свет из необходимости т. к. старые приставки и автоматы не могли создавать что-то сложнее мозаики из квадратных точек. Между тем, компьютерная графика уже требовалась. Сначала это были чёрно-белые, потом с палитрой из 4 цветов и дальше по нарастающей. С увеличением мощностей увеличивается количество пикселей на экране. Со временем пиксель арт теряет популярность, уступая место 3D и векторной графике. Однако с приходом Terraria, Undertale, Fez, Hotline Miami и много других, пиксель арт получил надежду на возрождение. У него появилась своя база поклонников и много художников начало развиваться в этой области. Поэтому я пишу эту статью, чтобы облегчить путь новичкам, желающим начать рисовать пиксель арт.
Про нетрадиционные способы рисования
Сейчас есть очень много способов создания пиксель арта, которые могут быть легче, чем традиционный. Например, как в игре Dead Cells. Художники создали 3D модель, после экспортировали в. png с дальнейшим ухудшением качества, чтобы выглядело «пиксельно». Это сделано дабы уменьшить затраты времени и денег на прорисовку большого количества кадров.
Основы пиксельарта (Часть 1)
В этом динамичном туториале я покажу вам основные приёмы создания пиксельарта. Спрайты — это картинки в 2D играх, которые представляют собой различные объекты: игрового персонажа, монстров, предметы и т.д.
Предыстория
Metal Slug 3 (Arcade). SNK, 2000.
Пиксельарт, также известный как дот-арт в Японии, это вид цифрового искусства, где рисование происходит на пиксельном уровне. В основном он ассоциируется с графикой игр 80-90 годов, в которых художники преодолевали технические ограничения (небольшое количество памяти и маленькое разрешение), создавая все более захватывающие картины.
В наши дни пиксель арт все еще актуален и используется в играх, несмотря на возможность создания реалистичной 3D графики. Почему? — cпросите вы. Если не брать во внимание ностальгию, то создавать хорошие рисунки с такими жесткими ограничениями все также интересно и достаточно сложно. Также, как мы восхищаемся тем, что художник, сделав пару мазков, может показать объем и вызвать у нас какие-то эмоции, мы любуемся несколькими соединёнными пикселями, выполняющими ту же работу.
Порог вхождения в пиксельарт довольно низкий, по сравнению с традиционным рисунком и 3D графикой, позволяя инди разработчикам воплощать свои идеи в жизнь. Но это никоим образом не означает, что закончить игру с ним будет легко. Я видел много пиксельарт проектов на кикстартере, которые думали, что управятся с игрой за год, когда в реальности нужно было около шести лет. Пиксельарт на том уровне, который хотят видеть люди требует достаточно много времени и усилий, есть лишь пару путей, позволяющих ускорить этот процесс.
Работая с 3D моделью ты, по крайней мере, можешь крутить ее, деформировать, перемещать её конечности, копировать анимацию с одной модели на другую и т.д, чего не скажешь о пиксельарте. Профессиональный пиксельарт почти всегда подразумевает под собой большое количество кропотливого размещения пикселей на каждом кадре анимации.
Как говорится “Кто предупрежден, тот вооружен!”, а теперь о моем стиле: по большей мере я использую пиксельарт для своих игр, они же и воодушевляют меня продолжать заниматься этим. Если быть точным, то я фанат Famicon(NES), 16 битных консолей и аркадных автоматов 90ых годов.
Мои любимые игры этой эры имели пиксельарт, который нельзя описать иначе как насыщенный, дерзкий и чёткий. но не настолько, чтобы быть чопорным или минималистичным. Это стиль, который я взял за основу своего, но вы можете легко использовать техники, применяемые в этом туториале для чего-то совсем другого. Смотрите на художников, которые вам нравятся и делайте пиксельарт, какой вашей душе угодно!
Курс пиксель-арта
Есть много определений пиксель-арта, но здесь мы будем использовать такое: изображение пиксель-арт, если оно создано целиком руками, и присутствует контроль над цветом и позицией каждого пиксела, который нарисован. Несомненно, в пиксель арте включение или использование кистей или инструментов размытия или машин деградации (degraded machines, не уверен), и других опций ПО, которые «современны», нами не используются (вообще-то put at our disposal значит «в нашем распоряжении», но по логике вроде правильнее так). Он ограничен инструментами такими как «карандаш» и «заливка».
Тем не менее не скажешь, что пиксель-арт или не-пиксель-арт графика — более или менее красива. Справедливее сказать, что пиксель-арт другой, и он лучше подходит для игр стиля «ретро» (как Супер Нинтендо или Гейм Бой). Вы можете также комбинировать техники изученные здесь, с эффектами из не-пиксель-арта, для создания гибридного стиля.
Так, здесь вы будете изучать техническую часть пиксель-арта. Тем не менее никогда я не сделаю вас художником… по простой причине, что я тоже не художник. Я не научу вас ни человеческой анатомии, ни структуре искусств, и мало скажу о перспективе. В этом руководстве, вы можете найти много информации о техниках пиксель-арта. В конце, вы должны будете быть способны создать персонажей и пейзаж для ваших игр, при условии что вы будете внимательны, практиковаться регулярно, и применять данные советы.
— Я также хочу указать, что только некоторые из изображений, использованные в этом руководстве увеличены. Для изображений которые не увеличены, будет хорошо, если вы найдёте время скопировать эти изображения так, чтобы вы могли изучить их детально. Пиксель-арт — это суть пикселей, изучать их издалека бесполезно.
— В конце концов, я должен поблагодарить всех художников, кто присоединился ко мне в создании этого руководства так или иначе: Шина, за его грязную работу и штриховые рисунки, Ксеногидрогена, за его гений цветов, Лунна, за его знания перспективы, и Панду, сурового Ахруона, Дайо, и Крайона за их щедро предоставленные работы, для иллюстрации этих страниц.
Так, позвольте вернуться к сути дела.
Часть 1: Правильные инструменты
Плохие новости: вы не нарисуете ни единого пикселя в этой части! (И это не причина пропускать её, так ведь?) Если есть поговорка которую я терпеть не могу, это «нет плохих инструментов, только плохие работники». На самом деле я думал, что не может быть ничего более далёкого от истины (исключая может быть «то что не убивает вас, делает вас сильнее»), и пиксель-арт, очень хорошее подтверждение. Это руководство нацелено ознакомить вас с различным программным обеспечением, используемым для создания пиксель-арта, и помочь вам выбрать правильную программу.
1.Некоторые старые вещи
Когда выбираешь ПО для создания пиксель-арта, люди часто думают: «Выбор ПО? Это безумие! Всё что нам нужно для создания пиксель-арта, это paint!(видимо игра слов, рисование и программа)» Трагическая ошибка: Я говорил о плохих инструментах, это первый. Paint имеет одно преимущество (и только одно): он уже есть у вас, если вы запустили Windows. С другой стороны, у него куча недостатков. Это (неполный) список:
* Вы не можете открыть более одного файла одновременно
* Нет управления палитрой.
* Нет слоёв или прозрачности
* Нет непрямоугольных выделений
* Мало горячих клавиш
* Ужасно неудобно
Вкратце, вы можете забыть про Paint. Сейчас мы посмотрим настоящее ПО.
2. В конце концов.
Люди тогда думают: «Ладно, Paint слишком ограничен для меня, так я буду использовать моего друга Photoshop (или Gimp или PaintShopPro, это одно и то же), которые имеют тысячи возможностей.» Это может быть хорошо или плохо: если вы уже знаете одну из этих программ, вы можете делать пиксель-арт (отключив все опции для автоматического антиалиасинга, и выключив многое из продвинутого функционала). Если вы ещё не знаете эти программы, тогда вы потратите много времени, изуччая их, даже хотя вам не нужна вся их функциональность, что будет пустой тратой времени. Вкратце, если вы уже используете их долгое время, вы можете создавать пиксель-арт (я лично использую Photoshop по привычке), но иначе, много лучше использовать программы, которые специализируются на пиксель-арте. Да, они существуют.
3. Сливки
Программ предназначенных для пиксель-арта много больше, чем кто-то может подумать, но здесь мы рассмотрим только лучшие. Они все имеют очень похожие характеристики (управление палитрой, предпросмотр повторяющихся тайлов, прозрачность, слои, и так далее). Различия у них в удобстве… и цене.
Charamaker 1999 — хорошая программа, но распространение, кажется, приостановлено.
Graphics Gale намного более интересна и легка в использовании, и она идёт по цене около $20, что не так уж плохо. Добавлю, пробная версия не ограничена по времени, и идёт с достаточным набором, чтобы сделать достаточно хорошую графику. Только она не работает с .gif, что не такая уж проблема, поскольку .png в любом случае лучше.
ПО более часто используемое пиксельными художниками, это ProMotion, которая (явно) более удобна и быстра чем Graphics Gale. А, да, она дорогая! Вы можете купить полную версию за скромную сумму… 50 евро ($78).
Позвольте не забыть наших друзей на Mac! Pixen хорошая программа, доступная для Macintosh, и она бесплатна. К несчастью я не могу сказать вам больше, потому что у меня нет Mac. Заметка переводчика (с французского): пользователи Linux(и другие) должны попробовать JDraw, и GrafX2. Я убеждаю вас попробовать их все в демо версиях, и посмотреть которая подходит вам по удобству. В конце концов это дело вкуса. Просто знайте, что однажды начав использовать программу, может быть очень сложно переключиться на что-то другое.
Заметки переводчика с французского на английский
Это большое руководство по пиксель арту, написано Филом Разорбаком с LesForges.org. Большое спасибо Филу Разорбаку за разрешение OpenGameArt.org перевести эти руководства и поместить их здесь. (От переводчика на русский: я разрешения не спрашивал, если кто имеет желание, можете помочь, не имею достаточного опыта общения на английском и тем более французском).
Заметка переводчика с английского на русский
Я программист, а не художник или переводчик, перевожу для своих друзей художников, но что добру пропадать, пусть будет тут.
Оригинал на французском где-то здесь www.lesforges.org
Перевод с французского на английский здесь: opengameart.org/content/les-forges-pixel-art-course
Я переводил с английского, потому что французский не знаю.
И да, это моя первая публикация, поэтому рекомендации по оформлению приветствуются. Плюс интересует вопрос, остальные части публиковать отдельными статьями, или лучше эту обновлять и дополнять?
Как начать делать пиксель-арт. Часть 1
Гайд для совсем начинающих.
Pedro Medeiros Эта небольшая статья о том, как начать свой путь в пиксель-арт и нацелена она на тех, кто только начал или собирается начать. Я расскажу про самые базовые вещи – как создать файл, настройки холста и работа с ограниченной цветовой палитрой.
Статья была проспонсирована на моем Patreon! Если она вам понравилась, то вы даже можете поддержать меня малой денежкой =)
Также это 1-ая часть планируемой серии статей, всю серию читайте в Pixel Grimoire.
Перед Началом
Перед тем как приступать к пиксель-арту, помните: пиксель-арт это всего лишь ещё один изобразительный инструмент, как гуашь, масло, карандаш, скульптура или похожая по своей сути на пиксель-арт мозаика. Чтобы делать хороший пиксель-арт, вы должны уметь делать хорошие рисунки. В основном, это значит: делать анатомические штудии, знать законы перспективы, понимать принципы работы светотени, знать теорию цвета и немножко историю искусств (от неё никто не умирал, наоборот это расширит ваш кругозор), всё это основы для хорошего пиксель-арта.
Инструменты
Вам не нужно никаких изощрённых программ и инструментов для пиксель-арта, его можно даже делать при помощи мышки и бесплатного ПО. Моё рабочее место включает в себя маленький Вакомовский планшет, хорошую мышку с клавиатурой и мою любимую программу Aseprite, но вы можете использовать любую другую программу на своё усмотрение.
Вот примерный список ПО широко используемого для пиксель-арта:
• Aseprite: Отличный профессиональный редактор со многими ускоряющими работу функциями (платный)
• GraphicsGale: Классический, широко используемый во многих играх. Слегка сложноват, но у него много функций (бесплатный).
• Piskel: Бесплатный онлайн редактор
• Photoshop: Мощный редактор, изначально не создавался для создания пиксель-арта, но его тоже можно использовать (платный).
Aseprite
Aseprite мой любимый редактор для пиксель-арта на текущий момент. Очень мощный, напичканный разными функциями и простой в использовании. Я выбрал Aseprite в качестве программы для этого урока, но я также уверен, что вы сможете адаптировать всё ниже описанное для любой выбранной вами программы. Вы можете попробовать пробную версию, но учтите, что она не умеет сохранять файлы, что в принципе для наработки навыка и обучения не слишком то и критично.
Создание Нового Файла
Просто нажмите “New File…” на стартовом окне или File > New File и можно начинать рисовать.
Давайте создадим новый файл. 16 на 16, наверное, будет выглядеть маловато, но думаю, что для начала сойдёт. Большее разрешение может отвлечь вас от главной задачи: понимания того, как пиксели взаимодействуют с другими пикселями по соседству.
Aseprite ‘New Sprite’ меню
Вы можете оставить цветовой режим в RGBA, он наиболее простой и понятный. Некоторые пиксель-арт художники любят работать в indexed палитре, которая даёт доступ к некоторым крутым цветовым приёмам, но и имеет определённые недостатки.
Оставьте фон прозрачным или белым для начала. Только убедитесь, что опция Advanced Options отключена (но не бойтесь поэкспериментировать с ней позже) и можно начинать!
Давайте Рисовать!
В интерфейсе очень много различных менюшек и тулбаров, но не волнуйтесь нам нужна лишь парочка кнопок для начала. Главный инструмент это Pencil, обычно следует сохранять ширину в 1 пиксель и именно при помощи него мы будем расставлять наши пиксели на холсте. Просто нажмите на иконку или на B и щелкните по холсту, чтобы поставить пиксель.
Aseprite рабочая область Слева вы видите цветовую палитру, с цветами по умолчанию. Давайте изменим её на другую более простую. Щёлкните по третьей иконке в верху цветовой палитры (Pressets) и выберите ARQ4 (очень хорошую палитру сделанную Endesga), именно её мы будем использовать для нашего первого спрайта.
Теперь используя только 4 цвета сверху слева, попробуем нарисовать кружку.
Не стесняйтесь использовать мой пример в качестве вдохновения, но всё же постарайтесь сделать свой вариант. Если вы допустили ошибку, то нажмите alt+click на пустой области или в области за вашим рисунком, и вы сможете «выбрать» прозрачный цвет и использовать его для удаления неправильных пикселей. Иным вариантом может быть использование Eraser или хоткея Е для быстрого выбора.
Вы, наверное, заметите, что работа в таком низком разрешении кардинально отличается от обычного рисования. Всё должно быть просчитано и каждый пиксель имеет важное значение. Это то, к чему вы должны привыкнуть как можно раньше.
Вы также можете попробовать другие кнопки на меню инструментов. Многие из них имеют дополнительные опции, когда нажаты. Для начала старайтесь избегать использовать инструмент blur tool так как он добавляет дополнительные цвета, что нам сейчас совсем не нужно.
Ну а теперь давайте сделаем больше спрайтов! Попробуйте нарисовать череп, меч и лицо человека. На этот раз уже без моей работы как референса. Если вам кажется, что ваш спрайт не умещается в холст, то это абсолютно нормально, попробуйте свести часть деталей к одному пикселю. Работать на таком низком разрешении очень сложно и похоже на сбор мозаики или пазла. Я написал одну статью о работе на низком разрешении для Kano.
Если вам интересно, то вот мои версии тех спрайтов, только закончите свои перед тем как их смотреть [skull, sword and human face]
Это очень хорошее упражнение. Если вы хотите ещё попрактиковаться, то попробуйте сделать больше спрайтов с такими же ограничениями.
Сохраняем файл
Чтобы сохранить файл нажмите Control+S (или File>Save As…), задайте имя и папку для сохранения.
Не забудьте, что в триальной версии Aseprite нет функции сохранения.
Aseprite Export File меню
Вы наверное заметили, что Aseprite может сохранять файл в различных форматах, но я бы рекомендовал вам использовать .ase для ваших файлов. Это как в Photoshop есть формат .psd Когда вы экспортируете спрайт для веб или игр, вы можете использовать Control+Alt+Shif+S или File>Export.
Почему следует использовать для масштабирования круглые числа.
Aseprite обладает очень хорошей функцией Resize в окне экспорта. Она масштабирует ваш спрайт в круглых числах, что идеально. Если вы захотите отмасштабировать свой спрайт, например, в 107%, то пиксели сдвинутся и получится мешанина, но если вы выберите 200%, то каждый пиксель будет в 2 пикселя шириной и высотой, что выглядит хорошо и красиво. Холст большего размера
Теперь после того как вы освоили основы, такие как: создание файла, сохранение и рисование на холсте, давайте попробуем рисовать на немного большем холсте, 32 на 32 пикселя. Теперь мы будем использовать большую палитру, попробуйте AAP-Micro12 (от AdigunPolack). В этот раз мы будем рисовать лопату.
В отличие от спрайта 16 на 16, здесь мы можем использовать контур, так что давайте начнём с него. Вот мой пошаговый процесс:
Этап 1: Линии
Этап 1 Такой стиль линий мы в пиксель-арте называем идеальной линией, ширина в 1 пиксель и соединяется диагонально с другими пикселями. Когда мы делаем линейный рисунок, то избегаем ненужных краёв, как здесь:
Aseprite обладает очень хорошей функцией в настройках кисти, чтобы делать это автоматически: с выбранным brush tool включите Pixel-perfect опцию. Только не забудьте выключить её, когда не работаете с контуром, иначе она будет вас раздражать.
Aseprite функция Pixel perfect Этап 2: Основные цвета
Этап 2 Малое количестве цветов хорошо тем, что вы не запутаетесь в обилии вариантов. Именно по этой причине очень сложно работать с большой палитрой, если у вас есть в палитре цвет, то вы обязаны его использовать в спрайте. Старайтесь думать о цвете в палитре как о кусочках паззла, экспериментируйте с ним, создавайте различные, самые невероятные комбинации, пока не найдёте ту, что «идеально» подходит для каждого участка вашего спрайта.
Этап 3: Тени
Этап 3 Используйте палитру, для творческого подхода к созданию света и тени в спрайте. Так как вы работаете с очень ограниченной палитрой, то у вас не будет всех доступных оттенков цвета с каждой доступной тональностью и вам придётся импровизировать.
Импровизированные тени с различными оттенками В примере слева я использую ту же самую палитру что и AAP-Mini12. Когда я рисовал этого зелёнокожего парня, то у меня не было светлого зелёного, так что я выбрал ближайший доступный мне оттенок, который оказался жёлтым. То же самое с тенями, я выбрал синий, потому что он близок к наиболее тёмному оттенку. Но что если бы я сделал всё по-другому? Ведь я мог использовать ярко-синий и тёмно-красный, так? На самом деле, это не очень хорошее сочетание:
Тени с инвертированным оттенком Эффект выглядит классно, но что-то со всем этим не так. Обычно вы стараетесь использовать холодные оттенки в тенях и тёплые на свету. Это конечно не выбитая на скрижалях заповедь, есть много исключений из этого правила, но, когда у вас нет уверенности, что это принесёт пользу, то лучше придерживаться правила.
Этап 4: Анти-ализинг и полировка
Этап 4 Эта та часть создания спрайта, когда вы стараетесь сделать его менее «рублёным». Ручной анти-ализинг весьма сложный навык, о нём можно написать целую статью, но в теории вы используете средний тон, чтобы симулировать «полупиксели» и смягчить края спрайта. Но не заморачивайтесь об этом сейчас, для вас главное сделать спрайт чётким и читаемым.
Другой хорошей идеей на данном этапе это будет отлов и отстрел некоторых одиночных пикселей, чтобы уменьшить шум. Одиночные пиксели, которые не являются частью большой группы пикселей того же цвета и не являются частью анти-ализинга, выглядят так:
Убираем одиночные пиксели Видите, однопиксельные острова на планете слева? Это одиночные пиксели и как вы заметили, после их уборки, планета стала выглядеть гораздо лучше.
А что насчёт звёзд? Они как раз доказывают, что одиночные пиксели, если их использовать с умом, могут быть полезны для таких вещей как создание текстуры шума, или контраста на фоне.
Смысл не в том, чтобы бездумно убирать одиночные пиксели, но найти их и спросить себя: этот пиксель точно должен быть один?
И что теперь?
Теперь настало время поиграть с цветами и попробовать большее разрешение! Но не спешите, разрешение 48 на 48 и 16 цветов, затем далее. Не стоит сразу переходить к анимации, сначала набейте руку в создании статичных спрайтов.
Специально для вас я выбрал гайды, которые могут вам пригодится:
• Pixel art tutorial by Cure
• Pixel art tutorial by Derek Yu
• Pixel art tutorial by Arne
У меня также есть несколько уроков, о специфичных аспектах пиксель-арта и гейм-дизайна, вы можете увидеть их здесь:
• My Patreon page
• Мои уроки