Изометрическая проекция

Создание изометрических иллюстраций — с помощью геометрической техники

Изометрическая проекция
Sep 20, 2017 · 5 min read

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

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

Вот была разработана серия иллюстраций в изометрическом стиле для различных приложений uvdesk.

Изометрическая иллюстрация для приложения uvdesk

Как правило, иллюстраторы сначала рисуют изометрическую сетку и затем вручную рисуют объекты поверх сетки.

Традиционная изометрическая сетка

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

Перед началом

Статья предназначена для начинающих иллюстраторов / дизайнеров, которые имеют базовые знания Adobe Photoshop.

Геометрическая техника

Плоскость — двумерная поверхность, которая простирается до бесконечности.
Изометрические иллюстрации создаются с использованием 3D-геометрии, которые имеют 3 отличные геометрические плоские структуры.

  • XY-плоскость — Объект находится на послости XY. Размер объекта измеряется по направляющим X и Y, в то время как размер высоты, глубины или расстояния измеряется по направлению Z.

Плоскость XY в 3-мерном пространстве

  • YZ-плоскость—Объект находится в плоскости YZ. Размер объекта измеряется по направляющим Y и Z, в то время как размер высоты, глубины или расстояния измеряется по направлению X.

Плоскость YZ в 3-мерном пространстве

  • XZ-плоскость — Объект находится в плоскости XZ. Размер объекта измеряется по направляющим Xи Z, в то время как размер высоты, глубины или расстояния измеряется по направлению Y.

Плоскость XZ в 3-мерном пространстве

Шаги по созданию изометрического объекта в XY-плоскости

  • Откройте Photoshop и создайте новый документ
  • Нарисуйте квадрат, каждая со сторонами ≈400px, используя Rectangle Shape Tool(U)
  • Выберите нарисованный квадрат, используя инструмент Move Tool (V) и уменьшите его высоту до90%.
  • Выберите квадрат с помощью инструмента Move Tool (V) и задайте горизонтальный скос на -30 градусов
  • Теперь задайте угол поворота на +30 градусови в результате вы получите объект находящийся на плоскости XY в 3-мерном пространстве

Давайте скомпонуем все шаги посмотрим еще раз:

Теперь можно добавить высоту квадрату по оси Z путем дублирования этого же самого квадрата используя «Alt» + «Стрелка вниз» несколько раз (≈75+).

Вы можете использовать Clipping Masks чтобы добавить граням параллелепипеда.

Вуаля! Легко, правда? Теперь вы научились и можете создавать Изометрические Объекты в плоскости XY.

  • Создайте новый документ в Photoshop
  • Нарисуйте квадрат, каждая со сторонами ≈400px, используя Rectangle Shape Tool(U)
  • Выделите квадрат, используя инструмент Move Tool (V) и поверните его на -45 градусов
  • Теперь уменьшите высоту до 56%
  • Теперь снова поверните его на +60 градусов
  • Для создания глубины по оси Y продублируйте этот слой комбинациями «Alt» + «Стрелка Вверх» и «Alt» + «Стрелка Вправо» несколько раз (≈75+)

Посмотрим как это выглядит в компоновке

Используйте Clipping Masks, чтобы задать цвет граням

Отлично! Теперь вы можете делать изометрическую иллюстрацию в плоскости XZ

  • Создайте новый документ в Photoshop
  • Нарисуйте квадрат, каждая со сторонами ≈400px, используя Rectangle Shape Tool(U)
  • Выделите квадрат, используя инструмент Move Tool (V) и поверните его на +45 градусов
  • Теперь уменьшите высоту до 56%
  • Теперь снова поверните его на -60 градусов
  • Для создания глубины по оси X продублируйте этот слой комбинациями «Alt» + «Стрелка Вверх» и «Alt» + «Стрелка Влево» несколько раз (≈75+)

Посмотрим снова все шаги:

Как и в предыдущих примерах зададим цвета граням нашей фигуры и получаем:

Ура! Теперь вы профи в создании изометрических псевдо-3D иллюстраций

Вот вам несколько примеров использования иллюстрации в изометрическом стиле:

An App UI with Isometric Illustration for Mobikul eCommerce App BuilderA Concept Illustration for Webkul Contact SectionLead Page Design with Isometric Illustration for Cloudkul eCommerce Optimiser»,»author»:»BABAY»,»date_published»:»2017-09-20T08:34:44.311Z»,»lead_image_url»:»https://miro.medium.com/max/1200/1*QgXfdwrUSq2Y8eDR3jMzbg.png»,»dek»:null,»next_page_url»:null,»url»:»https://medium.com/babay-me/%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5-%D0%B8%D0%B7%D0%BE%D0%BC%D0%B5%D1%82%D1%80%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D1%85-%D0%B8%D0%BB%D0%BB%D1%8E%D1%81%D1%82%D1%80%D0%B0%D1%86%D0%B8%D0%B9-%D1%83%D0%BF%D1%80%D0%BE%D1%89%D0%B5%D0%BD%D0%B8%D0%B5-%D1%81-%D0%BF%D0%BE%D0%BC%D0%BE%D1%89%D1%8C%D1%8E-%D0%B3%D0%B5%D0%BE%D0%BC%D0%B5%D1%82%D1%80%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%BE%D0%B9-%D1%82%D0%B5%D1%85%D0%BD%D0%B8%D0%BA%D0%B8-fe266815a90c»,»domain»:»medium.com»,»excerpt»:»Ð£Ð·Ð½Ð°Ð¹Ñ‚е, как быстро создавать изометрическую графику Eye-Popping в соответствии с вашими требованиями к дизайну.»,»word_count»:530,»direction»:»ltr»,»total_pages»:1,»rendered_pages»:1}

Источник: https://medium.com/babay-me/%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5-%D0%B8%D0%B7%D0%BE%D0%BC%D0%B5%D1%82%D1%80%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D1%85-%D0%B8%D0%BB%D0%BB%D1%8E%D1%81%D1%82%D1%80%D0%B0%D1%86%D0%B8%D0%B9-%D1%83%D0%BF%D1%80%D0%BE%D1%89%D0%B5%D0%BD%D0%B8%D0%B5-%D1%81-%D0%BF%D0%BE%D0%BC%D0%BE%D1%89%D1%8C%D1%8E-%D0%B3%D0%B5%D0%BE%D0%BC%D0%B5%D1%82%D1%80%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%BE%D0%B9-%D1%82%D0%B5%D1%85%D0%BD%D0%B8%D0%BA%D0%B8-fe266815a90c

Аксонометрические проекции применяются в качестве вспомогательных к чертежам в тех случаях, когда требуется поясняющее наглядное изображение формы детали. В ГОСТ 2.317-69 стандартизованы прямоугольные и косоугольные аксонометрические проекции с различным расположением осей.

Изометрическая проекция

Положение аксонометрических осей приведено на рис. 1. Коэффициент искажения по осям x, y, z  равен 0,82.  Для упрощения изометрическую проекцию, как правило, выполняют без искажения, т.е. приняв коэффициент искажения равным 1.

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

Окружности, лежащие в плоскостях, параллельных плоскостям проекций, проецируются на аксонометрическую плоскость проекций в эллипсы (рис. 3).

1, 2, 3 – эллипсы, их большые оси расположены под углом 90° к осям y, z, x соответственно и равны (при коэффициенте искажения – 1) 1,22d, а малые оси – 0,71d,где d – диаметр окружности.

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

Пример изображения детали в прямоугольной изометрии приведен на рис. 5.

Рис. 5

Диметрическая проекция

Положение аксонометрических осей приведено на рис. 6. Коэффициент искажения по оси y равен 0,47, а по осям x и z – 0,94. Диметрическую проекцию выполняют, как правило, упрощенно с коэффициентом искажения, равным 1, по осям x и z и с коэффициентом искажения 0,5 по оси y.

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

Окружности, лежащие в плоскостях, параллельных плоскостям проекций, проецируются на аксонометрическую плоскость проекций в эллипсы (рис. 8).

1 – эллипс, его большая ось расположена под углом 90° к оси y и равна (при коэффициенте искажения – 1) 1,06d, а малая ось – 0,95d,где d – диаметр окружности;

2, 3 – эллипсы, их большие оси расположены под углом 90° к осям  z и x соответственно и равны 1,06d, а малая ось – 0,35d(при коэффициенте искажения – 1).

Фронтальная изометрическая проекция

Положение аксонометрических осей приведено на рис. 10. Допускается применять проекции с углом наклона оси y 30 и 60 градусов. Фронтальную изометрическую проекцию выполняют без искажения по осям x, y, z.

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

Окружности, лежащие в плоскостях, параллельных фронтальной плоскости проекций, проецируются на аксонометрическую плоскость в окружности, а окружности, лежащие в плоскостях, параллельных горизонтальной и профильной плоскостям проекций, – в эллипсы (рис. 12).

1 – окружность d;        2, 3 – эллипсы, большая ось расположена под углом 22°30¢ к осям x и z соответственно и равна 1,3d, а малая ось – 0,54d.

Горизонтальная изометрическая проекция

Положение аксонометрических осей приведено на рис.14. Допускается применять горизонтальные изометрические проекции с углом наклона оси y 45 и 60 градусов, сохраняя угол между осями x и y равным 90 градусов. Горизонтальную изометрическую проекцию выполняют без искажения по осям x, y и z.

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

 Окружности, лежащие в плоскостях, параллельных горизонтальной плоскости проекций, проецируются на аксонометрическую плоскость проекций в окружности, а окружности, лежащие в плоскостях, параллельных фронтальной и профильной плоскостям проекций, – в эллипсы (рис.16).

1 – эллипс, большая ось расположена под углом 15° к оси z и равна 1,37d, а малая ось – 0,37d;

2 – окружность d;       

3 – эллипс, большая ось расположена под углом 30° к оси z и равна 1,22d, а малая ось – 0,71d;

Фронтальная диметрическая проекция

  Положение аксонометрических осей приведено на рис. 18. Допускается применять фронтальные диметрические проекции с углом наклона оси y 30 и 60 градусов. Коэффициент искажения по оси y равен 0,5, а по осям x, z – 1.

 Штриховка сечений в косоугольной фронтальной диметрии показана на рис.19, а пример изображения детали – на рис.21

Окружности, лежащие в плоскостях, параллельных фронтальной плоскости проекций, проецируются на аксонометрическую плоскость проекций в окружности, а окружности, лежащие в плоскостях, параллельных горизонтальной или профильной плоскости проекций, – в эллипсы (рис.20). 1 – окружность d;   2, 3 – эллипсы, большая ось расположена под углом 7°14¢ к осям x и z соответственно и равна 1,07d, а малая ось – 0,33d.

Источник: http://dgng.pstu.ru/sprav/1.3.6.htm

Изометрическая проекция

Изометрическая проекция

Во многих случаях используется изометрическая проекция: в компьютерных играх для трёхмерных объектов и панорам, в рисовании схем проезда и т.д. Рассмотрим, как можно рисовать изометрическую проекцию в Inkscape.

Для начала немного теории.

Начнем с Википедии: Изометрическая проекция — это разновидность аксонометрической проекции, при которой в отображении трёхмерного объекта на плоскость коэффициент искажения (отношение длины спроектированного на плоскость отрезка, параллельного координатной оси, к действительной длине отрезка) по всем трём осям один и тот же.

Слово «изометрическая» в названии проекции пришло из греческого языка и означает «равный размер», отражая тот факт, что в этой проекции масштабы по всем осям равны. По западным стандартам изометрическая проекция, помимо равенства масштабов по осям, включает условие равенства 120° углов между проекциями любой пары осей.

В прямоугольной изометрической проекции аксонометрические оси образуют между собой углы в 120°, ось Z' направлена вертикально. Коэффициенты искажения (kx,ky,kz) имеют числовое значение .

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

Изометрический вид объекта можно получить, выбрав направление обзора таким образом, чтобы углы между проекцией осей x, y, и z были одинаковы и равны 120°.

К примеру, если взять куб, это можно выполнить направив взгляд на одну из граней куба, после чего повернув куб на ±45° вокруг вертикальной оси и на ±arcsin (tan 30°) = 35.264° вокруг горизонтальной оси.

Обратите внимание: при изометрической проекции куба контур проекции образует правильный шестиугольник — все рёбра равной длины и все грани равной площади.

Подобным же образом изометрический вид может быть получен, к примеру, в редакторе трёхмерных сцен: начав с камерой, выровненной параллельно полу и координатным осям, её нужно повернуть вниз на =35.264° вокруг горизонтальной оси и на ±45° вокруг вертикальной оси.

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

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

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

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

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

Для удобства можно раскрасить каждый прямоугольник блока в собственный цвет. Далее откройте диалоговое окно Fill and Stroke (Shift+Ctrl+F) и на вкладке Stroke style установите ширину границ в 1 пиксель.

При создании проекции каждая сторона меняет свои размеры (сужается) и сдвигается (искажается). А верхняя часть к тому же ещё и вращается. Делается это за несколько шагов.

Начнем с передней части. Выберите её при помощи инструмента Select. Далее вызовите диалоговое окно Transform через меню Object | Transform… (Shift+Ctrl+M).

Перейдите на вкладку Scale и установите ширину прямоугольника в 86.603%, что эквивалентно cos(30°). Щелкните на кнопке Apply. После этой операции прямоугольник станет уже и изменит свое местоположение.

Подвиньте его к остальным прямоугольникам.

Далее нам необходимо произвести операцию сдвига на 30°. Это легко сделать при помощи инструмента Select. Щёлкните на прямоугольнике два раза, чтобы включить режим поворота и сдвига.

Когда вы это сделаете, то в центре фигуры увидите крестик — центр поворота. Вокруг этой точки осуществляется поворот фигуры или сдвига. Перетащите крестик в верхний правый угол прямоугольника.

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

Теперь необходимо сделать сдвиг прямоугольника. Удерживая клавишу Ctrl, щёлкните и потащите стрелку сдвига на левой стороне прямоугольника. По умолчанию, при нажатой клавише Ctrl сдвиг происходит по шагам на 15°. Смотрите на строку состояния и сдвиньте прямоугольник на -30°

Повторите предыдущие шаги для боковой стороны. Измените ее ширину на 86.603% и сдвиньте на 30°. Единственная разница заключается в том, что центр поворота теперь нужно расположить в верхнем левом углу.

Финальная часть нашего упражнения — работа с верхним прямоугольником. Здесь есть свои особенности. Во-первых, для верхнего прямоугольника необходимо масштабировать не ширину (её оставляем равным 100%), а высоту на 86.603%.

Во-вторых, для сдвига перемещаем центр поворота в нижний левый угол и сдвигаем на 30° (удерживаем клавишу Ctrl для аккуратного точного сдвига). Но это еще не всё.

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

Если вы всё сделали правильно, то у вас получилась изометрическая проекция объекта.

Аксонометрическая сетка

В Inkscape есть специальная аксонометрическая сетка (File | Document Properties… | Вкладка Grids/Файл | Свойства документа | Сетки). В выпадающем списке выберите Axonometric grid.

Использование аксонометрической сетки позволят создавать объекты в изометрии. Чтобы облегчить рисование ещё больше, можно также включить прилипание. Настройка сетки включает в себя изменения параметров единицы, основной линии и интервала по оси Y.

Для большего удобства, можно также задать свои цвета основным и обычным линиям сетки.

Далее вы можете трансформировать объекты, как в верхнем примере, но при этом вам будет помогать сетка.

Общий алгоритм: Object | Transform…| Scale/Объект | Трансформировать | Масштаб, уменьшить ширину на 86,603%. Затем, в том же меню трансформации, следует изменить наклон по вертикали на 30 или −30 градусов (в зависимости от желаемого угла). Либо менять наклон вручную.

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

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

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

Реклама

Источник: http://designer.alexanderklimov.ru/inkscape/course/isometric.php

Вопросы адвокату
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: