Сглаживание

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Текстуры в изометрии и пиксель арте

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

Кирпичи

Достаточно просто нарисовать кирпичи, если используешь ms paint. Пока вы рисуете кирпичную стену, то вы запросто сможете переключаться между photoshop и ms paint. Главной причиной, из-за которой я использую ms paint, так это то, что я смогу нарисовать в нем кирпичи быстрее: просто копируя один кирпич, а после вставляя его много раз. Сперва, нарисуйте контур кирпича. Теперь выберите его средний оттенок, к примеру: #9D9D4F. Раскрасьте внутреннюю сторону кирпича. Нижнею, внутреннюю сторону закрасьте более светлым цветом. Теперь  включите ms paint, и скопируйте этот кирпич. Следующие шаги будут очень-очень простыми и быстрыми. Просто копируйте и вставляйте, до тех пор пока не получите линию такой длины, которой вам нужно. После многочисленных cntrl -c, cntrl-v у вас получится что-то похожее на это.

 Ну вот все и готово! Такого рода текстуры можно добавлять к своему зданию!

Трава

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

Крыши

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

Полы

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

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

Коротко о цвете

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

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

Про цвета можно почитать и здесь.

Комбинируем фигуры в изометрии

Глава 2. Комбинируем фигуры

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

Уроки Pixel Art

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Текстуры

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

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

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

Глава 2. Изометрическая сетка

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

Для того, чтобы каждый отдельный квадрат на сетке, вписался в место, линии, соединяющиеся сверху и снизу, квадраты, должны быть точно такие же, как и линии. В изометрическом мире, есть два типа построения - "Тип А" и "Тип В"(см.ниже), которые используются в изометрическом строительстве.

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

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

Глава 2. Правило изометрических линий

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

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

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

Линии в изометрии

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

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

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

Отмасштабировав её ближе, можно увидеть, как формируется линия, а при исходном её размере, видно, что линия прямая и четкая.