干货 | 如何快速在PS/AI/Sk...

  • 经验类型教程
  • 经验属性原创文章
  • 经验版权署名-非商业性使用-相同方式共享
31846 29 532 2018-05-18

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


全部评论:29

  • 超级叶

    2021-05-16 13:39

    @_MAQ: 可能你没按步骤拖对

  • _MAQ

    2021-04-24 15:53

    为什么我用sketch做了还是个正圆

  • 2020-05-19 22:40

  • 言丨之

    2020-03-31 10:48

    sketch这个感觉不太对

  • 洛苏fw

    2019-08-07 15:05

    原来介么简单,get啦

  • 米斯特艾欧

    2019-02-20 12:24

    脑:学会了!手:这个简单,我也会!

  • 留青青

    2018-09-30 16:47

    @乔威特高兴: 膨胀也可调节 还是看自己喜欢用什么 多提出一种思路呗

  • 乔威特高兴

    2018-09-15 12:03

    @留青青: 不够圆~

  • 超级叶

    2018-09-08 19:48

    @北巷九命猫: 复制了几个圆,剪切在底部超椭圆的上方,用锚点工具调整一下就ok

  • 北巷九命猫

    2018-09-05 16:18

    您好,我问一下第二个底图右上角和第三图得右下角是怎么做的

  • 泉子zq

    2018-09-05 11:35

    @超级叶: 嗯,,好的,,谢谢,,还有个问题,,我发现我的图片上传之后,图标边缘都有锯齿呢,,我浏览图片是没有锯齿的,,但上传之后就有了呢

  • 超级叶

    2018-09-05 10:10

    @泉子zq: 用角度渐变没错的,你只需要将这个渐变层复制一个,再高斯模糊一下,建立剪切蒙版覆盖再原来的角度渐变上面就好啦!

  • 泉子zq

    2018-09-04 17:37

    你好,能给我说下倒数第二个图标,中间打那个点是怎么去的么,,用的角度渐变,之后那个中间点很凸出,,我想不到办法去了

  • 超级叶

    2018-08-31 16:11

    @筱筱筱筱雪: 学到了记得交作业哦 哈哈

  • 超级叶

    2018-08-31 16:11

    @刘阿bao: 不客气

  • 超级叶

    2018-08-31 16:10

    @_凉块: 哈哈,讲的是外轮廓的绘制,图标画好了嵌入进去就可以啦

  • 超级叶

    2018-08-31 16:09

    @BruceXLS: 试了一下,选择多边形,设置4边,勾选平滑拐角,确实成功了~ 好棒

  • 超级叶

    2018-08-31 16:06

    @留青青: 棒棒哒

  • 留青青

    2018-08-31 09:24

    也可以在ps里面画圆角矩形然后膨胀 就不用旋转了

  • 喆阿

    2018-08-31 08:20

    膨胀膨胀

  • BruceXLS

    2018-08-30 20:15

    还有一个更快的方式,直接ps选择绘制多边形,4边,圆角

  • 劲竹雨露

    2018-08-30 18:30

    哈哈,简单明了,我也膨胀了哈哈

  • 娜么萌

    2018-08-30 17:06

    AI扩展外观之后还是原来的大小诶?

  • 鸭头冉冉

    2018-08-29 16:58

    @_凉块: 哈哈哈 同感,膨胀了,笔记本都拿出来准备记了

  • _凉块

    2018-08-29 16:44

    兴高采烈的以为今天可以学做一个精致的小图标,然后看完教程qwq。我也膨胀了。

  • 刘阿bao

    2018-08-29 14:27

    很方便,多谢

  • 筱筱筱筱雪

    2018-08-29 10:16

    简单方便 学到了

  • Jane1221

    2018-08-29 09:54

    简单却很好玩

  • Healer湫

    2018-06-26 18:10

    当你点击膨胀的时候,我整个人都开阔了哈哈

  • Pheye

    2018-05-23 18:06

    原来有这么多思路······开眼

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

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

投票