Как нарисовать изометрические векторы?

16

Я ищу "встроенные" программные решения для Illustrator CS2-5 предпочтительно.

Я пытаюсь создать эти изометрические иллюстрации для веб-приложения. Прямо сейчас я вручную настраивал сетку в Adobe Illustrator и делал рисунки, основанные на этой сетке - но у меня нет руководств, никаких снимков и тому подобного…

Конечный результат должен быть близок к этому: http://www.twigital.co.uk/

Мне интересно, знаете ли вы о хорошем программном обеспечении для рисования изометрического материала, из которого я могу затем вывести его в виде вектора (.eps или .ai), чтобы затем я мог импортировать его в Illustrator и раскрасить их в цвета и прочее?

Если вы не знаете программного обеспечения специально для этого, делали ли вы когда-нибудь изометрические иллюстрации в Illustrator? Любые методы? Какие-нибудь советы?

Пример изометрической векторной графики

РЕДАКТИРОВАТЬ:

Пожалуйста, не путайте Изометрический рисунок с перспективным рисунком в 1,2 или 3 точки.

ИЗОМЕТРИЧЕСКИЙ ЧЕРТЕЖ:

[Изометрическая система - это просто соглашение / изобретение, полезное для многих вещей, не для того, чтобы воспроизводить то, что глаза видят в реальности, а на самом деле просто соглашение, полезное для измерений и прочего)

изо (равно) метрика (измерение)

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

ПЕРСПЕКТИВНЫЙ ЧЕРТЕЖ:

[Условные обозначения рисования в перспективе (1 пункт, 2 пункта, 3 пункта ... и некоторые другие) по-прежнему являются соглашениями, но они пытаются подражать и быть как можно ближе к тому, что глаз видит в реальности (3D), но так оно и есть. на 2D (бумага / экран) никогда не бывает так, как на самом деле.]

[Другое дело, что некоторые могут возразить, что это связано с тем фактом, что у нас есть два глаза (только некоторые оптические устройства) *, и изображение на самом деле объединяет (создается) посредством какой-то магии, которая происходит в мозге, и делает еще один аргумент, почему ни один из этих условные обозначения действительно очень похожи на реальность ... но это для философии SE: P] *

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

С сеткой перспективы в Illustrator CS 5 есть 3 варианта:

1 точка зрения, 2 точки зрения и 3 точки зрения.

После обработки всей информации сверху (информация из Интернета ... может быть неправильной, не стесняйтесь обдумывать), я делаю простое предположение, что невозможно добиться изометрического представления нескольких объектов на холсте (как в пример выше, twigital.co.uk (спасибо Джорджу за объяснение того, как это было сделано в его ответе) с сеткой перспективы, то есть с одной точкой перспективы: линии встретятся в одной точке на горизонте, 2 точки: линии встретимся в 2 очках на горизонте, 3 очка ... вы поняли ...

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

!!! Но если вы строите сетку вручную, это возможно , вы можете узнать, как это сделать, или вы можете скачать уже готовую сетку здесь . После того, как вы выполните все в этом руководстве, выделите все созданные вами линии и перейдите в « Просмотр»> «Направляющие»> «Создать направляющие» . Это своего рода ответ на этот вопрос, но я просто искал какое-то "встроенное" решение и ...

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

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

Флавий Франц
источник
1
Пока что лучший вариант, который я нашел, это то, что вы прокомментировали в ответе @Johannes: преобразовать линии в сетку. Это далеко от изометрических видов, предлагаемых любым программным обеспечением 3D CAD (или вообще любого 3D), но, возможно, это достаточный обходной путь для программного обеспечения 2D-иллюстрации (у которого, да, есть некоторые инструменты, помогающие рисовать в перспективе).
Яри ​​Кейнянен

Ответы:

11

Для Twigital дизайнер ( Крис ) использовал Illustrator, сетку и инструмент 3D Rotate. Обратите внимание, что у него есть предустановки для изометрических поворотов.

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

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

  • Слева = CMD + Shift + F1
  • Верх = CMD + Shift + F2
  • Справа = CMD + Shift + F3

Чтобы получить их, все, что вам нужно сделать, это загрузить этот файл: Isometric.aia и в Illustrator перейдите в Действия (Окно> Действия) и из контекстного меню (маленький значок в правом верхнем углу со стрелкой, указывающей вниз и 2 горизонтальными линиями). (=)) выберите Загрузить действия и перейдите к Isometric.aia

Также довольно просто создать действия с нуля.

Я также сделал несколько записей экрана:

  • Как использовать действия изометрических преобразований для создания прямоугольника - IllustratorIsometricWithTransforms.mov
  • Как использовать эффект 3D выдавливания для создания прямоугольника - IllustratorIsometricWith3DExtrude.mov
  • Как использовать трехмерное вращение для создания изометрических цилиндрических / конусообразных объектов - IllustratorIsometricWith3DRevolve.mov
  • Как использовать 3D вытяжки для создания арок (смешивая прямые и круглые формы) - IllustratorIsometricExtrudeArches.mov

Полный файл арок можно скачать здесь: iso_arches.ai

изометрические арки

Есть три основных момента, которые могут не проявиться в видео, которые пригодятся:

  • используя точки щелчков / ссылка сетки для размещения объектов проще
  • используя модуль для модулей, так что разные части сочетаются друг с другом
  • при сборке объектов с повторяющимися частями, используя символы вместо групп

сделать настройки проще

Георгий Профенца
источник
+1 для CADtools для Adobe Illustrator CS3, CS4, CS5 и CS5.5 ссылка на плагин. И изометрическая настройка с помощью инструмента 3D Rotate также хороша. Это своего рода «встроенные в программное обеспечение» методы для создания правильного и точного изометрического рисования ... но этот плагин CADtools довольно дорог.
Флавиус Франц
1
Возможно, стоит отметить, что в руководстве по SSR опечатка 86.062% должна составлять 86.602% , поскольку это значения cos (30) и sin (60), где угол соответствует вашим поворотам. Если вы не исправите это, вы в конечном итоге будете в беде, поскольку вещи не совсем совпадают между преобразованиями.
joojaa
1

В Illustrator CS5 появился новый замечательный инструмент под названием «Перспектива». Этот инструмент позволяет вам настроить двухмерную или трехмерную перспективную сетку, которая поможет вам нарисовать объекты, чтобы придать им размер. Он «прикрепляет» фигуры и текст к определенной плоскости и регулирует их размер и угол в зависимости от того, где он находится.

Вот несколько видеороликов Adobe, в которых подробно объясняется, что это за инструмент и как его использовать.

Определение перспективных сеток

Рисование художественных работ в перспективе

Кроме того, вот видеоурок от Терри Уайта, рассказывающий о похожих вещах.

А вот несколько разных 3D уроков , не обязательно использующих инструмент «Перспектива» в Illustrator.

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

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

РЕДАКТИРОВАТЬ

Для пояснения, инструмент «Перспектива» отнюдь не «Истинное 3D», это всего лишь двухмерный объект с иллюзией 3D (как изометрический).

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

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

Ханна
источник
У меня CS5, я замечаю перспективную сетку, но вы можете установить ее, чтобы перейти в "изометрический" режим? Потому что изометрия - это не 3D, а 2D, но она выглядит как 3D, вот и все ... а в изометрической графике нет перспективы ... [ en.wikipedia.org/wiki/Isometric_projection ]
Flavius ​​Frantz
3
до сих пор я вручную создавал свою сетку с простыми линиями в иллюстраторе, затем я выделил все из них и пошел в «Просмотр»> «Направляющие»> «Сделать направляющие», поэтому все мои линии теперь представляют собой изометрическую сетку, состоящую из направляющих (а не просто линий в иллюстраторе). и благодаря умным гидам я получаю то, что хочу ... не полностью, а близко ...
Flavius ​​Frantz
@Flavius: Это способ сделать это. Вы должны сделать это ответом.
Алан Гилбертсон
Отредактировано для уточнения. Надеюсь, теперь это имеет больше смысла.
Ханна
@Johannes [Я отредактировал свой вопрос, чтобы прояснить некоторые вещи, в основном для меня и таких, как я, которые не очень легко это понимают] Пожалуйста, объясните, как это сделать с помощью сетки перспективы в Illustrator CS5 и добиться чего-то вроде примера в вопрос или ваш пример, но я бы предпочел мой, то есть несколько объектов, нарисованных и затем размещенных на холсте в изометрической области.
Флавиус Франц
1

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

Ну, моей первой мыслью был Rhinoceros , 3D-программа (для Windows)

С его помощью вы можете довольно легко сделать 3d текст и основные 3d объекты, такие как кубики, цилиндры и прочее.

Кроме того, у меня на уме была функция Make2D . Позволяет делать 2-мерные рисунки из 3D-объектов.

Затем вы можете сохранить эти строки в формате .ai.


Вот пример (не на 100% точный) iphone, который я сделал (давно), который я теперь преобразовал в строки и из того, что принес в Illustrator. Изображение

Если вам нужно залить его цветом ... это может быть немного утомительной работой, так как вам нужно объединить пути, прежде чем вы сможете ее заполнить. Выберите 2 или более линий и Ctrl + J.

Йонас
источник
интересный вариант .. я посмотрю на это
Flavius ​​Frantz
+1 за рекомендацию по программному обеспечению 3D, которая имеет возможность экспортировать, а затем импортировать в иллюстратор. будет полезен не только в этом случае ...
Flavius ​​Frantz
1

Я думаю, что идеальный учебник для ваших целей только что появился на сайте Digital Arts . Это не только «Как», это целое исследование само по себе.

Алан Гилбертсон
источник
Хе-хе-хе ... конечно, это появилось, я просил об этом, не так ли? : P: P [jooooke]. Отличный урок, я проверю это позже этим вечером, спасибо за советы. :)
Flavius ​​Frantz
Но конечно! В учебник включена готовая изометрическая сетка, которая может сэкономить время. :)
Алан Гилбертсон