How do I make an 'S' curve?

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.

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/

"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

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

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

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

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

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

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