iOS 7 的圆角图标是怎样一个图形...

  • 经验类型规范/资料原作者:原作者

  • 经验属性好文转载
  • 经验版权不使用原创授权
15621 8 45 2014-06-10

最近研究了下ios圆角综合整理了一下网上其他资源,具体方法如下:

截取羊角曲线上的一段, 从原点开始斜率取从0到1


首先,新建一个文档,尺寸为120×120,颜色模式RGB,不要勾选「使新建对象与像素网格对齐」。

然后,到这里:

http://en.wikipedia.org/wiki/File:Euler_spiral.svg 

下载羊角螺线的SVG矢量图像,用AI打开:

打开以后,用选择工具和直接选择工具大开删戒,一直删成这个样子,即只保留曲线右半部分,从原点到原点右边第五个锚点:

Illustrator教程:详细解析AI参考线的使用,PS教程,思缘教程网

之所以截到原点右边第五个点,是因为在这个点曲线切线斜率刚好为1,即在这一点上曲线切线的夹角刚好是45度,方便使用。

然后,把这段曲线复制进刚才新建的文档里:然后再复制出一个,做一下上下对称、旋转-90度,让曲线能够接上。确保两条曲线的端点对上后,使用「连接」命令连接两条曲线。接着把连接好的曲线大小设置为38×38像素。最后放在画板右下角。步骤可能说起来有些繁琐,总之嘛,做好后应该是这样的:

对称复制一下

效果图

最后附上本蘑凉按照方法画的效果图:

两个都是180X180大小的改变圆角大小,两种风格圆角完美过渡,有没有?

全部评论:8条

  • 森草

    2014-06-17 14:10

    可怕的黑科技

  • Zxming

    2014-06-12 14:03

    @songivan: 好吧,我自己试验对比了下你这个,直接四个圆弧拼起来就和你那个蓝色的差不多,不过是斜对称的状态,比你这个显得稍微胖一点,你又自己调了曲线的走向才显得现在这种椭圆的形态吧?

  • songivan

    2014-06-12 09:31

    @Zxming: 变形版,椭圆椭圆的最近很流行,如果你把圆弧扩大,衔接处肯定要相应调整,是不是?我新上传的icon主题的图形现在就是用的这个

  • elaine503

    2014-06-10 20:22

    没看懂

  • newanubis

    2014-06-10 17:29

    “对称复制一下”下面三张图挂了。

  • songivan

    2014-06-10 15:29

    @newanubis: 看不到吗?刚刚没附羊角螺线下载地址,你现在看看勒

  • newanubis

    2014-06-10 15:18

    图呢?

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票