新手必学教程!如何快速在PS、AI及Sketch中绘制超椭圆?

时间:2021-05-21
类别:PS教程
水平:普通
观众:3.1w
设计师入站必刷的宝藏频道,掌握设计真本领与AI并肩 👉 立即点击

教程作者:超级叶(授权转载)

交作业:#优设每日作业#

关于教程

新手必学教程!如何快速在PS、AI及Sketch中绘制超椭圆?

UI设计中,超椭圆是一个介于圆和方之间的形状,常用来作为图标的背景框。

这种形状并不能通过简单调整圆角矩形直接获得,

本期教程将告诉你最简单的几种制作方法,欢迎举一反三~

教程内容

什么是超椭圆

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

新手必学教程!如何快速在PS、AI及Sketch中绘制超椭圆?

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

新手必学教程!如何快速在PS、AI及Sketch中绘制超椭圆?

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

新手必学教程!如何快速在PS、AI及Sketch中绘制超椭圆?

01 · 在PS中绘制超椭圆

新手必学教程!如何快速在PS、AI及Sketch中绘制超椭圆?

1. 绘制一个正圆;

2. Ctrl+T自由变换;

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

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

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

6. 完成!

02 · 在AI中绘制超椭圆

新手必学教程!如何快速在PS、AI及Sketch中绘制超椭圆?

1. 绘制一个正圆;

2. 效果-变形-膨胀;

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

4. 对象-扩展外观;

5. 完成!

03 · 在Sketch中绘制超椭圆

新手必学教程!如何快速在PS、AI及Sketch中绘制超椭圆?

1. 显示-显示网格;

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

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

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

5. 完成了哈哈哈!

总结

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

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

新手必学教程!如何快速在PS、AI及Sketch中绘制超椭圆?

想要来「优优自学团」和500位小伙伴一起交流学习进步吗?
添加管理员微信:uisdc2 备注「优优自学团」(无备注不通过哦)

学完这篇教程的人还在学…

110 收藏 155

非特殊说明,本站 UiiiUiii.com 上的教程均由本站作者及学员原创或翻译,原作品版权归属原作者,转载请联系 @优优教程网 授权。

转载时请在文首注明,来源 UiiiUiii.com 及教程作者,并附本文链接。谢谢各位编辑同仁配合。UiiiUiii 保留追究相应责任的权利。

复制本文链接
img

发表评论 已发布 8

还可以输入 800 个字
yzm
 
 
加载更多评论
没有更多评论了

优优教程网 365 天打卡计划

点击 #优设每日作业# 进入微博超话页面,上传并发布你的练习作业,话题微博格式【 优优教程网365打卡计划 – DAY 01 】,优秀作业将有机会被 @优优教程网 官方微博转发点评。

/

支持键盘 ← → 键翻阅图片