Содержание

Как графика из старых видеоигр стала трендом современного дизайна

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

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

Пиксель-арт (pixel art) — это изображения, созданные из видимых пикселей. Они напоминают мозаику или фигурки из конструктора. Художественный стиль зародился в 1970-х, когда возможности цифровой графики не позволяли делать ничего более сложного.

Источник: Freepik

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

Источник: Floor796

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

В 1972 году Ричард Шоуп разработал первый графический редактор SuperPaint, в котором пользователи могли сами создавать картинки. Интерфейс был пиксельным и рисовать также предполагалось пикселями. Была доступна палитра из 16 цветов и основные инструменты: «Кисть», «Линия», «Ластик».

Источник: Peoplesgdarchive

В том же году вышла видеоигра Pong — настольный теннис с использованием анимированной пиксельной графики.

Источник: Reddit

Первые иконки на Makintosh, разработанные Сьюзен Кэр в 1980-х, также были пиксельными.

Источник: 99percentinvisible

Со временем пиксельная графика развивалась и становилась все более детализированной. В 1985 году вышла популярная игра Super Mario Bros. от японской компании Nintendo. Художники показывали светотень на облаках и элементах ландшафта с помощью пикселей разных оттенков. Благодаря этому объекты приобрели объем.

Источник: Reddit

К 1990-м тренд на объем в пиксельной графике развивался. Разработчики игр стремились делать реалистичные тени и блики, чтобы продемонстрировать объем архитектурных элементов и даже мышцы и складки на одежде героев. Игры Metal Slug, Final Fight и многие другие отличались впечатляющей графикой для того времени.

Кадр из игры Final Fight, 1989 год. Источник: IMDb

Стали популярны аниме-игры для японских 16-битных компьютеров PC-98.

Источник: Fandom

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

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

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

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

Пиксель-арт стал трендом и в типографике, шрифтовые дизайнеры создают гарнитуры в этом стиле. Например, в библиотеке Google Fonts доступно шрифтовое семейство Pixelify Sans.

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

Пиксель-арт: реальные примеры из игр и медиа

Посмотрим, как бренды внедряют пиксельную графику в свои маркетинговые коммуникации.

На странице Школы редакторов «Бюро Горбунова» расписание курса стилизовано под интерфейс игры. Герои проходят по ступенькам от базовой теории до защиты диплома. Такая инфографика позволяет зацепить внимание пользователя и доступно показать главные вехи учебной программы.

Источник: Школа редакторов Бюро Горбунова

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

Источник: Корпоративная Ёлка

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

Источник: Мир знаний

В айдентике школы анимации Pixel от студии «Логомашина» видимые пиксели использованы в логотипе и в качестве стилевых элементов в коммуникациях.

Источник: Логомашина

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

Источник: Pentagram

Простые пиксельные рисунки использованы в фирменном стиле сообщества Young&&Yandex — оно объединяет образовательные программы и стажировки для молодых специалистов. Картинки из квадратиков смотрятся необычно и потенциально привлекательны для молодежи. В то же время пиксельный стиль отсылает к сфере IT.

Источник: Young&&Yandex

Лучшие программы для создания пиксель-арта

Создавать пиксель-арт можно в Photoshop: увеличьте рабочую область так, чтобы пиксели были крупными, и закрашивайте их кистью. Если вам привычно работать в Illustrator, можно использовать его: настройте сетку и заполняйте каждую клетку заливкой. Но проще попробовать специальные редакторы.

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

  • Piskel — браузерный редактор с простым интерфейсом, хорош для создания лаконичных иллюстраций и иконок.
  • GraphicsGale — десктопная программа, которая позволяет делать статичную и анимированную графику в пиксельном стиле.
  • GrafX2 — десктопная программа с более обширным инструментарием, в ней можно делать детализированные пиксельные картинки с множеством оттенков, а также создавать несложную покадровую анимацию.
  • Pixelator — сервис, который автоматически преобразовывает обычные картинки в пиксель-арт.

Продвинутых пользователей может заинтересовать платный софт:

  • Aseprite — позволяет создавать пиксельные кисти, использовать готовые палитры, автоматически избавляться от лишних пикселей. Десктопное приложение стоит 19,99 доллара. Можно воспользоваться бесплатной пробной версией без привязки карты, но в ней не получится сохранять файлы.
  • Pixel Edit — редактор, который подойдет для несложной игровой графики с повторяющимися элементами. Он позволяет делить рабочую область на блоки и удобно копировать нужные фрагменты. Доступен на десктопе за 9 долларов.

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

Пиксель-арт может показаться простым стилем, но это не так. Новичку стоит вести работу поэтапно:

  1. Начать с эскиза. Можно нарисовать его от руки или в цифровом варианте на графическом планшете.
  2. Определиться с размером изображения. Самые популярные форматы для иконок и небольших иллюстраций 16 × 16 и 32 × 32 пикселя. Если вам нужен средний размер, подойдет формат 64 × 64, для больших иллюстраций —128 × 128. Но начинать осваивать инструменты лучше с небольших форматов.
  3. Определиться с цветовой палитрой. Лучше заранее решить, какие цвета вам потребуются. Ограничений нет: в современном пиксель-арте допустимы любые оттенки.
  4. Нарисовать очертания объектов. Контурный рисунок поможет лучше ориентироваться в рабочей области.
  5. Сделать сплошные заливки объектов. В любом рисовании удобно переходить от общего к частному, и пиксель-арт — не исключение.Проработать детали. Это финальный этап: на однотонных фигурах можно прорисовать тени, блики, рельеф.

Обучение пиксель-арту: с чего начать и где учиться

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

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

Поделиться