Рисуем текстуру дерева

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

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

Теперь нужно проверить цикличность. Хорошо ли выглядят тайлы соединенные друг с другом? Выглядит ли это аккуратно? Если нет, то поправляйте все прямо сейчас, а не потом. Смотрим…

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

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

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

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

Благодарю Марса, за перевод этой замечательной статьи. Рекомендую вам посетить его блог в котором вы найдете статьи с пиксель арт'ом, работы автора и множество другой информации, которую любопытно почитать. Спасибо за внимание, надеюсь урок дал вам многих разъяснений. Автор этого урока: Kiwinuptuo

Рисование иконок

Значок документа

Создайте новое изображение, атрибуты которого равны 20х20 пикселей. Установите нужный для вас цвет фона. Нажмите сочетание клавиш CTRL +0 для того что увеличить размер изображения на экране. Выберите инструмент «Карандаш» и установите размер рисования в 1 пиксель.

Рисуем, так как показано на рисунке выше. Небольшой совет, если вы будете удерживайте нажатой клавишу Shift, то во время рисования линии, вы будете проводить прямую линию. Теперь просто нарисуйте несколько линий посередине на нашей иконке.

Значок Корзины

Вы можете рисовать в одном и том же стиле как вам только будет удобно.

Иконка письма, дома и лупы

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

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

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

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

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

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

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

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

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

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

Сглаживание

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

Способ 1

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

Способ 2 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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