Сглаживание

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

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

Основы сглаживания

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

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

Примеры 3 и 4 показывают, как сглаживать линии находящиеся под углом. Линию 2x1, вы должны сглаживать в один пиксель справа и слева от линии. Для линии 4x1, я использовал два пикселя для сглаживания. Существует правило, которое гласит, что нужно использовать столько пикселей для сглаживания, сколько является длина половины исходной линии. Поясняю, у нас на примере исходная линия в четыре пикселя значит, сглаживание будет на два пикселя. В другом примере исходная линия 2 пикселя, сглаживания будет 1 пиксель. В общем, чем меньше будет использовать пикселей, тем лучше. 

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

Сглаживание цветов

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

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

Создаем текстуру камня

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

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

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

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

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

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

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

Как вы видите в итоге, без тренированного глаза будет довольно сложно различить сетку из тайлов.

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

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

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

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

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

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

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

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

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

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

Уроки Pixel Art

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Текстуры

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

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

Необходимые инструменты

Глава 1. Необходимые инструменты.

Это хорошо когда мы прошли некоторые скучные вещи и вполне можем подойти к тому, как нарисовать изометрический пиксель арт. Для начала нам потребуется небольшая программа, которая есть в большинстве версий Microsoft Windows. Название её MS Paint (Microsoft Paint). Помимо этой программы, можно использовать и другие такие как, Adobe Photoshop, Paint Shop Pro, Graphics Gale, Pixel Editor..список можно продолжать долго. Для новичка сойдет и обычный MS Paint. Следует учесть если ваша работа предназначена для просмотра  на веб – страницах, то желательно сохранять её в формате GIF или PNG. Растровый формат файла, например JPEG, испортит, и при этом же увеличит размер вашей работы. В процессе нашей работы, нам понадобиться ещё одна программа, Microsoft PaintBrush, которую можно будет найти, на просторах этого блога.

Полное руководство по изометрическому пиксельному искусству

Данное руководство, достойно объясняет, что же такое изометрия и как рисовать её в пиксель арте. Руководство поделено на 7 глав, с которыми вы можете ознакомиться ниже. Это руководство переводиться, и со временем, будет выкладываться в блог.

·       Глава 1

-Введение

-Базовые знания

-Нужные инструменты

-Идеи и анализирование

·       Глава 2

-Базовые линии в изометрии

-Правило построения

-Изометрическая сетка

-Создаем первый изометрический куб

-Другие фигуры

-Комбинируем фигуры

·       Глава 3

-Цвета

-Свет

-Контуры и освещение

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

·       Глава 4

-Текстуры

-Трава

-Стекло

-Грязь и т.п

-Детализируем вашу работу

·       Глава 5

-Рисуем человека в изометрии

-Основы строения и масштабирования

-Позы

-Контуры и Цвета

-Примеры для наглядности

·       Глава 6

- Учимся рисовать стол в изометрии

-Настраиваем сцену

-Небольшой урок «Как нарисовать кухню в изометрическом пиксель арте»

·       Глава 7

- Ваш дом или делаем изометрический проект больше

-Выводы

-Ссылки

Дизеринг

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

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

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

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

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

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





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

Окраска

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

Выбор цвета

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

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

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

Затемнение

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

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

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

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

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

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

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

Перед началом предлагаю ознакомится с содержанием данной серии:
1)Подготовка
2)Линии
3)Окраска
4)Дизеринг
5)Сглаживание

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

Инструменты для рисования

В основном, все, что вам понадобиться, это компьютер и программа которая, редактирует изображения. Я использую PaintShop Pro 7, но есть множество программ, которые позволяют свободно рисовать пиксельную графику:

Paint.net

GIMP

Ms Paint

Graphics Gale

Allegro

Все дело в удобстве. Какой вам нравится интерфейс и функциональность к той программе вы и привыкните.

Другие предложения

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

Форматы файлов

 Это пока последняя рекомендация, и её нужно как следует подчеркнуть. Всегда сохраняйте свою пиксельную работу в формате GIF или PNG. Никогда не сохраняйте в формате JPEG. Файлы GIF и PNG используют сжатие без потерь, а также файлы GIF поддерживают анимацию, но ограничивают цветовой палитрой в 256 цветов. PNG формат был разработан, в целях того, чтобы заменить GIF. Его преимущество – поддержка множество цветов, а также альфа прозрачность. JPEG, не предназначен для пиксельной графики, так как, он использует сжатие и тем самым, причиняет ущерб пиксельной работе.

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

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

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

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

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

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

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

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