Основные навыки требующие рисование в Pixel Art

LineArt 

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

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

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

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

Цвета

После того как вы довольны своим LineArt’ом вы должны решить как его раскрасить. Хороший выбор цвета помогает сделать объект более реалистичным, а также придать индивидуальности и настроение рисунку. Ненадлежащие использование цвета является лишним в работе, так как он будет отвлекать зрителей и просто напросто испортит вашу работу.

RGB Ценности 

Компьютеры используют комбинацию из трех разных цветов, чтобы создать один пиксель: красный, зеленый и синий (RGB). Внутри компьютера, каждый из этих трех цветов ему задается значение от 0 до 255, где 0 означает 'нет' и 255 означает 'много'. Эти цвета можно смешивать в различных количествах для получения одного цвета на пикселе, принцип как краски. Однако некоторые из порожденных цветов не то, что вы ожидаете от смешения красок.

Пример:
255, 0, 0, дает очень яркий красный цвет.
1, 1, 1 дает черный.
255, 255, 255 дает чистый белый.
140, 140, 140 дает средне-серый цвет.
Примечание - 0, 0, 0, часто используется для – прозрачности.

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

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

Вот несколько примеров из цветов, которые я лично считаю хорошими.

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

Я сделал пару неудачных попыток найти подходящие яркие цвета,  для этого супергероя.

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

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

Затемнение

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

Создание источников света

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

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

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

Тень

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

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

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

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

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

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

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

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

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

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

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

Учебник Марка о Пиксель Арт

Давайте начнем!

Для начала предлагаю ознакомиться с содержанием:

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

2)Общие навыки
3)Отделка контуров

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

Трата времени и усилий

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

Основные художественные навыки

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

Ничего не получается с первого раза

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

1)Что неправильно в нем?

2)Как это можно исправить?

3)Редактирование

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

Использование ссылок

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

Инструменты которые нужны и не нужны

Я исключительно рекомендую вам один спрайт редактор: Graphics Gale. Это фантастический общедоступный пакет рисования, который ориентирован на пиксель арт. Скачать его вы можете здесь!

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

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

Инструменты которые не нужны

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

2)Microsoft Paint или Ms Paint. В этом графическом пакете слишком мало функций для более сложной работы. Graphics Gale значительно преимущественнее этой программы.

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

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

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

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

Добавляем такие элементы как окна, дверь и другие детали..

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

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

Вторая часть уроков от PixelNascImpact

Создание цилиндра

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

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

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

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

В финале должно получится что то вроде этого.

Создания растения в пиксель арт'е

Прежде всего, сделать цилиндр для горшка растения. Он будет являться основой нашего объекта.

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

Затем мы рисуем само растение, чтобы правильно был смоделирован объект.

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

То что получаем в завершении(изображении имеет исходный размер 

Уроки от PixelNacsImpact

Предлагаю ознакомится вам с содержанием этих уроков:

1)Изометрия в пиксельной графике и пирамида в изометрическом пиксель арт'е

2)Цилиндр в пиксель арт, а также как нарисовать растением в пиксель арт.

3)Учимся по шагам создавать домик впиксель арт

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

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

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

На заметку: угол наклона линии в точности соответствует 26,565 °. Также это полезно знать, чтобы вы использовали API из рисунков для Flash MX для примера.

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

Реализация пирамиды

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

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

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

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

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

Isometric Pixel Graphics -IPG

Isometric Pixel Graphics - интернет ресурс, если быть точнее, блог, связанный с пиксельной графикой, в том числе и с изометрической. Главной тематикой контента, является редкое цифровое искусство – Pixel Art.

VldPixel

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

В дальнейшем, я пришёл к выводу, что, очень мало информации связанной с пиксельным искусством (по крайней мере русскоязычной). Я видел, приблизительно 10-15 русскоязычных сайтов на данную тему и то в некоторых было всего лишь пару статье и не более. Также я видел в интернете блог с пиксель арт, но он почему то остановился и больше не обновлялся.  После мне пришла идея, о том, чтобы создать интернет пиксельный ресурс, который будет постоянно пополняться свежей актуальной информацией, а также развиваться в нужном направлении. Так и появился блог <<Isometric Pixel Graphics>> в котором задействованы различные уроки, полезные статьи и доброжелательные рекомендации. Перспектива блога заключается в том, что если ресурс будет успешным то в дальнейшем превратиться в полноценный сайт с форумом и надлежащем ему функционалом. Благодарю вас за внимание =)