干货 | 如何快速在PS/AI/Sketch中绘制超椭圆

原创文章 分类: 教程 版权:
8283 154 294 24
2018-05-18
91.1
编辑推荐

Image title

全文字数:582,预计阅读时间:2分钟


Hello guys! 

Welcome to Superyeah's Study Room. 

Sit down, and have fun!


什么是超椭圆

超椭圆 ( Superellipse ),又叫Lamé curve,是一种类似于椭圆的封闭曲线。在笛卡尔坐标系里,超椭圆曲线上的点根据数值的不同,会呈现出不同的曲率。

Image title

而在UI设计中,超椭圆则是一个介于圆和方之间的形状,饱满可爱,常被用来作为图标的背景框。

Image title

值得注意的是,超椭圆与圆角矩形是有明显区别的(如下图),圆角矩形我们通过调整矩形的圆角就可以轻易得到,那么超椭圆应该如何绘制呢?

Image title


01 · 在PS中绘制超椭圆

Image title


1. 绘制一个正圆;

2. Ctrl+T自由变换;

3. 变形(如图点击右上角图标,或对着圆形点击右键,选择变形);

4. 在变形样式中选择【膨胀】,回车;

5. 再次Ctrl+T,按住Shift进行旋转;

6. 完成!


02 · 在AI中绘制超椭圆

Image title

1. 绘制一个正圆;

2. 效果-变形-膨胀;

3. 变形选项:调节【弯曲】,叶哥建议将滑杆往左边调,这样可以直接得出一个正确角度的超椭圆,省去了旋转的步骤,节约时间;

4. 对象-扩展外观;

5. 完成!



03 · 在Sketch中绘制超椭圆

Image title

1. 显示-显示网格;

2. 在网格中绘制一个正圆;

3. 双击正圆,进入锚点编辑;

4. 分别将正圆的四个锚点向内或向外拖移一个网格;

5. 完成了哈哈哈!



总结

超椭圆在UI设计中是介于圆与方之间的一种形状,并且有区别于圆角矩形。 在PS和AI中,利用膨胀变形效果即可快速得到超椭圆效果,而在Sketch中,只能手动调整圆形的四个锚点。 还有许多种方法可以绘制超椭圆,叶哥这篇文章只给大家总结了最快速的方法。


接下来,你们是不是也能轻松绘制出萌萌哒的超椭圆了呢?


Image title


微信公众号:叶设计的自习室

叶碉堡了

微信公众号:叶设计的自习室

476粉丝/42关注

超级好用的GIF录屏工具让你的网页动起来!必须让前端知道的10个网页动效库

叶碉堡了

叶碉堡了

微信公众号:叶设计的自习室

扫描二维码
去手机端查看海报

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2018 UI.CN