Пиксель-арт: что это за стиль и как его повторить

Пиксельная графика — стиль, который сопровождает нас еще с 80-х, когда появились приставки Nintendo с играми. Сейчас «квадратиками» оформляют рекламные баннеры и спецпроекты, рисуют граффити, создают шрифты. А мы вдохновились лучшими примерами от брендов и нашли способы повторить пиксельный стиль. Спойлер: он не так прост, как кажется!

В каких сферах можно встретить пиксель-арт

Пиксельная графика пришла в маркетинг из компьютерных игр — сначала Super Mario и Pac-Man, а потом и Minecraft. В эпоху 3D и нейросетей разработчики продолжают выпускать проекты в нарочито пиксельном стиле — одни отсылают к механике ретро-игр, а другие создают особую уютную атмосферу за счет детализации и всего сотен оттенков.

Спецпроекты

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

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

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

Контент-маркетинг

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

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

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

Брендинг

Неочевидная сфера для пиксельного стиля — брендинг компании. А именно создание «квадратиков» на упаковке товаров, фирменном мерче для сотрудников и партнеров: худи, блокнотах, стикерах. Как и в других областях маркетинга, пиксельный стиль выбирают компании-гики.

Где взять шрифты для баннера в пиксельном стиле

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

NEOPIXEL. Шрифт с четкими линиями, напоминающий цифры на часах или табло в аэропорту. Подходит скорее для акцентных элементов — названий или дат. 

Pixolism. «Мягкий» вариант пиксельного шрифта с аккуратными линиями букв. Кроме них в наборе есть другие наборные элементы — кавычки и скобки, знаки валют, вопроса. 

В каких сервисах можно пикселизировать картинку

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

PicsArt. В онлайн-редакторе можно сделать картинку 8-битной через эффекты в коллекции Blur («Размытие»). При этом сервис старается сохранить все цвета и тени — контуры рисунка не упрощаются, а сильно размываются.

Figma. Популярный редактор подходит для создания векторных пиксельных объектов — рисунков, которые можно увеличивать или уменьшать без потери качества. Можно использовать плагины Pixels, Image Editor или Pixel Princess.

Photoshop. Если загрузить в эту программу картинку, превратить ее в смарт-объект и применить фильтр «Мозайка», можно получить пиксели. 

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

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

Где рисуют пиксельный арт вручную

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

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

Pixelorama. Программа с палитрой цветов, встроенными графическими эффектами и большой рабочей областью. Поддерживает загрузку 3D-объектов и их переработку в пиксели. Здесь можно создать как статичную картинку, так и покадровую анимацию — и отдельно править каждый шаг. А потом сохранить как PNG, GIF или MP4.

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

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

Сервис кроссплатформенный — работает на ПК и смартфоне. Поэтому любой этап можно синхронизировать через Google Диск. Сохранить работу можно в форматах PNG, JPG, GIF, BMP, PSP и ASE — последние два фирменные для этого стиля.

Piskel. Простая программа на ПК и веб-сервис для старта в пиксельном рисовании. Поддерживает палитру и масштабирование экрана. В процессе пиксели можно осветлять и затемнять на несколько оттенков. А готовую картинку экспортировать как GIF или PNG.

Как нарисовать арт самостоятельно

Чтобы комфортно работать в этих программах, стоит придерживаться пошагового алгоритма. Собрали основные советы ниже.

Подготовьте референсы. Профессиональные художники не «мыслят пикселями», а начинают работу с привычного рисунка. Можно набросать его от руки или нарисовать в Photoshop с помощью графического планшета. 

Рисунок можно использовать как референс или добавить как слой-подсказку в программу и как бы рисовать поверх него. Если даже с ним сложно, можно найти для опоры готовые пиксельные изображения. Например, в галерее сервиса Pixelorama, на сайте Lospec или в сообществах Pixel, Pixel Family.

Подберите палитру. Стоит сразу обозначить сочетания цветов для работы — так получится не запутать зрителя в обилии деталей. За основу можно взять готовые варианты внутри программы для рисования, фирменные цвета бренда из гайдбука или палитры на сайтах Lospec, Adobe Color, In color balance.

Используйте нейросети. Не обязательно весь рисунок создавать с нуля. Можно ускорить процесс и передать Recraft или ChatGPT часть задач. Например, нарисовать персонажа для баннера. А вручную уже поправить детали — перекрасить одежду или волосы под фирменные цвета бренда, добавить тени и блики.

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

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

Еще популярен «дизеринг» — функция меняет порядок пикселей на рисунке и придает ощущение резкого, смазанного маска кистью.