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

Я ищу «встроенные» программные решения для 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 (спасибо Джорджу за объяснение того, как это было сделано в его ответе) с перспективной сеткой, то есть с перспективой в 1 точку: линии встречаются в одной точке на горизонте, 2 точки: линии встретятся в 2-х точках на горизонте, в 3-х точках... ну вы поняли...

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

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

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

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

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

Ответы (4)

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

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

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

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

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

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

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

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

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

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

Есть 3 основные вещи, которые могут быть не очевидны в видео, которые пригодятся:

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

для облегчения настройки

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

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

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

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

Рисование художественного произведения в перспективе

Кроме того, вот видеоурок Терри Уайта, в котором рассматриваются подобные вещи.

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

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

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

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

Чтобы уточнить, инструмент «Перспектива» ни в коем случае не является «Истинным 3D», это просто 2D-объект с иллюзией 3D (точно так же, как изометрия).

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

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

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

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

Что ж, моей первой мыслью был Rhinoceros , программа для 3D (для Windows).

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

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

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

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

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

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

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

Хе-хе... конечно, оно появилось, я же просил, не так ли? :P :P[jooooke] . Отличный урок, я проверю его позже сегодня вечером, спасибо за голову. :)
Но конечно! В учебник включена готовая изометрическая сетка, которая может сэкономить некоторое время. :)
Как рисовать изометрические векторы?
СпросиСетьПолитика конфиденциальности1y, 0v