Основы пиксель-арта: рабочий процесс — CG Магнит
Мечтаете заняться пиксель-артом и не знаете, с чего начать? В этой статье вы найдете три полезных совета о том, как организовать свой рабочий процесс.
Итак, вы установили нужные программы, набрались вдохновения и запаслись парой часов свободного времени. Вы готовы приступить к делу, и не хотите, чтобы какие-нибудь мелочи вроде рези в глазах от напряжения отвлекали вас от творчества. Вот несколько советов, которые помогут вам работать над крошечными точками часами, избегая перенапряжения, получить наилучший результат.
Совет 1: работайте в низком разрешении
Если вы — счастливый обладатель ноутбука, у вас есть идеальный монитор для рисования пиксель-арта. Почему? Если установить разрешение 800×600 на мониторе 12″ на 15», вы получите самые большие возможные пиксели для работы. Это увеличение на первый взгляд невелико, но через пару часов рисования спрайтов возврат к высокому разрешению покажется вам резким переходом.
Если же у вас в распоряжении только компьютер с большим монитором, вы все же можете понизить разрешение, но до определенного предела — если на 24″мониторе с высокой четкостью установить разрешение 800×600, получится хаос. Путем проб и ошибок найдите собственное идеальное сочетание разрешение-чёткость.
Почему этот приём позволит вам получить наилучший результат? Помните, что пиксели — всего лишь точки света. Если направить красный и жёлтый фонарик на стену рядом друг с другом, их свет немного смешается. Точно так же когда два пикселя помещаются рядом, их цвет слегка смешивается на экране. (Если играть в игру на телевизоре, это смешение становится явным, но его можно заметить и на мониторах с высокой четкостью).
Такое смешение света — тонкая черта любого пиксель-арта. Как только ваш глаз будет наметан замечать её, вы увидите, как она усиливает эффект сглаживания, влияет на контур и помогает подобрать цвета и глубину тени. Освойте её, и ваши пиксели будут выглядеть превосходно даже на мутном телеэкране.
Когда вы увеличиваете пиксели, эффект, конечно, теряется, так как вы заменяете каждый увеличенный пиксель группой пикселей на экране. Так что если хотите создать спрайт и в то же время контролировать смешение цвета, вам необходимо видеть ваш спрайт в 100% увеличении во время работы. И это подводит нас к…
Совет 2: всегда пользуйтесь масштабированием
Рисуя на бумаге, вы смотрите не только на ту линию, над которой работаете. Вы проводите несколько линий, останавливаетесь и оцениваете, хорошо ли новые линии смотрятся на рисунке в целом, и нужно ли их подправить.
Точно так же работа с увеличенным участком важна для отдельно взятого куска рисунка, но чтобы увидеть, создают ли нужный эффект только что добавленные вами пиксели для работы в целом (например, мягко ли смешиваются только что нарисованные вами пиксели бровей персонажа), вам придётся постоянно возвращаться к уменьшенному виду рисунка. Вы удивитесь, какой хаос может сотворить один-единственный пиксель на тон темнее, чем нужно.
- Всегда работайте с увеличенным изображением, добавляя детали, и с изображением реального размера, чтобы оценить полученный эффект.
Некоторые художники могут и не разглядеть подобные тонкости, но с опытом приходит и желание не довольствоваться простым «и так сойдет». (Примечание: пиксель-арт — это одна из немногих сфер жизни, где не повредит перфекционизм. Есть в пиксель-арте и кое-что приятное: если вы закончили спрайт, а через месяц стали им недовольны, всегда можно вернуться к моменту окончания рисунка и доводить его до совершенства).
В Photoshop и Gimp вы можете открыть спрайт с увеличением 500% в одном окне, а в другом тот же самый документ в 100% размере. Правки, которые вы будете вносить в одном документе, сразу же будут отображаться и во втором. Это позволит вам переключаться с одного вида на другой, не отвлекаясь на остановки и увеличение/уменьшение масштаба рисунка. В Photoshop CS это можно сделать так: Окно — Упорядочить — Новое окно для [имя документа].
Наконец, чтобы сберечь глаза, …
Совет3: всегда работайте на тёмном фоне
Многие художники начинают работать на нейтральном фоне, чтобы лучше видеть цвета и оттенки, которые они подбирают. Пиксель-художники могут поступить так же, чтобы почувствовать, как смешивается цвет пикселей на экране.
Пиксели сделаны из света. Когда работаешь с цветами, сделанными из света, нельзя рисовать на белом фоне. Белый по своей интенсивности превосходит яркость пикселей, плюс через некоторое время вам будет казаться, что в глаза вам светит гигантский прожектор. Сделайте фон тёмным и нейтральным, выделив таким образом свет и цвет пикселей.
Так значит, нужно рисовать на чёрном фоне, так? Не совсем. Особенно если у вашего спрайта есть контур. Помните, вы хотите, чтобы свет ваших пикселей естественно смешивался, а это касается и контура. На чёрном фоне вы получите странный эффект, когда контур вашего спрайта будет почти не заметен, а высокий контраст между черным фоном и ярким спрайтом будет бить по глазам.
Для рисования спрайта идеальным будет фон немного темнее, чем самый тёмный контур, но достаточно светлый, чтобы давать свет, смягчающий края контура.
- Конечно, если ни один вариант вам не подходит, для ваших глаз есть крайнее средство.
Конечный результат спрайта на хорошем фоне — это спрайт, который будет хорошо смотреться на любом фоне, в том числе и движущемся (если вы создаёте анимированный спрайт для игры). Я обычно работаю на серовато-зелёном фоне, имитирующем некий цветовой контраст, но достаточно тёмном, чтобы источник света на фигурах был хорошо заметен.
Курс «Пиксель-арт» от XYZ School
Анонс курса по стилю пиксель-арт
Научись рисовать пиксель-арт: от простейших объектов до полноценных локаций и анимации.
Длительность курса: 3 месяца (2 месяца программа + 1 месяц проверка домашних заданий)
Количество материала: 16 live-лекций по 1,5 часа.
Записаться на курс: School-xyz/pixel-art
КОРОТКО О КУРСЕ
— Преподаватель — Екатерина Руденок, художник по фонам игры Blasphemous.
— Ты узнаешь принципы и правила пиксельной графики и освоишь основные художественные приёмы.
— Научишься создавать фоны и локации.
— Разработаешь дизайн пиксель-арт персонажей.
— Научишься создавать анимацию для мобов: ходьбу, прыжки, полеты, атаки и многое другое.
— Сделаешь игровое меню и интерфейс.
— В итоге у тебя будет набор из всех необходимых для создания собственной игры ассетов.
ЧТО ТАКОЕ ПИКСЕЛЬ-АРТ
Это техника рисования, в которой нарочно делается акцент на каждом пикселе.
Популярность пиксельной графики в 80-х была обусловлена ограниченными палитрами компьютеров и консолей. Почему же и сейчас её выбирают многие инди-разработчики?
— Научиться рисовать пиксель-арт можно быстро, и для этого не нужно быть «традиционным» художником.
— Создавать ассеты и анимации в этой технике быстрее и дешевле.
— Такая графика менее требовательна к памяти устройства.
— У этой техники множество фанатов. Связано это как с ностальгией по ретро-играм, так и с особой атмосферой, которую может создать только пиксель арт.
Без пиксель-арта не получились бы ни Hyper Light Drifter:
Скриншот игры Hyper Light Drifter
Ни Inmost:
Скриншот игры Inmost
Ни Owlboy.
Скриншот игры Owlboy
Для создания таких игр необходима тонкая работа художника: нужно контролировать каждый пиксель, понимать, как будут выглядеть перспектива и объем.
ЦЕЛЬ КУРСА
Научить тебя рисовать в технике пиксель-арт всё, что необходимо для создания настоящей пиксельной инди-игры: персонажей и их анимации, локации и интерфейс.
ТЫ ИЗУЧИШЬ:
— Правила пиксель арта.
— Различные техники: обводку, дизеринг, сглаживание и другие приемы.
— Виды тайлов, их внешнюю и внутреннюю структуру.
— Теорию цвета и ее применение в пиксель арте.
— Профессиональные приёмы анимации.
— Дизайн и покрас мобов.
— Анимацию атаки, стрельбы, полёта и других действий.
ДЛЯ КОГО ЭТОТ КУРС
- Для новичков, которые не умеют рисовать и мечтают создавать собственные инди-игры.
- Для тех, кто хочет прокачать свой скилл в пиксель арте и научиться навыком, которые пригодятся в работе над играми.
- Для художников, которые хотят освоить новый стиль и приёмы.
КТО ПРОВОДИТ КУРС
Екатерина Руденок начала рисовать пиксель-арт в 16 лет, загоревшись идеей создания своей игры. Сперва она выбрала это направление за неимением достаточно мощного компьютера. Но затем увлеклась, стала выкладывать свои работы в тематические паблики, и в итоге это свело ее с испанской студией The Game Kitchen. Самый известный проект, над которым работала Катя — инди-хит Blasphemous.
Екатерина Руденок: «Я задумала этот курс так, будто бы возвращаюсь в прошлое и рассказываю самой себе обо всех нюансах, которые были так важны в самом начале».
Скриншот из Blasphemous — игры, над которой работала Екатерина
ПРОГРАММА КУРСА
Лекция 1. Основы пиксель-арта
На этом занятии мы выберем программу для рисования, поговорим о рисовании от пятна, а также изучим правила, которые отличают пиксель-арт от обычного рисования.
Ты узнаешь: об основных нюансах и инструментах, необходимых для рисования пиксельарта.
Домашка: выбрать программу и нарисовать несколько пиксельных объектов и силуэтов с учётом правил, описанных в уроке
Время: 1 час на лекцию, 2 часа на домашку.
Лекция 2. Цвет
Мы познакомимся с базовой теорией цвета и разберёмся, как работать с ними в рамках ограниченной палитры и пикселей.
Ты узнаешь: какие цветовые схемы бывают, и каков подход к работе с каждой из них, а также как строятся палитры для пиксель арта.
Домашка: раскрасить несколько набросков.
Время: полтора часа на лекцию, 3 часа на домашку.
Лекция 3. Продолжаем изучать технику пиксель-арта.
Рисуем арты с использованием пиксельных техник: аутлайна, дизеринга, сглаживания и других приемов.
Ты узнаешь: насколько разнообразным может быть подход к рисованию пиксельных артов и как сделать арт читаемым, несмотря на небольшое количество пикселей.
Время: полтора часа на лекцию, 4 часа на домашку.
Лекция 4. Тайлы и их внутренности в играх
На этом занятии мы займёмся рисованием разных видов тайлов и текстур в пикселях, разберемся в их внешней и внутренней структуре.
Ты узнаешь: как разнообразить структуру уровня и как рисовать различные текстуры в пикселях.
Домашка: сделать 3-4 наброска тайловых структур с учетом логики, изученной на уроке.
Время: полтора часа на лекцию, 3 часа на домашку
Лекция 5. Слои тайлов и воздушная перспектива. Игровые перспективы и превдоперспектива.
Создаём слои паралакса с учётом цветовой схемы и раскрываем приёмы, позволяющие экономить время на обработке задних фонов. Разбираемся, как рисовать разные объекты с учётом перспективы.
Ты узнаешь: об основных схемах построения паралаксов в открытых и закрытых структурах; о том, как создавать ощущение объёма в пиксельных платформерах, не имея возможностей 3D.
Домашка: сделать 3-4 наброска паралаксов в несколько слоёв.
Время: 1 час на лекцию, 3 часа на домашку.
Лекция 6. Фокусные точки, ритм объектов и сами объекты.
Создаём уровни и добавляем особые объекты окружения таким образом, чтобы у уровня был свой «ритм» и настроение. Строим структуры, подталкивающие игрока каким-либо действиям
Ты узнаешь: как разнообразить игровую структуру и использовать игровую среду, чтобы подталкивать игрока к определенным действиям.
Домашка: продумать несколько игровых ситуаций, в которых пропсы будут вести игрока к особой цели.
Время: 1 час на лекции, 1-2 часа на домашку.
Лекция 7: Анимация простейших объектов с гиперболизацией.
Изучаем и применяем на практике приёмы, которые используют профессиональные аниматоры.
Ты узнаешь: о приёмах, которые делают анимацию даже простых объектов более живой, о гиперболизации поведения объекта.
Домашка: санимировать предложенные простые объекты.
Время: 1 час на лекции, 2-3 часа на домашку.
Лекция 8: Разработка мобов с учётом их базовых механик.
Развиваем видение мобов в силуэтах и учимся работать с ключевыми кадрами анимации.
Ты узнаешь: как создать первые силуэты мобов и сформировать ключевые кадры айдл-анимаций и анимаций перемещения, с которыми в дальнейшем будешь работать.
Домашка: нарисовать несколько силуэтов мобов с ключевыми кадрами анимаций (айдл/ходьба).
Время: 1 час на лекции, 1-3 часа на домашку.
Лекция 9. Покрас мобов.
Ты узнаешь: как превращать силуэты в полноценные спрайты.
Домашка: прорисовать по одному кадру айдл-спрайта.
Время: 1.5 часа на лекции, 3-5 часов на домашку.
Лекция 10: Анимации боя и прочих интеракций.
Изучаем анимации атаки и другие взаимодействия мобов с персонажем.
Формируем ключевые кадры с учетом этих механик.
Ты узнаешь: как механики работают на длительность анимаций и как строить ключевые кадры с учетом этой информации.
Домашка: нарисовать паки ключевых кадров для 1-3 мобов, сформированных ранее
Время: 1 час на лекции, 1-3 часа на домашку.
Лекция 11: Превращаем ключевые кадры в анимацию.
Учимся добавлять промежуточные кадры, использовать перекладку и сабпиксели.
Ты узнаешь: как использовать перекладку в пиксель арте, что такое сабпиксели и как они позволяют экономить время
Домашка: доработать ключевые кадры, созданные на прошлом уроке, в полноценную анимацию.
Время: 1.5 часа на лекции, 3-5 часов на домашку.
Лекция 12: Маленькие трюки, которые улучшают любые анимации.
Добавляем эффекты, которые дают ощущение «живости» происходящему на экране.
Ты узнаешь: как с помощью маленьких трюков оживить даже самую простую анимацию и дать игроку ощущение комплексности происходящего
Домашка: добавить к анимациям эффекты взаимодействия в нескольких вариациях.
Время: 40 минут на лекцию, 1 час на домашку.
Лекция 13: Даем жизнь статическим объектам!
Оживляем громоздкую статику с помощью простых, но эффектных анимаций мелких элементов уровня. «Учим» уровень реагировать на взаимодействие с игроком.
Ты узнаешь: как создать эффект «живого» уровня за счет анимирования мелких деталей; как создать ощущение того, что игрок находится не просто в бетонной коробке, а в живой среде.
Домашка: нарисовать несколько элементов и тайлов, с которыми на игровом уровне будет производиться поверхностное взаимодействие.
Время: 40 минут на лекцию, 2 часа на домашку.
14. Интерфейс внутри уровня.
Разрабатываем GUI основного игрового окна, инвентаря и диалоговых окон.
Ты узнаешь, как на выбор GUI влияет игровой процесс и казуальность механик, что именно подойдет твоему проекту и как вообще оформлять интерфейсы.
Домашка: сделать 2-3 наброска GUI и проработать как минимум один из вариантов в подробностях.
Время: 1-2 часа на лекции, 2-3 часа на домашку.
15. Внутренности инвентаря: иконки для UI, скиллов и прочих систем.
Разбираем рисование иконок скиллов и предметов в разных разрешениях, а также проходимся по необычным примерам, в которых иконки используются как часть игрового уровня.
Ты узнаешь: о цветовом настроении иконок, о композиции и «направляющих», которые позволяют передать действие, которое активирует иконка. О «статичных» иконках предметов и выборе цветов для них.
Домашка: придумать несколько действий, которые будут отражены в иконках, и на каждое действие сделать несколько набросков, по-разному отражающих эффект. Нарисовать несколько предметов для инвентаря с аутлайном и без.
Время: 1 час на лекцию, 2-3 часа на домашку.
16. Оформление главного меню
Придумываем аутентичное игровое меню, разрабатываем наброски с учётом фокуса внимания игрока и композиции, придумываем фишку
Ты узнаешь: как сделать меню, которое не будет перегружать глаз, как оформлять взаимодействие с меню так, чтобы оно ощущалось живым и интересным.
Домашка: нарисовать два-три варианта набросков меню с учетом графической нагрузки на экран.
Время: 1 час на лекцию, 1-3 часа на домашку.
Что ты получишь по итогу
У тебя будут все навыки, необходимые для создания пиксель-арта для игр, а также множество ассетов для портфолио.
На курсе ты нарисуешь и анимируешь летающего моба, стреляющего персонажа и его снаряд, атаку и реакцию на неё, и многое другое. Всё это ты сможешь использовать для создания собственной инди-игры, поместить в портфолио, или даже продавать в качестве набора ассетов.
ЗАПИСЫВАЙСЯ ПРЯМО СЕЙЧАС
Записаться на курс
Беспроцентная рассрочка
Click to order
Твой заказ
В СТОИМОСТЬ ВХОДЯТ:
Проверка домашки.
Одна лекция — одно домашнее задание для усвоения материала. По каждому ты получишь фидбек от ассистента преподавателя — проверенного мидла с опытом в индустрии не менее трех лет.
Доступ к лекциям без ограничений по времени.
Учись в комфортном для себя темпе. Новые уроки открываются сами по мере прохождения программы, а к записям предыдущих можно вернуться в любое время.
Стримы с преподавателем.
Раз в неделю преподаватель проводит прямую трансляцию, где отвечает на вопросы студентов, разбирает их работы и проводит бонусные мастер-классы.
Личный кабинет на платформе XYZ.
Все лекции, стримы, домашки, чек-листы и дополнительные материалы ждут тебя в личном кабинете на нашей собственной платформе learn.school-xyz.
Закрытая группа в Discord.
Ты сможешь без лишних формальностей общаться с преподавателями и со всеми студентами с твоего потока. Ты приходишь на курс один, а уходишь с новыми друзьями и полезными знакомствами.
ОТЗЫВЫ НАШИХ СТУДЕНТОВ
Читать отзывы о XYZ School: headkurs.com/schools/otzyvy-xyz-school/
Больше отзывов читай здесь: vk.com/topic-124560669_34868074
Записывайся на курс: School-xyz.
com/pixel-art
По всем вопросам пиши в личные сообщения группы.
А также обязательно вступай в наше сообщество XYZ School в ВКонтакте — у нас много полезного контента в открытом доступе.
Понравилась статья?
ХОЧЕШЬ ПОЛУЧАТЬ ЛУЧШИЕ СТАТЬИ
ОТ XYZ РАЗ В НЕДЕЛЮ?
Подпишись на рассылку XYZ
Нажимая на кнопку, вы соглашаетесь с условиями обработки данных
Курс «Продюсирование игр» от XYZ School
«Продюсирование игр» — курс для тех, кто хочет создать собственную инди-игру и заработать на ней, — найти инвестора, собрать команду, довести разработку до конца и…
Годовая программа «3D-аниматор» от XYZ School
Пройди путь от новичка до профессионального 3D-аниматора под руководством старшего аниматора персонажей в Saber Interactive.
Введение в пиксельную графику • Ричард Джейнс
Введение в пиксельную графику »
В течение ряда лет я неуклонно совершенствовал свои навыки в области пиксельной графики с первых дней, когда я играл с RPG Maker 95.
В то время я с трудом мог вносить простые изменения в крошечные спрайты в стиле Final Fantasy. Сейчас, намного позже, кажется, что это не так сложно, как раньше. В первые годы мой пиксель-арт просто не работал и выглядел вообще ужасно. Несмотря на то, что неопытные зрители сказали, что работа была хорошей, она просто была не на высоте. Я не мог правильно проработать линии, правильно затенить или почти что-то сделать с этим, и без освоения этих основ более сложные вещи никогда не выглядели бы качественно. Только когда появился обучающий сайт по пикселям Spriteart.com, можно было понять основы. Как только основы были изучены, остальное, казалось, встало на свои места.
На Spriteart.com больше нет учебных пособий, если только вы не будете копаться в архивах, поэтому вместо этого здесь есть учебное пособие для изучения пиксельной графики с нуля. Во-первых, вещи, которые нужно учить, понимать и осваивать прежде всего, являются основами. Учебники по основам могут показаться знакомыми некоторым, так как мне нравится следовать урокам, извлеченным из прекрасных примеров spriteart.
Есть четыре основы: штриховой рисунок, цвета, сглаживание и, наконец, затенение/сглаживание. В зависимости от вашего уровня способностей, вам следует попробовать попрактиковаться в некоторых из этих основ, чтобы убедиться, что вы их понимаете.
Штриховой рисунок »
Штриховой рисунок может быть сложным для пиксельной графики. Это имеет большое значение для работы, если штриховой рисунок сплошной. Когда это не так, финальная часть обычно всегда оказывается катастрофой. В настоящее время линейная работа на самом деле менее важна, чем в 90-х, потому что разрешение для игр в настоящее время настолько велико, что вы едва заметите некоторые небольшие проблемы. Тем не менее, что касается этого руководства, всегда лучше правильно преподавать основы. В пиксель-арте пять прямых линий. 0, ¼, ½, ¾ и 1 прямого угла.
Эти пять различных прямых линий можно зеркально отразить или повернуть, но что делает эти линии лучше других, так это то, что они непротиворечивы.
Пиксели всегда работают по одному, по два или полностью вертикально или горизонтально. Это также можно сделать для любого числа, если они всегда согласованы. Эти прямые линии особенно полезны, когда речь идет об изометрическом дизайне, таком как в Sim City 2000. Использование этого типа линий не всегда возможно, особенно для неоднородных органических форм. Однако включение их в максимально возможное количество мест делает спрайт более безупречным.
Это примеры прямых линий, которых следует избегать по возможности. При работе с пиксель-артом следует избегать таких линий, поскольку они кажутся шаткими и бесформенными. При просмотре в более низком разрешении, каким они были бы в 90-х годах, с таким подходом были явные проблемы. Небольшие проблемы с неправильными линиями можно скрыть с помощью сглаживания, которое будет рассмотрено ниже.
При создании фрагмента пикселей убедитесь, что все кривые плавные и точные. Неровные и зазубренные углы, как показано на трех нижних кривых здесь, никогда не будут хорошо смотреться на пиксельной работе.
Цвета »
Ошибка, которая слишком часто случается с начинающими художниками по пикселям, заключается в том, что они никогда не получают правильные цвета и оттенки. Выбор правильных цветов и, конечно же, правильных оттенков чрезвычайно важен для успеха произведения. Есть две основные области, с которыми, как мне кажется, люди склонны бороться.
Во-первых, кажется, что люди не используют преимущества цветового круга и насыщенности (силы цвета).
На цветовом круге есть теплые и холодные цвета. Оранжевые, красные и желтые цвета — теплые, а синие, зеленые и фиолетовые — холодные. При создании тени на работе лучше использовать больше холодных оттенков, чем теплых. Для областей, которые получают наибольшее количество света, очевидно, лучше использовать более теплые цвета. Вот почему при большом количестве профессиональных работ с пикселями вы часто будете использовать желтый цвет для ярких пятен и темно-синий цвет для темных областей.
Многие новички, как правило, просто выбирают цвет, а затем увеличивают и уменьшают яркость, чтобы имитировать затенение. При смешивании двух соседних цветов на цветовом круге вы используете промежуточные цвета, когда вы делаете это с двумя противоположными цветами на цветовом круге; смесь, которую вы получите, будет серой. Чтобы постепенно превратить теплый цвет в холодный, уменьшите насыщенность до серого, прежде чем переходить к синему.
Вторая ошибка, которую совершают самые неопытные художники по пикселям, заключается в том, что, когда они выбирают цвета, они, как правило, не обеспечивают достаточного контраста между выбранными оттенками.
Для пиксельной графики с низким разрешением оттенки должны быть мгновенно различимы друг от друга. В примере № 1 включены семь разных оттенков, но идентифицировать их практически невозможно, поэтому убедитесь, что вы даете достаточную разницу в яркости между каждым выбранным оттенком.
В идеале для большинства спрайтов в пиксельной графике вам вряд ли нужно использовать более пяти различных оттенков для каждого цвета. В примере № 2 не используются советы, данные в первой части этого раздела. Пример № 3 является лучшим, так как он имеет правильный уровень контраста между оттенками, а также использует преимущества степени насыщенности и цветового круга. В самом ярком цвете он теплее и насыщеннее. Более темные оттенки — полная противоположность с меньшей насыщенностью и более холодным вариантом синего.
Дизеринг »
Дизеринг — это метод создания большего количества смешивающихся оттенков из ограниченного количества цветов.
Это старая техника, которая не имеет большого значения в наши дни, но я все еще нахожу ее полезной, когда не хочу создавать еще один, совершенно ненужный цвет. Его также можно использовать для добавления текстурной шероховатости к изделию, чего невозможно добиться простым выбором цвета.
Существует три этапа сглаживания. Если у вас есть два разных оттенка или цвета рядом друг с другом, и вы хотите смешать их вместе, не создавая дополнительного цвета, решение состоит в том, чтобы просто сделать клетчатый узор между двумя с диагональными полосами на одном оттенке над другим. Это 50:50 между двумя разными цветами, как показано в примере №2. Используемый эффект дизеринга сглаживает переход между двумя оттенками, показанными в примере №1. Чтобы затем пойти еще дальше и сделать его более гладким, следующим шагом будет сделать разницу между ними в соотношении 25:75 на одной стороне клетчатого узора, а затем на другой стороне — 75:25. . Это делается путем создания серии равномерно смещенных несвязанных точек, как показано в примере №3.
Затенение и сглаживание »
Одним из главных преступлений затенения в пиксельной графике является затенение подушкой, плохая замена сглаживанию. Затенение подушки — это когда несколько прогрессивных оттенков просто идут параллельно краю спрайта. Такой подход к затенению выглядит ужасно всякий раз, когда он используется, поэтому его следует избегать всегда. Затенение подушки можно увидеть в примере №2 справа. Из исходного незатененного изогнутого края пример № 1, в котором используется правильное сглаживание, показывает, как сгладить острые края. Три оттенка, которые используются в примере с затенением подушки, используются для достижения желаемого эффекта здесь, где, хотя они все еще проходят параллельно краю, разница в том, что оттенки соответствующим образом исчезают. Если вы будете следовать подходу, показанному в примере № 1, когда дело доходит до сглаживания, ваши пиксельные изображения будут выглядеть более гладкими и гладкими.
Спрайты »
Теперь, когда мы рассмотрели основы, необходимые для моделирования простого спрайта, пришло время применить их.
Здесь мы рассмотрим простой подход к затенению. Простая отправная точка — лепка керамического горшка. Создайте свой собственный горшок, придерживаясь основных принципов, описанных выше.
Пример №1 включает создание цветовой палитры, в которой в полной мере используются цветовой круг и различные уровни освещения и насыщенности. Цветовая палитра, использованная в этом спрайте, имеет достаточную контрастность, чтобы каждый оттенок можно было четко отличить от другого. В этом примере горшок был начат с простой плоской картинки и заполнен вторым по яркости цветом. Где черная линия была нарисована и очищена, чтобы она работала точно так же, как было показано ранее. Весь горшок использует кривые, но там, где есть длинные участки в одном направлении, это всегда делается с использованием одной из пяти основных линий, показанных в разделе рисования линий этого урока.
После этого в примере №2 добавляется первый оттенок. Это следующий оттенок после того, который уже был нанесен на первом этапе.
Убедитесь, что оттенок повторяет форму горшка. В этом случае горшок закруглен и искривлен наружу, поэтому тень будет на дне горшка, прямо под краем вверху и в любом месте, которое не обращено прямо к источнику света. Убедитесь, что добавленное затенение также соответствует основным принципам штрихового рисунка. На этом спрайте горшка источник света исходит из какой-то области в передней левой части горшка. В этот момент начните добавлять сглаживание там, где текущая самая яркая область приближается к краю спрайта.
В примере №3 оттенок света добавляется на тело в середине текущих самых ярких областей. В данном случае в верхней части ободка и на большом пятне с левой стороны основного горшка. Кроме того, следующий оттенок добавляется к дальней темной стороне горшка. На этом этапе горшок действительно начнет обретать форму, если сглаживание, работа с линиями и палитра будут хорошими.
Последний шаг в примере №4 — добавить окончательный оттенок к объекту, а затем заменить черный контур.
Полные черные контуры лучше удалить, если только они не оставлены по определенной причине. Тем не менее, не пренебрегайте абсолютно черным, так как он все еще полезен для темных областей. Однако в областях, где более светлые оттенки находятся рядом с краем, замените этот край другим темным оттенком в вашей палитре. Вы также можете сгладить края, но старайтесь, чтобы они были четкими и темнее основного тела. На этом этапе внимательно посмотрите на свой спрайт и подумайте, какие области вам не нравятся или которые не соответствуют этим основным принципам, а затем вернитесь к их настройке. Я делал то же самое, создавая этот горшок несколько раз, просто чтобы он получился именно таким, каким я хотел.
« Вернуться к учебникам
Создание игр — Учебник по пиксельной графике
ОБНОВЛЕНИЕ: Я полностью переработал свой учебник по пиксельной графике! Этот становился слишком твердым. Новый учебник уже здесь!
Примечание: Это руководство было создано в 2007 году для моего личного веб-сайта.
С тех пор были внесены некоторые небольшие изменения, но ничего существенного.
В этом уроке из 10 шагов я научу вас создавать «спрайт», который представляет собой отдельный двухмерный персонаж или объект. Термин, конечно же, пришел из видеоигр.
Создание пиксельной графики — это навык, который я приобрел, потому что мне нужна была графика для моих игр. После долгой практики я немного освоился с ним и начал рассматривать его больше как настоящее искусство, а не просто как инструмент. В наши дни пиксель-арт довольно популярен в разработке игр и иллюстрировании.
Этот учебник по пикселям был создан много лет назад, чтобы научить людей основным понятиям, лежащим в основе пиксельной графики, но я значительно упростил его с момента его первого воплощения. Есть и другие туториалы по пикселям, но я считаю их слишком сложными и многословными. Пиксель-арт — это не наука. Вам никогда не придется вычислять вектор при работе с пиксельной графикой.
1. ИНСТРУМЕНТЫ
Одна из приятных особенностей пиксельной графики заключается в том, что вам не нужны никакие причудливые инструменты — встроенной в компьютер программы рисования, вероятно, достаточно! Тем не менее, существуют программы, созданные специально для перемещения пикселей, такие как Pro Motion или Pixen для пользователей Mac.
Не могу сказать, что я действительно пробовал их, но я слышал хорошие отзывы. В этом уроке я буду использовать Photoshop, который является дорогим зверем, но он хорош для всех видов искусства, а его многочисленные функции очень полезны для работы с пикселями.
ИСПОЛЬЗОВАНИЕ ФОТОШОПА ДЛЯ PIXEL ART
При использовании Photoshop вашим основным оружием будет инструмент «Карандаш» (сочетание клавиш «B»), который является альтернативой инструменту «Кисть». Карандаш позволяет раскрашивать отдельные пиксели без какого-либо сглаживания.
Еще два полезных инструмента: инструмент выделения
(сочетание клавиш «M») и волшебная палочка
(сочетание клавиш «W») для выбора и перетаскивания или копирования и вставки. Помните, что, удерживая «Shift» или «Alt», когда вы делаете свой выбор, вы можете добавлять или вычитать из вашего текущего выбора. Это удобно, когда вы пытаетесь захватить области, которые не являются идеально квадратными.
Вы также можете использовать пипетку
(сочетание клавиш «I») для захвата цветов.
Сохранение цвета важно в пиксельной графике по ряду причин, поэтому вы захотите взять одни и те же цвета и использовать их повторно.
Наконец, убедитесь, что вы выучили ярлыки. Они могут сэкономить вам много времени и энергии. Полезно знать, что это «X», который переключает ваши основные и второстепенные цвета.
2. ЛИНИИ
Пиксели представляют собой небольшие блоки цвета. Первое, чему вам нужно научиться, это как эффективно использовать эти блоки, чтобы сделать любую линию, которую вы хотите. Мы обсудим два самых основных типа линий, прямые и изогнутые.
ПРЯМЫЕ ЛИНИИ
Я знаю, о чем вы думаете — это кажется слишком простым, чтобы даже заморачиваться! Но с пикселями даже прямые линии могут быть проблематичными. Чего мы хотим избежать, так это «зазубрин» — небольших разрывов в линии, из-за которых линия выглядит неровной. Зазубрины возникают, когда одна часть линии больше или меньше, чем окружающие части.
ИЗОГНУТЫЕ ЛИНИИ
В случае кривизны убедитесь, что уклон или уклон постоянен на всем протяжении.
В следующем примере чистая кривая соответствует 6 > 3 > 2 > 1, тогда как кривая с неровностями соответствует 3 > 1 < 3.
ЗАКЛЮЧЕНИЕ
Умение рисовать любую линию в пикселях имеет решающее значение для создания пиксель-арта. Позже мы узнаем, как использовать сглаживание, чтобы наши линии выглядели действительно гладкими.
3. КОНЦЕПТУАЛИЗАЦИЯ
Первое, что вам нужно, это хорошая идея! Попробуйте визуализировать то, что вы хотите запикселить, либо в голове, либо на бумаге. Небольшая работа в отделе предварительного планирования позволит вам сконцентрироваться на реальном пикселировании.
ЧТО ДЛЯ ДУМЫ
1. Для чего будет использоваться спрайт? Это для веб-сайта или для игры? Мне придется анимировать это позже, или это все? Если позже спрайт будет анимирован, вы можете сделать его меньше и менее детализированным. И наоборот, вы можете упаковать столько деталей в статичный спрайт, что вам больше никогда не придется иметь дело с ним.
Но подумайте о том, куда пойдет спрайт и что будет работать лучше всего.
2. Какие ограничения накладываются на меня? Ранее я говорил, что сохранение цвета важно. Одна из причин заключается в том, что ваша палитра цветов может быть ограничена аппаратным обеспечением (в наши дни это менее вероятно) или согласованностью. Или точность, если вы подражаете определенному стилю (C64, NES и т. д.). Кроме того, учитывайте размеры вашего спрайта и то, как он будет сочетаться с окружающей средой.
ДАВАЙТЕ ПОДРАВАТЬСЯ!
Для этого урока у меня не было никаких ограничений, но я хотел убедиться, что спрайт большой, чтобы вы могли четко видеть, что происходит на каждом этапе. С этой целью я решил использовать Лучу Адвоката, самого крутого адвоката по рестлингу, в качестве модели! Он мог быть в файтинге или что-то в этом роде, с такими приемами, как «Habeus Corpse Blaster».
4. КОНТУР
Черный контур обеспечит хорошую базовую структуру вашего спрайта, так что это идеальное место для начала.
Причина, по которой мы выбираем черный, заключается в том, что он красивый и темный. Позже я покажу вам, как можно изменить цвет контура для большего реализма.
ДВА ПОДХОДА
Есть два подхода к контуру. Вы можете нарисовать контур от руки, а затем очистить его, или вы можете начать с размещения пикселей, как вы хотите, с самого начала. Вы знаете, как «щелкнуть, щелкнуть, щелкнуть».
Я думаю, какой подход вам следует использовать, зависит от размера спрайта и ваших навыков работы с пикселями. Если спрайт очень большой, гораздо проще набросать контур от руки, чтобы получить общую форму, а затем подчистить его позже, чем пытаться сделать все правильно с первого раза.
В этом уроке мы создаем довольно большой спрайт, поэтому я продемонстрирую первый метод. Это также легче иллюстрировать с помощью текста и изображений.
ШАГ 1: ГРУБЫЙ КОНТУР
С помощью мыши или планшета нарисуйте грубый контур вашего спрайта. Однако убедитесь, что он не СЛИШКОМ грубый — он должен более или менее напоминать конечный продукт, который вы хотите.
В этом случае я почти полностью основываю свой набросок на своем наброске.
ШАГ 2: ОЧИСТКА КОНТУРА
Во-первых, увеличьте зум примерно до 6-кратного или 8-кратного увеличения, чтобы мы могли четко видеть каждый пиксель. Тогда очистите этот контур! В частности, вы хотите обрезать случайные пиксели (контур должен быть толщиной всего в один пиксель на всем протяжении), избавиться от любых неровностей и добавить любые мелкие детали, которые были пропущены на шаге 1.
Даже большие спрайты никогда не обычно превышают 200 на 200 пикселей. Фраза «делать больше с меньшими затратами» никогда не звучит так правдоподобно, как при пикселизации. И вы скоро обнаружите, что один пиксель может иметь все значение.
Сделайте свой план простым. Детали появятся позже, а пока сконцентрируйтесь на определении «больших частей», таких как, например, сегментация мышц. Сейчас это может выглядеть не очень, но наберитесь терпения.
5. ЦВЕТ
Когда контур готов, у нас есть что-то вроде книжки-раскраски, которую мы можем заполнить.
Ведра с краской и другие инструменты для заливки облегчат нам задачу. Однако подобрать цвета может быть немного сложнее, а теория цвета — это тема, которая выходит за рамки данного руководства. Тем не менее, вот несколько основных концепций, которые полезно знать.
ЦВЕТНАЯ МОДЕЛЬ HSB
HSB означает (H)ue, (S) насыщенность и (B) правильность. Это одна из нескольких компьютерных цветовых моделей (то есть числовых представлений цвета). Другими примерами являются RGB и CMYK, о которых вы, вероятно, слышали. Большинство программ для рисования используют HSB для выбора цвета, поэтому давайте разберем его:
Оттенок — то, что вы понимаете под словом «цвет». Например, «красный», «оранжевый», «синий» и т. д.
Насыщенность — насколько интенсивен цвет или насколько интенсивен цвет. 100% насыщенность дает самый яркий цвет, а по мере уменьшения насыщенности цвет становится более серым.
Яркость (или «яркость») — яркость цвета.
0% яркости — черный.
ВЫБОР ЦВЕТА
Какие цвета вы выберете, в конечном счете, зависит от вас, но вот несколько вещей, о которых следует помнить:
1. мультяшный.
2. Подумайте о цветовом круге — чем дальше два цвета друг от друга, тем больше они будут разделяться. С другой стороны, такие цвета, как красный и оранжевый, находящиеся в непосредственной близости на цветовом круге, хорошо смотрятся вместе.
3. Чем больше цветов вы используете, тем более рассеянным будет выглядеть ваш спрайт. Чтобы спрайт выделялся, используйте только два или три основных цвета. (Подумайте о том, что красный и коричневый сделали для Super Mario в прошлом!)
ПРИМЕНЕНИЕ ЦВЕТА
На самом деле применить цвет довольно просто. Если вы используете Photoshop, вам нужно сначала выбрать область, которую вы собираетесь заполнить, с помощью волшебной палочки
(сочетание клавиш «W»), а затем заполнить, нажав «Alt-F» (основной цвет) или «Ctrl- F” (вторичный цвет).
6. ЗАТЕНЕНИЕ
Затенение — важный шаг в нашем стремлении к статусу полубога пикселей. Здесь спрайт либо становится популярнее, либо превращается в ужасный беспорядок. Однако прислушайтесь к моим словам, и вы обязательно добьетесь успеха.
ШАГ 1: ВЫБОР ИСТОЧНИКА СВЕТА
Сначала мы должны выбрать источник света. Если ваш спрайт является частью большой сцены, на него могут сиять всевозможные локальные источники света (например, лампы, огонь, горящие лампы и т. д.). Они могут очень сложным образом смешиваться на спрайте. Однако в большинстве случаев лучше выбрать удаленный источник света (например, солнце). Для игр вы захотите создать спрайт, который будет максимально освещен, чтобы его можно было использовать где угодно.
Обычно я выбираю дальний источник света, который находится где-то над спрайтом и немного впереди него, чтобы все, что находится сверху или спереди, было хорошо освещено, а остальное затенено. Такое освещение выглядит наиболее естественным для спрайта.
ШАГ 2: ЗАТЕНЕНИЕ
После того, как мы определили источник света, мы начинаем затенять наиболее удаленные от источника света участки более темным цветом. Наша модель освещения «вверх и вперед» требует, чтобы нижняя часть головы, руки, ноги и т. д. были затенены.
Помните, что игра света и тени определяет неплоские объекты. Скомкайте лист белой бумаги в шар, затем разверните его и положите на стол — как вы можете сказать, что он больше не плоский? Это потому, что вы можете видеть маленькие тени вокруг складок. Используйте растушевку, чтобы выделить складки на одежде и обозначить мускулатуру, волосы, мех, трещины и т. д.
ШАГ 3: МЯГКИЕ ТЕНИ
Второй оттенок, светлее первого, следует использовать для мягких теней. Это участки с непрямым освещением. Его также можно использовать для перехода от темного к светлому, особенно на криволинейных поверхностях.
ШАГ 4: БЛИК
Места, на которые непосредственно падает источник света, можно засветить.
Света следует использовать умеренно (намного меньше, чем тени), потому что они отвлекают внимание.
Всегда применяйте блики после теней, и вы избавите себя от головной боли. Без уже готовых теней вы будете склонны делать блики слишком большими.
ЧТО НУЖНО И НЕТ
Затенение — это то, с чем спотыкается большинство новичков. Вот несколько правил, которым вы всегда должны следовать при затенении:
1. Не используйте градиенты. Абсолютная ошибка новичка в шейдинге. Градиенты выглядят ужасно и даже не приближаются к тому, как свет действительно играет на поверхности.
2. Не используйте «затенение подушки». Затенение подушки — это затенение от контура внутрь. Это называется «затенение подушки», потому что выглядит мягким и неопределенным.
3. Не используйте слишком много оттенков. Легко думать, что «чем больше цветов, тем реалистичнее». Однако в реальном мире мы склонны видеть вещи большими пятнами света и тьмы — наш мозг отфильтровывает все, что находится между ними.
Используйте максимум два оттенка темного (темный и очень темный) и два оттенка светлого (светлый и очень светлый) поверх основного цвета.
4. Не используйте слишком похожие цвета. Нет причин использовать два цвета, которые очень похожи друг на друга. Если только вы не хотите действительно размытых спрайтов!
7. ДИЗЕРИНГ
Сохранение цвета — это то, о чем приходится много беспокоиться пиксельным художникам. Один из способов получить больше оттенков, не используя больше цветов, — это использовать технику, называемую «дизеринг». Подобно «перекрестной штриховке» или «точечной штриховке» в традиционном мире искусства, вы берете два цвета и чередуете их, чтобы получить, во всех смыслах, среднее значение двух цветов.
Простой пример
Вот простой пример использования двух цветов для создания четырех разных оттенков с использованием DITHERing:
Advanced Пример
Сравните верхнюю картину, который был сделан с помощью Photoshop Gradient Tool, и нижний, нижний который был создан всего с тремя цветами с использованием дизеринга.
Обратите внимание на различные узоры, которые использовались для создания промежуточных цветов. Попробуйте поэкспериментировать с разными узорами, чтобы создать новые текстуры.
ПРИЛОЖЕНИЕ
Дизеринг может придать вашему спрайту приятное ощущение ретро, поскольку многие старые видеоигры в значительной степени полагались на дизеринг, чтобы получить максимальную отдачу от своих ограниченных палитр (посмотрите на Sega Genesis, чтобы найти множество примеров дизеринга). Это не то, что я использую очень часто, но ради обучения, здесь оно применяется (возможно, чрезмерно) к нашему спрайту.
Вы можете использовать дизеринг столько раз, сколько хотите. Честно говоря, я видел, что лишь немногие люди действительно хорошо используют эту технику.
8. ВЫБОРОЧНОЕ ОБЛИЦОВАНИЕ
Выборочное обведение, или «выделение», похоже на затенение контура. Вместо того, чтобы полностью использовать черный цвет, мы применяем цвет, который ближе к цвету самого спрайта.
Кроме того, мы изменяем яркость этого контура вдоль края спрайта, позволяя источнику света диктовать, какие цвета мы применяем.
До этого момента мы сохраняли контур черным. И в этом нет ничего плохого, так как это выглядит довольно хорошо и держит спрайт хорошо отделенным от его окружения. Но, используя черный цвет, мы жертвуем большим реализмом, чем хотелось бы, поскольку он придает спрайту «мультяшный» вид. Selout — отличный способ обойти это:
Вы заметите, что я также использовал селут, чтобы смягчить складки его мышц. Наконец, спрайт начинает выглядеть как единое целое, а не как целая куча отдельных кусочков.
Сравните это с оригиналом:
9. Сглаживание
Сглаживание работает по простой предпосылке: добавьте промежуточные цвета к изгибам линии, чтобы сгладить их. Например, если у вас есть черная линия на белом фоне, вы должны добавить серые пиксели к краю линии, чтобы сгладить ее.
ТЕХНИКА 1: СГЛАЖИВАНИЕ КРИВЫХ
Как правило, вы хотите добавить промежуточные цвета на изломах, так как именно там линия ломается и выглядит неровной.
Если он все еще выглядит слишком неровным, добавьте еще один, более светлый слой пикселей. Пусть ваши промежуточные слои текут в направлении кривой.
Не думаю, что смогу объяснить это лучше, не усложняя. Просто посмотрите на картинки, и я думаю, вы поймете, что я имею в виду:
ТЕХНИКА 2: ОКРУГЛЕНИЕ ГОРБОВ
ТЕХНИКА 3: ЗАТУХАНИЕ КОНЦЕВ ЛИНИИ
ПРИЛОЖЕНИЕ
Теперь давайте сгладим наш спрайт. Имейте в виду, что если вы хотите, чтобы ваш спрайт хорошо смотрелся на фоне любого цвета, не применяйте сглаживание к его внешнему краю. В противном случае вы увидите неудачно выглядящий «ореол» ваших промежуточных цветов вокруг вашего спрайта, и это будет выглядеть чертовски противно.
Эффект, как видите, незаметен, но имеет большое значение.
ЗАЧЕМ ВРУЧНУЮ?
Вы можете спросить, почему бы нам просто не применить фильтр из нашей программы рисования к спрайту, если мы хотим сделать его более гладким? Ответ заключается в том, что никакой фильтр не сделает ваш спрайт таким же чистым, как если бы вы сделали это вручную.
У вас есть полный контроль не только над количеством используемых цветов, но и над тем, где они используются. И вы лучше любого фильтра знаете, какие области нужно сгладить, а какие области потеряют свое пиксельное качество, если вы сгладите их.
10. ЗАВЕРШЕНИЕ
Уф, пора выключить компьютер и выпить холодного пива. Но еще не совсем! Последняя часть — это то, что отличает увлеченного любителя от закаленного профессионала.
Сделайте шаг назад и внимательно посмотрите на свой спрайт. Скорее всего, это все еще немного грубо. Потратьте время на его доработку и убедитесь, что все идеально. Дайте или возьмите, насколько вы устали, это может быть самой веселой частью. Добавьте маленькие детали, чтобы сделать ваш спрайт более интересным. Ваши навыки и опыт работы с пикселями проявятся здесь.
Возможно, вы задавались вопросом, почему у Адвоката Лучи все это время отсутствовали глаза или почему супона, которую он держал, была пуста. Ну, это потому, что это были мелкие детали, которые я хотел сохранить до конца.
Также обратите внимание на отделку, которую я добавила к его нарукавным повязкам, ширинку, которую я добавила к его штанам, и… ну, что бы был за мужчина без сосков? Я также затемнил нижнюю половину его туловища, чтобы его левая рука больше выделялась на фоне тела.
Наконец-то все готово! Lucha Lawyer весит относительно легкие 45 цветов (или, возможно, сверхтяжелые, в зависимости от ваших ограничений палитры) и имеет размеры примерно 150 на 115 пикселей. Теперь ты можешь выпить это пиво!
ВЕСЬ ПРОЦЕСС
Это всегда весело. Вот анимированный .gif, который показывает эволюцию нашего спрайта:
ЗАКЛЮЧИТЕЛЬНЫЕ МЫСЛИ
1. Изучите основы искусства и попрактикуйтесь в традиционных средствах. Все навыки и знания, связанные с рисованием и живописью, применимы и к пикселизации.
2. Начните с маленьких спрайтов. Сложность заключается в том, чтобы научиться впихивать множество деталей в несколько пикселей, а не делать огромные спрайты (это просто требует времени).