Уроки Pixel Art

Кевин и его рекомендации связанные с пиксель арт

• Подготовка
• Линии
• Окраска
• Дизеринг
• Сглаживание

Переводы уроков PixelNascImpact

• Изометрия в пиксельной графике и пирамида в изометрическом пиксель арт'е
• Цилиндр в пиксель арт, а также как нарисовать растением в пиксель арт.
• Учимся по шагам создавать домик в пиксель арт

Учебник Марка рассказывающий все азы пиксель арт'а

• Подготовка к работе
• Общие навыки
• Отделка контуров

Рисуем деревья в пиксель арт'е

• Как нарисовать дерево в пиксель арт

Рисование людей в пиксельном искусстве

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

А как нарисовать иконки?

• Создание Pixel Icon
• Рисуем иконку женщины
• Рисование простых иконок

Все про изометрию

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

Текстуры

• Создаем текстуру камня
• Рисуем текстура дерева

*Примечание этот список будет пополнятся с появление новых материалов в блоге

Окраска

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

Выбор цвета

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

Стандартное раскрашивание

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

Затемнение

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

Смягчение контуров

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

Небольшой совет

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

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

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

Доброго вам дня или ночи =)

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

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

Для начала я всегда начинаю с основной формы головы человека. Нарисуйте форму головы с нужным вам контуром.

Теперь рисуем структуру человеческого тела. Оно уже нарисовано вместе с одеждой.

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

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

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

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

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

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

До новых встреч!

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

Нарисуйте круг.

-размером:70px

-цвета:#88bf67

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

-цвета:#f6d08d

И ещё один «несовершенный» круг.

-цвета:#cddd96

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

Нарисуйте полукруги в нижней части основы так, как показано в этом примере.

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

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

А теперь проделайте тоже самое, и с верхней основой.

Сейчас  нарисуйте в случайном порядке несколько таких пикселей, как эти:

С верхушкой проделайте те же действия.

Добавьте разбитые круги, чтобы заполнить «пустоту».

Напоследок закончите свою работу добавлением нового яркого цвета: -#e1f4a2

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

Как нарисовать сакуру в пиксель арт'е

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

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

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

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

В результате у нас получится что-то вроде этого.

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

Отделка Контуров

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

Смягчение контуров

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

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

Осветление контуров

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

Удаление контуров

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

Сглаживание

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

Способ 1

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

Способ 2 

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

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

Основные навыки требующие рисование в 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 больше, чем другие).