How would you draw a perfect S

[Vince42]

I need to draw a perfect symmetric "S" in a graphic.

 

I used the pen tool with pen mode and smart mode and created the shape that I needed - well, almost. 

Is there a way to create an S shape, where you do not need to adjust every node separately? Is ist possible to link nodes symmetrically or to distribute the nodes under symmetric constraints, so that I do not have to worry about whether the middle part is really in the middle etc.

 

What would be your approach?

Just curious.

[v_kyr]

I would just use the artistic text tool, select a font style where I like the S, then type this one and convert it to editable curves/nodes afterwards.

[Mithferion]

Using two circles:

• Draw them
• Snap them
• Convert them to curves
• Create a node in the strategic points
• Break and delete. And there you have it

 

Best regards!

[Vince42]

@v_kyr I tried that already - it does not really solve my issue, when I have to modify the shape afterwards.

@Mithferion This is a very good approach - at least this allows me to have the "construction set" of my S shape in an artboard, in case the shape has to be modified later on - thank you for the good idea!

[v_kyr]

Thus I said select the font style for the "S", like for example this one.

Or these here:

• das_s.afdesign

Another way is to do a sort of centerline trace from a selected letter:

• s_one.afdesign

 

[ChristAlix]

How about these versions?

 

S-Form_01.afdesign

S-Form_02.afdesign

 

 

With this type of drawing you have full control over curves, ends, strokes and even line style. If you are satisfied with the sketch, you can use the function "Expand Stroke" and get curves version.

[R C-R]

Overall, I think the method suggested by @ChristAlix is the most elegant, easiest, & most flexible. There is one minor issue with it if the Expand Stroke option is used, which allows the shape to have a separate stroke & fill color. The issue is caused by a bug in the Expand Stroke function that typically adds lots of unneeded nodes to the resulting curve. That isn't normally a problem but if for some reason you want to eliminate (almost) all the extras, one way to do that that might sometimes be useful is to start with a donut shape & do something like this:

Notes:

• The start angle can be varied in step 1 to make a more or less curvy S shape, but the end angle should remain at 270°.

• After deleting the unneeded curve In step 3, one or more nodes could be added at the squared off end to create rounder or more bulbous ends for the S shape.

• In Step 5, all the nodes of the duplicated & flipped curve must be selected so they will all move at once & snap to the 2 bottom nodes of the other curve.

• Breaking the converted curve is only necessary so that in step 5 snapping will work for precise alignment -- if just two donut shapes were used there would be no nodes to snap to.

• The 2 extra nodes are the result of another bug in the app that affects geometry operations. If anybody knows a workaround for that, please post it!

 

I realize this is a lot of extra work that usually would not be needed, & there may be a better way than this when it is. Any thoughts on that?

 

EDIT: Doh! I just realized in Step 6 I mentioned adding the two curves. That is not what I did. Instead I selected both curves with the Node Tool & used the Join Curves & Close Curve Actions on the Context Toolbar to combine them into one curve. Using Add instead results in a "(Curves)" object. That results in two closed curves & strokes where they meet, which pretty much makes that useless for applying a separate stroke & fill to the S!

 

Sorry about that. 

 

EDIT #2: Well, it may require extra work, but once I started playing around with this method, I found it a bit addictive & generated a bunch of variations like these:

Lots of S's.afdesign

Edited January 25, 2018 by R C-R

[ChristAlix]

1 hour ago, R C-R said:

Overall, I think the method suggested by @ChristAlix is the most elegant, easiest, & most flexible. There is one minor issue with it if the Expand Stroke option is used, which allows the shape to have a separate stroke & fill color. The issue is caused by a bug in the Expand Stroke function that typically adds lots of unneeded nodes to the resulting curve.

 

Hi R C-R,

 

i noticed this phenomenon with the function "Expand Stroke" yesterday and reported it as a bug.

 

 

PS: Your variant R C-R, with the Donut Shape find is also good!

 

Alex

[Vince42]

@ChristAlix

Just a "side question": which tool are you using to create the animations?

[Pšenda]

20 minutes ago, Vince42 said:

@ChristAlix

Just a "side question": which tool are you using to create the animations?

Try FastStone Capture.

[Alfred]

32 minutes ago, Pšenda said:

Try FastStone Capture.

 

FastStone Capture is a great utility, but it only runs on Windows and the screen recorder output is limited to WMV (Windows Media Video) format.

 

[ChristAlix]

3 hours ago, Vince42 said:

@ChristAlix

Just a "side question": which tool are you using to create the animations?

 

ScreenToGif (portable edition):  Screen, webcam and sketchboard recorder with an integrated editor.

It is for windows and requires .Net Framework 4.6.1 (already included in Win10) or above.

On GitHub: https://github.com/NickeManarin/ScreenToGif/

 

http://www.screentogif.com/

http://www.screentogif.com/downloads.html

[misc33]

To continue the side question, anything equivalent in screen capture for Mac that you know of? Those were really well presented, ChristAlix.

[Butler To Cats]

See https://alternativeto.net/software/screentogif/?platform=mac for several suggested Mac alternatives (with various features) for ScreenToGIF.

[lepr]

.

[firstdefence]

Camtasia 3 exports to gif

screenflow is good but both cost, the free option is OBS, a bit quirky but very good for free.

 

Camtasia is win and Mac, screenflow is Mac and OBS is Mac Linux and win.

[Alfred]

8 hours ago, obtusity said:

See https://alternativeto.net/software/screentogif/?platform=mac for several suggested Mac alternatives (with various features) for ScreenToGIF.

 

I see that LICEcap is first on that list. It’s easy to use and works well on Windows, so I have no reason to think it wouldn’t also be a good option for Mac users.

[ChristAlix]

12 hours ago, misc33 said:

To continue the side question, anything equivalent in screen capture for Mac that you know of? Those were really well presented, ChristAlix.

 

For MAC I personally can't name an alternative, but from my circle of friends the program "Filmora Scrn" from Wondershare is often used.  

Available in WIN and MAC versions, has several tracks, filters etc... but is not freeware! 

https://filmora.wondershare.com/screen-recorder/

 

PS: A friend of mine has just recommended the program "Monosnap".
I don't know it myself but there are for WIN and MAC
https://www.monosnap.com

[v_kyr]

Another simple to use one is Monosnap (Mac + Win).

[Vince42]

Cool, I successfully hijacked my own thread. 

Thanks everybody!

[h0wi3]

This is great, thank you!

[firstdefence]

I've always known an S to be slightly larger at the bottom than at the top like in the image below, to me this looks more balanced.

[Alfred]

5 hours ago, firstdefence said:

I've always known an S to be slightly larger at the bottom than at the top

 

It’s usually that way around, but it isn’t by any means an inviolable rule! Here’s a sample of Concurso Moderne BTN:

[firstdefence]

These crazy ass rebel fontgraphers