Изометрическая сетка для рисования. Изометрия в Inkscape. А. Изометрическая сетка

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

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

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

• Для того чтобы создать линейную направляющую, поместите курсор над вертикальной или горизонтальной линейкой, зажмите и перетащите в нужное место. Если вы хотите ограничить линейные направляющие внутри монтажной области, а не распространять их на всю рабочую область, то вам нужно сначала выбрать инструмент Artboard и затем создать направляющие.
• Если вы хотите создать направляющую из векторного объекта, то нужно выделить этот объект и выбрать в меню View > Guides > Make Guides . Чтобы трансформировать направляющую обратно в обычный векторный объект, выберите в меню View > Guides > Release Guides .

Чтобы скрыть или показать направляющие, выберите в меню View > Hide Guides или View > Show Guides .

Также вы можете выбрать стиль направляющих – тип линий (сплошные или пунктирные) и цвет. Для этого перейдите в меню Edit > Preferences > Guides & Grid и измените соответствующую настройку.

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

В этом Коротком Уроке, мы покажем вам, как можно создать удобную для работы изометрическую сетку, всего за несколько простых шагов. Вы узнаете как использовать Инструмент Прямоугольная Сетка с техникой 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).

Подводим Итоги

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

What You"ll Be Creating

В этом уроке из нашей серии, посвящённой спец.эффектам в музыкальных клипах, мы попробуем воссоздать чарующий и красивый калейдоскопический 3D эффект, который можно увидеть в клипе Stromae на песню “Tous Les Memes” на 3:22 минуте.

Исходные материалы

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

1. Подготавливаем Рабочий Документ

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

Шаг 1

Откройте программу Photoshop , а затем идём Файл- Новый (File > New). Установите следующие размеры рабочего документа: Ширина (Width) 1232 px и Высота (Height) 540 px .

Шаг 2

Далее, идём Просмотр - Новый макет направляющей (View > New Guide Layout). Поставьте галочку в окошке Столбцы (Columns), укажите Количество (Number) 16 , а также Ширину (Width) 77 px . Поставьте галочку в окошке Строки (Rows), укажите Количество (Number) 12 , а также Высоту (Height) 45 px . Таким образом, мы создали сетку из направляющих линий, по которой мы будем выравнивать элементы композиции.

2. Создаём узор из 3D Куба

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

Шаг 1

Убедитесь, чтобы в меню Просмотр (View) была активна опция Привязка (Snap), т.к. это облегчит работу с направляющими линиями. Далее, выберите инструмент Перо (Pen Tool (P), в панели управления данного инструмента, выберите режим Фигура (Shape), отключите режим Обводка (Stroke), а также установите цвет Заливки (Fill) фигуры на тёмно-зелёный оттенок (#1f2c21). Теперь нарисуйте фигуру ромба, используя направляющие линии, как показано на скриншоте ниже.

Шаг 2

С помощью инструмента Перо (Pen Tool (P), нарисуйте параллелограмм, который будет прилегать к нижней правой грани ромба. Использование направляющих линий обеспечит точное выравнивание всех точек. Установите цвет Заливки (Fill) для данной фигуры на зелёный цвет средних тонов (#3f6054).

Шаг 3

С помощью инструмента Перо (Pen Tool (P), нарисуйте ещё одну такую же фигуру, но только с левой стороны куба. Установите цвет Заливки (Fill) для данной фигуры на зелёно-голубой оттенок (#1e605e).

Шаг 4

Выделите все три слоя с нарисованными фигурами, для этого удерживая клавишу (Shift ), щёлкните по очереди по каждому слою в палитре слоёв. Далее, идём Слой- Смарт-Объекты - Преобразовать в смарт-объект (Layer > Smart Objects > Convert to Smart Object). Это объединит все три раскрашенные фигуры в один слой без объединения их в одну фигуру. Назовите слой со смарт-объектом Куб (Cube).

Шаг 5

Выберите инструмент Перемещение Alt ), щёлкните / потяните куб, чтобы создать дубликат слоя. Создайте три дубликата, расположив все фигуры, как показано на скриншоте ниже. Убедитесь, что фигуры привязаны к направляющим линиям, таким образом, все фигуры будут выровнены нужным образом.

Шаг 6

С помощью инструмента Прямоугольная область (Rectangular Marquee Tool (M), выделите область пересечения четырёх кубов. Убедитесь, чтобы выделение состояло из 2 ячеек сетки по ширине и 6 ячеек сетки по высоте, расположение должно быть точно, как на скриншоте ниже, в противном случае, у вас не получится точное повторение узора. Далее, идём Редактирование - Определить узор (Edit > Define Pattern). Назовите новый узор 3D Кубический узор (3D Cube Pattern).

Шаг 7

Отмените выделение, для этого идём Выделение - Отменить выделение (Select > Deselect (Ctrl+D). Далее, создайте новый слой поверх слоёв с кубами, назовите этот слой Кубический узор (Cube Pattern). Теперь идём Редактирование - Выполнить заливку (Edit > Fill) и в появившемся окне, установите Содержимое (Contents) на Узор (Pattern). В качестве Заказного узора (Custom Pattern), установите 3D Кубический узор (3D Cube Pattern), который мы создали в последнем шаге.

Шаг 8

Отключите видимость слоёв с кубами, которые мы использовали для создания узора. Далее, поменяйте режим наложения для слоя Кубический узор (Cube Pattern) на Умножение (Multiply), а также уменьшите Непрозрачность (Opacity) слоя до 89% .

3. Создаём Сцену Заднего Фона

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

Шаг 1

Откройте одно из исходных изображений с дизайном жилой квартиры. С помощью инструмента Прямолинейное лассо (Polygonal Lasso Tool (L), создайте выделение вокруг комнаты на переднем плане. Далее, идём Слой- Новый - Скопировать на новый слой (Layer > New > Layer Via Copy) (Ctrl+J), чтобы скопировать выделенную область на новый слой.

Шаг 2

Возвращаемся на наш основной документ, находим смарт-объект с кубом и перетаскиваем его на документ с дизайном квартиры. Далее, идём Редактирование - Трансформация - Масштабирование (Edit > Transform > Scale), чтобы увеличить масштаб куба примерно до размеров комнаты. Затем уменьшите Непрозрачность (Opacity) слоя до 75% . Обратите внимание, что перспектива комнаты не соответствует перспективе куба.

Шаг 3

Отключите видимость слоя с Задним фоном (background), а также убедитесь, чтобы слой с выделенным изображением комнаты был активным. Теперь идём Редактирование - Деформация Перспективы (Edit > Perspective Warp). Щёлкните по холсту, чтобы создать регулирующую сетку. Перемещаем угловые опорные точки, чтобы выровнять их с углами стены в комнате. Примечание переводчика: инструмент Деформация Перспективы (Perspective Warp) - это новый инструмент, который появился в версии программы Photoshop CC.

Шаг 4

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

Шаг 5

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

Шаг 6

После применения Деформации перспективы (Perspective Warp), удерживая клавишу (Ctrl ), щёлкните по миниатюре слоя с кубом, чтобы загрузить выделение вокруг фигуры куба. Убедитесь, чтобы слой с деформированной комнатой был активным, а затем идём Редактирование - Скопировать (Edit > Copy) (Ctrl+C). Переключаемся на наш рабочий документ, а затем идём Редактирование - Вклеить (Edit > Paste). Назовите вклеенный слой Комната 1 (Apartment 1). Расположите данный слой ниже слоя Кубический узор (Cube Pattern).

Шаг 7

Примените масштабирование к изображению комнаты 1, для этого идём Редактирование - Свободная трансформация (Edit > Free Transform (Ctrl+T), чтобы изображение комнаты вписывалось под размеры одного из кубов. Обратите внимание, что пол комнаты должен совмещаться с верхней темной стенкой куба. Используйте направляющие линии, чтобы обеспечить идеальное расположение.

Шаг 8

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

Шаг 9

Выделите слои с комнатами в палитре слоёв, чтобы сгруппировать их в одну группу, идём Слой- Сгруппировать слои (Layer > Group Layers (Ctrl+G ).

Шаг 10

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

4. Добавляем Эффект с Сердцем

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

Шаг 1

Убедитесь, чтобы слой Кубический узор (Cube Pattern) был активным, а затем идём Слой- Стиль слоя- Параметры наложения (Layer > Layer Style > Blending Options). В нижней части окна параметров наложения есть шкала с надписью Подлежащий слой (Underlying Layer). Удерживая клавишу (Alt ), потяните за белый бегунок, чтобы разделить его, а затем первую часть устанавливаем на 198 , а вторую оставляем на 255 . Это позволит увидеть яркие участки комнат через кубическую текстуру.

Шаг 2

Добавьте новый корректирующий слой Цветовой тон / Насыщенность (Hue/Saturation). Установите Цветовой тон (Hue) на -10 , Насыщенность (Saturation) на +65 , а значение Яркости (Lightness) на -3 . Таким образом, мы усилим зеленоватые тона дизайна.

Шаг 3

Создайте новый слой, назовите этот слой Фигура Сердца (Heart Shape). Далее, с помощью инструмента Прямолинейное лассо (Polygonal Lasso Tool (L), создайте выделение, используя направляющие линии, чтобы выделение было точным. Начните с дальнего правого края и далее движемся по часовой стрелке, щёлкая по следующим точкам:

1. Перемещаемся на самую крайнюю правую точку и двигаемся вниз
2. Смещаемся вниз на четыре ячейки от первой точки
3. Смещаемся вниз на четыре ячейки (до самого конца рабочего полотна), а затем четыре ячейки влево и ставим третью точку
4. Вверх на четыре ячейки и влево на четыре ячейки
5. Прямо вверх на четыре ячейки
6. Две ячейки вниз и две ячейки вправо
7. Две ячейки вверх и две ячейки вправо
8. Две ячейки вниз, а затем две ячейки вправо и соединяем с первой точкой

Шаг 4

Отмените активное выделение, идём Выделение - Отменить выделение (Select > Deselect). Далее, создайте дубликат слоя с фигурой сердца, для этого выберите инструмент Перемещение (Move Tool (V), а затем удерживая клавишу (Alt ), щёлкните / потяните оригинальную фигуру сердца. Расположите дубликат слоя с фигурой сердца таким образом, чтобы нижний конец находился на расстоянии ровно четырех ячеек от левого верхнего угла оригинальной фигуры.

Шаг 5

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

Шаг 6

Отключите видимость слоёв с сердцем, а затем удерживая клавишу "Ctrl ", щёлкните по каждой миниатюре слоя с сердцем, чтобы загрузить выделение всех трёх фигур. Далее, добавить корректирующий слой Цветовой тон / Насыщенность (Hue/Saturation). Поставьте галочку в окошке Тонирование (Colorize). Установите Цветовой тон (Hue) на 327, Насыщенность (Saturation) на +68, а значение Яркости (Lightness) на 17. Таким образом, мы придали сердцу розовый тон!

И мы завершили урок!

Наслаждайтесь красивым кубическим калейдоскопом, вдохновленный эффектом музыкального клипа Tous Les Memes.

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

Шаг 1

Создайте новый документ в Фотошопе (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

Улучшите свет и тени на ландшафте при помощи мягкой кисти с небольшой непрозрачностью.

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

В данной статье мы разберем способы создания объектов в изометрии с помощью программы Inkscape. А именно:

• Аксонометрическая сетка
• Трансформация объекта
• Создание параллелепипедов в 3D

Примечание: Если это ваше первое знакомство с программой, советую для начала ознакомиться со Справкой (Меню > Справка).

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

Способ 1: Аксонометрическая сетка

В Inkscape поддерживаются два вида сеток: прямоугольная и аксонометрическая (Файл > Свойства документа > Сетки). Использование аксонометрической сетки позволит вам создавать объекты в изометрии. Но чтобы облегчить себе рисование ещё больше, можно настроить сетку под свои нужды, а также включить прилипание (Вид > Прилипание). Настройка сетки включает в себя изменения параметров единицы, основной линии и интервала по оси Y. Для большего удобства, можно также задать свои цвета основным и обычным линиям сетки.

Способ 2: Трансформация объекта

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

Создав надпись, нам необходимо отправиться в меню Объект > Трансформировать > Масштаб, и уменьшить ширину примерно на 86,6 % (86,603 %, если быть точнее). Затем, в том же меню трансформации, следует изменить наклон по вертикали на 30 или −30 градусов (в зависимости от желаемого угла).

Способ 3: Создание параллелепипедов в 3D

С помощью инструмента «Рисовать параллелепипеды в 3D» (Shift+F4) можно создать различные трехмерные объекты, в том числе в перспективе. Но поскольку наша задача заключается в создании изометрической проекции, нам необходимо изменить направление точек схода всех трех углов от «конечных» до «бесконечных». А углы параллелепипеда установить на следующие значения: X:150, Y:90, Z:30.

Совет: Чтобы редактировать цвет и обводку отдельной грани, не потеряв свойства трехмерного объекта, можно воспользоваться инструментом «Редактирования узлов и рычагов» (F2). На изображении — верхняя грань полностью прозрачна.

На этом у меня все. Если вы нашли какие-то неточности в тексте, у вас возникли вопросы или вы можете предложить более быстрый способ создания изометрии в Inkscape, прошу в комментарии:)

>> Скачать исходник «Дом в изометрии» (.svg)

P.S. По умолчанию, язык интерфейса в Inkscape совпадает с языком системы (в данном случае русский). Стоит ли обозначать инструменты и пункты меню на английском или можно продолжать делать это на русском языке?

P.P.S. Совсем недавно я открыла группу «Уроки Inkscape» В контакте. Всех, кто заинтересован в изучении уроков и повышения навыков рисования в Inkscape прошу в сообщество.