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

Обновлено: 21.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, если вы не знаете, что делаете. Это формат файла с потерями, предназначенный для цифровых фотографий и других изображений с плавными градиентами.

Пиксель-арт: легко научиться, сложно стать мастером

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

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

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

Воспроизведение рисунка

Снимки вашего рисунка в 30 кадрах или меньше

Скачать чертеж

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

Покажите этот удивительный рисунок сообществу Pixilart

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

Некоторые компьютеры чрезмерно доступны при прокрутке с помощью трекпада. Здесь вы можете отключить масштабирование прокрутки. Вы по-прежнему можете увеличивать и уменьшать масштаб с помощью панели параметров.

Пользовательские шрифты

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

Кисти

Пожалуйста, выберите, какую букву назначить

(Вы можете использовать этот шрифт, выбрав "Пользовательский" в раскрывающемся списке выбора шрифта)

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

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

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

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

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

Дадо Алмейда, концепт-художник игр и анимации, учит нас создавать пиксельную графику! В этом пошаговом руководстве вы узнаете, как создать портрет размером 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.

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

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

Версия

Изучайте пиксельную графику, создавая этого классного игрового персонажа!

Это гостевой пост Глаубера Котаки, опытного художника по 2D-играм, которого можно нанять.

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

Выглядит. Пиксель-арт выглядит потрясающе! Есть что сказать о максимальном использовании каждого пикселя спрайта.
Ностальгия. Пиксель-арт вызывает сильное чувство ностальгии у геймеров, которые выросли, играя в Nintendo, Super Nintendo или Genesis (как и я!)
Простота обучения. Пиксель-арт — один из самых простых видов цифрового искусства для изучения, особенно если вы больше программист, чем художник;]

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

И в качестве бонуса, после того как я покажу вам, как создать персонажа, Рэй погрузится и покажет вам, как интегрировать его в игру для iPhone!

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

Читайте дальше, чтобы начать использовать пиксели!

Что такое пиксель-арт?

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

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

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

Инструменты размытия: идентификация пикселей и их копирование/редактирование для создания новой версии предыдущего изображения. Опять же не пиксель-арт.

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

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

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

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

Начало работы

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

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

Например, вы хотите, чтобы игра выглядела вдвое больше на iPhone 3GS ("Я действительно хочу придать своей игре ретро-пиксельный вид!") с разрешением 480 x 320 пикселей. Тогда ваше рабочее разрешение будет вдвое меньше, или 240 x 160 пикселей.

Откройте новый холст в Photoshop («Файл» > «Создать…») и установите такой же размер, чтобы вы могли посмотреть на него и выбрать размер для своего персонажа.

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

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

Создание вашего первого персонажа

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

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

В Photoshop выберите инструмент Карандаш. Если вы не можете его найти, просто нажмите и удерживайте инструмент «Кисть» и прокрутите вниз до инструмента «Карандаш» (он должен быть вторым). Вам просто нужно изменить его размер до размера кисти 1 (вы можете щелкнуть панель параметров инструмента и изменить его размер или просто удерживать клавишу «[»).

Со временем вам также понадобится Инструмент «Стереть», поэтому щелкните его (или нажмите «E») и измените его настройки на «Режим: Карандаш» (чтобы он не сглаживал кисть).

И приступайте к пикселизации! Нарисуйте на изображении две брови и глаз, примерно так:

Ура! Я пикселизирую!

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

Нарисуйте что-то подобное серым цветом:

На данном этапе не обязательно быть идеальным

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

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

Если вы считаете, что инструмент "Карандаш" слишком медленный для рисования, вы всегда можете использовать инструмент "Линия", чтобы ускорить процесс. Просто не забудьте исправить некоторые пиксели, так как он не такой точный, как Карандаш. Однако вам нужно будет настроить его, как показано ниже:

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

Перейдите на панель настроек инструмента и выберите третий значок («Заполнить пиксели»), измените «Толщину» на 1 (если он еще не установлен) и снимите флажок «Сглаживание» (ваш враг!). Это должно выглядеть так:

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

Применение цвета и заливки

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

Раскрасьте своего героя примерно так (но не стесняйтесь проявлять творческий подход и использовать свои собственные цвета!)

Хороший цветовой контраст улучшает читаемость вашего ресурса!

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

О, и не тратьте время, тщательно размещая каждый цветовой пиксель. Чтобы ускорить процесс, нарисуйте линии для каждого цвета и используйте Инструмент "Заливка", чтобы заполнить пробелы. Вам также необходимо настроить этот инструмент. Выберите его на панели инструментов (или просто нажмите «G»), измените параметр «Допуск» на 0 и снимите флажок «Сглаживание».

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

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

Или вы можете просто сделать затенение похожим на мой пример ниже!

Используйте один и тот же источник света для всего объекта

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

Сохраняйте тот же источник света, что и затенение

Приправьте свою палитру

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

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

Затем в окне "Палитра цветов" пролистайте правую панель, чтобы выбрать цвет, и в основной области, чтобы выбрать его яркость (больше белого или больше черного) и насыщенность (ярче или тусклее).

Выбрав его, нажмите кнопку "ОК" и перенастройте инструмент Paint Bucket. Не паникуйте, вы просто снимите флажок «Непрерывный», поэтому, когда вы будете рисовать новым цветом, каждый пиксель того же цвета в слое также будет окрашен.

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

Снимите флажок "Смежные", чтобы закрасить все пиксели одним цветом

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

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

Советы по редактированию пикселей в Photoshop

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

Может оказаться удобным немного изменить размер некоторых частей или даже повернуть их, чтобы анимировать дальнейшие кадры, такие как бегущие циклы. Для этого используйте любой инструмент выделения (нажмите «M»), чтобы выбрать область, щелкните ее правой кнопкой мыши и выберите «Свободное преобразование» или просто нажмите Ctrl + T. Вы сможете свободно изменять его размер и поворачивать.

Однако Photoshop автоматически сглаживает все, отредактированное с помощью функции Free Transform. Прежде чем подтвердить свое редактирование, перейдите в «Правка»> «Установки»> «Основные» (Ctrl + K) и измените «Интерполяция изображения» на «Ближайший сосед». В двух словах, он вычисляет новую позицию и размер очень приблизительно, не применяя новые цвета или прозрачность, сохраняя выбранные вами цвета.

Интеграция Pixel Art в игру для iPhone

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

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

Создайте новый проект с помощью шаблона iOS\cocos2d v2.x\cocos2d iOS, назовите его PixelArt и выберите iPhone в качестве семейства устройств.

Перетащите созданный вами пиксельный персонаж в свой проект.

Затем откройте HelloWorldLayer.m и замените метод инициализации следующим:

Мы размещаем спрайт в левой части экрана и переворачиваем его так, чтобы он смотрел вправо.

Скомпилируйте и запустите, и вы увидите свой спрайт на экране, как и ожидалось:

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

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

Легко, правда? Скомпилируйте, запустите и… подождите, наш спрайт размыт!

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

К счастью, это легко исправить! Просто добавьте эту дополнительную строку:

Это настраивает Cocos2D на масштабирование изображения без сглаживания, чтобы оно по-прежнему выглядело как «пиксель». Скомпилируйте, запустите и w00t — работает!

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

Для меня это все — вернемся к Глауберу, и он закончит!

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

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

Прежде чем мы начнем, вот несколько последних советов:

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

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

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

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

Это гостевой пост Глаубера Котаки, опытного художника по 2D-играм, которого можно нанять.

Читайте также: