Большие пиксель арты: Большие пиксель арты майнкрафт схемы. Арт-пиксель схемы для «майнкрафта»

---

10.08.2021 Разное

---

Программы для создания пиксель-артов. Что такое Pixel Art? Примеры и как этому научиться Простые пиксельные рисунки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Изломы 2 и 6 идентичны друг другу – это уже фрагменты длиной 2 пикселя на участках, построенных единичными пикселями.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5. Dithering.

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

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

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

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

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

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

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

Пиксель арт можно рисовать в любой программе для работы с растровой графикой, это вопрос личных предпочтений и опыта (а также финансовых возможностей, разумеется). Кто-то использует самый простой Paint, я делаю это в Photoshop – потому что, во-первых, давно в нём работаю, а во-вторых, мне там комфортней. Как-то решил попробовать бесплатный Paint.NET, не понравилось – это как с автомобилем, узнавший иномарку с коробкой-автоматом в «Запорожец» уже вряд ли сядет. Мой работодатель предоставляет мне лицензионный софт, так что перед корпорацией Adobe совесть моя чиста… Хотя цены за свои программы они заламывают немыслимые, и гореть им за это в аду.

1. Подготовка к работе.

Создаём новый документ с любыми настройками (пусть будет ширина 60, высота 100 пикселей). Основным инструментом пиксельартиста является карандаш (Pencil Tool , вызывается горячей клавишей B ). Если на панели инструментов включена кисть (и пиктограмма, изображающая кисточку), наведите на неё курсор, нажмите и удерживайте LMB – появится небольшое выпадающее меню, в котором следует выбрать карандаш. Устанавливаем размер пера 1 пиксель (в верхней панели слева выпадающее меню Brush ):

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

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

Еще несколько полезных комбинаций. «Ctrl +» и «Ctrl -» увеличивают и уменьшают масштаб изображения. Также пригодится знать, что нажатие Ctrl и » (кавычки-ёлочки, или русская клавиша «Э ») включает и отключает сетку, что здорово помогает при рисовании pixel art’а. Шаг сетки также следует настроить под себя, кому-то удобней когда он составляет 1 пиксель, я привык что ширина ячейки 2 пикселя. Нажимаем Ctrl+K (или идём в Edit ->Preferences ), заходим в пункт Guides, Grid & Slices и устанавливаем Gridline every 1 pixels (мне, повторюсь, удобней 2).

2. Рисование.

Наконец приступаем к рисованию. Для чего создадим новый слой (Ctrl+Shift+N ), переключаемся на чёрный цвет пера (нажатие D устанавливает цвета по умолчанию, чёрный и белый) и нарисуем голову персонажа, в моём случае это вот такой симметричный эллипс:

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

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

Нижнее и верхнее основания у него длиной 10 пикселей, потом идут отрезки в 4 пикселя, три, три, один, один и вертикальная линия высотой 4 пикселя. Прямые в Photoshop удобно рисовать с зажатым Shift , хотя масштабы изображения в пиксель арте минимальные, всё же этот приём иногда здорово экономит время. Если ошиблись и нарисовали лишнего, залезли куда мимо – не расстраивайтесь, переключайтесь на инструмент ластик (Eraser Too l или клавиша «E ») и удалите ненужное. Да, обязательно установите ластику также размер пера в 1 пиксель, чтобы он подтирал попиксельно, и режим карандаша (Mode: Pencil ), иначе будет стирать не то что нужно. Переключение обратно на карандаш, напомню, через «B »

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

Продолжаем рисовать, добавляем нос, усики и рот:

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

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

Теперь глаза:

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

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

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

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

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

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

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

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

Углы пока выглядят не очень, одно из правил pixel art’а гласит, что каждый пиксель обводки и элементов может соприкасаться не более чем с двумя соседними пикселями. Но если внимательно изучить спрайты из игр конца 80-х – начала 90-х, эту ошибку там можно встретить довольно часто. Вывод – если нельзя, но очень хочется, то можно. Эту деталь позже во время заливки можно будет обыграть с помощью теней, так что пока рисуем дальше. Туловище:

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

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

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

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

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

3. Заливка.

Для каждого элемента персонажа нам пока будет достаточно трёх цветов – основного цвета заливки, цвета тени и обводки. Вообще по теории цвета в pixel art советовать можно много чего, на начальном этапе не стесняйтесь подсматривать за работами мастеров и анализировать, как именно они подбирают цвета. Обводку каждого элемента можно, разумеется, оставить чёрной, но в таком случае элементы наверняка будут сливаться, я предпочитаю использовать самостоятельные цвета, близкие по тому с основным цветом элемента, но с низкой насыщенностью. Удобней всего нарисовать где-нибудь рядом с вашим персонажем небольшую палитру и далее брать цвета с неё при помощи инструмента «пипетка» (Eyedropper Tool, I ):

Выбрав нужный цвет, активируем инструмент «ведро» (Paint Bucket, G ). Также обязательно отключите в настройках функцию Anti-alias, нам нужно чтобы заливка работала чётко в пределах прорисованных контуров и не выходила за них:

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

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

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

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

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

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

В Photoshop есть удобная функция выбора по цвету (Select->Color range , ткнув пипеткой в нужный цвет мы получим выделение всех аналогичных по цвету участков и возможностью мгновенной их заливки, но для этого нужно чтобы элементы вашего персонажа находились на разных слоях, так что пока будем считать эту функцию полезной для продвинутых пользователей Photoshop):

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

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

4. Тень и dithering.

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

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

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

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

Что же касается dithering ’а, в изображении с такими миниатюрными размерами он, на мой взгляд, совершенно лишний. Сам по себе метод заключается в «замешивании» двух соседних цветов, которое достигается путём шахматного расположения пикселей. Тем не менее, чтобы было представление о технике, я всё же введу небольшие области смешения, на брюках, на рубашке и немного на лице:

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

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

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

Гуляя утром по интернету, захотелось написать пост про Pixel Art, в поисках материала нашел эти две статьи.

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

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

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

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

Прямые линии

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

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

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

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

Кривые линии

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

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

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

Дизеринг

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

Наиболее популярным способом дизеринга является расстановка пикселей в шахматном порядке:

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

А впоследствии дизеринг часто использовался для передачи объема за счет света и тени в изображениях:

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

Программы для пиксель-арта

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

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

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

Обладатели компьютеров Mac могут попробовать поработать в бесплатной программе Pixen. А пользователям операционной системы Linux стоит протестировать для себя программы GrafX2 и JDraw.

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

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

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

Рисунок «Воздушный шарик»

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

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

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

Видите, как просто — шарик готов!

Рисунок «Робот»

А теперь попробуем нарисовать картинку традиционным способом, а уже потом подчистим те пиксели, которые нарушают правила пиксель-арта.

Открываем новый документ, делаем черновой набросок будущего робота:

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

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

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

Можно приступать к заливке контуров. «Разукрасьте» основным цветом туловище робота. У нас этот цвет — лавандово-голубой.

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

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

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

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

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

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

Вот и все — наш смешной пиксельный робот готов!

А с помощью этого видео вы узнаете, как сделать пиксель-арт анимацию в фотошопе:

Забирай себе, расскажи друзьям!

Читайте также на нашем сайте:

Показать еще

В этом уроке вы научитесь рисовать и анимировать персонажей в технике 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.

» itemprop=»image»>

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

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

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

Инструменты

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

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

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

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

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

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

Линии

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

Прямые линии

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

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

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

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

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

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

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

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

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

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

Контур

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

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

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

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

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

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

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

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

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

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

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

Цвет

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

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

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

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

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

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

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

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

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

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

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

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

Шейдинг

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Дизеринг

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

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

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

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

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

Применение

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Применение

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

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

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

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

Отделка

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

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

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

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

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

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

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

P.S.

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

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

Пример пиксель-арта. Фрагмент.

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

Пиксель-Арт. Лучшие работы и иллюстраторы

Город. Автор: Zoggles

Сказочный замок. Автор: Tinuleaf

Средневековая деревня. Автор: Docdoom

Висячие сады Семирамиды. Автор: Lunar Eclipse

Жилой квартал. Автор:

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

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

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

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

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

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

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

Inkscape tutorial: Трассировка пиксель-арта | Inkscape

До того как появились прекрасные редакторы векторной графики…

Даже до дисплеев с разрешением 640×480…

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

Этот вид искусста мы называем «Pixel Art».

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

Давайте начнём с образца изображения, чтобы показать вам возможности этого движка векторизации. Ниже приводится пример растрового изображения (взято из Liberated Pixel Cup) слева и его векторизованного вывода справа.

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

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

The image below is a screenshot of dialog in the English localisation. You can open this dialog using the menu or right-clicking on an image object and then .

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

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

The default output should give the smoothest result and is probably what you want. You saw already the default output on the first samples of this tutorial. If you want to try it yourself, just open the dialog, select tab and click in OK after choosing some image on Inkscape.

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

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

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

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

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

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

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

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

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

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

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

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

Все изображения, используемые здесь, были взяты из Liberated Pixel Cup, чтобы избежать проблем с авторскими правами. Ссылки ниже:

Authors:Vinícius dos Santos Oliveira; Nicolas Dufour; Kris De Gussem; Gellért Gyuris

Translators:Игорь Жигунов — 2016; Александр Прокудин — 2017

Header / footer design: Esteban Capella — 2019

Как быстро создать пиксельную графику — уроки фотошоп

Создаем эффект вексельной графики в Фотошоп

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

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

Скачать с материалами к уроку

Примечание: Автор использовал платные материалы. В архиве вы найдёте альтернативный вариант изображений для выполнения урока.

1. Давайте Начнем!

Для начала откройте фото, с которым вы хотите работать. Чтобы открыть фото, нажмите File > Open (Файл > Открыть). Прежде чем мы начнем, следует проверить пару вещей:

1. Ваше фото должно быть в цветовом режиме RGB, 8 бит на канал. Чтобы это проверить, нажмите Image > Mode (Изображение > Режим).
2. Для наилучшего результата выбирайте фото в районе 1500-3500 пикселей в высоту/ширину. Чтобы это проверить, нажмите Image > ImageSize (Изображение > Размер изображения).
3. Ваше фото должно быть Фоновым слоем. Если это не так, нажмите Layer > New > BackgroundfromLayer (Слои > Новый > Задний план из слоя).

2. Как Создать Эффект Вексельного Изображения

Шаг 1

В этом разделе мы займемся, собственно, созданием эффекта вексельного изображения. Нажмите Crtl + J на клавиатуре, чтобы продублировать фоновый слой. Затем нажмите Image > Adjustments > Shadows/Highlights (Изображение > Коррекция > Тени/Света) и введите значения с изображения ниже.

Примечание переводчика: если открывшееся окно выглядит не так, как на скриншоте ниже, поставьте галочку в графе Show More Options (Дополнительные параметры):

Настройки на скриншоте: Тени: Эффект: 50%, Тон: 50%, Радиус: 30 пикселей; Света: Эффект: 0%, Тон: 50%, Радиус: 30 пикселей; Коррекции: Цвет: +20, Средний тон: 0, Усечение теней: 0,01%, Усечение светов: 0,01%

Шаг 2

Теперь нажмите Image > Adjustments > Shadows/Highlights (Изображение > Коррекция > Тени/Света) еще раз и введите значения с изображения ниже:

Примечание переводчика: Настройки на скриншоте: Тени: Эффект: 50%, Тон: 50%, Радиус: 30 пикселей; Света: Эффект: 20%, Тон: 50%, Радиус: 30 пикселей; Коррекции: Цвет: -100, Средний тон: +100, Усечение теней: 0,01%, Усечение светов: 0,01%

Шаг 3

Нажмите Image > Adjustments > Brightness/Contrast (Изображение > Коррекция > Яркость/Контраст) и измените параметр Brightness (Яркость) на -20, как показано ниже:

Шаг 4

А сейчас нажмите Filter > Sharpen > Unsharp Mask (Фильтр > Усиление резкости > Контурная резкость), измените параметр Amount (Эффект) на 500%, Radius (Радиус) на 5 пикселей и параметр Threshold (Изогелия) на 0 уров., как показано ниже:

Шаг 5

Нажмите Filter > Stylize > Diffuse (Фильтр > Стилизация > Диффузия) и измените режим на Anisotropic (Анизотропный), как показано ниже:

Шаг 6

Далее нажмите Filter > Noise > Reduce Noise (Фильтр > Шум > Уменьшить шум) и введите настройки, как на скриншоте ниже:

Примечание переводчика: Настройки на скриншоте: Интенсивность: 10, Сохранить детали: 0%, Уменьшить шумы цветов: 50%, Детали резкости: 0%

Шаг 7

Нажмите Filter > Blur > Smart Blur (Фильтр> Размытие > Умное Размытие), и измените параметр Radius (Радиус) на 5, Threshold (Порог) на 25, Quality (Качество) на Low (Низкое) и Mode (Режим) на Normal (Ручное).

Шаг 8

Теперь нажмите Filter > Sharpen > Unsharp Mask (Фильтр > Усиление резкости > Контурная резкость), измените параметр Amount (Эффект) на 500%, Radius (Радиус) на 1 пиксель и параметр Threshold (Изогелия) на 0 уров..

Шаг 9

Нажмите Filter > Stylize > Diffuse (Фильтр > Стилизация > Диффузия) и измените режим на Anisotropic (Анизотропный).

Шаг 10

Теперь нажмите Filter > Stylize > Oil Paint (Фильтр > Стилизация > Масляная краска), измените параметр Stylization (Стилизация) на 5, Cleanliness (Чистота) на 2, а также уберите галочку из графы Lighting (Освещение).

Шаг 11

Нажмите Filter > Stylize > Oil Paint (Фильтр > Стилизация > Масляная краска) еще раз, измените параметр Stylization (Стилизация) на 10, Cleanliness (Чистота) на 10, а также уберите галочку из графы Lighting (Освещение).

Шаг 12

Далее нажмите Filter > Blur > Surface Blur (Фильтр > Размытие > Размытие по поверхности) и измените Radius (Радиус) на 5 пикселей, а Threshold (Изогелия) на 15 уров., как показано ниже:

Шаг 13

Нажмите Filter > Filter Gallery > Artistic > Cutout (Фильтр > Галерея фильтров > Имитация > Аппликация) и измените Number of Levels (Количество уровней) на 8, Edge Simplicity (Простота краев) на 5, а Edge Fidelity (Четкость краев) на 3, как показано ниже:

Шаг 14

А сейчас нажмите Image > Auto Tone (Изображение > Автотон) и Image > Auto Contrast (Изображение > Автоконтраст), дабы внести некоторые автоматические коррективы в тон и контраст снимка.

Шаг 15

Нажмите Image > Adjustments > Brightness/Contrast (Изображение > Коррекция > Яркость/Контраст) и измените Contrast (Контраст) на 100, как показано ниже:

Шаг 16

Теперь нажмите Теперь нажмите Filter > Sharpen > Unsharp Mask (Фильтр > Усиление резкости > Контурная резкость), измените параметр Amount (Эффект) на 50%, Radius (Радиус) на 5 пикселей и параметр Threshold (Изогелия) на 0 уров., как показано ниже:

Шаг 17

Переименуйте получившийся слой в Vexel Art (Вексельный стиль).

3. Как Внести Финальные Коррективы

Шаг 1

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

Далее, нажмите Image > Adjustments > Gradient Map (Изображение > Коррекция > Карта градиента), чтобы создать корректирующий слой с картой градиента.

Назовите этот слой Overall Contrast (Общий контраст).

Шаг 2

А сейчас измените режим наложения этого слоя на Luminosity (Яркость) и измените его непрозрачность на 56%.

Шаг 3

Нажмите Layer > New Adjustment Layer > Levels (Слои > Новый корректирующий слой > Уровни, чтобы создать новый корректирующий слой, назовите его Overall Brightness (Общая яркость).

Шаг 4

Теперь дважды кликните на миниатюре слоя и на панели Properties (Свойства) введите значения со скриншота:

Шаг 5

Нажмите Layer > New Adjustment Layer > Gradient Map (Слои > Новый корректирующий слой > Карта градиента) чтобы создать корректирующий слой с картой градиента. Назовите этот слой Color Look (Цветной образ).

Шаг 6

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

Цвета градиента: Цвет слева: e000e0, Справа: 005161

Шаг 7

Измените режим наложения этого слоя на Color (Цветность).

Шаг 8

Нажмите Layer > New Adjustment Layer > Vibrance (Слои > Новый корректирующий слой > Сочность). Назовите его Overall Vibrance/Saturation (Общая Сочность/Насыщенность).

Шаг 9

Дважды кликните на миниатюре слоя и на панели Properties (Свойства) и измените параметр Vibrance (Сочность) на +43, а параметр Saturation (Насыщенность) на +22, как показано ниже:

Шаг 10

Теперь нажмите Control-Alt-Shift-E на клавиатуре, чтобы отпечатать видимые слои, а затем нажмите Control-Shift-U, чтобы обесцветить получившийся слой. Затем, нажмите Filter > Other > High Pass (Фильтр > Другое > Цветовой контраст) и измените Radius (Радиус) на 2 пикселя.

Шаг 11

Назовите этот слой Overall Sharpening (Общая резкость) и измените режим наложения на Overlay (Перекрытие).

У Вас получилось!

Поздравляю, вы это сделали! А вот и финальный результат:

Источник: https://Photoshop-master.ru/lessons/effects/sozdaem_effekt_vekselnoy_grafiki_v_fotoshop

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

Содержание:

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

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

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

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

Прямые линии

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

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

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

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

Кривые линии

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

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

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

Дизеринг

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

Наиболее популярным способом дизеринга является расстановка пикселей в шахматном порядке:

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

А впоследствии дизеринг часто использовался для передачи объема за счет света и тени в изображениях:

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

Программы для пиксель-арта

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

Многие и по сей день предпочитают рисовать пикселями во всем известной стандартной программе операционной системы Windows – Microsoft Paint. Эта программа действительно проста в освоении, но в этом же кроется и ее минус – она достаточно примитивна, например, не поддерживает работу со слоями и их прозрачностью.

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

Обладатели компьютеров Mac могут попробовать поработать в бесплатной программе Pixen. А пользователям операционной системы Linux стоит протестировать для себя программы GrafX2 и JDraw.

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

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

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

Рисунок «Воздушный шарик»

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

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

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

Видите, как просто – шарик готов!

Рисунок «Робот»

А теперь попробуем нарисовать картинку традиционным способом, а уже потом подчистим те пиксели, которые нарушают правила пиксель-арта.

Открываем новый документ, делаем черновой набросок будущего робота:

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

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

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

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

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

Можно приступать к заливке контуров. «Разукрасьте» основным цветом туловище робота. У нас этот цвет – лавандово-голубой.

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

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

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

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

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

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

Вот и все – наш смешной пиксельный робот готов!

А с помощью этого видео вы узнаете, как сделать пиксель-арт анимацию в фотошопе:

Источник: http://megapoisk.com/piksel-art-uroki-risovanija-dlja-nachinajuschih

Adobe® Photoshop® как инструмент профессионала / Пиксель-арт

Как сделать пиксель-арт в Фотошопе?

 

Импровизация на тему пиксель-арта в Фотошопе.

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

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

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

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

Выберите его на панели инструментов.

Для начала необходимо создать копию изображения. Быстро сделать это можно с помощью сочетания клавиш на клавиатуре Ctrl + J. Теперь обведите инструментом Pen – перо, очертание фигуры девушки.

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

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

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

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

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

Таким образом, обведите фигуру девушки. Работа это достаточно кропотливая, она потребует от вас аккуратности и займет некоторое время.

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

Теперь нам необходимо данный контур преобразовать в область выделения. Для этого кликните правой кнопкой мыши по контуру и выберите Make Selection. Контур будет преобразован в выделение.

Скопируем данную выделенную область на новый слой. Для этого нажмите сочетание клавиш на клавиатуре Ctrl + J. Теперь необходимо выделить отдельно голову и волосы девушки и перенести выделенную область на отдельный слой. Для этого снова воспользуемся инструментом Pen – перо.

Выделите фоновый слой на панели слоев и обведите волосы и голову девушки. После того, как контур будет создан необходимо преобразовать его в область выделения. Для этого кликните правой кнопкой мыши по контуру и выберите Make Selection. Скопируете данную выделенную область на новый слой, нажав сочетание клавиш на клавиатуре Ctrl + J.

Применим к новому слою фильтр Extract, для этого раскройте меню Filters и выберите соответствующий фильтр.

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

На панели инструментов слева, выберите инструмент Edge Highlighter и обведите им края прически, создавая непрерывную линию.

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

Далее нам понадобится объединить слои с фигурой девушки и волосами. Для этого необходимо сделать видимыми два данных слоя и кликнув правой кнопкой мыши по одному из слоев, выбрать в контекстном меню команду Merge Visible.

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

Теперь необходимо создать новый слой. Для этого нажмите сочетание клавиш на клавиатуре Ctrl + Shift + N. Данный слой будет фоном нашего изображения, поэтому его необходимо переместить под слой с фигурой девушки.

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

А в качестве фонового – темно-синий цвет.

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

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

Теперь данную область необходимо залить черным цветом. Для этого воспользуйтесь инструментом Paint Bucket. Выберите в качестве основного цвета черный и залейте область, кликнув по ней левой кнопкой мыши. Далее раскройте меню Edit и выберите команду Define Brush Preset. С помощью данной команды мы сможем сохранить новую кисть. В поле Name введите Pixel Scatter. Кисть создана.

Теперь мы сможем приступить к рисованию.

Выберите на панели инструментов Brush – кисть. Для работы нам понадобится настройки инструмента. Настроить инструмент «кисть» мы сможем с помощью панели Brush, открыть данную панель вы сможете с помощью меню Window.

Выберите команду Brush. В списке кистей необходимо выбрать только что созданную квадратную кисть. В разделе Brush Tip Shape задаем значение Spacing равное 155. Затем отметьте галочкой разделы Shape Dynamics и Scattering.

В разделе Scattering необходимо выбрать значение Scatter равное 650. Кисть создана.

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

Кликните правой кнопкой мыши по слою и в контекстном меню выберите команду Duplicate Layer. Для слоя копии устанавливаем значение Opacity равное 10. Переименуйте слой, задав ему имя Guide и переместите его ниже основного слоя Figure. Сделайте активным слой Figure. Создайте маску.

Для этого раскройте меню Layer и в списке Layer Mask выберите команду Hide All.

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

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

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

Стоит уделить особое внимание краям изображения.

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

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

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

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

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

Измените настройки насыщенности изображения.

Для этого в меню Image раскройте список Adjustments и выберите команду Hue/Saturation. В поле Hue задайте значение -36 (минус тридцать шесть). Нажмите ОК. Раскройте меню Filter и в списке Pixelate выберите фильтр Mosaic. В поле Cell Size задайте значение 35. Нажмите ОК.

Теперь создадим маску. Для этого в меню Layer выберите команду Layer Mask – Hide All. В данном случае для создания пикселей нам понадобится инструмент Rectangular Marquee Tool, удерживая клавишу Shift, добавляем много прямоугольников, прямо поверх изображения. Прямоугольники должны иметь разные пропорции и размер. Ничего страшного, если некоторые будут частично закрывать друг друга.

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

Работа уже близка к завершению.

Но нам еще необходимо добавить дополнительных деталей.

Повторяем предыдущие шаги, но на этот раз меняем настройки насыщенности. Скопируйте слой с фигурой девушки. Удалите маску. И примените параметр Hue/Saturation. Теперь в поле Hue введите значение 38.

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

Различные слои необходимы для того, чтобы пиксели имели различные оттенки.

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

Теперь необходимо поработать над областью вокруг фигуры девушки.

Для этого создадим новый слой над остальными и дадим ему имя Extra Pixels. Далее необходимо поработать инструментом Brush. Для начала определимся с цветом. Выберите инструмент Eye Dropper на панели инструментов.

В списке Sample выберите All layers, чтобы мы могли взять пробу цвета сразу со всех слоев. Теперь определите цвет той области, над которой вы хотите поработать в данный момент. Затем выберите инструмент Brush.

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

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

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

Теперь нам предстоит создать атмосферу изображения.

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

Создайте свой неповторимый рисунок, проявив навыки художника. Теперь мы можем перейти к последнему этапу работы над изображением. Создайте новый слой под слоем Figure. Нам снова понадобится наша кисть Pixel Scatter.

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

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

Результат будет зависть от ваших стараний и затраченного времени.

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

Источник: http://www.TeachVideo.ru/v/7781

Пиксель-арт. Настройка

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

Софт для пиксель-арта: Тут без вариантов, Фотошоп.

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

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

Gimp — не в обиду линуксойдам, но Гимп ниразу не аналог фотошопу, хотя почти все те же функции от ФШ в нем якобы есть, но вместо работы будет война с интерфейсом, т.к. он расчитан исключительно для пришельцев, но никак не для людей. В добавок нет адекватной поддержки планшета. Graphic Gale — прога заточена исключительно под пиксель-арт, но нет многих нюансов, облегчающих работу, как в ФШ. Хотя посмотреть прогу стоит, если кому понравится — хорошо. Мне не понравилось. Фотошоп это уже давно производственный стандарт, так что советую сразу привыкать к нему. Я же в этой статье постараюсь поделиться важными нюансами:

Ctrl+K

Открываем фотошоп и сразу нажимаем Ctrl+K, хоткей открывает общие настройки ФШ.
Самое важное, в Image Interpolation выставляем Nearst Neighbor — это обеспечит нам отсутствие интерполяции при ресайзе или всяком прочем трансформе нашей графики.

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

Gridline Every (XX) Pixels — задает размеры нашей сетки. Subdivisions — разбивает каждую клетку сетки на заданное кол-во квадратов. 1 — минимальное значение, означает что сетка не будет разбиваться на «подклетки». Мне обычно больше и не нужно.

В процессе работы сетка включается/выключается через Ctrl+’. На этом можно закрыть окно настроек.

View

Заходим в меню View

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

Настройка окон

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

Navigator впринципе можно было бы и убрать совсем т.к. «зумать» привык через Alt+Shift+колесо. Actions, иногда очень помогают, когда например нужно увеличить в два раза и сохранить несколько десятков спрайтов. Мелочь, но жизнь облегчает, поэтому под рукой.

Tools

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

Double Viewport

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

Комфортной работы и успешных начинаний.

Источник: http://pixelwarheads.blogspot.com/2011/12/blog-post.html

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

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

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

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

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

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

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

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

Aseprite

Ссылка

Цена: $15 USD или бесплатно, если скомпилируете его самостоятельно
Доступно для: Windows / OS X / Linux

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

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

Onion-skinning – возможность видеть тот кадр, с которым вы работаете, а также следующие за ним и предшествующие ему анимационные кадры – то, что нужно для анимации.

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

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

Джей Толен, создатель и художник приключенческой игры Dropsy в жанре point-and-click, перешел на Aseprite после Microsoft Paint и с тех пор не менял своих предпочтений. “Раньше я больше придерживался «безопасной» палитры цветов.

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

Для Hypnospace Outlaw я использовал функцию затемнения цвета в Aseprite, чтобы придать 3D графике старомодный вид «безопасных» цветов”.

Заходите на страничку Aseprite в Твиттер, чтобы посмотреть на примеры графики, сделанные с помощью этого инструмента.

Pyxel Edit

Ссылка

Цена: $9 USD (или бесплатная бета-версия)
Доступно для: Windows / OS X

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

Однако даже платная версия медленно обновляется и не является основной программой для своего разработчика.

Но если вы помешаны на огромном количестве функций, то будьте готовы к тому, что останетесь довольны тем видом, в котором Pyxel Edit существует на данный момент.

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

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

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

Вы можете увидеть примеры графики, сделанной при помощи Pyxel Edit на странице в Твиттер.

GraphicsGale

Ссылка

Цена: Бесплатно
Доступно для: Windows

GraphicsGale – еще одна серьезная программа, созданная специально для пиксельной графики. Она имеет те же главные функции, которые вы ожидаете увидеть для рисования и анимации: onion-skinning, управление слоями и цветовой палитрой. Самым большим недостатком GraphicsGale является то, что она доступен только для Windows.

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

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

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

Одна из примечательных профессиональных игр, созданных с помощью GraphicsGale: великолепная Duelyst.

Pro Motion NG

Ссылка

Цена: $40 или ограниченная во времени бесплатная версия
Доступно для: Windows

В то время, как GIMP и Photoshop являются перепрофилированными инструментами, Pro Motion – это высококачественная программа, созданная специально для пиксельной графики, с помощью которой были созданы впечатляющие профессиональные игры, такие как Shovel Knight. Pro Motion обладает широкими возможностями как для анимации спрайтов, так и для редактирования тайлсетов. Как Pyxel Edit, Pro Motion позволяет редактировать все одинаковые тайлы. Она также может автоматически осуществлять заливку больших частей рисунка.

Pro Motion изначально доступна только для Windows, но возможен запуск программы на Linux и OS X через Wine. Бесплатная версия Pro Motion предлагает множество функций для пиксельной графики: поддержка рисования шаблонов тайлов, редактор карт тайлов, редактирование цветовой палитры и эффекты слоя.

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

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

Вы можете купить ее через Steam.

Photoshop

Ссылка

Цена: $20-30 в месяц
Доступно для: Windows / OS X

Источник: https://genapilot.ru/best-pixel-art-maker-tools

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.

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

Установите задержку времени в 0,15 сек

Кликните на DuplicatesSelectedFrames, чтобы создать еще 3 копии

Установите цикл повтора Forever

Шаг 6

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

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

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

Шаг 7

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

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

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

Источник: https://www.pressfoto.com/blog/animated-pixel-art-sprite-in-photoshop/

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

Цель:
Эта статья расскажет вам о том, что такое пиксель-арт, чем он не является, с чего начинать делать пиксель-арт и как сделать ваш пиксель-арт лучше. Данная статья является компиляцией советов и полезной информации для новичков с различных топиков и уроков по пиксель-арту. Для более продвинутых я советую почитать что-нибудь посерьёзнее, например 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 Сдвиг оттенка

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

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

Как сделать пиксель-арт: полное руководство для начинающих

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

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

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

Вопреки распространенному мнению, мощное или дорогое программное обеспечение не гарантирует качественного искусства! Выбор программы – это только вопрос предпочтений.

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

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

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

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

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

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

Связанный: Лучшие графические планшеты для цифровых художников и дизайнеров

Насколько большим должен быть ваш спрайт или холст?

Нет неправильного ответа относительно размера спрайта. Но наиболее распространены числа, кратные восьми в степени двойки (например, 8 × 8, 16 × 16, 32 × 32 и т. Д.), Потому что в противном случае старые компьютеры не смогли бы правильно отобразить их.

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

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

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

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

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

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

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

Допустим, вы хотели получить стандартное разрешение 1080p. Вы можете работать с холстом 384 × 216, а затем увеличивать масштаб на 500 процентов.

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

Процесс спрайтинга

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

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

1. Начните с грубого эскиза

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

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

2. Очистите штриховой рисунок

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

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

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

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

3. Добавьте цвета

Пришло время взять инструмент « Ковш» и заполнить краской штриховой рисунок спрайта.

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

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

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

4. Добавьте детали, блики и тени.

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

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

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

5. Сохраните свое искусство

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

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

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

Пиксель-арт: легко освоить, сложно освоить

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

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

Связанный

Программа для генерации пиксель-артов Pixel Art

Pixel Art для карманного издания Minecraft – это первое и единственное Android-приложение, которое берёт любые изображения на вашем телефоне и преобразует их в объекты пиксель-арта, которые можно очень легко вставить в Minecraft PE!

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

Это лёгкий процесс, состоящий из 3 шагов:

• Шаг 1 — Выберите изображение
• Шаг 2 — Укажите настройки вывода
• Шаг 3 — Вставьте результат в свой мир

Это приложение способно генерировать пиксель-арты из картинок любого размера, а затем вставлять их в ваш мир в виде объектов размерами до 512 блоков в длину и ширину! (Для создания пиксель-артов такого размера требуется полная версия программы. В бесплатной максимальный размер – 50 на 50 блоков).

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

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

Это демо-версия утилиты Pixel Art Generator для карманного издания Minecraft. Пожалуйста, обновитесь до полной версии, чтобы разблокировать дополнительные блоки, создавать большие пиксель-арты, убрать рекламу и поддержать команду разработчиков!

div{border-right:1px solid #E0E0E0}.b-social-button—default .social-button__components > div:last-child{border-right:0}.b-social-button—default .social-button__icon{background:#FFF}.b-social-button—default .social-button__icon:before{color:#A9ADB6}.b-social-button—default:hover{background:#FFF}.b-social-button—default:hover .social-button__icon{border-right-color:transparent}.b-social-button—default:hover .social-button__icon:before{color:#FFF}.b-social-button—default.b-social-button—googleplus:hover .social-button__icon{background-color:#C25234}.b-social-button—default.b-social-button—facebook:hover .social-button__icon{background-color:#3C5A98}.b-social-button—default.b-social-button—vkontakte:hover .social-button__icon{background-color:#48729E}.b-social-button—default.b-social-button—twitter:hover .social-button__icon{background-color:#00ACED}.b-social-button—default.b-social-button—linkedin:hover .social-button__icon{background-color:#0083BE}.b-social-button—color{margin-right:10px;background-color:#FFF}.b-social-button—color .social-button__components{color:#FFF}.b-social-button—color.b-social-button—googleplus{background-color:#C25234}.b-social-button—color.b-social-button—googleplus:hover{background-color:#ae4a2f}.b-social-button—color.b-social-button—facebook{background-color:#3C5A98}.b-social-button—color.b-social-button—facebook:hover{background-color:#354f86}.b-social-button—color.b-social-button—vkontakte{background-color:#48729E}.b-social-button—color.b-social-button—vkontakte:hover{background-color:#40658c}.b-social-button—color.b-social-button—twitter{background-color:#00ACED}.b-social-button—color.b-social-button—twitter:hover{background-color:#0099d4}.b-social-button—color.b-social-button—linkedin{background-color:#0083BE}.b-social-button—color.b-social-button—linkedin:hover{background-color:#0071a5}]]>

40 примеров потрясающих пиксель-артов

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

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

Красивый пиксель арт

R Grillotti

Гриллотти идеально использует каждый пиксель в этом исполнении «Рождения Венеры».

Еще один пиксельный шедевр из модельной серии Гриллотти.

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

Змея

Этот предмет полон деталей и имеет отличное затемнение.

Великолепное освещение и яркие цвета делают его выдающимся.

Осенние пиксели

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

Трудно поверить, что это пиксельная графика с ее мягкими текстурами.

Лиф

Это изображение было создано с использованием всего восьми цветов.

Райан-GFX

Эта маленькая сцена выглядит как что-то из старых 16-битных видеоигр.

Этот изометрический дизайн казино мистера Бернса дополняется припаркованным лимузином.

Свен Рутнер

Это напоминает мне картину Энди Уорхола своими яркими красками и лицами.

У этого изделия потрясающий дизайн персонажей и очарование.

Хамон

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

Endigo

У него необычная цветовая палитра и много внимания.

Пол Робертсон

В нем много персонажей Sega и классный фон.

Еще одна фигура от Пола, полная активности.

Армия троллей

В этом есть все, от Папы Смурфа до Марио. Вы можете найти Линка из Zelda?

Rod Hunt

Отличная концепция и использование цвета.

Еще одна солидная концепция Rod. Роботы, управляющие большим роботом изнутри.

Дерек Ю

Это дает совершенно новый смысл войне горилл.

Отличный дизайн механической обезьяны.

Вьетнамки Flying

Большие пиксели создают впечатление импрессионизма.

Семь небес

Эта работа переносит пиксельную графику в третье измерение. Dig Dug никогда не выглядел так круто.

Еще одно путешествие в 3D. На этот раз это Галага.

Эбой

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

Эта удивительная маленькая пагода полна очарования Эбоя.

Тим

Этот изометрический дизайн просто потрясающий. Мне нравится качество 3D, которое у него есть.

Еще одна замечательная вещь от Тима. Это как 16-битный Робинзон Карузо.

Томек

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

В этом фантастическом произведении «Остров обезьян» действительно крутой переход от ночи к дню.

Красный Gunstar

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

Багпиксель

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

Текстура и тени на этом воздушном шаре просто потрясающие.

Том Шитер

Эта часть загружена деталями. Обратите внимание на брызги воды и рыбок.

Это чудесное лицо прекрасно смотрится в приглушенных тонах.

Дурак

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

Этот от Fool просто потрясающий. Атмосфера, концепция, цветовая палитра и детали действительно вдохновляют.

Дополнительные ресурсы

• Создавайте собственные пиксели с помощью пиксельной игрушки.
• Посмотрите пиксельную карту Гонконга.
• Уроки по пиксельной графике для начала.
• Пиксельный форум и галереи.

Эта статья изначально опубликована 7 июля 2010 г. и обновлена ​​28 июля 2020 г.

Pixel Art: с чего начать

отправлено skeddles 14 июня 2019 в статьях 20 7

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

Что такое Pixel Art

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

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

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

pixâ € ¢ эль арт (/ ˈpiksÉ ™ l ärt /) п. — Цифровое искусство, в котором произведения создаются с помощью уникального процесса манипулирования отдельными пикселями изображения. графический документ с использованием минимального размера и количества цветов.

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

Вводное руководство

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

• Создание пиксель-арта с помощью Cure

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

• Учебное пособие Дерека Ю по пиксель-арту

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

• Pixel Logic от Michafrar

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

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

Начать пикселизацию

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

Попробуйте нарисовать на холсте ниже

Выберите редактор пикселей

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

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

После того, как ваш редактор настроен и работает, просто приступайте к творчеству. Пикселируйте все, что душе угодно. Нужна идея?

Pixel Idea

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

Улучшение

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

1. Практика

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

2. Учиться

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

3. Получите критику

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

4. Исследование

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

Сообщества

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

• Твиттер

  Twitter — это здорово, потому что вы можете получить подписчиков и показать свою работу большинству людей, вырвавшись из сферы пиксельной графики. Множество разработчиков игр и других художников с низкими характеристиками, с которыми можно связаться. Обязательно используйте #pixelart в своих сообщениях!

• / r / PixelArt

  Форум

  Reddit / r / pixelart насчитывает более 100 000 участников и имеет потенциал для охвата большего, но большинство сообщений остается в меньшей экосистеме, которая заполнена новыми и опытными пиксельными художниками.Также это одно из немногих мест, где действительно приемлемо делиться любой пиксельной графикой, которую вы найдете в другом месте в сети. Отлично подходит для новичков.

• PixelJoint

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

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

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

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

Дальнейшее развитие

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

Различные уроки искусства

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

Рисунок

• Draw a Box — Большой набор письменных и видеоуроков, которые научат вас основам обучения рисованию.

Цифровая живопись

• CTRL + Paint — Огромная библиотека видео, которая научит вас всему, что вам нужно знать о цифровой живописи, включая обучение рисованию, использование инструментов, дизайн, анатомию, перспективу и многое другое.

Анимация

• Idleworm Animation Tutorials — Несколько письменных руководств, обучающих основам анимации. Написано для флэш-аниматоров, но есть еще много полезной информации.
• 12 принципов анимации Алана Беккера — плейлист из коротких, сжатых видеороликов, объясняющих каждый из 12 принципов анимации, описанных Фрэнком Томасом и Олли Джонстон в их книге «Иллюзия жизни».

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

50 Красивый и креативный пиксель-арт

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

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

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

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

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

Вот коллекция прекрасных пиксельных изображений со всего Интернета. Наслаждаться!

Учебники по пиксель-арт Photoshop для любителей пикселей

Уроки Photoshop по пиксель-арт для любителей пикселей

Если вы родились в 90-х, я уверен, что вы стали свидетелями славного возраста пикселей… Читать далее

Изометрический пиксель-арт:

# 1 — Город в штучной упаковке 2 @Howling

# 2 — Абсолютный лабиринт @Xluluhimex

# 3 — Не забудьте исправить свои поляроиды @ Pixellent

# 4 — Средневековый замок @Docdoom

# 5 — Работа в городе @Pandaemas

# 6 — Fast Pixel Food @Jujuqui

# 7 — BASH City @Ajiebash

# 8 — Coke Studios Moscow @Tuukka Savolainen

# 9 — Coke Studios Goa @Tuukka Savolainen

# 10 — Coke Studios @Tuukka Savolainen

# 11 — Bugpixel @Bugpixel

# 12 — Протомен 1 @Bugpixel

# 13 — Reader’s Digest Art @Bugpixel

# 14 — Фабрика стимпанк @Bugpixel

# 15 — Пристань для яхт на берегу @Bugpixel

# 16 — Reo Resort @Bugpixel

# 17 — Apoca SP — O Melhor de Sao Paulo 2010 @Marcus Penna

# 18 — Pixel Candy City @MisaCharisma

# 19 — Плакат @Simon Страница

# 20 — Рождество пиксель арт

# 21 — ТехноТрон Инк.@Zoanoid

# 22 — Деревня Трокер @Kaiusdesign

# 23 — Город блоггеров @Noyz Isobar

# 24 — Pixeltown @Stridenoble

# 25 — Pixel Art Замок Бутрон @Chocolerian

# 26 — Округ Гаумон @ Hellagood88

# 27 — Кока-кола @eBoy

# 28 — Голливуд @eBoy

# 29 — Строительная площадка @eBoy

# 30 — Fortune 500 @eBoy

# 31 — Хонда @eBoy

# 32 — Амнистия @eBoy

# 33 — Плакат Yahoo @eBoy

# 34 — Стоп-крышка @eBoy

# 35 — Плакат MSH @eBoy

# 36 — @ Edge-Online

# 37 — Плакат Salford Uni @Army of Trolls

# 38 — В глуши @Fool

# 39 — Апельсин @Orange Label

# 40 — Большой город @Love Pixel

# 41 — Армейский Т-026

# 42 — Авианосец

# 43 — Двор водяной мельницы @Zi

Неизометрический пиксель-арт:

# 44 — Пиксельные куклы Аниты Блейк @ Nekomancer-Tei

# 45 — Кроктаун @Fool

# 46 — Колоссальный катамари @Snake

# 47 — Трилогия Деппа @Jaeden

# 48 — Protomen 2 @Bug Pixel

# 49 — Все @Simon Страница

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):

Какюсей (ПК-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 пикселей.

Быстрое и грязное руководство по созданию пиксельной графики | Дэвид Байттоу

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

Давным-давно я профессионально программировал видеоигры. В частности, я работал над играми для Xbox и Playstation, такими как Indiana Jones, Star Wars Episode 3 и Afro Samurai, для которых требовался целый штат очень талантливых художников, аниматоров и дизайнеров. Сегодня меня больше интересуют небольшие игры, которые я могу создать сам, всего один парень в комнате.

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

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

Итак, это был мой путь до сих пор.

Скачать Asesprite

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

Asesprite

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

Начните с малого

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

Одна из моих самых первых анимаций.

Я обнаружил, что учебники MortMort и achebit чрезвычайно полезны. В своем уроке из 16 частей Ачебит проходит через все, от базовой формы до реальных анимаций. В MortMort есть коллекция полезных советов, особенно по ограничениям и ограничениям.

Изучите разные стили

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

Изображение ретронатора (http://www.retronator.com/post/124938224153/pixel-art-study-of-characters-from-five-of-my)

Pinterest и Twitter — бесценные ресурсы. Например, подпишитесь на @Pixel_Dailies, чтобы получать ежедневный пиксельный вызов (#Pixel_Dailies). Это подтолкнет вас к экспериментам и даже к признанию и обратной связи. Еще мне нравятся #pixelart и #gameart.

Создано для #Octopus pixel daily

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

#pixel_dailies сегодня

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

Мне нравится этот стиль.

Следуйте за мной в Twitter @davidbyttow

5 советов о том, как улучшить пиксельное искусство

1) Выберите правильное разрешение для своего искусства

Согласно опросу Steam , 63,95% его пользователей имеют монитор с разрешением 1920x1080p .Если вы планируете создать искусство, которое будет использоваться в игре Steam, это хорошее число, о котором следует помнить, так как это то, что будет использовать большая часть вашей аудитории!

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

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

О, разве вы не любите таблицы электронных таблиц? Хорошо, я знаю! <3

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

Чего вы хотите избежать, так это десятичных чисел. Если вы не можете легко разделить высокое разрешение на пиксельный холст, тогда это не годится. Например, 1920×1080 нечетко делится на 7, поэтому вам не следует использовать холст 274×154.

Как видите, некоторые размеры холста можно умножать для достижения различных результатов. Это следует отметить, так как, например, 683×384 может хорошо умножаться только на 1366×768 (типичное разрешение ноутбука), но он не будет хорошо работать с Full HD, поэтому вы можете получить некоторое растяжение или черные полосы!

Большинство моих фонов для «Да, ваша светлость» имеют размер 640×226 пикселей, потому что нижняя половина экрана занята графическим интерфейсом. Когда это не так и мне нужен весь экран для отображения ландшафта, я обычно работаю с разрешением 640×360, которое масштабируется до Full HD кратно 3.

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

2) Выберите размер символа

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

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

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

Я бы посоветовал начать с меньшего размера холста и символов и постепенно увеличивать их.

3) Избегайте закрашивания углов

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

Это приведет к более тонкому и полированному эффекту!

4) Убирать!

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

Иногда они хороши, но, как правило, старайтесь избегать единичных пикселей.

5) Стоит потратить дополнительное время, чтобы заблокировать вашу композицию

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

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

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

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

Бест,

Рафаль.

Выбор разрешения ваших 2D-ресурсов

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

В общем, на момент написания этого поста, если вы публикуете для ПК, вы смотрите на подавляющее большинство пользователей с двумя разрешениями: в основном «Full-HD» (1920×1080 пикселей, часто называемые 1080p) и много 1280×720 (часто называют 720p). У небольшого процента людей также есть мониторы 4K (3840×2160) или мониторы Retina на Mac (у современного 15-дюймового MacBook Pro максимальное разрешение 3360×2100). Нужно покрыть много пикселей!

Для телефонов ассортимент огромный.Некоторые старые устройства могут иметь разрешение менее 720 пикселей по вертикали, но некоторые современные будут иметь разрешение до 4K.

Совет: Unity делает некоторые из этих статистических данных доступными на панели Operate Dashboard вашего Unity ID. Выберите проект, в котором включена аналитика, и вы сможете перейти в Analytics> Market Insights и просмотреть агрегированную статистику. Steam также предлагает аналогичный сервис на этой странице.

С Retina (торговая марка Apple) и другими современными экранами с высоким разрешением, в то время как фактическое аппаратное разрешение очень высокое (например,грамм. 4K), они могут работать с имитируемым более низким разрешением (обычно наполовину, например, Full-HD вместо 4K), но затем они визуализируют изображения и текст, используя в два раза больше пикселей, так что они выглядят очень четкими.

Примечание. DPI (точек на дюйм) или PPI (точек на дюйм или пикселей на дюйм) — это разные названия, взаимозаменяемые между собой разными производителями, но, в конце концов, они означают одно и то же вещь: сколько пикселей вжимается в линейный дюйм на экране.Традиционно экраны были 72 DPI. Сегодня экраны с высоким разрешением обычно 144 точек на дюйм, но вы можете найти телефоны с разрешением до 400 точек на дюйм и более, поскольку они содержат много пикселей на относительно небольших экранах. Вот несколько примеров.

Для этих экранов у вас есть два варианта. Один из них — предложить опыт, который полностью использует разрешение 4K. Обратной стороной является то, что создание 4K-совместимых ресурсов требует много дополнительной работы. В этом случае обязательно выделите это в своих маркетинговых материалах !! («Прекрасные впечатления от 4K»… и т. Д.). Владельцам консолей, таких как PS4 Pro и Xbox One X, которые совместимы с 4K, понравится тот факт, что ваша игра использует оборудование на полную мощность.

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

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

.