如何在 photoshop绘制图形 或 Illustrator 中绘制羊角螺线?

来源：蜘蛛抓取(WebSpider) 时间：2016-05-04 11:55 标签： illustrator绘制产品
hi，大家好，我想了解一下“羊角螺线”在平面设计中的使用方法，下面是目前存在的几个疑问。就目前我所理解的，“羊角螺线”应该是解决了两段曲线的连接问题，如果没记错的话是能使两条线段连接后在曲率上达到G2连续，我的理解是否有误？（问题1），如果这样的话，那么当给出两段曲线，我们应该如何绘制它们之间的“羊角螺线”呢（问题2）？wikipedia上有一张“羊角螺线”的SVG图，这张图的作用是什么，我们应该怎样使用这张图？（问题3）平面设计并非我的职业，没有进行过系统性的学习，只是因为对这一领域有所喜好，所以平时会零星的去了解和学习一些知识点，希望设计界的大大能给指点迷津。：）
羊角螺线是一段数学函数曲线。多用作缓和曲线，缓和直路线与圆曲路线之间曲线变化的作用。羊角螺线的特点是，从坐标原点开始，起始曲率为0，函数曲线的曲率呈线性增长。也就是说，羊角螺线可以完美链接直线与任何圆弧曲线，它可以保证连接点与圆弧曲线的曲率完全一致。羊角螺线在道路、铁路的设计上有非常广泛的应用。了解了以上原理，你可以自己发挥它如何在平面设计上使用了。具体的应用例子，请看这个问题：5月15日补充：厚道一点，再对应回答一下楼主的三个问题。首先要明确一个前提：Euler Spiral是一个数学概念，其在数学上的意义远大于在设计中的意义。所以不必强求其在设计中的准确实现。对于数学曲线，设计做到拟合即可。问题（1）“羊角螺线”应该是解决了两段曲线的连接问题，如果没记错的话是能使两条线段连接后在曲率上达到G2连续，我的理解是否有误？答：你的表达不够精准，但基本正确，见上文。问题（2）给出两段曲线，我们应该如何绘制它们之间的“羊角螺线”呢？答：无法实现数学上的完美连接。因为你很难精准测出这两段曲线在连接点的曲率。除非，你另外两段曲线也是用数学方法精确绘制的。另外，羊角螺线主要的的应用场景是直线与直线，或直线与圆弧曲线的平滑连接。问题（3）wikipedia上有一张“羊角螺线”的SVG图，这张图的作用是什么，我们应该怎样使用这张图？答：最简单的使用方法如这个答案所 （原谅我盗图）为达到平滑连接两根呈任意角度的直线的目的，可以从函数曲线中截取从0度开始的一段，镜像复制。0度的端点连接直线，另外一端互相连接，即可实现G2连续过渡的连接。至于怎么在Illustrator里绘制精准的羊角螺线。这个问题有人问过。只能是拟合。也就是说……自己描一个就好……这里有一张px的大图，足够你描了。如果你有图形编程的经验，那你也知道，函数曲线的绘制，都是做拟合，如果不是专业应用，只要人眼看不出问题就足够。如果只是装饰性的审美，数学同学们也只能玩玩复制-镜像 :D 欢迎有人来拍
已有帐号？
无法登录？
社交帐号登录
开心画画开心带娃，公众号：mengmanbaba人人网 - 抱歉
哦，抱歉，好像看不到了
现在你可以:
看看其它好友写了什么
北京千橡网景科技发展有限公司：
文网文[号··京公网安备号·甲测资字
文化部监督电子邮箱：wlwh@··
文明办网文明上网举报电话： 举报邮箱：&&&&&&&&&&&&Illustrator详细解析参考线工具的使用技巧
如果不坚持,何必当初那么努力
帖子148857&缘分币471450 Y&阅读权限255&注册时间&
16:46 
Illustrator详细解析参考线工具的使用技巧
AdobeIllustrator诞生在1986年，运行在Macintosh机上。在当时，AdobeIllustrator是Adobe公司的早期产品之一，甚至早于Photoshop。Adobe的创始人JohnWarnock带头开发这款产品，最初是希望将自己作为平面设计师的妻子从繁琐的工作流程中解放出来。
所以可以说，AdobeIllustrator最初的客户群体是平面设计师。虽然后来Adobe为UI设计、Web设计等给Illustrator新增了一些特性和功能，不过大体上讲，AdobeIllustrator仍然更侧重版式设计领域。自然而然的，AI也拥有较Photoshop更强大的排版工具，比如更加强大的参考线和网格功能，这次就说说AI里的参考线。
参考线是做版式设计、Web设计和UI设计的重要工具，用来保持版面元素之间的一致性与协调。在AI里，创建参考线有数种办法。
第一种办法与PS类似，按Cmd+R，显示标尺，然后点击标尺，将参考线从标尺上拖拽出来，对齐到想要对齐到的对象上，如图：
这样，参考线就建立好可以使用了：
另一种办法更加灵活，AI可以将任何线条转化为参考线。横着竖着斜着的直线都可以转为参考线，甚至画个圆也可以转成参考线。这次，用实战来举例：创建一个iOS7图标模板：
可能很多人都知道了，相对于以前版本的，iOS7的图标形状有两点改变：
1.在iPhone、iPodtouch上，由原先的114×114px(57×57pt)变为120×120px，不再支持非Retina屏幕(图片摘自WWDC2013Session208:What’sNewiniOSUserInterfaceDesign的PDF)：
2.使用纯粹的圆角看上去会觉得圆角与直边连接处很「硌硬」，iOS7使用羊角螺线作为缓和曲线解决了这个问题，因为羊角螺线的曲率变化更加平滑。其中缓和曲线「圆角」大小约为38px。如图：
好，知道这些后，我们就做一个图标模板吧。
首先，新建一个文档，尺寸为120×120，颜色模式RGB，不要勾选「使新建对象与像素网格对齐」。
然后，到这里：File:Eulerspiral.svg下载羊角螺线的SVG矢量图像，用AI打开：
打开以后，用选择工具和直接选择工具大开删戒，一直删成这个样子，即只保留曲线右半部分，从原点到原点右边第五个锚点：
之所以截到原点右边第五个点，是因为在这个点曲线切线斜率刚好为1，即在这一点上曲线切线的夹角刚好是45度，方便使用。
然后，把这段曲线复制进刚才新建的文档里：然后再复制出一个，做一下上下对称、旋转-90度，让曲线能够接上。确保两条曲线的端点对上后，使用「连接」命令连接两条曲线。接着把连接好的曲线大小设置为38×38像素。最后放在画板右下角。步骤可能说起来有些繁琐，总之嘛，做好后应该是这样的：
用直线工具和「连接」命令，把这四分之一图标形状其他部分给补上：
把这段曲线复制、镜像几次，图标的大体形状就出来了，最好再用「连接」命令，将四段曲线连接为完整的一圈：
好，图标的形状出来了。接下来要做的是，使用参考线，把图形内部网格线做出来。
用直线和方框工具，给这个图形里面画一个米字和一个方框，这样：
然后重点来了，选中刚才画的米字和方框，右键点击，选择「建立参考线」命令：
就可以根据选择的米字和方框，把参考线建立好了：
如法炮制，在方框里画一个内接圆，并转为参考线：
利用AI的吸附功能，从每个曲线刚刚由直线被掰弯的那个点上画线(不太好描述，总之见图吧)，转为参考线：
最后，给最里面的方框画一个内切圆和外接圆，并转化为参考线，就基本完成了：
把参考图放进去对比看一下，matchperfectly!
最后，用「存储为模板」命令，将其存成一个模板。每次做iOS7图标时，使用「从模板中新建」命令，选择这个模板，就可以方便快速地新建一个带参考线的iOS7图标了。
使用参考线相对于直接用普通的线条、线框相比有什么优点呢?首先，参考线显示起来，始终是1px宽度，无论放大还是缩小图稿都能显示清楚，普通的线条就不可以。再有，参考线可以使用快捷键Cmd+;快速隐藏或显示。另外，参考线通常处于锁定状态，不太会被误编辑。还有，参考线在所在图层永远处于最上方显示，等等。
今天就到这里吧，下节课说说AdobeIllustrator里的网格功能。
如果您在做图或者看教程（PHOTOSHOP方面），遇到任何问题请到问题交流区提问，地址：；我们会在第一时间帮助您解决问题，如果在教程后面跟帖，一律不给予解决！~
UID1&精华&积分456557&威望25410 F&回复币50386 B&警告0 次&贡献2117557 &金币2 个&学分0 点&性别男&来自上海&最后登录&
帖子62&缘分币35 Y&阅读权限10&注册时间&
请问楼主能做出来吗？我做到用羊角螺线做圆角那里做不成，不知道怎么删羊角螺线，请楼主指点迷津！！！
UID966913&精华&积分62&威望0 F&回复币80 B&警告0 次&贡献0 &金币0 个&学分0 点&性别男&来自云南&最后登录&
制图ID：Sheeny
帖子40394&缘分币61883 Y&阅读权限120&注册时间&
使用直接选择工具 选择锚点 删除
帖子62&缘分币35 Y&阅读权限10&注册时间&
琦琦儿 的帖子
我知道是用直接选择工具删锚点，但是好像不对，我删了也做不出来，也许是我删的不对，可以教教我吗？
UID966913&精华&积分62&威望0 F&回复币80 B&警告0 次&贡献0 &金币0 个&学分0 点&性别男&来自云南&最后登录&
帖子72&缘分币82 Y&阅读权限10&注册时间&
交作业咯，第一次用AI 的说abc::01abc::01
(56.02 KB)
, 售价: 缘分币 8 Y &[]
鼓励一下～加油咯.
帖子155&缘分币179 Y&阅读权限10&注册时间&
为什么羊角螺线下载不了
UID761530&精华&积分155&威望0 F&回复币207 B&警告1 次&贡献0 &金币0 个&学分0 点&性别女&最后登录&
帖子2523&缘分币58713 Y&阅读权限120&注册时间&
这个要学习下，总遇到类似问题呢
帖子17&缘分币12 Y&阅读权限10&注册时间&
受教了。。。
帖子3&缘分币7 Y&阅读权限10&注册时间&
完成作业！
(83.15 KB)
鼓励一下～加油咯.
帖子13&缘分币35 Y&阅读权限10&注册时间&
完成第一篇作业，哈哈，交作业啦~
(20.94 KB)
鼓励一下～加油咯.
当前时区 GMT+8, 现在时间是

我要回帖

更多关于 illustrator绘制产品 的文章

 

随机推荐