от черновика до игрового ассета / Хабр

→

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

арту

: вы скачали какое-то ПО, запустили его и увидели все эти опции, бесконечные цвета и многое другое, быстро всё закрыли, удалили программу и выбросили свой ноутбук в окно.

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

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

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

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

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

Приготовьтесь к пиксель-арту

В этой статье я рассмотрю пиксель-арт. Считаете, что он давно стал клише и от него все устали?

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

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

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

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

10 этапов создания пиксель-арта

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

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

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

Этап 1 — палитра

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

сюда

и выберите цветовую палитру.

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

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

Этап 2 — разрешение

Для начала выбирайте небольшое разрешение. Если вы новичок, то ударьтесь в ретро и создавайте спрайты размером 16×16 или 32×32, не больше.

Можно использовать и другие соотношения, например 24×32, главное, не слишком больше этого.

Этап 3 — контуры

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

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

Также проверьте, чтобы в контуре не было дыр, на данном этапе это самое важное.

Я нарисовал такого паренька с разрешением 32×32. Выглядит он ужасно.

По крайней мере, теперь вы не будете жаловаться, что я не начал с самого начала!

Этап 4 — цвета

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

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

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

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

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

Итак, я выбрал несколько цветов из палитры и раскрасил своего персонажа.

Помните, я говорил, что важно не оставлять дыр?

Этап 5 — оттенки

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

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

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

Примечание

---

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

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

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

Поэтому вот вам хитрость. В своём примере я возьму освещение, падающее справа.

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

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

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

Если по каким-то причинам этот этап кажется вам слишком сложным, то приблизьте изображение и посмотрите, как я это сделал — добавлены два дополнительных оттенка для синего, красного и бежевого цветов. Все они выбраны из палитры и нанесены с учётом правила «сверху-справа»/«слева-внизу».

Этап 6 — пропорции

Это ещё один источник неудач для начинающего художника. К счастью, пиксель-арт низкого разрешения сильно упрощает его.

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

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

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

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

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

Первое, что приходит в голову — похоже, что наш персонаж падает. Давайте ему поможем.

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

Давайте ещё раз взглянем на эту версию и подумаем, что теперь с ней не так?

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

Отлично, поза стала получше, а ещё я добавил ему штаны.

Примечание

---

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

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

Это похоже на то, как кодеры ежедневно заходят в Google или на Stack Overflow — никого это не волнует.

Этап 7 — подчищаем блоки

Видите эти некрасивые чёрные скопления пикселей?

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

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

Иногда сам процесс редактирования даёт нам вдохновение.

Примечание

---

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

Я добавил нос и немного изменил форму головы, чтобы она лучше соответствовала носу.

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

Этап 8 — подчищаем оттенки

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

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

Здесь я сделал пару действий — заменил все яркие и тёмные пиксели, которые казались неуместными, а затем изменил внешние контуры.

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

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

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

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

Если посмотреть на персонажа теперь, то ноги выглядят странно, как у кентавра. И ещё у него странное лицо — нос смотрит в одном направлении, а глаза — в другом.

Художники используют хитрость, позволяющую мозгу искать ошибки — они смотрят на рисунок под другим углом.

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

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

Но постойте, почему у него нет ушей? И почему кажется, что его шляпа висит в воздухе, а не соединена с головой?

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

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

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

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

Однако внешний вид затенения иногда может сильно зависеть от единственного пикселя. Это вы поймёте со временем и практикой.

Примечание

---

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

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

Этап 9 — доводка

Да, персонажа уже можно использовать, но давайте продолжим улучшать его.

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

Поэтому я сделал одну из рук и одну из ног более тёмного оттенка, всё просто.

Давайте ещё что-нибудь улучшим!

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

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

В нашем случае шарф позволяет добавить контраста для отделения волос от рубашки.

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

А затем нужны два тёмных пикселя посередине рубашки?

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

Наконец, я снова вернул контур, рисуя по пикселю за раз и избегая создания скоплений пикселей.

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

Контур не обязан всегда быть чёрным. Вот альтернативный способ создания контура — мы смотрим на соседние с контуром пиксели и выбираем немного более тёмный оттенок.

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

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

Примечание

---

Если сравнить версию с контуром и версию без контура, то контур может выглядеть «тяжёлым».

Выбор того или иного варианта зависит от эффекта, который нужен для вашего стиля графики.

Этап 10 — анимация

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

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

По сути, я просто выделил половину спрайта и переместил её вниз. Если вы ленивый разработчик, то вам и этого будет достаточно, но не для меня!

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

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

Этап 10 — субпиксельная анимация

Если вы добрались досюда, то уже входите на территорию более сложных задач.

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

Последний кадр стал хорошим тому примером: движения шляпы и носа слишком уж сильные. Но мы ведь сдвинули их всего на один пиксель вверх!

Вот если бы мы могли сдвинуть их меньше, чем на пиксель, чтобы сделать движение более плавным… Но увы, пиксель — это самая маленькая величина.

Однако есть одна хитрость — вместо того, чтобы двигать пиксели, мы можем двигать цвета!

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

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

Заключение

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

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

Также не забудьте прочитать мою статью про pixel perfect graphics, которая тоже очень важна для создания целостного графического стиля.

Pixel art в современных реалиях. Создание и использование. | by Nikita Goncharuk | Game Dev

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

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

В современных реалиях Pixel art устоялся благодаря появлению такого жанра, как инди и просто бешеному успеху игр MineCraft и Terraria. Инди-разработчики используют пиксельную графику по причине низкого порога вхождения (обучиться её созданию довольно легко) и скорости рисования (если объекты не сильно детализированы). И благодаря играм, упомянутым выше, люди уже привыкли к такому Pixel art и будут относиться к игре лояльно.

Перейдём к созданию Pixel art. Тут всё очень просто и, если вы когда-нибудь строили дома в MineCraft, вы быстро вольётесь в пиксельную графику. Также стоит упомянуть, что все написанное ниже — это лишь советы и рекомендации, а никак не правила. Если у вас получается отличный рисунок, вопреки всему написанному ниже, то кому какое дело к тем словам?

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

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

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

Перейдём к самой настройке. Открываем окно “Редактирование”, находим пункт “Настройки” в самом низу окна. В открывшемся окне выбираем “Направляющие, сетка и фрагменты…”.

Далее выставляем основные параметры, как показано на фото ниже.

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

Также для того, чтобы белые пиксели было хорошо видно, на панели слоёв кликаем два раза на фон и делаем его слоем. Затем нажимаем сочетание клавиш Ctrl + U. В открывшемся окне выставляем яркость примерно на -32.

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

● Не делать соединяющие пиксели

Для наглядности я нарисовал доллар на фотографии ниже. Красным цветом выделены те самые соединяющие пиксели. Интуитивно кажется, что они делают арт плавнее и соответственно красивее. Но, зачастую, это не так.

● Убирать изломы

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

● Создавайте новый слой

В начале работы не забывайте создавать новый слой и работать на нём. Не нужно рисовать прямо на фоне. Также научитесь работать со слоями. Этот навык значительно ускорит и облегчит вашу работу.

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

* Форма

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

* Цвет

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

* Тени

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

* Блики

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

* Обводка

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

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

Используют пиксельную графику в основном в играх, так как сложно представить другой медиа продукт в таком стиле…

пиксель-арт по разные стороны экрана – тема научной статьи по философии, этике, религиоведению читайте бесплатно текст научно-исследовательской работы в электронной библиотеке КиберЛенинка

Е. Николаева

СКВОЗЬ ПИКСЕЛИ К ОБРАЗАМ И ОБРАТНО: ПИКСЕЛЬ-АРТ ПО РАЗНЫЕ СТОРОНЫ ЭКРАНА

Введение

Постмодерн, деконструировавший «до основанья» все культурное пространство, выстроенное предыдущими Большими стилями, дал категориальное определение культуре ХХ в. как фрагментарной, коллажной и мозаичной1. В свою очередь, цифровая социокультурная парадигма, которая, очевидно, приходит ему на смену, использует соответствующий ее медийной сущности алгоритм обработки и воспроизводства действительности — оцифровку. Не отрицая постмодернистской оптики видения, цифровая культура начала перекодирование доставшихся ей в наследство структурных элементов посредством бинарных кодов. Результатом этого перекодирования становится особая дигитальная техника жизни, экономики, политики и, разумеется, искусства. При этом (технически и эстетически) минимальный элемент цифровой образности — пиксель — стал ключевой метафорой новой культурной эпохи. В самом общем виде пиксель представляет собой наименьший неделимый объект (в т. ч. элемент изображения) прямоугольной, обычно квадратной или круглой формы, обладающий определенным цветом и яркостью. Соответственно, фрагментация действительности на основе самых разных паттернов аналогового типа уступила место пикселизации на основе унифицированных единичных элементов изображения и элементарных значений.

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

Пиксель: технологический аспект

Слово pixel происходит от английского picture element. Понятие «элемент картины» начало использоваться достаточно давно: как указывает Р. Лайэн (R. Lyon) в исследовании, посвященном истории пикселя, немецкий термин Bildpunkt впервые появился в 1874 г. в книге Германа Фогеля (H.Vogel) по проблемам фотографии; англоязычный аналог (picture element) — в июньском номере журнала Wireless World and Radio Review за 1927 г. в статье Альфреда Динсдэйла (A. Dinsdale) о демонстрации телевизионной системы, состоявшей из 50х50 элементов50, а по некоторым источникам3

еще раньше, в 1911г., в патенте (США) на технологию передачи изображений движущихся объектов некоего Э. Синдинг-Ларсена (A. Sinding-Larsen)4.

Считается, что собственно термин pixel ввел в научный обиход американский инженер Фрэд Биллингсли (F. Billingsley) из Лаборатории реактивного движения (JPL) НАСА в своих статьях (1965 г.) при описании фотографий, полученных с космических аппаратов Ranger и Mariner5.

Что касается русскоязычного термина, являющегося транскрипцией англоязычной лексемы, существуют и используются два его варианта — пиксел и пиксель. В «Русском орфографическом словаре» РАН основным вариантом является «пиксел», тогда как «мягкий» вариант маркируется как разговорный профессиональный6. В свою очередь, действующий ГОСТ, регламентирующий терминологию по машинной графике, устанавливает в качестве стандартного термина именно «пиксель», определяемый как «наименьший элемент поверхности визуализации, которому может быть независимым образом заданы цвет, интенсивность и другие характеристики изображения»7.

C технической точки зрения пиксель — это минимальный логический элемент двумерного цифрового изображения в так называемой растровой графике. Растровое изображение представляет собой прямоугольную сетку пикселей (цветных точек) на компьютерном мониторе, бумаге и других отображающих устройствах и материалах. Иными словами, такое изображение состоит из двумерного массива точек, для каждой из которых задаются независимые параметры: две координаты (по вертикали и горизонтали), цвет и яркость. 1 пиксель черно-белого экрана кодируется 1 битом информации. Цветовая палитра монитора зависит от информационной емкости одного пикселя: 4 бита — 16 цветов, 8 бит — 256 цветов. В результате каждый элементарный фрагмент изображения описывается в двоичном коде (с помощью цифр 0 и 1) и без редукции его внечислового содержания. Пиксель как визуальное воплощение бинарной пары поднимает вопрос о соотношении имманентной и трансцендентной виртуальности, предлагая альтернативное понимание реального и виртуального8.

Размеры элементарных «пятен» определяются разрешением, которое характеризует плотность пикселей, т. е. количество пикселей на единицу длины (обычно на дюйм — pixels per inch, ppi). Чем меньше прямоугольники, на которые разбивается изображение, тем больше разрешение, то есть тем более мелкие детали можно закодировать в таком графическом файле. При этом понятие «разрешения», или «разрешающая способность», относится не к изображению, которое не существует вне средства его фиксации, вне «проявления» на материальном носителе (экране, бумаге и т.

п.), а к самому средству вывода (монитору, принтеру, сканеру, фотоаппарату). На заре компьютерной революции было решено приравнять пиксель к типографскому пункту, составлявшему примерно 1/72 дюйма, соответственно, 72 последовательных пикселя на экране «Макинтоша» печатались как линия длиной в 1 дюйм на принтере9. Если сегодня попытаться напечатать ровно один пиксель, то разные программы будут выдавать разные результаты на печати, поскольку размер «геометрического» пикселя специфичен для каждого устройства вывода, а пиксель — это единица информации, никак не привязанная к геометрии изображения. В среднем один напечатанный на бумаге пиксель равен примерно 0,3-0,4 мм10. Современные ЖК-экраны имеют пиксели шириной порядка 0,24-0,3 мм11.

Количество точек по горизонтали и вертикали определяется типом монитора и может составлять, например, 1024×768 или, скажем, 1280×1024. Или 200×300, как в первых игровых консолях, из которых в мир реальности пришли первые виртуальные герои — Марио, обезьянка Конг, Пакман (Pac-Man), метроиды и др.

Пиксель как культурная форма

«Пиксельные» персонажи благодаря своей исчерпывающей однозначности и схематичности требуемых от них реакций быстро нашли свое место не только в видеоиграх, но и в массовой развлекательной культуре в целом. Одним из первых героев «пиксельной» графики был человечек Марио (первоначально просто Jumpman — «попрыгун») из игры Donkey Kong, созданный в 1981 г. японским аниматором Миямото12. Пожалуй, можно сказать, что Марио — это архетип пиксельного человека. Он готов на время стать человечком «высокого разрешения»13, но до сих пор живет активной жизнью в современном пиксельном мире, например, в компьютерной «Истории вторжения в Ирак, рассказанной как игра Братья Марио»14.

Сегодня мир, собранный из пикселей, заселяется куколками низкого разрешения — dollz, «чибиками», а также цифровыми клонами известных политиков и знаменитых поп-звезд «мини-попсами»15 или «VIP-пикселями»16. Эти «мини-попсы» приобретают все большую культурную независимость от своих прототипов, а те, в свою очередь, оказываются их аватарами в «реальной» реальности, транслирующими пиксельные паттерны мышления и поведения.

Вслед за первыми 8-битными видеоиграми в 1982 г. появился и сам термин pixel art с легкой руки сотрудников корпорации Xerox Адель Голд-берт (Adel Goldbert) и Роберта Флегала (Robert Flegal) из Исследовательского центра Пало Альто17.

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

Дискретность оказалась не только сущностной технической характеристикой компьютерных изображений, а пиксель — технологически «неделимой» частью картины20, но сами пиксели в пространстве цифровой культуры стали художественным аналогом элементарных символов, с помощью которых записывается молекулярная формула материи. «Атомарное» строение визуального объекта задало особый тип образности и правила ее декодирования. По существу, как отмечает Джон Маэда, известный американский графический дизайнер и исследователь в области компьютерных технологий, «этот настойчивый квадрат представляет собой цифровую конвенцию, вынужденную форму, которая определяет содержание» (перевод — Е.Н.)21.

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

Действительно, невозможно не заметить, что «пиксели — уже на пути к тому, чтобы стать грамматикой повседневной жизни»24, претендуя тем самым на категориальный статус универсального дескриптора всего ментального пространства постпостмодерна. Оценка несводимых к цифровому описанию явлений реального мира и самих людей в терминах высокого / низкого разрешения и подозрительное ощущение, «что существует каркас из точек, стоящий за нашей повседневной жизнью»25, есть свидетельство того, что «пиксельная культура», как ее называет Э. Золли, уже наступила.

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

и апофеоз визуального привел к тому, что «слово превратилось в пиксель», а пиксельное мышление — «в ипостаси идеологии», в гламур27: не случайно именно в Голливуде с эмоциональным подъемом и коммерческим размахом ежегодно проходит арт-шоу I am 8-bit, на котором выставляются разного рода художественные 2D и 3D-компиляции, созданные по мотивам и в технике старых видеоигр28.

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

Исходя из того, что в основе пиксельного искусства лежит принцип построения изображения из некоторых однотипных элементарных объектов, расположенных в «ячейках» прямоугольной сетки, к пиксельным структурам с точки зрения социокультурной корреляции форма/содержание можно отнести вышивку крестиком и бисером, мозаики некоторых типов, кафельные «фартуки» в современных кухнях29, разного рода «блочные» здания и «пиксельные» фасады, секционный дизайн офисного пространства. А еще сканворды и японские «нонограммы». Особенно показательна обратная генетическая связь японской графической головоломки, придуманной дизайнером Ноной Исида (Non Ishida), с пиксельными экранными изображениями. Именно победа в конкурсе Window Art (1987 г., Токио), в котором изображения складывались из зажигавшихся в определенном порядке окон одного из небоскребов, вдохновила Нону на разработку такого алгоритма создания изображений на бумаге, который задействует прямоугольную сетку и цифровые «координаты» элементарных элементов (квадратов / «пикселей») рисунка30. В 2000-е гг. «искусство окон» займет свое место в ряду интерактивного пиксель-арта. Фасадные поверхности высотных зданий и квадраты поочередно зажигающихся и гаснущих окон будут использоваться в качестве прямоугольной мегапиксельной матрицы, например, для игры Tetris или иконических рекламных картинок31.

Пикселизация

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

ется на цветные квадратики (появляется так называемая «зернистость») и проступают внутренние и внешние ломаные границы-«лестницы», выявляющие независимость единичных элементов изображения и условность составляемого ими целого. Именно эта техническая процедура изменения масштаба изображения (zoom) породила иллюзию вскрытия формального содержания пикселя как квадрата и «верифицировала» квадратную модель пикселя, хотя фактически квадраты, возникающие при n-кратном увеличении картинки, — это массивы n x n «клонированных» копий исходного точечного пикселя, о чем с истинно научным пафосом восклицает Э. Р. Смит (Alvy Ray Smith) в своем эссе A Pixel Is Not A Little Square!32.

Однако на самом деле культурный и эстетический паттерн пикселя-квадрата в большей степени опирается на другую смыслопорождающую модель, восходящую к компьютерным визуализациям низкого разрешения. Видимые глазу «во всей неприкрашенной квадратности и бинарном совершенстве»33 пиксели первых компьютерных изображений 1950-60-х гг. и 8-битных видеоигр 1970-80-х не только предложили новый язык описания реальности, но, следовательно, и новый способ ее членения (в терминологии Сепира и Уорфа34), построили и раскрасили яркую (из 16 цветов) прямолинейную цифровую картину мира, но и сам «мир, соответствующий тому типу достоверности, которую передают пиксели»35.

Эстетические возможности пикселизации — в «цифровом импрессионизме» фотографии и мобилографии36, в рекламных постерах37 и ТВ-заставках38, опциях выбора сюжетов / изображений на интернет-сайтах39 — лишь обнародовали пиксель-квадрат как культурную форму, которая притаилась за целостностью образов высокого разрешения. Точно так же «битый» пиксель на ЖК-мониторе демонстрирует дробную структуру всего экранного изображения, но уже деэстетизируя его.

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

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

ются полупроницаемой границей визуального мира по ту сторону нравственности.

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

Эту характеристику пикселей как репрезентативной формы культурного перехода демонстрирует весьма примечательное произведение под названием «Волна будущего» (The wave of Future)41, своего рода «ремейк» картины «Большая волна в Канагаве» (The Great Wave of Kanagawa) японского художника начала XIX в. Кацусики Хокусая (Katsushika Hokusai)42. Постер неизвестного автора был выпущен в начале 1990-х Бостонским музеем компьютеров (The Boston Computer Museum) и журналом The High Tech Times. Левая часть постера точно воспроизводит гравюрную волну японского оригинала, в середине изображение распадается на цветные «пиксели», и справа уже появляется новая большая волна, выполненная в виде цифрового «проволочного каркаса», являющегося основой компьютерной 3D-графики. Пиксельный «шум» между двух волн означает, по-видимому, не только эпоху превращения традиционной живописи в компьютерную графику. Используя отсылку к идее Хокусая о соотношении человеческого мастерства и силы природы, постер выстраивает цепочку репрезентативных парадигм: сила и мощь природного мира представлена искусством художника, за этим следует технологическая модификация его работы — сначала грубо, с низким разрешением, затем более тонко и совершенно отражающая и виртуа-лизирующая природу43. И всю остальную «реальную» реальность…

Попутно «Волна будущего» иллюстрирует замечание А. Бэйаэр о двуосновном характере цифрового искусства: «Порождающая модель цифрового изображения примиряет два аттрактора: прямоугольную (или проще — квадратную) форму, какой мы любим представлять пиксель, и изображение, заимствованное у естественного мира. Один создает часть, элементарную форму; второй — общую форму (перевод — Е.Н.)»44.

«Геометрический» и «концептуальный» пиксель

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

точками или квадратами (мега-пикселями) на экране, но и любыми геометрическими конфигурациями и вещественными формами ограниченных цветов — от бумажных стикеров для заметок, из которых уже выкладывают не только картинки, но и обои45, керамической интерьерной и уличной плитки46, стенных кирпичей47 и элементов фасадов зданий48 до цветных мелков49, баночек с гуашью50, колпачков фломастеров51 и т. п. Материальная фактура «геометрического» пикселя вообще перестает иметь какое-либо значение, важно лишь графическое сообщение на поверхности, без глубины, без внутренних многослойных смыслов. Джон Маэда называет это «наваждением поверхностного слоя»52. Особенно примечательна «материализация» геометрических пикселей в образы с классических полотен и, конечно, из игр Nintendo с помощью кубиков Рубика53, игральных костей54 и блоков конструктора LEGO55, таких же «жестко» квадратных и условных, как сами пиксели низкого разрешения. При этом, в конечном счете, все эти произведения существуют для массового зрителя опосредованными цифровым видео или фотографиями высокого разрешения.

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

С этих позиций «концептуальный» пиксель может, вообще говоря, представлять любые паттерны одного типа, в том числе кинестетического (люди в разных позах, которые социально и культурно обусловлены и, следовательно, ограничены в количестве), как на картинах Иеронима Босха «Сад удовольствий» (1516) и Питера Брейгеля-старшего «Нидерландские пословицы» (1559) или современных художников — немецкого автора детских книжек-картинок Али Митгуч (Ali Mitgutsch)56 и американского поп-художника Джеймса Риззи (James Rizzi)57.

Что касается «геометрического» пикселя, то «пикселизация» такого рода превратилась в способ художественной экспрессии еще в дотелеви-зионную и докомпьютерную эпоху, на рубеже XIX-XX вв., когда в изобразительном искусстве возникло течение, получившее название пуантилизм (от французского point, т. е. «точка»). Самыми известными из художников-пуантилистов были Поль Синьяк58 и Жорж Сера59. В основе этой техники

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

Искусство авангарда и геометрического абстракционизма впервые утвердило статус квадрата и прямоугольных матриц как эстетически значимой формы видения и декодирования мира. В первые десятилетия ХХ в. появляются четыре (или даже, возможно, семь) «Черных квадратов», два «Красных квадрата» и один «Белый квадрат» Казимира Малевича. (Заметим в скобках, что именно квадрат, а не круг или треугольник, также принадлежавшие кисти Малевича, оказался столь востребован переломной культурой. И именно черный, а не цветной — как предчувствие эпохи двоичной вселенной.) Голландский художник Пит Мондриан ограничивает свою творческую рефлексию «неопластицизмом» горизонтальных и перпендикулярных линий и трех основных цветов (красного, синего и желтого) и начинает создавать свои прямоугольные композиции, в т. ч. уже совершенно «пиксельную» Composition with Grid IX (1919)60, в дальнейшем координатная сетка оказалась пригодной для художественных репрезентаций социокультурного пространства Нью-Йорка (Broadway Boogie Woogie, 1942-1943). В 1950-х гг. появляются прямоугольные «мультиформы» или цветовые поля Марка Ротко, композиции из двух-трех абстрактных «пикселей» выполняют инструментально-семантическую функцию религиозного самовыражения художника61.

Предтечей настоящего пиксельного искусства, игравшего одновременно с «геометрическими» и «концептуальными» пикселями, могут по праву считаться работы Сальвадора Дали, такие как «Сикстинская Мадонна»62 (1958), «Кибернетическая одалиска»63 (1978), «Афины горят! «Афинская школа» и «Пожар Борго»64 (1979-1980). Особое место занимает картина «Гала, глядящая на Средиземное море, превращается на расстоянии двадцати метров в портрет Авраама Линкольна (Похвала Ротко)»65 (1976). Портрет А. Линкольна, выполненный в технике «низкого разрешения», проступает из романтического этюда и поглощает его, если зритель начинает смотреть на картину издалека.D-пиксели), которые заново складываются в кладку каменной стены. Через окно в этой стене открывается мир по ту сторону полотна-экрана, мир, полный иных, неисчерпаемых, как море, смыслов, мир, который оказывается отгороженным от нас пиксельными стенами двух реальностей — экономико-политической

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

В контексте современной социокультурной и экономической коммуникации «геометрический» пиксель может выступать как значимый единичный элемент картины, в том числе произведений, созданных в прошлых веках в традиционной технике живописи. Так для сбора денег на выкуп картины Уильяма Тернера «Голубая Риги» в рамках акции Save Blue Rigi полотно было выставлено на сайте галереи Тейт и распродано по «пикселям» всем желающим66. Один крохотный квадратик («мазок кисти») стоил 5 фунтов. На соответствующих фрагментах цифрового варианта картины закреплены виртуальные метки с именами «владельцев». При этом некоторые участники акции выкупали «пиксели» так, чтобы они складывались в пикселизо-ванные надписи, цифры, сердечки и т. п.

«Концептуальные» пиксели современных цифровых картин могут вмещать в себя все типы культурных референтов — от образов массовой и информационной культуры до рекламных указателей и персонажей анимэ, как, например, в мета-пиксельном портрете Падмы Амидалы (королевы планеты Набу из «Звездных войн»)67.

И уж совсем неприкрыто сущность «концептуального» пикселя экранного изображения заявлена не только как социально и культурно значимая, но и как экономически ценная в интернет-проекте The Million Dollar Page британского студента Алекса Тью. Главная страница была разбита на 10000 квадратов («геометрических» пикселей) размером 10х10рх стоимостью 100 долларов (по 1 доллару за 1 технологический пиксель). В каждом таком квадратном фрагменте экрана помещается логотип компании, купившей один или несколько «деци-пикселей», при этом рекламный значок одновременно служит активной гиперссылкой на соответствующий сайт). Таким образом, эти «пиксели» разворачиваются не в плоскости экрана, а в глубь, в заэкранные просторы глобального Интернета. Стоимость последней тысячи пикселей на аукционе eBay составила $ 3810069.

Пиксель-арт

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

Как правило, произведения пиксель-арта отличаются ограниченной цветовой палитрой (обычно не более 16 цветов) и отсутствием «сглаживания». Однако в более широком смысле пиксель-арт вовлекает в сферу своего семантического влияния и некомпьютерные произведения. А с позиций формальной эстетики понятие пиксель-арта скорее относится к любым изображениям, у которых намеренно визуализирована их пиксельная / мегапиксельная структура (пиксель-пуантилизм, пиксельная живопись и т. п.)70.

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

Развитие компьютерных технологий вытеснило собственно пиксельную графику в область отдельного художественного жанра профессионального пиксель-арта (eBoy72, Кеннет Фиджер (Kenneth Fejer)73, Крейг Робинсон (Craig Robinson), Джуд Баффэм (Jude Buffum)74, Туука (Tuukka)75, Сара Боксер (Sarah Boxer)76; некоторые работы Голана Левина (Golan Levin)77, Саймона Биггза (Simon Biggs)78 и др.) и любительского компьютерного искусства (сайты-«конструкторы» Pixelarts79, Pixelpusher80, Blaggart pixel graffiti81 и др.).

К пиксельному искусству относится и так называемые mobile art — пиксельные рисунки на экранах мобильных телекоммуникационных

устройств, выполненные с помощью 12 кнопок мобильного телефона и специальной программы82. Здесь лаконичность SMS-коммуникации дополняется элементарной образностью пискельных MMS. Элипсису (опусканию коннотаций) подвергаются не только текстовые «нарративы», но и обслуживающие их образы.

Другая разновидность — мобилография. Это формальное искусство и / или технические эксперименты, которые основаны на необычных эффектах при распечатывании на бумаге фотографий (мобилограмм), полученных встроенными фотокамерами мобильных телефонов. В связи с маленькими размерами матриц мобильных фотокамер изображения получаются заметно пикселированными, и «грубый» квадрат порой обретает эстетическую значимость.’а. Многие арт-объекты в Сети, сохранив «ячеистую» мегапиксельную фактуру изображения, частично или полностью изменили характер «элементарного фрагмента картины».

Так, «пиксельная» форма репрезентации может содержать в себе следы мультимедийного происхождения произведения компьютерного искусства. Например, работа норвежского художника Мариуса Ватца (Marius Watz), представляющая собой результат программы, которая перевела звуковую информацию (а именно музыку Александра Ришауга) в визуальные образы83.

Вне компьютерного экрана пиксель-арт может принимать самые разные формы, так или иначе материализующие культурную или технологическую метафору экрана. Например, предстать в виде «зеркала», состоящего из матрицы 35х29 деревянных полированных «квадратиков» размером 4 см2 каждый, цифровой камеры и персонального компьютера. («Пиксельное отражение» объекта перед «зеркалом» анализируется цифровым способом и появляется за счет разного наклона «пиксельных» пластинок и, соответственно, разной их освещенности.84) Или бумажного экрана, на котором световые квадраты-пиксели являются следствием применения цифрового принципа нуля и единицы в механическом и аналоговом алго-ритмах85.

Необходимо отметить, что в цифровой культуре слово «pixel» используется в качестве универсального вербального идентификатора для самых разных сайтов, связанных с комп-артом, web-дизайном и событиями в области digital art, по всему миру (Pixel Design Studio, United Pixel Studio, Pixel Fury Design, Pixel Factory Design, Liquid Pixel Designs, Square Pixel, PixelMatrix, Pixel Attack, Atomic Pixel, MadPixel,

Pixel Dope, Pixel Juice, Pixel Cat, Pixel Lab, Pixel Pitch Competition, и т. п.). И хотя большинство из них работают с «невидимыми» пикселями высокого разрешения, нередко в оформлении сайтов присутствуют именно те самые квадратные пиксели низкого разрешения86.

Метапиксели

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

Пикселю приписывается свойство скрытого содержания, совершенно не связанного с видимым целым и спрятанного в микроскопичности пикселя. Однако благодаря способности пикселя проявляться при увеличении, этот смысл может быть демаскирован и выставлен на обозрение88. Такой тип метапиксельной художественной структуры создается интернет-программой Image Mosaic Generator, которую можно назвать арт-трансформером89. После загрузки исходной картинки (в формате jpeg, gif, png) сервис производит поиск подходящих фотофрагментов на известном сайте Flickr.com. Полученный пиксельно-мозаичный портрет или пейзаж можно поместить на рабочий стол компьютера или вывести его через принтер за пределы экрана как самостоятельный арт-объект.

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

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

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

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

Кросс-медийный гипер-проект московского художника Игоря Каменева «Фантасмагория жизни» (81 полотно — 9 по вертикали и 9 по горизонтали, с собственным названием и автографом) разворачивается одновременно в двух реальностях — как живописные полотна в первой реальности и как их виртуальные проекции в компьютерной реальности. Каждый из холстов размером 110х80 см, выполненных в широком спектре живописных стилей — от иконописи до фотореализма, от сюрреалистических сюжетов до абстрактных композиций — самодостаточен и одновременно находится в условной концептуальной и сюжетной связи с остальными. При этом увидеть гигантскую картину целиком можно лишь на сайте художника92. Именно Интернет — единственная реальность, в которой «Фантасмагория жизни» будет собрана в единое законченное полотно. В соответствии с замыслом художника по мере написания готовые работы занимают свои «клетки» в матрице проекта и образуют единое целое, доступное зрителю в полном объеме только в виртуальном пространстве. В первой реальности фрагменты-пиксели этой большой и необычной картины разъезжаются по всему миру и становятся частью личных коллекций. Одна из возможных идей развития проекта — временное воссоединение и экспонирование в будущем гигантского мета-пикселя на какой-нибудь художественной площадке первой реальности.

Вообще мета-пиксель в современной компьютерно-опосредованной культуре нередко выступает как нарочито вскрытая значимая текстура компьютерного арт-объекта, необходимая для художественного взаимодействия произведения с его пользователем. Например, инсталляция «Душ» (2007) Александра Пономарева и Арсения Мещерякова материализует метафору информационный поток: телевизионные программы разных стран мира буквально льются на зрителя, вошедшего в кабину, выложенную мониторами, как сверкающим кафелем. На экранах мониторов транслируются программы 1000 международных телеканалов. С помощью кранов-переключателей можно изменить «температуру» потока:

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

Принципиальная бессистемность пикселированных мета-структур представлена в интерактивном проекте Metropolis Саймона Биггса (Simon Biggs). Изображение составляется из двух видеопроекций — на стене (городские ландшафты Нью-Йорка и Багдада) и на полу (виды этих городов с высоты). Движение зрителей по напольному изображению, фиксируемое сенсорами инфракрасного излучения, искажает и «разрывает» обе картинки на разрозненные квадраты-пиксели, перемешивая и взаимно «переключая» образы городов и их перспектив94.

Вообще в цифровой культуре город как таковой все чаще художественно отображается и конструируется в метапиксельных формах. Сама урбанистическая картина мира, субстанция городской толпы, матричная упорядоченность осмысленного хаос — все это влечет за собой метапик-селизацию физического и ментального пространства современных мегаполисов. Красочная галерея пиксельных картин городской жизни (Берлина, Лондона, Парижа, Сингапура и др.) создана немецкой арт-группой eBoy, итальянский художник Тотто Ренна (Totto Renna) «построил» пиксельные фрагменты Парижа, Токио, некоего города Indianapolis и даже города Key City, разместившегося между клавишами компьютерной клавиатуры95. Любопытно, что в Интернете уже начинают появляются пиксельные карты реальных городов (например, Гонконга) с интерфейсом в стилистике Google Map96.

Международное интернет-сообщество совместными усилиями строит поэтажно виртуальный пиксельный небоскреб (на данный момент его высота составляет около 17 тысяч пикселей)97 и целые виртуальные пиксельные города, структурированные в квадратные матрицы — мета-пиксели98. «Земельные участки» в таких pixel cities продаются / выдаются в виде квадратов, т. е. геометрических пикселей второго порядка, которые «владельцы» застраивают пиксельными зданиями и заселяют пиксельными человечками.

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

Вместо заключения: пиксели наступают

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

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

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

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

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

1 Моль А. Социодинамика культуры. М.: КомКнига. 2005. С. 45.

2 Lyon, Richard F. A Brief History of ‘Pixel’, Digital Photography II, IS&T/SPIE Symposium on Electronic Imaging, 15-19 January 2006, San Jose, California, USA. [Эл. Документ http://www.foveon.com/files/ABriefHistoryofPixel2.pdf, дата обращения 8.06.2010].

3 [Эл. документ http://www.aadet.com/article/pixel, дата обращения 8.06.2010].

4 Sinding-Larsen, Alf. US Patent 1,175,313, issued March 14, 1916. [Эл. документ http://www.google.com/patents?vid=USPAT1175313&id=Df9EAAAA EBAJ&dq=%22picture+element%22&as_drrb_ap=b Transmission of Pictures of

Moving Objects, дата обращения 8.06.2010].

5 Lyon, Richard F. Цит. соч.

6 Русский орфографический словарь Российской академии наук. Отв. ред. В. В. Лопатин. © Электронная версия, ГРАМОТА.РУ, 2001-2007. [ Эл. документ http://www.gramota.ru/slovari/dic/?word=%EF%E8%EA%F1%E5%EB% FC, дата обращения 8.06.2010].

7 ГОСТ 27459-87 «Системы обработки информации. Машинная графика. Термины и определения» [Эл. документ http://gost-baza.ru/38872-ГОСТ%2027459-87, дата обращения 8.06.2010].

8 Immanence in the Pixel: Traditional Cultural Origins of Math and Technology. Программа видеофильмов и экранных работ. Куратор Лора Маркс (Laura U. Marks) в рамках симпозиума The Subtle Technologies symposium (Торонто, Канада, 9-12 мая 2002 г.): [Эл. Документ http://www. subtletechnologies.com/2002/filmvideo.html, дата обращения 8.06.2010].

9 Лебедев А. Разрешение картинок. [Эл. документ http://www.stavnet. ru/users/san/mod/mirrows/kovodstvo/sections/69/default.htm, дата обращения 8.06.2010].

10 Там же.

11 Что такое «размер пикселя» и как он влияет на качество изображения? [Эл. документ http://www.slider.by/?id=2721, дата обращения 8.06.2010].

12 Как появился Марио. [Эл. документ http://forum.gameland. ru/m_2013198/tm.htm, дата обращения 14.06.2010].

13 Super Real Mario World. См.: http://pixeloo.blogspot.com/2008/03/ super-real-mario-world.html (дата обращения 14.06.2010).

14 The history of the Invasion of Iraq told as a game of Mario Brothers. См.: http://dev.null.org/blog/tags/iraq%20war (дата обращения 14.06.2010)

15 Robinson, Craig. Minipops: Famous People Drawn Really Small. Published by Mitchell Beazley, 2004. [Эл.документ http://www.flipflopflyin. com/minipops/index.html, дата обращения 14.06.2010].

16 См. серию работ «Very Important Pixels» Кристофа Сэлена (Kristof Saelen) на: http://www.veryimportantpixels.com/ (дата обращения 14.06.2010).

17 Goldbert, Adele and Flegal, Robert. ACM president’s letter: Pixel Art, Communications of the ACM, Vol. 25, Issue 12, Dec. 1982.

18 Иванов А. Блуда и МУДО. СПб.: Азбука-классика, 2007. [Эл. документ http://readr.ru/aleksey-ivanov-bluda-i-mudo.html, дата обращения 10.06.2010].

19 Вельфлин Г. Основные понятия истории искусств. М.: Изд-во

В. Шевчук. 2002.

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

21 Maeda, John. Maeda @ Media //Journal d’un explorateur du numérique, Thames and Hudson, 2000. Цит. по: Beyaert, Anna. L’esthétique du pixel. L’accentuation de la texture dans l’œuvre graphique de John Maeda //Communication et langages. 2003, Vol. 138, p.29. [Эл. документ http:// www.persee.fr/web/revues/home/prescript/article/colan_0336-500_2003_ num_138_1_3233, дата обращения 14.06.2010].

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

23 Zolli, Andrew. Pixelvision: A Meditation. [Эл. документ http://www. core77.com/reactor/opinion_06.03.asp, дата обращения 5.06.2010].

24 First Pixels Facing Middle Age [Эл. Документ http://www.ratchetup. com/eyes/2003/08/behold_friends_.html дата обращения 10.06.2010].

25 Zolli, A. Pixel culture. American Demographics, June 2004. P.44.

26 Иванов А. Блуда и МУДО. СПб.: Азбука-классика, 2007. [Эл. документ http://readr.ru/aleksey-ivanov-bluda-i-mudo.html, дата обращения 10.06.2010].

27 Там же.

28 См. например, пост блоггера М.МакВертера (Michael McWhertor) с многозначительным заголовком «Я 8-битный и остальной Голливуд такой же» [Эл. документ http://kotaku.com/5037623/i-am-8+bit-and-so-is-the-rest-of-hollywood, дата обращения 5.06.2010].

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

30 Origins оf Cross Reference Grid & Picture Grid Puzzles. [Эл. документ http://www.puzzlemuseum.com/griddler/gridhist.htm, дата обращения 5.06.2010].

31 Например, проект Blinkenlights (2001) в Берлине http://blinkenlights. net/blinkenlights; Blinkenlights Arcade (2002) в Париже http://blinkenlights.

net/arcade; подобные игры также происходили в городах Финляндии (2007), Китая (2008), Мексики (2008) и других стран.

32 Smith, Alvy R. A Pixel Is Not A Little Square, A Pixel Is Not A Little Square, A Pixel Is Not A Little Square! (And a Voxel is Not a Little Cube), Tech Memo 6, Jul 17, 1995. Р. 7. [Эл. документ http://alvyray.com/Memos/6_pixel.pdf, дата обращения 7.06.2010].

33 Zolli A. Pixelvision

34 Уорф Б. Л. Отношение норм поведения и мышления к языку //Языки как образ мира. М.: Изд-во «АСТ», Спб.: Terra Fantastica. 2003. С. 157-22.

35 Zolli, Andrew. Pixel culture. P.44.

36 Лихачева Ю. Мобильное искусство//Алло, МТС, 01.01.2008. [Эл. документ http://www.vibra.ws/index.s.php?id=articles&loc=mobile_tech/ mobile_art_2008.php, дата обращения 20.06.2010].

37 См. напр. рекламные постеры LEGO, Lebeau и Crime Stoppres в статье: Гладкий Ю. Пикселиризация рекламы в развитии 8-битной культуры. [Эл. документ http://www.adeator.com/?p=154#more-154]; рекламный постер телеканала Sky TV: http://www.flickr.com/photos/sabrinaeras/2065863328/ in/pool-the_pixel_artists; а также http://hello.eboy.com/eboy/category/ everything/explore/work/advertising/ (дата обращения 17.06.2010).

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

39 Например, метапиксельныая структура для выбора сюжетов «Новости 24 часа» на http://www.ntv.ru/novosti/ или http://fotki.yandex.ru/. Подчеркнем, что такая организация концептуальных пикселей характерна для огромного количества российских и зарубежных сайтов, в т. ч. социальных сетей, содержащих большой визуальный материал.

40 См.: [Эл. документ http://www.iconvention.ru/, дата обращения 11.06.2010]. Еще один яркий пример: рекламный баннер (в пространстве города и в Сети) о тарифе мобильного Интернета под девизом «Отдыхай на даче, качай в Интернете», где вода из деревенской водокачки изображена в виде геометрических пикселей [http://www.megafon-leto.ru/gprs/, дата обращения 10.06.2010].

41 См.: [Эл. документ http://vorpal.us/img/waveofthefuture.jpg, дата обращения 11.06.2010].

42 См.: [Эл. документ http://www.vam.ac.uk/images/image/52424-popup.html, дата обращения 11.06.2010].

43 Wave of the Future is now the past [Эл. документ http://vorpal.

us|2007|07|wave-of-the-future-is-now-the-past|, дата обращения 11.06.2010].

44 Beyaert, Anna. L’esthétique du pixel. L’accentuation de la texture dans l’œuvre graphique de John Maeda ||Communication et langages. 2003, Vol. 138, p.29. [Эл. документ http:||www.persee.fr|web|revues|home|prescript|article| colan_0336-500_2003_num_138_1_3233, дата обращения 14.06.2010].

45 Германское арт-шоу Ich bin 8-bit (2009) http:||www.ohwhataworld. de|2009|03|30|pictopisch-3| (дата обращения 20.06.2010).

46 Например, проект голландского художника Арно Коэнена (Arno Coenen) Game Meadow, в котором пиксельные картинки, взятые из компьютерных игр или телевизионных заставок, воспроизведены с помощью тротуарной плитки на площади г. Утрехт. http:||www.arnocoenen.nl|index.php ?mact=Album,m4,default,1&m4albumid=46&m4returnid=51&page=51 (дата обращения 20.06.2010).

47 См., например, уличные пиксельные граффити: http:||uaddit.com| discussions|showthread.php?t=725 (дата обращения 5.062010).

48 Например, польские панельные дома 1970-х гг., которые часто раскрашивали в виде разноцветных пиксельных картинок или современный барселонский небоскреб Торре Акбар: http:||lifeglobe.net|blogs| details?id=739 (дата обращения 11.06.2010).

49 Картины из мелков Crayon Кристиана Фора (Christian Faur). См. на: http:||www.christianfaur.com|crayons|crayons.html (дата обращения 4.06.2010). Примечательно, что пиксельные картины из мелков создаются на основе компьютерно-отсканированных фотографий.

50 Автопортрет Фабиана Канцлера (Fabian Kanzler). См. на: http:||www. fabianjochenkanzler.de|study|pixelportrait| (дата обращения 5.06.2010).

51 Рекламный постер Дж. Маэды (John Maeda) Too Mona. См. на: http:|| www.ntticc.or.jp|Archive|2001|Post_Digital|Works|too_mona.html (дата доступа 14.06.2010).

52 Maeda, John. Maeda @ Media, 2000. Цит. по: Beyaert, Anna. L’esthétique du pixel… p.38.

53 См. http:||www.space-invaders.com|rubikubism.html (дата обращения 14.06.2010).

54 См. Пиксельная мозаика Ари Крапника [Эл. документ http:||www. kulturologia.ru|blogs|120510|12462|, дата обращения 19.06.2010]. Примечательно, что эскизы для своих картин автор создает с помощью компьютерных программ и уже затем собирает их из материальных пикселей.

55 См.: Видео-клипы о Lego-игре Mario 8-bit Trip http:||www.youtube. com|watch?v=4qsWFFuYZYI&feature=player_embedded#! и Super Lego Mario

(Level 1) http://www.youtube.com/watch?v=hmWWfnKVbYY&NR=1 (дата обращения 17.06.2010).

56 См. например, его книгу Mitgutsch А. Mein schönstes WimmelBilderbuch, Ravensburger Buchverlag, 2010 http://www.hitparade.ch/ bookimage.html?ali_mitgutsch-mein_schoenstes_wimmel-bilderbuch.jpg или http://astore.amazon.de/200350/images/347332597X, где явно видна мета-пиксельная структура его работ.

57 См. его работы на: http://www.james-rizzi.com/Werke/81%20RIZZI%20 PRINTS%200N%20THE%20WALL:::de-007-RIZZI00480.html, в т. ч. A Bunch of Squares (2010) http://www.james-rizzi.com/pictures/A%20BUNCH%200F%20 SQUARES:::en-007-Z52035.html;

81 RIZZI PRINTS ON THE WALL

http://www.james-rizzi.com/Available_Artwork/81%20RIZZI%20 PRINTS%200N%20THE%20WALL:::en-007-RIZZI00480.html и др.

58 См. картины П.Синьяка «Папский дворец» и др. на: http://artlibrary. ru/brand/123 (дата обращения 11.06.2010)

59 См. картины Ж.Сера «Эйфелева башня» и др. на: http://www. printdigital.ru/seurat/seuratwork.php (дата обращения 11.06.2010).

60 См. http://www.sai.msu.su/cjackson/mondrian/p-mondrian7.htm.

61 См. http://www.nga.gov/cgi-bin/tsearch?artistid=1839&page=1&sec tion=W.

62 См. http://www.artyou.ru/images/stories/art/1957_1959/Salvador_ Dali_1957_1959_14.jpg.

63 См.: http://www.artyou.ru/images/stories/art/1972_1979/Salvador_ Dali_1972_1979_16.jpg.

64 См.: http://www.artyou.ru/images/stories/art/1972_1979/Salvador_ Dali_1972_1979_18.jpg.

65 См. : http://www.artyou.ru/images/stories/art/1972_1979/Salvador_ Dali_1972_1979_4.jpg.

66 http://www.artfund.org/savebluerigi/Brushstrokes.html (дата образе-ния 17.06.2010).

67 http://dream-worlds.ru/2010/04/21/ (дата обращения 19.06.2010).

68 http://www.milliondollarhomepage.com/ (дата обращения 8.06.2010).

69 http://www.neolit.ru/news/show/000035.html (дата обращения 8.06.2010).

70 Например, работа Эшли Андерсон (Ashley Anderson) Kirby’s Cupcake (акрил, холст) http://www.flickr.com/photos/pressstarttobegin/2242333964/ in/pool-the_pixel_artists. См. также работы Светланы Баклановой http:// expert-ural.com/content/images/images/46_09.jpg; Владимира Михайлу-

цы http://www.mv-art.spb.ru/grafic/other.php?photo=5; Георгия Пузенкова http://www.artinfo.ru/ru/news/main/ARTiKULYACIA-49.htm; выставочные проекты MAKE (Антона Польского) So serious (2007) http://www.fctv.ru/ watch/f5721558fec74aa481e76a2eb16c5c43; Алексея Романенко Дефраг-ментация (2008) http://kultura.com.ua/page.jsp?id=1583 (дата обращения 5.06.2010).

71 Dаllenbach, Lucien. Mosaïques, Un objet esthétique à rebondissements, Le Seuil, 2001. Цит. по: Beyaert, Anna. L’esthétique du pixel…p.29. [Эл. документ http://www.persee.fr/web/revues/home/prescript/article/ colan_0336-00_2003_num_138_1_3233, дата обращения 14.06.2010].

72 Группа графических дизайнеров-пикселистов из Германии (Kai Vermehr, Steffan Sauerteig, Svend Smital). Сайт группы: http://hello.eboy.com/ eboy/ ; интервью с художниками: http://www.cafebabel.co.uk/article/24073/ eboy-berlins-godfathers-of-pixel.html (дата обращения 16.06.2010).

73 См.: http://www.kennethfejer.com/ (дата обращения 16.06.2010).

74 Пиксельные картины низкого разрешения печатаются на настоящих холстах. См. http://www.secretlair.com/index.php?/clickableculture/entry/ jude_buffums_pixel_paintings/ (дата обращения 15.06.2010).

75 Финский художник, который также известен как Polyfonken of Ghost Monkey. См. его работы на http://www.polyfonken.com/index.html (дата обращения 17.06.2010).

76 That’s a Pixel, But Is It Art? [Эл. документ http://www.sfgate.com/cgi-bin/blogs/culture/detail?blogid=3www.google.com&entry_id=158, дата обращения 15.06.2010].

77 В первую очередь его совместная работа с Марком Дэйвисом (Marc Davis) и Брайеном Вильямсом (Brian Williams) Media Streams Icons (1994) — система знаков для визуального языка видеовещания, включающая обширный «вокабулярий», «синтаксис» и «семантику». См.: http://www.Aong. com/projects/icons/ ; а также New Year Card Design Machine http://www.Aong. com/storage/experience/newyear/newyear01/ (дата обращения 15.06.2010).

78 См. интерактивные работы Recombinant Icon http://www.littlepig. org.uk/icon/icon.htm и Mozaic http://www.littlepig.org.uk/mozaic/mozaic.htm (дата обращения 17.07.2010).

79 Можно попиксельно создать свой образ или редактировать уже имеющиеся, в т. ч. выстроить из готовых пиксельных картинок, расположенных по соседству, метапиксельную, например, метапиксельный текст I lost the game. См. http://pixelarts.6x.to/ (дата обращения 15.06.2010).

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

бегать по экрану, постепенно собираясь в пиксельное изображение — человечка, зайца, логотипа adidas и пр. См.: http://www.drububu.com/ (дата обращения 15.06.2010).

81 На гигантскую виртуальную «стену» можно добавлять свои пиксельные граффити http://blaggart.com/#x=0&y=0&z=8 (дата обращения 15.06.2010).

82 Существует интерфейс и web-приложение для мобильного телефона 12Pixels, которое позволяет рисовать и обмениваться пиксельными изображениями: http://ivanpoupyrev.com/projects/12Pixels.php (дата обращения)

83http://www.flickr.com/photos/watz/1402738268/in/photostream/ (дата обращения 18.06.2010).

84 Проект Даниэля Розина (Daniel Rozin) Wooden Mirror (1999) http://www.smoothware.com/danny/woodenmirror.html (дата обращения 15.06.2010).

85 Проект Арама Барсола (Aram Bartholl) Papierpixel (2004) http://www. datenform.de/ppeng.html (дата обращения 5.06.2010).

86 Например, http://www.atomicpixeldesign.com/index.php (дата обращения 17.06.2010).

87 Иванов А. Блуда и МУДО. СПб.: Азбука-классика, 2007. [Эл. документ http://readr.ru/aleksey-ivanov-bluda-i-mudo.html, дата обращения 10.06.2010].

88 Например, пиксель высокого разрешения шуточно вскрывается как «скрытая реклама» в сериале «Симпсоны» на канале 2х2 http://www. videosostav.ru/video/ab502a1b1ce4142123fb95f6c043e87e

89 См. подробнее: Фотомозаика — искусство нового времени. [Эл. документ http://www.log-in.ru/articles/476/, дата обращения 17.06.2010].

90 Например: http://vnevremeni.ru/wps/archives/202 (дата обращения 15.06.2010).

91 Главное меню «Галерея конкурсных работ» http://www.hugocreate. com/en/gallery — как метапиксель высшего порядка и затем, например, http://www.hugocreate.com/en/gallery-round-15 — метапиксель «Раунд № 15», и затем, например, http://www.hugocreate.com/en/gallery-round-15-view-51123 — концептуальный пиксель, работа Gordon Bonnar из Великобритании, которая совершенно неожиданно также оказалась сотоящей из четырех концептуальных субпикселей (изображений флакона духов).

92 http://www.kamenev.ru/html/index_r.htm (дата обращения 17.06.2010).

93 См. подробнее: WAM, №26, ч.2., 2007. С.90-91. [Эл. документ

http://www.knigiwam.ru/images/wam26x2/wam26x2.pdf, дата обращения 15.06.2010].

94 http://www.littlepig.org.uk/installations/metropolis/index.htm (дата обращения 18.06.2010).

95 http://supertotto.com/site/archives/tag/news/ (дата обращения 19.06.2010).

96 http://hongkong.edushi.com/Default.aspx?L=en (дата обращения 19.06.2010).

97 www.mrwond.de/myhouse/index.htm (дата обращения 11.06.2010).

98Пиксельные города PixelDam http://pixeldam.net/faq.

asp?id=1, Lovepixel www.lovepixel.idv.tw, Авалон http://www.avalon.ru/ HigherEducation/Design/Gallery/WebGraphics/, Icon Town www.icontown.de, Isocity http://www.kennethfejer.com/isocity/ (дата обращения 19.06.2010).

99 «Boy meets Pixel», Craig Robinson (2000-2003) http://www.flipflopflyin. com/boymeetspixel/index.html (дата обращения 4.06.2010).

100 Интернет-сообщество евангелистов St.Pixels http://www.stpixels. com/intro-welcome (дата обращения 20.06.2010).

101 См.: Видеоролик Pixel Stars invade NY (продукция Onemoreprod & Patrick Jean) http://www.youtube.com/watch?v=8K_UgV86jL8&feature=related (дата обращения 20.06.2010).

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

Цель:
Эта статья расскажет вам о том, что такое пиксель-арт, чем он не является, с чего начинать делать пиксель-арт и как сделать ваш пиксель-арт лучше. Данная статья является компиляцией советов и полезной информации для новичков с различных топиков и уроков по пиксель-арту. Для более продвинутых я советую почитать что-нибудь посерьёзнее, например Ramblethread! Я нашёл его на Pixelation, там много разной специфичной информации, например о пиксельных кластерах, анти-ализинге, бандинге и т.д.

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

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

Ну ОК, с фотографиями всё понятно. Но что если я на компьютере нарисую что-нибудь, это будет пиксель-артом?
Нет. Пиксель-арт это особая категория цифрового арта. Его суть не в том из чего он сделан, а скорее как он сделан. Например, цифровой рисунок сделанный на компьютере состоит из пикселей, но это не пиксель-арт:

«Если пиксель арт теряет чувство важности пикселей из которых он сделан, то я не могу называть его пиксель-артом. Только когда пиксели сохраняют в себе всю важность сути работы, только тогда это можно называть пиксель-артом.» — Alex HW

1.1 Почему не весь цифровой арт может считаться пиксель-артом

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

Всего несколько пикселей сдвинулись вбок и это уже другой попугай.

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

Авторазмытие (autoblur) было использовано, чтобы размыть края этого пятна.

Вы также могли часто слышать от других «Это не пиксель-арт, здесь слишком много цвета!». На самом деле это не так, в пиксель-арте нет какого-то
правила типа «Пиксель-артом считается изображения с Х количеством цветов». Вы вольны использовать столько цветов сколько вам захочется. Главная причина, по которой вы это слышите в том, что эти люди указывают вам на то, что такое большое количество цветов было получено с использованием «грязных инструментов». Грязные инструменты – создают большое количество новых цветов, чтобы создать эффект размытия, смазывания или прозрачности. Это напрямую влияет на размер цветовой палитры, чем она больше, тем сложнее становится её контролировать. Но мы поговорим об этом позже.

1.2 Почему пиксель-арт это не только инструменты

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

Нет. Не программа определяет, считается изображение пиксель-артом или нет, всё зависит от того КАК оно сделано. Например это было нарисовано в MS Paint без всяких премудростей:

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

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

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

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

2. С чего начать?

2.1 Советы

Пиксель-арт про пиксели – всё просто. Приведённые ниже советы преследуют общую цель: убедится, что вы сосредоточены на пикселях.

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

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

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

2.2 Программы

Есть много хороших программ для пиксель-арта, многие из них бесплатные. Я использую Grafx2, но ещё есть GraphicsGale, Pro Motion, Photoshop, Pixen и даже MS Paint вполне себе распространённый выбор. Некоторые из них более дружелюбны к пользователю, некоторые нет. Именно по этой причине я предпочитаю, те пакеты в которых есть множество хоткеев. Например Grafx2, а не MS Paint, это сохраняет мне много времени (особенно при работе с палитрой).

2.3 Тип Файла

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

Зарубите себе на носу, никогда не сохраняйте в JPG. Используйте PNG или GIF. Но будьте осторожны, так как некоторые программы (например MS Paint) недостаточно хорошо поддерживают формат GIF, что может испортить вашу работу. В таких случаях я советую использовать файловый конвертер (например Giffy), если вам надо сохранить вашу работу как GIF.

2.4 С чего мне начать?

Тут всё зависит от вас самих. Некоторые предпочитают сначала сделать лайн-арт, а затем переходить к работе с цветом:

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

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

3. Термины пиксель-арта

3.1 Анти-ализинг (АА/Anti-aliasing)

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

без AA с добавленным AA

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

3.2 Дизеринг (Dithering)

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

Наиболее часто встречаются следующие формы дизеринга: 50/50, также известное как 50% dither или паттерн шахматной доски.

Как видно на примерах сверху, вы можете использовать различные паттерны, чтобы создать переход от чистого цвета к 50% dither. Однако эти паттерны будут более заметны чем 50% dither, так что будьте аккуратны с ними!

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

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

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

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

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

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

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

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

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

4. Чего следует избегать

4.1 Плохой анти-ализинг

Слишком много АА – Вам следует использовать АА в меру. Если использовать его слишком много, то края формы станут выглядеть размытыми и вы потеряете чёткость линии.

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

АА бандинг (AA banding) — Это когда сегменты линии анти-ализинга одной длины с линией формы, к которой они применяются. Для лучшего понимания, что это такое, прочтите раздел об АА бандинге.

4.2 Зазубрины

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

Как их исправить:

Изменить длину линий

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

Анти-ализинг

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

Всё это происходит благодаря квадратной природе пикселей и тому что мы ограничены сетчатым паттерном, в создании кривых линий и линий под наклоном. Анти-ализинг это естественный выход из данной ситуации.

4.3 Плохой дизеринг:

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

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

Так как много дизеринга нам нужно использовать? Ну, это зависит от того насколько большая у вас палитра цветов – или говоря более точно, насколько силён контраст между двумя цветами, когда вы используете дизеринг. Чем он ниже (по тону или оттенку), тем менее грубым будет выглядеть дизеринг.

4.4 Бандинг (Banding)

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

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

Обнимашки (Hugging):

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

Жирные пиксели (Fat pixels):

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

Минус-один бандинг:

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

Бандинг под 45 градусов:

Несмотря на то что, к строкам добавлен лишь 1 пиксель, бандинг всё равно присутствует.

4.5 Подушечный шейдинг

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

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

4.6 Шум

Большую часть времени, независимые пиксели (пиксели которые не принадлежат к пиксельному кластеру), не могут передавать достаточно информации зрителю и их появление обычно создаёт лишь шум. Шум, это любая информация которая не связана с изображением и которая лишь отвлекает внимание зрителя. В пиксель-арте шум часто возникает именно по вине независимых, отдельных пикселей. Ради блага этой статьи, везде где я буду упоминать слово «шум», под ним будет иметься именно одно-пиксельный шум. Особенно внимательным надо быть при 25% дизеринге (да и вообще с любым дизерингом как таковым), потому что возникают независимые пиксели, которые могут вызвать шум.

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

Какие же это бывают случаи? Давайте их рассмотрим:

Точечный блик

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

Отображение маленьких, но важных деталей

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

4.7 Избирательный контур (разорванный контур)

Избирательный контур (известный также как sel-out от selective outlining) это анти-ализинг контура цветом фона. Это означает, что на самом деле избирательный контур это пример плохого АА, но термин избирательный контур стал очень популярен, поэтому я решил выделить ему свой раздел.

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

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

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

От DB:

Избирательный АА (Внутреннее утоньшение) это процесс вытягивания/приближения внутреннего АА к контуру…с идеально созданным внешним АА.

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

5.Создавая палитру

5.1 Когда мне следует беспокоится о цвете?

«Ну, по сути ведь всё сводится к тому какие цвета должна иметь картина? Сначала я смотрю как долго смогу обходиться с теми, что у меня уже есть (само собой если мне не нужно добавить новых оттенков). Затем я перехожу к смешиванию цветов.» -Adarias

Вот самый распространённый метод по созданию цветовой палитры. Пример, того что имел Adarias в своём высказывании:

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

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

Лично мне больше подходит первый метод, где я добавляю новые цвета по мере надобности.

5.2 Количество цветов

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

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

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

Контроль – Чем палитра меньше, тем проще с ней работать. Вы можете (и, наверное, рано или поздно захотите) по мере работы изменить цвет. Если у вас палитра в 200 цветов, то у вас уйдёт куда как больше времени на это, потому что изменение одного цвета повлечёт за собой изменение других, соседствующих с ним по цветовому ряду. А изменение соседних приведёт к тому, что вам придётся менять и их соседей! Вы запросто можете себе представить во что может превратиться желание просто поменять цвет, когда у вас огромная палитра цветов. С маленькой палитрой, эффект смены цвета будет не столь драматичным и его связь с соседями будет не столь сильна.

5.3 Оттенок, Насыщенность и Тон

Оттенок — разновидность одного и того же цвета. Тогда как цвет определяется как синий, красный, оранжевый и т.д.:

На картинке сверху оттенок отображён по оси Х.

Вы можете изменить яркость цвета разместив вокруг него тёмные или светлые пиксели, воспринимаемый оттенок цвета зависит от его окружения. Вот к примеру нейтральный серый цвет:

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

Из-за того что фон фиолетовый (который противостоит зелёному на цветом колесе), то серый выглядит как зелёный.

Оттенок это очень важное понятие, о нём мы дополнительно поговорим в теме об изменении оттенка.

Насыщенность определяет чистоту цвета. Чем ниже насыщенность, тем ближе цвет к серому:

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

Тон (также известный как яркость или светлота) это то, насколько цвет тёмный или светлый. Чем тон выше, тем ближе цвет к белому. Чем она ниже, тем ближе к чёрному. У чёрного цвета тон 0. Вот пример палитры выстроенной по тону цвета:

Низкий тон (тёмный цвет) слева, высокий тон (яркие цвета) справа.

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

А это исправленный пример, с распределением по тёмным и светлым цветам:

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

Тон очень сильно связан с пиксель-артом: Яркость пикселя или линии определяет насколько толстым он или она будет казаться.

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

Цветовые Наборы

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

Вот пример палитры:

Та же палитра, но выстроенная по входящим в неё цветовым наборам (в данном случае двум наборам):

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

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

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

Вот палитра, что использует один лишь серый, чтобы закрыть брешь в нескольких наборах:

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

Изображение сверху показывает нам пережжённую картину, такой эффект возникает из-за цвета с слишком высокой насыщенностью.

…а в этом случае, эффект жжёности создан зелёным цветом на фоне фиолетового. Оттенок должен логично следовать своим соседям по набору.

5.4 Сдвиг оттенка

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

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

Place: грандиозный и бессмысленный пиксель-арт-проект в цифрах и фактах

Сайт Reddit на 1 апреля запустил социальный эксперимент Place. Трое суток на пустом холсте размером 1000 на 1000 пикселей каждый участник сообщества мог закрасить один пиксель раз в пять минут. «Афиша Daily» рассказывает об истории грандиозного пиксельного арта в фактах и числах.

Впечатляющая визуализация эксперимента Place в 3D

Популярный социальный агрегатор новостей Reddit запустил эксперимент Place в качестве первоапрельской шутки, но спустя неделю он вошел в историю. Вокруг него сформировалась целая субкультура с достижениями, конфликтами и трагедиями (вся история подробно пересказана в блоге Sudoscript). Первопроходцы сначала рисовали мелкие каракули, потом пришли крупные фракции и занялись покраской холста в свои цвета. Объединения сталкивались между собой и с местными художниками. В какой-то момент было решено, что хорошие рисунки не нужно трогать, и произведения начали сохранять. Фракции получили власть, установили цензуру и стали решать, какое произведение достойно остаться на холсте, а какое не жалко закрасить. Участники холста ругались друг с другом, пока не пришли анонимы с имиджборда 4chan. Они быстро закрашивали холст черным цветом и портили работы. Их целью был черный квадрат, который откроет дорогу новому искусству.

Фракции и художники объединились, чтобы остановить «Пустоту» (атаку 4chan назвали The Void). Перед закрытием холста его одновременно редактировали 90 тысяч человек. На окончательной версии почти не осталось следов атаки, не было огромных одноцветных областей крупных фракций и оскорбительных символов. Place начался как свободная площадка без всякого контроля, прошел через хаос и пришел к балансу.

54 пикселя на человека в среднем

Картинка 36 на 24 пикселя — ровно столько было возможно закрасить за 72 часа

Главное правило Place — один пиксель можно раскрасить только раз в пять минут. То есть в одиночку за трое суток реально было поменять только 864 пикселя. Для этого придется забыть про еду и сон — или написать специального бота. 864 пикселя хватит только на картинку с разрешением 36 на 24 пикселя. Для сравнения: на одну букву, написанную самым мелким шрифтом, потребуется около 15 пикселей. Чтобы нарисовать что-то большее, людям пришлось объединяться в группы и координировать действия. Но активные участники даже близко не подобрались к лимиту. Средний пользователь из первых 10 тысяч самых активных покрасил только 54 пикселя. Это немало. Если красить их за один подход, то на это уйдет 4,5 часа. Самые активные участники из первой десятки покрасили в три раза больше — около 143 пикселей.

5874 подписчика

На гифе отображается соревнование по захвату территорий разными фракциями: «Красный угол», «Синий угол», «Зеленая решетка», «Радужная дорога»

Первые крупные фракции просто захватывали территорию. Самая известная организация на Place «Синий угол» начала активную экспансию из нижнего правого угла, «Красный угол» захватил верхний правый угол, но больших успехов не добился, «Зеленая решетка» схитрила и закрашивала пиксели через один. Но самой популярной фракцией был не «Синий угол», который в свое лучшее время занял шестую часть холста, а «Радужная дорога». Это мирная фракция, она не захватывала чужую территорию и не портила произведения, а занимала все свободное место радужными полосами. На сабреддит «Зеленой решетки» подписано 3060 пользователей, на сабреддит «Синего угла» — 4670 пользователей, а на «Радужную дорогу» — 5874 пользователя.

(999, 999)

Пиксель с координатами (999, 999) в нижнем правом углу перекрашивали чаще всего. За трое суток его отредактировали 11 524 раза. Почему он всем понадобился — неизвестно, возможно, это связано с экспансией «Синего угла». Точка (999, 999) интересовала людей намного чаще любых других. Например, второй по популярности пиксель (0, 0) в начале системы координат редактировали в два раза реже — 5002 раза. Ожесточенная война за пиксели развернулась на месте логотипа ритм-игры Osu!, из-за американского флага и призмы с обложки альбома Pink Floyd — все три объекта активно атаковали воины «Пустоты» с 4chan.

25,9% черного

Активная экспансия воинов тьмы с 4chan

На Place были доступны 16 цветов. Чаще всего рисовали не цветами популярных фракций (синим, красным и зеленым), а черным. За трое суток в черный окрасили четверть всех пикселей. Возможно, это связано с вторжением «Пустоты» с 4chan, для которого использовали черный цвет. Синий и красный занимают второе и третье места. Ими красили реже (12,3% и 9,1%), но кучнее. Если представить, что окончательный холст состоит только из цветов, в которые чаще всего перекрашивали пиксели, то на картинке будет много синего и красного.

4977 подражателей Ван Гога

Одни фракции Place занялись захватом территории, другие — искусством. Внизу холста находится пиксельная копия картины «Звездная ночь» Ван Гога в разрешении 79 на 63 пикселя. Она состоит из 4977 пикселей, поэтому, чтобы нарисовать картину за минуту, потребовалось бы 4977 человек. Непонятно, сколько человек рисовали «Звездную ночь» на Place, но известно, что часть из них пользовалась скриптом. Такую картину сложно нарисовать без плана, поэтому для нее заранее подготовили схему с координатами пикселей. Работу со схемой обсуждали в отдельном канале в Discord. Для самых сложных картин, например для пиксельной Моны Лизы, писали отдельный скрипт.

84 флага

На итоговом холсте виднеется множество флагов: Аргентины, Бразилии, Великобритании, Европейского союза, Индии, Канады, Польши, России, Украины, Финляндии, Эстонии и многих других стран — всего около 84. Самые большие по площади — флаги Германии, Норвегии, Нидерландов, США, Франции и Швеции. Согласно данным Alexa, основной трафик на Reddit идет из США (55%), Великобритании, Канады, Австралии и Германии (меньше 10%). Есть флаги почти всех стран Европы, большинства стран Южной Америки и Океании, но нет флагов стран Африки, Ближнего Востока, Центральной Азии и КНДР. Таким образом, Place наглядно показывает, в каких местах на планете существуют проблемы с доступом в интернет.

2411 старейших пикселей

Белым выделены пиксели, которые не редактировались ни разу

На холсте приходилось бороться за территорию, защищать работы от посягательств и портить чужие произведения ради собственных. Авторы флага Германии устроили атаку на флаг Франции и вытеснили его со своего места (потом они помирились и нарисовали флаг Европейского союза). Место на холсте закончилось, но 2411 пикселей не редактировались ни разу (их назвали старейшими пикселями). Чаще всего нетронутые точки оставались вокруг работ с белым фоном, например рядом с пингвином Linux. Их не было смысла редактировать, так как холст изначально был белым.

8 клонов

Один из клонов под названием PixelScape

Когда холст закрыли, энтузиасты создали клоны, чтобы продолжить покраску пикселей: Place 2.0, Pxls.Space, PixelScape, Pixel Place, PlaceTwo, Place Reloaded, ColorThis.Space. Они работают по похожему принципу, но имеют особенности. В одном месте меньше интервал, в другом есть 3D, в третьем отличаются цвета. Ни один из клонов не ощущается как полноценная замена Place. Некоторые уже выглядят брошенными, на других собралась своеобразная публика, например националисты или хентайщики. Лучшим клоном был PlaceTwo, но на момент написания материала холст сломался.

1,5 тысячи деталей пазла

Adobe Photoshop: Рисуем и анимируем персонажа в технике Pixel Art

В этом уроке вы научитесь рисовать и анимировать персонажей в технике Pixel Art. Для этого вам понадобится только программа Adobe Photoshop. В итоге получится GIF с бегущим космонавтом.

Программа: Adobe Photoshop

Сложность: новички, средний уровень

Понадобится времени:  30 мин – час

I. Настройка документа и инструментов

Шаг 1

Выберите Pencil (карандаш) на панели инструментов – это будет основной инструмент для нашего урока. В настройках выберите тип Hard Round brush, и установите остальные значения так же как на картинке. Наша цель – сделать перо карандаша максимально резким.

Шаг 2

В настройках Eraser Tool (ластик) выберите режим Pencil Mode, и установите остальные значения как показано на картинке.

Шаг 3

Включите пиксельную сетку Pixel Grid (View > Show > Pixel Grid). Если в меню нет такого пункта, то зайдите в настройки и включите графическое ускорение Preferences > Performance > Graphic acceleration.

Обратите внимание: Сетка будет видна только на вновь созданном холсте при увеличении масштаба 600% и более.

Шаг 4

В настройках Preferences > General (Control-K) поменяйте режим интерполяции изображения на режим Nearest Neighbor (по соседним пикселам). Это позволит границам объектов оставаться максимально четкими.

В настройках единиц измерения и линеек установите единицы измерения линеек в пикселах Preferences > Units & Rulers > Pixels.

II. Создание персонажа

Шаг 1

И вот теперь, когда все настроено, мы можем приступить непосредственно к рисованию персонажа.

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

Шаг 2

Уменьшите масштаб эскиза до 60 пикселей в высоту, используя комбинацию клавиш Control+T, или команду Edit > Free Transform.

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

Шаг 3

Приблизьте эскиз на 300-400%, чтобы было легче работать, и уменьшите прозрачность слоя. Затем создайте новый слой и обрисуйте контуры эскиза, используя Pencil Tool. Если персонаж симметричный, как в нашем случае, можно обрисовать только половину, а затем продублировать и отразить нарисованное зеркально (Edit > Transform > Flip Horizontal).

Ритм: Чтобы нарисовать сложные элементы разбивайте их на части. Когда пикселы (точки) в линии образуют «ритм», например, 1-2-3, или 1-1-2-2-3-3, набросок выглядит более гладко для человеческого глаза. Но, если того требует форма, этот ритм может быть нарушен.

Шаг 4

Когда контур будет готов, можно выбрать основные цвета и раскрасить большие формы. Делайте это на отдельном слое под контуром.

Шаг 5

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

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

Шаг 6

Создайте новый слой для бликов.

Выберите режим наложения Overlay из выпадающего списка на панели слоев. Нарисуйте светлым цветом над теми областями, которые хотите подсветить. Затем сгладьте блик, применив фильтр Filter > Blur > Blur.

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

Шаг 7

Теперь космонавту нужно добавить контрастности. С помощью настроек уровней (Image > Adjustments > Levels) сделайте его ярче, а затем отрегулируйте оттенок с помощью опции Color Balance (Image > Adjustments > Color Balance).

Теперь персонаж готов к анимации.

III. Анимирование персонажа

Шаг 1

Создайте копию слоя (Layer > New > Layer Via Copy) и сдвиньте ее на 1 вверх и на 2 пиксела правее. Это ключевой пункт в анимации персонажа.

Снизьте прозрачность оригинального слоя на 50% чтобы видеть предыдущий кадр. Это называется “Onion Skinning”(режим плюра).

Шаг 2

Теперь согните руки и ноги персонажа так, как будто он бежит.

● Выделите левую руку инструментом Lasso
● Используя FreeTransformTool (Edit > FreeTransform) и удерживая клавишу Control, передвиньте границы контейнера так, чтобы рука отодвинулась назад.
● Выделите сначала одну ногу, и немного растяните ее. Затем вторую ногу наоборот сожмите так, чтобы создалось ощущение, что персонаж шагает.
● С помощью карандаша и ластика подправьте часть правой руки ниже локтя.

Шаг 3

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

Шаг 4

Сделайте копию второго слоя и отразите ее по горизонтали. Теперь у вас есть 1 базовая поза и 2 в движении. Восстановите непрозрачность всех слоев до 100%.

Шаг 5

Перейдите Window > Timeline чтобы отобразилась Timeline панель, и нажмите Create Frame Animation.

На временной шкале сделайте следующее:

1. Установите задержку времени в 0,15 сек
2. Кликните на DuplicatesSelectedFrames, чтобы создать еще 3 копии
3. Установите цикл повтора Forever

Шаг 6

Чтобы выбрать нужный слой для каждого кадра нажмите иконку Eye возле названия слоя на панели слоев. Порядок должен быть такой:

Базовая позиция→Бег с правой ноги→Базовая позиция→Бег с левой ноги.

Нажмите на пробел, чтобы проиграть анимацию.

Шаг 7

Теперь сохраните результат. Перейдите File > SaveForWebи выберите GIFформат. Установите значение 300% в графе Размер для лучшего результата, и нажмите Save.

Поздравляем! Ваш анимированный пиксельный персонаж готов!

Скачать приложения для урока

Автор: Глеб Поликанин

Перевод PressFoto

Похожее

Изометрический пиксель арт в Фотошоп / Creativo.one

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

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

1. Пиксельные линии

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

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

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

Для контраста вот несколько неравномерно структурированных линий:

 

Очень угловатые и выглядят не

красиво. Избегайте их использования.

2. Объемы

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

Создайте новый документ в Photoshop с разрешением 400 x 400 px.

Я люблю открывать дополнительное окно для того же файла, используя меню Окно > Упорядочить > Новое окно/lessons. (Window > Arrange > New Window…). Это позволяет, работая при увеличении 600% следить за результатом в окне с зумом 100%. Использование сетки — ваше дело, но иногда она кажется мне более назойливой, чем полезной.

Давайте приблизим документ и создадим одну из линий 2:1

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

Есть несколько способов нарисовать линию:

1. Используя инструмент Линия (Line Tool) с режимом Пиксели (Pixels), снятой галочкой Сглаживание (Anti-alias) и толщиной 1px. Во время рисования подсказка с углом наклона должна показывать 26,6°. На деле инструмент Линия нельзя назвать удобным, он создает неровные линии, если угол не точный.

2. Нужно создать выделение 20 х 40 px, затем выбрать Карандаш  (Pencil Tool) толщиной в 1px и нарисовать точку в левом нижнем углу выделения, после этого, удерживая нажатой клавишу Shift кликнуть в правом верхнем углу. Photoshop автоматически создаст новую линию между двумя точками. Если потренироваться, таким способом можно создавать ровные линии без выделения.

3. Нужно нарисовать карандашом два пикселя, выбрать их, нажать Ctrl + Alt, после этого перетянуть выделение на новое место так, чтобы пиксели сошлись на углах. Также можно перемещать выделение стрелками на клавиатуре, удерживая Alt. Такой метод называется Alt-смещение (Alt-Nudge).

Вот мы и создали первую линию. Выделите ее и переместите как в шаге 3 или просто скопируйте и вставьте, переместив новый слой вниз. После этого отразите вторую линию по горизонтали через меню Редактирование > Трансформирование > Отразить по горизонтали (Edit > Transform > Flip Horizontal). Я использую эту функцию так часто, что даже сделал для нее клавиатурное сокращение!

Теперь давайте объединим наши линии:

Затем, снова примените Alt-смещение, отразите копию по вертикали и объедините две половины, чтобы закончить нашу поверхность:

Пришло время добавить «третье измерение». Выполните Alt-смещение квадратной поверхности и переместите ее на 44px вниз:

Совет: Если при перемещении стрелками удерживать Shift, выделение сместится на 10 пикселей вместо одного.

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

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

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

Теперь нужно удалить черные грани. Используйте трюк из второго способа рисования линий для ластика (который должен быть настроен на обычный инструмент Ластик (Eraser Tool), режим Карандаш (Pencil Mode), толщина 1px).

Выберите цвет верхнего квадрата при помощи Пипетки (Eyedropper Tool). Чтобы быстро выбрать этот инструмент, во время рисования карандашом или заливки нажмите клавишу Alt. Используйте полученный цвет пипетки, чтобы заполнить вертикальную линию посередине куба. После этого уменьшите яркость цвета на 15% и заполните левую грань куба полученным цветом. Уменьшите яркость еще на 10% для правой грани:

Наш куб завершен. Он должен выглядеть чисто и относительно гладко при зуме 100%. Можем продолжать.

3. Добавим персонажа

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

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

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

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

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

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

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

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

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

Теперь в месте, где заканчиваются плечи, добавим вертикальную линию длиной в 12 пикселей, чтобы сделать внешнюю сторону руки, а внутренняя сторона будет на два пикселя влево. Соедините линии внизу парой пикселей, чтобы получилась рука/кулак (в нашем случае нет детализации, поэтому не обращайте внимание на этот элемент) и сразу над местом, где заканчивается рука, добавьте линию 2:1, которая будет выступать в роли талии, затем дорисуйте линию груди и получите законченную верхнюю часть тела. Другую руку персонажа не видно, но это будет выглядеть нормально, так как она закрыта туловищем.

У вас должно получиться что-то на подобии этого:

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

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

Теперь мы добавим цвет. Подобрать хороший цвет кожи всегда трудно, поэтому если вы хотите использовать такой же, как в этом уроке, его код #FFCCA5. Подбор цветов для остальных элементов не должен стать проблемой. После этого определите длину рукавов, положение разреза рубашки, ее стиль. Теперь добавьте темную полоску, чтобы отделить рубашку от тела. Я предпочитаю делать все декоративные элементы светлее черного (особенно когда много элементов находятся на одном уровне, например от рубашки до кожи или штанов). Это позволяет получить необходимый контраст, при этом изображение не будет слишком грубым.

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

Вы можете попробовать много вариантов волос. Вот несколько идей:

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

Теперь все, что осталось сделать — поместить оба элемента вместе и оценить, как они смотрятся в одной обстановке:

Если вы хотите экспортировать свое творение, PNG станет идеальным форматом.

Вот и все, работа сделана!

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

Автор: René Alejandro Hernández

Переводчик: Шаповал Алексей

Источник: design.tutsplus.com

Pixelblog — 17- Анатомия человека — SLYNYRD

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

ЗАКЛЮЧИТЕЛЬНЫЕ МЫСЛИ

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

РЕСУРСОВ

Была ли эта статья полезной? Если вы находите ценность в моем контенте, подумайте о том, чтобы стать участником Patreon . Среди множества других наград участники Pixel Insider получают дополнительные ресурсы в дополнение к моим руководствам.Но самое главное, вы позволяете мне продолжать создавать новый контент.

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

Все ресурсы в этой функции используют мою цветовую палитру Bright Future .

Получить все мои загрузки

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

— Автор: Raymond Schlitter

Базовые пиксельные спрайты человека / персонажа в различных позах (почти 100 файлов) от Next Level Gaming

База персонажей (Гуманоид) Pixel Art Sprites (примерно 100 файлов)

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

Этот пакет включает гуманоида сверху вниз основы, в разных позах, все в пиксельной графике (размер 32×32 пикселя). Каждый Поза доступна в 4-х разнонаправленных вариантах облицовки.

В этот пакет входят следующие позы:

• Постоянный
• Ходьба
• Пробивка
• Блокировка
• Заряд духовной энергии
• Высвобождение духовной энергии
• Отжимания
• Приседания
• Приседания
• Отбор мяча
• Удар ногой
• Метание
• Крючки (новые)
• Апперкоты (новые)
• Пинки (новые)

Этот пакет также содержит еще 10 пользовательские персонажи в 3 уникальных состояниях.

Приобретая этот товар, вы также купив следующую лицензию:

• Вы можете использовать эти спрайты в любых собственный проект, в том числе некоммерческий и коммерческие проекты (например, видеоигры).

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

• ВАЖНО: Спрайты на основе Дракона Персонажи Ball Z, представленные выше, не включены в это упаковка.Они просто служат для иллюстрации того, что можно сделать с базовые модели. У вас нет лицензии на использование Dragon Ball Персонажи Z, как и мы в Next Level Gaming, не владеют этими лицензиями. продать вам!

Как начать рисовать пиксель-арт №1. Руководство для абсолютного новичка | Педро Медейрос | Pixel Grimoire

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

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

Эту статью поддержал Patreon! Если вам нравится то, что я делаю здесь, пожалуйста, поддержите меня там 🙂

Кроме того, это первая часть серии статей, прочтите всю серию здесь, в Pixel Grimoire.

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

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

Инструменты

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

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

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

Aseprite

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

Создание нового файла

Просто щелкните ссылку « New File… » на главном экране или перейдите в File> New File , чтобы мы могли начать рисование.

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

Диалоговое окно «Новый спрайт» Aseprite

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

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

Давай нарисуем!

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

Рабочее пространство Aseprite

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

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

Не стесняйтесь использовать мое как источник вдохновения, но также попробуйте сделать его уникальным. Если вы ошиблись, нажмите alt + щелкните в пустой области или за пределами вашего рисунка, и вы «выберете» прозрачный цвет и сможете использовать его для стирания пикселей. Или вы можете щелкнуть Eraser или нажать E , чтобы выбрать его.

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

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

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

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

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

Сохранение файла

Чтобы сохранить файл, нажмите Control + S (или перейдите в Файл> Сохранить как… ), выберите имя файла и местоположение и просто нажмите «Сохранить».

Не забывайте, что в пробной версии Aseprite сохранение отключено!

Диалог экспорта файла Aseprite

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

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

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

Большой холст

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

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

Шаг 1: Линии

Шаг 1

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

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

Aseprite Pixel perfect algorithm

Шаг 2: Базовые цвета

Step 2

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

Шаг 3: Затенение

Шаг 3

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

Импровизация оттенков с разными оттенками

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

Оттенок с использованием инвертированного оттенка

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

Шаг 4: Сглаживание и полировка

Шаг 4

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

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

Удаление бесхозных пикселей

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

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

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

Что теперь?

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

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

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

Продолжайте читать часть 2 здесь !

Adventure Time Finn the Human Pixel Art — BRIK

{«author»: «SusanGuinto», «briks»: {«0»: 4, «1»: 57, «5»: 8, «6»: 6, «7»: 10, «8»: 5, «9»: 30}, «caseColor»: «# dddddd», «sizes»: {«columns»: «44», «rows»: «29»}, «product»: null, «size»: {» height «: 13,» width «: 13},» bbImg «:» https: // cdn.apps.joltteam.com/brikbuild/adventure-time-finn-the-human-pixel-art-198174663.bb.jpg»,»templatePDF»:»https://cdn.apps.joltteam.com/brikbuild/adventure- time-finn-the-human-pixel-art-198174663.pdf «,» pixelArt «:» https://cdn.shopify.com/s/files/1/0822/1983/articles/adventure-time-finn- the-human-pixel-art-pixel-art-adventure-time-finn-finn-the-human-fictional-character-pen-pixel-8bit.png? v = 1501128906 «,» bbl-bk «:» https: //cdn.apps.joltteam.com/brikbuild/adventure-time-finn-the-human-pixel-art-8bit-adventure-time-brik-bin-fictional-character-finn-finn-the-human-pen- пиксель-пиксель-арт-чехол для ноутбука-5a24f9adf6c96a8d29720521.bbl-black.png «,» bbl-gy «:» https://cdn.apps.joltteam.com/brikbuild/adventure-time-finn-the-human-pixel-art-8bit-adventure-time-brik- bin-fictional-character-finn-finn-the-human-pen-pixel-pixel-art-laptop-case-5a24f9adf6c96a8d29720521.bbl-gray.png «,» brickImg «:» https: //cdn.apps.joltteam. com / brikbuild / adventure-time-finn-the-human-pixel-art-8bit-adventure-time-brik-bin-fictional-character-finn-finn-the-human-pen-pixel-pixel-art-5a24f9adf6c96a8d29720521. brickImg.jpg «,» template-32×32 «:» https: //cdn.apps.joltteam.com / brikbuild / adventure-time-finn-the-human-pixel-art-8bit-adventure-time-brik-bin-fictional-character-finn-finn-the-human-pen-pixel-pixel-art-5a24f9adf6c96a8d29720521. template-32×32.jpg «,» template-16×16 «:» https://cdn.apps.joltteam.com/brikbuild/adventure-time-finn-the-human-pixel-art-8bit-adventure-time-brik- bin-fictional-character-finn-finn-the-human-pen-pixel-pixel-art-5a24f9adf6c96a8d29720521.template-16×16.jpg «,» template-33×23 «:» https://cdn.apps.joltteam.com/ brikbuild / adventure-time-finn-the-human-pixel-art-8bit-adventure-time-brik-bin-fictional-character-finn-finn-the-human-pen-pixel-pixel-art-5a24f9adf6c96a8d29720521.template-33×23.jpg «,» template-37×22 «:» https://cdn.apps.joltteam.com/brikbuild/adventure-time-finn-the-human-pixel-art-8bit-adventure-time-brik- bin-fictional-character-finn-finn-the-human-pen-pixel-pixel-art-5a24f9adf6c96a8d29720521.template-37×22.jpg «,» template-40×26 «:» https://cdn.apps.joltteam.com/ brikbuild / adventure-time-finn-the-human-pixel-art-8bit-adventure-time-brik-bin-fictional-character-finn-finn-the-human-pen-pixel-pixel-art-5a24f9adf6c96a8d29720521.template- 40×26.jpg «,» template-39×26 «:» https: // cdn.apps.joltteam.com/brikbuild/adventure-time-finn-the-human-pixel-art-8bit-adventure-time-brik-bin-fictional-character-finn-finn-the-human-pen-pixel-pixel- art-5a24f9adf6c96a8d29720521.template-39×26.jpg «,» template-35×24 «:» https://cdn.apps.joltteam.com/brikbuild/adventure-time-finn-the-human-pixel-art-8bit-adventure- time-brik-bin-fictional-character-finn-finn-the-human-pen-pixel-pixel-art-5a24f9adf6c96a8d29720521.template-35×24.jpg «,» template-44×29 «:» https: //cdn.apps. joltteam.com/brikbuild/adventure-time-finn-the-human-pixel-art-8bit-adventure-time-brik-bin-fictional-character-finn-finn-the-human-pen-pixel-pixel-art- 5a24f9adf6c96a8d29720521.template-44×29.jpg «,» template-41×27 «:» https://cdn.apps.joltteam.com/brikbuild/adventure-time-finn-the-human-pixel-art-8bit-adventure-time-brik- bin-fictional-character-finn-finn-the-human-pen-pixel-pixel-art-5a24f9adf6c96a8d29720521.template-41×27.jpg «,» cardBlue «:» https://cdn.apps.joltteam.com/brikbuild/ время приключений-финн-человека-пиксель-арт-пиксель-брик-приветствие-день рождения-рождественская открытка-синий-строительный кирпич-5a24f9adf6c96a8d29720521.jpg «,» cardWhite «:» https: //cdn.apps. joltteam.com/brikbuild/adventure-time-finn-the-human-pixel-art-pixel-brik-greeting-birthday-christmas-card-white-building-bricks-5a24f9adf6c96a8d29720521.jpg «,» poster1x1Black «:» https://cdn.apps.joltteam.com/brikbuild/adventure-time-finn-the-human-pixel-art-pixel-brik-wall-poster-1×1-black-building- bricks-5a24f9adf6c96a8d29720521.jpg «,» poster1x1Blue «:» https://cdn.apps.joltteam.com/brikbuild/adventure-time-finn-the-human-pixel-art-pixel-brik-wall-poster-1×1- blue-building-bricks-5a24f9adf6c96a8d29720521.jpg «,» poster1x1White «:» https://cdn.apps.joltteam.com/brikbuild/adventure-time-finn-the-human-pixel-art-pixel-brik-wall- плакат-1×1-белые-строительные-кирпичи-5a24f9adf6c96a8d29720521.jpg «} ::: {» customerID «: null,» pixelData «: {» 16×10 «:» 1 «,» 16×11 «:» 1 «,» 16×12 «:» 1 «,» 16×13 «:» 1 «, «16×14»: «1», «16×15»: «1», «16×9»: «1», «17×10»: «1», «17×11»: «1», «17×12»: «1», «17×13» «:« 1 »,« 17×14 »:« 9 »,« 17×15 »:« 9 »,« 17×16 »:« 1 »,« 17×8 »:« 1 »,« 17×9 »:« 1 »,« 18×10 »: «1», «18×11»: «1», «18×12»: «1», «18×13»: «9», «18×14»: «0», «18×15»: «9», «18×16»: «1 »,« 18×17 »:« 9 »,« 18×8 »:« 1 »,« 18×9 »:« 1 »,« 19×10 »:« 1 »,« 19×11 »:« 1 »,« 19×12 »:« 9 », «19×13»: «9», «19×14»: «9», «19×15»: «9», «19×16»: «1», «19×17»: «7», «19×18»: «7», «19×19» «:« 8 »,« 19×9 »:« 1 »,« 20×10 »:« 1 »,« 20×11 »:« 1 »,« 20×12 »:« 9 »,« 20×13 »:« 9 »,« 20×14 »: «9», «20×15»: «9», «20×16»: «1», «20×17»: «7», «20×18»: «7», «20×19»: «8», «20×20»: «0 »,« 21×10 »:« 1 »,« 21×11 »:« 1 »,« 21×12 »:« 9 »,« 21×13 »:« 9 »,« 21×14 »:« 9 »,« 21×15 »:« 9 », «21×16»: «1», «21×17»: «7», «21×18»: «7», «21×19»: «8», «22×10»: «1», «22×11»: «1», «22×12» «:« 9 »,« 22×13 »:« 9 »,« 22×14 »:« 0 »,« 22×15 »:« 9 »,« 22×16 »:« 1 »,« 22×17 »:« 7 »,« 22×18 »: «7», «22×19»: «8», «22×20»: «0», «23×10»: «1», «23×11»: «1», «23×12»: «9», «23×13»: «9» «,« 23×14 »:« 9 »,« 23×15 »:« 9 »,« 23×16 »:« 1 »,« 23×17 »:« 7 »,« 23×18 »:« 7 »,« 23×19 »:« 8 », «23×9»: «1», «24×10» : «1», «24×11»: «1», «24×12»: «1», «24×13»: «9», «24×14»: «9», «24×15»: «9», «24×16»: » 1, «24×17»: «6», «24×18»: «5», «24×8»: «1», «24×9»: «1», «25×10»: «1», «25×11»: «1» , «25 x 12»: «1», «25 x 13»: «1», «25 x 14»: «9», «25 x 15»: «9», «25 x 16»: «1», «25 x 17»: «9», » 25×18 »:« 5 »,« 25×19 »:« 5 »,« 25×8 »:« 1 »,« 25×9 »:« 1 »,« 26×10 »:« 1 »,« 26×11 »:« 1 »,« 26×12 » : «1», «26×13»: «1», «26×14»: «1», «26×15»: «1», «26×16»: «6», «26×17»: «5», «26×18»: » 5 «,» 26 x 19 «:» 5 «,» 26 x 9 «:» 1 «,» 27 x 15 «:» 6 «,» 27 x 16 «:» 6 «,» 27 x 17 «:» 5 «,» 27 x 18 «:» 5 » , «28×16»: «6», «28×17»: «6»}}

PIXEL ART TUTORIAL: BASICS

Metal Slug 3 (Аркада).СНК, 2000.

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

Барьер для входа в пиксельную графику также относительно низок по сравнению с рисованной или трехмерной графикой, что делает его хорошим вариантом для инди-разработчиков, стремящихся воплотить свои идеи в жизнь. Но не заблуждайтесь, это никоим образом не означает, что им легко ЗАВЕРШИТЬ игру. Я видел, как многие инди запускали свою пиксельную Метроидвания, думая, что у них есть год, чтобы закончить, тогда как на самом деле это больше похоже на шесть лет.Пиксель-арт на том уровне, который хочет сделать большинство людей, отнимает много времени, и для его создания очень мало ярлыков. По крайней мере, с 3D-моделью вы можете вращать ее, деформировать, перемещать конечности, копировать анимацию с одной модели на другую и т. Д. Пиксельная графика высокого уровня почти всегда требует кропотливого размещения пикселей на каждом кадре.

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

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

Краска

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

Удивительно надежный редактор пиксельной графики, который работает в вашем браузере! Можно экспортировать в PNG или анимированный GIF, а также сохранить локально в вашем браузере.Кажется, это отличный вариант для начала.

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

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

GameMaker Studio 2 — отличный инструмент для создания игр, ориентированный на 2d, который включает в себя достойный редактор Sprite. Если вы заинтересованы в создании пиксельной графики для своих игр, очень удобно делать все это в одном и том же программном обеспечении. В настоящее время (в 2019 году) я использую его для создания UFO 50, коллекции из 50 ретро-игр.Я в основном использую Sprite Editor от GameMaker для спрайтов и создаю свои тайлсеты в Photoshop.

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

Моя настройка пиксельной графики.Очень черный, я сейчас замечаю …

Планшет для рисования +

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

Защита запястья

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

Final Fight (Аркада). Capcom, 1989. (Источник)

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

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

1. Выбор палитры

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

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

В этом уроке я буду использовать 32-цветную палитру, которую мы создали для UFO 50.32 цвета — это популярный выбор для палитр пиксельной графики, но 16 цветов также распространены. Эта конкретная палитра была разработана для вымышленной консоли, которая лежала бы где-то между Famicom и PC Engine. Вы можете свободно использовать его, чтобы быстро обойти этот шаг! (Или нет! Это руководство вообще не зависит от палитры.)

2. Грубый набросок

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

3. Очистка контура

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

Jaggies

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

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

Давайте рассмотрим несколько примеров:

Прямые линии

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

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

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

4. Применение первых цветов

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

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

5. Затенение

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

Форма и объем

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

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

Сглаживание

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

Серые пиксели смягчают «разрывы» в нашей строке.Чем длиннее отрезок линии, тем длиннее отрезок AA, который мы используем для его смягчения.

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

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

6. Выборочное выделение

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

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

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

7. Последние штрихи

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

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

Дизеринг

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

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

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

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

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

Какюсей (PC-98). Эльф, 1996. (Источник) На этом изображении всего 16 цветов!

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

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

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

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

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

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

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

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

Полная партия в сборе!

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

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

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

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

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

Твиттер

Ключ к сохранению целостности PNG в Твиттере — убедиться, что они имеют либо менее 256 цветов, либо менее 900 пикселей на самой длинной стороне.(Источник) Я бы также увеличил размер ваших изображений как минимум до 512×512 пикселей, убедившись, что вы увеличиваете масштаб до чистого кратного (например, 200%, а не 250%) и сохраняя резкие края (так называемый «ближайший сосед» в Photoshop).

Анимированные GIF-файлы должны быть меньше 15 МБ для публикации в Twitter. Что касается качества, преобладающая теория заключается в том, что они должны быть не менее 800×800 пикселей, а циклическая анимация должна повторяться три раза, причем последний кадр GIF отображается на половине длины каждого второго кадра.Однако неясно, насколько необходимы все эти шаги, поскольку Twitter продолжает обновлять способ отображения изображений. По крайней мере, я бы удостоверился, что размер анимации минимален. (Источник)

Instagram

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

Праздник пиксель-арта в пространстве NFT — NFTS.WTF

С сегодняшнего дня, 14 июня, по 18 июня 2021 года будет праздноваться сам фундамент всего цифрового искусства — пиксель.В частности, выставка с участием восемнадцати ведущих пиксельных художников в пространстве NFT, «специально отобранных для демонстрации разнообразия, красоты и мастерства среды», как заявил организатор и вдохновитель Genuine Human, который сам является удостоенным наград пиксельным художником. , режиссер и аниматор. Genuine Human создал музыкальные клипы для GUNSHIP, а также арты для таких групп, как The Midnight, Waveshaper и многих других.

Недавно у меня был потрясающий опыт разговора с Genuine Human о его страсти к пиксельной графике и мотивах создания этого мероприятия.Помимо того, что я был супер крутым «Подлинным человеком», мне очень понравилось разговаривать с ним о его работе, пространстве NFT, сообществе и его причинах создания Pixel Art Week . Мне также очень понравилось наблюдать за его невероятным пиксельным искусством, которое, теперь я могу честно сказать, делает его одним из моих любимых художников Pixel, с которыми я сталкивался. Его сочетание пиксельной графики и его фирменного стиля киберпанк просто говорит со мной.

На

Pixel Art Week будут представлены презентации художников в Twitter, живые чаты, вопросы и ответы в Clubhouse, а также в Twitter Spaces. На выставке метавселенной SQUARED собраны лучшие образцы пиксельной графики.Основные мероприятия Недели пиксельного искусства будут проходить с сегодняшнего дня, 14 июня, по 18 июня, а дополнительную информацию можно найти на сайте www.pixelartnftweek.com, а также в Twitter @pixelartnftweek.

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

«Как вы можете взять такую ​​контролируемую среду и делать с ней такие совершенно разные вещи? с таким большим количеством разных стилей в этой среде ». Далее он рассказал о своем опыте вхождения в пространство NFT и о том, как это было для него интересно:« С CryptoPunks в основе всего этого, где пиксельные художники подходят »в мир NFT?

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

eBoy Осака

За годы работы в пиксельной графике он обнаружил, что «не все это понимают и не всем это нравится, и это нормально, но есть некоторые люди, которым это нравится, они ЛЮБЯТ ЭТО, и они становятся такими увлеченными. Его лицо просияло, когда он сделал это заявление.

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

В основе того, что вдохновило Pixel Art Week, было это желание, которое я обнаружил в нашей беседе: «Интересно, есть ли способ показать другим людям то, что я вижу в их пиксельной графике?» которые заложили идею всей этой серии мероприятий. Он продолжает описывать: «Что, если бы мы сделали неделю, чтобы отпраздновать пиксельное искусство в пространстве NFT?»

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

Лук быстрого приготовления после дождя

Среди художников недели пиксельного искусства: BAN-8KU, eBoy, Paul Robertson, Genuine Human, mae, KLDPXL, Kristy Glas, Crypto Princess, Дмитрий Петякин, Чингис Кван, Гордон Зуххольд, Gutty Kreum, Instant Onion, Jamfactory aka Gavin Strange. , Максвелл Степ, Moertel / Стефани Грюнвальд, numo и steamboy33 // Арнольд Цанг

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

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

14-е ПОНЕДЕЛЬНИК Space Chat — 19:00, Великобритания.2 вечера EST. 9AM PT — модерируется Signalnoise

Подлинное человеческое искусство

eBoy

Халед

Лук быстрого приготовления

ОТКРЫТИЕ ГАЛЕРЕИ, 15-Й ВТОРНИК — 20:00, 15:00 EST, 10:00 PT

Подлинное человеческое искусство плюс художники.

, 16 СРЕДА, 19:00, Великобритания, 14:00, восточноевропейское время, 11:00 по тихоокеанскому времени, — Китовое сообщество — Модератор: DeCryptolorean

eBoy

Халед

Шаг Максвелла

Подлинное человеческое искусство

17-й ТЕКСТОВЫЙ ЧАТ В ЧЕТВЕРГ — 19:00 по Великобритании, 14:00 по восточному стандартному времени, 11:00 по тихоокеанскому времени (WHALE Discord)

Петякин Дмитрий

Кристи Глас

Mae

Пароход

БАН-8КУ

18-я ПЯТНИЦА Spaces Chat 21:00 по британскому времени 16:00 EST 13:00 PT — Модератор: G

Jamfactory

Номер

Гордон Зуххольд

Шаг Максвелла

Подлинное человеческое искусство

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

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

Все начинается с одного пикселя.

Плеер BAN8KU в Токио

Шаг Максвелла Что ты смотришь

ПРАЗДНИЧНЫЙ ПИКСЕЛЬНЫЙ ИСКУССТВО | ALLSHIPS

Начинается с пикселей.

Atari, NES, Sega, Commodore 64. Искусство, рожденное необходимостью, аппаратными ограничениями. И все же по-своему прекрасна. Когда возможности открылись, художники начали создавать невероятные работы — игры LucasArts, фоны для файтингов Capcom и SNK и многое другое, хотя часто пытались скрыть эти технические ограничения. А потом случился PS1. Мир двинулся дальше. За исключением некоторых из нас.

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

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

No related posts.