инструкция по применению / Блог компании Playgendary / Хабр

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

Фон

Пиксель-арт — форма цифрового художественного искусства, в котором изменения вносятся на уровне пикселей. В основном он ассоциируется с графикой видеоигр 80-х и 90-х годов. Тогда художникам приходилось учитывать ограничения памяти и низкого разрешения. Сейчас пиксель-арт все еще популярен в играх и как художественный стиль в целом, несмотря на возможность создания реалистичной 3D-графики. Почему? Даже если не брать в расчет ностальгию, создание крутой работы в таких жестких рамках — приятный и стоящий челлендж.

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

Metal Slug 3 (Arcade). SNK, 2000 год

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

В общем, я предупредил.

А теперь немного о моем стиле: в основном я рисую пиксель-арт для видеоигр и в них же нахожу вдохновение. В частности я фанат Famicom/NES, 16-битных консолей и аркад 90-х годов. Пиксель-арт моих любимых игр того времени можно описать как яркий, уверенный и чистый (но не слишком), его нельзя назвать жестким и минималистичным. В этом стиле я работаю сам, но вы легко можете применять идеи и техники из этого туториала для создания совершенно других вещей. Изучайте работы разных художников и создавайте пиксель-арт, который нравится вам!

Софт

Базовые цифровые инструменты для пиксель-арта — Зум (Zoom) и Карандаш (Pencil), чтобы размещать пиксели. Также вам пригодятся Линия (Line), Фигура (Shape), Выбрать (Select), Переместить (Move) и Заливка (Paint Bucket). Есть много бесплатного и платного ПО с таким набором инструментов. Я расскажу про самые популярные и те, которыми пользуюсь сам.

Paint (бесплатно)

Если у вас Windows, встроенный в нее Paint — примитивная программа, но в ней есть все инструменты для пиксель-арта.

Piskel (бесплатно)

Неожиданно функциональный редактор пиксель-арта, который запускается через браузер. Можно экспортировать работу в PNG или анимированный GIF. Отличный вариант для новичков.

GraphigsGale (бесплатно)

GraphicsGale — единственный редактор из тех, о которых я слышал, разработанный именно для пиксель-арта и включающий инструменты анимации. Его создала японская компания HUMANBALANCE. С 2017 года он распространяется бесплатно и до сих пор пользуется спросом, несмотря на рост популярности Aseprite. К сожалению, работает он только на Windows.

Aseprite ($)

Пожалуй, самый популярный редактор на данный момент.

Открытый исходный код

, куча возможностей, активная поддержка, версии для Windows, Mac и Linux. Если вы серьезно взялись за пиксель-арт и все еще не нашли нужный редактор, возможно, это то, что нужно.

GameMaker Studio 2 ($$+)

GameMaker Studio 2 — превосходный 2D-инструмент с хорошим редактором спрайтов (Sprite Editor). Если вы хотите создавать пиксель-арт для для собственных игр, очень удобно все делать в одной программе. Сейчас я использую этот софт в работе над

UFO 50

, коллекцией 50 ретро-игр: спрайты и анимации создаю в GameMaker, а тайлсеты — в Photoshop.

Photoshop ($$$+)

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

Прочее

Мой набор для пиксель-арта. Все черное, только сейчас заметил.

Графический планшет ($$+)

Рекомендую графические планшеты для любых работ с цифровыми иллюстрациями, чтобы избежать туннельного синдрома запястий. Его гораздо проще предотвратить, чем вылечить. Однажды вы почувствуете боль, и она будет только нарастать — позаботьтесь о себе с самого начала. Из-за того, что когда-то я рисовал мышкой, мне теперь тяжело играть в игры, в которых нужно нажимать на клавиши. Сейчас я использую Wacom Intuos Pro S.

Суппорт запястья ($)

Если вы не можете приобрести планшет, купите хотя бы суппорт запястья. Мне больше всего нравится Mueller Green Fitted Wrist Brace. Остальные либо слишком тугие, либо обеспечивают недостаточную поддержку. Суппорты без проблем можно заказать онлайн.

96×96 пикселей

Final Fight. Capcom, 1989 год

Приступим! Начнем со спрайта персонажа 96×96 пикселей. Для примера я нарисовал орка и поместил его на скриншот из Final Fight (картинка выше), чтобы вы понимали масштаб. Это большой спрайт для большинства ретро-игр, размер скриншота: 384×224 пикселя.

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

1. Выбираем палитру

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

Для этого туториала я буду использовать палитру из 32 цветов, которую мы создали для UFO 50. Для пиксель-арта их часто собирают из 32 или 16 цветов. Наша разработана для вымышленной консоли, которая могла бы появится где-то между Famicom и PC Engine. Можете взять ее или любую другую — туториал совсем не зависит от выбранной палитры.

2. Грубые контуры

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

3. Проработка контуров

Дорабатываем контуры: убираем лишние пиксели и сокращаем толщину каждой линии до одного пикселя. Но что именно считать лишним? Чтобы ответить на этот вопрос нужно разобраться в пиксельных линиях и неровностях.

Неровности

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

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

Примеры:

Прямые

Кривые

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

Совсем избежать неровностей невозможно — во всех ваших любимых ретро-играх они есть (если, конечно, пиксель-арт состоит не исключительно из простых форм). Цель: свести неровности к минимуму, при этом показав все необходимое.

4. Применяем первые цвета

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

В нижнем левом углу я нарисовал нашего друга, знакомьтесь, это — Шар. С ним будет проще понять, что именно происходит на каждом этапе.

5. Шейдинг

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

Форма и объем

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

Сглаживание (anti-aliasing, анти-алиасинг)

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

Серые пиксели смягчают «разрывы» в линии. Чем длиннее сегмент линии, тем длиннее АА-сегмент.

Так АА выглядит на плече орка. Он нужен, чтобы сгладить линии, отображающие изгиб его мышц

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

6. Выборочный контур

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

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

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

7. Финальные штрихи

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

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

Создание шумов (dithering, дизеринг)

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

Верхний градиент от темного к светлому использует сотни различных оттенков синего.

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

На нижнем градиенте мы применили дизеринг, который позволяет избежать бандинга и использует всего два цвета. Мы создаем шум разной интенсивности, чтобы имитировать градацию цвета. Эта техника очень похожа на халфтон (halftone — полутоновое изображение), применяемое на печати; а также на стипплинг (stippling — зернистое изображение) — в иллюстрации и комиксах.

На орке я применил дизеринг совсем немного для передачи текстуры. Некоторые пиксель-артисты совсем его не используют, другие — наоборот не стесняются и делают это очень умело. Мне кажется, что лучше всего дизеринг смотрится на больших участках залитых одним цветом (присмотритесь к небу на скриншоте Metal Slug, который был выше) или на тех участках, которые должны выглядеть шероховато и неровно (например, грязь). Решите сами, как его использовать.

Если хотите увидеть пример с масштабным и качественным дизерингом, изучите игры The Bitmap Brothers, британской студии 80-х годов, или игры на компьютере PC-98. Только учтите, что все они — NSFW.

Kakyusei (PC-98). Elf, 1996 год
На этом изображении всего 16 цветов!

8. Последний взгляд

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

Даже если ваш пиксель-арт не для игр, иногда стоит сказать себе: «Все уже достаточно хорошо!» И двигаться дальше. Лучший способ развития навыков — как можно больше раз пройти весь процесс целиком от начала до конца, используя как можно больше тем.

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

32×32 пикселя

Мы создали большой спрайт 96×96 пикселей первым, потому что при таком размере это больше напоминает рисование или живопись, но только пикселями. Чем меньше спрайт, тем меньше он похож на то, что должен отображать, и тем больше важен каждый пиксель.

В Super Mario Bros. глаз Марио — это всего два пикселя, расположенные один над другим. И его ухо тоже. Создатель персонажа Сигеру Миямото сказал, что усы потребовались для того, чтобы отделить нос от остального лица. Так что одна из главных черт лица Марио — не просто дизайн персонажа, но и прагматичная уловка. Что подтверждает старую мудрость — «нужда — мать изобретательности».

Основные этапы создания спрайта 32×32 пикселя нам уже знакомы: скетч, цвет, тени, дальнейшая доработка. Но в таких условиях, в качестве начального скетча я подбираю цветные фигуры вместо отрисовки контуров из-за маленького размера. Цвет играет более важную роль в определении персонажа, чем контуры. Посмотрите на Марио еще раз, у него вообще нет контуров. Интересны не только усы. Его бакенбарды определяют форму ушей, рукава показывают руки, а общая форма более-менее четко отображает все его тело.

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

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

Целая команда в сборе!

Форматы файлов

Такой результат может заставить понервничать любого пиксель-артиста

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

Для сохранения статической картинки без потери качества используйте формат PNG. Для анимаций — GIF.

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

Шеринг пиксель-арта в социальных сетях — отличный способ получить фидбек и познакомиться с другими художниками, работающими в том же стиле. Не забудьте поставить хэштег #pixelart. К сожалению, соцсети часто конвертируют PNG в JPG без спроса, ухудшая вашу работу. Причем не всегда понятно, почему ваша картинка была конвертирована.

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

Twitter

Чтобы PNG-файл не изменился в Twitter, используйте меньше 256 цветов или

убедитесь

, что ваш файл меньше 900 пикселей по длинной стороне. Я бы увеличил размер файла хотя бы до 512×512 пикселей. Причем так, чтобы масштабирование было кратно 100 (200%, а не 250%) и сохранялись резкие края (Nearest Neighbor в Photoshop).

Анимированные GIF-файлы для постов в Twitter должны весить не более 15 Мб. Картинка должна быть как минимум 800×800 пикселей, цикличная анимация должна повторяться трижды, а последний кадр должен быть вполовину короче по времени, чем все остальные — самая популярная теория. Однако, непонятно, насколько нужно выполнять эти требования, учитывая, что Twitter постоянно меняет свои алгоритмы отображения картинок.

Instagram

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

Пиксель арт. Эволюция | 3DPAPA

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

Чтобы лучше разобраться в теме, мы связались с Valerii Kim. Валерий рисует пиксель арт уже десять лет, восемь из которых, делает это за деньги. Более года назад перестал работать с проектами в геймдеве, устав от реализации чужих идей.

Последний год я занимаюсь всем подряд. Индивидуально обучаю новых художников (уже выкатил первого и учу второго). Нарисовал и продолжаю рисовать несколько серий артов. Захожу в low poly 3D с трушными пиксель арт текстурами. Выпустил один ресурс-пак для Майнкрафт и вот-вот выпускаю второй.

Оглавление:

Определение

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

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

Арт: Valerii Kim

К сожалению, чем дальше отходить от простоты этого примера, тем больше все будет усложняться. Глобально мнения разделяются надвое. Одна сторона утверждает, что существует тру пиксель арт, создавая который необходимо придерживаться определенных правил, хорошо описанных в статье на Pixel Joint «The Pixel Art Tutorial». Коротко: правильный антиалиасинг и дизеринг, правильно построенные кластеры пикселей, отсутствие изломов, прозрачностей и полупрозрачностей, небольшая цветовая палитра. Сторонники этих правил уверены, что соблюдая их невозможно сделать плохой пиксель арт.

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

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

Техники, описанные в статье «The Pixel Art Tutorial», очень распространены и работают почти безотказно. Поэтому все, и я в том числе, ошибочно восприняли их как правила. Но у пиксель-арта нет правил. Каждый художник рисует в рамках техник, которые ему нравятся. Допустим, ему нравятся дизер, кластер или еще что-то. Он сочетает их, создавая свой уникальный стиль, благодаря которому его полотна каждый раз выглядит по-особенному.

Арт: Valerii Kim

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

Получилось достаточно массивная конструкция с налетом академических изысканий. Если у вас есть более изящные варианты, вы можете предложить их в комментариях. Аче всмысле? Здесь можно писать комментарии? Нужно чекнуть после прочтения. А пока перейдем к истории пиксель арта. Только совсем коротко. Не залезая в самые дебри.

История

Арт: Valerii Kim

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

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

Арт: Valerii Kim

Само понятие пиксель арт появилось уже в 80-х. Тогда пиксельная графика намертво закрепилась в умах геймеров, и просидела там вплоть до конца прошлого века. Каждый уважающий себя ребенок/подросток того времени, играл на маленьком черно-белом телевизоре (а в тайне от родителей — на большом цветном) в Super Mario Bros, Battle City (более известную как Танчики), Contra, Battletoads, и остальные 995 игр с пиратского картриджа.

Но технологии не стояли на месте и количество пикселей постоянно увеличивалось, а вместе с этим росло и качество графики. Уже к концу 90-х количество пикселей возросло настолько, что ценность отдельно взятой единицы мягко говоря упала. Если проводить сложные и никому не нужные параллели с финансовыми понятиями, ситуация была похожа на гиперинфляцию в Германии 1919-1923 годов. Проще говоря, курс пикселя упал. На художников, привыкших иметь дело максимум с тысячами пикселей, посыпались сначала сотни тысяч, потом миллионы, а следом и десятки миллионов.

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

Возрождение

Арт: Valerii Kim

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

В начале 2010-х на рынке стали появляться новые игры в стиле пиксель арт. Некоторые из них, такие как Mega Man 9, и Terraria, были выдержаны в ретро стилистике, хорошо передавали дух прошлого и пользовались популярностью среди поколения постарше. Другие, вроде  Minecraft, Fez и Hotline Miami привлекли внимание более молодых зумеров.

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

Арт: Valerii Kim

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

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

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

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

Retro VS New Wave

Арт: Valerii Kim

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

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

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

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

Современные проекты

Арт из игры Katana Zero

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

Но чаще всего пиксель арт можно встретить там, откуда все началось, — в геймдеве. Здесь тоже все подвязано на бабки, так что крупные издатели не рискуют и продают ностальгию. Тот же Cyberpunk 2077 вдохновлен книгами, фильмами и играми 80х-90х. По сути, это ретро игра, хоть и с примесью хип-хоп трепа.

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

Таких проектов не очень много, потому что хороший пиксель-арт — это всегда дорого. Но ребята что-то делают. Взять, например, Four Quarters. Они выпустили крутейший проект в стиле пиксель арт Please, Don’t Touch Anything, а недавно анонсировали новую игру: Loop Hero.

Очень сильные ребята. У них в команде два художника — Finlal и Deceiver. Оба много работали и сейчас отлично рисуют. До этого они работали над Katana Zero, над которой также работал художник Картонная коробка — никнейм у парня такой — и художник по персонажам Cyan. В общем, отличный проект от наших ребят. У них все круто, голова на плечах очень умная и графон они выдавливают из себя отличный.

Справедливости ради, нужно отметить, что крутые проекты в стиле ретро тоже двигают пиксель арт вперед. Взять, например, The Last Night. Жирнющий проект с графикой в стиле пиксель арт от студии Odd Tales. Точной даты релиза пока нет, но после длительных юридических и финансовых проблем, студия наконец объявила о возобновлении работы над проектом.

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

Я вижу аудиторию художников, которые сейчас растут и быстро становятся лучше. В СНГ многие рисуют не только для себя, но и для комьюнити. Ведут свои паблики, образовывают там свои тусовочки, общаются, делятся и рисуют. Та же «Селедка 2» — просто уморительный паблик, в котором куча начинающих художников, все на позитиве, на приколе и все у них супер классно.

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

Подписывайтесь на нас в Facebook, Telegram, Vkontakte, чтобы ничего не пропустить. Делитесь понравившимися статьями в соцсетях, говорят, именно для этого их и придумали. Но это не точно.

Статью подготовил Олег Мощенко.

Как начать делать пиксель арт #1 (RUS) | by Кирилл Евстигнеев

Руководство для Абсолютного Новичка

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

Этот гайд был поддержан на моем Патреоне! Если вам нравится то, что я делаю, то порадуйте меня своей подпиской, пожалуйста 🙂 (ВНИМАНИЕ! Это Патреон ОРИГИНАЛЬНОГО автора статьи, а не переводчика.)

Перед тем, как начнем…

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

Инструменты

Вам не нужно что-то эдакое для того, чтобы работать в пиксель арте, достаточно даже мышки и какой-нибудь бесплатной программы. Я использую маленький планшет от Wacom, очень хорошую мышку и клавиатуру; моя любимая программа — Aseprite, но вместо нее вы можете использовать все, в чем вам будет удобнее.

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

• Aseprite: Классный профессиональный редактор с кучей полезных плюшек (платный)
  (Примечание переводчика: но всегда можно скомпилировать.)
• GraphicsGale: Классика, использующаяся во множестве игр. Немножечко запутанная, но все так же с кучей полезных плюх (бесплатная)
• Piskel: Пиксельный онлайн-редактор (само собой, бесплатный)
• Photoshop: Мощный редактор изображений, который, по сути, не приспособлен для пиксель арта, но вы можете его настроить нужным образом (платный)

Aseprite

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

Создаем Новый Файл

Просто нажмите на “New File…” на загрузочном экране или на File > New File, чтобы мы могли начать.

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

Окошко “Новый спрайт” в Aseprite

Режим цвета можно оставить в RGBA, на данный момент он самый простой и наглядный. Некоторые художники любят работать в режиме палитры “indexed”, который позволяет использовать несколько особых плюшек, но вместе с ними идут и некоторые недостатки.

Фон должен быть прозрачным или белым, пока без разницы. Теперь убедитесь, что Advanced Options отключены (но позже можете вернуться к ним) и можно наконец-то приступать!

Давайте рисовать!

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

Рабочая зона в Aseprite

Слева вы можете увидеть палитру с парочкой установленных по умолчанию цветов. Давайте поменяем их на другие, более простые. Нажмите на третью иконку над палитрой (Pressets) и выберите ARQ4 (хорошую палитру под авторством художника Endesga), которую вы будете использовать для своего первого творения.

А теперь, используя только четыре цвета слева, постарайтесь нарисовать кружку.

Будьте вольны пользоваться моей работой как предметом вашего вдохновения. Если вы вдруг сделаете ошибку, нажмите alt+ЛКМ по пустой зоне вне вашего рисунка, тем самым подобрав прозрачный цвет, которым можно пользоваться как ластиком. Ну или вы можете использовать, собственно, сам инструмент “Ластик” (горячая клавиша на английскую E).

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

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

Теперь давайте сделаем еще больше спрайтов! Попробуйте нарисовать череп, меч и лицо человека. Но в этот раз без примера моих работ. Если вы почувствовали, что работа не влезает в эти рамки размера, то не волнуйтесь — это нормально, попробуйте что-либо немного поменять или попробуйте сначала. Работа в таком низком разрешении очень сложная и иногда напоминает паззл. Вот еще одна статья, которую я написал, посвященная работе в низком разрешении: [link]

Если вы так хотите, то вот вам моя версия этих трех спрайтов. Пожалуйста, не нажимайте сюда до того, как вы закончите рисовать их сами. [skull, sword and human face].

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

Сохраняем файл

Для сохранения файла нажмите Control+S (или File>Save As…), Выберите имя файлу и путь сохранения, а потом нажмите кнопку save.

Помните, что в триале Aseprite’а нельзя сохранять работы!

Окошко экспортировки файла в Aseprite

Вы можете заметить, что Aseprite поддерживает очень много форматов для сохранения файла, но я рекомендую всегда держать при себе .ase версию каждого файла, который вы создаете. Точно так же, как формат .psd в Photoshop. Во время экспорта файла в интернет или игры, вы можете нажать Control+Alt+Shif+S или File>Export.

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

В Aseprite есть о-о-очень хорошая функция “Resize”, меняющая размер спрайта в окошке экспорта. Оно изменяет ваш спрайт только на какую-нибудь круглую процентную величину. Если вы измените размер спрайта, например, на 107%, это разобьет большинство пикселей и исказит изображение, но если вы измените размер на 200%, то каждый пиксель будет в 2 пикселя шириной и выстой, что, несомненно, выглядит классно и точно.

Бо́льшие разрешения

Теперь, когда мы разобрались с основами типа сохранения нового файла и рисования в указанном размере, давайте попробуем порисовать в еще большем разрешении, 32 на 32 пикселя. Также мы будем использовать палитру немного пошире, попробуйте AAP-Micro12 (сделана художником AdigunPolack). В этот раз мы будем рисовать лопату.

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

Шаг 1: Линии

Шаг 1

Такой принцип работы мы называем pixel-perfect (дословно вплоть до пикселя), он отличается тем, что линия лишь в 1 пиксель шириной и соединяется с другими пикселями по диагонали. Когда мы делаем подобные линии, мы стараемся избегать нежелательных пикселей и углов, например:

В Aseprite есть очень удобная функция в настройках кисти, которая позволяет делать описанный выше процесс автоматически: выбрав инструмент кисть, нажмите на кнопку Pixel-perfect. Только не забудьте выключить это после работы с обводкой, так как в таком случае она будет вас раздражать.

Алгоритм Pixel-Perfect в Aseprite

Шаг 2: Основные цвета

Шаг 2

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

Шаг 3: Светотень

Шаг 3

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

Импровизируем с цветами для света и теней

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

Инвертированная светотень

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

Шаг 4: Сглаживание и финальные штрихи

Шаг 4, финальный

В этой части работы вы должны сделать пиксели не такими “острыми”. Ручное сглаживание — сложная тема, и нам несомненно потребуется отдельная статья лишь для одного ее обсуждения, но говоря кратко, вы используете полутоны для имитации “полупикселей” и более мягких углов. Но пока даже не зацикливайтесь на этом, сейчас вашей задачей является сделать ваш спрайт максимально разборчивым.

Еще на этом этапе неплохо бы поискать “сиротские пиксели” (англ. Orphan PIxels). Это такие пиксели, которые не относятся ни к группе других пикселей, ни к части сглаживания, как на планете слева:

Убираем одиночные пиксели

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

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

Я хочу донести до вас, что не надо бездумно стирать сиротские пиксели, надо посмотреть и спросить себя: а нужно ли этому пикселю вообще быть одиночным?

А что теперь?

А теперь вам нужно экспериментировать с количеством цветов в палитре и разрешением! Но делайте это постепенно, начните, к примеру, с 48 на 48 пикселей и 16 цветов в палитре. Если вы действительно только начали, я настоятельно рекомендую вам избегать анимаций и для начала привыкнуть к статичным изображениям.

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

Также я делаю немного других туториалов по разным аспектам пиксель арта и гейм дизайна, вы можете найти их здесь:

Часть 2 уже доступна тут!

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

Как рисовать пиксель арт. Пошаговое руководство – CoreMission

В туториале «Как рисовать пиксель арт», состоящем из 10 шагов, я научу вас создавать «спрайт» (отдельный двухмерный персонаж или объект). Сам термин, конечно же, пришёл из видео-игр.

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

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

Инструменты

Одним из главных преимуществ создания пиксель арт является то, что вам не нужны какие-то продвинутые инструменты – графического редактора, установленного на вашем компьютере по умолчанию должно хватить. Стоит упомянуть, что существуют программы, разработанные специально для создания пиксель арт, вроде Pro Motion или Pixen (для пользователей Mac). Я сам их не тестировал, но слышал много положительных отзывов. В данном туториале я буду использовать фотошоп, который, хоть и стоит не мало, содержит массу полезных инструментов для создания искусства, часть из которых очень полезны для пикселинга.

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

Во время использования фотошопа, вашим главным оружием будет инструмент «Карандаш» (клавиша В), который является альтернативой инструменту «Кисть». Карандаш позволяет вам разукрашивать отдельные пиксели, избегая наложения цветов.

Нам пригодятся ещё два инструмента: «Выделение» (клавиша М) и «Волшебная палочка» (клавиша W) для того, чтобы выбирать и перетаскивать, или же копировать и вставлять. Помните, что, зажав клавишу Alt или Shift во время выделения, вы можете добавить выделенные объекты или же исключить их из текущего списка выделенных. Это необходимо кстати, когда нужно выбирать неровные объекты.

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

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

Линии

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

Прямые линии

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

Изогнутые линии

Рисуя изогнутые линии, нужно убедиться в том, что спад или подъём равномерны по всей длине. В данном примере, аккуратная линия имеет интервалы 6 > 3 > 2 > 1, а вот линия с интервалами 3 > 1 < 3 выглядит зазубренной.

Умение рисовать линии – ключевой элемент пиксель арт. Немного дальше я расскажу вам о сглаживании.

Концептуализация

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

Темы для размышления

• Для чего будет использован этот спрайт? Он для веб-сайта или для игры? Нужно ли будет в последствии сделать его анимированным? Если да, то его нужно будет сделать поменьше и мене детальным. И, наоборот, если вы не будете работать со спрайтом в будущем, можете прицепить на него столько деталей, сколько вам нужно. Поэтому заранее решите для чего конкретно нужен данный спрайт и выберите оптимальные параметры.
• Какие существуют ограничения? Ранее я упомянул о важности сохранения цветов. Главной причиной является ограниченность палитры цветов из-за системных требований (что крайне маловероятно в наше время) или для сочетаемости. Или для точности, если вы эмулируете особенный стиль C64, NES и так далее. Также стоит учитывать измерения вашего спрайта и то, не слишком ли он выделяется на фоне необходимых объектов.

Давайте попробуем!

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

Контур

Чёрный контур станет хорошей основой для вашего спрайта, так что с него мы и начнём. Мы выбрали чёрный, потому, что он смотрится хорошо, но при этом слегка мрачно. Дальше в туториале я расскажу вам о том, как изменить цвет контура для повышения реализма.

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

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

В моём туториале я создаю довольно крупный спрайт, так что здесь будет показан первый способ. Будет проще, если покажу всё наглядно и объясню, что произошло.

Шаг первый: черновой контур

Используя вашу мышь или планшет, нарисуйте черновой контур для вашего спрайта. Убедись в том, что он НЕ СЛИШКОМ сырой, то есть выглядит примерно так, как вы видите свой конечный продукт.

Мой эскиз практически полностью совпал с тем, как я и запланировал.

Шаг второй: отполируйте контур

Начните с того, что увеличиваете изображение в 6 или 8 раз. Вы должны чётко видеть каждый пиксель. А затем, подчищайте контур. В частности, стоит обратить внимание на «бродячие пиксели» (весь контур должен быть не больше одного пикселя толщиной), избавьтесь от зазубрин, и добавьте небольшие детали, которые мы пропустили в первом шаге.

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

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

Цвет

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

Цветовая модель HSB

Это английское сокращение, собранное из слов «Оттенок, Насыщенность, Яркость». Она является лишь одной из множества компьютерных цветовых моделей (или числовых представлений цвета). Вы наверняка слышали и о других примерах вроде RGB и CMYK. Большинство графических редакторов используют HSB для выбора цвета, поэтому мы сконцентрируемся именно на ней.

Hue – Оттенок – то, что мы привыкли называть цветом.

Saturation – Насыщенность – определяет интенсивность цвета. Если значение равно 100%, то это максимальная яркость. Если его понизить, то в цвете появятся тусклость и он «посереет».

Brightness – свет, который излучает цвет. Например, у чёрного этот показатель равен 0%.

Выбирая цвета

Решать, какие цвета выбрать – ваша задача, но есть несколько вещей, о которых стоит помнить:

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

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

Нанесение цветов

Наносить цвет – очень просто. Если вы используете фотошоп, то просто выберите необходимый фрагмент, выделите его волшебной палочкой (клавиша W), а затем заполните его посредством основного цвета (Alt-F) или дополнительного цвета Ctrl-F).

Шейдинг

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

Шаг первый: выбираем источник света

Сначала мы выбираем источник света. Если ваш спрайт является частью более крупного фрагмента, в котором присутствуют собственные источники освещения, вроде ламп, факелов и так далее. И все они могут по-разному влиять на то, как выглядит спрайт. Как бы то ни было, выбор удалённого источника света, вроде солнца – отличная идея для большинства пиксель арт. Для игр, к примеру, вам нужно будет создать максимально яркий спрайт, который потом можно будет подстроить под окружающую среду.

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

Шаг второй: непосредственно шейдинг

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

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

Шаг третий: мягкие тени

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

Шаг четвёртый: освещённые места

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

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

Несколько полезных правил

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

1. Не пользуйтесь градиентами. Наиболее распространённая ошибка новичков. Градиенты выглядят ужасно и даже приблизительно не отражают то, как свет играет на поверхностях.
2. Не используйте «мягкий шейдинг». Я говорю о ситуации, когда тень находится слишком далеко от контура, ведь тогда она выглядит весьма размытой, и препятствует выявлению источника света.
3. Не используйте слишком много теней. Легко думать, что «чем больше цветов – тем реалистичней картинка». Как бы то ни было, в реальной жизни мы привыкли видеть вещи в тёмном или светлом спектрах, а наш мозг отфильтрует всё, что находится между ними. Используйте лишь две тёмных (тёмная и очень тёмная) и две светлых (светлая и очень светлая) и накладывайте их на цвет основы, а не друг на друга.
4. Не используйте слишком похожие цвета. Особой нужды в использования практически одинаковых цветов нет за исключением случаев, когда вам нужно сделать действительно размытый спрайт.

 

Дизеринг

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

Простой пример

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

Продвинутый пример

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

Применение

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

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

Выборочное контурирование

Выборочное контурирование, которое также называют селаут (от английского selected outlining), является подвидом шейдинга контура. Вместо использования чёрной линии, мы подбираем цвет, который будет более гармонично смотреться на вашем спрайте. Кроме того, мы изменяем яркость этого контура ближе к краям спрайта, позволяя источнику цвета определять какие цвета нам стоит использовать.

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

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

Сравните это с оригиналом:

9. Сглаживание

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

Техника 1: сглаживание изгибов

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

Я не думаю, что могу объяснить это лучше, не усложняя. Просто посмотрите на картинку, и вы поймёте о чём я.

Техника 2: округление неровностей

Техника 3: затирание окончаний линий

Применение

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

Эффект весьма незаметный, но при этом он имеет огромное значение.

Почему нужно делать это вручную?

Вы можете спросить: «Почему бы просто не применить фильтр графического редактора на наш спрайт, если нам нужно, чтобы он выглядел гладко?». Ответ также прост – ни один фильтр не сделает ваш спрайт таким же чётким и чистым, как ручная работа. Вы получите полный контроль не только над используемыми цветами, но и над тем, где их использовать. К тому же, вы лучше любого фильтра знаете, где сглаживание будет уместно, а где есть участки, пиксели в которых просто потеряют своё качество.

Отделка

Ух, мы уже достаточно близко подобрались к моменту, когда вы сможете выключить компьютер и достать из холодильника бутылочку холодного пива. Но он ещё не настал! Последняя часть посвящена тому, что отличает энергичного любителя от опытного профессионала.

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

Вас мог удивлять тот факт, что всё это время у нашего Lucha Lawyer не было глаз, или что свёрток, который он держит – пуст. Собственно, причина кроется в том, что я хотел повременить с мелкими деталями. Также обратите внимание на отделку, которую я добавил на его повязки, ширинку на его штанах… ну и, кем бы был человек без его сосков? Также я немного затемнил нижнюю часть его торса, чтобы рука больше выступала на фоне тела.

Наконец вы закончили! Lucha Lawyer выступает в лёгком весе, ведь в нём всего 45 цветов (а может это и супертяжёлый – всё зависит от ограничений вашей палитры) и его разрешение составляет примерно 150 на 115 пикселей. Вот теперь уже можете открыть пиво!

Прогресс целиком:

Это всегда забавно. Вот гифка, демонстрирующая эволюцию нашего спрайта.

Советы для начинающих пиксель артистов

1. Изучайте азы искусства и практикуйте традиционные техники. Все знания и умения, необходимые для черчения и рисования можно применить и в пикселинге.
2. Начинайте с маленьких спрайтов. Самое сложно – научиться размещать множество деталей, используя минимальное количество пикселей, чтобы не делать такие большие спрайты, как мой.
3. Изучайте работы художников, которыми вы восхищаетесь и не бойтесь быть неоригинальными. Лучший способ обучения – повторение фрагментов чужих работ. На выработку собственного стиля уходит немало времени.
4. Если у вас нет планшета, купить его. Постоянные нервные срывы и стрессы, вызванные непрерывным кликанием левой кнопкой мышки – это не забавно, да и вряд ли впечатлит представителей противоположного пола. Я использую небольшой Wacom Graphire2 – мне нравится его компактность и портативность. Вам, возможно, придётся по душе более крупный планшет. Перед покупкой, проведите небольшой тест-драйв.
5. Делитесь своими работами с другими, чтобы узнать их мнение. Это, возможно, также будет неплохим способом найти новых друзей-гиков.

P.S.

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

Pixel art для начинающих. Введение.

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

Но для начала немного истории (не переносите длинных вступлений? Смело пропускаете два-три абзаца).

 1. История (очень коротко).

 

 

Pixel art (пишется без дефиса) или пиксельная графика – направление цифрового искусства, которое заключается в создании изображений на уровне пикселя (т. е. минимальной логической единицы, из которой состоит изображение). Далеко не все растровые картинки являются пиксель артом, хотя все они и состоят из пикселей. Почему? Потому что в конечном счёте понятие pixel art вмещает в себя не столько результат, сколько процесс создания иллюстрации. Пиксель за пикселем, и только так. Если вы возьмёте цифровое фото, сильно его уменьшите (так, чтобы пиксели стали видны) и заявите что нарисовали его с нуля – это будет настоящий подлог. Хотя наверняка найдутся наивные простаки, которые вас похвалят за кропотливый труд.

 

Сейчас неизвестно, когда точно зародилась эта техника, корни теряются где-то в начале 1970-х. Однако приём составления изображений из малых элементов восходит к куда более древним формам искусства, таким как мозаика, вышивание крестиком, ковроплетение и бисероплетение. Само же словосочетание «pixel art» как определение пиксельной графики впервые было использовано в статье Адель Голдберг и Роберта Флегала в журнале Communications of the ACM (декабрь 1982-го).

Наиболее широкое прикладное применение pixel art получил в компьютерных играх, что неудивительно – он позволял создавать изображения, нетребовательные к ресурсам и выглядящие при этом по-настоящему красиво (при этом отнимающие у художника немало времени и требовавшие определённых навыков, а потому подразумевающие хорошую оплату труда). Расцветом, наивысшей точкой в развитии официально называют видеоигры на приставках 2-го и 3-го поколения (начало 1990-х). Дальнейший прогресс технологий, появление сперва 8-битного цвета, а затем и True Color, развитие трёхмерной графики – всё это со временем оттеснило pixel art на второй и третий планы, а потом и вовсе стало казаться, что пиксельной графике пришёл конец.

Как ни странно, но именно господин Научно-технический прогресс, задвинувший в середине 90-х пиксельную графику на последние позиции, и вернул её позже в игру – явив миру мобильные устройства в виде сотовых телефонов и КПК. Ведь каким бы полезным ни был новомодный дивайс, мы-то с вами знаем – если на нём нельзя хотя бы разложить пасьянс, грош ему цена. Ну а там где есть экран с невысоким разрешением, там и pixel art. Как говорится, добро пожаловать назад.

 

Разумеется, свою роль в возвращении пиксельной графики сыграли различные ретроградно настроенные элементы, любящие поностальжировать над старыми-добрыми играми детства, приговаривая при этом: «Эх, теперь такого не делают»; эстеты, способные оценить красоту пиксель арта, и инди-разработчики, не воспринимающие современные графические красоты (а иногда, правда редко, элементарно не умеющие их реализовать в собственных проектах), оттого и ваяющие pixel art. Но давайте всё-таки не будем сбрасывать со счетов сугубо коммерческие проекты – приложения для мобильных устройств, рекламу и web-дизайн.

 

Так что сейчас pixel art, что называется, широко распространён в узких кругах и заработал себе своеобразный статус искусства «не для всех». И это несмотря на то, что для простого обывателя он предельно доступен, ведь чтобы работать в этой технике, достаточно иметь под рукой компьютер и простейший графический редактор! (умение рисовать, между прочим, тоже не помешает) Хватит слов, ближе к делу!

 

2. Инструменты.

Что нужно для создания пиксель арта? Как сказал выше, достаточно компьютера и любого графического редактора, способного работать на уровне пикселей. Рисовать можно где угодно, хоть на Game Boy, хоть на Nintendo DS, хоть в Microsoft Paint (другое дело, что рисовать в последнем крайне неудобно). Есть великое множество растровых редакторов, многие из них бесплатны и достаточно функциональны, так что с программным обеспечением каждый может определится самостоятельно.

 

Я рисую в Adobe Photoshop, потому что удобно и потому что давно. Не стану врать и рассказывать, шамкая вставной челюстью, что де «Я помню Фотошоп был еще са-а-авсем маленьким, это было на Макинтоше, и был он с номером 1.0» Такого не было. Но я помню Фотошоп 4.0 (и также на Маке). А потому для меня вопрос выбора никогда не стоял. И потому нет-нет, но я буду давать рекомендации касательно Photoshop, особенно там, где его возможности помогут значительно упростить творчество.

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

 

Начнём? Вы наверное ждёте списка каких-то секретных приёмов, рекомендаций, которые научат вас рисовать pixel art? А правда в том, что ничего такого по большому счёту нет. Единственный способ научиться рисовать пиксельную графику – это рисовать самому, пробовать, пытаться, не бояться и экспериментировать. Не стесняйтесь повторять чужие работы, не бойтесь показаться неоригинальным (просто не выдавайте чужое за своё, хе-хе). Внимательно и вдумчиво анализируйте работы мастеров (не мои) и рисуйте, рисуйте, рисуйте. Несколько полезных ссылок вас ждёт в конце статьи.

 3. Общие принципы.

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

Самым основной принцип можно сформулировать так: минимальной единицей изображения является пиксель, и по возможности все элементы композиции должны быть соразмерны ему. Расшифрую: всё, что вы нарисуете, состоит из пикселей, и пиксель должен читаться во всём. Это не значит, что в рисунке вообще не может быть элементов, к примеру, 2х2 пикселя, или 3х3. Но строить изображение всё же предпочтительно из отдельных пикселей.

Для наглядности приведу несколько примеров с типичными ошибками и вариантами их исправления:

Ноги у человечка лучше выглядеть не стали, это верно, к ногам еще вернёмся. В качестве примера «из жизни» приведу онлайновый паззл Zoo keeper:

 

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

 

Из этого принципа можно вывести простое правило: обводка и вообще все линии рисунка должны быть толщиной в один пиксель (за редким исключением).

Я вовсе не утверждаю, что это неправильно. Но это всё же не очень красиво. А чтобы было красиво, запомним еще одно правило: рисовать без изломов, скруглять плавно. Есть такое понятие как изломы – фрагменты, выбивающиеся из общего порядка, они придают линиям неровный, зазубренный вид (в англоговорящей среде пиксельных художников их называют jaggies):

Изломы лишают рисунок естественной плавности и красоты. И если фрагменты 3, 4 и 5 очевидны и исправляются легко, с прочими дело обстоит сложнее – там нарушена длина одного-единственного кусочка в цепи, казалось бы мелочь, но мелочь заметная. Чтобы научиться видеть такие места и избегать их, требуется небольшая практика. Излом 1 выбивается из линии, потому что это единичный пиксель – в то время как на участке, где он затесался, линия состоит из сегментов по 2 пикселя. Чтобы избавиться от него, я смягчил вход кривой в изгиб, удлинив верхний сегмент до 3-х пикселей, и перерисовал всю линию сегментами по 2 пикселя. Изломы 2 и 6 идентичны друг другу – это уже фрагменты длиной 2 пикселя на участках, построенных единичными пикселями.

Избежать подобных изломов при рисовании поможет элементарный набор примеров наклонных прямых, который можно встретить практически в каждом руководстве по пиксельной графике (моё не исключение):

Как видите, прямая линия составляется из отрезков одинаковой длины, смещаемых по мере её прорисовки на один пиксель – только таким образом достигается эффект линейности. Наиболее распространённые способы построения с длиной отрезка 1, 2 и 4 пикселя (встречаются и другие, но представленных вариантов должно хватить для реализации практически любой художественной задумки). Из этих трёх самым популярным можно уверенно назвать длину отрезка в 2 пикселя: рисуем отрезок, сдвигаем перо на 1 пиксель, рисуем еще один отрезок, сдвигаем перо на 1 пиксель, рисуем еще отрезок:

Несложно, верно? Нужна лишь привычка. Умение рисовать наклонные прямые с шагом в 2 пикселя поможет в изометрии, так что подробнее остановимся на ней в следующий раз. Вообще прямые линии это здорово – но только до тех пор, пока не встанет задача нарисовать что-нибудь нерукотворное. Тут нам понадобятся кривые, и много самых разных кривых. И берём на вооружение простое правило закругления кривых линий: длина элементов кривой должна уменьшаться/увеличиваться постепенно.

Выход из прямой на скругление ведётся плавно, я обозначил длину каждого сегмента: 5 пикселей, 3, 2, 2, 1, 1, снова 2 (уже вертикально), 3, 5 и далее. Не обязательно ваш случай будет использовать такую же последовательность, здесь всё зависит от плавности, которая требуется. Еще пример скругления:

Опять же, избегаем изломов, которые так портят картинку. Если есть желание проверить усвоенный материал, здесь у меня нарисованный неизвестным автором skin для Winamp’а, заготовка:

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

4.1. Рисуем склянку с живой водой.

1. Форма объекта, пока можно не использовать цвет.

2. Красная жидкость.

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

4. Добавляем белые блики на пузырьке, и тень шириной 1 пиксель тёмно-красного цвета на приграничных к стенкам пузырька областях жидкости. Смотрится вроде неплохо, а?

5. Аналогично рисуем склянку с синей жидкостью – здесь тот же цвет стекла, плюс три оттенка синего для жидкости.

4.2. Рисуем арбуз.

1. Нарисуем круг и полукруг – это будут арбуз и вырезанная долька.

2. Обозначим вырез на самом арбузе, а на дольке – границу между корочкой и мякотью.

3. Заливка. Цвета из палитры, средний оттенок зелёного – цвет корки, средний красный – цвет мякоти.

4. Обозначим переходный участок от корки к мякоти.

5. Светлые полосы на арбузе (наконец-то он похож сам на себя). И конечно – семечки! Если скрестить арбуз с тараканами, будут расползаться сами.

6. Доводим до ума. Бледно-розовый цвет используем для обозначения бликов над семечками в разрезе, и, выкладывая пиксели в шахматном порядке, добиваемся от вырезанной дольки некоего подобия объёма (метод называется dithering, о нём позже). Тёмный красный оттенок используем, чтобы обозначить затенённые места в разрезе арбуза, и тёмно-зелёный (опять же пиксели в шахматном порядке) – чтобы придать объём самому арбузу.

5. Dithering.

Дизеринг, или смешивание – техника перемешивания определённо упорядоченным (не всегда) образом пикселей в двух граничащих областях разного цвета. Самый простой, распространённый и эффективный способ – чередовать пиксели в шахматном порядке:

Приём появился на свет благодаря (или скорее вопреки) техническим ограничениям – на платформах с ограниченными палитрами дизеринг позволял, замешивая пиксели двух разных цветов, получить третий, отсутствующий в палитре:

 

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

 

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

Еще два варианта дизеринга:

 

Что нужно знать про дизеринг, чтобы уметь им пользоваться. Минимальная ширина зоны смешивания должна быть не меньше 2-х пикселей (те самые шашечки). Больше – можно. Меньше лучше не делать.

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

Ну, хватит теории. Предлагаю еще немного попрактиковаться.

6.1. Рисуем меч.

Такой несерьёзный меч для несерьёзного проекта:

1. Форма. Здесь всё просто.

2. Начинаем распределять цвет. Я изменил изначально чёрный на цвет тёмной стали (хочется верить, что похожий) и залил меч серым.

3. Придаём форму за счёт светотени и дополнительной расцветки (обратите внимание – я кое-где повторно изменил цвет обводки, сделав его еще светлее). Условимся, что свет на меч падает слева-сверху, из-за плеча наблюдающего, поэтому блики (наиболее светлые участки освещённых поверхностей) располагаются на выступающих элементах слева, тени – справа и снизу.

4. Доводим наш миниатюрный шедевр до совершенства. Усиливаем эффект объёма на яблоке и сферических элементах крестовины (левый и правый «шарики»), на обмотке рукояти. Обратите внимание на длинную полосу, идущую по лезвию – дол (некоторые называют его кровотоком, полагая, что он служит для стекания крови проткнутого врага). Название здесь неважно, суть в том, что это жёлоб и центральная его часть освещена меньше всего, в то время как края наоборот. Справа от дола, чтобы усилить эффект глубины, я обозначил чёткий блик (никогда нелишне хорошенько изучить объект, который вы собираетесь изобразить – не для того чтобы сыпать терминами, а чтобы иметь чёткое представление об устройстве и особенностях конструкции). Вроде получился довольно симпатичный меч, а?

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

6.2. Робот.

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

Теперь чистка, стираю лишние пиксели и дорисовываю недостающие:

Закругление согласно простому правилу плавности, все прямые линейные. Добавляю ноги:

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

Дополнительный элемент в виде панели на груди и трёх… лампочек? Не знаю, пока не решил. Но понял, что хочу сделать торс робота телескопическим, как раскладной стаканчик, поэтому пришлось слегка откорректировать линию изгиба, добавив небольшие но заметные зазоры на стыке сегментов. Теперь заливка!

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

Тень накладываю в 2 этапа, сперва самую тёмную, участком шириной максимум 3-4 пикселя (т. е. от линии обводки вглубь объекта, в данном случае, тень занимает область шириной 3, самое большое 4 пикселя. Это не закономерность, цифры запоминать не нужно, для другого предмета с другим освещением, другим материалом и другим настроением тень наверняка ляжет иначе). Далее более светлая тень, так же как и основная плавно сходящая на нет. Обратите внимание, на закруглённых участках груди тень кое-где лежит совсем небольшими фрагментами, по одному пикселю – это также придаст рисунку больше плавности.

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

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

Теперь блики на поверхностях, которые должны отразить свет от источника прямо в глаза наблюдателю (художнику):

Хм, совсем другое дело. Даже прямоугольники-ножки выглядят как цилиндры! Я решил, что три кружка на груди могучего робота будут ракетницами, закрытыми люками, так что это по сути небольшие углубления; тень от левой кромки и блик по правой (и нижней).

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

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

Если внимательно рассмотреть заклёпки-зубы, видно, что это всего лишь фрагменты 2 на 2 пикселя, верхний левый окрашен в цвет бликов, два соседних с ним – цвет светлой тени, и правый нижний – цвет основной тени. Просто, да? При этом даже несмотря на то, что в некоторых местах пиксели заклёпок совпадают с цветом соседних точек, при отдалении (уменьшении масштаба рисунка до 100 или 200%) сохраняется полное впечатление того, что это выделяющиеся объекты. Еще в палитре появился дополнительный близкий к чёрному оттенок – я решил с его помощью сделать темнее суставы на ногах, и замешать в шахматном порядке пиксели в суставы на руках. Чистый чёрный я попробовал, тень получалась неестественной, а дизеринг с самым тёмным оттенком дал нужный эффект.

Ну и самый последний штрих, мне кажется, левая рука расположена не очень удачно – вырезаю её и сдвигаю вниз и влево. Вот так, кажется, самое то:

WIP, тот самый Work in Progress:

---

Собственно, на сегодня это всё. В следующий раз разберём изометрические построения, ну а напоследок несколько полезных ссылок:

Юрий Гусев aka Fool
http://www.foolstown.com/
http://fool.deviantart.com/

Алексей Гаркушин aka gas13
http://gas13.ru/ 
http://gas13.deviantart.com/

Дизайн-группа eBoy
http://hello.eboy.com/eboy/category/everything/explore/parts/

Henk Nieborg (Голландия)
http://www.henknieborg.nl/

Gary J Lucken (Великобритания)
http://www.armyoftrolls.co.uk/

Kenneth Fejer…
http://www.kennethfejer.com/

…и один из его замечательных проектов – ISOSITY
http://www.kennethfejer.com/isocity/

Agnes Heyer aka Arachne (Норвегия)
http://www.retinaleclipse.com/

Borek Bures (Чехия)
http://www.spiv.cz/index.html

The Spriters Resource – хранилище спрайтов из игр
http://spriters-resource.com/

Пиксель арты по клеточкам — 58 фото

Пиксельный арт

Пиксельная природа

Обои из пикселей

Пиксельные фигуры

Пиксель арт как нарисовать кровь

Пиксель арт

Pixel арты

Сур пиксель арт

Пиксель разноцветные клеточки

Санс Undertale Пацифист

Рисунки в клетку крутые

Природа в стиле пиксель арт

Пиксельные рисунки

Крутые рисунки по клеточкам

Смешные пиксели

Атмосферные пиксель арты

Пиксель арт Звездные войны

Пиксельное рисование

Пиксель арт

Кепка пиксель арт

Китти пиксели

Рисование по клеточкам в тетради джойстик

Пиксель арт покемона шайни

Панельки пиксель арт

Рисунки по клеточкам фломастерами

Разбойник пиксель арт

Рисунки фломастером по пикселям

Пикачу из пикселей

Пиксель арт 24×24

Лягушка по клеткам

Рисунки по клеточкам в тетради цветные

Рисунки по клеточкам пиксель

Арт в клеточках тетради пиксель

Пиксельные рисунки

Пиксель арт разнообразие

FNAF Pixel Art схемы

Новогодние Рождественские пиксельные рисунки

Mario Pixel обои

Человек распадается на пиксели, арт

Пиксельные картинки на обои

Пиксель арт Джейк

Яичница по клеточкам

Рисунки по клеточкам андроид

Пиксель арт легкий

Пиксель арт покемона Фларион

Pixel Studio для пиксель арта

Pixel Studio — это новый пиксель-арт редактор для художников и разработчиков. Простой, быстрый и удобный. Не имеет значения, новичок вы или профессионал. Создавайте потрясающий пиксель-арт когда угодно и где угодно! Тут можно работать со слоями и анимацией, а также тут есть куча полезных инструментов — все, что вам потребуется для создания крутых проектов. Используйте Google Drive, чтобы синхронизировать свою работу между разными устройствами и даже разными платформами! Присоединяйтесь к Pixel Network™ — нашему новому пиксель-арт сообществу! Не раздумывайте, просто попробуйте Pixel Studio и убедитесь, что вы выбрали самый лучший пиксель-арт редактор! Более 2.000.000 загрузок по всему миру, переведено на 23 языка!

Основные особенности:
• Очень простой, интуитивный и дружелюбный интерфейс
• Творите на мобильных устройствах и синхронизируйтесь с ПК через Google Drive
• Используйте слои для продвинутого пиксель-арта
• Создавайте покадровую анимацию
• Сохраняйте анимацию как GIF, спрайт-листы или просто как последовательность PNG-файлов
• Делитесь своими работами с друзьями и сообществом Pixel Network™
• Создавайте свои палитры, используйте встроенные или загружайте прямо с Lospec
• Профессиональный выбор цвета в режиме RGBA или HSV
• Простое масштабирование и перемещение с помощью жестов или джойстиков
• Вертикальный режим для мобильных устройств и горизонтальный для планшетов и ПК
• Настраиваемая панель инструментов и много других настроек
• Мы поддерживаем Samsung S-Pen и Apple Pencil!
• Мы поддерживаем самые популярные форматы: PNG, JPG, GIF, PSP (Pixel Studio Project), ASE (Aseprite)
• Автосохранение и бэкап — вы не потеряете свою работу!
• Раскройте для себя много новых инструментов и других фишек!

Дополнительные функции:
• Темная тема
• Рисование примитивов
• Рисование градиентов
• Встроенные и пользовательские кисти
• Библиотека спрайтов для ваших заготовок и наработок
• Режим плитки для создания бесшовных текстур
• Режим плитки для кистей
• Симметричное рисование (X, Y, X+Y)
• Точное рисование с помощью курсора (Dot Pen)
• Текст и разные шрифты
• Дизеринг-карандаш для создания теней и бликов
• Вращение пиксель-арта с помощью нашего собственного алгоритма Fast RotSprite
• Onion Skin для продвинутой анимации
• Можно применять палитры к изображениям
• Можно захватывать палитры из изображений
• Мини-карта и Pixel Perfect превью
• Неограниченный размер холста
• Изменение размеров, кадрирование и вращение холста
• Настраиваемый цвет фона
• Настраиваемая сетка
• Многопоточная обработка изображений
• Поддержка палитр в формате JASC Palette (PAL)

Системные требования:
• 2GB+ оперативной памяти для больших проектов и анимаций
• Мощный процессор (100.000+ очков в AnTuTu)

Вступайте в наше сообщество, там будет много интересного! https://vk.com/pixelstudio_app

Демонстрационные изображения, созданные lorddkno, Redshrike, Calciumtrice, Buch, Tomoe Mami используются по лицензии CC BY 3.0.

Explore — Галерея Pixel Art

• Начать рисование
• Комиксы
• Галерея
• маг.

• Начать рисование
• Дом
• Галерея
• Цифровое искусство
• испытаний
• Конкурсы
• Группы
• Онлайн
• Комиксы
• Палитры
• запросов
• Форумы
• маг.

• Учебники
• Темы
• События
• Помощь
• О
• Свяжитесь с нами
• Мобильное приложение
• Родители и учителя
• Политика конфиденциальности
• Условия эксплуатации
• Поиск заказа в магазине
• Авторское право 2021 Pixilart, LLC

• Исследовать
• Темы
• Выделено
• В тренде
• Популярный
• Выбор персонала
• Рекомендуемые

Трендовые теги # downgraded2021 #испытание # Коллаб #основание #гордость #oc #Я НЕ ЗНАЮ #милый #FNF #undertale # Oil2021 #Изобразительное искусство # Eclipse2021 #sans #Смешной #gif #аниме #fnaf # Пиксиларт # пушистый # Мем #запрос #конкурс #скучающий # Олимпиада #Прохладный #анимация #undertaleau #wip #Среди нас # Гача # сотрудничество #что-то #e #Кот # Космический корабль Сейчас в тренде

Картинка дня

Эй, эй, слушай

Выделенное искусство Показать больше Художественные темы Показать больше Выбор персонала Популярные комиксы Показать больше Традиционное и цифровое искусство Показать больше

Pixel Art Maker

Это простой онлайн-редактор пиксельной графики, который поможет вам легко создавать пиксельную графику. Pixel Art Maker (PAM) разработан для начинающих и профессионалов, которые просто хотят что-то придумать и поделиться этим с друзьями. Если вам нравится создавать пиксель-арт и вам нужно подобное онлайн-приложение для рисования, то, надеюсь, оно оправдает ваши ожидания.

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

Make Pixel Art Online: без загрузки!

Вы, наверное, наткнулись на это онлайн-приложение, пытаясь найти бесплатный редактор пикселей, который позволит вам легко рисовать пиксель-арт бесплатно.Этот создатель пиксельной графики позволяет вам делать именно это. Вы можете сразу приступить к рисованию своих любимых персонажей, таких как Марио, Гоку, Бэтмен и Соник.

В Интернете есть еще несколько программ для пиксельной графики, но они в основном используют Flash, а не JavaScript. Этот инструмент использует HTML5 и JavaScript, поэтому вам не нужны плагины. В любом случае стоит выполнить поиск в Google, чтобы проверить другие инструменты пиксельной графики, поскольку они могут лучше соответствовать вашим потребностям.

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

Pixel Art Editor: создавайте и используйте шаблоны!

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

История пиксельных артов

Пиксельное искусство, как оно известно сегодня, восходит к 1972 году, когда Ричард Шуп написал SuperPaint с помощью программного обеспечения Xerox PARC. Тем не менее, концепция пиксельного искусства может восходить к тысячам лет назад с традиционными формами искусства, такими как вышивка крестиком (или, в более общем смысле, вышивка счетными нитками), в которой используются небольшие элементы, которые могут быть заполнены ниткой для создания рисунка или «рисунка». своего рода. Стиль рисования, известный как «пуантилизм», также очень похож на пиксельное искусство.

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

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

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

Создатели Pixel Art

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

Pixel Art — Раскраска по номерам в App Store

Мне очень нравится это приложение.Раскрашивать картинки очень расслабляюще и почти по-дзенски. И мне нравится, что есть так много фотографий на выбор и что всегда добавляются новые. НО . . . реклама довольно раздражает. В основном потому, что их так много. Я получаю 1 каждый раз, когда открываю изображение, независимо от того, помечено оно как «Премиум» или нет (серьезно, в чем разница между ними?), И 1 каждый раз, когда я заканчиваю. Плюс каждый раз, когда я просто хочу вернуться в главное меню, а затем, когда я случайно нажимаю кнопку «Готово» в середине раскраски, что слишком легко сделать.Так что если я делаю кучу простых подряд, я смотрю только рекламу за рекламой. Я понимаю, что вам нужно зарабатывать деньги, но было бы здорово, если бы минимальный промежуток времени между объявлениями. И если бы у вас была однократная плата за избавление от рекламы, я бы оплатил ее в мгновение ока. Я отказываюсь платить ежемесячную подписку на любое приложение.

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

В целом, хорошее приложение, которое было бы здорово после нескольких обновлений.

Привет! Благодарим вас за то, что вы поделились этим с нами. Мы понимаем вас и знаем, что вы чувствуете. Но, как вы знаете, наше приложение полностью бесплатное.И нам нужно поддерживать приложение, оптимизировать его для пользователей и улучшать. Вот почему существует реклама. Если вы хотите играть без рекламы, вы всегда можете оформить подписку.
В последней версии мы улучшили дизайн. Пожалуйста, обновите приложение.
Если у вас есть другие вопросы, дайте нам знать, и мы будем рады помочь!

Пиксель-арт: 31 ретро-пример

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

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

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

01. Рыцари Сидонии. Автор Йохан Аронсон.

Культовый японский комикс и анимация вдохновили на создание этого классного пиксельного искусства. (Изображение предоставлено Йоханом Аронсоном). -классная 2D пиксельная графика.Это привлекательное произведение искусства отдает дань уважения рыцарям Сидонии, новаторской серии манги о космической опере, созданной Цутому Нихей, которая породила аниме-сериал, который привлек внимание поклонников в сообществе разработчиков игр.

02. Пейзаж от Jubilee

Этот потрясающий пейзаж был вдохновлен Studio Ghibli (Изображение предоставлено: Jubilee)

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

03. Храм в джунглях Рихарда Шмидбауэра

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

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

04. Пиксельные горы Китая. Автор: Матей Ян.

Ян говорит, что в его пиксельной графике искусство на первом месте, пиксели на втором месте (Изображение предоставлено: Матей Ян)

Матей Ян начал рисовать в цифровом виде на своем компьютере ZX Spectrum в 1990-х годах. и теперь редактирует блог, посвященный пиксельной графике, под названием Retronator. Его собственные работы варьируются от изображений, наполненных остроумными отсылками к поп-культуре, до детализированных пейзажей, которые доводят среду до предела, таких как эти восхитительные пиксельные горы Китая.

05.The Witness by Pixel Джефф

The Witness основан на сериале Netflix «Любовь, смерть и роботы»

Пиксель Джефф — профессиональный пиксельный художник из Тайваня, чье портфолио разнообразно и ярко, от городских пейзажей до принцесс Диснея. The Witness — это дань уважения сериалу Netflix «Любовь, смерть и роботы» в стиле пиксель-арта, в котором чувствуется остросюжетная видеоигра, в которую нам не терпится поиграть!

06. Корпорации Кенз Ви Хон Минг

Пиксельное искусство в его самой атмосферной и запутанной форме

Внештатный иллюстратор из Сингапура Кенз Ви Хон Минг имеет впечатляющее портфолио работ на своей странице на Behance.Вдохновленный искусством Ромена Тристрама, его искусство сосредоточено в разных местах по всему миру.

07. Pixel Art TV от Густаво Визельнера

Новое представление о странных вещах в виде пиксельной графики

Густаво Визельнер — израильский пиксельный художник, и в его серии Pixel Art TV запечатлены ключевые сцены классических телешоу, сопровождаемые цитатами из диалогов. Очаровательный сериал охватывает целый ряд жанров, от современных шоу, таких как Игра престолов, Во все тяжкие и Очень странные дела, до старых фаворитов, таких как «Друзья» и «Свежий принц Бель-Эйр».

08. Emotive Pixels от Prateek Vatash

Дизайн Vatash выводит пиксельную графику в новое измерение

Этот прекрасный геометрический дизайн является частью текущего проекта индийского графического дизайнера Prateek Vatash. Здесь Vatash выводит пиксельную графику на новое измерение, переходя от плоских пикселей к одноцветным кубам, сохраняя при этом ощущение ретро.

09. Pixel Britain by Holiday Cottages

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

10. Пикселомика

Душан Чежек — чешский художник-пиксельщик, за плечами которого несколько суперпопулярных 8-битных пиксельных проектов. Приведенный выше GIF взят из его коллекции супергероев Pixelomics, и довольно удивительно, сколько пикселей ему нужно, чтобы сделать его персонажей мгновенно узнаваемыми.

11. Темная сторона, Роман Гонзо

Противостояние злодеев из «Звездных войн», которое мы все хотели бы видеть, в пиксельной форме

Украинский аниматор Роман Гонзо заработал репутацию создателя превосходного пиксельного искусства, который он создает используя Photoshop на своем Wacom.На этом изображении запечатлены стилизованные версии злодеев из «Звездных войн» Дарта Мола, Джанго Фетта и Дарта Вейдера.

12. Street Fashion Fighter от Joojaebum

Street Fashion Fighter сочетает знаменитую моду с аркадной перфорацией

Южнокорейский дизайнер Джуджэбом впервые привлек наше внимание великолепным взглядом на классическую аркадную игру Street Fighter 2. В своих последующих проектах Street Fashion Fighter, художник украсил главных героев игры образом современных знаменитостей, включая Дрейка, Канье Уэста и Фаррелла Уильямса.

13. Введение в пиксельное искусство от Мишко

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

Неван Дойл, также известный как Мишко, видеооператор, графический дизайнер и фотограф из Орегона, специализирующийся на привлекательных абстрактных рисунках со случайными прикосновение крутого глюка. Его Intro to Pixel Art смешивает пиксельные техники с глюками, гранджем и визуальной обратной связью для получения потрясающего эффекта.

14. Science Kombat, Диего Санчес

Диего Санчес — бразильский иллюстратор из Сан-Паулу, который хорошо разбирается в пиксельной графике.Нам особенно нравятся эти анимации, которые он создал для Science Kombat, браузерной игры жанра beat-em-up для журнала Superinteressante. В нем участвуют восемь игровых ученых, включая Альберта Эйнштейна, Чарльза Дарвина, Мари Кюри и сэра Исаака Ньютона, у каждого из которых есть свои основные и специальные атаки.

15. Моана, Pixel Jeff

Нам так нравится работа Pixel Jeff, что мы не можем ограничиться одной записью в этом списке. Итак, вот его красочный взгляд на «Моану» Диснея, красиво переосмысленную как видеоигру, которую мы хотели бы действительно планировать.Прокрутите его сообщение в блоге, и вы увидите другие забавные варианты блокбастеров.

16. Bopping Pixels, Ян Диксон

Вы когда-нибудь задумывались, как бы выглядели ваши любимые персонажи, если бы они были уменьшены до пикселей и подпрыгивали вверх и вниз? Неудивительно, ведь пиксельный иллюстратор и создатель GIF Айвен Диксон обратил свое внимание на всех, от принца Джеффри до Олова Тина в своем странно завораживающем проекте Bopping Pixels.

17. «Звездные войны», Густаво Визельнер

«Звездные войны. Эпизод IV: Новая надежда» в пиксельной графике

Еще одна замечательная работа Густаво Визельнера, это одна из его многочисленных дань уважения далекой-далекой галактике.Мнения по поводу некоторых приквелов и сиквелов могут расходиться, но каждый фанат «Звездных войн» может заглянуть за эту сцену из оригинального фильма 1977 года, поскольку Оби-Ван обучает Люка и Чуи и C-3PO игре в голографические шахматы.

18. Pixel Dailies от Бена Портера

One 365 пиксельных произведений искусства были созданы в рамках этого годичного проекта

Разработчик игр Бен Портер настолько любит пиксельное искусство, что он основал Pixel Dailies, онлайн-клуб для пиксельного искусства. Каждый день он твитнул какую-то тему, и другие участвовали в создании иллюстраций на эту тему.Он поддерживал это в течение целого года, и результаты все еще можно увидеть в специальной учетной записи Twitter.

19. Bugroid от Nasc

Полу-ошибка, полу-андроид, все мило

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

20. Night by Waneella

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

21. Pixel Pour Келло Гоеллер

Работа Геллера переносит искусство пикселя в реальный мир

В своем проекте Pixel Pour визуальный художник из Портленда Келло Геллер взяла концепцию пикселя и умело переработала ее. реальный мир. Ее плавные пиксели были установлены по всему городу, предлагая горожанам игровой визуальный и воображаемый контекст, объединяющий оба мира.

22. Fine Pixel Art от Джона О’Хирна

Художник Джон О’Хирн работает с крошечными элементами для создания впечатляющих работ в натуральную величину, используя потенциал цвета, элементов и иллюзий. Его видео Fine Pixel Art, показанное выше, является прекрасным примером его творческого гения.

23. Стив Джобс, Метин Севен

Работа Сивена сочетает пиксельную графику с трехмерными элементами

Работа Метина Севена сочетает в себе дизайн и пиксельную графику с трехмерными элементами, что дает динамичный и детальный результат.Это изображение переосмысления Стива Джобса — удивительно привлекательный пример того, на что он способен.

24. Коврик от Cristian Zuzunaga

Cristian Zuzunaga новаторски играет с пикселями

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

25. Фреска Talk to Me в MoMA

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

Еще в 2011 году MoMA использовала простые квадратные комбинации для создания ярких и интересных рисунков фрески, основанных на объектах своей выставки Talk Мне.Благодаря иконкам, созданным ЮИн Чо и Сэмюэлем Шерманом, в этом дизайне есть динамичное ощущение, которое действительно вдохновило посетителей увидеть главное событие.

26. Значок мыши от Бена Фино-Радина

Бен Фино-Радин показывает, как пиксели могут вдохновлять и стимулировать различные области дизайна

Это произведение дизайна в натуральную величину, вышитое вручную нью-йоркским художником Беном Фино- Radin является частью коллекции, которая исследует идеи размера и формы с помощью значков мыши в натуральную величину.

27.Quetzalcóoatl, Mario Sifuentes

Марио Sifuentes использует пиксельную графику для создания своей собственной интерпретации доиспанского бога

Мексиканский дизайнер Марио Sifuentes создал эту интересную и красивую интерпретацию Quetzalcóoatl, доиспанского бога. Вдохновленный визуальным стилем видеоигр 1990-х годов, эта игра использует упрощенные элементы и создает нечто довольно сложное и волшебное.

28. Берлинский плакат от Eboy

Типичная работа Эбоя, крестных отцов пиксельной графики

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

29. Pixel Art Land, автор Гэри Лакен

Пиксельная графика Гэри Лаккена вдохновлена ​​видеоиграми и не только.

Британский энтузиаст и художник видеоигр Гэри Джей Лакен находится под влиянием японских игрушек, старых 2D-видеоигр и поп-культуры. Его блог Army of Trolls полон его запоминающихся и волшебных работ в стиле пиксель-арт.

30. CGA Faces от Свена Рутнера

Свен Рутнер оттачивает свое внимание ограниченной цветовой палитрой

Базирующийся в Германии независимый художник-пиксельщик Свен Рутнер получил международное признание за свои пиксельные работы.Он известен тем, что использует ограниченные цветовые палитры, похожие на предложения ранних домашних компьютеров, таких как ZX Spectrum. Это изделие было создано с использованием всего 16 цветов.

31. Робинсон Нердо, Тим Уэсоли

Персонажи пиксельной графики Тима Уэсоли красиво самобытны

Тим Уэсоли — ведущий разработчик 3D-моделировщика пиксельных изображений Qubicle. Когда он не работает над своим программным обеспечением, он тратит время на создание пиксельной графики, такой как этот крутой персонаж Робинзона Нердо. Иллюстрация обманчиво сложна; вы обнаружите, что замечаете что-то новое каждый раз, когда смотрите на него.

Части этой статьи изначально были опубликованы в журнале ImagineFX ; подпишитесь здесь .

Статьи по теме:

Miniboss • Уроки по пиксельной графике

Уроки по пиксельному искусству

Вот все уроки по пиксельной графике, созданные Pedro : D

Подробнее на его странице Patreon !

Статья № 8: Сохранение и экспорт пиксель-арта

Статья № 7: Работа с линиями

# 79 Прыжки

9014 Базовая статья Теория цвета

# 78 Impact

Артикул 5 Базовая заливка

Артикул 4 Сглаживающий сглаживание и бинты 14 9014 901 901 Трюки сверху вниз

# 76 Анимация атаки сверху вниз

# 75 Изометрический — часть 1

# 74 Цикл ходьбы сверху вниз

Статья № 3 Базовая анимация Aseprite

Статья № 2 Скетч кластера g and paiting

Статья # 1 Как начать создавать пиксель-арт

# 73 Мечи

# 72 Дерево

14

Изменение размера

# 70 Техника освещения

# 69 Самоцветы

# 68 Дизайн огнестрельного оружия

67132

9014

# 66 Защитить / принять удар

# 65 Дома сверху вниз

# 64 Ice

# 63 Космические корабли

/ Приборная панель

# 61 Настенная направляющая / ножка

# 60 Современное / в помещении 9013 4

# 59 Death / take hit

# 58 Песок / пустыня

# 57 Растительность (часть 3)

# 56 Cuten

# 55 Модульная анимация

# 54 Разрушение объектов

# 53 Тьма

# 52 UI: 9-срез 9014 901 901 51 1-битный

# 50 Wind

# 49 Пробел / звезды

# 48 Цикл ходьбы

9018 901 901

# 46 Шаг / рысь четвероногих

# 45 Затенение

# 44 Облака

# 43 Опасности для окружающей среды

# 42 Ткань / флажки

# 41 Кровь и кишки

9014 9014 9014 9014 9014 9014 9014 9014 9014 9014

# 39 Символ простаивает

# 38 Пули

# 37 Металлы

# 36 Сжатие и растяжение 44

901

# 34 Городские фоны

# 33 Основы пиксель-арта — часть 2

# 32 Учебник по растительности — часть 2

32

# 30 Жидкости / слизь

# 29 Крылья / Обучение полету

# 28 Эффекты магии света

# 27 Портреты

# 26 Эффекты темной магии

# 25 Учебное пособие по движению космического корабля

2 #

# 23 Процесс пиксельной графики

Чтение текста с таймером немного напряженно, поэтому я добавил статические кадры из этого урока:

# 22 Сглаживание анимации

# 21 Уловки рендеринга

# 20 Параллакс и глубина

14

# 18 Взрывы — часть 1

# 17 <1 пиксель Movem Учебник ent

# 16 Планирование анимации

# 15 Дизайн персонажа 1

# 14 Учебник по черепу и костям

— часть 13

# 12 Учебник по бесшовной анимации

# 11 Учебник по пожарной безопасности

# 10 Учебник по воде

# 9 Прогресс дизайна уровня

эффект Учебник

# 7 Учебник по электричеству

# 6 Цикл работы сверху вниз

# 5 Основы работы с пиксельным искусством

14

# 3 Анимация дыма

# 2 Simpl анимация атаки

# 1 Учебное пособие по простому блеску

Pixel Studio для пиксельной графики в Steam

Об этом программном обеспечении

Pixel Studio — новый редактор пиксельной графики для художников и разработчиков игр.Просто, быстро и легко. Неважно, новичок вы или профессионал. Создавайте потрясающие пиксельные рисунки в любом месте и в любое время! Мы поддерживаем слои и анимацию и имеем массу полезных инструментов — все, что вам нужно для создания крутых проектов. Используйте Google Диск для синхронизации работы между различными устройствами и даже платформами. Присоединяйтесь к Pixel Network ™ — нашему новому сообществу пиксельной графики! Не сомневайтесь, просто попробуйте и убедитесь, что вы выбрали лучший инструмент для пиксельной графики! Более 2 000 000 загрузок по всему миру, переведенных на 23 языка!

Характеристики

• Это супер просто, интуитивно понятно и удобно для пользователя
  
• Это кроссплатформенное, используйте его на мобильных устройствах и настольных компьютерах с синхронизацией с Google Диском
  
• Используйте слои для расширенной пиксельной графики
  
• Создание покадровой анимации
  
• Сохранение анимации в формате GIF или спрайт-листах
  
• Делитесь рисунками с друзьями и сообществом Pixel Network ™
  
• Создавайте собственные палитры, используйте встроенные или загружайте палитры из Lospec
  
• Расширенный выбор цвета с режимами RGBA и HSV
  
• Простое масштабирование и перемещение с помощью жестов и джойстиков
  
• Используйте портретный режим для мобильных устройств и альбомный для планшетов и ПК
  
• Настраиваемая панель инструментов и множество других настроек
  
• Мы поддерживаем Samsung S-Pen и Apple Pencil!
  
• Мы поддерживаем все популярные форматы: PNG, JPG, GIF, PSP (Pixel Studio Project), ASE (Aseprite)
  
• Автосохранение и резервное копирование — не потеряйте свою работу!
  
• Откройте для себя массу других полезных инструментов и функций!

Дополнительные функции

• Темная тема
  
• Инструмент формы для примитивов
  
• Инструмент градиента
  
• Встроенные и настраиваемые кисти
  
• Библиотека спрайтов для узоров изображений
  
• Режим плитки для создания бесшовных текстур
  
• Режим мозаики для кистей
  
• Симметричный рисунок (X, Y, X + Y)
  
• Точечное перо для точного рисования с курсором
  
• Текстовый инструмент с разными шрифтами
  
• Дизеринг-ручка для теней и бликов
  
• Вращение пиксельной графики с помощью алгоритма Fast RotSprite
  
• Onion Skin для расширенной анимации
  
• Применение палитр к изображениям
  
• Захват палитр из изображений
  
• Мини-карта и предварительный просмотр Pixel Perfect
  
• Неограниченный размер холста
изменение размера и поворот

• Настраиваемый цвет фона r
  
• Настраиваемая сетка
  
• Многопоточная обработка изображений
  
• Поддержка формата JASC Palette (PAL)

Системные требования

• 2 ГБ + ОЗУ для больших проектов и анимаций
  
• Мощный процессор (An.000+)

Примеры изображений, сделанных lorddkno, Redshrike, Calciumtrice, Buch, Tomoe Mami, используются по лицензии CC BY 3.0.

Pixel Art Tutorial WIP

Эта страница готова на 26,2%! Множество аннотаций-заполнителей!

Учебное пособие по Pixel Art

Preramble

«GHERKING» был обнаружен на одной из моих старых дискет Amiga. Это было сделано в Deluxe Paint III где-то в конце 80-х или начале 90-х (обратите внимание на драконью кефаль). Это не столько попытка пиксельной графики, сколько попытка «потрясающего изображения» (стиль демонстрационной сцены).В настоящее время я бы не стал пытаться пикселизировать что-то настолько большое — я бы просто нарисовал это вместо этого.

Не думаю, что я полностью понимал природу пикселей, пока в конце 80-х не познакомился с Deluxe Paint. Я знал о пикселях со времен C64, но никогда не имел доступа к каким-либо редакторам, которые позволили бы мне увидеть, что происходит за искажениями теневой маски ТВ, строк развертки, свечения люминофора и сжатия (искажения) сигнала RF-модулятора.

Первым, что я сделал пикселями, был, вероятно, молоток из руководства Super Mario Bros (в котором по какой-то причине были пиксельные рисунки штриховой графики).До этого я рисовал плитки из таких игр, как Megaman, на картоне и строил свои собственные уровни, но работа с пикселями внутри компьютера дала мне гораздо более сильное ощущение причастности к игровому миру.

Я потратил много времени, работая над проектами в Deluxe Paint, в основном экспериментируя с собственными техниками, потому что вокруг меня никто не занимался пиксельной графикой. Было сложно посмотреть, что в играх делают с пикселями и кадрами во время игры. Копировать эталонную графику из игр было непросто.Я помню, как пытался использовать «3rd Day», программу, которая анализировала бы остаточное содержимое RAM после перезагрузки, но получить результаты было сложно. Я также немного программировал и выпустил несколько крошечных игр и глупостей для местного компьютерного сообщества (тогда я действительно не знал, что такое BBS).

Сейчас я работаю в Photoshop, хотя он в чем-то уступает Deluxe Paint. Существуют и другие современные программы для создания пиксельной графики, анимации и плитки, но я особо не беспокоился о них.Я адаптировал свои методы работы, чтобы воспользоваться функциями, которые предлагает PS.

Пиксель арт как художник

Живопись ради живописи — это не то, чем я часто занимался в последнее время (разве здесь люди сталкиваются с печально известным «творческим тупиком»?), Но я сразу заметил, что рисовал гораздо лучше, чем рисовал. Не думаю, что я начал устранять этот дисбаланс до середины 200X, и я думаю, что мой пиксель-арт сильно от этого выиграл.

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

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

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

Индекс

>>> Я помещу сюда индексный список с якорями, если страница станет слишком длинной. Будет полезно людям, которые хотят связать определенную тему.

Работа с пиксельной графикой в ​​Photoshop

>>> Этот (более технический) раздел должен охватывать:

• Использование увеличенного рабочего вида и двукратного просмотра «сделай шаг назад и посмотри на него».
• Как проверить укладку плитки и закрепить плиточные швы. Настройка сетки. Используя PS / Filters / Other / Offset или скопируйте вставку вручную.
• Рисование пиксельной графики с использованием непрозрачности, по-прежнему с использованием палитры (внешней в другом окне).
• Работает в индексном режиме.
• Кратко о полезности формата файлов .raw для редактирования карт.

Некоторые практические примеры

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

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

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

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

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

Решение 2. При сжатии полос изменение значения заканчивается так быстро, что глаз не видит границ. Кроме того, полосатый край лучше всего размещать возле естественно выглядящего «терминатора» (там, где начинается тень), потому что тогда глаз ожидает его, и он становится невидимым и не отвлекает. Я думаю, что трафаретная печать сталкивается с теми же проблемами полосатости, что и пиксельная графика.Если у вас будет контрастный край между двумя цветовыми полями, можно также попытаться разместить его там, где это имеет композиционный смысл, и / или описывает изменение плоскости тени-света, или, возможно, просто кажущееся естественное изменение значения / окраски.

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

Еще одна иллюстрация.

Странные источники света, такие как плоский край света / тень края, можно рассматривать как вариант затенения подушки.Я предпочитаю использовать передний верхний свет, так как он довольно хорошо описывает форму, но бывают ситуации, когда вы можете использовать причудливый цветной задний / крайний свет, чтобы задать настроение (например, на портрете).
Чрезмерное сглаживание может сделать изображение размытым и нечетким. Пиксель-арт — это больше графическое изображение, чем возможность, скажем, сделать круг потрясающе гладким. Вы должны считать каждый пиксель, и когда ваш AA начинает выползать, вы теряете … эффективность использования пиксельного пространства и графическую четкость, которые, я думаю, лежат в основе пиксельной графики.
Если вы не работаете с очень маленькими палитрами (скажем, с 3 цветами), вам, вероятно, в какой-то момент потребуется настроить цветовые палитры (градиенты). При создании рампы я бы посоветовал не смешивать порции черного и белого для создания концов рампы. В природе оттенок цвета часто меняется от светлого к темному, поэтому черно-розово-белый пандус может выглядеть мутным и искусственным. Вдобавок ко всему объект, например человеческое лицо, часто имеет разные оттенки на разных частях. Для оттенков кожи человека я предпочитаю делать тени серовато-теплыми пурпурными, средние тона оставлять оранжевыми, а светлые — почти желтоватыми.При съемке на открытом воздухе я также смешиваю холодные сероватые тона с тенями (из-за атмосферы неба) и желтые с светлыми цветами (из-за теплого солнечного света).
Цветов много, но я обнаружил, что некоторые из них более удобны, чем другие, особенно при создании реалистичных вещей. Я бы не стал строить длинные пандусы из сверх (полностью) насыщенных цветов, если только вы не делаете неоновую картину или какую-то более графическую экскурсию. Это не означает, что все ваши цвета должны быть тусклыми или пастельными — очень насыщенные цвета могут быть очень эффективными для добавления дополнительной размерности определенным точкам, но я думаю, что их частота в палитре должна быть пропорциональна вероятности того, что вы собираетесь использовать их.Здесь я нарисовал странное маленькое неоновое существо, потому что оно попадает в рамки палитры. Когда я делаю такие вещи, как лица или природа, мне придется использовать более художественный подход к палитре.

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

Использование простых локальных цветов (цвет объекта локально, при нейтральном освещении или, возможно, в мультфильме) может быть эффективным при работе с графикой, потому что вам нужно четко понимать, что такое дерево, а что гора.Но, делая более живописную деталь, вам не обязательно делать все стволы дерева коричневыми, а все горы серыми. Цвета в природе смещены во всех направлениях.
Слегка связанный, выполнение шаблонных объектов приводит к отсутствию стиля. В предыдущей части я избегал рисовать обычные деревья с коричневыми стволами. Вот пытаюсь уйти от серебристого ящика-робота. Это своего рода перетягивание каната при создании пиксельной графики. С одной стороны, ваш дизайн должен быть очень четким, а с другой стороны, вы хотите, чтобы он был немного незнакомым, чтобы он был интересным и новым для зрителя…
Чрезмерная черная подкладка может возникнуть из-за своего рода принуждения отмечать и разделять каждую деталь. Когда цвета окружены черным, они выглядят более темными и немного мутными. Вы также теряете пиксельное пространство для линий, и вся фигура становится плоской, потому что линии, по-видимому, выталкивают каждую деталь в одну и ту же плоскость (особенно, если используемые цветовые шкалы имеют очень низкий контраст). Другой способ отделить детали — использовать контрастные и более светлые дополнительные линии (черные линии — вычитающие).Стиль, который я использую, выигрывает от сочетания вычитающих линий, потерянных линий (как-то предполагаемых, но не нарисованных) и аддитивных линий.
Еще одно соображение при создании фигур с черными линиями заключается в том, что линии у основания фигуры немного похожи на тень и могут заставить всю фигуру казаться плавающей. После снятия фигура кажется вырастающей из земли. Однако, если вы полностью пропустите штриховой рисунок, вы получите гораздо больше места для внутренних деталей, но тогда вам придется полагаться на контраст с фоном, чтобы силуэт фигуры читался.
Быстро нарисованные пиксельные линии, вероятно, будут выглядеть неровными и беспорядочными, как карандашный набросок, сделанный кем-то, кто не умеет рисовать и слишком сильно растирает линии (линии колючей проволоки). Некоторые детали действительно оправдывают причуды в линиях, но часто вы хотите использовать кривую 1,1,2,3 или 2,1,2 (или что-то в этом роде). На теневой стороне объекта я иногда закрашиваю диагонали (см. Валун выше), но это может выглядеть немного неопрятно.
Шум и ненужные бесхозные пиксели — это то, что вы получаете, когда пытаетесь втиснуть слишком много деталей.Заманчиво поместить туда как можно больше деталей, но вы должны учитывать масштаб, в котором вы рисуете, и то, как быть четким, а также простоту анимации (детали, удобные в одном кадре, могут быть трудно воспроизвести в следующий, слегка повернутый кадр). Вы можете знать намерение конкретных пикселей, но зритель, как правило, не знает, поэтому он, скорее всего, увидит в них шум (как и вы, когда вернетесь к фрагменту позже). Тем не менее, неплохо иметь несколько шумных областей, чтобы обеспечить вариацию текстуры.
Добавление небольших бликов здесь и там — это супер удовлетворение, но я думаю, что он уже оказывает этому космическому кораблю медвежью услугу, поскольку становится очень шумным. Попробуйте выбрать для них несколько сладких мест, а остальные подрежьте. Здесь я пытаюсь привести примеры двух крайностей. Есть (или были, во времена Amiga) хромированные стили, которые включают основные моменты и заставляют их работать. Имейте в виду, что плоский красный цвет станет своего рода блестящим розовым при чрезмерном выделении, то есть он потеряет свою цветовую идентичность.Тусклые материалы, вероятно, не подходят для выделения, если вы не используете сильный источник света. Когда дело доходит до глянцевых материалов, я предпочитаю выделять блики с помощью нескольких пикселей, а не наращивать их с помощью длинного ската. Металлы (и хром) получают более длинную рампу.
Некоторые вещи сложно построить из кубиков LEGO, и то же самое касается пикселей. Далеки могут быть одним из примеров. У них плоские скошенные лица, образующие круглую юбку, и миллион маленьких круглых шишек.Если у меня есть выбор, я просто избегаю проблемных частей дизайна и меняю их на что-то более совместимое с пространством пикселей.

В любом случае, кто-то прислал мне эти спрайты далеков и спросил, могу ли я что-нибудь с ними сделать, поэтому я быстро применил стиль, который до сих пор использовал на этой странице. Это можно описать как градиент, показанный над не-далеками. Обратите внимание на сжатие терминатора / края и редко используемые блики. Дизайн был перемещен от Dalek к чему-то менее детализированному и более коренастому.Я сохранил коническую форму, но избегал более длинных спусков, разбивая их на ступеньки по 90 и 45 градусов.

Этому я звоню … Что ты пытаешься сделать и на кого пытаешься произвести впечатление? В палитре есть набор низкоконтрастных оттенков серого и, казалось бы, случайные изменения оттенков на «цветовой» шкале, затем BAM, полностью черный. И две бесполезные зелени без большой разницы. И что это за принуждение делать маленькие пиксельные узоры? Возможно, здесь наш художник увидел перед внутренним взором прозрачного и маслянистого угря, а может, он просто бездумно закидывал какие-то пиксели.

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

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

Оптимизация уровня пикселей

>>> Напишите о мельчайших деталях отношения пиксель к пикселю.

• Микро-ленты (например, лестницы).
• О подходящем для пикселей выравнивании деталей и штриховых рисунков. Как это может повлиять на стиль (посмотрите на Z от Bitmap Brothers для угловатости, или на Dodonpachi).
• Использование диагонального смещения, чтобы втиснуть больше деталей в строку (например, персонажей Gameboy RPG).
• Использование дизеринга для затенения по сравнению с текстурой (например, кольчуга). Также обратите внимание на дизеринг, используемый для разделения наземных плоскостей в Chaos Engine. И его можно использовать для достижения двойственности цветов.
• Использование бесхозных пикселей для текстуры и …
• Еще о частично утраченных очертаниях.

Войдите … охотник за драгоценными камнями

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

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

Я буду заниматься сразу несколькими вопросами. Прежде всего, это лепка форм. Деревья и горы теперь выглядят так, будто имеют какую-то форму.Jewel демонстрирует некоторые новые смелые сочетания цветов. Фактура крыши хоть и простая, но передает общую идею всего двумя цветами. Крыша в основном плоская, поэтому уклон здесь не подходит.

Теперь я немного поиграю с цветами. Обратите внимание на темно-бирюзовый цвет тени дерева и более теплый желтовато-светло-зеленый. Гора также приобрела холодный оттенок теней и несколько более теплый цвет света. Цвет воды меняется от темно-синего до бирюзового. Однако эти цвета все же слишком «местные» (трава зеленая, вода синяя, скалы серые и т. Д.)).

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

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

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

Ого! Что здесь случилось?

Произошло упрощение и структурирование. Сначала я очистил черные контуры, удалив неровности (пиксели, из-за которых линия выглядит неровной и шероховатой).

Затем я решил осветлить самые верхние черные линии, особенно те, которые окружают более светлый цвет. Мне нравится это делать, потому что цвет линии стирается с окружающим цветом, делая его более приятным, а с источником света, идущим сверху, имеет смысл использовать только черный цвет для нижних (затененных) контуров. Полная черная линия тоже работает, особенно если вы работаете с ограниченными 4 цветами на палитру символов, однако для ярких вещей, таких как солнце и плазменные взрывы, я бы выбрал полностью цветной контур (если есть).Пушистые материалы также могут иметь более мягкий цветовой контур. Для некоторых типов стволов я опускаю контур, чтобы показать открытость.

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

Хорошей идеей является создание двух или более разных плиток с травой (занятая плитка и более пустая). Это позволяет более крупным равнинам выглядеть немного менее однородными, что вызывает интерес у некоторых областей. Океан подвергся аналогичной обработке, но по другой структуре. Раньше трава и океан имели одинаковую структуру (шум).

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

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

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

Другое дело — горы. Горы очень сложно сделать в таких движках тайлов 16 пикселей, потому что они либо квадраты (например, Zelda 2), либо конусы, торчащие из травы через равные промежутки (Dragon Quest 1). Здесь я попытался сделать версию с небольшой травой и более квадратной, и, похоже, это сработало лучше всего (некоторые неудачи можно увидеть ниже).Я добавил некоторую текстуру к зеленоватому основанию гор, чтобы подчеркнуть растительность, а не обесцвечивание.

Это помогает использовать рифмующиеся формы. Альтернативные версии должны выглядеть иначе, но одинаково! Обратите внимание на формы на деревьях. Пляжи немного размываются на теневой стороне, выполняя двойную функцию, о которой я упоминал ранее (текстура и тень вместе взятые). Я прогнулся и дал дому вид спереди. Это означало расширить дымоход, чтобы я мог поставить точку в перспективе.В двигателе ..

Я добавил немного тумана для встреч с врагами.

Второе мнение

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

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

Желто-Лайм > Все, что я должен сказать, в основном повторяет то, что сказал Рюмару … Я уменьшил количество цветов (может быть, слишком много) и создал активы в перспективе 3/4 вместо прежнего плоского вида.Очевидно, я обошелся без (неправильных) черных линий. В целом я выбрал упрощенный вид и не стал вдаваться в подробности, как для экономии времени, так и потому, что я, вероятно, не справился бы с этим: lol:

Fickludd > Я сосредоточился на удалении ненужных цветов, черных линий и одиночного пиксельного шума (хотя отражения от воды были довольно хорошими =)). Цвета тайлов были ненасыщенными по сравнению со спрайтами. Дублированные плитки использовались для создания двойных версий, чтобы попытаться сломать сетку.

Rosse > Меня не волнует подсчет цветов (от 36 до 43).Поскольку плитки такие маленькие, ясность важнее всего. У каждой плитки есть своя субпалитра, без повторного использования цветов. Повышает удобочитаемость за счет цветового кодирования. Для пиксельных кластеров: в основном я использую плоские, старался избегать градиентов и однопиксельного шума. Никаких черных контуров или линий внутри форм, разделяющих разные части. Дизайн объектов — это символы, абстрактные формы, которые должны передавать общую идею, а не что-то конкретное. Перспектива изменилась с вида сбоку на вид сверху вниз.Свет исходит сверху, объект отбрасывает тени под собой, чтобы усилить ощущение трехмерного пространства. Высота персонажа составляет 23 пикселя из 24 пикселей, поэтому при ходьбе он может увеличиваться на 1 пиксель.

Decroded > Убран весь шум и сохранена контрастность, ограниченная интересными точками, такими как края игрового пространства. Персонажу добавлен красный плащ, помогающий ему взорваться. Персонажу, наверное, еще нужно больше яркости, но у меня нет времени. * обеспокоен тем, что трава слишком шумная *

Джереми > У меня нет опыта в укладке плитки, так что я, наверное, где-то перепутал у кромки воды: yell: Я старался сохранить цвета жевательной резинки, только менее раздражающей, чем оригинал.Также упростите, удалите однопиксельный шум и т. Д.

LetMeThink > Вот мои получасовые усилия. Что я сделал: ОЧИСТКА КОНТРОЛЯ. НЕТ НАСЫЩЕННЫХ ЦВЕТОВ. Выбрал источник света. Рисовал по форме. Сделал плохую траву. Немного скорректированы оттенки. Сделал ужасную воду. Решили, что одного камня недостаточно, поэтому сделали 3. Добавлены тени. Сделал ужасные усилия для персонажей, так как я не могу их нарисовать Немного прибрался.

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

MrFahrenheit > Путаница с формами и цветами.Это было бы раньше, но мой компьютер потерял питание, и я не спас …: D. По крайней мере, мне было весело!

Несущий рассвет > Не мог удержаться от игры с этой мини-штукой. Украл все ваши лучшие дизайны и переделал их! 😉 Цвета лотца, в основном из-за раздельных палитр для большинства предметов. Исо дом! работает нормально мне кажется, да? Ширина символа на 1 пиксель превышает ширину … не хотел компрометировать его: /

Wolfenoctis > Было весело делать это

Yaomon17 > обрр, края воды не делал.Сейчас некогда его менять … Пытался использовать менее насыщенные цвета. Мне просто нравятся менее насыщенные цвета.

Некоторые альтернативные ретро-версии

Графика на таких компьютерах, как ZX Spectrum, имела очень плоский вид, а черный игровой фон был очень распространен. Когда вы не можете использовать желаемые цвета или создавать причудливые объемы с использованием светлых и темных цветов, вы почти вынуждены использовать иконические / мультяшные представления объектов (по крайней мере, при работе со спрайтами меньшего размера).

Равнины Gameboy иногда были совершенно бесплодными (однотонный цвет), но здесь я решил также добавить несколько треугольников (часто хорошо плиток) пучков травы. Я немного повеселился с наклонной перспективой на скалы и деревья и решил сделать деревья темнее, а скалы светлее, чтобы различить их. Дом получил более оригинальный вид гамбургера (в фэнтезийной игре нам не нужны унылые нормальные дома, правда?). Спрайты персонажей Gameboy имели только 3 цвета, потому что один использовался для прозрачности, но это не большая проблема, когда они не работают в цвете.Важна только интенсивность цвета (значение), и вы можете многое сделать, используя всего 3 значения.

Аппаратные ограничения

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

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

Подробнее!

• Добавьте сюда мой анализ Batman NES.
• Моя 16 цветовая палитра.
• Напишите что-нибудь о низком и высоком ключе. Все средние клавиши могут выглядеть плоскими.
• Расскажите о моем инструменте гистограммы цветного куба?
• Расскажите о моем старом понижающем сэмплере с разреженными точками отбора проб и инструменте автоматического вращения?

Анализ стиля?

>>> Этот урок довольно узок по стилю (я продолжаю заниматься своим делом), поэтому было бы неплохо взглянуть на разные современные стили, такие как Cave Story, Box people с ногами 1px и т. Д.Может, файтинги. Есть также такие игры, как Raiden II, в которых есть графика, которую можно вращать. Поговорите немного о том, как можно сделать вращение без шума.

---

Иллюстрация Арне Никласа Янссона AndroidArts.com .

No related posts.