Рисуем в Фотошоп улицу в стиле пиксель арт

Финальный результат:

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

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

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

1. Изометрический пиксель арт в Фотошоп  
2. Рисуем дом в стиле пиксель арт
3. Машина в стиле пиксель арт

Если вы готовы, можем начинать!

1. Собираем исходные материалы

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

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

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

Вот так выглядит наш набор элементов:

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

2. Меняем цвета

К счастью, для машин у нас уже есть отличное разнообразие цветов, полученное в последнем шаге соответствующего урока:

Чтобы разнообразить дома, мы будем работать над тремя цветовыми зонами: стены, крыша и двери. Мы оставим уголки и окна домов с теми цветами, которые у них уже есть.

Шаг 1

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

У нас есть один основной цвет примерно с четырьмя оттенками, поэтому давайте увеличим масштаб и выберем их. Для этого используется инструмент Волшебная палочка (Magic Wand Tool). При этом нужно снять галочку Смежные пиксели (Contiguous tool). Я предпочитаю устанавливать параметр Допуск (Tolerance) на 0%, это позволяет выделить все необходимые области.

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

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

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

Шаг 2

Теперь при помощи инструмента Прямоугольная область (Rectangular Marquee Tool) выберите одну из крыш, а затем измените настройки оттенка, насыщенности и/или яркости на свой вкус. Для этого перейдите в меню Изображение > Коррекция > Цветовой тон/насыщенность... (Image > Adjustments > Hue/Saturation…). Это намного проще, чем заполнять все новым цветом, который может выглядеть не так хорошо, как изначально задумывалось. Если цвета, получившиеся в итоге выглядят хорошо, но текстуры и контраст немного теряются, попробуйте отрегулировать яркость и контраст, перейдя в меню Изображение > Коррекция > Яркость/Контрастность... (Image > Adjustments > Brightness/Contrast…) или используйте Палитру цветов (Color Mixer) и инструмент Заливка (Paint Bucket), чтобы вручную улучшить каждый цвет.

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

Шаг 3

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

Шаг 4

Теперь двери.

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

3. Планируем расположение

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

Давайте вернемся назад и пока сфокусируемся на одном здании, чтобы создать разметку поверхности.

Шаг 1

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

Они должны быть достаточно длинными, чтобы могла уместиться машина.

Шаг 2

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

Шаг 3

Теперь давайте добавим еще немного линий, чтобы ограничить наше имущество.

Нарисуем еще одну линию для заднего двора.

Теперь мы полностью определили границы для двора.

Шаг 4

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

Шаг 5

Теперь нам не хватает небольшой дорожки, ведущей к дверям дома. Вы можете придать ей любую форму, но не забудьте ее добавить; парадная дверь не должна выходить прямо на газон.

4. Разделяй и умножай

Пора добавить что-нибудь для разделения земли между соседями: мы нарисуем забор вокруг заднего двора.

Шаг 1

Нам будет необходимо сделать это на двух разных слоях; один из них будет над слоем с домом, другой - под ним.

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

Шаг 2

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

Шаг 3

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

Шаг 4

Нам нужно добавить блики к соответствующим зонам: верхним граням и самому переднему углу.

Шаг 5

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

Шаг 6

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

Шаг 7

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

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

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

Шаг 8

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

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

Шаг 9

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

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

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

5. Заканчиваем поверхность

Теперь нам необходимо придать всем элементам вид одного единого окружения.

Шаг 1

Начнем с удаления всех ненужных разделяющих линий (то есть линии на стыке поверхностей).

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

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

Шаг 2

Чтобы смягчить линии между травой и бетоном нам лучше закруглить эти углы:

Шаг 3

Мы можем придать траве тонкую подсветку, чтобы выглядело так, как будто она растет немного выше уровня бетона. Это можно легко сделать, если выбрать темную обводку травы при помощи инструмента Волшебная палочка (Magic Wand Tool), затем передвинуть выделение вверх на один пиксель и в итоге заполнить его светлым зеленым цветом (галочка Смежные пиксели (Contiguous tool) инструмента Заливка (Paint Bucket tool) должна быть снята).

Шаг 4

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

Нарисуйте несколько чередующихся темных (или светлых) пикселей. Если вы можете захотеть увидеть, как они смотрятся в готовом виде перед определением узора, посмотрите на скриншот ниде. Рисунок, который я использую, прост:

Чтобы создать его, необходимо выделить часть узора как показано выше (одна грань начинается там, где заканчивается противоположная), а затем перейти в меню Редактирование > Определить узор... (Edit > Define Pattern…)

Затем, чтобы применить его, используйте инструмент Заливка (Paint Bucket tool) и выберите Регулярный (Pattern) вместо Основной цвет (Foreground). Выберите новосозданный узор среди остальных и заполните им зону травы (галочка Смежные пиксели (Contiguous tool) должна быть снята).

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

Шаг 5

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

Шаг 6

Заполните его тем же серым цветом, который использовался для подъездной дорожки, и скруглите углы.

Шаг 7

Добавим немного объема обочине. Вы можете сместить всю поверхность на несколько пикселей вниз, а затем, применив alt-смещение, вернуть ее обратно и закрасить пиксели между контурами. Надеюсь, теперь вы знаете, что нужно делать: подсветка на самых передних углах, затемнение на сторонах.

Шаг 8

Машинам потребуется помощь, чтобы добраться до подъездных дорожек. Нам необходимо сделать для них уклоны.

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

Шаг 9

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

Шаг 10

Вот так выглядит финальный уклон. Большинство линий были смягчены в тоне, так как вся поверхность довольно плоская, поэтому она должна немного выделяться. Я добавил сглаживание, чтобы сократить неровность и контрасты, но идеальное сглаживание не должно добавлять слишком много цветов; не используйте инструмент Градиент (Gradient Tool).

Шаг 11

Скопируйте и вставьте уклон для всех домов.

Шаг 12

Пора добавить дороги: сначала заполним фон асфальтовым цветом. Лучше всего сделать это на новом фоновом слое.

Шаг 13

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

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

Готово!

Квартал закончен. Если вы хотите размножить кварталы, можете выбрать все, убрать видимость слоя с асфальтом и копировать все (Ctrl + Shift + C), а затем вставить, выровнять и корректно упорядочить слои, после чего повторять этот процесс до получения необходимого количества улиц.

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

Надеюсь, вам понравилось, удачи!

Автор: René Alejandro Hernández

Переводчик: Шаповал Алексей

Источник: design.tutsplus.com