Введение в изометрию

Глава 1. Введение.

Изометрический пиксель арт, Isometric pixel art (IPA), является современным видом цифровой живописи, который был недавно утвержден, как новая форма искусства. Я уверен, что многие из нас, видели этот вид искусства, особенно в старых играх таких как «X-COM» или же «Ultima Online». Двухмерное представление трехмерного объекта является любимым и увлекательным делом для большинства людей. Скорее всего, это возможно лишь потому что, в изометрических работах есть много простых мелких деталей на которые дивно любоваться. 2D вид рисования очень простой и легче в освоении. Задача любой нарисованной работы,  чтобы она привлекала к себе хорошее внимание, и создавало положительное впечатление.

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

Рисование пиксельной машины в изометрии

Этот урок покажет тебе, как рисовать простые изометрические автомобили в Pixel Art, используя Photoshop или любые другие графические редакторы, которые есть на вашем компьютере. В Pixel Art используют пиксели, чтобы создать изображение, строя картинку пиксель за пикселем так же, как  в LEGO создают модель по кирпичику. Pixel Art создает

ретро-вид, который возвращает нас к ранней компьютерной графике игры, где разрешение экрана диктовало детали графики игр.

Этот урок взят из pixelparkinglot.com. Он позволяет тебе нарисовать свою собственную машину, купить парковочный билет и соединить авто с веб-сайтом, по твоему выбору. Если ты будешь следовать этому уроку и создашь шедевр, то почему бы и не рассмотреть парковку твоей поездки на нашем лоте. Этот урок был создан при помощи Photoshop,однако ты можешь использовать любую программу для работы с изображением, которая позволит тебе рисовать на уровне пикселей, включая  MS Paint на базовом уровне, или ты можешь попытаться попробовать онлайн инструмент, как SUMO Paint.

Когда ты открываешь документ Photoshop, ты можешь увидеть каркасный шаблон. Этот пример показан на 400% от оригинального размера. 

Откройте файл PSD, включенный в загрузку, или если ты не способен открыть документ Photoshop, открой включенный в архив - GIFimage. Файл содержит простой каркас автомобиля, который даст тебе базовые размеры для собственного творчества. 

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

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

Мы будем использовать более темный оттенок цвета, которые мы выбрали, чтобы заполнить часть автомобиля. Ты можешь выполнять заполнение инструментом для этого (если ты используешь инструмент Photoshops Pain Bucket, только выключи Anti-aliasing, чтобы не нарушить каркас) или используй инструмент карандаша, чтобы раскрасить область.

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

Заполните остальную часть автомобиля более светлым оттенком выбранного цвета.

Добавление деталей добавляет глубину к изображению.

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

Теперь мы можем начинать добавлять еще несколько деталей. Когда работаешь с изображением,  измененным в масштабе, не забывай вернуть масштаб, чтобы увидеть, как будет выглядеть законченная работа. Добавь штриховку к кузову, дополнительные детали и интерьер.Финальный результат и картинка в 100% размере.

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

Строительство небольшого дома в пиксельной графике

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

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

Далее следует раскраска контура, основных частей и углов, цветами соответствующей поверхности.

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

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

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

Вторая часть уроков от PixelNascImpact

Создание цилиндра

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

На новом слое, используйте инструмент овальные выделения. С помощью него, вы получите эллипс.

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

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

В финале должно получится что то вроде этого.

Создания растения в пиксель арт'е

Прежде всего, сделать цилиндр для горшка растения. Он будет являться основой нашего объекта.

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

Затем мы рисуем само растение, чтобы правильно был смоделирован объект.

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

То что получаем в завершении(изображении имеет исходный размер 

Уроки от PixelNacsImpact

Предлагаю ознакомится вам с содержанием этих уроков:

1)Изометрия в пиксельной графике и пирамида в изометрическом пиксель арт'е

2)Цилиндр в пиксель арт, а также как нарисовать растением в пиксель арт.

3)Учимся по шагам создавать домик впиксель арт

Изометрия в пиксельной графике

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

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

На заметку: угол наклона линии в точности соответствует 26,565 °. Также это полезно знать, чтобы вы использовали API из рисунков для Flash MX для примера.

"Идеальные пиксельные линии", за этот пример (спасибо Pixel Freak) Эти линии наиболее часто используются в изометрической пиксельной графике. С ними, вы сможете сделать почти всё (треугольники, прямоугольники, квадраты и т.д.)

Реализация пирамиды

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

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

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

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

Раскрасьте свою пирамиду, также как показано на рисунке и в результате могут, получится такие пирамидки.