Как рисовать пиксельные спрайты для 2D-игр
Обновлено: 20.11.2024
Хотите заняться пиксельной графикой? Вот все, что вам нужно знать, чтобы начать.
Пиксель-арт – это форма цифрового искусства, возникшая из-за необходимости передавать изображения в ограниченном пространстве памяти 8- или 16-разрядных компьютеров и игровых консолей.
Иногда процесс создания пиксельной графики называется "спрайт", что происходит от слова "спрайт". Это термин компьютерной графики, используемый для описания двухмерного растрового изображения, интегрированного в большую сцену (обычно видеоигру).
Заинтересованы ли вы в создании собственных пиксельных изображений? Вот все, что вам нужно знать, чтобы начать.
Основные инструменты для пиксель-арта
Вопреки распространенному мнению, мощное или дорогое программное обеспечение не гарантирует качественного изображения! Выбор программы — это только вопрос предпочтений.
Если вы являетесь пользователем Windows, вы можете использовать даже такие базовые инструменты, как Microsoft Paint. Вот более обширный список некоторых инструментов, которые можно использовать для создания пиксельной графики.
Все, что вам действительно нужно для создания пиксельной графики, — это следующие инструменты (поэтому убедитесь, что они есть в вашей программе):
- Карандаш: ваш основной инструмент рисования, который по умолчанию размещает один пиксель.
- Ластик: стирает или удаляет нарисованные пиксели.
- Пипетка: копирует цвет выбранного пикселя для повторного использования.
- Ведро: заполняет пустую область одним сплошным цветом.
Другие полезные инструменты включают инструменты выбора, линии, перекрашивания и поворота. Они не являются абсолютно необходимыми, так как вы можете добиться тех же эффектов с помощью перечисленных выше инструментов.
Вы хотите избежать кистей, размытия, градиентов и других автоматических инструментов, чтобы иметь контроль над каждым пикселем на холсте.
Что касается аппаратного обеспечения, все, что может управлять вашим курсором, прекрасно подойдет. Трекпад или мышь отлично подходят для точности и детализации. Между тем графический планшет может быть вашим выбором для лучшего контроля над длинными мазками.
Насколько большим должен быть ваш спрайт или холст?
Нет неправильного ответа на вопрос о размере спрайта. Но чаще всего встречаются числа, кратные восьми в степени двойки (например, 8 x 8, 16 x 16, 32 x 32 и т. д.), потому что в противном случае старые компьютеры не могли правильно отображать их.
Лично мы рекомендуем начинать с малого, так как это поможет вам быстро освоить основы. В конце концов, пиксельная графика возникла из-за того, что художники хотели максимально эффективно использовать каждый пиксель и каждый используемый цвет, поскольку их аппаратное обеспечение могло обрабатывать только ограниченное количество.
Вы вынуждены проявлять творческий подход, когда вам приходится работать в рамках ограничений. Сосредоточьтесь на том, чтобы максимизировать пространство крошечного спрайта. После этого вы можете повысить уровень до большего размера, чтобы втиснуть туда еще больше деталей.
И если вы хотите поместить персонажа в сцену, вам также придется подумать о размере холста.
Хорошим способом сделать это является рассмотрение соотношения между вашим спрайтом и остальной частью экрана. Насколько большим или маленьким должен быть ваш персонаж по сравнению с миром, в котором он находится?
Разработчикам игр стоит знать, что большинство современных мониторов имеют соотношение сторон 16:9. Это означает, что на каждые 16 пикселей ширины приходится девять пикселей высоты.
Какое бы разрешение вы в конечном итоге ни выбрали, обычно вы работаете с гораздо меньшим размером холста, а затем масштабируетесь до большего разрешения, когда закончите.
В то же время при масштабировании пиксельной графики вы хотите изменить размер на целые числа, иначе все может выглядеть немного шатко. Важно убедиться, что ваши математические расчеты верны, прежде чем вы начнете создавать пиксель-арт!
Допустим, вы хотите добиться стандартного разрешения 1080p. Вы можете работать на холсте размером 384 x 216, а затем увеличить его на 500 %.
Масштабирование также должно быть последним, что вы делаете. Вы не хотите увеличивать масштаб вверх, а затем продолжать рисовать с помощью инструмента «Карандаш с одним пикселем». Это оставит вас с другим соотношением пикселей, что никогда не выглядит хорошо.
Процесс спрайта
Итак, холст открыт. Что теперь? Что ж, как и в любом другом виде искусства, возможности безграничны. Это можно сделать не одним способом.
Чтобы дать вам отправную точку, вот пошаговое руководство о том, как вы можете начать свой проект. Вы можете полностью следовать всем инструкциям, пропустить некоторые шаги или добавить свои собственные.
1. Начните с чернового наброска
Начните свой спрайт, перетаскивая инструмент Карандаш, рисуя так же, как вы рисуете ручкой и бумагой. Он не должен быть идеальным.
Какой бы беспорядок вы ни устроили, мы уберем его позже. Все, к чему мы стремимся на этом раннем этапе, — это воплотить вашу идею и ее композицию на холсте.
2. Очистите штриховой рисунок
Пришло время сделать все более презентабельным. Мы возьмем ваши грубые линии и очистим их от случайных пикселей.
Отдельные пиксели или группы пикселей, которые нарушают непрерывность линии, называются "неровностями". Мы пытаемся избежать зазубрин.
Часто проблема просто в том, что часть строки слишком длинная или слишком короткая, что создает неудобный прыжок. Вы хотите использовать одинаковую длину пикселей для плавного перехода на кривой. Не окружайте ряд пикселей более крупными.
Невозможно полностью избежать неровностей (если ваша работа не состоит только из основных фигур), но вы должны попытаться свести их к минимуму.
3. Знакомство с цветами
Пришло время воспользоваться инструментом "Ведро" и заполнить цветом штриховую графику вашего спрайта.
Обычно вы хотите ограничиться цветовой палитрой. Раньше размер спрайта также часто определял количество цветов в палитре. Если спрайт был 16×16, это означало, что у художников было 16 цветов для работы. К счастью, с тех пор технологии продвинулись вперед, и мы больше не ограничены этим правилом.
Лучшие палитры имеют различные оттенки, дополняющие друг друга, разные значения насыщенности и сочетание светлого и темного. Если вы еще не знаете, как правильно использовать теорию цвета, составить собственную палитру может быть непросто.
Если вы хотите, чтобы кто-то другой думал за вас, Lospec — это отличная онлайн-база данных, полная готовых цветовых палитр.
4. Добавьте детали, блики и тени
Это лучшая часть всего процесса! Это когда ваше искусство действительно начинает прыгать со страницы. Теперь, когда у нас есть основная идея, мы можем добавить все мелочи, чтобы придать вашему плоскому рисунку иллюзию формы.
Выберите источник света и начните затенять наиболее удаленные от него области более темным цветом. Подсветку следует размещать в областях, на которые напрямую падает свет.
Вы можете оставить свой штриховой рисунок черным или цветным, но все зависит от ваших личных предпочтений или художественного стиля.
5. Сохраните свое искусство
Пришло время сохранить вашу работу! Масштабируйте до нужного размера, а затем выберите формат файла. В большинстве случаев вы захотите сохранить его в формате PNG, если ваше изображение статично.
Но если в вашем рисунке есть анимация, сохраните ее в формате GIF. Важно то, что оба формата поддерживают большие области сплошного цвета и прозрачности.
Держитесь подальше от файлов JPEG, если вы не знаете, что делаете. Это формат файла с потерями, предназначенный для цифровых фотографий и других изображений с плавными градиентами.
Пиксель-арт: легко научиться, сложно стать мастером
Пиксель-арт отличается от цифрового рисунка из-за ограничений, связанных с его сеткой.
При этом в нем используются многие из тех же принципов, поэтому художники и другие художники могут довольно быстро его освоить. Попрактиковавшись, каждый может стать мастером пиксель-арта.
Двумерные спрайты — это визуальные строительные блоки почти всех мобильных игр, а стиль пиксельной графики, ставший синонимом видеоигр, до сих пор популярен среди разработчиков игр. С помощью пиксельной графики и 2D-спрайтов вы можете быстро анимировать свои игровые объекты и создавать динамические впечатления от просмотра для ваших игроков.
Умение работать со спрайтами и пиксельной графикой стало важным навыком для всех разработчиков мобильных игр. Читайте дальше, чтобы узнать, как создавать собственные спрайты и где найти ресурсы для создания собственных пиксельных изображений!
Примечание: в конце этого сайта мы собрали больше бесплатных ресурсов для разработчиков игр. Обязательно ознакомьтесь с ними!
Что такое пиксель-арт и спрайты?
Пиксель-арт
Пиксель-арт – это форма цифрового искусства, в которой цвет применяется к отдельным пикселям для создания изображения. Термин «пиксельное искусство» впервые был опубликован в 1982 году, хотя само понятие существовало как минимум за 10 лет до этого.
Пиксельное искусство сохраняется в форматах файлов, использующих сжатие данных без потерь, таких как формат GIF или PNG. Не рекомендуется использовать формат JPEG, так как он использует сжатие с потерями, которое оставляет артефакты на ваших изображениях.
Пиксель-арт можно разделить на две основные формы: изометрические и неизометрические. Изометрическая пиксельная графика имеет трехмерный вид, хотя изображение по-прежнему представляет собой двухмерную фигуру.
Неизометрическая пиксельная графика изображает одну сторону объекта, например верхнюю или переднюю.
Получите красивые приложения от экспертов. Мы являемся вашим партнером в разработке современных специализированных приложений для iOS и Android.
Спрайты
Спрайты – это анимации, такие как персонажи или объекты, которые можно использовать в мобильной игре. Их можно сделать из любого вообразимого источника изображения и анимировать несколькими способами. Они являются одним из наиболее часто используемых визуальных компонентов для разработки мобильных игр и имеют долгую историю в индустрии разработки игр.
Базовый пример анимированного спрайта можно увидеть ниже:
Эта простая анимация выглядит как одно изображение размером 256 x 256, но на самом деле это изображение размером 512 x 256, которое перемещает рамку изображения, создавая эффект подпрыгивания.
Это изображение размером 512 × 256 известно как лист спрайтов, и именно поэтому вы можете анимировать свои спрайты. Анимация спрайтов просто показывает разные части листа спрайтов в разное время для создания анимации. Существует множество возможных анимаций для спрайтов, но приведенный выше пример показывает самое простое использование спрайта.
Зачем использовать спрайты?
Простое создание сцены
Если бы вам приходилось создавать каждую сцену игры как одно изображение, впоследствии было бы намного сложнее редактировать. С помощью спрайтов вы можете добавлять и удалять визуальные элементы по своему усмотрению, не редактируя какие-либо другие визуальные компоненты вашей сцены. Это упрощает разработку сложных игровых сцен и введение новых персонажей и объектов, с которыми могут взаимодействовать ваши игроки.
Улучшенная производительность
Спрайты также обеспечивают повышение производительности, так как они меньше заставляют игру многократно вызывать несколько изображений для отображения на экране. Вместо этого вызывается лист спрайтов, а затем по желанию отображается другая его часть. Вашей игре гораздо проще вызвать изображение один раз и отобразить его множеством способов, чем постоянно запрашивать новые источники изображения.
Как сделать пиксель-арт с помощью этих 10 инструментов
Мы уже рассмотрели, как работают спрайты, но теперь пришло время приступить к их созданию. Чтобы вам было проще экспериментировать с созданием спрайтов, вы можете использовать один из инструментов редактора пикселей, перечисленных ниже. Их можно бесплатно загрузить или использовать в Интернете, и они помогут вам создать пиксельную графику для вашего листа спрайтов.
1. Приложение Пискель
PiskelApp – это бесплатный пиксельный онлайн-редактор, в котором особое внимание уделяется созданию спрайтов. Он позволяет вам сохранять пиксельную графику в Интернете, а также имеет функцию импорта, поэтому вы можете использовать ее для редактирования существующей пиксельной графики. Приложение PiskelApp имеет простой пользовательский интерфейс и является отличным выбором, если вы хотите сразу приступить к созданию листа спрайтов.
2. Пикси
Pixie – еще один полнофункциональный пиксельный онлайн-редактор. Хотя он не так хорошо подходит для создания листов спрайтов, как PiskelApp, он по-прежнему очень прост в использовании и является хорошим выбором для тех, кто хочет дать волю своему воображению. Белый холст – стандартная отправная точка для этого инструмента, и он позволяет рисовать от руки, а не создавать жесткую сетку.
3. Пиксель
Pixlr — это немного более продвинутый пиксельный редактор по сравнению с предыдущими редакторами с большим набором инструментов для рисования. Он предлагает ту же функцию онлайн-сохранения, что и PiskelApp, но не так хорошо подходит для создания листов спрайтов. Если вы хотите избежать 16-битного стиля, который поощряет PiskelApp, воспользуйтесь этим инструментом.
4. ГрафX2
GrafX2 – это программа для рисования растровых изображений, которая включает в себя ряд инструментов и эффектов, которые делают ее особенно полезной для разработки игровой графики, пиксельной графики и листов спрайтов. Его можно загрузить бесплатно, и он доступен на всех основных настольных платформах
5. ГИМП
6. PyxleOS
Если вы ищете упрощенный инструмент, который позволит вам сосредоточиться на создании великолепных пиксельных изображений, обратите внимание на PyxleOS. Это настольное приложение с открытым исходным кодом специально разработано для создания пиксельной графики, и его очень легко подобрать и использовать.
7. ЛунаПик
LunaPic — это онлайн-инструмент с рядом возможностей для редактирования изображений. Одной из его многочисленных функций является возможность пикселизации изображений, даже фотографий. Вам просто нужно загрузить свое изображение, нажать «настроить» -> «пикселизировать», выбрать, насколько сильно вы хотите сделать изображение пиксельным, и готово!
8. ГрафикаГейл
GraphicsGale – это редактор анимационной графики, доступный как в бесплатной, так и в платной версиях. Бесплатная версия по-прежнему позволяет создавать и сохранять пиксельную графику в формате png, и это все, что вам нужно для вашего листа спрайтов. GraphicsGale — это простой в использовании инструмент с широким набором инструментов для создания изображений.
10. Сделать пиксель-арт
Make Pixel Art – это увлекательный онлайн-инструмент, с помощью которого вы можете сразу начать рисовать пиксели. Хотя он может показаться немного простым по сравнению с некоторыми другими инструментами, он может быть лучшим выбором, если вам нужно быстро набросать идею или создать прототип объекта или персонажа для вашей игры.
Если вы хотите следовать следующему разделу этого поста, вы можете перерисовать спрайт растения с помощью одного из инструментов, описанных выше, или загрузить его здесь!
Как использовать спрайты с Felgo
Теперь, когда вы создали спрайт, пришло время протестировать его на своем мобильном телефоне! Для отображения спрайтов вы можете использовать Felgo, кроссплатформенный игровой движок, специализирующийся на 2D-играх. Вот пример кода, который отображает анимированный пиксельный спрайт в Felgo:
Нажмите кнопку Выполнить выше, чтобы открыть этот код в браузере и запустить его на своем мобильном устройстве (поддерживаются iOS и Android). Вы можете изменить исходный код в веб-редакторе и сразу же увидеть результат на своем устройстве с помощью Перезагрузка Felgo Live Code Reloading. Посмотрите это краткое видео о том, как использовать Felgo Live Reload для ускорения процесса разработки игр:
Создавайте собственные спрайты и используйте их с помощью Felgo
И все! Добавить спрайт в игру очень просто благодаря компонентам SpriteSequenceVPlay и SpriteVPlay — всего 23 строки кода, включая новые строки, для полной игры!
Важно установить для свойств frameWidth и frameHeight размер спрайта, который должен отображаться в игре. вы можете использовать свойства компонента, такие как frameCount и frameRate, чтобы настроить анимацию.
Загрузите Felgo сейчас и создавайте игры Pixel Perfect!
Хотите создать игру на 60 % быстрее, чем с другими игровыми движками, такими как Unity, Corona или Cocos2D?
Ознакомьтесь с основными моментами Felgo и учебными пособиями ниже, как это сделать:
В этом учебном пособии рассматриваются основы пиксельной графики и демонстрируются основные инструменты, необходимые в GIMP для достижения идеальной пиксельной графики.
Это первая часть серии из трех статей о том, как создавать пиксель-арт. Во второй части мы создаем Red из игры Transistor в стиле, вдохновленном Super Time Force Ultra. В третьей части мы создаем яркую сцену в стиле Hyper Light Drifter. Часть 2 и часть 3 в настоящее время находятся в разработке.
Пиксель-арт — это очень весело. Я взял его только на прошлой неделе для Itch.io’s Loading Screen Jam, и оказалось, что это не так уж сложно, как только я освоился. В этом уроке я буду использовать программу обработки изображений GIMP, похожую на Photoshop, но бесплатную и с открытым исходным кодом. В первой части этой серии мы рассмотрим основы и продемонстрируем ключевые инструменты, необходимые для создания идеального изображения.
Соотношение сторон почти всех современных мониторов составляет 16:9 (отношение ширины к высоте), что означает, что на каждые 16 пикселей по ширине приходится 9 пикселей по высоте. Текущее стандартное разрешение — 1080p (1080 пикселей по высоте). Чтобы добиться идеального изображения, необходимо разрешение с соотношением сторон 16:9, которое масштабируется до 1080p.
Например, Hyper Light Drifter имеет разрешение 480 x 270 (270p с соотношением сторон 16:9). 270p в 4 раза меньше 1080p. Вот как это выглядит в игре:
Спрайты персонажей обрабатываются по-разному и обычно имеют размеры 16 x 16, 24 x 24, 32 x 32 и 64 x 64.Для справки о размере приведенный выше символ представляет собой спрайт размером 32x32.
Как и большинство художественных программ, GIMP работает со слоями, что помогает организовать рисунок на части и позволяет редактировать каждую часть, не затрагивая другие. Хорошей практикой является размещение каждого ассета или очень похожих ассетов на отдельном уровне. Например, если вы рисуете сцену для города, каждое здание и опора будут на своем слое. Спрайт персонажа может иметь один слой для головы, один для одежды и один для оружия.
Карандаш — ваш основной инструмент для рисования, поскольку он окрашивает каждый пиксель без сглаживания. С другой стороны, Paintbrush имеет сглаживание и будет пытаться сгладить пиксели, где бы вы ни рисовали. Это приводит к «грязным» пикселям. На следующем GIF показано, как они выглядят (карандаш слева, кисть справа).
Не забудьте установить для параметра «Размер» значение 1 в параметрах инструмента, чтобы рисовать один пиксель. Удерживайте клавишу «Shift» на клавиатуре, чтобы нарисовать линию.
Ластик является противоположностью инструмента "Карандаш": он удалит пиксель на текущем слое. Не забудьте поставить галочку на опцию «Жесткий край:» в разделе «Параметры инструмента»; в противном случае он включит сглаживание. На следующем GIF-файле показано, что происходит, когда у вас отключен флажок «Жесткий край:» (слева) и установлен флажок (справа).
Вы также можете удерживать клавишу "Shift" на клавиатуре, чтобы стирать по прямой линии. Установите для параметра "Размер" значение 1 в параметрах инструмента, чтобы стирать по одному пикселю за раз.
Инструмент "Выбор" существует во многих формах. В левой части окна панели инструментов показаны три параметра: прямоугольное выделение (R), эллиптическое выделение (E) и свободное выделение (F). Справа в меню показана возможность выбрать По цвету (Shift + O) .
Вы можете выбрать область и ограничить любые изменения, которые вы вносите, только этой областью в текущем слое. Например, здесь я использую Прямоугольное выделение, чтобы раскрасить только основную часть ее рубашки.
Затем я использую параметр "По цвету", чтобы осветлить ее цвет волос.
Чтобы отменить выбор, щелкните правой кнопкой мыши выбранный вариант, наведите указатель мыши на пункт "Выбрать" и нажмите "Нет" .
Инструмент «Перемещение» позволяет перемещать слои попиксельно. Это хорошо, когда вы хотите переместить активы, такие как голова персонажа или определенные реквизиты в вашей сцене. Не забудьте выбрать параметр «Слой» в параметрах инструмента.
Пунктирная линия вокруг слоя называется границей слоя, которая, как и инструмент «Выделение», запрещает любые изменения слоя за пределами границы. Когда вы перемещаете слой, граница слоя перемещается вместе с ним. Вы можете настроить границу слоя, щелкнув правой кнопкой мыши слой и выбрав «Размер границы слоя». Или вы можете автоматически настроить границу слоя, чтобы она соответствовала холсту, щелкнув правой кнопкой мыши слой и выбрав «Слой по размеру изображения».
Инструмент «Перемещение» также можно использовать в сочетании с инструментами «Вырезать и вставить» и «Выбрать», чтобы переместить выделенный слой. В следующем GIF я использую инструмент «Свободное выделение», чтобы вырезать голову, а затем вставить ее обратно в текущий слой. Когда выделение вставлено, оно помещается во временный слой, называемый плавающим выделением, который вы можете перемещать и редактировать. Когда вы закончите перемещать плавающее выделение в нужное положение, вы должны щелкнуть правой кнопкой мыши слой с плавающим выделением и выбрать «Привязать слой», чтобы поместить его в текущий слой.
Вы также можете поместить плавающее выделение в отдельный слой, щелкнув правой кнопкой мыши слой плавающего выделения и выбрав «На новый слой».
Старый добрый инструмент заливки из Microsoft Paint. Используйте инструмент «Карандаш», чтобы нарисовать замкнутую фигуру. Выбрав инструмент Bucket Fill, щелкните в любом месте внутри фигуры, и он автоматически заполнит область основным цветом.
Инструмент "Палитра цветов" устанавливает основной цвет в соответствии с цветом пикселя, на который вы нажимаете. Поскольку пиксели довольно заметны, хорошо использовать один и тот же цвет и его тонкие вариации как можно чаще для конкретного актива; в противном случае вы получите «грязную» сетку цветов, которая выглядит некрасиво.
Пиксель-арт требует, чтобы вы увеличивали масштаб, чтобы рисовать каждый пиксель (один пиксель имеет огромное значение!), но уменьшали масштаб, чтобы увидеть, хорошо ли ваш рисунок выглядит на макроуровне. Это особенно верно, когда вы работаете с большим холстом с большим количеством деталей.
На следующем изображении Рыжей из игры Transistor обратите внимание на то, как неровны ее ноги и руки при увеличении. Мне неясно, хорошо ли выглядит ее поза, но как только я уменьшу масштаб, я лучше прочувствую общий вид изображения.
Инструмент «Переход» применяет градиент к слою или выделенному фрагменту. GIMP предоставляет хороший список готовых градиентов на выбор в окне «Слои».
В традиционной пиксельной графике сглаживание используется для создания перехода между двумя цветами, но приведенный ниже пример из Hyper Light Drifter показывает, что применение градиента может придать сцене действительно яркий оттенок.
GIMP предлагает возможность добавления шаблонов. Я не использовал его лично, но полагаю, что он может быть весьма полезен для ресурсов, использующих повторяющуюся текстуру, таких как земля в Spelunky.
В следующей части ( скоро будет опубликовано! ) я рисую Реда из игры Транзистор, используя большинство инструментов, описанных здесь.
Дадо Алмейда, концепт-художник игр и анимации, учит нас создавать пиксельную графику! В этом пошаговом руководстве вы узнаете, как создать портрет размером 64 x 64 пикселя, а также получите советы по созданию привлекательных пиксельных линий и приемов окрашивания.
ВВЕДЕНИЕ В PIXEL ART
Компьютерная графика и цифровое искусство в том виде, в каком мы их знаем сегодня, имеют корень — пиксель-арт.
Раньше не существовало пиксель-арта, потому что любое изображение, созданное на компьютере, должно было быть попиксельным изображением.
По мере развития компьютеров возможности рендеринга изображений становились все более совершенными, что позволяло цифровым художникам творить без ограничений старого оборудования.
Создание произведений искусства с учетом этих ограничений является основой пиксель-арта как формы искусства.
Хотя это больше не является обязательным подходом, заставлять себя творить в рамках старой технологии или набора приемов может помочь вам в качестве
Ниже приведены некоторые примеры моих исследований в области пиксельной графики.
В этой статье я расскажу о некоторых характеристиках, основных методах и рекомендациях, чтобы вы могли начать создавать свои собственные пиксельные изображения.
Вся информация здесь применима к любому «стилю» и любому программному обеспечению. И в этом прелесть этой темы.
Техническая сторона этого вида искусства важна, особенно если вы хотите воздать должное видеоигре.
Но помните, что вам не нужно заставлять себя создавать иллюстрацию размером 32 x 32 пикселя, используя только 3 цвета, если вы этого не хотите.
Полезно уважать основы и методы цифровых художников старой школы, но не обязательно работать как они.
ОБУЧЕНИЕ НА ДЕЛАХ
В этой статье мы поработаем над доступной задачей.
Я хочу, чтобы вы создали портрет размером 64 x 64 пикселя.
Вы можете нарисовать себя, сделать фанарт или придумать персонажа.
Цель состоит в том, чтобы создать иллюстрацию, которую можно использовать в качестве аватара в социальных сетях.
Начните с небольшого размера файла (разрешения), чтобы была видна единица измерения в пикселях. Нет смысла делать пиксель-арт, если пиксели не видны.
НАСТРОЙКА ХОЛСТА
В этой статье я буду использовать Clip Studio Paint.
Несмотря на то, что для создания пиксельной графики существуют отличные специализированные инструменты, вы можете использовать любую программу для рисования.
- Создайте документ размером 64 x 64 пикселя (1);
- Выберите "Вид" > "Настройки сетки/линейки" (2);
- Настройте, как показано ниже, чтобы вы могли видеть сетку с каждым пикселем. Вы можете включить/выключить сетку в любое время с помощью сочетания клавиш Shift+G. (3);
Хорошая практика работы с пиксельной графикой – привыкнуть к увеличенному масштабу, не сводя глаз с изображения в реальном размере (4);
Чтобы создать дополнительный вид текущего холста, выберите «Окно» > «Холст» > «Новое окно» и откройте новый экземпляр текущего холста.
Установите значение 100 % и поместите его в рабочее пространство (5).
СОЗДАНИЕ ИНСТРУМЕНТОВ PIXEL ART
Пора представить основную концепцию.
Пиксель-арт не сочетается с автоматическим сглаживанием.
Сглаживание – полезный алгоритм, сглаживающий края фигуры.
Это делается путем добавления дополнительной строки пикселей, ближайшей к краю с псевдонимом.
Как вы можете видеть в примере, сглаженный край (7) имеет автоматический градиент пикселей, чтобы придать фигуре более плавный контур.
Псевдоним края (6) — это то, что мы ищем при создании пиксельной графики. Позже мы можем смягчить края, добавив сглаживание вручную (вручную).
Практическое правило при использовании любого программного обеспечения для создания пиксельной графики – отключить параметр сглаживания в кистях, инструментах и преобразованиях.
В Clip Studio Paint необходимо отключить сглаживание в следующих случаях:
- кисти (8);
- такие инструменты, как «Выделение», «Заливка», «Текст», например. (9);
- и во время любого преобразования с помощью команды «Правка» > «Преобразование» (10);
В Clip Studio Paint у вас уже есть ручка для пиксельной графики. Он называется «Точечная ручка» в категории «Маркер» (11).
Это самая простая кисть для рисования. Он имеет фиксированный размер в 1 пиксель, сглаживание отключено и не поддерживает стабилизацию или смешивание цветов.
Я предлагаю вам следовать этому руководству, используя только эту кисть.
Позже в игре вы можете продублировать любую из своих «обычных» кистей и использовать ее для пиксельной графики (если вы уменьшите размер кисти до меньших значений и отключите сглаживание).< /p>
РИСОВАНИЕ ШТРИХОВ
Поскольку это будет портрет спереди, я начну рисовать с помощью Симметричной линейки (12);
Поместите симметричную линейку на холст и, чтобы убедиться, что она находится в мертвой точке, используйте инструмент "Объект", чтобы выбрать ее и ввести значения вручную (13);
В этом случае я изменил значения Center X и Center Y на 32, что составляет половину моего общего размера холста (64 пикселя).
Теперь снова выберите Dot Pen и начните рисовать.
Поскольку эту кисть нельзя изменить, рекомендуется увеличить масштаб холста, который вы рисуете (15), и использовать дублированный вид в качестве эталона (14).
Я начал свой портрет с начального наброска, чтобы найти конструкцию головы (16), а затем начал добавлять детали (17).
Нет необходимости использовать синий цвет. Я просто предпочитаю это, потому что это помогает моему мозгу понять, что я создаю черновик для своего окончательного рисунка.
Если вы закончили с наброском, можете приступить к работе с линиями.
Прежде чем добавить последние линии, позвольте мне показать вам простую технику рисования линий и кривых в пиксельной графике.
В приведенном ниже примере линия (18) не выглядит гладкой, потому что есть много повторяющихся пикселей там, где должна быть одна пиксельная линия.
Вы можете исправить эти «двойники» (это термин), удалив все соседние пиксели на кривой. В примере (19) я удалил все пиксели, отмеченные красным цветом.
Я предлагаю вам вернуться к своему эскизу и обратить внимание на эти «двойники», чтобы очистить ваши линии.
Не волнуйтесь, если кривые кажутся вам неправильными. Просто удалите ненужные пиксели.
СОВЕТ: если вам нужно стереть пиксель, вы можете просто переключиться на прозрачный цвет (у меня есть ярлык X);
В приведенном ниже примере вы можете увидеть разницу между первоначальным эскизом (20) и очищенной версией (21).
Готовы к другому методу?
Давайте начнем исправлять рисунок и корректировать некоторые кривые.
Глядя на пример ниже (22), вы можете заметить, что распределение и расстояние между пикселями не соответствуют логической последовательности. (например: 3, 2, 1, 4…)
В этой улучшенной версии (23) вы можете увидеть лучшую последовательность пикселей для создания кривой. (например: 1, 2, 2, 3…)
Используя эти знания, я предлагаю вам выполнить следующее упражнение, прежде чем продолжить рисование:
Попробуйте нарисовать несколько случайных линий и кривых, используя две концепции, которые вы только что изучили: удалить дубликаты и сохранить «пиксельную прогрессию».
Это даст вам твердое представление о том, как контурировать фигуры в пиксельной графике.
Ниже мой последний штрих (25).
Я немного подкорректировал пропорции и кривые и удалил несколько ненужных пикселей, чтобы сделать лицо более читабельным.
Потратьте некоторое время, чтобы сравнить с исходной версией (24) и попытаться заметить, где я применил приемы.
ВРЕМЯ РАСКРАСКИ
Количество цветов, используемых в спрайте (термин, используемый для описания объекта в разработке игр), зависит от того, насколько вы хотите придерживаться определенного ограничения старой технологии.
Хотя это и не обязательно, вы можете многое узнать о пиксельной графике, ограничив свой выбор небольшим количеством цветов.
Сейчас я предлагаю вам начать с простой цветовой палитры. В качестве отправной точки можно использовать 56 цветов палитры игровой консоли NES (Nintendo Entertainment System) (26).
Выбор цвета и тона в этой палитре не идеален, но это хорошая отправная точка.
В примерах ниже у вас есть компьютерная цветовая палитра PC-98 (27) и личная цветовая палитра, которую я создал в прошлом (28);
Позже вы можете начать создавать свою собственную палитру, но всегда помните, что она должна быть компактной и простой.
Я начинаю с заливки линий базовыми цветами (выравнивание).
Я начинаю с 5 исходных цветов, включая черную линию, чтобы нарисовать этот портрет (29).
На этом этапе не забудьте настроить инструменты автоматического выбора и заливки для рабочего процесса пиксельной графики, отключив масштабирование области и сглаживание (30).
Чтобы заштриховать (добавить тени) цвет кожи на портрете, вам не нужно использовать только более темное значение определенного цвета;
Потенциально я могу использовать любой доступный цвет, если значения читаются правильно.
Совет: создайте новый слой поверх набора слоев, залейте его черным цветом и установите режим слоя «Цвет».
Теперь вы можете использовать этот слой, чтобы проверить соотношение значений ваших цветов (32).
В приведенном ниже примере вы можете увидеть, как мне удалось использовать старый цвет фона (фиолетовый) в качестве оттенка моей коричневой кожи (31). Я предпочитаю черный фон, чтобы сохранить один цвет…
Опять же, мне это не нужно, но я хотел бы воспользоваться этими ограничениями, налагаемыми цветовой палитрой NES.
Для бликов на коже и очках (33) мне не нужно было вводить новые цвета, потому что при проверке значений оттенков серого (34)
Я заметил, что для этого можно использовать цвет футболки.
Я хотел добавить ручное сглаживание, чтобы сгладить границу между освещенными и затененными участками кожи (36).
Используя только палитру NES, я не смог найти цвета, которые можно было бы использовать для создания этого градиентного перехода.
Итак, здесь я отказался от «виртуальных ограничений» в пользу иллюстраций.
В этом примере я добавил два новых цвета (37), чтобы добавить больше деталей к затенению.
Я не могу это подчеркнуть, но очень важно, чтобы вы принимали эти решения, глядя на произведение искусства через реальный, а не увеличенный размер холста (35).
Используя два новых дополнительных цвета, я увеличил визуализацию лица, добавив больше объема, морщин (потому что я старею) и смягчил некоторые тени на освещенной стороне портрета ( 38).
На синей куртке я решил использовать технику дизеринга, чтобы создать ощущение градиента без добавления цветов (40).
Разбивая сплошные переходы на шахматной доске, я могу создать иллюзию промежуточного цвета (39).
Дизеринг — это продвинутый метод, и это лишь его базовое применение.
Как видите, эффект создает текстурный эффект, который может быть проблемой при использовании на коже или гладких поверхностях.
Я счел целесообразным использовать его в куртке (сделанной из ткани), потому что я могу извлечь выгоду из грубой текстуры.
После некоторой настройки мне удалось полностью нарисовать портрет.
Я очень доволен конечным результатом, потому что смог уместить множество деталей в изображение размером 64 x 64 пикселя, используя всего 7 цветов.
ps. У меня также было достаточно пикселей и цветов, чтобы исправить эти странные мультяшные глаза. X–D
ЭКСПОРТ
И последнее, но не менее важное…
При сохранении и экспорте пиксельной графики используйте формат GIF или PNG.
Избегайте использования формата JPEG, особенно с любым уровнем сжатия.
Это уничтожит всю любовь и заботу, которые вы использовали при создании пиксель-арта.
Посмотрите на приведенные ниже примеры: JPEG (41), сжатый на 99 %, может выглядеть нормально на расстоянии, но он добавляет некоторые нежелательные цвета.
Версия, сжатая на 80 % (42), вызовет у любого художника, работающего с пиксельной графикой, кровь. Пожалуйста, не делайте этого. 🙂
Когда дело доходит до публикации в социальных сетях, вам приходится иметь дело с автоматическим сжатием платформы.
Для Instagram у вас не будет выбора, поскольку система автоматически преобразует и изменяет размер изображения в формате JPEG низкого качества.
В Twitter у вас будет более четкое, почти идеальное изображение, если экспортируемый файл имеет ширину 506 пикселей в формате PNG.
Надеюсь, вам понравился этот урок, а также надеюсь, что вам удалось создать свой первый портрет в пиксельной графике.
Читайте также: