Как процесс создания персонажей пиксель арт. Adobe Photoshop: Рисуем и анимируем персонажа в технике Pixel Art. Темы для размышления

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

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

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

Глава I – Графическая теория

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

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

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

Прошли годы. Десятилетия. Прогресс скакнул вперед. Разрешения мониторов, текстур и размеры игр уже давно покинули солнечную систему, где первый пиксель выполз из вод небытия и отрастил себе ноги. Индустрия словно скоростной экспресс, наполненный оголтелыми фанатиками, продолжает нестись вперед в безумной гонке за фото-реализмом. Можно сказать, что интересно было бы узнать - что все эти люди будут делать, достигнув его? Но, нет. Не интересно. Потому, что скорей всего, им наконец-то придется учиться делать игры. Снова. Как это делали раньше. Развлекая людей не картинкой, но сутью. Правда, это вряд ли. Если, конечно, оглядываться на историю человечества, а не мечтать. Вернемся, впрочем, к определению пиксель-арта.

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

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

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

Оригинал изображения : линк
Pioneers . Разработчик EigenLenk . Данная инди-игра выполнена в четырех (4) цветах. Вся. Я бы назвал ее маленьким гимном минимализму и мастерству в обхождении с малым количеством цветов. Ничего подобного я в современной индустрии не видел (прим. все необходимые ссылки на сайты авторов проектов и веб-ресурсы будут приведены в конце публикации).

Пиксель-артисты современности по-прежнему следуют канонам минимализма и создают образы на базе ограниченного количества точек. Признаком высокого мастерства художника может считаться умение пользоваться палитрами с малым количеством цветов. К примеру, от четырех (4) до шестнадцати (16). То есть работать в ограниченном цветовом диапазоне. Однако, точно также ценятся и создатели полотен, чей цветовой арсенал увеличен до 256 и более цветов, которые не ограничивают себя в вопросах разрешения финальной работы. Художник известный в сети под псевдонимом Fool. Его пиксельные полотна завораживают детализацией и изысканностью.

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

Мы в нашем с вами путешествии будем мыслить канонами древности. А именно - ограниченной палитрой и низким разрешением. Наш путь пройдет через CGA, EGA и VGA эпохи, исключая Темные Времена, начавшиеся для пиксель-арта после прихода SVGA тирана. Именно с приходом высоких разрешений пиксель-арт стал сдавать свои позиции, отступая под натиском авангардных «разрешение монитора» и «рабочее разрешение игры». То, что пиксель-арт сохранился спустя полвека как явление и как вид искусства практически неизменным означает, что эти точки на экране не были просто точками, но были и остаются чем-то большим.

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

Глава II – В поисках затерянного ковчега

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

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

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

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

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

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

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

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

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

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

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

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

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

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

- Андерсен, я понимаю, вы узкий специалист и не видите общей картины

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

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

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

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

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

Вы думаете, не найдется умника, который не спросил бы, девяти ли это миллиметровый патрон? Не потому, что ему это важно, но потому, что в любом случае ему найдется, что вам сказать. Гильза не та. Пуля не та. Размер не тот. Масштаб не тот. Найдутся великие теоретики, которые вам расскажут, что реальные размеры объекта это ключ к правильному восприятию логотипа на психологическом уровне! Скажете, нет? Не может такого быть? Вокруг полным-полно таких людей. И это не только руководители, руководители руководителей и генеральные директоры. Это целая часть человечества, что по натуре не Пушкины, но Белинские. Таков уж человек. Если не производит, то низводит.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Допустим, вы когда-либо брали в руки ручку, карандаш, или не дай бог, планшет. Допустим, что вы, как и я, не умеете рисовать. Что мы обычно слышим на форумах профессиональных художников?
- У вас отвратительные пропорции, хромает анатомия. Вашим штрихом нужно пугать детей в детском саду. Зачем вы вообще рисуете? Зачем увеличивать количество ужасного в этом мире, неужели недостаточно курса доллара? Это не цвета, а какой-то кошмар, каша какая-то! У вас отвратительная цветопередача. Вы не умеете распределять свет по объекту.

Чего только не наслушаешься, посещая профильные ресурсы. Каждый второй там, как минимум Айвазовский. А вот нате вам… что вы теперь скажете про мой цвет, а? Каков ваш вердикт в отношении моих сегодняшних успехов в деле освоения техники рисования коленных чашечек? Достаточно ли я успешен в вопросах анатомии на этой неделе?

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

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

Глава III – Побег Ноя

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

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

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

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

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

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

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

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

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

Главный объект на этой сцене - малый куду. Уже давно пора бы дать ему имя, но сбивает с толку, что куду, вроде как, мужского рода, а антилопа женского. Пусть будет она, и назовем мы её Кудя. Вторичный объект шар (он же мяч, в девичестве сфера). Поскольку он слит с ногами антилопы – берем его с собой. Как мы помним, нам нужна палитра и в запасе у нас только 16 цветов. Постараемся расходовать их экономно. С этого момента и до окончания странствий Куди я буду выкладывать изображения наборами по шесть штук (отсчет идет слева направо, рядами). А после давать комментарии, чтобы было ясно, что происходит, и чего мы добиваемся на изображении.

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

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

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

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

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

Любимый одними и ненавистный другими. Не человек, но прием. Те, кому этот эффект не нравится называют его «доставший уже Голливуд!» (имеется в виду характерный для кино эффект синего света с одной стороны и красного, или оранжевого, с другой стороны), среди тех кто с ним работает и кому он нравится его часто называют «контровое освещение». Оно рождает яркий акцент на грани объекта и подчеркивает его форму. Это наше первое же действие в новом сете.
Второе действие добавляет яркие пятна света на спину в районе полосок, как если бы они были бы из другого материала. Второй виртуальный источник света находится с другой стороны антилопы. Третье действие - знаковое. Добавляется первая штриховка на основе чередующихся пикселей. Наиболее ярко это видно на блике сферы. Также делаются мелкие правки синего освещения.
Четвертым пунктом мы вносим в освещение спины Куди такую же штриховку как и на нашей сфере. Пятым пунктом мы балансируем появившуюся штриховку, расползаясь в разные стороны от засветки на спине штриховым «паттерном» (анг. pattern – регулярно повторяющийся элемент). Шестой пункт второй источник освещения, который подчеркивает куду со спины.

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

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

Мы уже близки к завершению. Четвертым пунктом мы добавляем вторую сторону меча и рукоятку, используя исходную палитру. Количество используемых цветов четырнадцать (14) и думаю стоит сделать себе пару подарков. Пятым действием мы вводим коричневый темнее всех существующих и по аналогу с ярким бликом затеняем только те места где тень должна быть по определению. В самом низу антилопы, там где копыта соприкасаются с шаром, на животе и на горле под головой. Добавление такого цвета как и в случае с ярким бликом должно быть редким и не назойливым. Однако в совокупности ощущение объема увеличится. Шестым пунктом мы добавляем последний цвет и сглаживаем основную штриховку на спине Куди, а затем «растягиваемся» по её телу одним из старых цветов еще больше охватывая штриховкой существенно большее пространство.

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

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

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

• Saul Armory - использует в качестве паттерна не решетку а нечто линейное, похожее на тертый метал, где ярко выражены лишь горизонтальные линии.
• SOLAR - практически не имеет градиентных перепадов и раскрашен разноцветными и грубыми линиями. Незначительное сглаживание присутствует только на углах логотипа. Основную погоду делает эффект выдавливания и резкого перепада цветов в его зоне.
• Snail Travel . Выполнен в мазковой технике. Паттернов нет. Зато есть пятна разной степени освещенности и частоты, которые как и полагается подобными рисункам вблизи распадаются на кашу, но будучи в отдалении образуют образ куда более реалистичный чем прочие. Происхождение данной техники - традиционные краски.

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

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

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

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

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

Глава IV – Касаясь ренессанса

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

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

Любая сущность имеет две стороны. Плохую и хорошую. Наличие большего количества цветов, сделавшее изображение богаче дало хорошего тумака пиксель-арту. Как бы сказал в этом случае Арамис – «так получилось». Художникам захотелось большего. И постепенно чистый пиксель-арт начал сменяться цифровым артом или артом оцифрованным, где по пятам следовало вездесущее 3D.

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

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

Сегодня, в наше с вами время, многие разработчики уходят назад по спирали времени, возвращаясь к истокам. Снова стал популярен жанр квеста, и более того квеста выполненного именно в старом графическом решении, где все действо сосредоточено в разрешении 320х240 столь близком к каноническому разрешению 320х200. Наиболее яркими образчиками «обратного витка» можно считать адвенчуры (квесты) - Gemini Rue, Resonance, Primordia. Есть и другие, но статья и так ломится от изображений.

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

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

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

Полируя Кудю я ориентировался на золотой фонд в виде игр от знаменитой игровой конторы Westwood Studios. У меня никогда не было настоящих учителей. Зато у меня всегда были игры. Они и стали моими учителями. К примеру, изображение из EGA эпохи я делал с оглядкой на еще одну известную французскую контору Silmarils. Её название удивительно соответствовало собственным играм, каждая из которых вполне может считаться особенным и редким камнем в сокровищнице игровой индустрии.

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

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

Глава V – Подводя итоги

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

• Палитра
• Форма (силуэт)
• Свет и тень
• Линия
• Штрих
• Сглаживание

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

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

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

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

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

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

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

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

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

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

Знаете что? По-моему не хватает одного элемента. И пусть это и не линия, но… пусть висит. Так картинка станет более грустной. А поскольку это не дерево, а столб, в этот раз меня не обвинят в плагиате.

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

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

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

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

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

Укрупненная машина для понимания процесса.

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

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

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

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

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

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

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

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

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

Эпилог

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

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

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

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

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

Всего хорошего, и спасибо за внимание! До новых встреч.

Бункер герр Текста

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

Анимацию также следует разделить на простейшую и сложную. Циклическая анимация мяча или отдыхающей антилопы на фоне саванны, это не так сложно как анимация шага или бега, к примеру, для кинематографического платформера класса Prince of Persia или Flashback. Как вы знаете достойных представителей этого жанра можно сосчитать на пальцах двух рук. Так что надо иметь большую наглость, чтобы писать об этом статью с собственными примерами. Наглости мне не занимать. Тем не менее, я позаботился о том, чтобы моя анимация не уступала лучшим представителям анимации в играх периода их расцвета.

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

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

Заметка четвертая , недовольная.
Вы, наверное, заметили, что тело статьи сквозит прострелами в отношении игровой индустрии, которая предпочитает делать упор на графику, а не на суть игр. Это раздражение вызвано тем, что даже «возвращатели легенд», которые собирают средства на свои проекты на Кикстартере, или обещают вернуться к истокам - на самом деле не выполняют своих обещаний. Или, не могут рассчитать свои силы. Или, просто не хотят этого делать полагая, что их имен, репутации, и побед прошлых лет хватит для того чтобы неплохо прожить сегодняшние.
Потому как результатом являются игры визуально похожие на «старинки». Однако, в этих новинках нет и половины того богатства функционала, игровой механики, что предлагали игры прошлого. Теперь за «фишку» игры можно выдать умение персонажа приседать за ящиком, или возможность этот ящик сломать (за примером далеко ходить не надо, непомерно раздутый проект Браена Фарго Wasteland 2). Что же это за убожество, дорогие мои? Игры прошлого предлагали полностью разрушаемые миры, где именно функционал игры рождал интереснейшие гейм-плейные и визуальные события. Для этого стоило родиться? Чтобы пройти, нога в ногу с игровой индустрией полтора десятка лет, дожить до седин, и увидеть, как вырождение выдается за прогресс?

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

- А ты мальчик что здесь делаешь?
- Дяденька, а мне сорок лет, я паспорт могу показать… «О чем говорят мужчины»

Primordia
Разработчик: Wormwood Studios

Примечание: Неоднократно встречался с распространенной ошибкой. При упоминании любой из этих трех игр вам могут ответить «Знаем, это Wadjet Eye Games разработали». Это - не так. Wadjet Eye Games это издатель и продюсер Дейв Гилберт (не путать с Роном Гилбертом), который осуществляет поддержку адвенчур. Насколько я понимаю на движке AGS. Это не мешает Дейву Гилберту быть разработчиком, автором серии Blackwell. Однако, разработчиками Resonance, Gemini Rue и Primordia являются указанные выше компании.

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

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

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

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

Инструменты

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

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

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

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

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

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

Линии

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

Прямые линии

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

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

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

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

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

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

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

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

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

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

Контур

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

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

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

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

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

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

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

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

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

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

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

Цвет

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

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

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

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

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

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

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

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

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

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

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

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

Шейдинг

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Дизеринг

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

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

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

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

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

Применение

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Применение

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

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

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

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

Отделка

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

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

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

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

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

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

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

P.S.

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

Pixel Art (Пиксельная графика) даже в наши дни очень популярна для игр и тому есть несколько причин!

Итак, чем же подкупает Pixel Art:

1. Восприятие. Pixel Art выглядит потрясающе! Можно многое рассказывать о каждом отдельном пикселе в спрайте.
2. Ностальгия. Pixel Art возвращает большое ностальгическое чувство для геймеров, которые выросли, играя Nintendo, Super Nintendo, или Genesis (как я!)
3. Простота обучения. Pixel Art - одно из самых простых для изучения видов цифрового искусства, особенно если вы скорее программист, чем художник;]

Итак, вы хотите попробовать свои силы в Pixel Art? Тогда следуйте вместе со мной и я покажу вам, как сделать простого, но эффектного игрового персонажа, которого вы сможете использовать в вашей собственной игре! Кроме того, в качестве бонуса, мы рассмотрим как интегрировать его в iPhone игры!

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

Что такое Pixel Art?

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

Градиент : выбор двух цветов и расчета цвета пикселей, находящихся между ними. Выглядит круто, это но не Pixel Art!

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

Инструмент Сглаживание (в основном, генерирующих новые пиксели в различных цветах, чтобы что-то сделать "гладким"). Вы должны избегать их!

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

Другие инструменты, такие как (линия) или paint bucket tool (ведро с краской) также автоматически генерирует пиксели, но, поскольку вы можете настроить их на не сглаживание крев заполняемых пикселей, считается что эти инструменты дружественны к Pixel Art.

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

Начало работы

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

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

К примеру, если Вы хотите, чтобы игра выглядела увеличенной вдвое на экране iPhone 3GS (“Да, я действительно хочу придать пиксельного ретро-вида своей игре!”), разрешение экрана которого – 480х320 пикселей, то работать надо с разрешением, вдвое меньшим, в данном случае это будет 240х160 пикселей.

Откройте новый документ Photoshop (File → New… ) и установите такой размер, каким будет размер вашего игрового экрана, после чего выберите размер для вашего персонажа.

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

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

Рисуем Pixel Art персонажа

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

В Photoshop выберите Pencil tool (Инструмент Карандаш). Если вы не можете найти его, просто нажмите и удерживайте инструмент Brush Tool (Инструмент Кисть) и вы сразу же его увидите (он должен быть вторым в списке). Вам просто нужно будет изменить его размер, сделав его равным 1px (вы можете нажать на панели параметров инструмента и изменить его размер или просто удерживайте клавишу [).

Также вам понадобится Erase tool (Инструмент Ластик), так что нажмите на него (или нажмите клавишу E) и измените его настройки, выбрав из выпадающего списка Mode: (Режим:) Pencil (Карандаш) (т.к. в этом режиме нет сглаживания).

А теперь начнем пикселить! Нарисуйте брови и глаза как показано на изображении ниже:

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

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

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

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

Выберите , нажав и удерживая Rectangle tool (Инструмент Прямоугольник)

Перейдите к панели параметров инструмента, в выпадающем списке Pick Tool Mode (Режим Вычерчивания Контура) выберите Pixel , изменить Weight (Толщина) на 1px (если это уже не сделано) и снимите флажок Anti-alias (Сглаживание). Вот как у вас должно быть:

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

Применяем цвета и тени

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

Раскрастьте вашего героя как на рисунке ниже (но не стесняйтесь проявить творчество и использовать свои собственные цвета!)

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

Не стоит тратить время на закрашивание каждого пикселя. Чтобы ускорить работу используйте линии для одинакового цвета, или Paint bucket tool (Инструмент Ведро с краской), чтобы заполнить пробелы. Его, кстати, тоже придется настроить. Выберите Paint bucket tool на панели инструментов (или просто нажмите клавишу G) и изменить Tolerance (Допуск) на 0, а также снимите галочку с Anti-alias (Сглаживание).

Если вам когда-нибудь потребуется использовать Magic Wand tool (Инструмент Волшебная палочка) - очень полезный инструмент, который выбирает все пиксели с одинакового цвета, то настройте его также как и инструмент "Ведро с краской" - нет допуска и сглаживания.

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

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

А теперь, как я и обещал небольшой гид по свету и теням:

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

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

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

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

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

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

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

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

Как вы могли уже видеть, я выключил сглаживание во всех инструментах, которые я использовал до сих пор. Не забудьте это сделать и в других инструментах, например, Elliptical Marquee (Овальная область выделения) и Lasso (Лассо).

Этими инструментами можно легко изменять размер выделенных частей, или даже повернуть их. Чтобы сделать это, используйте любой инструмент выделения (или нажмите клавишу M), чтобы выбрать область, щелкните правой кнопкой мыши и выберите Free Transform (Свободное трансформирование), или просто нажмите Ctrl + T . Чтобы изменить размер выделенной области, перетаскивайте один из маркеров расположенных по периметру рамки трансформации. Чтобы изменить размер выделенной области сохраняя пропорции, удерживайте клавишу Shift и перетаскивайте один из угловых маркеров.

Тем не менее, Photoshop автоматически сглаживает все, что отредактировано с помощью функции Free Transform , поэтому перед редактированием перейдите к Edit → Preferences → General (Ctrl + K) и измените Image Interpolation (Интерполяция изображения) на Nearest Neighbour (Ближайший сосед). В двух словах, при Nearest Neighbour новая позиция и размер вычисляются очень грубо, при этом не применяются никакие новые цвета или прозрачности и сохраняются цвета, которые вы выбрали.

Интегрирование Pixel Art рисунка в игры на iPhone

В этом разделе вы узнаете как интегрировать наш пиксельный рисунок в игру на iPhone, используя игровой фреймворк Cocos2d. Почему я рассматриваю только iPhone? Потому что, благодаря циклу статей про Unity, (например: , или Игра в стиле Jetpack Joyride в Unity 2D) вы уже умеете работать с ними в Unity, а из статей про Crafty (Браузерные игры: Змейка) и Impact (Введение в создание браузерных игр на Impact) вы узнали как вставлять их в холст canvas и создавать браузерные игры.

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

Создайте новый проект iOS → cocos2d v2.x → cocos2d iOS template , назовите его PixelArt, и выберите в качестве устройства iPhone. Перетащите созданный пиксель арт, например: sprite_final.png в ваш проект, а затем откройте HelloWorldLayer.m и заменить метод инициализации на следующий:

-(id) init { if((self=)) { CCSprite * hero = ; hero.position = ccp(96, 96); hero.flipX = YES; ; } return self; }

Мы позиционируем спрайт в левой части экрана и повернули его так, что он смотрит вправо. Скомпилируйте, запустите, и тогда вы увидите на экране ваш спрайт:

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

Hero.scale = 2.0;

Ничего сложного, не так ли? Скомпилируйте, запустите и... постойте, наш спрайт размыт!

Это потому, что по умолчанию Cocos2d сглаживает рисунок, когда масштабирует его. Нам это не нужно, поэтому добавьте следующую строку:

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

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

А что же дальше?

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

• Всегда старайтесь избежать использования сглаживания, градиентов, или большого количества цветов для ваших ассетов. Это для вашего же блага, особенно если вы еще новичок.
• Если вы ДЕЙСТВИТЕЛЬНО хотите подражать ретро-стилю, обратите внимание на изображения в 8-битных, или 16-битных консольных играх.
• Некоторые стили не используют темные контуры, другие не учитывают влияние света или тени. Все зависит от стиля! В нашем уроке мы не стали рисовать тени, но это не значит, что вы не должны их использовать.

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

Шаг 1

Шаг 2

Шаг 3

Шаг 4

Шаг 5

Шаг 6

Шаг 7

Шаг 8

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 графике старомодный вид «безопасных» цветов ”.

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

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

Adobe Photoshop не нуждается в представлении, но я все же расскажу подробней. Как ведущее программное обеспечение для редактирования изображений с высоким разрешением, Photoshop будет стоить вам $20 в месяц в зависимости от выбранного вами тарифа подписки (годовой дешевле, чем ежемесячный). Студенты могут приобрести его дешевле – за $10 в месяц. Если вам уже посчастливилось заполучить себе копию, благодаря образовательной лицензии, или до оформления подписки, использование программы для создания графики сразу становится более возможным. Преимуществом использования продукции Adobe является наличие огромного количества ресурсов. Если есть функция, которую вам нужно изучить, вы можете не сомневаться, что есть официальная документация и бесконечное количество текстовых и видеогайдов в Google.

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

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

GIMP

Изображение из урока по перекрашиванию спрайт-листов в Gimp.

Цена : беслатно
Доступно для : Windows / OS X / Linux

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

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