Сглаживание

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

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

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

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

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

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

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

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

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

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

Рисование машины, людей и деревьев в изометрии

Рисуем человека

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

Просто стоящий на месте человек, а также ничем не занятый - это скучновато, неправда ли?

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

Рисуем машину

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

1.    Нарисуйте контур машины.

2.    Раскрасьте ее.  Только внешние линии(контур) должны быть черными.  Заметьте, что машина выделяется. Поэтому детализируйте ее.

3.    Закрасьте окна. Но не забывайте добавить яркость (перелив) на окнах. Затем нарисуйте фонари.

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

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

Рисуем деревья

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

1.    Нарисуйте ствол

2.    Продолжите контур вашего дерева, до верхушки. Вы можете нарисовать любую форму, какую только захотите.

3.    Раскрасьте дерево. Используйте, как минимум  три цвета, чтобы сделать эффект трехмерности. Основание сделайте темнее.

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

5.    Соедините ствол с листвой, и дерево готово.

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

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

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

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

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

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

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

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

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

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

Рисование других фигур в изометрии

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

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

Когда вы знаете, как нарисовать пирамиду в изометрии, приступим к цилиндрам. Изобразить цилиндр не составит никакого труда. Цилиндр состоит из двух кругов соединенных линиями. Для создания цилиндра мы должны проверить совпадет ли круг с изометрической площадью как показано на примере ниже. При рисовании цилиндра я использовал тени, изменяя градиент цвета от темного к светлому. Эта техника помогает придать 2D объекту больше реалистичности при помощи теней, бликов и т.п.

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

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

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

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

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

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

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

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

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

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

Полезные ссылки

• Sprosonok Blog
• VOLDIMARS.RU 
• LLAMA.RU
• PixelDigest
• Gas 13
• Megapont

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

Изометрический куб

Глава 2. Создание первого изометрического куба

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

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

При помощи инструментов выделении, выделите полу нарисованную фигуру и скопируйте её в буфер обмена. Горячие клавиши для этого: Ctrl-C. Убедитесь в том, что фон копируемого объекта прозрачный.

После вставки, нам потребуется развернуть куб в противоположенную сторону. Сделать это можно, открыв опцию Flip/Rotate или же Ctrl-R. Если вы допустили ошибку или у вас что-то не получилось, то для отмены последнего действия используется комбинация клавиш Ctrl-Z. Выбираем повернуть по горизонтали и соединяем линии, так чтобы обе стороны были симметричны.

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

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

 

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

Глава 1. Базовые знания.

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

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

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

·       Глава 1

-Введение

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

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

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

·       Глава 2

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

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

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

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

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

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

·       Глава 3

-Цвета

-Свет

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

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

·       Глава 4

-Текстуры

-Трава

-Стекло

-Грязь и т.п

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

·       Глава 5

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

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

-Позы

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

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

·       Глава 6

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

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

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

·       Глава 7

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

-Выводы

-Ссылки

Дизеринг

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

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

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

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

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

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





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

Окраска

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

Выбор цвета

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

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

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

Затемнение

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

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

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

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

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

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

Линии

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

Грубый эскиз

Используете мышь или планшет, либо что-то другое, чтобы схематически изобразить объект или сцену. Я здесь начал здесь рисовать подобие кошки. Давайте назовем его Pix.

Очистка

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

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

Это понадобится вам при рисовании линий. Идеально ровная линия строится под углами 90 или 45 градусов, как показано на примере 1,2. Компьютер показывает хорошо линии  только для этих углов. Другие хорошие линии как правильно сделаны из пикселей 2x1, 3x1 как показано на примере 3. Для кривых используете маленькие нарастающие линии как показано на примере 4. Используете их особенно там, где края. Избегайте неправильных, угловых линий пример 5. Они будут выглядеть неровно и криво.