如何绘制等距向量?


16

我最好为Illustrator CS2-5寻找“内置”软件解决方案。

我正在尝试为Web应用程序创建这些等距插图。现在,我已经在Adobe Illustrator中手动设置了一个网格并基于该网格进行绘图-但是我没有任何指南,快照和类似信息……

最终结果应该接近于此:http : //www.twigital.co.uk/

我想知道您是否知道一种用于绘制等距内容的好的软件,然后可以从中将其输出为矢量(.eps或.ai),以便随后将其导入到Illustrator并将其颜色和其他内容设置为pimp。

如果您不了解专门用于此目的的软件,您是否曾经在Illustrator中做过等轴测图?有什么方法吗?有小费吗?

等距矢量绘图示例

编辑:

请不要将等轴测图与1,2或3点透视图混淆。

等轴测图:

[等距系统只是一种约定/发明,对很多东西都有用,而不是重现现实中眼睛所见的东西,而实际上只是对测量和其他东西有用的约定]

iso(相等)度量(度量)

等轴测图中,立方体的所有边缘将以四个为一组平行(2条平行线表示两条线永远不会相遇,绘制多长时间也不会发生影响)

透视图:

[透视图惯例(1点,2点,3点等)仍然是惯例,但它们确实试图模仿并尽可能接近现实中的眼睛(3D),但实际上在2D(纸/屏幕)上,它从未像现实那样真实。]

[另一个人可能会争论的事实是,我们有两只眼睛(只有一些光学设备)*,并且图像实际上是通过大脑中发生的一些魔术而结合(创建)的,这又说明了为什么这些都不存在的事实。约定确实准确地类似于现实...但这是针对哲学SE:P] *

透视图中,边缘将朝一个或多个消失点逐渐变细

使用Illustrator CS 5中Perspective Grid,有3个选项:

1点透视图,2点透视图和3点透视图。

在处理完所有来自上方的信息(来自互联网的信息...可能是错误的,请随意考虑)后,我做出一个简单的假设,即不可能在画布上实现多个对象的等距视图(例如上面的示例中,twigital.co.uk(感谢George对他的回答做了解释)带有一个透视网格,即1点透视:线将在地平线上相交1点,而2点:线将会在地平线上的2点,3点相遇...你明白了...

在等轴测视图中,线永远不会相遇,因为它们是平行的。(我认为您也可以将其称为等轴测透视图,这就是为什么我有点困惑的原因)

!!! 但是,如果您确实手动构建了网格,则可以学习如何做,也可以在此处下载已经完成的网格在完成本教程中的所有操作之后,选择所有已创建的行,然后转到“ 视图”>“指南”>“制作指南”。这是该问题的答案,但我只是在寻找一些“内置”解决方案,并...

我确实尝试使用Illustrator CS5中的透视图网格来执行此操作...对我来说不起作用,如果有人使用Illustrator中的透视图网格进行了此操作,请解释执行此操作的确切步骤。

有人可能会说我确实在上面的某些内容上强调了很多,但是如果您制作一个复杂的应用程序时有数百个对象,或者只是随机放置了50个对象(以等轴测方式),而这些对象并不是完全等轴测的,那么结果将很丑陋在这里和那里(并不是所有的线都是平行的,看起来很糟糕),或者如果它是用于测量和精确按比例缩小的投影的应用程序,则最终会出现“错误”的数字……而您可能不希望这样。 。


1
到目前为止,我发现最佳选择是您在@Johannes的答案下发表的评论:将线条转换为网格。它与任何3D CAD(或通常任何3D)软件所提供的等轴测图相距甚远,但是对于2D插图软件(也许有一些工具可以帮助绘制透视图),这也许是一个足够的解决方法。
贾里·凯纳嫩(JariKeinänen)2011年

Answers:


11

对于twigital设计师(克里斯)使用Illustrator中,网格和3D旋转工具。请注意,它具有等轴测旋转的预设。

如果您需要的内容超出Illustrator默认提供的内容,请尝试使用IllustratorCADtools插件,该插件提供了等轴测图和尺寸标注的工具。

我还有更多资源可以分享。根据本教程,我已将上述步骤记录为操作,因此您可以使用键盘快捷键来触发这些操作:

  • 左= CMD + Shift + F1
  • 顶部= CMD + Shift + F2
  • 右= CMD + Shift + F3

要获得这些,只需下载以下文件:Isometric.aia, 然后在illustrator中转到“动作”(“窗口”>“动作”),然后从上下文菜单(右上角的小图标,向下的箭头和2条水平线) (=))选择加载动作并浏览到Isometric.aia

从头开始创建动作也很简单。

我还做了一些屏幕录像:

完整的拱门文件可以从这里下载: iso_arches.ai

等距拱门

视频中有3个主要内容可能不会很明显,它们会派上用场:

  • 使用点捕捉/参考网格更容易放置对象
  • 为模块使用单元,以便将不同的部件组合在一起
  • 将零件与重复零件组装在一起时,使用符号代替组

使调整更容易


+ 1用于Adobe Illustrator CS3,CS4,CS5和CS5.5的CADtools链接到插件。而且3D旋转工具的等距设置也不错。这些都是一种“内置在软件中”的方法,可以正确正确地绘制等轴测图...但是CADtools插件有点贵。
Flavius Frantz

1
这可能是值得一提的是,SSR教程有一个错字 86.062%应该是 86.602% ,因为它是COS(30)(60)的值和罪恶,当你的角度旋转相匹配。如果不解决此问题,最终将遇到麻烦,因为转换之间的关系并不完全一致。
joojaa

1

Illustrator CS5有一个很棒的新工具,叫做“透视”。该工具允许您设置2D或3D透视网格,以帮助您绘制事物以赋予其尺寸。它将形状和文本“粘贴”到某个平面,并根据其放置位置调整其大小和角度。

这是Adobe制作的一些视频,确切地解释了该工具的含义以及如何深入使用它:

定义透视网格

透视图稿

另外,这是特里·怀特(Terry White )制作的视频教程,介绍了类似的内容。

而且这里有一些杂3D教程,不一定使用Illustrator中的透视工具。

我认为该工具是使用Illustrator获得等距感觉的最佳方法。如果没有CS5,则必须使用一些更粗糙的方法来制作自己的网格,而没有其他方法。

另外,您始终可以尝试查找满足您需求的单独软件。无论哪种方式,我希望这会有所帮助!

编辑

需要说明的是,Perspective工具绝不是“ True 3D”,它只是带有3D幻觉的2D对象(就像等轴测图一样)。

这个图像为例。这是等轴测图,可以使用Illustrator中的透视图工具制作此图像。当然,有更好的软件可用于此目的,但是我认为这是在Illustrator中进行此操作的最佳选择之一。透视工具需要一些时间来适应,这些教程绝对可以帮助您。

我认为您之前看到的示例与您的“等距感觉”之间的区别仅仅是图像的角度。等轴测图通常是自上而下的(只是成一个角度),而其他示例则更直接地看着对象。但这就是他们决定树立形象的方式。


恩,我有CS5,我注意到透视图网格,但是您可以设置它以便进入“等轴测”模式吗?原因不是等轴测图不是3D,而是2D,但它看起来有点像3D,而在等轴测图形中则没有透视... [ en.wikipedia.org/wiki/Isometric_projection ]
Flavius Frantz

3
到目前为止,我已经在illustrator中用简单的线条手动制作了网格,然后选择了所有这些线条,然后转到“视图”>“参考线”>“制作参考线”,所以我现在所有的线都是由参考线组成的等距网格(不仅仅是在Illustrator中的线)并启用了智能向导,我可以得到我想要的...不完全,但是很接近...
Flavius Frantz

@Flavius:那是这样做的方式。您应该将此作为答案。
艾伦·吉尔伯森

编辑为澄清。希望这现在更有意义。
汉娜

@Johannes [我已经编辑了我的问题,以澄清一些问题,主要是针对我和像我这样的不容易解决的人]请解释如何在Illustrator CS5中使用透视网格来实现此目的,并实现类似示例中的示例。问题或您的示例,但我更喜欢我的方法,即先绘制几个对象,然后将它们以等距的方式排列在画布上。
Flavius Frantz

1

我可能觉得太复杂了,但是无论哪种方式,我都认为应该分享。

好吧,我首先想到的是Rhinoceros,它是3D软件(适用于Windows)

有了它,您可以轻松制作3d文字和基本3d对象,例如立方体,圆柱体和其他东西。

此外,我脑海中只有Make2D功能。它使您可以从3d对象制作2d工程图。

然后,您可以将这些行保存为.ai格式。


这是我(很久以前)制作的(不是100%准确)iphone的示例,现在我将其转换为线条并将其带到Illustrator中。图片

如果要用颜色填充它,这可能有点麻烦,因为您需要先连接路径才能填充它。选择2条或更多行并按Ctrl + J。


有趣的选择..我会调查一下
Flavius Frantz

+1表示可以导出然后导入到Illustrator中的3D软件推荐。将不仅在这种情况下有用...
Flavius Frantz

1

我认为适合您目的的完美教程只是在Digital Arts网站上显示。这不仅是一个“如何做”,它本身就是一个完整的案例研究。


他他...当然出现了,我要了,不是吗?:P:P [jooooke] 很棒的教程,今天晚上我会检查一下,谢谢大家的注意。:)
Flavius Frantz

但是当然!本教程中包含一个现成的等距网格,可以节省一些时间。:)
艾伦·吉尔伯森
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.