Jump to content
You must now use your email address to sign in [click for more info] ×

How would you draw a perfect S


Recommended Posts

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.

Link to comment
Share on other sites

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.

☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan
☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2

Link to comment
Share on other sites

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

Perfect_S.png

 

Best regards!

Link to comment
Share on other sites

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

Or these here:

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

 

☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan
☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2

Link to comment
Share on other sites

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:

5a69cf816089d_donuttosshape.png.e6f0b25469e1de37d75717e9cd3411fd.png

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:

5a69e722a5b8f_LotsofSs.png.20e9591483020aca58eeda0d2d422394.png

Lots of S's.afdesign

Edited by R C-R

All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7

Link to comment
Share on other sites

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

Link to comment
Share on other sites

20 minutes ago, Vince42 said:

@ChristAlix

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

Try FastStone Capture.

Affinity Store (MSI/EXE): Affinity Suite (ADe, APh, APu) 2.4.0.2301
Dell OptiPlex 7060, i5-8500 3.00 GHz, 16 GB, Intel UHD Graphics 630, Dell P2417H 1920 x 1080, Windows 11 Pro, Version 23H2, Build 22631.3155.
Dell Latitude E5570, i5-6440HQ 2.60 GHz, 8 GB, Intel HD Graphics 530, 1920 x 1080, Windows 11 Pro, Version 23H2, Build 22631.3155.
Intel NUC5PGYH, Pentium N3700 2.40 GHz, 8 GB, Intel HD Graphics, EIZO EV2456 1920 x 1200, Windows 10 Pro, Version 21H1, Build 19043.2130.

Link to comment
Share on other sites

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.

 

Alfred spacer.png
Affinity Designer/Photo/Publisher 2 for Windows • Windows 10 Home/Pro
Affinity Designer/Photo/Publisher 2 for iPad • iPadOS 17.4.1 (iPad 7th gen)

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

MacBook Pro 15" 32GB RAM, iPad Pro 12.9" + Magic Keyboard, Apple Pencil.  Software tools of my trade: Affinity Designer | Affinity Publisher | PDF Expert | Drafts | The Archive | Plutio  

https://eandrpublications.com.au

Link to comment
Share on other sites

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.

iMac 27" 2019 Somona 14.3.1, iMac 27" Affinity Designer, Photo & Publisher V1 & V2, Adobe, Inkscape, Vectorstyler, Blender, C4D, Sketchup + more... XP-Pen Artist-22E, - iPad Pro 12.9  
B| (Please refrain from licking the screen while using this forum)

Affinity Help - Affinity Desktop Tutorials - Feedback - FAQ - most asked questions

Link to comment
Share on other sites

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.

Alfred spacer.png
Affinity Designer/Photo/Publisher 2 for Windows • Windows 10 Home/Pro
Affinity Designer/Photo/Publisher 2 for iPad • iPadOS 17.4.1 (iPad 7th gen)

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 10 months later...

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.

Screen-Shot-2018-12-14-at-07-44-27.png

iMac 27" 2019 Somona 14.3.1, iMac 27" Affinity Designer, Photo & Publisher V1 & V2, Adobe, Inkscape, Vectorstyler, Blender, C4D, Sketchup + more... XP-Pen Artist-22E, - iPad Pro 12.9  
B| (Please refrain from licking the screen while using this forum)

Affinity Help - Affinity Desktop Tutorials - Feedback - FAQ - most asked questions

Link to comment
Share on other sites

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:

C338076A-9B68-47F7-86B5-A84F4F544E04.thumb.png.1bf94251dd94f23612a73ea7a4ee900e.png

Alfred spacer.png
Affinity Designer/Photo/Publisher 2 for Windows • Windows 10 Home/Pro
Affinity Designer/Photo/Publisher 2 for iPad • iPadOS 17.4.1 (iPad 7th gen)

Link to comment
Share on other sites

These crazy ass rebel fontgraphers :P

iMac 27" 2019 Somona 14.3.1, iMac 27" Affinity Designer, Photo & Publisher V1 & V2, Adobe, Inkscape, Vectorstyler, Blender, C4D, Sketchup + more... XP-Pen Artist-22E, - iPad Pro 12.9  
B| (Please refrain from licking the screen while using this forum)

Affinity Help - Affinity Desktop Tutorials - Feedback - FAQ - most asked questions

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.