How do I make an ‘S’ curve?

AB
Posted By
Arcfus Barcwinkle
Aug 11, 2005
Views
464
Replies
8
Status
Closed
I’d like to create a web graphic that includes a smooth ‘S’ curve. It would primarly be a horizontal line separating the top header area from the rest of the page, but it would have a curve in it.

Here is an extremely bad free-hand idea of what I want to do:

http://www.ssih.com/scurve.gif

I’ve had minor success screwing around with pieces of ovals and trying to match them up, but I have to suspect that there is a better way.

Master Retouching Hair

Learn how to rescue details, remove flyaways, add volume, and enhance the definition of hair in any photo. We break down every tool and technique in Photoshop to get picture-perfect hair, every time.

N
nomail
Aug 11, 2005
Arcfus Barcwinkle wrote:

I’d like to create a web graphic that includes a smooth ‘S’ curve. It would primarly be a horizontal line separating the top header area from the rest of the page, but it would have a curve in it.

Here is an extremely bad free-hand idea of what I want to do:
http://www.ssih.com/scurve.gif

I’ve had minor success screwing around with pieces of ovals and trying to match them up, but I have to suspect that there is a better way.

That is what the freehand tools (path tools) are for.


Johan W. Elzenga johan<<at>>johanfoto.nl Editor / Photographer http://www.johanfoto.nl/
FN
Flo Nelson
Aug 11, 2005
"Arcfus Barcwinkle" wrote in message
I’d like to create a web graphic that includes a smooth ‘S’ curve. It would primarly be a horizontal line separating the top header area from the rest of the page, but it would have a curve in it.

Here is an extremely bad free-hand idea of what I want to do:
http://www.ssih.com/scurve.gif

I’ve had minor success screwing around with pieces of ovals and trying to match them up, but I have to suspect that there is a better way.

Draw it with the pen tool. If you have Illustrator, I find it easier to do with that program.

Flo
I
iehsmith
Aug 11, 2005
On 8/11/05 9:31 AM, Arcfus Barcwinkle uttered:

I’d like to create a web graphic that includes a smooth ‘S’ curve. It would primarly be a horizontal line separating the top header area from the rest of the page, but it would have a curve in it.

Here is an extremely bad free-hand idea of what I want to do:
http://www.ssih.com/scurve.gif

I’ve had minor success screwing around with pieces of ovals and trying to match them up, but I have to suspect that there is a better way.

Almost hate to mention it, but if you want a quick sort of cheat: make a wide, oversized rectangle for the top portion on a separate layer, might want to make it larger than you need so you can play with rotation; Sroke/Outside;
Then Filter:Distort:Twirl… maybe -90 or so;
Rotate if you want a different angle
(you can apply stroke after, but I think the results are smoother and more ‘fluid’ if applied first)

www.imagessence.com/imageviewer/s-curve.gif (unrotated)

inez
GV
Gerard Verhoef
Aug 12, 2005
Reading the different answers here, I’m not sure
– if my simple solution is mentioned already
– if this solution is somehow "wrong", or not intenden by the OP

I just wondered.

I would draw a bezier path with the pentool and stroke it. do do that follow these simple steps:

1 chose a brush size and foregroundcolor
2 with the pentool leftclick (windows) at the startingpoint of the curve 3 keep the leftbutton pressed and move a couple of inches in the right direction
4 you will see two handles coming out of the starting point 5 release the left mousebutton and move the mouse to the end of the curve 6 again: leftclick and move the mouse
7 again the handles appear.
8 use the handles to adjust the curve. Its very intuitive 9 on the path pallet, chose the stroke path with brush icon at the bottom of the pallet

done

Gerard
T
Tacit
Aug 14, 2005
In article ,
Arcfus Barcwinkle wrote:

I’d like to create a web graphic that includes a smooth ‘S’ curve. It would primarly be a horizontal line separating the top header area from the rest of the page, but it would have a curve in it.

Easy as pie. Use the Pen tool to create an S-shaped path, then stroke the path.


Art, photography, shareware, polyamory, literature, kink: all at http://www.xeromag.com/franklin.html
S
Sean
Aug 15, 2005
On Thu, 11 Aug 2005 10:31:50 -0400, Arcfus Barcwinkle
reverently intoned upon the aether:

I’d like to create a web graphic that includes a smooth ‘S’ curve. It would primarly be a horizontal line separating the top header area from the rest of the page, but it would have a curve in it.

Here is an extremely bad free-hand idea of what I want to do:
http://www.ssih.com/scurve.gif

I’ve had minor success screwing around with pieces of ovals and trying to match them up, but I have to suspect that there is a better way.

Another solution using the Pen Tool again is to create a path that outlines the S-curved shape you want. Then transform the path into a selection (likely feathered by 1 pixel to prevent aliasing) and fill the selection with the desired color.

Using Snap To and the Grid would make this version easier.

Albeit, I think achieving a uniform width for the S-curve would be easier if you stroke the path.

enjoy,

Sean

"In the End, we will remember not the words of our enemies, but the silence of our friends."

– Martin Luther King Jr. (1929-1968)

New Website
http://www.envisagement.com/
Last Updated 23 June 2005
T
Tacit
Aug 15, 2005
In article ,
Sean wrote:

Another solution using the Pen Tool again is to create a path that outlines the S-curved shape you want. Then transform the path into a selection (likely feathered by 1 pixel to prevent aliasing) and fill the selection with the desired color.

By default, a selection made from a path is anti-aliased. Feathering it simply makes it fuzzy, with a blurry edge. This is often undesirable.


Art, photography, shareware, polyamory, literature, kink: all at http://www.xeromag.com/franklin.html
S
Sean
Aug 16, 2005
On Mon, 15 Aug 2005 13:31:13 GMT, tacit reverently
intoned upon the aether:

In article ,
Sean wrote:

Another solution using the Pen Tool again is to create a path that outlines the S-curved shape you want. Then transform the path into a selection (likely feathered by 1 pixel to prevent aliasing) and fill the selection with the desired color.

By default, a selection made from a path is anti-aliased. Feathering it simply makes it fuzzy, with a blurry edge. This is often undesirable.

Not true in photo work. Unfeathered selections tend to leave tell-tales of manipulation even with anti-aliasing turned on. Albeit, in this case it is illustration and perhaps unneeded.

And my personal experience with anti-aliased selections from paths is that they are badly aliased rather than terribly badly aliased. Albeit, I mostly do photo work in PS so that affects what I see.

enjoy,

Sean

"In the End, we will remember not the words of our enemies, but the silence of our friends."

– Martin Luther King Jr. (1929-1968)

New Website
http://www.envisagement.com/
Last Updated 23 June 2005

How to Improve Photoshop Performance

Learn how to optimize Photoshop for maximum speed, troubleshoot common issues, and keep your projects organized so that you can work faster than ever before!

Related Discussion Topics

Nice and short text about related topics in discussion sections