7

Ask DN: Drawing a superellipse with Sketch?

over 4 years ago from

On a day when Ive was so exhausted that it seemed possible he might fall asleep while talking, he became animated when describing the “primitive” design geometry that was usual before the computer era—essentially, two straight lines joined by a fragment of a circle. He then spoke of the opportunities that now exist, if the material permits, to take a more elegant path from one line to another; he talked of tangency breaks and Bézier surfaces.

Ive was also itching to smooth the corners of iPhone app icons. “They drove me crazy,” he said. “All I could see were these unresolved tangency breaks.”

http://www.newyorker.com/magazine/2015/02/23/shape-things-come

I’ve become more interested in superellipses since reading this, and disappointingly, there doesn’t seem to be any way to create them in Sketch, other than copying the icons provided in the iOS template, and then you don’t get to change the radius of the corners.

I was wondering if anyone had any information on how to create these?

6 comments

  • Marc EdwardsMarc Edwards, over 4 years ago

    It’s worth noting that iOS’ icons aren’t a superellipse (even though I initially thought they were).

    If you want to draw maths based shapes, I recommend Grapher. The only problem doing so, is you’ll end up with lots of line segments, rather than fewer points using cubic bézier curves.

    Illustrator’s blend tool is pretty good at creating superellipse-like shapes.

    6 points
    • Art BlancArt Blanc, 4 years ago

      I just found out that if you export your graph as .pdf from the Grapher.app and open the path in Ai, you can the “stitch” back those paths with the Join command ⌘+J and use the Simplify command from Object → Path → Simplify, with max out curve precision slider to 100% will produce a pretty nice and hopefully accurate curve. Here’s my example:

      Super ellipse simplified

      The outer path was simplified and the rest are the original paths.

      1 point
  • Robin RaszkaRobin Raszka, over 4 years ago

    Use Grapher.app (File > Export > PDF).

    5 points
  • Edouard U.Edouard U., over 4 years ago

    tl;dr — Use a 3d CAD tool like Rhinoceros.

    Most vector-based 'drawing' applications like illustrator or sketch are ill-suited for creating 'mathy' curvatures, since most illustrators don't care too much about ultra-precise blending in their linework.

    Tools like Rhinoceros has been designed to take precise linework and use it for the creation of surfaces or extrusions that blend seamlessly. Think a car that reflects light w/o any breaks.

    This page explains line/surface continuity very well: http://docs.mcneel.com/rhino/5/help/en-us/popup_moreinformation/continuity_descriptions.htm

    2 points
  • Emir BukvaEmir Bukva, over 4 years ago

    You can get pretty darn close if you download Mike Swanson’s iOS Rounded Rect Script for Photoshop (http://blog.mikeswanson.com/iosroundedrect).

    Copy/paste of the path directly from Photoshop won’t work but PS > AI > Sketch should.

    0 points
  • Cihad TurhanCihad Turhan, over 4 years ago (edited over 4 years ago )

    There is a D3.js plugin to create superellipse shapes. Just modify your variables, save SVG result and open in Sketch/AI or any other vector editing app.

    Edit: It doesn't live update parameters. To make it live, paste and run this command in the console: ```javascript control.select('input').on("input", function(d) { var v = scale.invert(this.value); path.attr("d", shape.param(d.key, v)); d3.select(this.nextSibling).text(format(v)); })

    0 points