Пятница, 25.07.2025, 05:48

PiXELART Z0NE













Мы переехали на Pixel.ReSampled.Ru.

Нажмите на это сообщение, если не хотите ждать.

Меню сайта
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Календарь
«  Май 2012  »
Пн Вт Ср Чт Пт Сб Вс
 123456
78910111213
14151617181920
21222324252627
28293031
Архив записей

Блог

Главная » 2012 » Май » 02 » Изометрический пиксель-арт (Isometric Pixel-Art)
18:26
Изометрический пиксель-арт (Isometric Pixel-Art)

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

 

Изометрическое изображение

Изометрия [греч. isometría «равномерность»] означает, что все стороны изображаются в одном масштабе, то есть  длина 1 м по оси  X ,Y и Z отображается  одинаково. Оси X и Y образуют угол в 30° относительно горизонтали.

Особенности пиксель-арта

В пиксель-арте угол вместо 30° составляет около 26,565°. К математической подоплеке в данном случае  лучше не обращаться. Такой угол получается потому, что без использования сглаживания контурных неровностей только так можно достичь таких чистых и точных линий. Но подробнее об этом позже!

Применение

Изометрическое изображение пиксельной графики часто использовалось на более старых ПК /игровых консолях, чтобы снизить вычислительную трудоемкость и в то же время сохранить иллюзию  3D.

К известным играм среди прочих относятся «Age Of Empires I/II», «Rollercoaster Tycoon 1/2″ и «Sim City». Однако сегодня в большинстве случаев предпочитают «настоящее» 3D , так как оно лучше создает ощущение реальности и трудозатраты на его создание меньше.  В связи с все возрастающей мощностью ПК большой вычислительной трудоемкостью пренебрегают. Теперь изометрический пиксель-арт используется, как правило, в браузерных играх или как вид искусства.

Необходимые программы

Для работы с пикселями подойдет почти любая программа. Некоторые предлагают дополнительные функции, которые существенно облегчают работу. Даже программа Microsoft Paint, устанавливаемая с Windows, подойдет для работы с пикселями. Однако  она не предназначена для работы с плоскостями или с прозрачностью. В качестве бесплатной альтернативы, к сожалению, достаточно дорогой программе Photoshop имеются «Gimp»  (также для  Linux) и «Paint.NET».

Пиксели с помощью Photoshop

Очень важно: от использования фильтров размытия и резкости, а также от использования инструмента «Палец» необходимо отказаться!

Основные инструменты


 

Цветной карандаш

При нажатой кнопке « Alt» с помощью пипетки можно быстро выбрать нужный цвет. Отпускаете кнопку, снова получаете инструмент «Цветной карандаш».

Инструмент «Цветной карандаш» является, пожалуй, самым важным инструментом. С его помощью можно добавлять отдельные пиксели. Основной диаметр равен 1 пикселю. Режим «Normal» и  плотность покрытия на 100 %.



Волшебная палочка

С помощью инструмента «Волшебная палочка» можно выбрать площадь, которая будет одного цвета. Допуск отклонений (Tolerance) лучше всего установить на ноль. Если поставить  флажок напротив «Contiguous» («Смежные») будут выбраны только граничащие друг с другом пиксели. Удалите флажок напротив «Anti-alias» («Сглаживание»).


Ластик

На данный инструмент, пожалуй, не стоит тратить много слов. Здесь лучше всего установить режим «Цветной карандаш». Основной диаметр выбирается по необходимости. Плотность покрытия опять на 100%


Заливка 

С помощью инструмента «Заливка» можно покрыть поверхность одним цветом. Допуск отклонений (Tolerance) установить на 0. Плотность покрытия на 100%. Флажок напротив «Anti-alias» («Сглаживание») удалить, а напротив «Contiguous» («Смежные») поставить.

Градиентная заливка не используется!


Инструмент Zoom 

С помощью инструмента Zoom можно увеличить или уменьшить масштаб изображения. В пиксельной графике часто работают в большом масштабе. Путем нажатия на «Реальный размер» получаем снова нормальный масштаб.


Окно выбора 

Если удерживать нажатой клавишу «Strg», то можно перейти к инструменту «Смещение» и сместить выбранную область.

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

Кисти (Brushes)

Еще одна полезная функция, которая значительно облегчит работу с пикселями. Если нужно начертить, например, более длинную изометрическую линию, не нужно задавать каждый пиксель по отдельности или использовать Copy&Paste. Это работает следующим образом:

1.0

Сначала чертим короткую изометрическую линию. Затем ее выбираем (Рис. 1.0).

Потом заходим в меню и устанавливаем на Обработать->Заданная кисть. Появится окно, в котором можно ввести имя (Рис. 1.1).

После нажатия клавиши «Ок» можно использовать новые кисти. Для этого выбираем цветной карандаш. И нажимаем на клеточку рядом с «Кисти»: сверху в панели настроек.  Далее открывается окно настроек. Внизу находим новой созданную кисть (Рис. 1.2). Теперь можно легко и просто чертить изометрические линии. Конечно, таким образом можно работать с любыми другими формами.

Формат файла

В пиксель-арте могут использоваться следующие форматы файлов:

  • BMP – не рекомендуется, так как нет хорошего сжатия и прозрачности
  • PNG – нет анимации, возможна полупрозрачность
  • GIF – макс. 256 цветов, нет полупрозрачности

Оригинал / JPG

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

Линии

На левом рисунки некоторые примеры линий отображены в увеличенном виде. Справа изображен плохой пример. Так делать не надо.  Можно сказать: чем равномернее линия, тем лучше. Но в принципе все разрешено, что красиво смотрится!

Основная линия 

Оригинальный размер

Основная линия используется чаще всего. Она проходит параллельно оси S, X или Y. Лучше всего создать новую плоскость и в ней начертить звездочку, как показано слева.  Тогда линия всегда наготове для Copy & Paste. Еще проще, если Вы создадите заданную кисть (Brush) для изометрических линий!

На рисунке справа еще раз иллюстрируется, как появляются такие линии. Все время 2 пикселя в бок и 1 пиксель вверх/вниз.


Квадраты

Для начала выберете очень большой масштаб. 1200% было бы оптимально. При работе с квадратными конструкциями есть две возможности. Первый вариант – использовать линию для углов длиной в 3 пикселя таким образом, чтобы вертикальная линия могла быть расположена в центре. При втором варианте вертикальная линия просто сдвигается на один пиксель влево или вправо. Преимущество второго варианта в том, что рядом друг к другу можно поставить (приложить) любое количество квадратов. При использовании варианта один возможно возникновение неровного края.


Оттенок

При работе с квадратом есть много возможностей создать оттенок. Следующий рисунок иллюстрирует несколько таких возможностей.

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


Глубокие тени 

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

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

Вот  один из вариантов: тень шириной 1/3 высоты квадрата. Здесь следует  проявить творческую свободу и не всегда все точно рассчитывать в пикселях.


Пирамиды 

Собственно говоря, с пирамидами работать также просто, как и с квадратами.

Вот лишь  пара примеров:


Окружности 

Окружности – это, пожалуй, самое сложное при работе с пикселями. Существует много способов создать окружность. Здесь я покажу, как это делаю я.

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

Теперь воспользуемся инструментом  для создания эллипса. Удерживаем нажатой клавишу Alt и с помощью мышки нажимаем в середину квадрата. Кнопку мыши и клавишу Alt удерживаем нажатыми, и растягиваем эллипс, пока он не коснется сторон квадрата.

Теперь мы создаем новую плоскость. Нажимаем в меню  «Выбор->Изменить выбор->Край». В качестве размера задаем 1 пиксель.  Должно получиться такое же изображение, как на рисунке 3.

Только что сделанный выбор мы заполняем каким-нибудь цветом.  К сожалению, будет заполнена не только выбранная область, но и область рядом с ней. Поэтому нам нужно вернуть  выбор и удалить все лишнее. Для этого нажмите в меню на «Выбор->Вернуть выбор». Теперь пару раз нажать на «Удалить» и перед нами красивая изометрическая окружность. Вспомогательную конструкцию можно удалить, сделав невидимой соответствующую плоскость.

У Вас должно получиться нечто похожее:


Цилиндры 

Если Вы одолели окружности (ИИ-ХА!), то Вы легко справитесь и с цилиндрами. Для этого мы создаем окружность, как описано выше, дублируем ее и соединяем две окружности вертикальными линиями.

Проще простого:


Оттенок 

Пожалуйста, не используйте градиентную заливку в  Photoshop. Так как такая заливка вообще не подходит для пиксель-арта и выглядит искусственно.

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

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

Просмотров: 4929 | Добавил: defaultNick | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]