Как включить изометрическую сетку в фотошопе
В этом уроке я покажу вам, как нарисовать изометрическую комнату в стиле пиксель-арт.
Если вы ищете вдохновение, то предлагаю посетить сайт GraphicRiver, где вы сможете найти множество работ в изометрической проекции .
Вступление
Перед началом работы, скачайте архив и установите узор в Photoshop. Для этого переходим Edit – Presets – Preset Manager (Редактирование – Наборы – Управление наборами). Устанавливаем Preset Type (Тип набора) на Patterns (Узоры).
После этого жмем на кнопку Load (Загрузить), находим на компьютере нужный узор и загружаем его в Photoshop. Узор установлен, и мы можем начинать работу. Также вы можете просто перетащить узор мышкой в окно Preset Manager (Управление наборами).
1. Рисуем основу комнаты
Шаг 1
Нажатием клавиши D сбрасываем цвет на стандартные (черный и белый). Обратите внимание, что Anti-alias (Сглаживание) у всех инструментов, которые мы будем использовать в уроке, должно быть отключено!
Открываем Photoshop (я использую Photoshop CS6), переходим File – New (Файл – Новый) и создаем новый файл размером 412 х 395 пикселей (с белым фоном).
Шаг 2
Переходим Layer – New – Group (Слой – Новый – Группа), чтобы создать новую группу, которую мы называем «Комната». Затем в этой группе добавляем новый слой Layer – New – Layer (Слой – Новый – Слой).
Шаг 3
Шаг 4
Шаг 5
В этом шаге мы добавим дополнительные линии, чтобы показать толщину и объем стен. Удаляем все лишние пиксели и переименовываем слой на «Комната».
Шаг 6
- BlendMode (Режим смешивания): Overlay (Перекрытие)
- Opacity (Непрозрачность): 100%
- Pattern (Узор): находим и выбираем узор с текстурой пола
- Scale (Масштаб): 100%
Шаг 7
Применяем Pattern Overlay (Наложение узора) со следующими параметрами:
- BlendMode (Режим смешивания): Overlay (Перекрытие)
- Opacity (Непрозрачность): 100%
- Pattern (Узор): находим и выбираем узор с обоями
- Scale (Масштаб): 100%
Шаг 8
Возвращаемся на слой «Комната» и заполняем все пустые пространства цветом.
Шаг 9
Шаг 10
2. Рисуем диван
Шаг 1
Сбрасываем цвета на стандартные (клавиша D).
Переходим Layer – New – Group (Слой – Новый – Группа), чтобы создать новую группу. Называем ее «Диван». Далее в этой группе создаем новый слой Layer – New – Layer (Слой – Новый – Слой).
Шаг 2
Шаг 3
Шаг 4
Шаг 5
Шаг 6
Дублируем правый подлокотник и перемещаем его на 112 пикселей влево (и выше на 56 пикселей).
Шаг 7
Используя ту же технику, цвета и инструменты, рисуем другие детали дивана (каждая деталь должна находиться на отдельном слое).
Шаг 8
Собираем все части вместе и получаем готовый диван. Скрываем группу.
3. Рисуем ковер
Шаг 1
Перед началом сбрасываем цвета на стандартные (клавиша D).
Переходим Layer – New – Group (Слой – Новый – Группа), чтобы создать новую группу. Называем ее «Ковер». Затем в этой группе создаем новый слой Layer – New – Layer (Слой – Новый – Слой).
Шаг 2
Рисуем две перпендикулярные линии: 146 х 1 пиксель и 138 х 1 пиксель (крайние пиксели обеих линий должны пересекаться).
Шаг 3
Дублируем (Ctrl+J) этот слой и перемещаем его на 10 пикселей выше. Повторяем действие, чтобы в результате получить три L-образные линии. Объединяем их вместе (Ctrl+E) и удаляем лишние пиксели (на скриншоте ниже они отмечены розовым цветом).
Шаг 4
Теперь давайте добавим верхний контур ковра. Переходим Layer – Duplicate Layer (Слой – Дублировать слой), чтобы дублировать слой, затем Image – Image Rotation - 180° (Изображение – Вращение изображения - 180°), чтобы повернуть его. Размещаем копию над оригиналом и объединяем обе половинки ковра вместе (Ctrl+E).
Шаг 5
4. Рисуем стол
Шаг 1
Перед началом сбрасываем цвета на стандартные (клавиша D).
Переходим Layer – New – Group (Слой – Новый – Группа), чтобы создать новую группу. Называем ее «Стол». Затем в этой группе создаем новый слой Layer – New – Layer (Слой – Новый – Слой).
Шаг 2
Рисуем линию размером 62 х 1 пиксель (каждые два пикселя смещаемся на один пиксель вниз). Это будет боковая сторона стола.
Шаг 3
Рисуем короткую сторону стола.
Шаг 4
Шаг 5
Шаг 6
Шаг 7
Шаг 8
Шаг 9
Трижды дублируем слой с ножкой и размещаем копии по углам стола. Объединяем все слои в группе «Стол» вместе (Ctrl+E). Скрываем группу.
5. Рисуем телевизор
Шаг 1
Перед началом сбрасываем цвета на стандартные (клавиша D).
Шаг 2
Заливаем фигуру новыми цветами:
Шаг 3
Шаг 4
Поздравляю, мы закончили!
Включаем видимость всех групп и слоев. Затем переходим File – Place (Файл - Поместить) и вставляем дополнительные элементы (картины, цветочные горшки). Сортируем все слои и группы так, чтобы они были четко структурированы. Размещаем все элементы композиции так, как вам хочется. Моя работа - это всего лишь один из вариантов и вам необязательно придерживаться его.
Ниже вы можете увидеть финальный вариант иллюстрации. Надеюсь, вам понравился этот урок. Не забудьте поделиться своими результатами в комментариях!
Если вы хотите рисовать окружение , то вам не обойтись без этих двух сеток. В этой статье расскажу как их построить.
Изометрическая сетка
Изометрия- это перспектива, в которой не учитывается точка схода.
Изометрические сетки бывают симметричными и не симметричными. У изометрической сетки нет точек схода, все линии параллельны.
Берем инструмент кисть нужной толщины.
Проводим на листе горизонтальную линию. Для этого просто нужно провести её, одновременно зажав клавишу Shift
Выделяем холст и далее копировать-вставить-сдвинуть немного вверху. Т.е. Сtrl C+Ctrl V сдвинуть Ctrl V сдвинуть Ctrl V сдвинуть. Таким образом у вас появится множество слоёв, на которых есть одна ваша линия. А на холсте множество беспорядочно расположенных линий.
Далее выделяем все слои с линиями. С включенным инструментом "перемещение" и выбираем сверху пункт" Распределение центров по вертикали". Таким образом все линии станут равноудалены друг от друга.
Выделяем все слои, клик правой клавишей мыши и выбираем пункт "объединить слои".
Выделяем получившийся слой, копируем, вставляем, выделяем при помощи сочетания клавиш Ctrl T, а затем переворачиваем с зажатым shift. Таким образом получаем клетку.
Объединяем слои, Ctrl T и поворот с зажатым shift на 90 градусов.
Затем возьмем и сплющим по вертикале на столько, насколько это нам требуется. Чем больше сетка развернута вверх, тем меньше объекты загораживают друг друга, но тем меньшее количество поля мы видим на экране единовременно. Если мы сетку сильно сплющиваем мы в экране единовременно можем видеть практически все поле, но объекты на нем начнут немножко загораживать друг друга. А если быть точным, то чем сильнее сплющим, тем больше они станут друг друга загораживать.
Данная сетка будет считаться симметричной. Есть еще ситуация с нераным углом, когда параллельные линии в одну сторону сплющиваются под одним углом, а те что идут в противоположную под другим. Но это случается очень редко и честно говоря, сама я не встречала такой ситуации. Потому информация чисто для справки.
Перспективная сетка
В отличии от изометрической в перспективной сетке множество линий сходятся в точке схода и не являются параллельными.
Выбираем инструмент многоугольник.
Далее заходим в параметр шестеренка, ставим галочку на против пункта "звезда" и плотность 99%. Справа выставляем количество строк-100.
После всех этих махинаций вы сможете создавать фигуру, которая выглядит так:
What You'll Be Creating
В этом Коротком Уроке, мы покажем вам, как можно создать удобную для работы изометрическую сетку, всего за несколько простых шагов. Вы узнаете как использовать Инструмент Прямоугольная Сетка с техникой SSR, и меньше чем через две минуты, вы будете готовы к тому, чтобы создать вашу изометрическую работу.
Шаг 1
Откройте новый документ. Размеры зависят от того, что вы собираетесь рисовать с помощью нашей сетки, и тоже с цветовой моделью. Теперь мы начнем, и выберем инструмент Прямоугольная Сетка (Rectangular Grid Tool).
Шаг 2
Установите параметры для Прямоугольной Сетки. Нажмите Enter и установите Количество для Горизонтальных и Вертикальных разделителей по 30. Это величина зависит от пропорций вашей работы, так что выберите значения на ваше усмотрение.
Шаг 3
Теперь у вас есть два варианта. Вы можете указать величины для Ширины и Высоты на предыдущем шаге (что я делать не рекомендую). В это случае вы должны установить равные значения для Ширины и Высоты, что бы получить квадратную сетку. Или вы можете проигнорировать эти значения, и нарисовать мышкой, удерживая нажатым Shift, один большой квадрат, гораздо больший, чем ваша рабочая зона (позже вы увидите почему).
То, что мы собираемся делать дальше называется SSR - метод (Scale-Shift-Rotate - Масштабируй-Сдвигай-Поворачивай). Это метод который позволяет создавать 3D изометрическую графику из 2D. Для нашей сетки мы будем использовать случай верхней плоскости из этой техники .
Шаг 4 - Масштабируй
Выберите сетку и зайдите в Объект > Трансформировать > Масштабирование (Object > Transform > Scale), выберите опцию Непропорционально и установите по Вертикали - 88,602%.
Исправление: На рисунке стоит число 86,062, но правильное значение 86.602
Шаг 5 - Сдвигайте
Сетка должна быть по прежнему выделена. Зайдите в Объект > Трансформировать > Наклон (Object > Transform > Shear) и установите значение 30 градусов.
Шаг 6 - Поворачивайте
И наконец мы должны повернуть нашу сетку. Объект > Трансформировать > Поворот (Object > Transform > Rotate) и установите Угол - 30 градусов.
Шаг 7
Теперь мы сделали нужные линии, и теперь все что нам нужно это сделать из них Направляющие (Guides). Убедитесь, что сетка выделена и зайдите в меню Просмотр > Направляющие > Создать Направляющие (Control + 5) (View > Guides > Make Guides ).
Подводим Итоги
Теперь у вас есть площадка для создания идей, и это заняло только две или три минуты. Потратив немного времени на использование этой техники вы можете создать отличные изометрические иллюстрации и при этом вы знаете, что используете правильную перспективу. Развлекайтесь!
Создайте новый документ в Фотошопе (Ctrl + N). Откройте PSD файл с изометрией и оттуда перенесите в созданный документ изометрическую сетку.
Шаг 2
Используя сетку, нарисуйте прямоугольник любого цвета.
Шаг 3
Создайте копию прямоугольника (Ctrl + J) и поднимите её немного, измените цвет, чтобы различать два слоя.
Шаг 4
Слой сетки можно выключить, он больше не нужен.
2. Почва
Шаг 1
Инструментом Pen Tool (P) нарисуйте боковую сторону.
Примените к ней стиль Gradient Overlay:
Шаг 2
Уменьшите заливку до 0%.
Шаг 3
Повторите процесс для правой стороны.
Шаг 4
Обрисуйте всю фигуру и примените стиль градиента. После этого уменьшите заливку до 0%.
Шаг 5
Из архива с файлами урока вставьте в наш документ изображение почвы.
Шаг 6
Выделите левую боковую сторону (удерживая CTrl, кликните на миниатюре слоя). К слою почвы добавьте маску.
Шаг 7
Наложите ту же текстуру на правую сторону.
3. Холм
Шаг 1
Вставьте фотографию ландшафта в наш документ и уменьшите непрозрачность, чтобы было видно платформу.
Шаг 2
К слою с ландшафтом добавьте маску и чёрным цветом скройте всё лишнее.
Шаг 3
Вернёмся к почве. Нужно сделать её темнее. Выберите мягкую кисть с малой непрозрачностью и чёрным цветом нарисуйте тень в углу.
Шаг 4
Продолжаем затемнять почву.
Шаг 5
Вставьте другую фотографию с землёй и наложите её на боковые стороны. Установите режим наложения Overlay. Добавьте маску и уделите время созданию деталей на боковых сторонах.
Шаг 6
Вставьте другую фотографию ландшафта. Расположите её под предыдущим слоем ландшафта. Добавьте маску и скройте лишнюю часть.
Шаг 7
Создайте новый слой и нарисуйте тень на новом ландшафте.
4. Море
Шаг 1
Вставьте фотографию моря и расположите её под всеми элементами.
Шаг 2
Выделите форму всей платформы и добавьте маску к слою с морем.
Шаг 3
Мягкой кистью поработайте над краями и скройте оставшиеся лишние детали.
Шаг 4
Нужно добавить больше волн. Для этого создайте копию фотографии моря и сдвиньте её немного. Затем поработайте с маской.
Шаг 5
Выделите слой океана (удерживая Ctrl, кликните на миниатюре слоя). После этого создайте корректирующий слой Photo Filter: Cooling Filter (80).
5. Детали
Шаг 1
Добавим больше контрастности. Выделите первый слой ландшафта.
Создайте новый слой и перейдите в меню Edit ? Stroke.
Шаг 2
К чёрной обводке примените фильтр Gaussian Blur (Filter ? Blur ? Gaussian Blur). Уменьшите непрозрачность слоя и сотрите тень с угла ластиком.
Шаг 3
Повторите процесс и добавьте ещё одну тень на холм на отдельном слое.
Шаг 4
Давайте добавим немного реалистичности и удлиним дорогу. Перейдите на слой с дорогой и на маске белым цветом верните небольшой участок. Под дорогой нужно нарисовать тень на отдельном слое.
Шаг 5
Создайте новый слой для дороги. Инструментом Pencil Tool размером 1 пиксель нарисуйте неровности на дороге чёрным цветом. Создайте копию слоя и инвертируйте цвет линий (Ctrl + I). Сдвиньте копию на 1 пиксель и уменьшите непрозрачность.
Шаг 6
Улучшите свет и тени на ландшафте при помощи мягкой кисти с небольшой непрозрачностью.
Шаг 7
Выделите машину с фотографии ландшафта и скопируйте её в наш документ. Расположите её на дороге и при помощи маски скройте всё лишнее со слоя.
6. Фон
Шаг 1
Для иконки мы создадим простой градиентный фон. Создайте новый слой под платформой и залейте фон инструментом Gradient Tool (G).
Шаг 2
Выделите базовый слой и залейте его чёрным цветом. Примените фильтр Gaussian Blur (Filter ? Blur ? Gaussian Blur), чтобы размазать края. Повторите размытие ещё несколько раз, используя разный радиус.
Шаг 3
Тень можно нарисовать и обычной кистью с небольшой непрозрачностью.
Шаг 4
Создайте для серого фона корректирующий слой Photo Filter, чтобы сделать его не таким мрачным.
Конечный результат:
В случае копирования урока указывайте автора и ставьте активную гиперссылку на наш сайт. Более подробную информацию вы можете получить в разделе «Правовая информация».
В этом уроке вы узнаете, как создать яркий изометрический эффект.
Сложность урока: Средний
В этом уроке мы попытаемся повторить яркий изометрический эффект, который можно увидеть в клипе Stromae на песню “Tous Les Memes” на 3:22 минуте.
Чтобы картинки выглядели как часть кубов, они должны иметь такое же перспективное искажение. Достаточно тяжело найти подходящие под данный запрос изображения. Тем не менее, рекомендую попробовать создать данный эффект.
Примечание: Автор использовал платные изображения.
1. Подготовка документа
Так как наша работа будет основана на геометрических фигурах, размер документа очень важен для построения правильной сетки.
Шаг 1
Открываем Photoshop и переходим File – New (Файл – Новый). Устанавливаем Width (Ширина) на 1232 пикселя, а Height (Высота) – на 540 пикселей.
Шаг 2
Переходим View – New Guide Layout (Вид – Новый макет направляющей). Активируем Columns (Столбцы) и устанавливаем Number (Количество) на 16, а Width (Ширина) – на 77 пикселей. Затем активируем Rows (Строки) и устанавливаем Number (Количество) на 12, а Width (Ширина) – на 45 пикселей. Это создаст сетку из направляющих линий, по которой мы будем выравнивать элементы композиции.
2. Создаем заготовку из 3D-кубов
Неотъемлемой частью данной работы является 3D-эффект. Вся картинка будет заполнена трехмерными блоками. Но для этого мы должны подготовить специальную текстуру.
Шаг 1
Шаг 2
Шаг 3
Шаг 4
На панели слоев с зажатой клавишей Shift выделяем все три слоя с фигурами. Затем переходим Layer – Smart Objects – Convert to Smart Object (Слой – Смарт-объекты – Преобразовать в смарт-объект). Это объединит фигуры в один слой, при этом каждый четырехугольник будет отдельным объектом в рамках данного смарт-объекта. Называем смарт-объект Куб.
Шаг 5
Берем Move Tool (V) (Перемещение), зажимаем клавишу Alt и тянем за куб, чтобы дублировать его. Создаем три копии и размещаем их в форме креста, как показано ниже. Убедитесь, что фигуры выровнены строго по сетке.
Шаг 6
Используем Rectangular Marquee Tool (M) (Прямоугольное выделение), чтобы создать выделение центральной части крестообразной фигуры из кубов. Выделение должно быть шириной 2 ячейки и высотой 6 ячеек сетки. Размещаем его так же, как показано ниже, иначе готовая текстура будет отображаться неверно. Затем переходим Edit – Define Pattern (Редактирование – Определить узор) и называем новую текстуру Кубическая 3D-текстура.
Шаг 7
Снимаем выделение Select – Deselect (Выделение – Снять выделение) (Ctrl+D). Затем создаем новый слой над слоями с кубом и называем его Кубическая текстура. Далее переходим Edit – Fill (Редактирование – Заливка) и устанавливаем Contents (Содержимое) на Pattern (Узор). Выбираем нашу кубическую текстуру, созданную в прошлом шаге.
Шаг 8
Скрываем слои с кубами, которые мы использовали для создания текстуры. Затем устанавливаем режим смешивания слоя Кубическая текстура на Multiply (Умножение) и уменьшаем непрозрачность до 89%.
3. Работаем с фоном
На видео камера отъезжает назад, показывая зрителю городской пейзаж, который вставлен в трехмерную сетку из кубов. Такая подача графики одновременно и смущает, и восхищает.
Шаг 1
Открываем одну из картинок с планом квартиры. Берем Polygonal Lasso Tool (L) (Прямоугольное лассо) и создаем выделение самой ближней к зрителю комнаты. Затем переходим Layer – New – Layer via Copy (Слой – Новый – Скопировать на новый слой) (Ctrl+J), чтобы скопировать выделенную область на новый слой.
Шаг 2
Возвращаемся на наш рабочий документ, находим смарт-объект с кубом и перетаскиваем его на файл с планом квартиры. Затем используем Edit – Transform – Scale (Редактирование – Трансформация – Масштаб), чтобы подогнать размер куба под размер комнаты. Затем уменьшаем его непрозрачность до 75%. Обратите внимание, что перспективное искажение комнаты отличается от искажения куба.
Шаг 3
Скрываем фоновый слой и активируем слой с копией комнаты. Переходим Edit – Perspective Warp (Редактирование – Деформация перспективы). Кликаем по рабочей области, чтобы создать сетку для редактирования. Перемещаем углы сетки так, чтобы они совпадали с углами стены в комнате.
Шаг 4
Создаем вторую сетку и соединяем ее с предыдущей. Перемещаем узловые точки так, чтобы они совпадали со второй стеной.
Шаг 5
Закончив с двумя стенами, жмем клавишу Enter, чтобы переключиться на режим Warp (Деформация). Используем узловые точки, чтобы изменить перспективное искажение комнаты. Наша задача – подогнать ее под искажение куба так, чтобы слишком деформированные и кривые элементы комнаты остались за пределами куба.
Шаг 6
После применения Perspective Warp (Деформация перспективы), зажимаем клавишу Ctrl и кликаем по миниатюре слоя с кубом, чтобы загрузить его выделение. Убедившись, что слой с планом комнаты активен, переходим Edit – Copy (Редактирование – Копировать). Переключаемся на основной рабочий документ и переходим Edit – Paste (Редактирование – Вставить). Называем новый слой Комната 1 и размещаем под кубической текстурой.
Шаг 7
Корректируем размер комнаты с помощью Edit – Free Transform (Редактирование – Свободная трансформация) (Ctrl+T), чтобы он четко вписывался в куб. Обратите внимание, что пол комнаты должен совмещаться с верхней темной гранью куба. Используем направляющие, чтобы идеально разместить картинку.
Шаг 8
Создаем несколько копий комнаты и хаотично распределяем их по текстуре. Убедитесь, что все копии размещены четко по направляющим и нигде нет перекрывающих друг друга пикселей.
Шаг 9
На панели слоев выделяем все слои с комнатой и группируем их Layer – Group Layers (Слой – Сгруппировать слои) (Ctrl+G).
Шаг 10
Используя описанную выше технику, создаем несколько дополнительных комнат и заполняем ими остальные места текстуры. На примере ниже, я подготовил четыре разные комнаты, которые я дублировал и распределил по всей композиции.
4. Добавляем эффект с сердцем
Закончив основную работу с текстурой, мы можем перейти к созданию дополнительного эффекта в виде геометрического сердца.
Шаг 1
Убедитесь, что слой Кубическая текстура активен, затем переходим Layer – Layer Style – Blending Options (Слой – Стиль слоя – Параметры наложения). В нижней части открывшегося диалогового окна есть панель Underlying Layer (Подлежащий слой). Зажимаем клавишу Alt и тянем за белый ползунок, чтобы разделить его, затем первую часть устанавливаем на 198, а вторую оставляем на 255. Благодаря этому, яркие детали на картинках с комнатами будут видны через кубическую текстуру.
Шаг 2
Добавляем корректирующий слой Hue/Saturation (Цветовой тон/Насыщенность) и устанавливаем Hue (Цветовой тон) на -10, Saturation (Насыщенность) на +65 и Lightness (Яркость) на -3. Это добавит зеленую тонировку на картинке.
Шаг 3
Создаем новый слой и называем его Сердце. Затем используем инструмент Polygonal Lasso Tool (L) (Прямоугольное лассо), чтобы создать выделение, используя точки пересечения направляющих. Начинаем с правого края и двигаемся по часовой стрелке:
- Перемещаемся на самую крайнюю правую точку и начинаем движение отсюда.
- Опускаемся на четыре ячейки сетки вниз и ставим вторую точку.
- Опускаемся на четыре ячейки вниз (до самого конца рабочего полотна), затем четыре ячейки влево и ставим третью точку.
- Вверх на четыре ячейки и влево на четыре ячейки.
- Вверх на четыре ячейки.
- Две ячейки вверх и две ячейки вправо.
- Две ячейки вниз и две ячейки вправо.
- Две ячейки вверх и две ячейки вправо.
- Две ячейки вниз, затем две ячейки вправо и соединяемся с первой точкой.
Далее переходим Edit – Fill (Редактирование – Заливка) и заливаем выделение черным цветом.
Шаг 4
Снимаем выделение Select – Deselect (Выделение – Снять выделение). Затем берем инструмент Move Tool (V) (Перемещение), зажимаем клавишу Alt и тянем за сердце, чтобы дублировать его. Размещаем копию так, чтобы нижний конец находился на расстоянии ровно четырех ячеек от левого верхнего угла оригинальной фигуры.
Шаг 5
Дублируем копию сердца и перемещаем ее в самый низ так, чтобы вершины фигуры выступали на две ячейки.
Шаг 6
Скрываем все слои с сердцем, зажимаем клавишу Ctrl и кликаем по их миниатюрам на панели слоев, чтобы загрузить выделения всех трех фигур. Затем применяем корректирующий слой Hue/Saturation (Цветовой тон/Насыщенность). Активируем опцию Colorize (Тонировка), устанавливаем Hue (Цветовой тон) на 327, Saturation (Насыщенность) на 68 и Lightness (Яркость) на 17. Таким образом, мы тонировали сердца в розовый цвет.
Теперь можете полюбоваться работой с изометрическим эффектом, вдохновленную видеоклипом “Tous Les Memes”.
Не смотря на то, что перспектива исходников разная и для создания эффекта нужны десятки кубических фигур, широкий набор инструментов Photoshop позволит легко создать даже самый необычный дизайн.
Читайте также: